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

Add theme switcher

Browse Source
This commit is contained in:
Kognise
2019-04-05 09:09:13 -04:00
parent 22cae7e386
commit aabd59c3ea
3 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/index.html
View File

@@ -22,7 +22,7 @@
<p> <p>
Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you. Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
</p> </p>
<a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150490&theme=dark' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a> <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img id='ph' src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150490&theme=dark' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
<h2>Is it responsive?</h2> <h2>Is it responsive?</h2>
<p> <p>
@@ -32,6 +32,7 @@
<p> <p>
In fact, try resizing this page. Everything flows super nicely as you'll see. In fact, try resizing this page. Everything flows super nicely as you'll see.
</p> </p>
<button id='switch'>Switch theme</button>
<h2>More elements</h2> <h2>More elements</h2>
<p> <p>
@@ -59,6 +60,8 @@
<input type='submit'> <input type='submit'>
</form> </form>
<input disabled placeholder='This is disabled'> <input disabled placeholder='This is disabled'>
<input readonly placeholder='This is readonly'> <input readonly value='This is readonly'>
<script src='script.js'></script>
</body> </body>
</html> </html>

11
docs/script.js Normal file
View File

@@ -0,0 +1,11 @@
document.getElementById('switch').addEventListener('click', () => {
const { body } = document
const ph = document.getElementById('ph')
if (body.className) {
body.className = ''
ph.src = ph.src.replace('theme=light', 'theme=dark')
} else {
body.className = 'light'
ph.src = ph.src.replace('theme=dark', 'theme=light')
}
})

5
water.css
View File

@@ -64,12 +64,9 @@ input[type='checkbox']:active, input[type='submit']:active, input[type='button']
transform: translateY(2px); transform: translateY(2px);
} }
input:read-only, input:disabled {
cursor: not-allowed;
}
input:disabled { input:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed;
} }
body.light { body.light {