Created
February 23, 2022 12:33
-
-
Save nfreear/8d18b46a647d327bc22b2a34ccc13712 to your computer and use it in GitHub Desktop.
Details <details> experiments - dialogs etc. - CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> <title> Details experiments </title> | |
| <style> | |
| /* | |
| https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal | |
| */ | |
| details[open] summary ~ * { | |
| animation: sweep 1s ease-in-out; /* Was: .5s */ | |
| } | |
| @keyframes sweep { | |
| 0% {opacity: 0; margin-left: -10px} | |
| 100% {opacity: 1; margin-left: 0px} | |
| } | |
| details { | |
| font: 1rem/1.5 sans-serif; | |
| } | |
| details .inner, | |
| details summary { | |
| background-color: #f4f4f4; | |
| border: 1px solid #aaa; | |
| border-radius: .2rem; | |
| } | |
| details summary { | |
| border-color: #ddd; | |
| cursor: pointer; | |
| transition: all .5s; | |
| } | |
| /* details .inner { | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } */ | |
| details[ open ] .inner { | |
| padding: 1rem; | |
| } | |
| button { | |
| font-size: inherit; | |
| padding: .3rem 1rem; | |
| } | |
| .bottom, | |
| .X-bottom summary { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| X-padding: .4rem 1rem; | |
| } | |
| .right { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| .right .inner { | |
| overflow: hidden; | |
| width: 1px; | |
| } | |
| .right[ open ] .inner { | |
| position: relative; | |
| top: -1rem; | |
| height: 100vh; | |
| width: 50vh; | |
| } | |
| .right summary { | |
| position: absolute; | |
| list-style-type: none; | |
| transform: rotate(90deg); | |
| top: calc(50vh - 2rem); | |
| right: -1.4rem; | |
| border-color: #aaa; | |
| border-radius: 0 0 .2rem .2rem; | |
| } | |
| .right[ open ] summary { | |
| border-top: none; | |
| right: calc(50vh + .4rem); | |
| } | |
| .bottom summary, | |
| .right summary { | |
| padding: .5rem 1.5rem; | |
| } | |
| .bottom[ open ] .inner { | |
| X-padding: 0 1rem 2rem; | |
| height: auto; | |
| width: 100vw; | |
| } | |
| details summary { | |
| background-color: LightYellow; | |
| } | |
| summary::marker { | |
| color: blue; | |
| font-size: 1.3rem; | |
| } | |
| /* A Modal Dialog? Yes! | |
| */ | |
| details.modal-dialog, | |
| details.modal-dialog summary { | |
| display: inline-block; | |
| list-style-type: none; | |
| } | |
| .modal-dialog summary { | |
| padding: 1px 4px; | |
| } | |
| .modal-dialog summary::marker { | |
| display: none; | |
| } | |
| .modal-dialog .overlay { | |
| background: rgba(230, 230, 230, .85); | |
| cursor: not-allowed; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| .modal-dialog .inner { | |
| background: #fefefe; | |
| border: 1px solid #bbb; | |
| padding: 1rem; | |
| position: absolute; | |
| top: calc(50vh - 4rem); | |
| left: calc(50vw - 8rem); | |
| width: 16rem; | |
| } | |
| </style> | |
| <h1> Details experiments </h1> | |
| <details class="bottom"> | |
| <summary> Toggle </summary> | |
| <div class="inner"> | |
| <p> Hello world! </p> | |
| <p> I'm on the bottom! </p> | |
| </div> | |
| </details> | |
| <details class="right"> | |
| <summary title="Toggle"> Toggle </summary> | |
| <div class="inner"> | |
| <p> Hello world! </p> | |
| <p> I'm on the right! </p> | |
| </div> | |
| </details> | |
| <main> | |
| <div class="para"> | |
| Hello world! | |
| <details class="modal-dialog"> | |
| <summary> Launch dialog </summary> | |
| <div class="overlay"></div> | |
| <div class="inner"> | |
| <p> Hello world! </p> | |
| <p> I'm a modal dialog. </p> | |
| <button class="close-button"> Close </button> | |
| </div> | |
| </details> | |
| Hello world! <a href="#"> Link</a> Hello world! | |
| </div> | |
| </main> | |
| <script> | |
| const DIALOG = document.querySelector('details.modal-dialog'); | |
| const CLOSE_BTN = DIALOG.querySelector('.close-button'); | |
| DIALOG.addEventListener('toggle', ev => { | |
| console.debug('Dialog toggle:', ev) | |
| }); | |
| CLOSE_BTN.addEventListener('click', ev => { | |
| DIALOG.open = false; | |
| console.debug('Dialog close:', ev); | |
| }); | |
| </script> | |
| <pre> | |
| NDF, 13-Feb-2022. | |
| * https://www.cssportal.com/css3-color-names/ | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment