From ad43582d93df4db4e24494e32a2ddbaa9f647bda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20Sz=C3=A9pe?= Date: Mon, 25 Sep 2023 13:17:11 +0000 Subject: [PATCH] Fix CS in SASS code --- resources/sass/component/_alert.scss | 100 +++--- resources/sass/component/_auth-form.scss | 26 +- .../sass/component/_block-navigation.scss | 167 +++++----- .../sass/component/_breadcrumb-list.scss | 67 ++-- resources/sass/component/_card.scss | 158 +++++----- resources/sass/component/_context-menu.scss | 106 +++---- resources/sass/component/_data-group.scss | 16 +- resources/sass/component/_data-table.scss | 156 +++++----- resources/sass/component/_media-uploader.scss | 162 +++++----- resources/sass/component/_modal.scss | 294 +++++++++--------- resources/sass/component/_notification.scss | 182 +++++------ resources/sass/component/_open-search.scss | 20 +- resources/sass/component/_or-separator.scss | 26 +- resources/sass/component/_pagination.scss | 24 +- resources/sass/component/_preloader.scss | 34 +- resources/sass/component/_prism.scss | 87 +++--- resources/sass/component/_range-group.scss | 42 +-- resources/sass/component/_skip-link.scss | 10 +- resources/sass/component/_theme-switcher.scss | 28 +- resources/sass/component/_user-menu.scss | 82 ++--- resources/sass/component/_widget.scss | 170 +++++----- resources/sass/component/badge/_status.scss | 36 +-- resources/sass/component/badge/_trending.scss | 44 +-- .../sass/component/form/_btn-dropdown.scss | 6 +- resources/sass/component/form/_combobox.scss | 190 +++++------ resources/sass/component/form/_editor.scss | 96 +++--- .../sass/component/form/_file-group.scss | 156 +++++----- resources/sass/component/form/_file-list.scss | 100 +++--- resources/sass/component/form/_repeater.scss | 90 +++--- .../sass/component/form/_search-form.scss | 64 ++-- resources/sass/config/_config.scss | 224 ++++++------- resources/sass/config/_dark-colors.scss | 268 ++++++++-------- resources/sass/config/_dark-mode.scss | 24 +- resources/sass/extend/_btn.scss | 50 +-- resources/sass/extend/_chart.scss | 30 +- resources/sass/extend/_form.scss | 22 +- resources/sass/extend/_progress.scss | 60 ++-- resources/sass/helper/_display.scss | 24 +- resources/sass/helper/_margin.scss | 2 +- resources/sass/layout/_auth.scss | 126 ++++---- resources/sass/layout/_container.scss | 24 +- resources/sass/layout/_main.scss | 48 +-- resources/sass/layout/_row.scss | 40 +-- resources/sass/section/_actions.scss | 22 +- resources/sass/section/_body.scss | 6 +- resources/sass/section/_footer.scss | 10 +- resources/sass/section/_header.scss | 90 +++--- resources/sass/section/_heading.scss | 60 ++-- resources/sass/section/_sidebar.scss | 74 ++--- 49 files changed, 1973 insertions(+), 1970 deletions(-) diff --git a/resources/sass/component/_alert.scss b/resources/sass/component/_alert.scss index 48830e661..95d3e3a2d 100644 --- a/resources/sass/component/_alert.scss +++ b/resources/sass/component/_alert.scss @@ -3,61 +3,61 @@ @use 'sprucecss/scss/spruce' as *; .alert { - align-items: center; - border: 1px solid; - border-left: 0.4rem solid; - border-radius: config('border-radius-sm', $display); - display: flex; - gap: spacer('m'); - justify-content: space-between; - line-height: config('line-height-md', $typography); - padding: 0.65em 1em; - - @each $name, $value in map.get($colors, 'alert') { - @at-root .alert--#{$name} { - background-color: color.scale($value, $lightness: 95%); - color: color.scale($value, $lightness: -30%); - } - - @at-root .alert--#{$name} .alert__close { - background-color: color.scale($value, $lightness: -30%); - color: color.scale($value, $lightness: 90%); - } - } - - @each $name, $value in map.get($colors, 'alert') { - @at-root [data-theme-mode='dark'] .alert--#{$name} { - background-color: transparent; - border-color: color.scale($value, $lightness: -30%); - color: color('text'); - } - } - - &__caption { - @include layout-stack('xxs'); - } - - &__close { - --dimension: 1.5rem; - @include clear-btn; - @include transition; align-items: center; - block-size: var(--dimension); + border: 1px solid; + border-left: 0.4rem solid; border-radius: config('border-radius-sm', $display); display: flex; - flex-shrink: 0; - inline-size: var(--dimension); - justify-content: center; + gap: spacer('m'); + justify-content: space-between; + line-height: config('line-height-md', $typography); + padding: 0.65em 1em; + + @each $name, $value in map.get($colors, 'alert') { + @at-root .alert--#{$name} { + background-color: color.scale($value, $lightness: 95%); + color: color.scale($value, $lightness: -30%); + } + + @at-root .alert--#{$name} .alert__close { + background-color: color.scale($value, $lightness: -30%); + color: color.scale($value, $lightness: 90%); + } + } + + @each $name, $value in map.get($colors, 'alert') { + @at-root [data-theme-mode='dark'] .alert--#{$name} { + background-color: transparent; + border-color: color.scale($value, $lightness: -30%); + color: color('text'); + } + } - &:hover, - &:focus { - opacity: 0.75; + &__caption { + @include layout-stack('xxs'); } - svg { - --dimension: 0.85rem; - block-size: var(--dimension); - inline-size: var(--dimension); + &__close { + --dimension: 1.5rem; + @include clear-btn; + @include transition; + align-items: center; + block-size: var(--dimension); + border-radius: config('border-radius-sm', $display); + display: flex; + flex-shrink: 0; + inline-size: var(--dimension); + justify-content: center; + + &:hover, + &:focus { + opacity: 0.75; + } + + svg { + --dimension: 0.85rem; + block-size: var(--dimension); + inline-size: var(--dimension); + } } - } } diff --git a/resources/sass/component/_auth-form.scss b/resources/sass/component/_auth-form.scss index 0341ba290..c63c60825 100644 --- a/resources/sass/component/_auth-form.scss +++ b/resources/sass/component/_auth-form.scss @@ -1,26 +1,26 @@ @use 'sprucecss/scss/spruce' as *; .auth-form { - @include layout-stack('s'); - margin-block: auto; + @include layout-stack('s'); + margin-block: auto; - &__title { - font-weight: 700; - } + &__title { + font-weight: 700; + } - .or-separator { - margin-block-start: spacer('m'); - } + .or-separator { + margin-block-start: spacer('m'); + } } .form-group-stacked, .social-logins { - @include layout-stack('s'); + @include layout-stack('s'); } .form-label { - &--space-between { - display: flex; - justify-content: space-between; - } + &--space-between { + display: flex; + justify-content: space-between; + } } diff --git a/resources/sass/component/_block-navigation.scss b/resources/sass/component/_block-navigation.scss index dffe26ba0..aae7f9afb 100644 --- a/resources/sass/component/_block-navigation.scss +++ b/resources/sass/component/_block-navigation.scss @@ -1,102 +1,103 @@ @use 'sprucecss/scss/spruce' as *; .block-navigation { - @include a11y-card-link('.block-navigation__toggle', true); - display: flex; - flex-direction: column; - gap: spacer('s'); - position: relative; - z-index: 1; - - &__title { - align-items: center; - color: color('heading'); + @include a11y-card-link('.block-navigation__toggle', true); display: flex; - font-size: config('font-size-base', $typography); - font-weight: 700; - justify-content: space-between; - margin-block: 0; - } - - &__toggle { - &[aria-expanded='true'] { - svg { - rotate: 180deg; - } + flex-direction: column; + gap: spacer('s'); + position: relative; + z-index: 1; + + &__title { + align-items: center; + color: color('heading'); + display: flex; + font-size: config('font-size-base', $typography); + font-weight: 700; + justify-content: space-between; + margin-block: 0; } - svg { - pointer-events: none; - } - } - - &__menu { - &:not(.is-open) { - display: none; - } + &__toggle { + &[aria-expanded='true'] { + svg { + rotate: 180deg; + } + } - &.is-open { - display: block; + svg { + pointer-events: none; + } } - ul { - @include clear-list; - } + &__menu { + &:not(.is-open) { + display: none; + } - a { - align-items: center; - color: color('text'); - display: flex; - gap: 0.75em; - padding-block: 0.35em; - padding-inline: 0.75em; - position: relative; - text-decoration: none; - - &:hover:not([aria-current='page']) { - &::before { - background-color: color('primary-lightest'); + &.is-open { + display: block; } - } - - &::before { - border-radius: config('border-radius-sm', $display); - content: ''; - inset-block: 0; - inset-inline: 0; - position: absolute; - z-index: -1; - } - - &[aria-current='page'] { - color: hsl(0deg 0% 100%); - - &::before { - background-color: color('primary'); + + ul { + @include clear-list; } - svg { - color: hsl(0deg 0% 100%); + a { + align-items: center; + color: color('text'); + display: flex; + gap: 0.75em; + padding-block: 0.35em; + padding-inline: 0.75em; + position: relative; + text-decoration: none; + + &:hover:not([aria-current='page']) { + &::before { + background-color: color('primary-lightest'); + } + } + + &::before { + border-radius: config('border-radius-sm', $display); + content: ''; + inset-block: 0; + inset-inline: 0; + position: absolute; + z-index: -1; + } + + /* stylelint-disable-next-line selector-no-qualifying-type */ + &[aria-current='page'] { + color: hsl(0deg 0% 100%); + + &::before { + background-color: color('primary'); + } + + svg { + color: hsl(0deg 0% 100%); + } + } + + svg { + --dimension: 1.15em; + block-size: var(--dimension); + color: color('primary'); + inline-size: var(--dimension); + } } - } - - svg { - --dimension: 1.15em; - block-size: var(--dimension); - color: color('primary'); - inline-size: var(--dimension); - } - } - &--breakout { - a { - padding-block: 0.35em; - padding-inline: 0; + &--breakout { + a { + padding-block: 0.35em; + padding-inline: 0; - &::before { - inset-inline: -0.75rem -0.35em; + &::before { + inset-inline: -0.75rem -0.35em; + } + } } - } } - } } diff --git a/resources/sass/component/_breadcrumb-list.scss b/resources/sass/component/_breadcrumb-list.scss index 2ce99a0a7..9ad98c59a 100644 --- a/resources/sass/component/_breadcrumb-list.scss +++ b/resources/sass/component/_breadcrumb-list.scss @@ -1,44 +1,45 @@ @use 'sprucecss/scss/spruce' as *; .breadcrumb-list { - @include clear-list; - align-items: center; - display: flex; - max-inline-size: 100%; - overflow-x: auto; - white-space: nowrap; - - > li { + @include clear-list; align-items: center; - display: inline-flex; - margin-block: 0; + display: flex; + max-inline-size: 100%; + overflow-x: auto; + white-space: nowrap; + + > li { + align-items: center; + display: inline-flex; + margin-block: 0; - + li::before { - block-size: 0.4em; - border-block-end: 2px solid color('separator', 'breadcrumb'); - border-inline-end: 2px solid color('separator', 'breadcrumb'); - content: ''; - display: inline-flex; - inline-size: 0.4em; - margin-inline: 0.75em; - transform: rotate(-45deg); + + li::before { + block-size: 0.4em; + border-block-end: 2px solid color('separator', 'breadcrumb'); + border-inline-end: 2px solid color('separator', 'breadcrumb'); + content: ''; + display: inline-flex; + inline-size: 0.4em; + margin-inline: 0.75em; + transform: rotate(-45deg); - @at-root { - [dir='rtl'] & { - transform: rotate(45deg); + @at-root { + /* stylelint-disable-next-line selector-max-compound-selectors */ + [dir='rtl'] & { + transform: rotate(45deg); + } + } } - } } - } - a { - text-decoration: none; - } + a { + text-decoration: none; + } - [aria-current='page'] { - @include text-ellipsis(1); - display: inline-block; - max-inline-size: 20ch; - text-align: start; - } + [aria-current='page'] { + @include text-ellipsis(1); + display: inline-block; + max-inline-size: 20ch; + text-align: start; + } } diff --git a/resources/sass/component/_card.scss b/resources/sass/component/_card.scss index 42a3d6808..20a42f77d 100644 --- a/resources/sass/component/_card.scss +++ b/resources/sass/component/_card.scss @@ -1,100 +1,100 @@ @use 'sprucecss/scss/spruce' as *; .app-card { - $this: &; - background-color: color('background'); - border: 1px solid color('border'); - border-radius: config('border-radius-sm', $display); - box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); - - &:focus-within { - z-index: 5; - } - - &--edit { - #{$this}__header { - padding-inline: spacer('m'); + $this: &; + background-color: color('background'); + border: 1px solid color('border'); + border-radius: config('border-radius-sm', $display); + box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); + + &:focus-within { + z-index: 5; } - #{$this}__body { - padding: spacer('m'); - } - } + &--edit { + #{$this}__header { + padding-inline: spacer('m'); + } - &--setting { - #{$this}__body { - @include layout-stack(0.75rem); - padding: spacer('m'); + #{$this}__body { + padding: spacer('m'); + } } - #{$this}__content { - @include layout-stack('xs'); + &--setting { + #{$this}__body { + @include layout-stack(0.75rem); + padding: spacer('m'); + } + + #{$this}__content { + @include layout-stack('xs'); + } } - } - &--sidebar { - display: grid; - gap: spacer-clamp('m', 'l'); - grid-template-columns: minmax(0, 1fr); - padding: spacer('m'); + &--sidebar { + display: grid; + gap: spacer-clamp('m', 'l'); + grid-template-columns: minmax(0, 1fr); + padding: spacer('m'); - @include breakpoint('md') { - grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); + @include breakpoint('md') { + grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); + } + + > #{$this}__body { + @include layout-stack('m'); + padding: 0; + } } - > #{$this}__body { - @include layout-stack('m'); - padding: 0; + &--info { + box-shadow: none; + + #{$this}__header { + border-block-end: 0; + min-block-size: 0; + padding-block: spacer('m') 0; + padding-inline: spacer('m'); + } + + #{$this}__body { + padding: spacer('m'); + } } - } - &--info { - box-shadow: none; + &__header { + align-items: center; + border-block-end: 1px solid color('border'); + display: flex; + flex-wrap: wrap; + gap: spacer('xs') spacer('m'); + justify-content: space-between; + min-block-size: 3.4rem; + padding: 0.75rem spacer('s'); + } - #{$this}__header { - border-block-end: 0; - min-block-size: 0; - padding-block: spacer('m') 0; - padding-inline: spacer('m'); + &__actions { + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + margin-inline-start: auto; } - #{$this}__body { - padding: spacer('m'); + &__title { + font-size: font-size('h4'); + font-weight: 600; + margin-block: 0; } - } - - &__header { - align-items: center; - border-block-end: 1px solid color('border'); - display: flex; - flex-wrap: wrap; - gap: spacer('xs') spacer('m'); - justify-content: space-between; - min-block-size: 3.4rem; - padding: 0.75rem spacer('s'); - } - - &__actions { - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - margin-inline-start: auto; - } - - &__title { - font-size: font-size('h4'); - font-weight: 600; - margin-block: 0; - } - - &__body { - padding: spacer('s'); - - &--plain { - align-items: center; - display: flex; - justify-content: space-between; - padding: 0; + + &__body { + padding: spacer('s'); + + &--plain { + align-items: center; + display: flex; + justify-content: space-between; + padding: 0; + } } - } } diff --git a/resources/sass/component/_context-menu.scss b/resources/sass/component/_context-menu.scss index 35d3ea038..af8d82a70 100644 --- a/resources/sass/component/_context-menu.scss +++ b/resources/sass/component/_context-menu.scss @@ -1,67 +1,67 @@ @use 'sprucecss/scss/spruce' as *; .context-menu { - --inset-block-start: calc(100% + 1rem); - --inline-size: 10rem; + --inset-block-start: calc(100% + 1rem); + --inline-size: 10rem; - @include clear-list; - @include transition; - background-color: color('background'); - border: 1px solid color('border'); - border-radius: config('border-radius-sm', $display); - box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); - inline-size: var(--inline-size); - opacity: 0; - position: absolute; - scale: 0.85; - visibility: hidden; - z-index: 10; + @include clear-list; + @include transition; + background-color: color('background'); + border: 1px solid color('border'); + border-radius: config('border-radius-sm', $display); + box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); + inline-size: var(--inline-size); + opacity: 0; + position: absolute; + scale: 0.85; + visibility: hidden; + z-index: 10; - &--inline-start { - inset: var(--inset-block-start) auto auto 0; - } + &--inline-start { + inset: var(--inset-block-start) auto auto 0; + } - &--inline-end { - inset: var(--inset-block-start) 0 auto auto; - } + &--inline-end { + inset: var(--inset-block-start) 0 auto auto; + } - &.is-open { - opacity: 1; - scale: 1; - visibility: visible; - } + &.is-open { + opacity: 1; + scale: 1; + visibility: visible; + } - > li { - display: flex; - flex-direction: column; - } + > li { + display: flex; + flex-direction: column; + } - > li + li { - border-block-start: 1px solid color('border'); - margin-block-start: 0; - } + > li + li { + border-block-start: 1px solid color('border'); + margin-block-start: 0; + } - &__item { - align-items: center; - background: none; - block-size: 2.25rem; - border: 0; - border-radius: config('border-radius-sm', $display); - color: color('text'); - display: flex; - justify-content: space-between; - line-height: config('line-height-md', $typography); - margin: 0.15em; - padding-block: 0.25em; - padding-inline: 0.6em; - text-decoration: none; + &__item { + align-items: center; + background: none; + block-size: 2.25rem; + border: 0; + border-radius: config('border-radius-sm', $display); + color: color('text'); + display: flex; + justify-content: space-between; + line-height: config('line-height-md', $typography); + margin: 0.15em; + padding-block: 0.25em; + padding-inline: 0.6em; + text-decoration: none; - &:hover:not([aria-current='page'], :has(.theme-switcher)) { - background-color: color('primary-lightest'); - } + &:hover:not([aria-current='page'], :has(.theme-switcher)) { + background-color: color('primary-lightest'); + } - &[aria-current='page'] { - color: color('primary'); + &[aria-current='page'] { + color: color('primary'); + } } - } } diff --git a/resources/sass/component/_data-group.scss b/resources/sass/component/_data-group.scss index 6801bc513..ccfc6b1e5 100644 --- a/resources/sass/component/_data-group.scss +++ b/resources/sass/component/_data-group.scss @@ -1,13 +1,13 @@ @use 'sprucecss/scss/spruce' as *; .data-group { - @include layout-stack('xxs'); + @include layout-stack('xxs'); - &__content { - @include text-ellipsis(2); - color: color('heading'); - font-family: config('font-family-heading', $typography); - font-weight: 600; - line-height: config('line-height-heading', $typography); - } + &__content { + @include text-ellipsis(2); + color: color('heading'); + font-family: config('font-family-heading', $typography); + font-weight: 600; + line-height: config('line-height-heading', $typography); + } } diff --git a/resources/sass/component/_data-table.scss b/resources/sass/component/_data-table.scss index ef275fa0d..7176e6f2b 100644 --- a/resources/sass/component/_data-table.scss +++ b/resources/sass/component/_data-table.scss @@ -2,103 +2,103 @@ @use 'sprucecss/scss/spruce' as *; .data-table { - overflow: hidden; - position: relative; - - &__image { - --dimension: 2.25rem; - block-size: var(--dimension); - border-radius: 50%; - inline-size: var(--dimension); - } + overflow: hidden; + position: relative; + + &__image { + --dimension: 2.25rem; + block-size: var(--dimension); + border-radius: 50%; + inline-size: var(--dimension); + } - &__actions { - align-items: center; - display: flex; - gap: spacer('xs'); - justify-content: end; - } + &__actions { + align-items: center; + display: flex; + gap: spacer('xs'); + justify-content: end; + } - &__footer { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - justify-content: space-between; - margin-block: spacer('m') spacer('s'); - - &-column { - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - - > * { - margin-block: 0; - } + &__footer { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + justify-content: space-between; + margin-block: spacer('m') spacer('s'); + + &-column { + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + + > * { + margin-block: 0; + } + } } - } } .data-table-alert { - border-width: 1px; - flex-wrap: wrap; - gap: spacer('xs') spacer('s'); - padding-inline-end: 0.65em; - - &__actions { - align-items: center; - display: flex; + border-width: 1px; flex-wrap: wrap; - gap: spacer('xs') spacer('m'); - - .form-control { - inline-size: auto; + gap: spacer('xs') spacer('s'); + padding-inline-end: 0.65em; + + &__actions { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs') spacer('m'); + + .form-control { + inline-size: auto; + } } - } - &__column { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - } + &__column { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + } } .data-table-filter { - position: relative; + position: relative; + + &__actions { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + } + + .context-menu { + --inline-size: 16rem; + padding: spacer('s'); + } +} - &__actions { +.data-table-sort { + @include a11y-card-link('.data-table-sort__control', true); align-items: center; display: flex; - flex-wrap: wrap; gap: spacer('xs'); - } + white-space: nowrap; - .context-menu { - --inline-size: 16rem; - padding: spacer('s'); - } -} + &__control { + @include clear-btn; + } -.data-table-sort { - @include a11y-card-link('.data-table-sort__control', true); - align-items: center; - display: flex; - gap: spacer('xs'); - white-space: nowrap; - - &__control { - @include clear-btn; - } - - svg { - --dimension: 0.85em; - block-size: var(--dimension); - color: color('icon', 'data-table'); - inline-size: var(--dimension); - } + svg { + --dimension: 0.85em; + block-size: var(--dimension); + color: color('icon', 'data-table'); + inline-size: var(--dimension); + } } .data-table-deleted { - color: color('danger', 'alert'); + color: color('danger', 'alert'); } diff --git a/resources/sass/component/_media-uploader.scss b/resources/sass/component/_media-uploader.scss index 30928d464..21019cc95 100644 --- a/resources/sass/component/_media-uploader.scss +++ b/resources/sass/component/_media-uploader.scss @@ -1,102 +1,102 @@ @use 'sprucecss/scss/spruce' as *; .media-list { - --column: 2; - @include clear-list; - display: grid; - gap: spacer('m'); - grid-template-columns: repeat(var(--column), minmax(0, 1fr)); + --column: 2; + @include clear-list; + display: grid; + gap: spacer('m'); + grid-template-columns: repeat(var(--column), minmax(0, 1fr)); - @include breakpoint('xs') { - --column: 3; - } + @include breakpoint('xs') { + --column: 3; + } - @include breakpoint('sm') { - --column: 4; - } + @include breakpoint('sm') { + --column: 4; + } - @include breakpoint('md') { - --column: 6; - } + @include breakpoint('md') { + --column: 6; + } - @include breakpoint('lg') { - --column: 8; - } + @include breakpoint('lg') { + --column: 8; + } - > * + * { - margin-block-start: 0; - } + > * + * { + margin-block-start: 0; + } } .media-item { - border-radius: config('border-radius-lg', $display); - line-height: config('line-height-md', $typography); - position: relative; + border-radius: config('border-radius-lg', $display); + line-height: config('line-height-md', $typography); + position: relative; - &[aria-checked="true"], - &:focus-visible { - @include focus-ring( - $type: config('focus-ring-type', $btn, false), - $ring-color: color('primary-background', 'btn'), - $box-shadow-type: config('focus-ring-box-shadow-type', $btn, false), - $ring-size: 3px, - $ring-offset: 3px - ); - } + &[aria-checked="true"], + &:focus-visible { + @include focus-ring( + $type: config('focus-ring-type', $btn, false), + $ring-color: color('primary-background', 'btn'), + $box-shadow-type: config('focus-ring-box-shadow-type', $btn, false), + $ring-size: 3px, + $ring-offset: 3px + ); + } - &__background { - align-items: center; - aspect-ratio: 1; - background-color: color('background', 'media'); - border-radius: config('border-radius-lg', $display); - display: flex; - flex-direction: column; - gap: spacer('xxs'); - justify-content: center; - padding: spacer('s'); - } + &__background { + align-items: center; + aspect-ratio: 1; + background-color: color('background', 'media'); + border-radius: config('border-radius-lg', $display); + display: flex; + flex-direction: column; + gap: spacer('xxs'); + justify-content: center; + padding: spacer('s'); + } - &__icon { - --size: 1.5rem; - block-size: var(--size); - color: color('icon', 'media'); - inline-size: var(--size); - } + &__icon { + --size: 1.5rem; + block-size: var(--size); + color: color('icon', 'media'); + inline-size: var(--size); + } - &__name { - @include text-ellipsis(2); - max-inline-size: 100%; - text-align: center; - } + &__name { + @include text-ellipsis(2); + max-inline-size: 100%; + text-align: center; + } - &__selected { - --size: 1.5rem; - align-items: center; - background-color: color('primary-background', 'btn'); - block-size: var(--size); - border-radius: config('border-radius-sm', $display); - color: color('primary-foreground', 'btn'); - display: flex; - inline-size: var(--size); - inset: spacer('xs') spacer('xs') auto auto; - justify-content: center; - position: absolute; + &__selected { + --size: 1.5rem; + align-items: center; + background-color: color('primary-background', 'btn'); + block-size: var(--size); + border-radius: config('border-radius-sm', $display); + color: color('primary-foreground', 'btn'); + display: flex; + inline-size: var(--size); + inset: spacer('xs') spacer('xs') auto auto; + justify-content: center; + position: absolute; - svg { - --size: 1rem; - block-size: var(--size); - inline-size: var(--size); + svg { + --size: 1rem; + block-size: var(--size); + inline-size: var(--size); + } } - } - .progressbar { - margin-block-start: spacer('s'); - } + .progressbar { + margin-block-start: spacer('s'); + } - img { - aspect-ratio: 1; - border-radius: config('border-radius-lg', $display); - inline-size: 100%; - object-fit: cover; - } + img { + aspect-ratio: 1; + border-radius: config('border-radius-lg', $display); + inline-size: 100%; + object-fit: cover; + } } diff --git a/resources/sass/component/_modal.scss b/resources/sass/component/_modal.scss index ce4e41751..84cecea61 100644 --- a/resources/sass/component/_modal.scss +++ b/resources/sass/component/_modal.scss @@ -1,171 +1,171 @@ @use 'sprucecss/scss/spruce' as *; .modal-backdrop { - align-items: start; - background-color: color('background', 'modal'); - display: flex; - inset: 0; - justify-content: center; - overflow-y: auto; - position: fixed; - z-index: 25; -} - -.modal { - $this: &; - - @include set-css-variable(( - --inline-size: 34rem - )); - background-color: color('background'); - border: 1px solid color('border'); - border-radius: config('border-radius-sm', $display); - box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); - inline-size: get-css-variable(--inline-size); - margin: spacer('m'); - max-inline-size: 100%; - position: relative; - - &--media { + align-items: start; + background-color: color('background', 'modal'); display: flex; - flex-direction: column; - inline-size: auto; inset: 0; + justify-content: center; + overflow-y: auto; position: fixed; + z-index: 25; +} - #{$this}__body { - @include scrollbar; - flex-grow: 1; - overflow-y: auto; - } - - #{$this}__header-caption { - order: 1; - } - - #{$this}__close { - order: 2; - - @include breakpoint('md') { - order: 3; - } - } - - #{$this}__filter { - inline-size: 100%; - order: 3; - - @include breakpoint('md') { +.modal { + $this: &; + + @include set-css-variable(( + --inline-size: 34rem + )); + background-color: color('background'); + border: 1px solid color('border'); + border-radius: config('border-radius-sm', $display); + box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); + inline-size: get-css-variable(--inline-size); + margin: spacer('m'); + max-inline-size: 100%; + position: relative; + + &--media { + display: flex; + flex-direction: column; inline-size: auto; - margin-inline-start: auto; - order: 2; - } - } - } - - &--dropzone { - &::before { - background-color: color('dropzone-background', 'media'); - border: 2px solid color('dropzone-border', 'media'); - border-radius: config('border-radius-sm', $display); - content: ''; - inset: 0; - pointer-events: none; - position: absolute; - z-index: 2; + inset: 0; + position: fixed; + + #{$this}__body { + @include scrollbar; + flex-grow: 1; + overflow-y: auto; + } + + #{$this}__header-caption { + order: 1; + } + + #{$this}__close { + order: 2; + + @include breakpoint('md') { + order: 3; + } + } + + #{$this}__filter { + inline-size: 100%; + order: 3; + + @include breakpoint('md') { + inline-size: auto; + margin-inline-start: auto; + order: 2; + } + } } - &::after { - align-items: center; - color: hsl(0deg 0% 100%); - content: attr(data-dropzone); - display: flex; - font-size: font-size('h2'); - inset: 0; - justify-content: center; - line-height: config('line-height-md', $typography); - padding: spacer('m'); - position: absolute; - text-align: center; - z-index: 3; + &--dropzone { + &::before { + background-color: color('dropzone-background', 'media'); + border: 2px solid color('dropzone-border', 'media'); + border-radius: config('border-radius-sm', $display); + content: ''; + inset: 0; + pointer-events: none; + position: absolute; + z-index: 2; + } + + &::after { + align-items: center; + color: hsl(0deg 0% 100%); + content: attr(data-dropzone); + display: flex; + font-size: font-size('h2'); + inset: 0; + justify-content: center; + line-height: config('line-height-md', $typography); + padding: spacer('m'); + position: absolute; + text-align: center; + z-index: 3; + } } - } - - &__header { - align-items: center; - border-block-end: 1px solid color('border'); - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - justify-content: space-between; - padding: spacer('s') spacer-clamp('s', 'm'); - &-caption { - @include layout-stack(0); + &__header { + align-items: center; + border-block-end: 1px solid color('border'); + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + justify-content: space-between; + padding: spacer('s') spacer-clamp('s', 'm'); + + &-caption { + @include layout-stack(0); + } } - } - - &__title { - font-size: font-size('h3'); - font-weight: 600; - margin-block: 0; - } - - &__body { - @include layout-stack('s'); - padding: spacer-clamp('s', 'm'); - } - - &__footer { - align-items: center; - border-block-start: 1px solid color('border'); - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - justify-content: end; - padding: spacer('s') spacer-clamp('s', 'm'); - &--space-between { - justify-content: space-between; + &__title { + font-size: font-size('h3'); + font-weight: 600; + margin-block: 0; } - input { - flex-grow: 1; - max-inline-size: 25rem; + &__body { + @include layout-stack('s'); + padding: spacer-clamp('s', 'm'); } - } - &__filter { - align-items: center; - display: flex; - gap: spacer('s'); - margin-inline: calc(#{spacer('xs')} * -1); - -ms-overflow-style: none; - overflow-x: auto; - padding: spacer('xs'); - scrollbar-width: none; - - @include breakpoint('md') { - margin-inline: 0; - overflow: initial; - padding: 0; + &__footer { + align-items: center; + border-block-start: 1px solid color('border'); + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + justify-content: end; + padding: spacer('s') spacer-clamp('s', 'm'); + + &--space-between { + justify-content: space-between; + } + + input { + flex-grow: 1; + max-inline-size: 25rem; + } } - &::-webkit-scrollbar { - display: none; + &__filter { + align-items: center; + display: flex; + gap: spacer('s'); + margin-inline: calc(#{spacer('xs')} * -1); + -ms-overflow-style: none; + overflow-x: auto; + padding: spacer('xs'); + scrollbar-width: none; + + @include breakpoint('md') { + margin-inline: 0; + overflow: initial; + padding: 0; + } + + &::-webkit-scrollbar { + display: none; + } + + select, + input { + inline-size: auto; + min-inline-size: 10rem; + } } - select, - input { - inline-size: auto; - min-inline-size: 10rem; + &__column { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('s'); } - } - - &__column { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - } } diff --git a/resources/sass/component/_notification.scss b/resources/sass/component/_notification.scss index 899bcea1b..40dbab303 100644 --- a/resources/sass/component/_notification.scss +++ b/resources/sass/component/_notification.scss @@ -3,116 +3,116 @@ @use 'sprucecss/scss/spruce' as *; .app-notification { - position: relative; - - &__header { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - justify-content: space-between; - } - - &__title { - font-size: font-size('h4'); - font-weight: 600; - margin-block: 0; - } - - &__list { - @include scrollbar; - max-block-size: 25rem; - overflow-y: auto; - overscroll-behavior: contain; - - > * + * { - border-block-start: 1px solid color('border'); - margin-block-start: spacer('s'); - padding-block-start: spacer('s'); + position: relative; + + &__header { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + justify-content: space-between; } - } - .context-menu { - --inline-size: 20rem; - display: flex; - flex-direction: column; - gap: spacer('s'); - inset: var(--inset-block-start) -4.75rem auto auto; - padding: spacer('s'); + &__title { + font-size: font-size('h4'); + font-weight: 600; + margin-block: 0; + } - @include breakpoint('sm') { - inset: var(--inset-block-start) 0 auto auto; + &__list { + @include scrollbar; + max-block-size: 25rem; + overflow-y: auto; + overscroll-behavior: contain; + + > * + * { + border-block-start: 1px solid color('border'); + margin-block-start: spacer('s'); + padding-block-start: spacer('s'); + } } - @include breakpoint('md') { - --inline-size: 26rem; + .context-menu { + --inline-size: 20rem; + display: flex; + flex-direction: column; + gap: spacer('s'); + inset: var(--inset-block-start) -4.75rem auto auto; + padding: spacer('s'); + + @include breakpoint('sm') { + inset: var(--inset-block-start) 0 auto auto; + } + + @include breakpoint('md') { + --inline-size: 26rem; + } } - } } .notification-card { - @include a11y-card-link('.notification-card__link', true); - display: flex; - gap: spacer('s'); - - &--read { - opacity: 0.5; - } - - &__icon { - --size: 2.5rem; - align-items: center; - block-size: var(--size); - border-radius: config('border-radius-sm', $display); + @include a11y-card-link('.notification-card__link', true); display: flex; - flex-shrink: 0; - inline-size: var(--size); - justify-content: center; - - &--info { - background-color: color.adjust(color('info', 'alert', $only-color: true), $lightness: 55%); - color: color('info', 'alert'); - } + gap: spacer('s'); - &--warning { - background-color: color.adjust(color('warning', 'alert', $only-color: true), $lightness: 41%); - color: color('warning', 'alert'); + &--read { + opacity: 0.5; } - &--danger { - background-color: color.adjust(color('danger', 'alert', $only-color: true), $lightness: 46.5%); - color: color('danger', 'alert'); + &__icon { + --size: 2.5rem; + align-items: center; + block-size: var(--size); + border-radius: config('border-radius-sm', $display); + display: flex; + flex-shrink: 0; + inline-size: var(--size); + justify-content: center; + + &--info { + background-color: color.adjust(color('info', 'alert', $only-color: true), $lightness: 55%); + color: color('info', 'alert'); + } + + &--warning { + background-color: color.adjust(color('warning', 'alert', $only-color: true), $lightness: 41%); + color: color('warning', 'alert'); + } + + &--danger { + background-color: color.adjust(color('danger', 'alert', $only-color: true), $lightness: 46.5%); + color: color('danger', 'alert'); + } + + &--success { + background-color: color.adjust(color('success', 'alert', $only-color: true), $lightness: 63%); + color: color('success', 'alert'); + } + + svg { + --size: 1rem; + block-size: var(--size); + inline-size: var(--size); + } } - &--success { - background-color: color.adjust(color('success', 'alert', $only-color: true), $lightness: 63%); - color: color('success', 'alert'); + &__caption { + @include layout-stack('xxs'); + line-height: config('line-height-md', $typography); + padding-inline-end: spacer('s'); } - svg { - --size: 1rem; - block-size: var(--size); - inline-size: var(--size); + &__title { + font-size: config('font-size-base', $typography); } - } - - &__caption { - @include layout-stack('xxs'); - line-height: config('line-height-md', $typography); - padding-inline-end: spacer('s'); - } - - &__title { - font-size: config('font-size-base', $typography); - } - &__link { - color: color('heading'); - text-decoration: none; + &__link { + color: color('heading'); + text-decoration: none; - &:hover, - &:focus { - color: color('link'); + &:hover, + &:focus { + color: color('link'); + } } - } } diff --git a/resources/sass/component/_open-search.scss b/resources/sass/component/_open-search.scss index 8264c5958..c61b77af0 100644 --- a/resources/sass/component/_open-search.scss +++ b/resources/sass/component/_open-search.scss @@ -1,15 +1,15 @@ @use 'sprucecss/scss/spruce' as *; .open-search { - @include a11y-card-link('.open-search__btn', true); - align-items: center; - display: flex; - gap: spacer('xs'); + @include a11y-card-link('.open-search__btn', true); + align-items: center; + display: flex; + gap: spacer('xs'); - &__icon { - --dimension: 1rem; - block-size: var(--dimension); - color: color('icon', 'search'); - inline-size: var(--dimension); - } + &__icon { + --dimension: 1rem; + block-size: var(--dimension); + color: color('icon', 'search'); + inline-size: var(--dimension); + } } diff --git a/resources/sass/component/_or-separator.scss b/resources/sass/component/_or-separator.scss index 1aeab6612..f6caf2eae 100644 --- a/resources/sass/component/_or-separator.scss +++ b/resources/sass/component/_or-separator.scss @@ -1,18 +1,18 @@ @use 'sprucecss/scss/spruce' as *; .or-separator { - align-items: center; - display: flex; - font-size: config('font-size-sm', $typography); - gap: spacer('s'); - text-transform: uppercase; - - &::before, - &::after { - background-color: color('border'); - block-size: 1px; - content: ''; + align-items: center; display: flex; - inline-size: 100%; - } + font-size: config('font-size-sm', $typography); + gap: spacer('s'); + text-transform: uppercase; + + &::before, + &::after { + background-color: color('border'); + block-size: 1px; + content: ''; + display: flex; + inline-size: 100%; + } } diff --git a/resources/sass/component/_pagination.scss b/resources/sass/component/_pagination.scss index 6874d026b..f8eed3b28 100644 --- a/resources/sass/component/_pagination.scss +++ b/resources/sass/component/_pagination.scss @@ -1,19 +1,19 @@ @use 'sprucecss/scss/spruce' as *; .pagination { - &__links { - @include clear-list; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); + &__links { + @include clear-list; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); - > * + * { - margin-block-start: 0; + > * + * { + margin-block-start: 0; + } } - } - [aria-current="page"] { - background-color: color('primary-background', 'btn'); - color: color('primary-foreground', 'btn'); - } + [aria-current="page"] { + background-color: color('primary-background', 'btn'); + color: color('primary-foreground', 'btn'); + } } diff --git a/resources/sass/component/_preloader.scss b/resources/sass/component/_preloader.scss index 67f7de3c4..604246db8 100644 --- a/resources/sass/component/_preloader.scss +++ b/resources/sass/component/_preloader.scss @@ -1,27 +1,27 @@ @use 'sprucecss/scss/spruce' as *; .preloader--circle { - --color: currentColor; - --border-width: 0.25em; - --size: 1.5rem; - --animation-duration: 1s; + --color: currentColor; + --border-width: 0.25em; + --size: 1.5rem; + --animation-duration: 1s; - block-size: var(--size); - inline-size: var(--size); - - &::after { - animation: rotation var(--animation-duration) linear infinite; block-size: var(--size); - border: var(--border-width) solid var(--color); - border-color: var(--color) transparent var(--color) transparent; - border-radius: 50%; - content: ''; - display: flex; inline-size: var(--size); - } + + &::after { + animation: rotation var(--animation-duration) linear infinite; + block-size: var(--size); + border: var(--border-width) solid var(--color); + border-color: var(--color) transparent var(--color) transparent; + border-radius: 50%; + content: ''; + display: flex; + inline-size: var(--size); + } } @keyframes rotation { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } diff --git a/resources/sass/component/_prism.scss b/resources/sass/component/_prism.scss index 204fe60ce..57dfdc35d 100644 --- a/resources/sass/component/_prism.scss +++ b/resources/sass/component/_prism.scss @@ -1,84 +1,85 @@ @use 'sprucecss/scss/spruce' as *; +/* stylelint-disable selector-no-qualifying-type */ code[class*='language-'], pre[class*='language-'] { - border-radius: config('border-radius-lg', $display); - color: color('color', 'prism'); - font-family: config('font-family-cursive', $typography); - font-size: config('font-size-base', $typography); - hyphens: none; - line-height: 1.5; - tab-size: 4; - text-align: left; - white-space: pre; - word-break: normal; - word-spacing: normal; - word-wrap: normal; + border-radius: config('border-radius-lg', $display); + color: color('color', 'prism'); + font-family: config('font-family-cursive', $typography); + font-size: config('font-size-base', $typography); + hyphens: none; + line-height: 1.5; + tab-size: 4; + text-align: left; + white-space: pre; + word-break: normal; + word-spacing: normal; + word-wrap: normal; } @media print { - code[class*='language-'], - pre[class*='language-'] { - text-shadow: none; - } + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } } /* Code blocks */ pre[class*='language-'] { - display: grid; - overflow: auto; - padding: spacer('m'); + display: grid; + overflow: auto; + padding: spacer('m'); } pre[class*='language-'] code { - background-color: transparent; - padding: 0; + background-color: transparent; + padding: 0; } :not(pre) > code[class*='language-'], pre[class*='language-'] { - @include scrollbar; - background: color('background', 'prism'); - overflow-x: auto; + @include scrollbar; + background: color('background', 'prism'); + overflow-x: auto; } .token.comment, .token.prolog, .token.cdata { - color: color('comment', 'prism'); - font-style: italic; + color: color('comment', 'prism'); + font-style: italic; } .token.punctuation { - color: color('punctuation', 'prism'); + color: color('punctuation', 'prism'); } .namespace { - color: color('namespace', 'prism'); + color: color('namespace', 'prism'); } .token.deleted { - color: color('deleted', 'prism'); - font-style: italic; + color: color('deleted', 'prism'); + font-style: italic; } .token.symbol, .token.operator, .token.keyword, .token.property { - color: color('namespace', 'prism'); + color: color('namespace', 'prism'); } .token.tag { - color: color('punctuation', 'prism'); + color: color('punctuation', 'prism'); } .token.boolean { - color: color('boolean', 'prism'); + color: color('boolean', 'prism'); } .token.number { - color: color('number', 'prism'); + color: color('number', 'prism'); } .token.constant, @@ -89,38 +90,38 @@ pre[class*='language-'] { .language-css .token.string, .style .token.string, .token.char { - color: color('constant', 'prism'); + color: color('constant', 'prism'); } .token.selector, .token.function, .token.doctype { - color: color('punctuation', 'prism'); - font-style: italic; + color: color('punctuation', 'prism'); + font-style: italic; } .token.attr-name, .token.inserted { - color: color('constant', 'prism'); - font-style: italic; + color: color('constant', 'prism'); + font-style: italic; } .token.class-name, .token.atrule { - color: color('class-name', 'prism'); + color: color('class-name', 'prism'); } .token.regex, .token.important, .token.variable { - color: color('regex', 'prism'); + color: color('regex', 'prism'); } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } diff --git a/resources/sass/component/_range-group.scss b/resources/sass/component/_range-group.scss index 8a65fec58..b479b0c97 100644 --- a/resources/sass/component/_range-group.scss +++ b/resources/sass/component/_range-group.scss @@ -1,30 +1,30 @@ @use 'sprucecss/scss/spruce' as *; .range-group { - display: flex; - flex-direction: column; - gap: spacer('xxs'); - - .form-label { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - justify-content: center; - } - - &__inner { - align-items: center; display: flex; - gap: spacer('xs'); + flex-direction: column; + gap: spacer('xxs'); - .form-range { - flex-grow: 1; - margin-block-start: 0; + .form-label { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + justify-content: center; } - .form-range-control { - flex-shrink: 0; + &__inner { + align-items: center; + display: flex; + gap: spacer('xs'); + + .form-range { + flex-grow: 1; + margin-block-start: 0; + } + + .form-range-control { + flex-shrink: 0; + } } - } } diff --git a/resources/sass/component/_skip-link.scss b/resources/sass/component/_skip-link.scss index 02466663f..c0d9a77d6 100644 --- a/resources/sass/component/_skip-link.scss +++ b/resources/sass/component/_skip-link.scss @@ -1,10 +1,10 @@ @use 'sprucecss/scss/spruce' as *; .skip-link { - inset: -50vh auto auto spacer('m'); - position: fixed; + inset: -50vh auto auto spacer('m'); + position: fixed; - &:focus { - inset-block-start: spacer('m'); - } + &:focus { + inset-block-start: spacer('m'); + } } diff --git a/resources/sass/component/_theme-switcher.scss b/resources/sass/component/_theme-switcher.scss index fe859e268..0ae628755 100644 --- a/resources/sass/component/_theme-switcher.scss +++ b/resources/sass/component/_theme-switcher.scss @@ -1,25 +1,25 @@ @use 'sprucecss/scss/spruce' as *; .no-transition { - * { - transition: none !important; - } + * { + transition: none !important; + } } .theme-switcher { - color: color('text'); - display: inline-flex; - position: relative; + color: color('text'); + display: inline-flex; + position: relative; - &[data-theme-mode='system'] &__system-mode { display: flex; } - &[data-theme-mode='light'] &__light-mode { display: flex; } - &[data-theme-mode='dark'] &__dark-mode { display: flex; } + &[data-theme-mode='system'] &__system-mode { display: flex; } + &[data-theme-mode='light'] &__light-mode { display: flex; } + &[data-theme-mode='dark'] &__dark-mode { display: flex; } - button { - display: none; + button { + display: none; - > * { - pointer-events: none; + > * { + pointer-events: none; + } } - } } diff --git a/resources/sass/component/_user-menu.scss b/resources/sass/component/_user-menu.scss index 697115535..23683c3ea 100644 --- a/resources/sass/component/_user-menu.scss +++ b/resources/sass/component/_user-menu.scss @@ -1,51 +1,51 @@ @use 'sprucecss/scss/spruce' as *; .user-menu { - @include a11y-card-link('.user-menu__toggle', true); - align-items: center; - display: flex; - gap: spacer-clamp('xs', 's', '1vw'); - position: relative; - - &__avatar { - --dimension: 2.1rem; - block-size: var(--dimension); - border-radius: 50%; - inline-size: var(--dimension); - } - - &__caption { - display: none; - flex-direction: column; - font-size: config('font-size-base', $typography); - gap: spacer('xxs'); - line-height: 1; - - @include breakpoint('md') { - display: flex; + @include a11y-card-link('.user-menu__toggle', true); + align-items: center; + display: flex; + gap: spacer-clamp('xs', 's', '1vw'); + position: relative; + + &__avatar { + --dimension: 2.1rem; + block-size: var(--dimension); + border-radius: 50%; + inline-size: var(--dimension); } - } - &__role { - font-size: config('font-size-sm', $typography); - } + &__caption { + display: none; + flex-direction: column; + font-size: config('font-size-base', $typography); + gap: spacer('xxs'); + line-height: 1; - &__display-name { - color: color('heading'); - font-weight: 700; - } + @include breakpoint('md') { + display: flex; + } + } - &__toggle { - background: none; - border: 0; - cursor: pointer; - display: flex; - padding: 0; + &__role { + font-size: config('font-size-sm', $typography); + } + + &__display-name { + color: color('heading'); + font-weight: 700; + } - svg { - --dimension: 1em; - block-size: var(--dimension); - inline-size: var(--dimension); + &__toggle { + background: none; + border: 0; + cursor: pointer; + display: flex; + padding: 0; + + svg { + --dimension: 1em; + block-size: var(--dimension); + inline-size: var(--dimension); + } } - } } diff --git a/resources/sass/component/_widget.scss b/resources/sass/component/_widget.scss index 3f8de382e..4dd1a662f 100644 --- a/resources/sass/component/_widget.scss +++ b/resources/sass/component/_widget.scss @@ -2,108 +2,108 @@ @use 'sprucecss/scss/spruce' as *; .app-widget { - $this: &; - align-items: center; - - background-color: color('background'); - border: 1px solid color('border'); - border-radius: config('border-radius-sm', $display); - box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); - display: flex; - justify-content: space-between; - - &--primary { - background-color: color('primary'); - border: 0; - - #{$this}__title, - #{$this}__data { - color: hsl(0deg 0% 100%); + $this: &; + align-items: center; + + background-color: color('background'); + border: 1px solid color('border'); + border-radius: config('border-radius-sm', $display); + box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); + display: flex; + justify-content: space-between; + + &--primary { + background-color: color('primary'); + border: 0; + + #{$this}__title, + #{$this}__data { + color: hsl(0deg 0% 100%); + } } - } - &--secondary { - background-color: color('primary'); - border: 0; + &--secondary { + background-color: color('primary'); + border: 0; - #{$this}__title, - #{$this}__data { - color: hsl(0deg 0% 100%); + #{$this}__title, + #{$this}__data { + color: hsl(0deg 0% 100%); + } } - } - &--summary { - gap: spacer('m'); - justify-content: start; - padding: spacer('m'); + &--summary { + gap: spacer('m'); + justify-content: start; + padding: spacer('m'); - #{$this}__column { - padding: 0; + #{$this}__column { + padding: 0; + } } - } - &--small-data { - #{$this}__data { - font-size: font-size('h4'); + &--small-data { + #{$this}__data { + font-size: font-size('h4'); + } } - } - &__icon { - --dimension: 4rem; - align-items: center; - background-color: color('icon-background', 'widget'); - block-size: var(--dimension); - border-radius: config('border-radius-lg', $display); - color: color('primary'); - display: flex; - flex-shrink: 0; - inline-size: var(--dimension); - justify-content: center; - - svg { - --dimension: 1.5rem; - block-size: var(--dimension); - inline-size: var(--dimension); + &__icon { + --dimension: 4rem; + align-items: center; + background-color: color('icon-background', 'widget'); + block-size: var(--dimension); + border-radius: config('border-radius-lg', $display); + color: color('primary'); + display: flex; + flex-shrink: 0; + inline-size: var(--dimension); + justify-content: center; + + svg { + --dimension: 1.5rem; + block-size: var(--dimension); + inline-size: var(--dimension); + } } - } - &__title { - font-size: font-size('h5'); - font-weight: 600; - margin-block: 0; - } + &__title { + font-size: font-size('h5'); + font-weight: 600; + margin-block: 0; + } - &__data-row { - align-items: center; - display: flex; - gap: spacer('s'); - } + &__data-row { + align-items: center; + display: flex; + gap: spacer('s'); + } - &__data { - line-height: config('line-height-heading', $typography); - margin-block: 0; - } + &__data { + line-height: config('line-height-heading', $typography); + margin-block: 0; + } - &__column { - align-items: start; - color: color('heading'); - display: flex; - flex-direction: column; - font-size: font-size('h1'); - font-weight: 700; - line-height: config('line-height-heading', $typography); - padding: spacer('m'); - - #{$this}__trending { - margin-block-start: spacer('xxs'); + &__column { + align-items: start; + color: color('heading'); + display: flex; + flex-direction: column; + font-size: font-size('h1'); + font-weight: 700; + line-height: config('line-height-heading', $typography); + padding: spacer('m'); + + #{$this}__trending { + margin-block-start: spacer('xxs'); + } } - } - &__chart { - max-inline-size: 65%; + &__chart { + max-inline-size: 65%; - foreignObject { - padding-block: spacer('s'); + foreignObject { + padding-block: spacer('s'); + } } - } } diff --git a/resources/sass/component/badge/_status.scss b/resources/sass/component/badge/_status.scss index 263e528a9..a80a302f1 100644 --- a/resources/sass/component/badge/_status.scss +++ b/resources/sass/component/badge/_status.scss @@ -3,25 +3,25 @@ @use 'sprucecss/scss/spruce' as *; .status { - align-items: center; - display: inline-flex; - gap: spacer('xs'); - line-height: 1; - position: relative; - white-space: nowrap; + align-items: center; + display: inline-flex; + gap: spacer('xs'); + line-height: 1; + position: relative; + white-space: nowrap; - @each $name, $value in map.get($colors, 'alert') { - &--#{$name}::before { - background-color: color($name, 'alert'); + @each $name, $value in map.get($colors, 'alert') { + &--#{$name}::before { + background-color: color($name, 'alert'); + } } - } - &::before { - --dimension: 0.55em; - block-size: var(--dimension); - border-radius: 50%; - content: ''; - flex-shrink: 0; - inline-size: var(--dimension); - } + &::before { + --dimension: 0.55em; + block-size: var(--dimension); + border-radius: 50%; + content: ''; + flex-shrink: 0; + inline-size: var(--dimension); + } } diff --git a/resources/sass/component/badge/_trending.scss b/resources/sass/component/badge/_trending.scss index a605ba16b..3a7bfa4f3 100644 --- a/resources/sass/component/badge/_trending.scss +++ b/resources/sass/component/badge/_trending.scss @@ -2,29 +2,29 @@ @use 'sprucecss/scss/spruce' as *; .trending { - align-items: center; - border-radius: 2rem; - display: inline-flex; - font-family: config('font-family-heading', $typography); - font-size: config('font-size-sm', $typography); - font-weight: 600; - gap: spacer('xxs'); - line-height: 1; - padding: 0.35em 0.55em; + align-items: center; + border-radius: 2rem; + display: inline-flex; + font-family: config('font-family-heading', $typography); + font-size: config('font-size-sm', $typography); + font-weight: 600; + gap: spacer('xxs'); + line-height: 1; + padding: 0.35em 0.55em; - &--up { - background: color.adjust(color('success', 'alert', $only-color: true), $lightness: 60%); - color: color.adjust(color('success', 'alert', $only-color: true), $lightness: -7.5%); - } + &--up { + background: color.adjust(color('success', 'alert', $only-color: true), $lightness: 60%); + color: color.adjust(color('success', 'alert', $only-color: true), $lightness: -7.5%); + } - &--down { - background: color.adjust(color('danger', 'alert', $only-color: true), $lightness: 45%); - color: color.adjust(color('danger', 'alert', $only-color: true), $lightness: -5%); - } + &--down { + background: color.adjust(color('danger', 'alert', $only-color: true), $lightness: 45%); + color: color.adjust(color('danger', 'alert', $only-color: true), $lightness: -5%); + } - &__icon { - --dimension: 0.95em; - block-size: var(--dimension); - inline-size: var(--dimension); - } + &__icon { + --dimension: 0.95em; + block-size: var(--dimension); + inline-size: var(--dimension); + } } diff --git a/resources/sass/component/form/_btn-dropdown.scss b/resources/sass/component/form/_btn-dropdown.scss index ecc575e61..70263c4be 100644 --- a/resources/sass/component/form/_btn-dropdown.scss +++ b/resources/sass/component/form/_btn-dropdown.scss @@ -1,7 +1,7 @@ @use 'sprucecss/scss/spruce' as *; .btn-dropdown { - display: inline-flex; - position: relative; - z-index: 10; + display: inline-flex; + position: relative; + z-index: 10; } diff --git a/resources/sass/component/form/_combobox.scss b/resources/sass/component/form/_combobox.scss index 1ead4f08f..c72ddcfd5 100644 --- a/resources/sass/component/form/_combobox.scss +++ b/resources/sass/component/form/_combobox.scss @@ -1,114 +1,114 @@ @use 'sprucecss/scss/spruce' as *; .combobox { - @include generate-variables($form-control, $include: ('border-width', 'border-radius')); - display: flex; - flex-direction: column; - gap: spacer('xs'); - - &__inner { - position: relative; - } - - &__selected-items { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - } - - &__toggle { - inset: 0 0 0 auto; - pointer-events: none; - position: absolute; - } - - &__reset { - align-self: start; - } - - &__no-results { - padding-inline: spacer('xs'); - } - - &__control { - @include field-icon(config('select', $form-icon, false), color('select-foreground', 'form', true)); - background-position: center right config('icon-right-offset', $form-select, false); - background-repeat: no-repeat; - background-size: config('icon-inline-size', $form-select, false) auto; - padding-inline-end: config('padding-right', $form-select, false); - } - - &__dropdown { - background-color: color('background', 'form'); - border: config('border-width', $form-control) solid color('border', 'form'); - border-radius: config('border-radius', $form-control); - inset: calc(100% + #{spacer('xs')}) 0 auto 0; - padding: spacer('xs'); - position: absolute; - z-index: 5; - } - - [role="listbox"] { - @include clear-list; - @include scrollbar; + @include generate-variables($form-control, $include: ('border-width', 'border-radius')); display: flex; flex-direction: column; gap: spacer('xs'); - max-block-size: 10rem; - overflow-y: auto; - padding-inline-end: spacer('xs'); - > * { - margin-block-start: 0; + &__inner { + position: relative; } - } - [role="option"] { - align-items: center; - border-radius: config('border-radius', $form-control); - display: flex; - justify-content: space-between; - padding-block: spacer('xxs'); - padding-inline: spacer('xs'); - user-select: none; + &__selected-items { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + } + + &__toggle { + inset: 0 0 0 auto; + pointer-events: none; + position: absolute; + } - &[aria-selected="true"] { - background-color: color('light-background', 'btn'); - color: color('light-foreground', 'btn'); + &__reset { + align-self: start; } - &:hover, - &:focus, - &.highlighted { - background-color: color('primary-background', 'btn'); - color: color('primary-foreground', 'btn'); + &__no-results { + padding-inline: spacer('xs'); } - svg { - --dimension: 0.85em; - block-size: var(--dimension); - inline-size: var(--dimension); + &__control { + @include field-icon(config('select', $form-icon, false), color('select-foreground', 'form', true)); + background-position: center right config('icon-right-offset', $form-select, false); + background-repeat: no-repeat; + background-size: config('icon-inline-size', $form-select, false) auto; + padding-inline-end: config('padding-right', $form-select, false); + } + + &__dropdown { + background-color: color('background', 'form'); + border: config('border-width', $form-control) solid color('border', 'form'); + border-radius: config('border-radius', $form-control); + inset: calc(100% + #{spacer('xs')}) 0 auto 0; + padding: spacer('xs'); + position: absolute; + z-index: 5; + } + + [role="listbox"] { + @include clear-list; + @include scrollbar; + display: flex; + flex-direction: column; + gap: spacer('xs'); + max-block-size: 10rem; + overflow-y: auto; + padding-inline-end: spacer('xs'); + + > * { + margin-block-start: 0; + } + } + + [role="option"] { + align-items: center; + border-radius: config('border-radius', $form-control); + display: flex; + justify-content: space-between; + padding-block: spacer('xxs'); + padding-inline: spacer('xs'); + user-select: none; + + &[aria-selected="true"] { + background-color: color('light-background', 'btn'); + color: color('light-foreground', 'btn'); + } + + &:hover, + &:focus, + &.highlighted { + background-color: color('primary-background', 'btn'); + color: color('primary-foreground', 'btn'); + } + + svg { + --dimension: 0.85em; + block-size: var(--dimension); + inline-size: var(--dimension); + } } - } } .combobox-item { - align-items: center; - background-color: color('item-background', 'combobox'); - border-radius: 1em; - color: color('item-foreground', 'combobox'); - display: flex; - font-size: config('font-size-sm', $typography); - gap: spacer('xxs'); - line-height: 1; - padding-block: spacer('xxs'); - padding-inline: spacer('xs') spacer('xxs'); - - .btn--sm { - @include set-css-variable(( - --icon-padding: 0.25em, - --border-radius: 1em, - )); - } + align-items: center; + background-color: color('item-background', 'combobox'); + border-radius: 1em; + color: color('item-foreground', 'combobox'); + display: flex; + font-size: config('font-size-sm', $typography); + gap: spacer('xxs'); + line-height: 1; + padding-block: spacer('xxs'); + padding-inline: spacer('xs') spacer('xxs'); + + .btn--sm { + @include set-css-variable(( + --icon-padding: 0.25em, + --border-radius: 1em, + )); + } } diff --git a/resources/sass/component/form/_editor.scss b/resources/sass/component/form/_editor.scss index 4d0f518cc..bfba78fb5 100644 --- a/resources/sass/component/form/_editor.scss +++ b/resources/sass/component/form/_editor.scss @@ -1,60 +1,60 @@ @use 'sprucecss/scss/spruce' as *; .editor { - @include set-css-variable(( - --block-size: 18rem - )); - @include transition; - block-size: get-css-variable(--block-size); - border: 1px solid color('border', 'form'); - border-radius: config('border-radius-sm', $display); - display: flex; - flex-direction: column; - grid-template-rows: auto 1fr; - overflow: hidden; + @include set-css-variable(( + --block-size: 18rem + )); + @include transition; + block-size: get-css-variable(--block-size); + border: 1px solid color('border', 'form'); + border-radius: config('border-radius-sm', $display); + display: flex; + flex-direction: column; + grid-template-rows: auto 1fr; + overflow: hidden; - &:focus-within { - @include focus-ring( - $type: config('focus-ring-type', $form-control, false), - $border-color: color('border-focus', 'form'), - $ring-color: color('ring-focus', 'form'), - $box-shadow-type: config('focus-ring-box-shadow-type', $form-control, false), - $ring-size: config('focus-ring-size', $form-control, false), - $ring-offset: config('focus-ring-offset', $form-control, false) - ); - } + &:focus-within { + @include focus-ring( + $type: config('focus-ring-type', $form-control, false), + $border-color: color('border-focus', 'form'), + $ring-color: color('ring-focus', 'form'), + $box-shadow-type: config('focus-ring-box-shadow-type', $form-control, false), + $ring-size: config('focus-ring-size', $form-control, false), + $ring-offset: config('focus-ring-offset', $form-control, false) + ); + } - &__controls { - align-items: center; - border-block-end: 1px solid color('border'); - display: flex; - flex-wrap: wrap; - gap: spacer('xs') spacer('s'); - padding: spacer('xs'); + &__controls { + align-items: center; + border-block-end: 1px solid color('border'); + display: flex; + flex-wrap: wrap; + gap: spacer('xs') spacer('s'); + padding: spacer('xs'); - .form-control { - inline-size: auto; + .form-control { + inline-size: auto; + } } - } - &__group { - align-items: flex-start; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - } + &__group { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + } - &__body { - @include scrollbar; - flex: 1 1 auto; - margin: spacer('xxs'); - overflow-x: hidden; - overflow-y: auto; - padding: spacer('s'); + &__body { + @include scrollbar; + flex: 1 1 auto; + margin: spacer('xxs'); + overflow-x: hidden; + overflow-y: auto; + padding: spacer('s'); - > [contenteditable='true'] { - @include layout-stack('xs'); - outline: 0; + > [contenteditable='true'] { + @include layout-stack('xs'); + outline: 0; + } } - } } diff --git a/resources/sass/component/form/_file-group.scss b/resources/sass/component/form/_file-group.scss index 2990b6de6..65636a17f 100644 --- a/resources/sass/component/form/_file-group.scss +++ b/resources/sass/component/form/_file-group.scss @@ -1,98 +1,98 @@ @use 'sprucecss/scss/spruce' as *; .file-group-container { - container: file-group-container / inline-size; + container: file-group-container / inline-size; } .file-group { - $this: &; - @include generate-variables($form-control, $include: ('border-width', 'border-radius')); - align-items: center; - border: config('border-width', $form-control) solid color('border', 'form'); - border-radius: config('border-radius', $form-control); - display: flex; - gap: spacer('m'); - overflow: hidden; - padding: spacer('s'); - - @container file-group-container (inline-size < 30rem) { - flex-direction: column; - } - - &:has([style*='background-image']) { - #{$this}__remove { - display: inline-flex; - } - } - - &__preview { + $this: &; + @include generate-variables($form-control, $include: ('border-width', 'border-radius')); align-items: center; - aspect-ratio: 1; - background-color: color('primary-lightest'); - background-position: center; - background-size: cover; + border: config('border-width', $form-control) solid color('border', 'form'); border-radius: config('border-radius', $form-control); display: flex; - flex-shrink: 0; - flex-wrap: wrap; - inline-size: 9rem; - justify-content: center; + gap: spacer('m'); + overflow: hidden; + padding: spacer('s'); @container file-group-container (inline-size < 30rem) { - aspect-ratio: 16 / 9; - inline-size: 100%; + flex-direction: column; } - &[style*='background-image'] #{$this}__icon { - display: none; + &:has([style*='background-image']) { + #{$this}__remove { + display: inline-flex; + } } - } - &__body { - display: flex; - flex-direction: column; - gap: spacer('xxs'); - inline-size: 100%; + &__preview { + align-items: center; + aspect-ratio: 1; + background-color: color('primary-lightest'); + background-position: center; + background-size: cover; + border-radius: config('border-radius', $form-control); + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + inline-size: 9rem; + justify-content: center; + + @container file-group-container (inline-size < 30rem) { + aspect-ratio: 16 / 9; + inline-size: 100%; + } + + &[style*='background-image'] #{$this}__icon { + display: none; + } + } + + &__body { + display: flex; + flex-direction: column; + gap: spacer('xxs'); + inline-size: 100%; - > * { - margin-block: 0; + > * { + margin-block: 0; + } } - } - - &__icon { - --dimension: 2rem; - block-size: var(--dimension); - color: color('primary'); - inline-size: var(--dimension); - } - - &__title { - color: color('heading'); - font-family: config('font-family-heading', $typography); - font-weight: 700; - } - - &__meta { - list-style: none; - padding-inline-start: 0; - - > * + * { - margin-block-start: 0; + + &__icon { + --dimension: 2rem; + block-size: var(--dimension); + color: color('primary'); + inline-size: var(--dimension); } - } - &__action { - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - margin-block-start: spacer('xs'); - } - - &__remove { - display: none; - } - - &__input { - flex: 1; - } + &__title { + color: color('heading'); + font-family: config('font-family-heading', $typography); + font-weight: 700; + } + + &__meta { + list-style: none; + padding-inline-start: 0; + + > * + * { + margin-block-start: 0; + } + } + + &__action { + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + margin-block-start: spacer('xs'); + } + + &__remove { + display: none; + } + + &__input { + flex: 1; + } } diff --git a/resources/sass/component/form/_file-list.scss b/resources/sass/component/form/_file-list.scss index e79dd3f1a..1713dae2c 100644 --- a/resources/sass/component/form/_file-list.scss +++ b/resources/sass/component/form/_file-list.scss @@ -1,68 +1,68 @@ @use 'sprucecss/scss/spruce' as *; .file-list { - @include generate-variables($form-control, $include: ('border-width', 'border-radius')); - display: flex; - flex-direction: column; - gap: spacer('s'); + @include generate-variables($form-control, $include: ('border-width', 'border-radius')); + display: flex; + flex-direction: column; + gap: spacer('s'); - &__items { - @include clear-list; - border: config('border-width', $form-control) solid color('border', 'form'); - border-radius: config('border-radius', $form-control); - padding: spacer('xs'); + &__items { + @include clear-list; + border: config('border-width', $form-control) solid color('border', 'form'); + border-radius: config('border-radius', $form-control); + padding: spacer('xs'); - > li + li { - border-block-start: config('border-width', $form-control) solid color('border'); - margin-block-start: spacer('xs'); - padding-block-start: spacer('xs'); + > li + li { + border-block-start: config('border-width', $form-control) solid color('border'); + margin-block-start: spacer('xs'); + padding-block-start: spacer('xs'); + } } - } } .file-list-item { - align-items: center; - display: flex; - gap: spacer('s'); - justify-content: space-between; - - &__icon { align-items: center; - aspect-ratio: 1; - background-color: color('background', 'media'); - border-radius: config('border-radius-sm', $display); display: flex; - inline-size: 2.5rem; - justify-content: center; + gap: spacer('s'); + justify-content: space-between; - svg { - --size: 1rem; - block-size: var(--size); - color: color('icon', 'media'); - inline-size: var(--size); + &__icon { + align-items: center; + aspect-ratio: 1; + background-color: color('background', 'media'); + border-radius: config('border-radius-sm', $display); + display: flex; + inline-size: 2.5rem; + justify-content: center; + + svg { + --size: 1rem; + block-size: var(--size); + color: color('icon', 'media'); + inline-size: var(--size); + } } - } - &__column { - align-items: center; - display: flex; - gap: spacer('s'); - } + &__column { + align-items: center; + display: flex; + gap: spacer('s'); + } - &__thumbnail { - aspect-ratio: 1; - border-radius: config('border-radius-sm', $display); - inline-size: 2.5rem; - } + &__thumbnail { + aspect-ratio: 1; + border-radius: config('border-radius-sm', $display); + inline-size: 2.5rem; + } - &__name { - @include text-ellipsis(1); - max-inline-size: 25ch; - } + &__name { + @include text-ellipsis(1); + max-inline-size: 25ch; + } - &__actions { - align-items: center; - display: flex; - gap: spacer('xxs'); - } + &__actions { + align-items: center; + display: flex; + gap: spacer('xxs'); + } } diff --git a/resources/sass/component/form/_repeater.scss b/resources/sass/component/form/_repeater.scss index 89baf01b5..b0b04a5df 100644 --- a/resources/sass/component/form/_repeater.scss +++ b/resources/sass/component/form/_repeater.scss @@ -1,53 +1,53 @@ @use 'sprucecss/scss/spruce' as *; .repeater-container { - @include layout-stack('s'); + @include layout-stack('s'); } .repeater { - @include generate-variables($form-control, $include: ('border-width', 'border-radius')); - border: config('border-width', $form-control) solid color('border', 'form'); - border-radius: config('border-radius', $form-control); - padding: spacer('s'); - - &__heading { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - justify-content: space-between; - } - - &__body { - border-block-start: 1px solid color('border'); - margin-block-start: spacer('s'); - padding-block-start: spacer('s'); - } - - &__column { - align-items: center; - display: flex; - gap: spacer('s'); - } - - &__title { - @include text-ellipsis(1); - font-size: config('font-size-base', $typography); - margin-block: 0; - max-inline-size: 20ch; - } - - &__actions { - align-items: center; - display: flex; - gap: spacer('xxs'); - } - - &__toggle { - &[aria-expanded='true'] { - .vertical-line { - display: none; - } + @include generate-variables($form-control, $include: ('border-width', 'border-radius')); + border: config('border-width', $form-control) solid color('border', 'form'); + border-radius: config('border-radius', $form-control); + padding: spacer('s'); + + &__heading { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + justify-content: space-between; + } + + &__body { + border-block-start: 1px solid color('border'); + margin-block-start: spacer('s'); + padding-block-start: spacer('s'); + } + + &__column { + align-items: center; + display: flex; + gap: spacer('s'); + } + + &__title { + @include text-ellipsis(1); + font-size: config('font-size-base', $typography); + margin-block: 0; + max-inline-size: 20ch; + } + + &__actions { + align-items: center; + display: flex; + gap: spacer('xxs'); + } + + &__toggle { + &[aria-expanded='true'] { + .vertical-line { + display: none; + } + } } - } } diff --git a/resources/sass/component/form/_search-form.scss b/resources/sass/component/form/_search-form.scss index 2ea17a40b..1782aeae2 100644 --- a/resources/sass/component/form/_search-form.scss +++ b/resources/sass/component/form/_search-form.scss @@ -1,43 +1,43 @@ @use 'sprucecss/scss/spruce' as *; .search-form { - $this: &; - position: relative; + $this: &; + position: relative; - &--sm { - #{$this}__control { - padding-inline-start: 1.75em; - } + &--sm { + #{$this}__control { + padding-inline-start: 1.75em; + } - #{$this}__submit { - padding-inline: 0.6em; - } + #{$this}__submit { + padding-inline: 0.6em; + } - #{$this}__icon { - --dimension: 0.75rem; + #{$this}__icon { + --dimension: 0.75rem; + } } - } - &__control { - padding-inline-start: 2.15em; - } + &__control { + padding-inline-start: 2.15em; + } - &__submit { - align-items: center; - background: none; - border: 0; - color: color('border', 'form'); - display: flex; - inset: 0 auto 0 0; - justify-content: center; - padding-block: 0; - padding-inline: 0.75em; - position: absolute; - } + &__submit { + align-items: center; + background: none; + border: 0; + color: color('border', 'form'); + display: flex; + inset: 0 auto 0 0; + justify-content: center; + padding-block: 0; + padding-inline: 0.75em; + position: absolute; + } - &__icon { - --dimension: 0.9rem; - block-size: var(--dimension); - inline-size: var(--dimension); - } + &__icon { + --dimension: 0.9rem; + block-size: var(--dimension); + inline-size: var(--dimension); + } } diff --git a/resources/sass/config/_config.scss b/resources/sass/config/_config.scss index 4a35289ee..b9fbd6d1e 100644 --- a/resources/sass/config/_config.scss +++ b/resources/sass/config/_config.scss @@ -7,126 +7,126 @@ $color-primary-lightest: hsl(210deg 60% 98%); $color-danger: hsl(0deg 71% 51%); @use 'sprucecss/scss/spruce' with ( - $btn: ( - 'font-family': #{'Manrope', sans-serif}, - 'font-weight': 600, - ), - $btn-lg: ( - 'font-size': 1rem, - ), - $colors: ( - 'base': ( - 'border': hsl(215deg 100% 96%), - 'primary-lightest': $color-primary-lightest, + $btn: ( + 'font-family': #{'Manrope', sans-serif}, + 'font-weight': 600, ), - 'btn': ( - 'dark-background': hsl(205deg 100% 2%), - 'dark-background-hover': hsl(205deg 100% 5%), - 'dark-foreground': hsl(0deg 0% 100%), - 'dark-outline-border': hsl(260deg 4% 70%), - 'dark-outline-foreground': hsl(205deg 100% 2%), - 'dark-outline-foreground-hover': hsl(0deg 0% 100%), - 'dark-outline-background-hover': hsl(205deg 100% 2%), - 'dark-outline-focus-ring': hsl(205deg 100% 2%), - 'light-background': $color-primary-lightest, - 'light-background-hover': $color-primary, - 'light-focus-ring': $color-primary, - 'light-foreground': $color-primary, - 'light-foreground-hover': hsl(0deg 0% 100%), - 'delete-background': color.adjust($color-danger, $lightness: 45%), - 'delete-background-hover': $color-danger, - 'delete-focus-ring': $color-danger, - 'delete-foreground': $color-danger, - 'delete-foreground-hover': hsl(0deg 0% 100%), - 'primary-outline-foreground': $color-primary, + $btn-lg: ( + 'font-size': 1rem, ), - 'breadcrumb': ( - 'separator': hsl(0deg 0% 80%), + $colors: ( + 'base': ( + 'border': hsl(215deg 100% 96%), + 'primary-lightest': $color-primary-lightest, + ), + 'btn': ( + 'dark-background': hsl(205deg 100% 2%), + 'dark-background-hover': hsl(205deg 100% 5%), + 'dark-foreground': hsl(0deg 0% 100%), + 'dark-outline-border': hsl(260deg 4% 70%), + 'dark-outline-foreground': hsl(205deg 100% 2%), + 'dark-outline-foreground-hover': hsl(0deg 0% 100%), + 'dark-outline-background-hover': hsl(205deg 100% 2%), + 'dark-outline-focus-ring': hsl(205deg 100% 2%), + 'light-background': $color-primary-lightest, + 'light-background-hover': $color-primary, + 'light-focus-ring': $color-primary, + 'light-foreground': $color-primary, + 'light-foreground-hover': hsl(0deg 0% 100%), + 'delete-background': color.adjust($color-danger, $lightness: 45%), + 'delete-background-hover': $color-danger, + 'delete-focus-ring': $color-danger, + 'delete-foreground': $color-danger, + 'delete-foreground-hover': hsl(0deg 0% 100%), + 'primary-outline-foreground': $color-primary, + ), + 'breadcrumb': ( + 'separator': hsl(0deg 0% 80%), + ), + 'combobox': ( + 'item-background': $color-primary-lightest, + 'item-foreground': $color-primary, + ), + 'data-table': ( + 'icon': hsl(0deg 0% 80%), + ), + 'form': ( + 'border': hsl(260deg 4% 75%), + ), + 'header': ( + 'background': hsl(0deg 0% 100% / 95%), + ), + 'navigation': ( + 'arrow': hsl(0deg 0% 0% / 15%), + ), + 'main': ( + 'background': $color-primary-lightest, + ), + 'media': ( + 'background': $color-primary-lightest, + 'dropzone-background': hsl(214deg 98% 49% / 75%), + 'dropzone-border': hsl(214deg 98% 40%), + 'icon': $color-primary, + ), + 'modal': ( + 'background': hsl(210deg 60% 98% / 90%), + ), + 'search': ( + 'icon': hsl(229deg 26% 48% / 25%), + ), + 'prism': ( + 'color': hsl(243deg 14% 29%), + 'background': hsl(0deg 0% 98%), + 'comment': hsl(225deg 14% 46%), + 'punctuation': hsl(279deg 50% 53%), + 'namespace': hsl(173deg 100% 24%), + 'deleted': hsl(1deg 83% 63% / 56%), + 'boolean': hsl(0deg 44% 53%), + 'number': hsl(315deg 90% 35%), + 'constant': hsl(221deg 57% 52%), + 'class-name': hsl(0deg 0% 7%), + 'regex': hsl(1deg 48% 59%), + ), + 'table': ( + 'hover': $color-primary-lightest, + 'stripe': $color-primary-lightest, + ), + 'widget': ( + 'icon-background': color.adjust($color-primary, $lightness: 49%), + ), ), - 'combobox': ( - 'item-background': $color-primary-lightest, - 'item-foreground': $color-primary, + $color-primary: $color-primary, + $color-secondary: $color-secondary, + $dark-colors: dark.$colors, + $display: ( + 'border-radius-sm': 0.45rem, ), - 'data-table': ( - 'icon': hsl(0deg 0% 80%), + $form-check: ( + 'font-weight': 400, ), - 'form': ( - 'border': hsl(260deg 4% 75%), + $form-control-sm: ( + 'padding': 0.1em 0.45em, ), - 'header': ( - 'background': hsl(0deg 0% 100% / 95%), + $form-fieldset: ( + 'gap': 0.5rem, + 'legend-font-size': 0.938rem, + 'legend-font-weight': 600, ), - 'navigation': ( - 'arrow': hsl(0deg 0% 0% / 15%), + $form-group: ( + 'row-container-inline-size': 40rem, ), - 'main': ( - 'background': $color-primary-lightest, + $form-label: ( + 'font-family': #{'Manrope', sans-serif}, + 'font-weight': 600, ), - 'media': ( - 'background': $color-primary-lightest, - 'dropzone-background': hsl(214deg 98% 49% / 75%), - 'dropzone-border': hsl(214deg 98% 40%), - 'icon': $color-primary, + $typography: ( + 'font-family-base': #{'Open Sans', sans-serif}, + 'font-family-heading': #{'Manrope', sans-serif}, + 'font-size-base': 0.938rem, + 'font-weight-heading': 600, ), - 'modal': ( - 'background': hsl(210deg 60% 98% / 90%), - ), - 'search': ( - 'icon': hsl(229deg 26% 48% / 25%), - ), - 'prism': ( - 'color': hsl(243deg 14% 29%), - 'background': hsl(0deg 0% 98%), - 'comment': hsl(225deg 14% 46%), - 'punctuation': hsl(279deg 50% 53%), - 'namespace': hsl(173deg 100% 24%), - 'deleted': hsl(1deg 83% 63% / 56%), - 'boolean': hsl(0deg 44% 53%), - 'number': hsl(315deg 90% 35%), - 'constant': hsl(221deg 57% 52%), - 'class-name': hsl(0deg 0% 7%), - 'regex': hsl(1deg 48% 59%), - ), - 'table': ( - 'hover': $color-primary-lightest, - 'stripe': $color-primary-lightest, - ), - 'widget': ( - 'icon-background': color.adjust($color-primary, $lightness: 49%), - ), - ), - $color-primary: $color-primary, - $color-secondary: $color-secondary, - $dark-colors: dark.$colors, - $display: ( - 'border-radius-sm': 0.45rem, - ), - $form-check: ( - 'font-weight': 400, - ), - $form-control-sm: ( - 'padding': 0.1em 0.45em, - ), - $form-fieldset: ( - 'gap': 0.5rem, - 'legend-font-size': 0.938rem, - 'legend-font-weight': 600, - ), - $form-group: ( - 'row-container-inline-size': 40rem, - ), - $form-label: ( - 'font-family': #{'Manrope', sans-serif}, - 'font-weight': 600, - ), - $typography: ( - 'font-family-base': #{'Open Sans', sans-serif}, - 'font-family-heading': #{'Manrope', sans-serif}, - 'font-size-base': 0.938rem, - 'font-weight-heading': 600, - ), - $settings: ( - 'css-custom-properties': true, - 'prefix': 'root', - ) + $settings: ( + 'css-custom-properties': true, + 'prefix': 'root', + ) ); diff --git a/resources/sass/config/_dark-colors.scss b/resources/sass/config/_dark-colors.scss index 29eea5aeb..1d48f9f7c 100644 --- a/resources/sass/config/_dark-colors.scss +++ b/resources/sass/config/_dark-colors.scss @@ -10,138 +10,138 @@ $dark-color-success: hsl(150deg 100% 33%); $dark-color-white: hsl(0deg 0% 95%); $colors: ( - 'base': ( - 'background': $dark-color-black, - 'blockquote-border': $dark-color-primary, - 'border': $dark-color-gray-dark, - 'card-border': hsl(207deg 90% 13%), - 'code-background': hsl(207deg 64% 21%), - 'code-foreground': $dark-color-white, - 'footer-background': hsl(0deg 0% 0% / 15%), - 'heading': $dark-color-white, - 'link-hover': hsl(205deg 100% 62%), - 'link': hsl(205deg 100% 56%), - 'mark-background': hsl(50deg 100% 80%), - 'mark-foreground': $dark-color-black, - 'marker': $dark-color-primary, - 'primary': $dark-color-primary, - 'primary-lightest': hsl(240deg 30% 16%), - 'secondary': $dark-color-secondary, - 'text': $dark-color-gray, - ), - 'breadcrumb': ( - 'arrow': hsl(0deg 0% 100% / 10%), - ), - 'btn': ( - 'dark-background': hsl(0deg 0% 100%), - 'dark-background-hover': hsl(0deg 0% 95%), - 'dark-foreground': hsl(205deg 100% 5%), - 'dark-outline-border': hsl(0 0% 100% / 15%), - 'dark-outline-foreground': hsl(0deg 0% 100%), - 'dark-outline-foreground-hover': hsl(205deg 100% 2%), - 'dark-outline-background-hover': hsl(0deg 0% 100%), - 'dark-outline-focus-ring': hsl(0deg 0% 100%), - 'light-background': hsl(240deg 30% 12%), - 'light-background-hover': $dark-color-primary, - 'light-focus-ring': $dark-color-primary, - 'light-foreground': $dark-color-primary, - 'light-foreground-hover': hsl(0deg 0% 100%), - 'primary-background': $dark-color-primary, - 'primary-background-hover': color.adjust($dark-color-primary, $lightness: 10%), - 'primary-foreground': hsl(0deg 0% 100%), - 'primary-shadow': color.adjust($dark-color-primary, $lightness: -25%), - 'primary-outline-foreground': hsl(211deg 99% 60%), - 'secondary-background': $dark-color-secondary, - 'secondary-background-hover': color.adjust($dark-color-secondary, $lightness: 5%), - 'secondary-foreground': $dark-color-white, - ), - 'card': ( - 'background': $dark-color-black, - ), - 'combobox': ( - 'item-background': hsl(240deg 30% 12%), - 'item-foreground': $dark-color-primary, - ), - 'data-table': ( - 'icon': hsl(0deg 0% 100% / 0.1), - ), - 'form': ( - 'background': color.scale($dark-color-black, $lightness: 5%), - 'background-disabled': $dark-color-black, - 'border-disabled': $dark-color-gray-dark, - 'border-focus': $dark-color-primary, - 'border': hsl(0deg 0% 100% / 12%), - 'check-background': $dark-color-primary, - 'check-foreground': $dark-color-black, - 'group-label-background': color.scale($dark-color-black, $lightness: 2.5%), - 'group-label-foreground': $dark-color-gray, - 'invalid': $dark-color-danger, - 'invalid-shadow': color.adjust($dark-color-danger, $alpha: -0.75), - 'label': $dark-color-white, - 'legend': $dark-color-white, - 'placeholder': hsl(0deg 0% 90%), - 'select-foreground': hsl(0deg 0% 100%), - 'shadow-focus': color.adjust($dark-color-primary, $alpha: -0.75), - 'text': $dark-color-gray, - 'valid': $dark-color-success, - 'valid-shadow': color.adjust($dark-color-success, $alpha: -0.75), - ), - 'header': ( - 'background': hsl(240deg 30% 12% / 95%), - ), - 'navigation': ( - 'arrow': hsl(0deg 0% 100% / 15%), - 'icon-background': hsl(245deg 38% 10%), - 'icon-background-hover': $dark-color-primary, - 'icon-foreground': $dark-color-primary, - 'icon-foreground-hover': hsl(186deg 100% 5%), - ), - 'main': ( - 'background': hsl(240deg 30% 13%), - ), - 'media': ( - 'background': hsl(240deg 30% 12%), - 'dropzone-background': hsl(214deg 98% 49% / 75%), - 'dropzone-border': hsl(214deg 98% 40%), - 'icon': $dark-color-primary, - ), - 'modal': ( - 'background': hsla(240, 3%, 7%, 0.9), - ), - 'prism': ( - 'color': hsl(217deg 34% 88%), - 'background': hsl(245deg 38% 7%), - 'comment': hsl(180deg 9% 55%), - 'punctuation': hsl(276deg 68% 75%), - 'namespace': hsl(197deg 31% 77%), - 'deleted': hsl(1deg 83% 63% / 56%), - 'boolean': hsl(350deg 100% 67%), - 'number': hsl(14deg 90% 70%), - 'constant': hsl(221deg 100% 75%), - 'class-name': hsl(33deg 100% 77%), - 'regex': hsl(217deg 34% 88%), - ), - 'table': ( - 'border': $dark-color-gray-dark, - 'caption': $dark-color-gray, - 'heading': $dark-color-white, - 'hover': hsl(0deg 0% 100% / 2%), - 'stripe': hsl(0deg 0% 100% / 2.5%), - 'text': $dark-color-gray, - ), - 'selection': ( - 'background': $dark-color-primary, - 'foreground': hsl(0deg 0% 100%), - ), - 'search': ( - 'icon': hsl(0deg 0% 100% / 25%), - ), - 'scrollbar': ( - 'thumb-background': hsl(0 0% 100% / 15%), - 'thumb-background-hover': hsl(0 0% 100% / 25%), - 'track-background': hsl(0 0% 100% / 5%), - ), - 'widget': ( - 'icon-background': color.adjust($dark-color-black, $lightness: 5%), - ), + 'base': ( + 'background': $dark-color-black, + 'blockquote-border': $dark-color-primary, + 'border': $dark-color-gray-dark, + 'card-border': hsl(207deg 90% 13%), + 'code-background': hsl(207deg 64% 21%), + 'code-foreground': $dark-color-white, + 'footer-background': hsl(0deg 0% 0% / 15%), + 'heading': $dark-color-white, + 'link-hover': hsl(205deg 100% 62%), + 'link': hsl(205deg 100% 56%), + 'mark-background': hsl(50deg 100% 80%), + 'mark-foreground': $dark-color-black, + 'marker': $dark-color-primary, + 'primary': $dark-color-primary, + 'primary-lightest': hsl(240deg 30% 16%), + 'secondary': $dark-color-secondary, + 'text': $dark-color-gray, + ), + 'breadcrumb': ( + 'arrow': hsl(0deg 0% 100% / 10%), + ), + 'btn': ( + 'dark-background': hsl(0deg 0% 100%), + 'dark-background-hover': hsl(0deg 0% 95%), + 'dark-foreground': hsl(205deg 100% 5%), + 'dark-outline-border': hsl(0 0% 100% / 15%), + 'dark-outline-foreground': hsl(0deg 0% 100%), + 'dark-outline-foreground-hover': hsl(205deg 100% 2%), + 'dark-outline-background-hover': hsl(0deg 0% 100%), + 'dark-outline-focus-ring': hsl(0deg 0% 100%), + 'light-background': hsl(240deg 30% 12%), + 'light-background-hover': $dark-color-primary, + 'light-focus-ring': $dark-color-primary, + 'light-foreground': $dark-color-primary, + 'light-foreground-hover': hsl(0deg 0% 100%), + 'primary-background': $dark-color-primary, + 'primary-background-hover': color.adjust($dark-color-primary, $lightness: 10%), + 'primary-foreground': hsl(0deg 0% 100%), + 'primary-shadow': color.adjust($dark-color-primary, $lightness: -25%), + 'primary-outline-foreground': hsl(211deg 99% 60%), + 'secondary-background': $dark-color-secondary, + 'secondary-background-hover': color.adjust($dark-color-secondary, $lightness: 5%), + 'secondary-foreground': $dark-color-white, + ), + 'card': ( + 'background': $dark-color-black, + ), + 'combobox': ( + 'item-background': hsl(240deg 30% 12%), + 'item-foreground': $dark-color-primary, + ), + 'data-table': ( + 'icon': hsl(0deg 0% 100% / 0.1), + ), + 'form': ( + 'background': color.scale($dark-color-black, $lightness: 5%), + 'background-disabled': $dark-color-black, + 'border-disabled': $dark-color-gray-dark, + 'border-focus': $dark-color-primary, + 'border': hsl(0deg 0% 100% / 12%), + 'check-background': $dark-color-primary, + 'check-foreground': $dark-color-black, + 'group-label-background': color.scale($dark-color-black, $lightness: 2.5%), + 'group-label-foreground': $dark-color-gray, + 'invalid': $dark-color-danger, + 'invalid-shadow': color.adjust($dark-color-danger, $alpha: -0.75), + 'label': $dark-color-white, + 'legend': $dark-color-white, + 'placeholder': hsl(0deg 0% 90%), + 'select-foreground': hsl(0deg 0% 100%), + 'shadow-focus': color.adjust($dark-color-primary, $alpha: -0.75), + 'text': $dark-color-gray, + 'valid': $dark-color-success, + 'valid-shadow': color.adjust($dark-color-success, $alpha: -0.75), + ), + 'header': ( + 'background': hsl(240deg 30% 12% / 95%), + ), + 'navigation': ( + 'arrow': hsl(0deg 0% 100% / 15%), + 'icon-background': hsl(245deg 38% 10%), + 'icon-background-hover': $dark-color-primary, + 'icon-foreground': $dark-color-primary, + 'icon-foreground-hover': hsl(186deg 100% 5%), + ), + 'main': ( + 'background': hsl(240deg 30% 13%), + ), + 'media': ( + 'background': hsl(240deg 30% 12%), + 'dropzone-background': hsl(214deg 98% 49% / 75%), + 'dropzone-border': hsl(214deg 98% 40%), + 'icon': $dark-color-primary, + ), + 'modal': ( + 'background': hsla(240, 3%, 7%, 0.9), + ), + 'prism': ( + 'color': hsl(217deg 34% 88%), + 'background': hsl(245deg 38% 7%), + 'comment': hsl(180deg 9% 55%), + 'punctuation': hsl(276deg 68% 75%), + 'namespace': hsl(197deg 31% 77%), + 'deleted': hsl(1deg 83% 63% / 56%), + 'boolean': hsl(350deg 100% 67%), + 'number': hsl(14deg 90% 70%), + 'constant': hsl(221deg 100% 75%), + 'class-name': hsl(33deg 100% 77%), + 'regex': hsl(217deg 34% 88%), + ), + 'table': ( + 'border': $dark-color-gray-dark, + 'caption': $dark-color-gray, + 'heading': $dark-color-white, + 'hover': hsl(0deg 0% 100% / 2%), + 'stripe': hsl(0deg 0% 100% / 2.5%), + 'text': $dark-color-gray, + ), + 'selection': ( + 'background': $dark-color-primary, + 'foreground': hsl(0deg 0% 100%), + ), + 'search': ( + 'icon': hsl(0deg 0% 100% / 25%), + ), + 'scrollbar': ( + 'thumb-background': hsl(0 0% 100% / 15%), + 'thumb-background-hover': hsl(0 0% 100% / 25%), + 'track-background': hsl(0 0% 100% / 5%), + ), + 'widget': ( + 'icon-background': color.adjust($dark-color-black, $lightness: 5%), + ), ); diff --git a/resources/sass/config/_dark-mode.scss b/resources/sass/config/_dark-mode.scss index 79bf74c2c..26b5ad9c4 100644 --- a/resources/sass/config/_dark-mode.scss +++ b/resources/sass/config/_dark-mode.scss @@ -1,20 +1,20 @@ @use 'sprucecss/scss/spruce' as *; @include generate-color-variables( - $dark-colors, - ':root[data-theme-mode="dark"]' + $dark-colors, + ':root[data-theme-mode="dark"]' ); [data-theme-mode='dark'] { - color-scheme: dark; + color-scheme: dark; - /* stylelint-disable */ - select.form-control:not([multiple]):not([size]), - .combobox__control { - @include field-icon( - config('select', $form-icon, false), - color('select-foreground', 'form', true, $dark-colors) - ); - } - /* stylelint-enable */ + /* stylelint-disable */ + select.form-control:not([multiple]):not([size]), + .combobox__control { + @include field-icon( + config('select', $form-icon, false), + color('select-foreground', 'form', true, $dark-colors) + ); + } + /* stylelint-enable */ } diff --git a/resources/sass/extend/_btn.scss b/resources/sass/extend/_btn.scss index 3e0796e62..6f4d21f3b 100644 --- a/resources/sass/extend/_btn.scss +++ b/resources/sass/extend/_btn.scss @@ -2,45 +2,45 @@ @use 'sprucecss/scss/spruce' as *; .btn--dark { - @include btn-variant('dark'); + @include btn-variant('dark'); } .btn--light { - @include btn-variant('light'); + @include btn-variant('light'); - &.btn--active { - background-color: color('light-background-hover', 'btn'); - border-color: color('light-background-hover', 'btn'); - color: color('light-foreground-hover', 'btn'); - } + &.btn--active { + background-color: color('light-background-hover', 'btn'); + border-color: color('light-background-hover', 'btn'); + color: color('light-foreground-hover', 'btn'); + } } .btn--delete { - @include btn-variant('delete'); + @include btn-variant('delete'); } .btn--dark { - @include btn-variant('dark'); + @include btn-variant('dark'); } .btn--outline-dark { - @include btn-variant-outline('dark'); + @include btn-variant-outline('dark'); } .btn { - &--counter { - position: relative; - } - - &__counter { - background-color: color('danger', 'alert'); - border-radius: config('border-radius-sm', $display); - color: color('primary-foreground', 'btn'); - font-size: 0.6375rem; - inset: -0.5em -0.5em auto auto; - min-inline-size: 1.25rem; - padding: 0.45em; - position: absolute; - text-align: center; - } + &--counter { + position: relative; + } + + &__counter { + background-color: color('danger', 'alert'); + border-radius: config('border-radius-sm', $display); + color: color('primary-foreground', 'btn'); + font-size: 0.6375rem; + inset: -0.5em -0.5em auto auto; + min-inline-size: 1.25rem; + padding: 0.45em; + position: absolute; + text-align: center; + } } diff --git a/resources/sass/extend/_chart.scss b/resources/sass/extend/_chart.scss index a2546de53..47719deb8 100644 --- a/resources/sass/extend/_chart.scss +++ b/resources/sass/extend/_chart.scss @@ -1,39 +1,39 @@ @use 'sprucecss/scss/spruce' as *; .apexcharts-legend-series { - align-items: center; - display: flex !important; - gap: spacer('xxs'); + align-items: center; + display: flex !important; + gap: spacer('xxs'); } .apexcharts-legend { - display: flex; - gap: spacer('s'); + display: flex; + gap: spacer('s'); - > * { - margin: 0 !important; - } + > * { + margin: 0 !important; + } } .apexcharts-text, .apexcharts-legend-text { - color: color('text') !important; - fill: color('text'); + color: color('text') !important; + fill: color('text'); } .apexcharts-tooltip, .apexcharts-tooltip-title { - background: color('background') !important; - border-color: color('border') !important; + background: color('background') !important; + border-color: color('border') !important; } .apexcharts-tooltip-title { - line-height: 1; - padding-block: 0.75em !important; + line-height: 1; + padding-block: 0.75em !important; } .apexcharts-xaxis-tick, .apexcharts-gridline, .apexcharts-grid-borders line:last-child { - stroke: color('border'); + stroke: color('border'); } diff --git a/resources/sass/extend/_form.scss b/resources/sass/extend/_form.scss index 88cb13835..f41c7db83 100644 --- a/resources/sass/extend/_form.scss +++ b/resources/sass/extend/_form.scss @@ -1,26 +1,26 @@ @use 'sprucecss/scss/spruce' as *; .form-group-stack { - @include layout-stack('s'); + @include layout-stack('s'); - &--bordered { - > * + * { - border-block-start: 1px solid color('border'); - padding-block-start: spacer('s'); + &--bordered { + > * + * { + border-block-start: 1px solid color('border'); + padding-block-start: spacer('s'); + } } - } } legend { - font-family: config('font-family-heading', $typography); + font-family: config('font-family-heading', $typography); } .form-control[type=color] { - @include set-css-variable(( - --border-radius: spacer-clamp('m', 'l') - )); + @include set-css-variable(( + --border-radius: spacer-clamp('m', 'l') + )); } .required-marker { - color: color('danger', 'alert'); + color: color('danger', 'alert'); } diff --git a/resources/sass/extend/_progress.scss b/resources/sass/extend/_progress.scss index c55e28429..c671f346c 100644 --- a/resources/sass/extend/_progress.scss +++ b/resources/sass/extend/_progress.scss @@ -1,43 +1,43 @@ @use 'sprucecss/scss/spruce' as *; .progressbar { - display: flex; - flex-direction: column; - gap: spacer('xs'); - inline-size: 100%; + display: flex; + flex-direction: column; + gap: spacer('xs'); + inline-size: 100%; - &__inner { - background-color: color('background', 'form'); - block-size: 0.5rem; - border-radius: config('border-radius-sm', $display); - box-shadow: inset 0 0 0 1px color('border', 'form'); - position: relative; - } + &__inner { + background-color: color('background', 'form'); + block-size: 0.5rem; + border-radius: config('border-radius-sm', $display); + box-shadow: inset 0 0 0 1px color('border', 'form'); + position: relative; + } - &__indicator { - background-color: color('primary'); - block-size: 100%; - border-radius: config('border-radius-sm', $display); - inset: 0 auto 0 0; - position: absolute; + &__indicator { + background-color: color('primary'); + block-size: 100%; + border-radius: config('border-radius-sm', $display); + inset: 0 auto 0 0; + position: absolute; - &:not([style*="inline-size"]) { - animation: 1s progress infinite linear alternate; - inline-size: 20%; + &:not([style*="inline-size"]) { + animation: 1s progress infinite linear alternate; + inline-size: 20%; + } } - } - &__caption { - text-align: center; - } + &__caption { + text-align: center; + } } @keyframes progress { - 0% { - inset-inline-start: 0%; - } + 0% { + inset-inline-start: 0%; + } - 100% { - inset-inline-start: 80%; - } + 100% { + inset-inline-start: 80%; + } } diff --git a/resources/sass/helper/_display.scss b/resources/sass/helper/_display.scss index ac449b9a3..b3162836f 100644 --- a/resources/sass/helper/_display.scss +++ b/resources/sass/helper/_display.scss @@ -1,19 +1,19 @@ @use 'sprucecss/scss/spruce' as *; .display { - @each $name, $breakpoint in $breakpoints { - @include breakpoint($name) { - &--flex\:#{$name} { - display: flex !important; - } + @each $name, $breakpoint in $breakpoints { + @include breakpoint($name) { + &--flex\:#{$name} { + display: flex !important; + } + } } - } - @each $name, $breakpoint in $breakpoints { - @include breakpoint($name) { - &--none\:#{$name} { - display: none !important; - } + @each $name, $breakpoint in $breakpoints { + @include breakpoint($name) { + &--none\:#{$name} { + display: none !important; + } + } } - } } diff --git a/resources/sass/helper/_margin.scss b/resources/sass/helper/_margin.scss index 2ecdecfd7..6903e069c 100644 --- a/resources/sass/helper/_margin.scss +++ b/resources/sass/helper/_margin.scss @@ -1,5 +1,5 @@ @use 'sprucecss/scss/spruce' as *; .m-block\:0 { - margin-block: 0 !important; + margin-block: 0 !important; } diff --git a/resources/sass/layout/_auth.scss b/resources/sass/layout/_auth.scss index ea0286c25..35609dc75 100644 --- a/resources/sass/layout/_auth.scss +++ b/resources/sass/layout/_auth.scss @@ -1,85 +1,85 @@ @use 'sprucecss/scss/spruce' as *; .l-auth { - &__inner { - background-attachment: fixed; - display: flex; - flex-direction: column; - min-block-size: 100vh; - text-align: center; + &__inner { + background-attachment: fixed; + display: flex; + flex-direction: column; + min-block-size: 100vh; + text-align: center; - @include breakpoint('md') { - align-items: center; - flex-direction: row; - text-align: start; + @include breakpoint('md') { + align-items: center; + flex-direction: row; + text-align: start; + } } - } - &__sidebar { - background-image: url('/vendor/root/img/auth-background.png'); - background-position: center; - background-size: cover; - border-radius: 2rem; - margin-block-end: spacer-clamp('m', 'l'); - margin-inline: spacer-clamp('m', 'l'); - min-block-size: 10rem; + &__sidebar { + background-image: url('/vendor/root/img/auth-background.png'); + background-position: center; + background-size: cover; + border-radius: 2rem; + margin-block-end: spacer-clamp('m', 'l'); + margin-inline: spacer-clamp('m', 'l'); + min-block-size: 10rem; - @include breakpoint('md') { - block-size: calc(100% - 2 * #{spacer('l')}); - inline-size: calc(50% - #{spacer('l')}); - inset-block: spacer('l'); - inset-inline: 50% spacer('l'); - margin: 0; - position: fixed; + @include breakpoint('md') { + block-size: calc(100% - 2 * #{spacer('l')}); + inline-size: calc(50% - #{spacer('l')}); + inset-block: spacer('l'); + inset-inline: 50% spacer('l'); + margin: 0; + position: fixed; + } } - } - &__form { - align-items: center; - block-size: 100%; - display: flex; - flex-direction: column; - gap: spacer('l'); - justify-content: center; - padding-block: spacer('l'); - padding-inline: spacer-clamp('m', 'l'); + &__form { + align-items: center; + block-size: 100%; + display: flex; + flex-direction: column; + gap: spacer('l'); + justify-content: center; + padding-block: spacer('l'); + padding-inline: spacer-clamp('m', 'l'); - @include breakpoint('md') { - inline-size: 50%; - margin-inline-start: 0; - min-block-size: 100vh; + @include breakpoint('md') { + inline-size: 50%; + margin-inline-start: 0; + min-block-size: 100vh; + } } - } - &__logo { - align-self: center; - block-size: 1.5rem; - display: inline-flex; + &__logo { + align-self: center; + block-size: 1.5rem; + display: inline-flex; - @include breakpoint('md') { - align-self: flex-start; - } + @include breakpoint('md') { + align-self: flex-start; + } - img { - block-size: 100%; - inline-size: auto; + img { + block-size: 100%; + inline-size: auto; + } } - } - &__footer { - inline-size: 100%; + &__footer { + inline-size: 100%; - p { - margin-block: 0; + p { + margin-block: 0; + } } - } - .auth-form { - inline-size: 100%; - max-inline-size: 25rem; + .auth-form { + inline-size: 100%; + max-inline-size: 25rem; - @include breakpoint('md') { - padding-block-end: spacer('m'); + @include breakpoint('md') { + padding-block-end: spacer('m'); + } } - } } diff --git a/resources/sass/layout/_container.scss b/resources/sass/layout/_container.scss index adf7e8443..ca37c2669 100644 --- a/resources/sass/layout/_container.scss +++ b/resources/sass/layout/_container.scss @@ -1,19 +1,19 @@ @use 'sprucecss/scss/spruce' as *; .container { - --inline-size: #{config('container-inline-size', $layout)}; - --gap: #{get-css-variable(--container-gap)}; + --inline-size: #{config('container-inline-size', $layout)}; + --gap: #{get-css-variable(--container-gap)}; - @include layout-center( - var(--gap), - var(--inline-size) - ); + @include layout-center( + var(--gap), + var(--inline-size) + ); - &--wide { - --inline-size: 100%; - } + &--wide { + --inline-size: 100%; + } - &--narrow { - --inline-size: 50rem; - } + &--narrow { + --inline-size: 50rem; + } } diff --git a/resources/sass/layout/_main.scss b/resources/sass/layout/_main.scss index 30eb89841..e0c0b124f 100644 --- a/resources/sass/layout/_main.scss +++ b/resources/sass/layout/_main.scss @@ -1,35 +1,35 @@ @use 'sprucecss/scss/spruce' as *; .l-main { - display: flex; - position: relative; + display: flex; + position: relative; - &__sidebar { - background-color: color('background'); - display: none; - inline-size: get-css-variable(--sidebar-inline-size); - inset-block: 0; - inset-inline: 0 auto; - position: fixed; - z-index: 20; + &__sidebar { + background-color: color('background'); + display: none; + inline-size: get-css-variable(--sidebar-inline-size); + inset-block: 0; + inset-inline: 0 auto; + position: fixed; + z-index: 20; - @include breakpoint('md') { - display: block; - } + @include breakpoint('md') { + display: block; + } - &--open { - display: block; + &--open { + display: block; + } } - } - &__body { - background-color: color('background', 'main'); - inline-size: 100%; - min-block-size: 100lvh; + &__body { + background-color: color('background', 'main'); + inline-size: 100%; + min-block-size: 100lvh; - @include breakpoint('md') { - inline-size: calc(100% - #{get-css-variable(--sidebar-inline-size)}); - margin-inline-start: get-css-variable(--sidebar-inline-size); + @include breakpoint('md') { + inline-size: calc(100% - #{get-css-variable(--sidebar-inline-size)}); + margin-inline-start: get-css-variable(--sidebar-inline-size); + } } - } } diff --git a/resources/sass/layout/_row.scss b/resources/sass/layout/_row.scss index d21be5568..a26675ba1 100644 --- a/resources/sass/layout/_row.scss +++ b/resources/sass/layout/_row.scss @@ -1,30 +1,30 @@ @use 'sprucecss/scss/spruce' as *; .l-row { - align-items: start; - display: grid; - gap: spacer('m'); - grid-template-columns: minmax(0, 1fr); + align-items: start; + display: grid; + gap: spacer('m'); + grid-template-columns: minmax(0, 1fr); - @each $name, $breakpoint in $breakpoints { - @for $i from 1 through 4 { - @include breakpoint($name) { - &--column\:#{$name}\:#{$i} { - grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); + @each $name, $breakpoint in $breakpoints { + @for $i from 1 through 4 { + @include breakpoint($name) { + &--column\:#{$name}\:#{$i} { + grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); + } + } } - } } - } - &--sidebar { - @include breakpoint('lg') { - grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); + &--sidebar { + @include breakpoint('lg') { + grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); + } } - } - &__column { - display: grid; - gap: spacer('m'); - grid-template-columns: minmax(0, 1fr); - } + &__column { + display: grid; + gap: spacer('m'); + grid-template-columns: minmax(0, 1fr); + } } diff --git a/resources/sass/section/_actions.scss b/resources/sass/section/_actions.scss index 848b5e94d..7d914dccf 100644 --- a/resources/sass/section/_actions.scss +++ b/resources/sass/section/_actions.scss @@ -1,18 +1,18 @@ @use 'sprucecss/scss/spruce' as *; .app-actions { - justify-content: space-between; + justify-content: space-between; - &--sidebar { - @include breakpoint('lg') { - margin-inline-end: calc(20rem + #{spacer('m')}); + &--sidebar { + @include breakpoint('lg') { + margin-inline-end: calc(20rem + #{spacer('m')}); + } } - } - &, - &__column { - display: flex; - flex-wrap: wrap; - gap: spacer('m'); - } + &, + &__column { + display: flex; + flex-wrap: wrap; + gap: spacer('m'); + } } diff --git a/resources/sass/section/_body.scss b/resources/sass/section/_body.scss index 17f324c04..d7d6327bb 100644 --- a/resources/sass/section/_body.scss +++ b/resources/sass/section/_body.scss @@ -1,7 +1,7 @@ @use 'sprucecss/scss/spruce' as *; .app-body { - display: flex; - flex-direction: column; - gap: spacer('m'); + display: flex; + flex-direction: column; + gap: spacer('m'); } diff --git a/resources/sass/section/_footer.scss b/resources/sass/section/_footer.scss index 7324a2013..7f84a7016 100644 --- a/resources/sass/section/_footer.scss +++ b/resources/sass/section/_footer.scss @@ -1,10 +1,10 @@ @use 'sprucecss/scss/spruce' as *; .app-footer { - padding-block: spacer-clamp('m', 'l'); - text-align: center; + padding-block: spacer-clamp('m', 'l'); + text-align: center; - &__created-with { - margin-block: 0; - } + &__created-with { + margin-block: 0; + } } diff --git a/resources/sass/section/_header.scss b/resources/sass/section/_header.scss index 42740b236..24b0ea865 100644 --- a/resources/sass/section/_header.scss +++ b/resources/sass/section/_header.scss @@ -1,56 +1,56 @@ @use 'sprucecss/scss/spruce' as *; .app-header { - backdrop-filter: saturate(180%) blur(.25rem); - background-color: color('background', 'header'); - border-block-end: 1px solid color('border'); - inset-block-start: 0; - inset-block-start: 0; - position: sticky; - position: sticky; - z-index: 15; - - &__inner { - align-items: center; - block-size: get-css-variable(--header-block-size); - display: flex; - flex-wrap: wrap; - gap: spacer-clamp('s', 'l'); - justify-content: space-between; - margin-inline: get-css-variable(--container-gap); - } - - &__column { - align-items: center; - display: flex; - flex-grow: 1; - gap: spacer-clamp('s', 'm'); - } - - &__actions { - align-items: center; - display: flex; - gap: spacer-clamp('s', 'm'); - - &--secondary { - gap: spacer('s'); + backdrop-filter: saturate(180%) blur(.25rem); + background-color: color('background', 'header'); + border-block-end: 1px solid color('border'); + inset-block-start: 0; + inset-block-start: 0; + position: sticky; + position: sticky; + z-index: 15; + + &__inner { + align-items: center; + block-size: get-css-variable(--header-block-size); + display: flex; + flex-wrap: wrap; + gap: spacer-clamp('s', 'l'); + justify-content: space-between; + margin-inline: get-css-variable(--container-gap); } - } - &__logo { - block-size: 1.25rem; - display: inline-flex; + &__column { + align-items: center; + display: flex; + flex-grow: 1; + gap: spacer-clamp('s', 'm'); + } + + &__actions { + align-items: center; + display: flex; + gap: spacer-clamp('s', 'm'); + + &--secondary { + gap: spacer('s'); + } + } + + &__logo { + block-size: 1.25rem; + display: inline-flex; - @include breakpoint('md') { - display: none; + @include breakpoint('md') { + display: none; + } } - } - &__breadcrumb { - display: none; + &__breadcrumb { + display: none; - @include breakpoint('md') { - display: flex; + @include breakpoint('md') { + display: flex; + } } - } } diff --git a/resources/sass/section/_heading.scss b/resources/sass/section/_heading.scss index eeee75b53..905f33e93 100644 --- a/resources/sass/section/_heading.scss +++ b/resources/sass/section/_heading.scss @@ -1,41 +1,41 @@ @use 'sprucecss/scss/spruce' as *; .app-heading { - padding-block: spacer-clamp('m', 'l'); + padding-block: spacer-clamp('m', 'l'); - &__inner { - display: flex; - flex-wrap: wrap; - gap: spacer('s') spacer('m'); - justify-content: space-between; + &__inner { + display: flex; + flex-wrap: wrap; + gap: spacer('s') spacer('m'); + justify-content: space-between; - &--column { - flex-direction: column; + &--column { + flex-direction: column; + } } - } - &__caption { - @include layout-stack('xs'); - } + &__caption { + @include layout-stack('xs'); + } - &__title { - font-weight: 700; - } + &__title { + font-weight: 700; + } - &__description { - @include layout-stack('xxs'); - align-items: center; - display: flex; - flex-wrap: wrap; - font-size: 1rem; - gap: spacer('xs') spacer('m'); - } + &__description { + @include layout-stack('xxs'); + align-items: center; + display: flex; + flex-wrap: wrap; + font-size: 1rem; + gap: spacer('xs') spacer('m'); + } - &__actions { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs')spacer('s'); - justify-content: end; - } + &__actions { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs')spacer('s'); + justify-content: end; + } } diff --git a/resources/sass/section/_sidebar.scss b/resources/sass/section/_sidebar.scss index a8f7ed33c..3164ce24e 100644 --- a/resources/sass/section/_sidebar.scss +++ b/resources/sass/section/_sidebar.scss @@ -1,49 +1,49 @@ @use 'sprucecss/scss/spruce' as *; .app-sidebar { - block-size: 100%; - border-inline-end: 1px solid color('border'); - display: flex; - flex-direction: column; - gap: spacer('m'); - padding-block: 0 spacer('m'); + block-size: 100%; + border-inline-end: 1px solid color('border'); + display: flex; + flex-direction: column; + gap: spacer('m'); + padding-block: 0 spacer('m'); - &__logo { - block-size: 1.25rem; - display: inline-flex; - } + &__logo { + block-size: 1.25rem; + display: inline-flex; + } - &__search { - display: none; + &__search { + display: none; - @include breakpoint('md') { - display: flex; + @include breakpoint('md') { + display: flex; + } } - } - &__header { - align-items: center; - block-size: get-css-variable(--header-block-size); - border-block-end: 1px solid color('border'); - display: flex; - flex-shrink: 0; - justify-content: space-between; - margin-inline: spacer('m'); - } + &__header { + align-items: center; + block-size: get-css-variable(--header-block-size); + border-block-end: 1px solid color('border'); + display: flex; + flex-shrink: 0; + justify-content: space-between; + margin-inline: spacer('m'); + } - &__body { - @include scrollbar( - $border-radius: 0.15em - ); - flex-grow: 1; - margin-inline: calc(#{spacer('m')} / 2); - overflow-y: auto; - padding-inline: calc(#{spacer('m')} / 2); + &__body { + @include scrollbar( + $border-radius: 0.15em + ); + flex-grow: 1; + margin-inline: calc(#{spacer('m')} / 2); + overflow-y: auto; + padding-inline: calc(#{spacer('m')} / 2); - > * + * { - border-block-start: 1px solid color('border'); - margin-block-start: spacer('s'); - padding-block-start: spacer('s'); + > * + * { + border-block-start: 1px solid color('border'); + margin-block-start: spacer('s'); + padding-block-start: spacer('s'); + } } - } }