diff options
Diffstat (limited to 'src/components')
6 files changed, 139 insertions, 138 deletions
diff --git a/src/components/molecules/meta-list/meta-item/meta-item.module.scss b/src/components/molecules/meta-list/meta-item/meta-item.module.scss index a1c2d47..263a5dc 100644 --- a/src/components/molecules/meta-list/meta-item/meta-item.module.scss +++ b/src/components/molecules/meta-list/meta-item/meta-item.module.scss @@ -31,6 +31,7 @@ .value { width: fit-content; height: fit-content; + padding-block: fun.convert-px(2); color: var(--color-fg); font-weight: 400; } diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss index f6570ce..1a440f0 100644 --- a/src/components/organisms/forms/search-form/search-form.module.scss +++ b/src/components/organisms/forms/search-form/search-form.module.scss @@ -10,52 +10,53 @@ transition: all 0.3s ease-in-out 0s; } -.btn { - background: var(--color-bg-tertiary); - border: fun.convert-px(2) solid var(--color-border); - box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow); - transition: all 0.25s linear 0s; +.form { + display: flex; + flex-flow: row nowrap; + + /* It needs to be nested because of wrong CSS ordering on production build. */ + .btn { + background: var(--color-bg-tertiary); + border: fun.convert-px(2) solid var(--color-border); + box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow); + transition: all 0.25s linear 0s; + } + + &--no-label { + .btn { + align-self: stretch; + } + } + + &--has-label { + .btn { + align-self: flex-end; + height: fun.convert-px(52); + } + } - &:hover, - &:focus { + .btn:hover, + .btn:focus { .icon { transform: scale(0.85) rotate(20deg) translateX(#{fun.convert-px(2)}) translateY(#{fun.convert-px(3)}); } } - &:focus { + .btn:focus { outline: none; border-color: var(--color-primary); box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark); } - &:active { + .btn:active { .icon { transform: scale(0.7); } } } -.form { - display: flex; - flex-flow: row nowrap; - - &--no-label { - .btn { - align-self: stretch; - } - } - - &--has-label { - .btn { - align-self: flex-end; - height: fun.convert-px(52); - } - } -} - .field { min-width: 0; diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss b/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss index 1be81c4..b1b2302 100644 --- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss +++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss @@ -1,7 +1,3 @@ -.wrapper { - width: fit-content; -} - .sep { margin-inline-start: var(--spacing-xs); } diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx index 13434e1..fd29f90 100644 --- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx +++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx @@ -28,12 +28,11 @@ export type BreadcrumbsProps = Omit<NavProps, 'children'> & { const BreadcrumbsWithRef: ForwardRefRenderFunction< HTMLElement, BreadcrumbsProps -> = ({ className = '', items, ...props }, ref) => { - const wrapperClass = `${styles.wrapper} ${className}`; +> = ({ items, ...props }, ref) => { const sep = '>'; return ( - <Nav {...props} className={wrapperClass} ref={ref}> + <Nav {...props} ref={ref}> <NavList isInline isOrdered 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") { diff --git a/src/components/templates/page/page.module.scss b/src/components/templates/page/page.module.scss index 91a1b58..fd1fac9 100644 --- a/src/components/templates/page/page.module.scss +++ b/src/components/templates/page/page.module.scss @@ -204,6 +204,13 @@ &__body { grid-column: 2; } + + /* Without nesting, Nextjs does not override margin: the CSS is bundle in the + * wrong order. */ + .heading { + width: fit-content; + margin: var(--spacing-md) auto; + } } .spinner { @@ -211,11 +218,6 @@ } :where(.comments) { - .heading { - width: fit-content; - margin: var(--spacing-md) auto; - } - .form { max-width: 40ch; margin-inline: auto; |