mirror of
https://github.com/kognise/water.css.git
synced 2025-03-15 22:59:38 +01:00
Style changes
This commit is contained in:
parent
f89b85b65e
commit
d785c31c8b
@ -279,9 +279,15 @@
|
||||
</details>
|
||||
|
||||
<p>The dialog (form, and menu) tag</p>
|
||||
<button type='button' id='dialog-trigger'>Show me the dialog!</button>
|
||||
<span id='dialog-result'></span>
|
||||
<dialog id='dialog'>
|
||||
|
||||
<div>
|
||||
<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>
|
||||
<form method="dialog">
|
||||
<p>What is your favorite pet animal?</p>
|
||||
|
@ -78,10 +78,11 @@ copyButton.addEventListener('click', () => {
|
||||
.then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
|
||||
})
|
||||
|
||||
document.getElementById('dialog-trigger').addEventListener('click', function (event) {
|
||||
document.getElementById('dialog-result').innerText = '';
|
||||
document.getElementById('dialog').showModal();
|
||||
});
|
||||
document.getElementById('dialog').addEventListener('close', function (event) {
|
||||
document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`;
|
||||
});
|
||||
document.getElementById('dialog-trigger').addEventListener('click', () => {
|
||||
document.getElementById('dialog-result').innerText = ''
|
||||
document.getElementById('dialog').showModal()
|
||||
})
|
||||
|
||||
document.getElementById('dialog').addEventListener('close', (event) => {
|
||||
document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`
|
||||
})
|
||||
|
@ -112,29 +112,22 @@ summary::-webkit-details-marker {
|
||||
dialog {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--text-main);
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
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;
|
||||
}
|
||||
|
||||
dialog > header {
|
||||
dialog > header:first-child {
|
||||
background-color: var(--background);
|
||||
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
margin: -10px -30px 10px;
|
||||
padding: 10px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: color-mod(var(--background-body) alpha(0.15));
|
||||
background: #0000009c;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
|
@ -8,7 +8,7 @@
|
||||
--text-muted: #70777f;
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
--border: #363636;
|
||||
--border: #dbdbdb;
|
||||
--code: #000;
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #ddd;
|
||||
|
Loading…
x
Reference in New Issue
Block a user