aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/toolbar/toolbar-items.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/toolbar/toolbar-items.module.scss')
-rw-r--r--src/components/organisms/toolbar/toolbar-items.module.scss91
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%;
- }
- }
- }
- }
-}