A Pen by Hillary Thomas on CodePen.
Created
June 27, 2022 08:35
-
-
Save yuri-ktm/3e8d8efe7df08a3e2a7cc7d2e0eebc4c to your computer and use it in GitHub Desktop.
Pure CSS Drawers
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
| mixin drawer(position) | |
| .chest__drawer.drawer(data-position=position) | |
| details | |
| summary | |
| .drawer__structure | |
| .drawer__panel.drawer__panel--back | |
| block | |
| .drawer__panel.drawer__panel--bottom | |
| .drawer__panel.drawer__panel--right | |
| .drawer__panel.drawer__panel--left | |
| .drawer__panel.drawer__panel--front | |
| .chest | |
| .chest__panel.chest__panel--back | |
| .chest__panel.chest__panel--top | |
| .chest__panel.chest__panel--bottom | |
| .chest__panel.chest__panel--right | |
| .chest__panel.chest__panel--front | |
| .chest__panel.chest__panel--front-frame | |
| .chest__panel.chest__panel--left | |
| +drawer(1) | |
| span CSS | |
| +drawer(2) | |
| span is | |
| +drawer(3) | |
| - for (const letter of "Awesome".split('')) | |
| span.letter= letter |
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
| // It's in the drawer |
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
| * | |
| *:after | |
| *:before | |
| box-sizing border-box | |
| transform-style preserve-3d | |
| will-change transform | |
| :root | |
| --bg hsl(210, 32%, 80%) | |
| --hover 0.05 | |
| --default 0.01 | |
| --limit 0.9 | |
| --height 30 | |
| --width 20 | |
| --depth 15 | |
| --frame 1 | |
| --handle hsl(0, 0%, 80%) | |
| --hue 10 | |
| --saturation 0% | |
| --drawer-one hsl(0, 0%, 98%) | |
| --drawer-two hsl(0, 0%, 90%) | |
| --drawer-three hsl(0, 0%, 95%) | |
| --unit-one 'hsl(%s, %s, 50%)' % (var(--hue) var(--saturation)) | |
| --unit-two 'hsl(%s, %s, 40%)' % (var(--hue) var(--saturation)) | |
| --unit-three 'hsl(%s, %s, 20%)' % (var(--hue) var(--saturation)) | |
| --unit-four 'hsl(%s, %s, 15%)' % (var(--hue) var(--saturation)) | |
| --transition 0.2s | |
| body | |
| background var(--bg) | |
| display grid | |
| place-items center | |
| min-height 100vh | |
| transform scale(1.5) | |
| .chest | |
| height calc(var(--height) * 1vmin) | |
| transform translate3d(0, 0, 50vmin) rotateX(-32deg) rotateY(40deg) | |
| width calc(var(--width) * 1vmin) | |
| color hsl(0, 10%, 10%) | |
| &__panel | |
| position absolute | |
| &--back | |
| background var(--unit-two) | |
| &--back | |
| &--front | |
| height 100% | |
| width 100% | |
| transform translate3d(0, 0, calc(var(--depth) * var(--coefficient))) | |
| &--front-frame | |
| height 100% | |
| width 100% | |
| border calc(var(--frame) * 1vmin) solid var(--unit-one) | |
| border-bottom-width calc(var(--frame) * 2vmin) | |
| transform translate3d(0, 0, 0) | |
| &:after | |
| &:before | |
| content '' | |
| background var(--unit-one) | |
| height calc(var(--frame) * 1.5vmin) | |
| width calc(var(--width) * 1vmin) | |
| position absolute | |
| transform translate(-50%, -50%) | |
| left 50% | |
| &:after | |
| top calc(100 / 3 * 1.01%) | |
| &:before | |
| // Tiny little adjustment to cover the hole. | |
| top calc(100 / 3 * 2.01%) | |
| &--front | |
| --coefficient 0.5vmin | |
| &--back | |
| --coefficient -0.5vmin | |
| &--left | |
| &--right | |
| height 100% | |
| left 50% | |
| width calc(var(--depth) * 1vmin) | |
| background var(--unit-three) | |
| transform translate(-50%, 0) rotateY(90deg) translate3d(0, 0, calc(var(--width) * var(--coefficient))) | |
| &--right | |
| width calc((var(--depth) * 1vmin) + 2px) | |
| --coefficient 0.5vmin | |
| &--left | |
| --coefficient -0.5vmin | |
| &--top | |
| &--bottom | |
| height calc(var(--depth) * 1vmin) | |
| width calc(var(--width) * 1vmin) | |
| background var(--unit-two) | |
| &--top | |
| top 0 | |
| width calc((var(--width) * 1vmin) + 0.1vmin) | |
| height calc((var(--depth) * 1vmin) + 0.1vmin) | |
| left 50% | |
| transform translate(-50%, -50%) rotateX(-90deg) | |
| &--bottom | |
| bottom 0 | |
| transform translate(0, 50%) rotateX(-90deg) | |
| &__drawer | |
| --drawer-height calc((var(--height) - (5 * var(--frame))) / 3) | |
| position absolute | |
| top var(--top, 0) | |
| left 50% | |
| height calc(var(--drawer-height) * 1vmin) | |
| width calc((var(--width) - (2 * var(--frame))) * 1vmin) | |
| transform translate3d(-50%, 0, calc((var(--depth) * 0.5vmin) + 0.01vmin)) | |
| &[data-position="1"] | |
| --index 1 | |
| --top calc(var(--frame) * 1vmin) | |
| &[data-position="2"] | |
| --index 2 | |
| --top calc(((2 * var(--frame)) + var(--drawer-height)) * 1vmin) | |
| &[data-position="3"] | |
| --index 3 | |
| --top calc(((3 * var(--frame)) + (2 * var(--drawer-height))) * 1vmin) | |
| .drawer | |
| &__structure | |
| height 100% | |
| width 100% | |
| position absolute | |
| top 0 | |
| left 0 | |
| &__panel | |
| position absolute | |
| &--left | |
| &--right | |
| width calc(var(--depth) * 1vmin) | |
| height 65% | |
| background var(--drawer-two) | |
| bottom 1% | |
| &--left | |
| // left calc((var(--frame) * 1vmin) + 1px) | |
| left 0 | |
| transform-origin 0 50% | |
| transform rotateY(90deg) | |
| &--right | |
| right calc((var(--frame) * 1vmin) + 1px) | |
| right 0 | |
| transform-origin 100% 50% | |
| transform rotateY(-90deg) | |
| &--front | |
| height calc((var(--drawer-height) + (0.6 * var(--frame))) * 1vmin) | |
| width calc((var(--width) - (0.6 * var(--frame))) * 1vmin) | |
| top 50% | |
| left 50% | |
| transform translate3d(-50%, -50%, 1px) | |
| background var(--unit-four) | |
| &--bottom | |
| &--back | |
| width calc(100% - (2vmin * var(--frame))) | |
| width 100% | |
| &--bottom | |
| height calc(var(--depth) * 1vmin) | |
| background var(--drawer-three) | |
| bottom 5% | |
| left 50% | |
| transform-origin 50% 100% | |
| transform translate(-50%, 0) rotateX(90deg) | |
| &--back | |
| height 65% | |
| background var(--drawer-one) | |
| bottom 1% | |
| left 50% | |
| transform translate3d(-50%, 0, calc(var(--depth) * -1vmin)) | |
| text-align center | |
| line-height calc(var(--drawer-height) * 0.65vmin) | |
| font-size 3vmin | |
| font-family sans-serif | |
| font-weight bold | |
| .letter | |
| color 'hsl(%s, 80%, 50%)' % var(--hue) | |
| display inline-block | |
| animation wave calc(var(--open) * 1s) calc(var(--delay) * -0.1s) infinite ease-in-out | |
| &:nth-of-type(1) | |
| --hue 15 | |
| --delay 0 | |
| &:nth-of-type(2) | |
| --hue 35 | |
| --delay 1 | |
| &:nth-of-type(3) | |
| --hue 45 | |
| --delay 2 | |
| &:nth-of-type(4) | |
| --hue 90 | |
| --delay 3 | |
| &:nth-of-type(5) | |
| --hue 180 | |
| --delay 4 | |
| &:nth-of-type(6) | |
| --hue 260 | |
| --delay 5 | |
| &:nth-of-type(7) | |
| --hue 320 | |
| --delay 6 | |
| @keyframes wave | |
| 0%, 100% | |
| transform translate3d(0, 10%, 1px) | |
| 50% | |
| transform translate3d(0, -10%, 1px) | |
| details | |
| position absolute | |
| height 100% | |
| width 100% | |
| top 0 | |
| left 0 | |
| cursor pointer | |
| outline transparent | |
| // Responsible for opening/closing | |
| details | |
| &:hover:not([open]) | |
| &:hover:not([open]) + .drawer__structure | |
| --open var(--hover) | |
| details | |
| .drawer__structure | |
| transition transform var(--transition) | |
| &[open] | |
| &[open] + .drawer__structure | |
| --open var(--limit) | |
| transform translate3d(0, 0, calc((var(--open, var(--default)) * var(--depth)) * 1vmin)) | |
| summary | |
| outline transparent | |
| height 100% | |
| width 100% | |
| &::-webkit-details-marker | |
| display none | |
| &:after | |
| content '' | |
| position absolute | |
| background linear-gradient(var(--handle), var(--handle)) 50% 15% / 40% 8% no-repeat, transparent | |
| height 110% | |
| width 110% | |
| top 50% | |
| left 50% | |
| transform translate3d(-50%, -50%, 0.5vmin) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment