summaryrefslogtreecommitdiffstats
path: root/src/components/Toolbar/Toolbar.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Toolbar/Toolbar.module.scss')
-rw-r--r--src/components/Toolbar/Toolbar.module.scss114
1 files changed, 0 insertions, 114 deletions
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
deleted file mode 100644
index debb3b7..0000000
--- a/src/components/Toolbar/Toolbar.module.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
- --btn-size: #{fun.convert-px(60)};
-
- display: flex;
- flex-flow: row wrap;
- align-items: center;
- justify-content: space-around;
- width: 100%;
- height: var(--toolbar-size);
- position: fixed;
- bottom: 0;
- left: 0;
- z-index: 5;
- background: var(--color-bg);
- border-top: fun.convert-px(4) solid;
- border-image: radial-gradient(
- ellipse at top,
- var(--color-primary-lighter) 20%,
- var(--color-primary) 100%
- )
- 1;
- box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
- var(--color-shadow-dark);
-
- :global {
- animation: slide-in-from-bottom 0.8s ease-in-out 0s 1;
- }
-
- @include mix.media("screen") {
- @include mix.dimensions("sm") {
- --toolbar-size: auto;
-
- justify-content: flex-end;
- gap: var(--spacing-sm);
- width: auto;
- background: inherit;
- border: none;
- box-shadow: none;
- position: relative;
- left: unset;
- margin-right: unset;
- transform: unset;
-
- :global {
- animation: slide-in-from-top 1s ease-in-out 0s 1;
- }
- }
- }
-}
-
-.menu {
- padding: var(--spacing-md);
- position: absolute;
- bottom: 100%;
- left: 0;
- right: 0;
- background: var(--color-bg-secondary);
- border-top: fun.convert-px(4) solid;
- border-bottom: fun.convert-px(4) solid;
- border-image: radial-gradient(
- ellipse at top,
- var(--color-primary-lighter) 20%,
- var(--color-primary) 100%
- )
- 1;
- box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
- fun.convert-px(-1) var(--color-shadow-dark);
- transition: all 0.7s ease-in-out 0s;
-
- &--closed {
- transform: translateX(-100%);
- visibility: hidden;
- }
-
- &--opened {
- transform: translateX(0);
- visibility: visible;
- }
-
- @include mix.media("screen") {
- @include mix.dimensions("sm") {
- width: fun.convert-px(500);
- left: unset;
- right: unset;
- top: 120%;
- bottom: unset;
- border: fun.convert-px(4) solid;
- border-image: radial-gradient(
- ellipse at top,
- var(--color-primary-lighter) 20%,
- var(--color-primary) 100%
- )
- 1;
- box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3)
- fun.convert-px(1) var(--color-shadow-dark);
- transform-origin: 50% -200%;
- transition: all 0.8s ease-in-out 0s;
-
- &--closed {
- opacity: 0;
- transform: perspective(20rem) translate3d(0, 100%, -20rem);
- visibility: hidden;
- }
-
- &--opened {
- opacity: 1;
- transform: none;
- }
- }
- }
-}