From 5d3e8a4d0c2ce2ad8f22df857ab3ce54fcfc38ac Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 3 Nov 2023 12:22:47 +0100 Subject: refactor(components): replace Toolbar with Navbar component * remove SearchModal and SettingsModal components * add a generic NavbarItem component (instead of the previous toolbar items to avoid unreadable styles...) * move FlippingLabel component logic into NavbarItem since it is only used here --- .../organisms/toolbar/toolbar.module.scss | 63 ---------------------- 1 file changed, 63 deletions(-) delete mode 100644 src/components/organisms/toolbar/toolbar.module.scss (limited to 'src/components/organisms/toolbar/toolbar.module.scss') diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss deleted file mode 100644 index 6c138a3..0000000 --- a/src/components/organisms/toolbar/toolbar.module.scss +++ /dev/null @@ -1,63 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/variables" as var; -@use "../../../styles/abstracts/placeholders"; - -.wrapper { - --toolbar-size: #{fun.convert-px(75)}; - - display: flex; - flex-flow: row wrap; - align-items: center; - gap: var(--spacing-sm); - width: 100%; - height: var(--toolbar-size); - position: relative; - 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; - - @media screen and (min-width: #{var.get-breakpoint("sm")}) { - animation: slide-in-from-top 0.8s ease-in-out 0s 1; - } - } - - @media screen and (max-width: #{var.get-breakpoint("sm")}) { - justify-content: space-around; - position: fixed; - bottom: 0; - left: 0; - z-index: 5; - - .modal { - width: 100%; - position: fixed; - top: unset; - left: 0; - bottom: calc(var(--toolbar-size) - #{fun.convert-px(4)}); - max-height: calc(100vh - var(--toolbar-size)); - } - } - - @media screen and (max-height: #{var.get-breakpoint("2xs")}) { - --toolbar-size: #{fun.convert-px(70)}; - } - - @media screen and (min-width: #{var.get-breakpoint("sm")}) { - .modal { - &--search, - &--settings { - min-width: fun.convert-px(420); - } - } - } -} -- cgit v1.2.3