diff options
Diffstat (limited to 'src/components/organisms/toolbar/toolbar-items.module.scss')
| -rw-r--r-- | src/components/organisms/toolbar/toolbar-items.module.scss | 91 |
1 files changed, 0 insertions, 91 deletions
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss deleted file mode 100644 index 540844b..0000000 --- a/src/components/organisms/toolbar/toolbar-items.module.scss +++ /dev/null @@ -1,91 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; -@use "../../../styles/abstracts/placeholders"; - -.item { - --btn-size: #{fun.convert-px(65)}; - - display: flex; - position: relative; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - justify-content: flex-end; - } - - @include mix.dimensions("md") { - justify-content: flex-end; - } - } -} - -.modal { - position: absolute; - top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs))); - transition: all 0.8s ease-in-out 0s, background 0s; - - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - position: fixed; - left: 0; - right: 0; - } - } -} - -.label { - --draw-border-thickness: #{fun.convert-px(4)}; - --draw-border-color1: var(--color-primary-light); - --draw-border-color2: var(--color-primary-lighter); - - @include mix.media("screen") { - @include mix.dimensions("sm") { - border-radius: fun.convert-px(5); - } - } - - &:hover { - @extend %draw-borders; - } - - &:active { - --draw-border-color1: var(--color-primary-dark); - --draw-border-color2: var(--color-primary-light); - - @extend %draw-borders; - } -} - -.checkbox { - position: absolute; - top: calc(var(--btn-size) / 2); - left: calc(var(--btn-size) / 2); - opacity: 0; - cursor: pointer; - - &:hover, - &:focus { - ~ .label { - @extend %draw-borders; - } - } - - &:not(:checked) { - ~ .modal { - opacity: 0; - visibility: hidden; - - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - transform: translateX(-100vw); - } - - @include mix.dimensions("sm") { - transform: perspective(#{fun.convert-px(400)}) - translate3d(0, 0, #{fun.convert-px(-400)}); - transform-origin: 100% -50%; - } - } - } - } -} |
