1
0
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:
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

View File

@ -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>

View File

@ -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}`
})

View File

@ -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);
}

View File

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