aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/MainNav/MainNav.module.scss
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-29 12:13:34 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-29 18:30:05 +0200
commit7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch)
treebfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/MainNav/MainNav.module.scss
parent5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff)
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries so it is easier to start from scratch.
Diffstat (limited to 'src/components/MainNav/MainNav.module.scss')
-rw-r--r--src/components/MainNav/MainNav.module.scss242
1 files changed, 0 insertions, 242 deletions
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
deleted file mode 100644
index f3e6c10..0000000
--- a/src/components/MainNav/MainNav.module.scss
+++ /dev/null
@@ -1,242 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
- --icon-size: #{fun.convert-px(30)};
-
- display: flex;
- flex-flow: column nowrap;
- align-items: center;
- height: var(--btn-size);
- width: calc(var(--btn-size) * 1.2);
- background: var(--color-bg);
- position: relative;
-
- @include mix.media("screen") {
- @include mix.dimensions("sm") {
- background: inherit;
- }
-
- @include mix.dimensions("md") {
- width: unset;
- height: unset;
- }
- }
-}
-
-.label {
- --draw-border-thickness: #{fun.convert-px(5)};
- --draw-border-color1: var(--color-primary-light);
- --draw-border-color2: var(--color-primary-lighter);
-
- flex: 1;
- display: flex;
- flex-flow: column nowrap;
- width: 100%;
- padding: var(--spacing-2xs);
-
- &:hover {
- @extend %draw-borders;
- }
-
- @include mix.media("screen") {
- @include mix.dimensions("md") {
- display: none;
- }
- }
-}
-
-.checkbox {
- position: absolute;
-
- // centered checkbox = btn-size - approximated checkbox size / 2
- top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
- left: calc(((var(--btn-size) * 1.2) - #{fun.convert-px(14)}) / 2);
- opacity: 0;
- cursor: pointer;
-
- &:hover {
- ~ .label {
- @extend %draw-borders;
- }
- }
-
- &:focus {
- ~ .label {
- @extend %draw-borders;
- }
- }
-
- @include mix.media("screen") {
- @include mix.dimensions("md") {
- display: none;
- }
- }
-}
-
-.nav {
- display: flex;
- flex-flow: column wrap;
- place-content: center;
- padding-bottom: var(--toolbar-size);
- position: fixed;
- bottom: 0;
- z-index: -1;
- background: var(--color-bg-opacity);
- box-shadow: 0 0 fun.convert-px(3) 0 var(--color-shadow-dark);
- text-align: center;
- opacity: 1;
- visibility: visible;
- transform: translateY(0);
- transition: all 0.8s ease-in-out 0s;
-
- @include mix.media("screen") {
- @include mix.dimensions("sm") {
- padding-bottom: 0;
- position: absolute;
- bottom: auto;
- left: auto;
- right: auto;
- top: calc(var(--btn-size) + var(--spacing-sm));
- z-index: unset;
- border-bottom-width: fun.convert-px(5);
- transform-origin: 50% -100%;
- }
-
- @include mix.dimensions("md") {
- background: transparent;
- border: none;
- box-shadow: none;
- position: relative;
- top: 0;
- }
- }
-}
-
-.list {
- @extend %reset-list;
-
- @include mix.media("screen") {
- @include mix.dimensions(null, "2xs", "height") {
- display: grid;
- grid-template-columns: min-content min-content;
- max-height: calc(100vh - var(--toolbar-size));
- }
-
- @include mix.dimensions("md") {
- display: flex;
- flex-flow: row wrap;
- align-items: center;
- gap: var(--spacing-2xs);
- }
- }
-}
-
-.link {
- --draw-border-thickness: #{fun.convert-px(4)};
- --draw-border-color1: var(--color-primary-light);
- --draw-border-color2: var(--color-primary-lighter);
-
- display: block;
- min-width: fun.convert-px(85);
- padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs);
- background: var(--color-bg);
- background-repeat: no-repeat;
- font-size: var(--font-size-sm);
- font-variant: small-caps;
- font-weight: 600;
- text-decoration: none;
-
- @include mix.media("screen") {
- @include mix.dimensions("md") {
- margin: 0;
- background-color: inherit;
- border-radius: 8%;
- }
- }
-
- &:hover,
- &:focus {
- @extend %draw-borders;
- }
-
- &:focus {
- color: var(--color-primary-light);
- }
-
- &:active {
- --draw-border-color1: var(--color-primary-dark);
- --draw-border-color2: var(--color-primary-light);
-
- @extend %draw-borders;
- }
-
- &.current {
- background-image: linear-gradient(to right, transparent, transparent),
- linear-gradient(to bottom, transparent, transparent),
- linear-gradient(
- to left,
- var(--color-primary-lighter),
- var(--color-primary-light)
- ),
- linear-gradient(to top, transparent, transparent);
- background-position: top left, top right, bottom center, bottom left;
- background-size: 0% var(--draw-border-thickness),
- var(--draw-border-thickness) 0%, 60% var(--draw-border-thickness),
- var(--draw-border-thickness) 0%;
-
- &:hover,
- &:focus {
- --draw-border-color1: var(--color-primary-light);
- --draw-border-color2: var(--color-primary-lighter);
-
- @extend %draw-borders;
- }
-
- &:active {
- --draw-border-color1: var(--color-primary-dark);
- --draw-border-color2: var(--color-primary-light);
-
- @extend %draw-borders;
- }
- }
-}
-
-.checkbox:not(:checked) {
- ~ .nav {
- opacity: 0;
- visibility: hidden;
- transform: translateY(100vw);
-
- @include mix.media("screen") {
- @include mix.dimensions("sm") {
- transform: perspective(20rem) translate3d(0, 100%, -20rem);
- }
-
- @include mix.dimensions("md") {
- opacity: 1;
- visibility: visible;
- transform: none;
- }
- }
- }
-}
-
-.checkbox:checked {
- ~ .label:hover {
- span {
- background: none;
- box-shadow: none;
- }
- }
-
- &:hover {
- ~ .label {
- span {
- background: none;
- box-shadow: none;
- }
- }
- }
-}