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

feat: add transitions for the code snippets

Browse Source
This commit is contained in:
Jonas Kuske
2020-05-30 03:58:04 +02:00
parent d93d03acd5
commit 24ac400205
3 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/index.html
View File

@@ -114,7 +114,7 @@
</div>
<h2>Installation</h2>
<div id="installation" class="version-select">
<div id="installation">
<header class="row version-select-snippet">
<h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
<button type="button" id="copy-snippet">
@@ -122,7 +122,11 @@
</button>
</header>
<pre><code id="link-snippet">Oh noes, the JavaScript hasn't loaded!</code></pre>
<div id="link-snippet-container">
<pre id="link-snippet-auto"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/water.css"></code></pre>
<pre hidden id="link-snippet-dark"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/dark.css"></code></pre>
<pre hidden id="link-snippet-light"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/light.css"></code></pre>
</div>
<h3>Options</h3>
<form id="theme-form">

9
docs/script.js
View File

@@ -1,6 +1,5 @@
'use strict'
const cdnBase = 'https://cdn.jsdelivr.net/npm/water.css@2/dist/'
const localBase = './water.css/'
const fileSizes = {
@@ -10,10 +9,10 @@ const fileSizes = {
}
const themeForm = document.getElementById('theme-form')
const linkSnippet = document.getElementById('link-snippet')
const stylesheet = document.getElementById('js-stylesheet')
const startupStylesheet = document.getElementById('js-startup-stylesheet')
const productHunt = document.getElementById('product-hunt')
const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
const table = {
fileName: document.getElementById('table-file-name'),
@@ -33,12 +32,14 @@ const updateTheme = () => {
const theme = themeForm.querySelector('input[name="theme"]:checked').value
const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
const cdnUrl = `${cdnBase}${fileName}`
const localUrl = `${localBase}${fileName}`
stylesheet.href = localUrl
linkSnippet.innerText = `<link rel="stylesheet" href="${cdnUrl}">`
for (const snippet of linkSnippets) {
snippet.hidden = snippet.id.indexOf(theme) === -1
}
table.fileName.innerText = fileName
table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb`

27
docs/style.css
View File

@@ -6,10 +6,6 @@ html {
margin-top: 1rem;
}
.version-select {
overflow: hidden;
}
.version-select-snippet h3 {
margin: 1rem 2.5rem 1rem 0;
}
@@ -67,4 +63,25 @@ body > footer {
Droid Sans,
Helvetica Neue,
sans-serif;
}
}
#link-snippet-container {
overflow: hidden;
display: grid;
display: -ms-grid;
-ms-grid-columns: 1fr;
}
#link-snippet-container > pre {
overflow: auto;
grid-column: 1;
grid-row: 1;
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 220ms;
}
#link-snippet-container > pre[hidden] {
display: block;
visibility: hidden;
transform: scale(0);
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0ms 220ms;
}