From eef0dd0fafa5dbbbd29f2162967bc668eebf6074 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 20 Dec 2023 17:09:39 +0100 Subject: fix(styles): increase CSS specifity for some selectors Since `sideEffects` has been added to activate tree shakings, the styles are imported in the wrong order in production build. There is an open issue (again) on Next.js repo. I'm not sure it will be fixed soon so in the meantime I had to increase the specifity of some selectors to avoid broken styles. I also fixed two minor layout errors: * CV page widgets should use headings of level 2 * Homepage should wrap the cards in list items --- .../navbar/navbar-item/navbar-item.module.scss | 200 +++++++++++---------- 1 file changed, 101 insertions(+), 99 deletions(-) (limited to 'src/components/organisms/navbar/navbar-item/navbar-item.module.scss') diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.module.scss b/src/components/organisms/navbar/navbar-item/navbar-item.module.scss index f8249ba..a9a19de 100644 --- a/src/components/organisms/navbar/navbar-item/navbar-item.module.scss +++ b/src/components/organisms/navbar/navbar-item/navbar-item.module.scss @@ -2,23 +2,6 @@ @use "../../../../styles/abstracts/mixins" as mix; @use "../../../../styles/abstracts/placeholders"; -.overlay { - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - bottom: var(--modal-pos, var(--btn-size, --default-btn-size)); - display: flex; - flex-flow: row wrap; - place-content: flex-end; - } - - @include mix.dimensions("sm") { - position: absolute; - inset: calc(100% + var(--spacing-2xs)) auto; - background: transparent; - } - } -} - .modal { transition: all 0.8s ease-in-out 0s, @@ -58,88 +41,6 @@ } } -.checkbox { - position: absolute; - - /* 6px = checkbox approximate size */ - inset: calc(50% - 6px) calc(50% - 6px); - opacity: 0; - cursor: pointer; - - &:hover, - &:focus { - &, - + .label { - @extend %draw-borders; - } - } - - &:checked { - + .label { - --draw-border-color1: var(--color-primary-dark); - --draw-border-color2: var(--color-primary-light); - - .icon--hamburger { - > span { - background: transparent; - border: transparent; - - &::before { - top: 40%; - transform-origin: 50% 50%; - transform: rotate(-45deg); - } - - &::after { - bottom: 40%; - transform-origin: 50% 50%; - transform: rotate(45deg); - } - } - } - } - - ~ .overlay { - opacity: 1; - visibility: visible; - } - } - - &:not(:checked) { - + .label { - --draw-border-color1: var(--color-primary-light); - --draw-border-color2: var(--color-primary-lighter); - } - - ~ .overlay { - opacity: 0; - overflow: hidden; - visibility: hidden; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - overflow: visible; - transition: all 0.3s ease-in-out 0.8s; - } - } - - > .modal { - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - transform: translateX(-100vw); - } - - @include mix.dimensions("sm") { - transform: scale(0) perspective(#{fun.convert-px(250)}) - translate3d(0, 0, #{fun.convert-px(-250)}); - transform-origin: var(--transform-origin, 15% -15%); - } - } - } - } - } -} - @mixin modal-visible { > .checkbox, > .label { @@ -166,6 +67,107 @@ position: relative; + /* It needs to be nested because of wrong CSS ordering on production build. */ + .overlay { + @include mix.media("screen") { + @include mix.dimensions(null, "sm") { + bottom: var(--modal-pos, var(--btn-size, --default-btn-size)); + display: flex; + flex-flow: row wrap; + place-content: flex-end; + } + + @include mix.dimensions("sm") { + position: absolute; + inset: calc(100% + var(--spacing-2xs)) auto; + background: transparent; + } + } + } + + /* It needs to be nested because of wrong CSS ordering on production build. */ + .checkbox { + position: absolute; + + /* 6px = checkbox approximate size */ + inset: calc(50% - 6px) calc(50% - 6px); + opacity: 0; + cursor: pointer; + + &:hover, + &:focus { + &, + + .label { + @extend %draw-borders; + } + } + + &:checked { + + .label { + --draw-border-color1: var(--color-primary-dark); + --draw-border-color2: var(--color-primary-light); + + .icon--hamburger { + > span { + background: transparent; + border: transparent; + + &::before { + top: 40%; + transform-origin: 50% 50%; + transform: rotate(-45deg); + } + + &::after { + bottom: 40%; + transform-origin: 50% 50%; + transform: rotate(45deg); + } + } + } + } + + ~ .overlay { + opacity: 1; + visibility: visible; + } + } + + &:not(:checked) { + + .label { + --draw-border-color1: var(--color-primary-light); + --draw-border-color2: var(--color-primary-lighter); + } + + ~ .overlay { + opacity: 0; + overflow: hidden; + visibility: hidden; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + overflow: visible; + transition: all 0.3s ease-in-out 0.8s; + } + } + + > .modal { + @include mix.media("screen") { + @include mix.dimensions(null, "sm") { + transform: translateX(-100vw); + } + + @include mix.dimensions("sm") { + transform: scale(0) perspective(#{fun.convert-px(250)}) + translate3d(0, 0, #{fun.convert-px(-250)}); + transform-origin: var(--transform-origin, 15% -15%); + } + } + } + } + } + } + &--hidden-controller-sm { @include mix.media("screen") { @include mix.dimensions("sm") { -- cgit v1.2.3