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

Style changes

Browse Source
This commit is contained in:
Kognise
2020-10-02 17:35:01 +00:00
committed by GitHub
parent f89b85b65e
commit d785c31c8b
4 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/index.html
View File

@@ -279,9 +279,15 @@
</details> </details>
<p>The dialog (form, and menu) tag</p> <p>The dialog (form, and menu) tag</p>
<button type='button' id='dialog-trigger'>Show me the dialog!</button>
<span id='dialog-result'></span> <div>
<dialog id='dialog'> <button type="button" id="dialog-trigger">
Show me the dialog!
</button>
<span id="dialog-result"></span>
</div>
<dialog id="dialog">
<header>This is a sample dialog</header> <header>This is a sample dialog</header>
<form method="dialog"> <form method="dialog">
<p>What is your favorite pet animal?</p> <p>What is your favorite pet animal?</p>

15
docs/script.js
View File

@@ -78,10 +78,11 @@ copyButton.addEventListener('click', () => {
.then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000)) .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
}) })
document.getElementById('dialog-trigger').addEventListener('click', function (event) { document.getElementById('dialog-trigger').addEventListener('click', () => {
document.getElementById('dialog-result').innerText = ''; document.getElementById('dialog-result').innerText = ''
document.getElementById('dialog').showModal(); document.getElementById('dialog').showModal()
}); })
document.getElementById('dialog').addEventListener('close', function (event) {
document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`; document.getElementById('dialog').addEventListener('close', (event) => {
}); document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`
})

11
src/parts/_misc.css
View File

@@ -112,29 +112,22 @@ summary::-webkit-details-marker {
dialog { dialog {
background-color: var(--background-alt); background-color: var(--background-alt);
color: var(--text-main); color: var(--text-main);
border: none; border: none;
border-radius: 6px; border-radius: 6px;
border-color: var(--border); border-color: var(--border);
box-shadow: 0 10px 30px color-mod(var(--border) alpha(0.1)), 0 1px 8px color-mod(var(--border) alpha(0.2));
padding: 10px 30px; padding: 10px 30px;
} }
dialog > header { dialog > header:first-child {
background-color: var(--background); background-color: var(--background);
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
margin: -10px -30px 10px; margin: -10px -30px 10px;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
} }
dialog::backdrop { dialog::backdrop {
background: color-mod(var(--background-body) alpha(0.15)); background: #0000009c;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }

2
src/variables-light.css
View File

@@ -8,7 +8,7 @@
--text-muted: #70777f; --text-muted: #70777f;
--links: #0076d1; --links: #0076d1;
--focus: #0096bfab; --focus: #0096bfab;
--border: #363636; --border: #dbdbdb;
--code: #000; --code: #000;
--animation-duration: 0.1s; --animation-duration: 0.1s;
--button-hover: #ddd; --button-hover: #ddd;