mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-30 00:10:28 +02:00
Code Issues Releases Wiki Activity

refactor: add HTML processing, picker as partial

Browse Source
This commit is contained in:
Jonas Kuske
2019-05-31 03:31:15 +02:00
parent 75f9280dab
commit 6bf48e1615
9 changed files with 954 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
docs/index.html
View File

@@ -82,125 +82,8 @@
</a>
</div>
<!-- Start interactive version picker -->
<div id="installation" v-cloak>
<h2>Installation</h2>
<div style="overflow: hidden">
<header class="row">
<h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
<button type="button" @click="copyToClipboard">
<transition>
<span v-if="copyStatus === 'success'" class="emoji">✔</span>
<span v-else-if="copyStatus === 'failed'" class="emoji">❌</span>
</transition>
Copy to clipboard
</button>
</header>
<transition mode="out-in">
<pre :key="selectedVersion.fileSnippet"><code>{{selectedVersion.fileSnippet}}</code></pre>
</transition>
<h3>Version options:</h3>
<form action="./" method="post" @submit.prevent>
<label>
<input type="radio" value="dark" checked name="theme" v-model="versionOptions.theme" />
Dark theme <span class="emoji">🌙</span>
<span
v-if="!versionOptions.isStandalone"
class="emoji translucent"
title="Selected theme may be overwritten by theme settings on user's device"
>
/ ☀</span
>
</label>
<label>
<input type="radio" value="light" name="theme" v-model="versionOptions.theme" />
Light theme <span class="emoji">☀</span>
<span
v-if="!versionOptions.isStandalone"
class="emoji translucent"
title="Selected theme may be overwritten by theme settings on user's device"
>
/ 🌙</span
>
</label>
<br /><br />
<label>
<input type="checkbox" checked v-model="versionOptions.isStandalone" />
Enforce theme? (ignore <code>prefers-color-scheme</code>)
</label>
<br /><br />
<label>
<input type="checkbox" v-model="versionOptions.isLegacy" />
Support Internet Explorer and other legacy browsers?
</label>
</form>
<h3>Version info:</h3>
<table>
<tbody>
<tr>
<th>File</th>
<td>{{ selectedVersion.fileName }}</td>
</tr>
<tr>
<th>Size (min+gzip)</th>
<td>{{ selectedVersion.fileSize }}KB</td>
</tr>
<tr>
<th>Theme</th>
<td>
<template v-if="versionOptions.isStandalone">
<span v-if="versionOptions.theme === 'dark'" class="emoji">🌙</span>
<span v-else class="emoji">☀</span>
{{ versionOptions.theme | capitalize }}
</template>
<template v-else>
<span
v-if="versionOptions.theme === 'dark'"
class="emoji"
title="Selected theme may be overwritten by theme settings on user's device"
>
🌙<span class="translucent"> / ☀</span>
</span>
<span
v-else
class="emoji"
title="Selected theme may be overwritten by theme settings on user's device"
>
☀ <span class="translucent"> / 🌙</span></span
>
Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
(detected via <code>prefers-color-scheme</code>)
<template v-if="preferedColorScheme">
<br />Your device is currently set to {{ preferedColorScheme }} mode.
</template>
</template>
</td>
</tr>
<tr>
<th>Browser support</th>
<td>
<template v-if="versionOptions.isLegacy">
All browsers (including Internet Explorer)
</template>
<template v-else>
All current browsers (<a href="https://caniuse.com/#feat=css-variables"
>support for CSS Custom Properties</a
>)
</template>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End interactive version picker -->
<h2>Installation</h2>
<include src="./versionpicker.html"></include>
<h2 id="goals">Goals</h2>
<ul>