From 9cc9a36b104c487c92775e2b6206620973f00e09 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Thu, 6 Aug 2026 00:46:56 +0200 Subject: [PATCH 1/3] Wire stylelint into the SCSS lint pipeline (#2794) Co-authored-by: codecalm --- .changeset/stylelint-scss-cleanup.md | 5 + .stylelintrc | 8 - core/package.json | 6 +- core/scss/_settings.scss | 4 +- core/scss/_variables-marketing.scss | 0 core/scss/_variables.scss | 14 +- core/scss/bootstrap/_carousel.scss | 4 +- core/scss/bootstrap/_nav.scss | 4 +- core/scss/bootstrap/_offcanvas.scss | 6 +- core/scss/bootstrap/_placeholders.scss | 2 +- core/scss/bootstrap/_spinners.scss | 4 +- core/scss/fonts/_geist.scss | 100 ++-- core/scss/helpers/_index.scss | 16 +- core/scss/layout/_animations.scss | 6 +- core/scss/layout/_core.scss | 26 +- core/scss/layout/_dark.scss | 2 +- core/scss/layout/_footer.scss | 8 +- core/scss/layout/_navbar.scss | 118 ++-- core/scss/layout/_page.scss | 84 ++- core/scss/marketing/_browser.scss | 20 +- core/scss/marketing/_hero.scss | 22 +- core/scss/marketing/_pricing.scss | 46 +- core/scss/marketing/_sections.scss | 16 +- core/scss/marketing/_shape.scss | 10 +- core/scss/mixins/bootstrap/_caret.scss | 2 +- core/scss/tests/_caret.test.scss | 2 +- core/scss/ui/_accordion.scss | 31 +- core/scss/ui/_alerts.scss | 23 +- core/scss/ui/_avatars.scss | 24 +- core/scss/ui/_badges.scss | 33 +- core/scss/ui/_breadcrumbs.scss | 15 +- core/scss/ui/_buttons.scss | 59 +- core/scss/ui/_calendars.scss | 10 +- core/scss/ui/_cards.scss | 95 ++-- core/scss/ui/_carousel.scss | 23 +- core/scss/ui/_charts.scss | 8 +- core/scss/ui/_chat.scss | 4 +- core/scss/ui/_close.scss | 18 +- core/scss/ui/_datagrid.scss | 4 +- core/scss/ui/_dropdowns.scss | 45 +- core/scss/ui/_empty.scss | 4 +- core/scss/ui/_flags.scss | 4 +- core/scss/ui/_forms.scss | 20 +- core/scss/ui/_grid.scss | 8 +- core/scss/ui/_icons.scss | 2 +- core/scss/ui/_images.scss | 2 +- core/scss/ui/_legend.scss | 4 +- core/scss/ui/_lists.scss | 24 +- core/scss/ui/_loaders.scss | 18 +- core/scss/ui/_markdown.scss | 6 +- core/scss/ui/_modals.scss | 16 +- core/scss/ui/_nav.scss | 6 +- core/scss/ui/_offcanvas.scss | 2 +- core/scss/ui/_pagination.scss | 8 +- core/scss/ui/_patterns.scss | 26 +- core/scss/ui/_payments.scss | 6 +- core/scss/ui/_popovers.scss | 2 +- core/scss/ui/_progress.scss | 30 +- core/scss/ui/_ribbons.scss | 60 +- core/scss/ui/_segmented.scss | 14 +- core/scss/ui/_signature.scss | 8 +- core/scss/ui/_social.scss | 2 +- core/scss/ui/_stars.scss | 2 +- core/scss/ui/_status.scss | 32 +- core/scss/ui/_steps.scss | 56 +- core/scss/ui/_switch-icon.scss | 20 +- core/scss/ui/_tables.scss | 46 +- core/scss/ui/_tags.scss | 20 +- core/scss/ui/_timeline.scss | 12 +- core/scss/ui/_toasts.scss | 2 +- core/scss/ui/_toolbar.scss | 4 +- core/scss/ui/_tracking.scss | 8 +- core/scss/ui/_type.scss | 88 +-- core/scss/ui/forms/_form-check.scss | 23 +- core/scss/ui/forms/_form-colorinput.scss | 6 +- core/scss/ui/forms/_form-custom.scss | 2 +- core/scss/ui/forms/_form-icon.scss | 6 +- core/scss/ui/forms/_form-imagecheck.scss | 8 +- core/scss/ui/forms/_form-selectgroup.scss | 21 +- core/scss/ui/typo/_hr.scss | 32 +- core/scss/utils/_background.scss | 2 +- core/scss/utils/_colors.scss | 4 +- core/scss/vendor/_apexcharts.scss | 14 +- core/scss/vendor/_coloris.scss | 22 +- core/scss/vendor/_dropzone.scss | 8 +- core/scss/vendor/_fullcalendar.scss | 18 +- core/scss/vendor/_jsvectormap.scss | 18 +- core/scss/vendor/_litepicker.scss | 4 +- core/scss/vendor/_nouislider.scss | 16 +- core/scss/vendor/_tom-select.scss | 14 +- core/scss/vendor/_wysiwyg.scss | 6 +- package.json | 7 +- pnpm-lock.yaml | 649 ++++++++++++++++++++++ stylelint.config.mjs | 52 ++ 94 files changed, 1564 insertions(+), 857 deletions(-) create mode 100644 .changeset/stylelint-scss-cleanup.md delete mode 100644 .stylelintrc delete mode 100644 core/scss/_variables-marketing.scss create mode 100644 stylelint.config.mjs diff --git a/.changeset/stylelint-scss-cleanup.md b/.changeset/stylelint-scss-cleanup.md new file mode 100644 index 000000000..02d172038 --- /dev/null +++ b/.changeset/stylelint-scss-cleanup.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Added Stylelint for SCSS and cleaned up the issues it found: removed dead and duplicate rules, replaced named colors (`white`, `red`) with variables, simplified redundant `&` nesting selectors, and fixed a missing space in a `.form-switch` transition declaration. diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index 87eb443df..000000000 --- a/.stylelintrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": [ - "stylelint-config-twbs-bootstrap/scss" - ], - "rules": { - "selector-no-qualifying-type": null - } -} \ No newline at end of file diff --git a/core/package.json b/core/package.json index 5b7cfe286..ea0f6a113 100644 --- a/core/package.json +++ b/core/package.json @@ -11,7 +11,9 @@ "clean": "shx rm -rf dist demo", "css": "tsx ../.build/build-css.ts scss dist/css --rtl --minify --banner", "css-build": "tsx ../.build/build-css.ts scss dist/css", - "css-lint": "pnpm run css-lint-variables", + "css-lint": "pnpm run lint:scss && pnpm run css-lint-variables", + "lint:scss": "stylelint \"scss/**/*.scss\" --config ../stylelint.config.mjs", + "lint:scss:fix": "pnpm run lint:scss --fix", "css-lint-variables": "find-unused-sass-variables scss/", "js": "pnpm run js-build && pnpm run js-build-min", "js-build": "concurrently \"pnpm run js-build-standalone\" \"pnpm run js-build-theme\"", @@ -284,4 +286,4 @@ "directories": { "doc": "docs" } -} \ No newline at end of file +} diff --git a/core/scss/_settings.scss b/core/scss/_settings.scss index 14ca34ecf..7613d835e 100644 --- a/core/scss/_settings.scss +++ b/core/scss/_settings.scss @@ -11,8 +11,8 @@ // Characters which are escaped by the escape-svg function $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default; -$black: #000000 !default; -$white: #ffffff !default; +$black: #000 !default; +$white: #fff !default; // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". $min-contrast-ratio: 2 !default; diff --git a/core/scss/_variables-marketing.scss b/core/scss/_variables-marketing.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 427a60f57..2f7be8444 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -628,12 +628,12 @@ $extra-colors: ( ) !default; $social-colors: ( - 'x': #000000, + 'x': #000, 'facebook': #1877f2, 'twitter': #1da1f2, 'linkedin': #0a66c2, 'google': #dc4e41, - 'youtube': #ff0000, + 'youtube': #f00, 'vimeo': #1ab7ea, 'dribbble': #ea4c89, 'github': #181717, @@ -727,8 +727,8 @@ $backdrop-opacity: 0.32 !default; $backdrop-blur: 4px !default; $backdrop-bg: light-dark(var(--gray-800), var(--black)) !default; $backdrops: ( - dark: color-mix(in srgb, var(--color-dark), transparent var(--backdrop-opacity)), - light: color-mix(in srgb, var(--color-light), transparent var(--backdrop-opacity)), + dark: color-mix(in sRGB, var(--color-dark), transparent var(--backdrop-opacity)), + light: color-mix(in sRGB, var(--color-light), transparent var(--backdrop-opacity)), ) !default; // Gradient @@ -1967,16 +1967,16 @@ $form-select-font-size-lg: $input-font-size-lg !default; $form-select-border-radius-lg: $input-border-radius-lg !default; $form-select-transition: $input-transition !default; -$form-switch-color: white !default; +$form-switch-color: $white !default; $form-switch-width: 2rem !default; $form-switch-height: 1.25rem !default; $form-switch-padding-start: $form-switch-width + 0.5rem !default; $form-switch-bg-image: url("data:image/svg+xml,") !default; $form-switch-border-radius: $form-switch-width !default; $form-switch-transition: background-position 0.15s ease-in-out !default; -$form-switch-focus-color: white !default; +$form-switch-focus-color: $white !default; $form-switch-focus-bg-image: url("data:image/svg+xml,") !default; -$form-switch-checked-color: white !default; +$form-switch-checked-color: $white !default; $form-switch-checked-bg-image: url("data:image/svg+xml,") !default; $form-switch-checked-bg-position: right center !default; diff --git a/core/scss/bootstrap/_carousel.scss b/core/scss/bootstrap/_carousel.scss index a41e6bb93..5e2856c92 100644 --- a/core/scss/bootstrap/_carousel.scss +++ b/core/scss/bootstrap/_carousel.scss @@ -46,13 +46,13 @@ .carousel-item-next:not(.carousel-item-start), .active.carousel-item-end { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * 100%)); } .carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * -100%)); } diff --git a/core/scss/bootstrap/_nav.scss b/core/scss/bootstrap/_nav.scss index 93c8e83c6..43b576a5d 100644 --- a/core/scss/bootstrap/_nav.scss +++ b/core/scss/bootstrap/_nav.scss @@ -141,7 +141,7 @@ &:hover, &:focus { - border-bottom-color: currentcolor; + border-bottom-color: currentColor; } } @@ -149,7 +149,7 @@ .show > .nav-link { font-weight: $font-weight-bold; color: var(--nav-underline-link-active-color); - border-bottom-color: currentcolor; + border-bottom-color: currentColor; } } diff --git a/core/scss/bootstrap/_offcanvas.scss b/core/scss/bootstrap/_offcanvas.scss index 6cf643edb..c7f1dc68c 100644 --- a/core/scss/bootstrap/_offcanvas.scss +++ b/core/scss/bootstrap/_offcanvas.scss @@ -55,7 +55,8 @@ inset-inline-start: 0; width: var(--offcanvas-width); border-inline-end: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - /*rtl:ignore*/ + + /* rtl:ignore */ transform: translateX(calc(var(--dir) * -100%)); } @@ -64,7 +65,8 @@ inset-inline-end: 0; width: var(--offcanvas-width); border-inline-start: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - /*rtl:ignore*/ + + /* rtl:ignore */ transform: translateX(calc(var(--dir) * 100%)); } diff --git a/core/scss/bootstrap/_placeholders.scss b/core/scss/bootstrap/_placeholders.scss index 3a50c23d2..d6121b5af 100644 --- a/core/scss/bootstrap/_placeholders.scss +++ b/core/scss/bootstrap/_placeholders.scss @@ -5,7 +5,7 @@ min-height: 1em; vertical-align: middle; cursor: wait; - background-color: currentcolor; + background-color: currentColor; opacity: $placeholder-opacity-max; &.btn::before { diff --git a/core/scss/bootstrap/_spinners.scss b/core/scss/bootstrap/_spinners.scss index cf30b73ea..2b273643b 100644 --- a/core/scss/bootstrap/_spinners.scss +++ b/core/scss/bootstrap/_spinners.scss @@ -34,7 +34,7 @@ --spinner-animation-name: spinner-border; // scss-docs-end spinner-border-css-vars - border: var(--spinner-border-width) solid currentcolor; + border: var(--spinner-border-width) solid currentColor; border-right-color: transparent; } @@ -71,7 +71,7 @@ --spinner-animation-name: spinner-grow; // scss-docs-end spinner-grow-css-vars - background-color: currentcolor; + background-color: currentColor; opacity: 0; } diff --git a/core/scss/fonts/_geist.scss b/core/scss/fonts/_geist.scss index d2f7fa9f0..12c64062a 100644 --- a/core/scss/fonts/_geist.scss +++ b/core/scss/fonts/_geist.scss @@ -2,204 +2,204 @@ @use '../config' as *; @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 100; src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype'); - font-weight: 100; - font-style: normal; font-display: swap; } @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 200; src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype'); - font-weight: 200; - font-style: normal; font-display: swap; } @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 300; src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; font-display: swap; } @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 400; src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; font-display: swap; } @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 500; src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype'); - font-weight: 500; - font-style: normal; font-display: swap; } @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 600; src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; font-display: swap; } @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 700; src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; font-display: swap; } @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 800; src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype'); - font-weight: 800; - font-style: normal; font-display: swap; } @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 900; src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype'); - font-weight: 900; - font-style: normal; font-display: swap; } // Geist Sans Variable Font @font-face { - font-family: 'Geist'; + font-family: Geist; + font-style: normal; + font-weight: 100 900; src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype'); - font-weight: 100 900; - font-style: normal; font-display: swap; } // Geist Mono Font Family @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 100; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype'); - font-weight: 100; - font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 200; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype'); - font-weight: 200; - font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 300; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 400; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 500; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype'); - font-weight: 500; - font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 600; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 700; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 800; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype'); - font-weight: 800; - font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 900; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype'); - font-weight: 900; - font-style: normal; font-display: swap; } // Geist Mono Variable Font @font-face { font-family: 'Geist Mono'; + font-style: normal; + font-weight: 100 900; src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype'); - font-weight: 100 900; - font-style: normal; font-display: swap; } diff --git a/core/scss/helpers/_index.scss b/core/scss/helpers/_index.scss index d37247da2..2e27153e1 100644 --- a/core/scss/helpers/_index.scss +++ b/core/scss/helpers/_index.scss @@ -24,7 +24,7 @@ align-self: stretch; width: $vr-border-width; min-height: 1em; - background-color: currentcolor; + background-color: currentColor; opacity: $hr-opacity; } @@ -34,10 +34,10 @@ .stretched-link { &::after { position: absolute; - top: 0; - inset-inline-end: 0; - bottom: 0; inset-inline-start: 0; + inset-inline-end: 0; + top: 0; + bottom: 0; z-index: 1; content: ''; } @@ -75,17 +75,17 @@ .fixed-top { position: fixed; - top: 0; - inset-inline-end: 0; inset-inline-start: 0; + inset-inline-end: 0; + top: 0; z-index: $zindex-fixed; } .fixed-bottom { position: fixed; + inset-inline-start: 0; inset-inline-end: 0; bottom: 0; - inset-inline-start: 0; z-index: $zindex-fixed; } @@ -123,8 +123,8 @@ > * { position: absolute; - top: 0; inset-inline-start: 0; + top: 0; width: 100%; height: 100%; } diff --git a/core/scss/layout/_animations.scss b/core/scss/layout/_animations.scss index 61cc99a97..b44196216 100644 --- a/core/scss/layout/_animations.scss +++ b/core/scss/layout/_animations.scss @@ -61,7 +61,7 @@ } @keyframes blink { - from { + 0% { opacity: 0; } @@ -69,7 +69,7 @@ opacity: 1; } - to { + 100% { opacity: 0; } } @@ -94,7 +94,7 @@ transform: scale3d(1.25, 1.25, 1.25) rotate(-5deg); } - to { + 100% { transform: scaleX(1); } } diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss index 85cadc7f6..606466b89 100644 --- a/core/scss/layout/_core.scss +++ b/core/scss/layout/_core.scss @@ -12,28 +12,28 @@ html { // stylelint-disable property-no-vendor-prefix body { - letter-spacing: $body-letter-spacing; - touch-action: manipulation; - text-rendering: optimizeLegibility; + position: relative; + height: 100%; + min-height: 100%; + padding: 0; font-feature-settings: 'liga' 0, 'cv03', 'cv04', 'cv11'; - position: relative; - min-height: 100%; - height: 100%; - padding: 0; + letter-spacing: $body-letter-spacing; + touch-action: manipulation; + text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - @include media-print { + @include media-print() { background: transparent; } } -@include scrollbar; +@include scrollbar(); // // Fluid container @@ -54,20 +54,20 @@ body { --theme-boxed-width: #{map.get($container-max-widths, xxl)}; @include media-breakpoint-up(md) { - background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed; padding: 1rem; + background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed; --theme-boxed-border-radius: #{$border-radius}; } .page { - margin: 0 auto; max-width: var(--theme-boxed-width); - @include border-radius(var(--theme-boxed-border-radius)); + margin: 0 auto; color: var(--body-color); + @include border-radius(var(--theme-boxed-border-radius)); @include media-breakpoint-up(md) { - border: var(--border-width) var(--border-style) var(--border-color); background: var(--body-bg); + border: var(--border-width) var(--border-style) var(--border-color); } > .navbar:first-child { diff --git a/core/scss/layout/_dark.scss b/core/scss/layout/_dark.scss index 716c4461c..3b59491a3 100644 --- a/core/scss/layout/_dark.scss +++ b/core/scss/layout/_dark.scss @@ -40,7 +40,7 @@ .navbar-brand-autodark { .navbar-brand-image { - @include autodark-image; + @include autodark-image(); } } } diff --git a/core/scss/layout/_footer.scss b/core/scss/layout/_footer.scss index 3178d95a9..fc652442a 100644 --- a/core/scss/layout/_footer.scss +++ b/core/scss/layout/_footer.scss @@ -1,13 +1,13 @@ @use '../config' as *; .footer { - border-top: var(--border-width) var(--border-style) $footer-border-color; - background-color: $footer-bg; padding: $footer-padding-y 0; - color: $footer-color; margin-top: auto; + color: $footer-color; + background-color: $footer-bg; + border-top: var(--border-width) var(--border-style) $footer-border-color; - @include media-print { + @include media-print() { display: none; } } diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss index 8c8edfc79..e276831c7 100644 --- a/core/scss/layout/_navbar.scss +++ b/core/scss/layout/_navbar.scss @@ -17,8 +17,8 @@ margin-inline-end: 0; .nav-link { - padding: 0.5rem calc(#{$container-padding-x} / 2); justify-content: start; + padding: 0.5rem calc(#{$container-padding-x} / 2); } } @@ -27,19 +27,19 @@ } .dropdown-menu { - padding: 0; - background: transparent; position: static; - color: inherit; - box-shadow: none; - border: none; min-width: 0; + padding: 0; margin: 0; + color: inherit; + background: transparent; + border: none; + box-shadow: none; .dropdown-item { - min-width: 0; display: flex; width: auto; + min-width: 0; padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem); color: inherit; @@ -59,21 +59,24 @@ padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem); } + // Third-level submenu in the mobile vertical navbar — genuinely nested two + // dropdown-menu levels deep. + // stylelint-disable-next-line selector-max-class, selector-max-compound-selectors .dropdown-menu .dropdown-menu .dropdown-item { padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem); } } - .dropdown-toggle:after { + .dropdown-toggle::after { margin-inline-start: auto; } - .nav-item.active:after { - border-bottom-width: 0; - border-inline-start-width: 3px; + .nav-item.active::after { inset-inline-end: auto; top: 0; bottom: 0; + border-inline-start-width: 3px; + border-bottom-width: 0; } } } @@ -90,9 +93,9 @@ Navbar --navbar-hover-color: #{$navbar-hover-color}; align-items: stretch; min-height: $navbar-height; - box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color); - background: var(--navbar-bg); color: var(--navbar-color); + background: var(--navbar-bg); + box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color); .navbar-collapse & { flex-grow: 1; @@ -113,16 +116,17 @@ Navbar .nav-link { position: relative; + justify-content: center; min-width: 2.5rem; min-height: 2.5rem; - justify-content: center; @include border-radius(var(--border-radius)); .badge { position: absolute; - top: 0.5rem; inset-inline-end: 0.5rem; - /*rtl:ignore*/ + top: 0.5rem; + + /* rtl:ignore */ transform: translate(calc(var(--dir) * 50%), -50%); } } @@ -136,13 +140,13 @@ Navbar &#{$infix} { @include media-breakpoint-down(breakpoint-next($breakpoint)) { - @include navbar-vertical-nav; + @include navbar-vertical-nav(); } @include media-breakpoint-up($next) { .navbar-collapse { - width: auto; flex: 1 1 auto; + width: auto; } .nav-item.active { @@ -152,12 +156,12 @@ Navbar color: var(--navbar-active-color); } - &:after { - content: ''; + &::after { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: -0.25rem; + content: ''; border: 0 var(--border-style) var(--navbar-active-border-color); border-bottom-width: 2px; } @@ -197,57 +201,57 @@ Navbar brand */ .navbar-brand { display: inline-flex; - align-items: center; - font-weight: $navbar-brand-font-weight; - margin: 0; - line-height: 1; gap: $spacer-2; + align-items: center; + margin: 0; + font-weight: $navbar-brand-font-weight; + line-height: 1; } .navbar-brand-image { - height: $navbar-brand-image-height; width: auto; + height: $navbar-brand-image-height; } /** Navbar toggler */ .navbar-toggler { - border: 0; - width: $navbar-brand-image-height; - height: $navbar-brand-image-height; position: relative; display: flex; align-items: center; justify-content: center; + width: $navbar-brand-image-height; + height: $navbar-brand-image-height; + border: 0; } .navbar-toggler-icon { - height: 2px; + position: relative; width: 1.25em; + height: 2px; background: currentColor; @include border-radius(var(--border-radius-pill)); - position: relative; @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time); - &:before, - &:after { - content: ''; - display: block; - height: inherit; - width: inherit; - border-radius: inherit; - background: inherit; + &::before, + &::after { position: absolute; inset-inline-start: 0; + display: block; + width: inherit; + height: inherit; + content: ''; + background: inherit; + border-radius: inherit; @include transition(inherit); } - &:before { + &::before { top: -0.45em; } - &:after { + &::after { bottom: -0.45em; } @@ -255,12 +259,12 @@ Navbar toggler transform: rotate(45deg); @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time); - &:before { + &::before { top: 0; transform: rotate(-90deg); } - &:after { + &::after { bottom: 0; opacity: 0; } @@ -282,9 +286,9 @@ Navbar nav --nav-link-hover-bg: #{$navbar-nav-link-hover-bg}; --nav-link-icon-color: #{$nav-link-icon-color}; --nav-link-hover-icon-color: #{$nav-link-hover-icon-color}; - margin: 0; - padding: 0; align-items: stretch; + padding: 0; + margin: 0; .nav-item { display: flex; @@ -297,11 +301,11 @@ Navbar nav Navbar side */ .navbar-side { - margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-around; + margin: 0; } /** @@ -316,15 +320,15 @@ Navbar vertical &#{$infix} { @include media-breakpoint-up($next) { - width: $sidebar-width; position: fixed; - top: 0; inset-inline-start: 0; + top: 0; bottom: 0; z-index: $zindex-fixed; align-items: start; - overflow-y: scroll; + width: $sidebar-width; padding: 0; + overflow-y: scroll; @include transition(transform $transition-time); &.navbar-right, @@ -334,8 +338,8 @@ Navbar vertical } .navbar-brand { - padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0; justify-content: center; + padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0; } .navbar-collapse { @@ -343,8 +347,8 @@ Navbar vertical } .navbar-nav { - flex-direction: column; flex-grow: 1; + flex-direction: column; min-height: auto; .nav-link { @@ -356,8 +360,8 @@ Navbar vertical > [class^='container'] { flex-direction: column; align-items: stretch; - min-height: 100%; justify-content: start; + min-height: 100%; padding: 0; } @@ -376,7 +380,7 @@ Navbar vertical padding-inline-end: $sidebar-width; } - @include navbar-vertical-nav; + @include navbar-vertical-nav(); } } } @@ -385,15 +389,15 @@ Navbar vertical } .navbar-overlap { - &:after { - content: ''; - height: $navbar-overlap-height; + &::after { position: absolute; - top: 100%; inset-inline-start: 0; inset-inline-end: 0; - background: inherit; + top: 100%; z-index: -1; + height: $navbar-overlap-height; + content: ''; + background: inherit; box-shadow: inherit; } } diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss index c7d3db5fe..dec8ff838 100644 --- a/core/scss/layout/_page.scss +++ b/core/scss/layout/_page.scss @@ -3,13 +3,13 @@ // Skip-to-content link: hidden via .visually-hidden-focusable until keyboard focus reveals it .skip-link { position: fixed; - top: 0; inset-inline-start: 0; + top: 0; z-index: $zindex-tooltip; padding: 0.5rem 1rem; - background: var(--primary); color: var(--primary-fg, #fff); text-decoration: none; + background: var(--primary); &:focus-visible { outline: 2px solid var(--primary); @@ -18,9 +18,9 @@ } .page { + position: relative; display: flex; flex-direction: column; - position: relative; min-height: 100%; } @@ -29,11 +29,11 @@ } .page-wrapper { - flex: 1; display: flex; + flex: 1; flex-direction: column; - @include media-print { + @include media-print() { margin: 0 !important; } } @@ -47,59 +47,46 @@ // Content body .page-body { + display: flex; + flex: 1; + flex-direction: column; margin-top: var(--page-padding-y); margin-bottom: var(--page-padding-y); - display: flex; - flex-direction: column; - flex: 1; } .page-body-card { - background: var(--bg-surface); - border-top: var(--border-width) var(--border-style) $card-border-color; + flex: 1; padding: var(--page-padding) 0; margin-bottom: 0; - flex: 1; + background: var(--bg-surface); + border-top: var(--border-width) var(--border-style) $card-border-color; .page-body ~ & { margin-top: 0; } } -.page-cover { - background: no-repeat center/cover; - min-height: 9rem; - - @include media-breakpoint-up(md) { - min-height: 12rem; - } - - @include media-breakpoint-up(lg) { - min-height: 15rem; - } -} - .page-cover-overlay { position: relative; - &:after { - content: ''; + &::after { position: absolute; - top: 0; inset-inline-start: 0; inset-inline-end: 0; + top: 0; bottom: 0; + content: ''; background-image: $overlay-gradient; } } .page-header { display: flex; - flex-wrap: wrap; - min-height: 2.25rem; flex-direction: column; + flex-wrap: wrap; justify-content: center; max-width: 100%; + min-height: 2.25rem; .page-wrapper & { margin: var(--page-padding-y) 0 0; @@ -107,24 +94,24 @@ } .page-header-border { - border-bottom: var(--border-width) var(--border-style) var(--border-color); padding: var(--page-padding-y) 0; margin: 0 !important; background-color: var(--bg-surface); + border-bottom: var(--border-width) var(--border-style) var(--border-color); } .page-pretitle { - @include subheader; + @include subheader(); } .page-title { - margin: 0; - font-size: $page-title-font-size; - line-height: $page-title-line-height; - font-weight: $page-title-font-weight; - color: inherit; display: flex; align-items: center; + margin: 0; + font-size: $page-title-font-size; + font-weight: $page-title-font-weight; + line-height: $page-title-line-height; + color: inherit; svg { width: 1.5rem; @@ -149,32 +136,41 @@ .page-cover { --page-cover-blur: 20px; --page-cover-padding: 1rem; + position: relative; min-height: 6rem; padding: var(--page-cover-padding) 0; - position: relative; overflow: hidden; + background: no-repeat center/cover; + + @include media-breakpoint-up(md) { + min-height: 12rem; + } + + @include media-breakpoint-up(lg) { + min-height: 15rem; + } } .page-cover-img { position: absolute; - top: calc(-2 * var(--page-cover-blur, 0)); inset-inline-start: calc(-2 * var(--page-cover-blur, 0)); inset-inline-end: calc(-2 * var(--page-cover-blur, 0)); + top: calc(-2 * var(--page-cover-blur, 0)); bottom: calc(-2 * var(--page-cover-blur, 0)); - pointer-events: none; - filter: blur(var(--page-cover-blur)); - object-fit: cover; - background-size: cover; - background-position: center; z-index: -1; + pointer-events: none; + object-fit: cover; + filter: blur(var(--page-cover-blur)); + background-position: center; + background-size: cover; } // // Page tabs // .page-tabs { - margin-top: 0.5rem; position: relative; + margin-top: 0.5rem; } .page-header-tabs { diff --git a/core/scss/marketing/_browser.scss b/core/scss/marketing/_browser.scss index 1770c6d53..124d71e45 100644 --- a/core/scss/marketing/_browser.scss +++ b/core/scss/marketing/_browser.scss @@ -5,9 +5,9 @@ .browser { @include border-radius(var(--border-radius-lg)); - box-shadow: 0 0 0 1px var(--border-color); - background: var(--bg-surface-secondary); overflow: hidden; + background: var(--bg-surface-secondary); + box-shadow: 0 0 0 1px var(--border-color); } .browser-header { @@ -18,8 +18,8 @@ } .browser-dots { - margin-inline-end: 3rem; display: flex; + margin-inline-end: 3rem; } .browser-dots-colored { @@ -39,31 +39,31 @@ } .browser-dot { - margin-inline-end: 0.5rem; width: 0.75rem; min-width: 0.75rem; height: 0.75rem; + margin-inline-end: 0.5rem; background: var(--border-color); - @include border-radius(var(--border-radius-circle)); border: 1px solid var(--border-color-dark); + @include border-radius(var(--border-radius-circle)); } .browser-input { - flex: 1; display: flex; + flex: 1; align-items: center; justify-content: center; - text-decoration: none; padding: 0.25rem; - color: var(--secondary); font-size: var(--font-size-h5); - @include border-radius(var(--border-radius)); line-height: 1; + color: var(--secondary); + text-decoration: none; cursor: pointer; + background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-secondary)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05); - background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-secondary)); + @include border-radius(var(--border-radius)); &:hover { text-decoration: none; diff --git a/core/scss/marketing/_hero.scss b/core/scss/marketing/_hero.scss index 80ea12e28..b32b3c2b0 100644 --- a/core/scss/marketing/_hero.scss +++ b/core/scss/marketing/_hero.scss @@ -4,15 +4,15 @@ @use '../config' as *; .hero { - text-align: center; padding: 6.5rem 0; + text-align: center; } .hero-title { font-size: 3rem; font-weight: var(--font-weight-black); - letter-spacing: $spacing-tight; line-height: $headings-line-height; + letter-spacing: $spacing-tight; @include media-breakpoint-down(md) { font-size: 2rem; @@ -20,11 +20,11 @@ } .hero-description { - color: var(--secondary); + max-width: 45rem; + margin: 0 auto; font-size: var(--font-size-h2); line-height: 1.5; - margin: 0 auto; - max-width: 45rem; + color: var(--secondary); @include media-breakpoint-down(sm) { font-size: var(--font-size-h3); @@ -39,25 +39,25 @@ // Hero subheader // .hero-subheader { - @include subheader; + @include subheader(); margin-bottom: 0.5rem; } .hero-img { - margin: 4rem auto; - max-width: 65rem; - @include border-radius($border-radius-lg); position: relative; z-index: 1; + max-width: 65rem; + margin: 4rem auto; + @include border-radius($border-radius-lg); //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1), // 0 4px 6px -2px rgba($color-text, 0.05); img, svg { + position: relative; + display: block; max-width: 100%; height: auto; - display: block; - position: relative; } } // diff --git a/core/scss/marketing/_pricing.scss b/core/scss/marketing/_pricing.scss index cd674861f..80259cef6 100644 --- a/core/scss/marketing/_pricing.scss +++ b/core/scss/marketing/_pricing.scss @@ -5,8 +5,8 @@ $pricing-card-width: 22rem; .pricing { display: flex; flex-direction: column; - margin: 0 auto; justify-content: center; + margin: 0 auto; @include media-breakpoint-up(md) { flex-direction: row; @@ -14,21 +14,21 @@ $pricing-card-width: 22rem; } .pricing-card { - flex: 1; + position: relative; display: flex; + flex: 1; flex-direction: column; - background: var(--bg-surface); - border: 1px solid $border-color; padding: 2rem; margin: 0 0 1rem; - position: relative; - box-shadow: var(--shadow-card); text-align: center; + background: var(--bg-surface); + border: 1px solid $border-color; + box-shadow: var(--shadow-card); @include border-radius($border-radius-lg); @include media-breakpoint-up(md) { - margin: 1rem -1px; max-width: $pricing-card-width; + margin: 1rem -1px; &:first-child { @include border-radius($border-radius-lg 0 0 $border-radius-lg); @@ -41,8 +41,8 @@ $pricing-card-width: 22rem; &.featured { z-index: 1; - border: 2px solid var(--primary); order: -1; + border: 2px solid var(--primary); @include media-breakpoint-up(md) { order: unset; @@ -61,51 +61,51 @@ $pricing-card-width: 22rem; .pricing-label { position: absolute; - top: 0; inset-inline-start: 0; - transform: translateY(-50%); - vertical-align: bottom; inset-inline-end: 0; + top: 0; display: flex; align-items: center; justify-content: center; + vertical-align: bottom; + transform: translateY(-50%); } .pricing-btn { - margin-top: auto; padding-top: 2rem; + margin-top: auto; } .pricing-price { display: flex; justify-content: center; - font-size: 2.5rem; - line-height: 1; - font-weight: $font-weight-semibold; margin: 0.75rem 0; + font-size: 2.5rem; + font-weight: $font-weight-semibold; + line-height: 1; } .pricing-price-currency { - font-size: $h2-font-size; - line-height: 1.5; margin-inline-end: 0.25rem; + font-size: $h2-font-size; font-weight: $font-weight-semibold; + line-height: 1.5; } .pricing-price-description { - font-size: $h4-font-size; - line-height: $h4-line-height; - font-weight: $font-weight-normal; - color: $text-secondary; align-self: center; margin-inline-start: 0.5rem; + font-size: $h4-font-size; + font-weight: $font-weight-normal; + line-height: $h4-line-height; + color: $text-secondary; } .pricing-features { - margin: 1rem 0 0; padding: 0; - list-style: none; + margin: 1rem 0 0; text-align: start; + list-style: none; > li:not(:first-child) { margin-top: 0.25rem; diff --git a/core/scss/marketing/_sections.scss b/core/scss/marketing/_sections.scss index f337676a0..21103556f 100644 --- a/core/scss/marketing/_sections.scss +++ b/core/scss/marketing/_sections.scss @@ -35,9 +35,9 @@ // .section { --section-bg: transparent; - background: var(--section-bg); position: relative; padding: 5rem 0; + background: var(--section-bg); } .section-sm { @@ -63,9 +63,9 @@ } .section-header { - text-align: center; max-width: 45rem; margin: 0 auto 5rem; + text-align: center; @at-root .section-sm & { margin-bottom: 4rem; @@ -83,10 +83,10 @@ } .section-description { - color: var(--secondary); + margin-top: 1rem; font-size: var(--font-size-h3); line-height: var(--line-height-h3); - margin-top: 1rem; + color: var(--secondary); } // @@ -95,9 +95,9 @@ .section-divider { position: absolute; bottom: 100%; - pointer-events: none; - height: 5rem; width: 100%; + height: 5rem; + pointer-events: none; path { fill: var(--section-bg); @@ -109,14 +109,14 @@ } .wave-2 { - animation: move-forever2 24s linear infinite; opacity: 0.5; + animation: move-forever2 24s linear infinite; animation-delay: -2s; } .wave-3 { - animation: move-forever3 18s linear infinite; opacity: 0.3; + animation: move-forever3 18s linear infinite; animation-delay: -2s; } } diff --git a/core/scss/marketing/_shape.scss b/core/scss/marketing/_shape.scss index 452b243b6..b09854eff 100644 --- a/core/scss/marketing/_shape.scss +++ b/core/scss/marketing/_shape.scss @@ -6,14 +6,14 @@ --shape-size: #{$avatar-size}; --shape-icon-size: #{$avatar-icon-size}; --shape-border-radius: 35%; - background-color: var(--primary-lt); - color: var(--primary); - @include border-radius(var(--shape-border-radius)); display: inline-flex; align-items: center; justify-content: center; - height: var(--shape-size); width: var(--shape-size); + height: var(--shape-size); + color: var(--primary); + background-color: var(--primary-lt); + @include border-radius(var(--shape-border-radius)); .icon { width: var(--shape-icon-size); @@ -30,7 +30,7 @@ @each $name, $color in $colors { .shape-#{$name} { - background: var(--#{$name}-lt); color: var(--#{$name}); + background: var(--#{$name}-lt); } } diff --git a/core/scss/mixins/bootstrap/_caret.scss b/core/scss/mixins/bootstrap/_caret.scss index 175c016b0..7fd6c4df2 100644 --- a/core/scss/mixins/bootstrap/_caret.scss +++ b/core/scss/mixins/bootstrap/_caret.scss @@ -65,7 +65,7 @@ } @if $direction == 'left' { - &:after { + &::after { content: none; } } diff --git a/core/scss/tests/_caret.test.scss b/core/scss/tests/_caret.test.scss index cf20fbae5..2fcca4d7f 100644 --- a/core/scss/tests/_caret.test.scss +++ b/core/scss/tests/_caret.test.scss @@ -106,7 +106,7 @@ margin-inline-end: 0.306em; transform: rotate(45deg); } - .t:after { + .t::after { content: none; } } diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss index be662a644..4bd1774c4 100644 --- a/core/scss/ui/_accordion.scss +++ b/core/scss/ui/_accordion.scss @@ -27,37 +27,37 @@ .accordion-button { position: relative; display: flex; + gap: var(--accordion-btn-gap); align-items: center; width: 100%; padding: var(--accordion-btn-padding-y) var(--accordion-padding-x); + font-size: inherit; + font-weight: var(--accordion-btn-font-weight); color: inherit; text-align: inherit; background-color: transparent; border: 0; - font-size: inherit; - font-weight: var(--accordion-btn-font-weight); - gap: var(--accordion-btn-gap); &:not(.collapsed) { + color: var(--accordion-active-color); border-bottom-color: transparent; box-shadow: none; - color: var(--accordion-active-color); } } .accordion-header { - margin: 0; position: relative; display: flex; gap: var(--accordion-header-gap); align-items: center; width: 100%; + margin: 0; color: var(--accordion-btn-color); text-align: start; background-color: transparent; border: 0; - overflow-anchor: none; transition: transform $transition-time; + overflow-anchor: none; &:hover { z-index: 2; @@ -81,17 +81,17 @@ .accordion-button-toggle { display: flex; - line-height: 1; - transition: $transition-time transform; - margin-inline-start: auto; - margin-inline-end: 0; - color: var(--secondary); width: var(--accordion-btn-toggle-width); height: var(--accordion-btn-toggle-width); + margin-inline-start: auto; + margin-inline-end: 0; + line-height: 1; + color: var(--secondary); + transition: $transition-time transform; .accordion-button:not(.collapsed) & { - transform: rotate(-180deg); color: var(--accordion-active-color); + transform: rotate(-180deg); } path { @@ -139,14 +139,14 @@ } .accordion-body { - color: var(--secondary); padding: 0 var(--accordion-body-padding-x) var(--accordion-body-padding-y); + color: var(--secondary); } .accordion-flush { > .accordion-item { - border-inline-end: 0; border-inline-start: 0; + border-inline-end: 0; @include border-radius(0); &:first-child { @@ -157,8 +157,7 @@ } > .accordion-collapse, - > .accordion-header .accordion-button, - > .accordion-header .accordion-button.collapsed { + > .accordion-header .accordion-button { @include border-radius(0); } } diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss index 81a9e1969..ab341f11b 100644 --- a/core/scss/ui/_alerts.scss +++ b/core/scss/ui/_alerts.scss @@ -8,7 +8,6 @@ --alert-padding-y: #{$alert-padding-y}; --alert-margin-bottom: #{$alert-margin-bottom}; --alert-border-color: #{color-transparent(var(--alert-variant-color), 0.2, var(--bg-surface))}; - --alert-border-color: var(--border-color); --alert-border: var(--border-width) solid var(--alert-border-color); --alert-border-radius: var(--border-radius); --alert-link-color: inherit; @@ -19,22 +18,22 @@ --alert-gap: #{$alert-gap}; position: relative; - padding: var(--alert-padding-y) var(--alert-padding-x); - margin-bottom: var(--alert-margin-bottom); - background-color: color-mix(in srgb, var(--alert-bg), var(--bg-surface)); - @include border-radius(var(--alert-border-radius)); - border: var(--border-width) var(--border-style) var(--alert-border-color); - box-shadow: var(--box-shadow); - color: var(--alert-color); display: flex; flex-direction: row; gap: var(--alert-gap); + padding: var(--alert-padding-y) var(--alert-padding-x); + margin-bottom: var(--alert-margin-bottom); + color: var(--alert-color); + background-color: color-mix(in sRGB, var(--alert-bg), var(--bg-surface)); + border: var(--border-width) var(--border-style) var(--alert-border-color); + box-shadow: var(--box-shadow); + @include border-radius(var(--alert-border-radius)); } .alert-heading { - color: inherit; margin-bottom: var(--alert-heading-margin-bottom); font-weight: var(--alert-heading-font-weight); + color: inherit; } .alert-description { @@ -42,9 +41,9 @@ } .alert-icon { - color: var(--alert-color); width: var(--alert-icon-size) !important; height: var(--alert-icon-size) !important; + color: var(--alert-color); } .alert-action { @@ -75,16 +74,16 @@ .btn-close { position: absolute; - top: calc(var(--alert-padding-x) / 2 - 1px); inset-inline-end: calc(var(--alert-padding-y) / 2 - 1px); + top: calc(var(--alert-padding-x) / 2 - 1px); z-index: 1; padding: calc(var(--alert-padding-y) * 1.25) var(--alert-padding-x); } } .alert-important { - background-color: var(--alert-variant-color); color: var(--white); + background-color: var(--alert-variant-color); .alert-description { color: inherit; diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss index 536a6916a..b122fddc7 100644 --- a/core/scss/ui/_avatars.scss +++ b/core/scss/ui/_avatars.scss @@ -13,26 +13,26 @@ --avatar-brand-size: #{$avatar-brand-size}; --avatar-border-radius: #{$avatar-border-radius}; position: relative; + display: inline-flex; + align-items: center; + justify-content: center; width: var(--avatar-size); height: var(--avatar-size); font-size: var(--avatar-font-size); font-weight: var(--font-weight-medium); line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; color: var(--secondary); text-align: center; text-transform: uppercase; vertical-align: bottom; user-select: none; background: var(--avatar-bg) no-repeat center/cover; - @include border-radius(var(--avatar-border-radius)); box-shadow: var(--avatar-box-shadow); transition: color $transition-time, background-color $transition-time, box-shadow $transition-time; + @include border-radius(var(--avatar-border-radius)); .icon { width: var(--avatar-icon-size); @@ -89,7 +89,7 @@ // .avatar-list { --avatar-list-size: #{$avatar-size}; - @include elements-list; + @include elements-list(); a.avatar { &:hover { @@ -125,11 +125,11 @@ .avatar-upload { --avatar-upload-icon-size: #{$avatar-upload-icon-size}; --avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top}; + flex-direction: column; + background: $form-check-input-bg; border: var(--border-width) dashed var(--border-color); - background: $form-check-input-bg; box-shadow: none; - flex-direction: column; @include transition(color $transition-time, background-color $transition-time); svg { @@ -139,16 +139,16 @@ } &:hover { - border-color: var(--primary); color: var(--primary); text-decoration: none; + border-color: var(--primary); } } .avatar-upload-text { + margin-top: var(--avatar-upload-text-margin-top); font-size: $h6-font-size; line-height: 1; - margin-top: var(--avatar-upload-text-margin-top); } .avatar-cover { @@ -160,13 +160,13 @@ .avatar-brand { --avatar-brand-offset: #{$avatar-brand-offset}; - width: var(--avatar-brand-size); - height: var(--avatar-brand-size); position: absolute; inset-inline-end: var(--avatar-brand-offset); bottom: var(--avatar-brand-offset); z-index: 1000; + width: var(--avatar-brand-size); + height: var(--avatar-brand-size); background: var(--bg-surface); - @include border-radius(var(--border-radius)); border: 1px solid var(--border-color); + @include border-radius(var(--border-radius)); } diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss index da4b20a68..32f61d168 100644 --- a/core/scss/ui/_badges.scss +++ b/core/scss/ui/_badges.scss @@ -11,24 +11,24 @@ --badge-line-height: 1; --badge-gap: #{$badge-gap}; display: inline-flex; + gap: var(--badge-gap); + align-items: center; + justify-content: center; + min-width: calc(1em + var(--badge-padding-y) * 2 + 2px); padding: var(--badge-padding-y) var(--badge-padding-x); - font-weight: var(--badge-font-weight); + overflow: hidden; font-size: var(--badge-font-size); + font-weight: var(--badge-font-weight); + line-height: var(--badge-line-height); color: var(--badge-color); text-align: center; + letter-spacing: 0.04em; white-space: nowrap; - justify-content: center; - align-items: center; - gap: var(--badge-gap); - background: $badge-bg-color; - overflow: hidden; + vertical-align: bottom; user-select: none; + background: $badge-bg-color; border: var(--border-width) var(--border-style) transparent; @include border-radius(var(--badge-border-radius)); - min-width: calc(1em + var(--badge-padding-y) * 2 + 2px); - letter-spacing: 0.04em; - vertical-align: bottom; - line-height: var(--badge-line-height); @at-root a#{&} { background: var(--bg-surface-secondary); @@ -46,12 +46,12 @@ .badge-dot { display: inline-block; width: $badge-empty-size; - height: $badge-empty-size; min-width: 0; + height: $badge-empty-size; min-height: auto; padding: 0; - @include border-radius(var(--border-radius-pill)); vertical-align: baseline; + @include border-radius(var(--border-radius-pill)); } // @@ -73,7 +73,7 @@ // Badges list // .badges-list { - @include elements-list; + @include elements-list(); } // @@ -81,11 +81,12 @@ // .badge-notification { position: absolute !important; - top: 0 !important; inset-inline-end: 0 !important; - /*rtl:ignore*/ - transform: translate(calc(var(--dir) * 50%), -50%); + top: 0 !important; z-index: 1; + + /* rtl:ignore */ + transform: translate(calc(var(--dir) * 50%), -50%); } .badge-blink { diff --git a/core/scss/ui/_breadcrumbs.scss b/core/scss/ui/_breadcrumbs.scss index 1581728f2..3a1a96fe6 100644 --- a/core/scss/ui/_breadcrumbs.scss +++ b/core/scss/ui/_breadcrumbs.scss @@ -18,13 +18,13 @@ display: flex; flex-wrap: wrap; - @include font-size(var(--breadcrumb-font-size)); - list-style: none; - background-color: var(--breadcrumb-bg); - @include border-radius(var(--breadcrumb-border-radius)); padding: 0; margin: 0; + list-style: none; background: transparent; + background-color: var(--breadcrumb-bg); + @include font-size(var(--breadcrumb-font-size)); + @include border-radius(var(--breadcrumb-border-radius)); a { color: var(--breadcrumb-link-color); @@ -41,8 +41,8 @@ .breadcrumb-item { &.active { - color: var(--breadcrumb-item-active-color); font-weight: var(--breadcrumb-item-active-font-weight); + color: var(--breadcrumb-item-active-color); a { color: inherit; @@ -53,7 +53,7 @@ &.disabled { color: var(--breadcrumb-item-disabled-color); - &:before { + &::before { color: inherit; } @@ -71,7 +71,8 @@ padding-inline-end: var(--breadcrumb-item-padding-x); color: var(--breadcrumb-divider-color); content: var(--breadcrumb-divider, escape-svg($breadcrumb-divider)); - /*rtl:raw: + + /* rtl:raw: transform: scaleX(-1); */ } diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index 3246b92c7..2310abf20 100644 --- a/core/scss/ui/_buttons.scss +++ b/core/scss/ui/_buttons.scss @@ -17,26 +17,26 @@ --btn-active-color: #{$active-color}; --btn-active-bg: #{$active-bg}; --btn-active-border-color: #{$active-border-color}; + position: relative; display: inline-flex; align-items: center; justify-content: center; - white-space: nowrap; - box-shadow: var(--btn-box-shadow); - position: relative; min-width: calc((var(--btn-line-height) * 1) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2)); min-height: calc((var(--btn-line-height) * 1) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2)); + white-space: nowrap; + box-shadow: var(--btn-box-shadow); @include border-radius(var(--btn-border-radius)); .icon { width: var(--btn-icon-size); - height: var(--btn-icon-size); min-width: var(--btn-icon-size); - font-size: var(--btn-icon-size); + height: var(--btn-icon-size); margin: 0 calc(var(--btn-padding-x) / 2) 0 calc(var(--btn-padding-x) / -4); - vertical-align: bottom; + font-size: var(--btn-icon-size); color: var(--btn-icon-color); + vertical-align: bottom; } .avatar { @@ -175,8 +175,8 @@ // Button shapes // .btn-pill { - padding-inline-end: 1.5em; padding-inline-start: 1.5em; + padding-inline-end: 1.5em; @include border-radius(var(--border-radius-pill)); &[class*='btn-icon'] { @@ -195,23 +195,22 @@ // .btn-icon, .btn-action { + //[BUG] btn-sm and btn-xl with an icon looks broken + //issue #2470 fixed + min-width: calc(var(--btn-line-height) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2)); padding-inline-start: 0; padding-inline-end: 0; .icon { margin: calc(-1 * var(--btn-padding-x)); } - - //[BUG] btn-sm and btn-xl with an icon looks broken - //issue #2470 fixed - min-width: calc(var(--btn-line-height) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2)); } // // Button list // .btn-list { - @include elements-list; + @include elements-list(); } .btn-list-center { @@ -224,12 +223,12 @@ .btn-floating { --btn-floating-offset: #{$btn-floating-offset}; position: fixed; - z-index: $zindex-fixed; - bottom: var(--btn-floating-offset); inset-inline-start: var(--btn-floating-offset); + bottom: var(--btn-floating-offset); + z-index: $zindex-fixed; box-shadow: var(--shadow-dropdown); - @include media-print { + @include media-print() { display: none; } } @@ -247,20 +246,20 @@ opacity: 0; } - &:after { - content: ''; - display: inline-block; - vertical-align: text-bottom; - border: $spinner-border-width var(--border-style) currentColor; - border-inline-end-color: transparent; - @include border-radius(var(--border-radius-pill)); - color: var(--btn-color); + &::after { position: absolute; - width: var(--btn-icon-size); - height: var(--btn-icon-size); inset-inline-start: calc(50% - var(--btn-icon-size) / 2); top: calc(50% - var(--btn-icon-size) / 2); + display: inline-block; + width: var(--btn-icon-size); + height: var(--btn-icon-size); + color: var(--btn-color); + vertical-align: text-bottom; + content: ''; + border: $spinner-border-width var(--border-style) currentColor; + border-inline-end-color: transparent; animation: spinner-border 0.75s linear infinite; + @include border-radius(var(--border-radius-pill)); } } @@ -274,7 +273,7 @@ background: transparent; box-shadow: none; - &:after { + &::after { content: none; } @@ -300,7 +299,7 @@ color: var(--primary); } - @include media-print { + @include media-print() { display: none; } } @@ -308,7 +307,7 @@ .btn-actions { display: flex; - @include media-print { + @include media-print() { display: none; } } @@ -321,7 +320,7 @@ &:hover, &:focus-visible { .icon { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * 4px)); } } @@ -339,7 +338,7 @@ &:hover, &:focus-visible { .icon { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * -4px)); } } diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss index f8c507b6f..c67c53d38 100644 --- a/core/scss/ui/_calendars.scss +++ b/core/scss/ui/_calendars.scss @@ -84,11 +84,11 @@ .calendar-range { position: relative; - &:before { + &::before { position: absolute; - top: 50%; - inset-inline-end: 0; inset-inline-start: 0; + inset-inline-end: 0; + top: 50%; height: var(--calendar-date-size); content: ''; background: color-transparent(var(--primary), 0.1); @@ -104,11 +104,11 @@ } } - &.range-start:before { + &.range-start::before { inset-inline-start: 50%; } - &.range-end:before { + &.range-end::before { inset-inline-end: 50%; } } diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index aaae22d24..d746cb813 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -21,7 +21,7 @@ .card { @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out); - @include media-print { + @include media-print() { border: none; box-shadow: none; } @@ -65,15 +65,15 @@ .card-stamp { --stamp-size: #{$card-stamp-size}; position: absolute; - top: 0; inset-inline-end: 0; + top: 0; width: calc(var(--stamp-size) * 1); height: calc(var(--stamp-size) * 1); max-height: 100%; - border-start-end-radius: $border-radius; - opacity: $card-stamp-opacity; overflow: hidden; pointer-events: none; + border-start-end-radius: $border-radius; + opacity: $card-stamp-opacity; } .card-stamp-lg { @@ -81,24 +81,24 @@ } .card-stamp-icon { - background: var(--secondary); - color: var(--card-bg, var(--bg-surface)); + position: relative; + inset-inline-end: calc(var(--stamp-size) * -0.25); + top: calc(var(--stamp-size) * -0.25); display: flex; align-items: center; justify-content: center; - @include border-radius(var(--border-radius-pill)); width: calc(var(--stamp-size) * 1); height: calc(var(--stamp-size) * 1); - position: relative; - top: calc(var(--stamp-size) * -0.25); - inset-inline-end: calc(var(--stamp-size) * -0.25); font-size: calc(var(--stamp-size) * 0.75); + color: var(--card-bg, var(--bg-surface)); + background: var(--secondary); transform: rotate(10deg); + @include border-radius(var(--border-radius-pill)); .icon { - stroke-width: 2; width: calc(var(--stamp-size) * 0.75); height: calc(var(--stamp-size) * 0.75); + stroke-width: 2; } } @@ -139,14 +139,14 @@ .card-btn { display: flex; + flex: 1; align-items: center; justify-content: center; padding: $card-spacer-y $card-spacer-x; + font-weight: var(--font-weight-medium); + color: inherit; text-align: center; border-top: var(--border-width) var(--border-style) var(--border-color); - flex: 1; - color: inherit; - font-weight: var(--font-weight-medium); @include transition(background $transition-time); &:hover { @@ -166,11 +166,11 @@ Stacked card --card-stacked-offset: #{$card-stacked-offset}; position: relative; - &:after { + &::after { position: absolute; - top: calc(-1 * var(--card-stacked-offset)); - inset-inline-end: var(--card-stacked-offset); inset-inline-start: var(--card-stacked-offset); + inset-inline-end: var(--card-stacked-offset); + top: calc(-1 * var(--card-stacked-offset)); height: var(--card-stacked-offset); content: ''; background: var(--card-bg, var(--bg-surface)); @@ -182,34 +182,34 @@ Stacked card .card-cover { position: relative; padding: $card-spacer-y $card-spacer-x; - background: #666666 no-repeat center/cover; + background: #666 no-repeat center/cover; - &:before { + &::before { position: absolute; - top: 0; - inset-inline-end: 0; - bottom: 0; inset-inline-start: 0; + inset-inline-end: 0; + top: 0; + bottom: 0; content: ''; background: rgba($dark, 0.48); } &:first-child, - &:first-child:before { + &:first-child::before { @include border-radius($border-radius $border-radius 0 0); } } .card-cover-blurred { - &:before { + &::before { backdrop-filter: blur(2px); } } .card-actions { --card-actions-gutter: #{$card-actions-gutter}; - margin: calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) auto; padding-inline-start: var(--card-actions-gutter); + margin: calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) auto; a { text-decoration: none; @@ -218,9 +218,9 @@ Stacked card // Card header .card-header { - color: inherit; display: flex; align-items: center; + color: inherit; background-color: var(--card-cap-bg); &:first-child { @@ -229,15 +229,15 @@ Stacked card } .card-header-light { - border-bottom-color: transparent; background: var(--bg-surface-tertiary); + border-bottom-color: transparent; } .card-header-tabs { - background: $card-header-tabs-bg; flex: 1; - margin: calc(var(--card-cap-padding-y) * -1) calc(var(--card-cap-padding-x) * -1) calc(var(--card-cap-padding-y) * -1); padding: calc(var(--card-cap-padding-y) * 0.5) calc(var(--card-cap-padding-x) * 0.5) 0; + margin: calc(var(--card-cap-padding-y) * -1) calc(var(--card-cap-padding-x) * -1); + background: $card-header-tabs-bg; @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0); } @@ -271,13 +271,13 @@ Stacked card } .card-link-rotate:hover { - transform: rotate(1.5deg); opacity: 1; + transform: rotate(1.5deg); } .card-link-pop:hover { - transform: translateY(-2px); opacity: 1; + transform: translateY(-2px); } // Card footer @@ -290,9 +290,9 @@ Stacked card } .card-footer-transparent { + padding-top: 0; background: transparent; border-color: transparent; - padding-top: 0; } .card-footer-borderless { @@ -324,8 +324,8 @@ Stacked card margin: 0 0 var(--card-title-margin-bottom); font-size: $h3-font-size; font-weight: var(--font-weight-medium); - color: var(--heading-color); line-height: var(--card-title-line-height); + color: var(--heading-color); @at-root a#{&}:hover { color: inherit; @@ -339,8 +339,8 @@ Stacked card .card-subtitle { --card-subtitle-margin-start: #{$card-subtitle-margin-start}; margin-bottom: $card-title-spacer-y; + font-weight: 400; color: var(--secondary); - font-weight: normal; .card-header & { margin: 0; @@ -383,7 +383,7 @@ Stacked card } } - @include media-print { + @include media-print() { padding: 0; } @@ -402,8 +402,8 @@ Card optinos .card-options { --card-options-top: #{$card-options-top}; --card-options-inset: #{$card-options-inset}; - top: var(--card-options-top); inset-inline-end: var(--card-options-inset); + top: var(--card-options-top); display: flex; margin-inline-start: auto; } @@ -422,9 +422,9 @@ Card status */ .card-status-top { position: absolute; - top: 0; - inset-inline-end: 0; inset-inline-start: 0; + inset-inline-end: 0; + top: 0; height: $card-status-size; @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0); } @@ -489,10 +489,14 @@ Card table &:first-child { border-top: 0; + // Plain semantic table markup (thead/tbody/tfoot > tr > td/th) has no class + // hooks to target instead. + // stylelint-disable selector-max-type td, th { border-top: 0; } + // stylelint-enable selector-max-type } } } @@ -500,6 +504,7 @@ Card table tbody { tr { &:last-child { + // stylelint-disable-next-line selector-max-type td { border-bottom: 0; } @@ -554,8 +559,8 @@ Card avatar --card-avatar-ring-width: #{$card-avatar-ring-width}; margin-inline-start: auto; margin-inline-end: auto; - box-shadow: 0 0 0 var(--card-avatar-ring-width) var(--card-bg, var(--bg-surface)); margin-top: calc(-1 * calc(var(--avatar-size) * 0.5)); + box-shadow: 0 0 0 var(--card-avatar-ring-width) var(--card-bg, var(--bg-surface)); } /* @@ -567,10 +572,10 @@ Card list group } .list-group-item { - padding-inline-end: $card-spacer-x; padding-inline-start: $card-spacer-x; - border-inline-end: 0; + padding-inline-end: $card-spacer-x; border-inline-start: 0; + border-inline-end: 0; border-radius: 0; &:last-child { @@ -597,8 +602,8 @@ Card list group &.active, &:active, &:hover { - border-color: $card-border-color; color: var(--body-color); + border-color: $card-border-color; } &.active { @@ -662,8 +667,8 @@ Card list group } .nav-tabs + .tab-content .card { - border-end-start-radius: var(--card-border-radius); border-start-start-radius: 0 !important; + border-end-start-radius: var(--card-border-radius); } .tab-content:has(+ .nav-tabs) .card { @@ -689,8 +694,8 @@ Card gradient --card-gradient: var(--primary), var(--primary); background: - radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 0%, transparent) 80%) border-box, - linear-gradient(var(--card-gradient-direction), color-mix(in srgb, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box, + radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box, + linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box, linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box; } diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss index d7b7fac14..a46e51885 100644 --- a/core/scss/ui/_carousel.scss +++ b/core/scss/ui/_carousel.scss @@ -1,21 +1,18 @@ @use '../config' as *; -.carousel { -} - .carousel-indicators-vertical { --carousel-indicators-vertical-margin-inline-end: #{$carousel-indicators-vertical-margin-inline-end}; inset-inline-start: auto; top: 0; - margin: 0 var(--carousel-indicators-vertical-margin-inline-end) 0 0; flex-direction: column; + margin: 0 var(--carousel-indicators-vertical-margin-inline-end) 0 0; [data-bs-target], [data-target] { - margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer; width: $carousel-indicator-height; height: $carousel-indicator-width; + margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer; border: 0; border-inline-start: $carousel-indicator-hit-area-height var(--border-style) transparent; border-inline-end: $carousel-indicator-hit-area-height var(--border-style) transparent; @@ -27,9 +24,9 @@ [data-target] { width: $carousel-indicator-dot-width; height: $carousel-indicator-dot-width; - @include border-radius(var(--border-radius-pill)); - border: $carousel-indicator-hit-area-height var(--border-style) transparent; margin: 0; + border: $carousel-indicator-hit-area-height var(--border-style) transparent; + @include border-radius(var(--border-radius-pill)); } } @@ -38,21 +35,21 @@ [data-target] { width: $carousel-indicator-thumb-width * 0.5; height: auto; + margin: 0 $carousel-indicator-spacer; background: no-repeat center/cover; border: 0; - @include border-radius(var(--border-radius)); box-shadow: $box-shadow; - margin: 0 $carousel-indicator-spacer; opacity: $carousel-indicator-thumb-opacity; + @include border-radius(var(--border-radius)); @include media-breakpoint-up(lg) { width: $carousel-indicator-thumb-width; } - &:before { - content: ''; - padding-top: var(--aspect-ratio, 100%); + &::before { display: block; + padding-top: var(--aspect-ratio, 100%); + content: ''; } } @@ -65,11 +62,11 @@ } .carousel-caption-background { - background: red; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 90%; + background: $dark; background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0)); } diff --git a/core/scss/ui/_charts.scss b/core/scss/ui/_charts.scss index 5d1918ae8..e005a3a8b 100644 --- a/core/scss/ui/_charts.scss +++ b/core/scss/ui/_charts.scss @@ -39,8 +39,8 @@ Chart sparkline position: relative; width: var(--chart-sparkline-width); height: var(--chart-sparkline-height); - line-height: 1; min-height: 0 !important; + line-height: 1; } .chart-sparkline-sm { @@ -65,10 +65,10 @@ Chart sparkline --chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size}; position: absolute; - top: 0; - inset-inline-end: 0; - bottom: 0; inset-inline-start: 0; + inset-inline-end: 0; + top: 0; + bottom: 0; display: flex; align-items: center; justify-content: center; diff --git a/core/scss/ui/_chat.scss b/core/scss/ui/_chat.scss index 91cf724a2..feab01471 100644 --- a/core/scss/ui/_chat.scss +++ b/core/scss/ui/_chat.scss @@ -13,10 +13,10 @@ } .chat-bubble { + position: relative; + padding: var(--chat-bubble-padding); background: var(--bg-surface-secondary); @include border-radius(var(--border-radius-lg)); - padding: var(--chat-bubble-padding); - position: relative; } .chat-bubble-me { diff --git a/core/scss/ui/_close.scss b/core/scss/ui/_close.scss index 6012f0f38..79d893780 100644 --- a/core/scss/ui/_close.scss +++ b/core/scss/ui/_close.scss @@ -9,36 +9,36 @@ --btn-close-focus-opacity: #{$btn-close-focus-opacity}; --btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; --btn-close-size: #{$btn-close-width}; + position: relative; + display: block; width: var(--btn-close-size); height: var(--btn-close-size); padding: $btn-close-padding-y $btn-close-padding-x; color: var(--btn-close-color); - mask: var(--btn-close-bg) no-repeat center/calc(var(--btn-close-size) * 0.75); + cursor: pointer; background-color: var(--btn-close-color); border: 0; - @include border-radius(var(--border-radius)); opacity: var(--btn-close-opacity); - cursor: pointer; - display: block; - position: relative; + mask: var(--btn-close-bg) no-repeat center/calc(var(--btn-close-size) * 0.75); + @include border-radius(var(--border-radius)); // Invisible overlay extending the hit area to a 24x24px minimum touch target - &:before { - content: ''; + &::before { position: absolute; top: 50%; left: 50%; width: max(100%, 24px); height: max(100%, 24px); + content: ''; transform: translate(-50%, -50%); } &:hover { color: var(--btn-close-color); text-decoration: none; - opacity: var(--btn-close-hover-opacity); background-color: var(--btn-close-color); + opacity: var(--btn-close-hover-opacity); } &:focus { @@ -54,7 +54,7 @@ opacity: var(--btn-close-disabled-opacity); } - @include media-print { + @include media-print() { display: none; } } diff --git a/core/scss/ui/_datagrid.scss b/core/scss/ui/_datagrid.scss index 8c972b95d..5b9a61d67 100644 --- a/core/scss/ui/_datagrid.scss +++ b/core/scss/ui/_datagrid.scss @@ -10,11 +10,11 @@ --datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom}; display: grid; - grid-gap: var(--datagrid-padding); grid-template-columns: repeat(auto-fit, minmax(var(--datagrid-item-width), 1fr)); + grid-gap: var(--datagrid-padding); } .datagrid-title { - @include subheader; + @include subheader(); margin-bottom: var(--datagrid-title-margin-bottom); } diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss index fb5d5ae2b..008daa2b5 100644 --- a/core/scss/ui/_dropdowns.scss +++ b/core/scss/ui/_dropdowns.scss @@ -14,27 +14,27 @@ background-clip: border-box; &.card { - padding: 0; - min-width: $dropdown-max-width; display: none; + min-width: $dropdown-max-width; + padding: 0; &.show { display: flex; } } - @include media-print { + @include media-print() { display: none; } } .dropdown-item { - min-width: $dropdown-min-width; display: flex; + gap: var(--dropdown-item-gap); align-items: center; + min-width: $dropdown-min-width; margin: 0; line-height: $line-height-base; - gap: var(--dropdown-item-gap); } .dropdown-item-icon { @@ -45,15 +45,15 @@ } .dropdown-item-indicator { - height: var(--dropdown-item-icon-size); display: inline-flex; + align-items: center; + height: var(--dropdown-item-icon-size); line-height: 1; vertical-align: bottom; - align-items: center; } .dropdown-header { - @include subheader; + @include subheader(); padding-bottom: var(--dropdown-header-padding-bottom); pointer-events: none; } @@ -78,48 +78,49 @@ } .dropdown-menu-arrow { - &:before { - content: ''; + &::before { position: absolute; - top: calc(-1 * var(--dropdown-arrow-offset)); inset-inline-start: var(--dropdown-arrow-inset); + top: calc(-1 * var(--dropdown-arrow-offset)); + z-index: -1; display: block; - background: inherit; width: 14px; height: 14px; - /*rtl:ignore*/ - transform: rotate(45deg); - transform-origin: center; + clip: rect(0, 9px, 9px, 0); + content: ''; + background: inherit; border: 1px solid; border-color: inherit; - z-index: -1; - clip: rect(0px, 9px, 9px, 0px); + + /* rtl:ignore */ + transform: rotate(45deg); + transform-origin: center; } &.dropdown-menu-end { - &:before { - inset-inline-end: var(--dropdown-arrow-inset); + &::before { inset-inline-start: auto; + inset-inline-end: var(--dropdown-arrow-inset); } } } .dropend { > .dropdown-menu { - margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px); margin-inline-start: calc(-1 * var(--dropdown-dropend-offset)); + margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px); } .dropdown-toggle { - &:after { + &::after { margin-inline-start: auto; } } } .dropdown-menu-card { - padding: 0; min-width: var(--dropdown-menu-card-min-width); + padding: 0; > .card { margin: 0; diff --git a/core/scss/ui/_empty.scss b/core/scss/ui/_empty.scss index 8cd71635d..d9f0a124e 100644 --- a/core/scss/ui/_empty.scss +++ b/core/scss/ui/_empty.scss @@ -25,9 +25,9 @@ } .empty-icon { - margin: 0 0 var(--empty-icon-margin-bottom); width: var(--empty-icon-size); height: var(--empty-icon-size); + margin: 0 0 var(--empty-icon-margin-bottom); line-height: 1; color: var(--secondary); @@ -52,8 +52,8 @@ .empty-title { font-size: $h2-font-size; - line-height: $h2-line-height; font-weight: $headings-font-weight; + line-height: $h2-line-height; } .empty-title, diff --git a/core/scss/ui/_flags.scss b/core/scss/ui/_flags.scss index 07b6f9eef..1d38ce692 100644 --- a/core/scss/ui/_flags.scss +++ b/core/scss/ui/_flags.scss @@ -8,14 +8,14 @@ display: inline-block; width: config.$avatar-size; aspect-ratio: 1.33333; + vertical-align: bottom; background: no-repeat center/cover; box-shadow: config.$flag-box-shadow; @include config.border-radius(config.$flag-border-radius); - vertical-align: bottom; &.flag-country-np { - box-shadow: none; border-radius: 0; + box-shadow: none; } } diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss index 665cf436b..17ecff8e5 100644 --- a/core/scss/ui/_forms.scss +++ b/core/scss/ui/_forms.scss @@ -17,10 +17,10 @@ Form label font-weight: var(--font-weight-medium); &.required { - &:after { - content: '*'; + &::after { margin-inline-start: var(--form-label-required-gap); color: $red; + content: '*'; } } } @@ -46,7 +46,7 @@ Form hint margin-bottom: 0; } - & + .form-control { + + .form-control { margin-top: var(--form-hint-margin-top); } @@ -76,8 +76,8 @@ Form control */ .form-control { &:-webkit-autofill { - box-shadow: 0 0 0 1000px var(--bg-surface-secondary) inset; color: var(--body-color); + box-shadow: 0 0 0 1000px var(--bg-surface-secondary) inset; -webkit-text-fill-color: var(--body-color); } @@ -98,14 +98,14 @@ Form control } .form-control-dark { - background-color: rgba($black, 0.1); color: $white; + background-color: rgba($black, 0.1); border-color: transparent; &:focus { background-color: rgba($black, 0.1); - box-shadow: none; border-color: rgba($white, 0.24); + box-shadow: none; } &::placeholder { @@ -119,11 +119,11 @@ Form control .form-control-flush { padding: 0; + line-height: inherit; + resize: none; background: none !important; border-color: transparent !important; - resize: none; box-shadow: none !important; - line-height: inherit; } .form-footer { @@ -155,12 +155,12 @@ Form help --form-help-font-size: #{$form-help-font-size}; display: inline-flex; - font-weight: var(--font-weight-semibold); align-items: center; justify-content: center; width: var(--form-help-size); height: var(--form-help-size); font-size: var(--form-help-font-size); + font-weight: var(--font-weight-semibold); color: $form-secondary-color; text-align: center; text-decoration: none; @@ -222,8 +222,8 @@ Input group } .input-group-text { - background: $form-check-input-bg; z-index: 10; + background: $form-check-input-bg; @include transition($input-transition); &:first-child { diff --git a/core/scss/ui/_grid.scss b/core/scss/ui/_grid.scss index ead4714da..8e682632b 100644 --- a/core/scss/ui/_grid.scss +++ b/core/scss/ui/_grid.scss @@ -22,13 +22,13 @@ @each $name, $value in (0: 0, sm: $grid-row-gutter-sm, md: $grid-row-gutter-md, lg: $grid-row-gutter-lg) { .row-#{$name} { --grid-row-gutter: #{$value}; - margin-inline-end: calc(-1 * var(--grid-row-gutter)); margin-inline-start: calc(-1 * var(--grid-row-gutter)); + margin-inline-end: calc(-1 * var(--grid-row-gutter)); > .col, > [class*='col-'] { - padding-inline-end: var(--grid-row-gutter); padding-inline-start: var(--grid-row-gutter); + padding-inline-end: var(--grid-row-gutter); } .card { @@ -128,9 +128,9 @@ height: 100%; > :not(template) { - flex: 1; display: flex; - justify-content: center; + flex: 1; flex-direction: column; + justify-content: center; } } diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss index a74650f00..b63e7349f 100644 --- a/core/scss/ui/_icons.scss +++ b/core/scss/ui/_icons.scss @@ -5,11 +5,11 @@ .icon { --icon-size: #{$font-size-base * $line-height-base}; + display: inline-block; width: var(--icon-size); height: var(--icon-size); font-size: var(--icon-size); vertical-align: bottom; - display: inline-block; transform-origin: center; @if $icon-stroke-width { diff --git a/core/scss/ui/_images.scss b/core/scss/ui/_images.scss index f34fd573b..4a62d2b5d 100644 --- a/core/scss/ui/_images.scss +++ b/core/scss/ui/_images.scss @@ -4,8 +4,8 @@ .img-responsive { --img-responsive-ratio: #{math.percentage(0.75)}; - background: no-repeat center/cover; padding-top: var(--img-responsive-ratio); + background: no-repeat center/cover; } .img-responsive-grid { diff --git a/core/scss/ui/_legend.scss b/core/scss/ui/_legend.scss index c2cbc6366..fc93318ec 100644 --- a/core/scss/ui/_legend.scss +++ b/core/scss/ui/_legend.scss @@ -6,9 +6,9 @@ Legend .legend { --legend-size: #{$legend-size}; display: inline-block; - background: $legend-bg; width: var(--legend-size); height: var(--legend-size); - @include border-radius($legend-border-radius); + background: $legend-bg; border: 1px solid var(--border-color-translucent); + @include border-radius($legend-border-radius); } diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss index bd4eeb333..83df6ad95 100644 --- a/core/scss/ui/_lists.scss +++ b/core/scss/ui/_lists.scss @@ -8,13 +8,13 @@ } .list-group-header { - background: $list-group-header-bg; padding: var(--list-group-header-padding-y) $list-group-item-padding-x; font-size: $h5-font-size; font-weight: var(--font-weight-medium); line-height: 1; - text-transform: uppercase; color: $list-group-header-color; + text-transform: uppercase; + background: $list-group-header-bg; border-bottom: var(--border-width) var(--border-style) var(--border-color); .list-group-flush > & { @@ -26,6 +26,12 @@ .list-group-item { background-color: inherit; + + &.disabled, + &:disabled { + color: $gray-500; + background-color: $dropdown-link-hover-bg; + } } .list-group-item.active { @@ -34,18 +40,10 @@ border-inline-start-width: $border-width-wide; } -.list-group-item { - &.disabled, - &:disabled { - color: $gray-500; - background-color: $dropdown-link-hover-bg; - } -} - .list-bordered { .list-item { - border-top: var(--border-width) var(--border-style) var(--border-color); margin-top: -1px; + border-top: var(--border-width) var(--border-style) var(--border-color); &:first-child { border-top: none; @@ -119,8 +117,8 @@ Inline list } .list-inline-dots { - .list-inline-item + .list-inline-item:before { - content: ' · '; + .list-inline-item + .list-inline-item::before { margin-inline-end: $list-inline-padding; + content: ' · '; } } diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss index 4ea33a02f..e3a8b528e 100644 --- a/core/scss/ui/_loaders.scss +++ b/core/scss/ui/_loaders.scss @@ -8,21 +8,21 @@ color: $blue; vertical-align: middle; - &:after { + &::after { position: absolute; - top: 0; inset-inline-start: 0; + top: 0; width: 100%; height: 100%; content: ''; border: 1px var(--border-style); border-color: transparent; - border-top-color: currentColor; border-inline-start-color: currentColor; - - @include border-radius(var(--border-radius-pill)); + border-top-color: currentColor; animation: rotate-360 0.6s linear; animation-iteration-count: infinite; + + @include border-radius(var(--border-radius-pill)); } } @@ -34,9 +34,9 @@ Dimmer .loader { position: absolute; - top: 50%; - inset-inline-end: 0; inset-inline-start: 0; + inset-inline-end: 0; + top: 50%; display: none; margin: 0 auto; transform: translateY(-50%); @@ -56,7 +56,7 @@ Dimmer @keyframes animated-dots { 0% { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * -100%)); } } @@ -66,7 +66,7 @@ Dimmer overflow: hidden; vertical-align: bottom; - &:after { + &::after { display: inline-block; content: '...'; animation: animated-dots 1.2s steps(4, jump-none) infinite; diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss index c8a4926c5..9cceec957 100644 --- a/core/scss/ui/_markdown.scss +++ b/core/scss/ui/_markdown.scss @@ -13,8 +13,8 @@ Prose (formerly markdown) --markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y}; --markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x}; --markdown-pre-max-height: #{$markdown-pre-max-height}; - line-height: $markdown-line-height; font-size: $markdown-font-size; + line-height: $markdown-line-height; > :first-child { margin-top: 0; @@ -58,9 +58,9 @@ Prose (formerly markdown) } > blockquote { - font-size: $h3-font-size; - margin: var(--markdown-blockquote-margin-y) 0; padding: var(--markdown-blockquote-padding-y) var(--markdown-blockquote-padding-x); + margin: var(--markdown-blockquote-margin-y) 0; + font-size: $h3-font-size; } > img, diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss index 58fa8c2a1..78fa09283 100644 --- a/core/scss/ui/_modals.scss +++ b/core/scss/ui/_modals.scss @@ -4,18 +4,18 @@ .modal-header { > .btn-close { position: absolute; - top: 0; inset-inline-end: 0; + top: 0; + z-index: 10; width: $modal-header-height; height: $modal-header-height; - margin: 0; padding: 0; - z-index: 10; + margin: 0; } } .modal-body { - @include scrollbar; + @include scrollbar(); .modal-title { margin-bottom: var(--modal-body-title-margin-bottom); @@ -28,9 +28,9 @@ .modal-status { position: absolute; - top: 0; inset-inline-start: 0; inset-inline-end: 0; + top: 0; height: $modal-status-size; background: var(--secondary); @include border-radius($modal-content-border-radius $modal-content-border-radius 0 0); @@ -39,15 +39,15 @@ .modal-header { align-items: center; min-height: $modal-header-height; - background: $modal-header-bg; padding: 0 $modal-header-height 0 $modal-inner-padding; + background: $modal-header-bg; } .modal-title { font-size: $h3-font-size; font-weight: $headings-font-weight; - color: $headings-color; line-height: $line-height-base; + color: $headings-color; } .modal-footer { @@ -73,7 +73,7 @@ --modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom}; --modal-footer-padding-y: #{$modal-footer-padding-y}; - @include media-print { + @include media-print() { display: none !important; } } diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss index 9fb984d92..d59659c3a 100644 --- a/core/scss/ui/_nav.scss +++ b/core/scss/ui/_nav.scss @@ -16,9 +16,9 @@ } .nav { + padding-inline-start: var(--nav-vertical-nested-padding-start); margin-inline-start: var(--nav-vertical-nested-margin-start); border-inline-start: var(--border-width) var(--border-style) var(--border-color); - padding-inline-start: var(--nav-vertical-nested-padding-start); } .nav-link.active, @@ -81,12 +81,12 @@ } .nav-link-toggle { - margin-inline-start: auto; padding: 0 var(--nav-link-toggle-padding-x); + margin-inline-start: auto; @include transition(transform $transition-time); @include caret(); - &:after { + &::after { margin: 0; } diff --git a/core/scss/ui/_offcanvas.scss b/core/scss/ui/_offcanvas.scss index bd8eb6f95..bb498c8bb 100644 --- a/core/scss/ui/_offcanvas.scss +++ b/core/scss/ui/_offcanvas.scss @@ -1,7 +1,7 @@ @use '../config' as *; .offcanvas { - @include media-print { + @include media-print() { display: none; } } diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss index 0e38fe31f..bee2743c7 100644 --- a/core/scss/ui/_pagination.scss +++ b/core/scss/ui/_pagination.scss @@ -1,15 +1,15 @@ @use '../config' as *; .pagination { + gap: var(--pagination-gap); margin: 0; + line-height: var(--body-line-height); + user-select: none; --pagination-gap: #{$pagination-gap}; --pagination-link-min-width: #{$pagination-link-min-width}; --page-text-padding-x: #{$page-text-padding-x}; - user-select: none; - gap: var(--pagination-gap); - line-height: var(--body-line-height); - @include media-print { + @include media-print() { display: none; } } diff --git a/core/scss/ui/_patterns.scss b/core/scss/ui/_patterns.scss index 1211f28ac..68a43918c 100644 --- a/core/scss/ui/_patterns.scss +++ b/core/scss/ui/_patterns.scss @@ -32,8 +32,8 @@ background-position: 0 0, calc(var(--pattern-size) / 2) calc(var(--pattern-size) / 2); - background-size: var(--pattern-size) var(--pattern-size); background-clip: padding-box; + background-size: var(--pattern-size) var(--pattern-size); border: var(--border-width) var(--border-style) var(--pattern-border); } @@ -46,8 +46,8 @@ background-position: -1px -1px, calc(var(--pattern-size) - 1px) calc(var(--pattern-size) - 1px); - background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); background-clip: padding-box; + background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); border: var(--border-width) var(--border-style) var(--pattern-border); } @@ -56,10 +56,10 @@ --pattern-fill: color-mix(in oklch, var(--pattern-color) 6%, transparent); --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent); --pattern-size: #{$pattern-size}; - background-size: var(--pattern-size) var(--pattern-size); background-image: repeating-linear-gradient(0deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent); background-position: -1px -1px; background-clip: padding-box; + background-size: var(--pattern-size) var(--pattern-size); border: var(--border-width) var(--border-style) var(--pattern-border); } @@ -68,10 +68,10 @@ --pattern-fill: color-mix(in oklch, var(--pattern-color) 6%, transparent); --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent); --pattern-size: #{$pattern-size}; - background-size: var(--pattern-size) var(--pattern-size); background-image: repeating-linear-gradient(90deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent); background-position: -1px -1px; background-clip: padding-box; + background-size: var(--pattern-size) var(--pattern-size); border: var(--border-width) var(--border-style) var(--pattern-border); } @@ -81,11 +81,11 @@ --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent); --pattern-size: #{$pattern-size}; background-image: linear-gradient(to right, var(--pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-fill) 1px, transparent 1px); - background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); background-position: -1px -1px, -1px -1px; background-clip: padding-box; + background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); border: var(--border-width) var(--border-style) var(--pattern-border); } @@ -95,9 +95,9 @@ --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent); --pattern-size: #{$pattern-size}; background-image: linear-gradient(45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%); - background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); background-position: center center; background-clip: padding-box; + background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); border: var(--border-width) var(--border-style) var(--pattern-border); } @@ -107,17 +107,17 @@ --pattern-line: color-mix(in oklch, var(--pattern-color) 6%, transparent); --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent); background-image: linear-gradient(var(--pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--pattern-line) 2px, transparent 2px), linear-gradient(var(--pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-line) 1px, transparent 1px); - background-size: - calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10), - calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10), - calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2), - calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); background-position: -3px -3px, -3px -3px, -2px -2px, -2px -2px; background-clip: padding-box; + background-size: + calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10), + calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10), + calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2), + calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); border: var(--border-width) var(--border-style) var(--pattern-border); } @@ -127,11 +127,11 @@ --pattern-fill: color-mix(in oklch, var(--pattern-color) 10%, transparent); --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent); background-image: radial-gradient(var(--pattern-fill) 1px, transparent 1px), radial-gradient(var(--pattern-fill) 1px, transparent 1px); - background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); background-position: 0 0, var(--pattern-size) var(--pattern-size); background-clip: padding-box; + background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2); border: var(--border-width) var(--border-style) var(--pattern-border); } @@ -180,8 +180,8 @@ linear-gradient(225deg, var(--pattern-fill) 25%, transparent 25%) calc(-1 * var(--pattern-size)) 0, linear-gradient(315deg, var(--pattern-fill) 25%, transparent 25%), linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%); - background-size: calc(2 * var(--pattern-size)) calc(2 * var(--pattern-size)); background-clip: padding-box; + background-size: calc(2 * var(--pattern-size)) calc(2 * var(--pattern-size)); border: var(--border-width) var(--border-style) var(--pattern-border); } diff --git a/core/scss/ui/_payments.scss b/core/scss/ui/_payments.scss index d99f29c35..4f0bcb156 100644 --- a/core/scss/ui/_payments.scss +++ b/core/scss/ui/_payments.scss @@ -4,12 +4,12 @@ @use '../config' as *; .payment { + display: inline-block; height: config.$avatar-size; aspect-ratio: 1.66666; - display: inline-block; - background: no-repeat center/100% 100%; - vertical-align: bottom; font-style: normal; + vertical-align: bottom; + background: no-repeat center/100% 100%; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); @include config.border-radius(var(--border-radius)); } diff --git a/core/scss/ui/_popovers.scss b/core/scss/ui/_popovers.scss index 8c5c55aed..462ee4b79 100644 --- a/core/scss/ui/_popovers.scss +++ b/core/scss/ui/_popovers.scss @@ -1,7 +1,7 @@ @use '../config' as *; .popover { - @include media-print { + @include media-print() { display: none; } } diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss index 84780d3c8..5fd1e8e12 100644 --- a/core/scss/ui/_progress.scss +++ b/core/scss/ui/_progress.scss @@ -2,14 +2,14 @@ @keyframes progress-indeterminate { 0% { - inset-inline-end: 100%; inset-inline-start: -35%; + inset-inline-end: 100%; } 100%, 60% { - inset-inline-end: -90%; inset-inline-start: 100%; + inset-inline-end: -90%; } } @@ -61,18 +61,18 @@ Progress bar } .progress-bar-indeterminate { - &:after, - &:before { + &::after, + &::before { position: absolute; + inset-inline-start: 0; top: 0; bottom: 0; - inset-inline-start: 0; content: ''; background-color: inherit; will-change: left, right; } - &:before { + &::before { animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } } @@ -92,8 +92,8 @@ Progressbg --progressbg-padding-y: #{$progressbg-padding-y}; --progressbg-padding-x: #{$progressbg-padding-x}; position: relative; - padding: var(--progressbg-padding-y) var(--progressbg-padding-x); display: flex; + padding: var(--progressbg-padding-y) var(--progressbg-padding-x); } .progressbg-text { @@ -101,26 +101,26 @@ Progressbg z-index: 1; display: flex; align-items: center; - @include text-truncate; + @include text-truncate(); } .progressbg-progress { position: absolute; - top: 0; - inset-inline-end: 0; - bottom: 0; inset-inline-start: 0; + inset-inline-end: 0; + top: 0; + bottom: 0; z-index: 0; height: 100%; - background: transparent; pointer-events: none; + background: transparent; } .progressbg-value { --progressbg-value-padding-start: #{$progressbg-value-padding-start}; - font-weight: var(--font-weight-medium); - margin-inline-start: auto; padding-inline-start: var(--progressbg-value-padding-start); + margin-inline-start: auto; + font-weight: var(--font-weight-medium); } /** @@ -130,11 +130,11 @@ Progress steps --progress-steps-gap: #{$progress-steps-gap}; display: flex; flex-wrap: nowrap; + gap: var(--progress-steps-gap); width: 100%; padding: 0; margin: 0; list-style: none; - gap: var(--progress-steps-gap); } .progress-steps-item { diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss index b221ec61f..caf1b97a5 100644 --- a/core/scss/ui/_ribbons.scss +++ b/core/scss/ui/_ribbons.scss @@ -17,9 +17,14 @@ --ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width}; position: absolute; - top: var(--ribbon-offset); inset-inline-end: calc(-1 * var(--ribbon-margin)); + top: var(--ribbon-offset); z-index: 1; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: var(--ribbon-min-size); + min-height: var(--ribbon-min-size); padding: var(--ribbon-padding-y) var(--ribbon-padding-x); font-size: var(--ribbon-font-size); font-weight: var(--font-weight-semibold); @@ -30,13 +35,8 @@ background: var(--primary); border-color: var(--primary); @include border-radius(var(--ribbon-border-radius) 0 var(--ribbon-border-radius) var(--ribbon-border-radius)); - display: inline-flex; - align-items: center; - justify-content: center; - min-height: var(--ribbon-min-size); - min-width: var(--ribbon-min-size); - &:before { + &::before { position: absolute; inset-inline-end: 0; bottom: 100%; @@ -46,8 +46,8 @@ filter: brightness(70%); border: calc(var(--ribbon-margin) * 0.5) var(--border-style); border-color: inherit; - border-top-color: transparent; border-inline-end-color: transparent; + border-top-color: transparent; } @if $enable-extra-colors { @@ -70,45 +70,45 @@ } .ribbon-top { - top: calc(-1 * var(--ribbon-margin)); inset-inline-end: var(--ribbon-offset); + top: calc(-1 * var(--ribbon-margin)); width: var(--ribbon-top-width); padding: var(--ribbon-top-padding-y) 0; @include border-radius(0 var(--ribbon-border-radius) var(--ribbon-border-radius) var(--ribbon-border-radius)); - &:before { - top: 0; + &::before { inset-inline-end: 100%; + top: 0; bottom: auto; border-color: inherit; - border-top-color: transparent; border-inline-start-color: transparent; + border-top-color: transparent; } &.ribbon-start { - inset-inline-end: auto; inset-inline-start: var(--ribbon-offset); + inset-inline-end: auto; - &:before { - top: 0; - inset-inline-end: 100%; + &::before { inset-inline-start: auto; + inset-inline-end: 100%; + top: 0; } } } .ribbon-start { - inset-inline-end: auto; inset-inline-start: calc(-1 * var(--ribbon-margin)); + inset-inline-end: auto; @include border-radius(0 var(--ribbon-border-radius) var(--ribbon-border-radius) var(--ribbon-border-radius)); - &:before { + &::before { + inset-inline-start: 0; top: auto; bottom: 100%; - inset-inline-start: 0; border-color: inherit; - border-top-color: transparent; border-inline-start-color: transparent; + border-top-color: transparent; } } @@ -121,44 +121,44 @@ padding-inline-start: var(--ribbon-padding-y); @include border-radius(0 0 var(--ribbon-border-radius) 0); - &:after { + &::after { position: absolute; - top: 0; inset-inline-end: 100%; + top: 0; display: block; width: 0; height: 0; content: ''; border: var(--ribbon-bookmark-border-size) var(--border-style); border-color: inherit; - border-inline-end-width: 0; border-inline-start-color: transparent; border-inline-start-width: var(--ribbon-bookmark-notch-width); + border-inline-end-width: 0; } &.ribbon-left { padding-inline-end: var(--ribbon-bookmark-notch-width); - &:after { - inset-inline-end: auto; + &::after { inset-inline-start: 100%; + inset-inline-end: auto; + border-inline-start-width: 0; border-inline-end-color: transparent; border-inline-end-width: var(--ribbon-bookmark-notch-width); - border-inline-start-width: 0; } } &.ribbon-top { + padding-inline-start: 0; padding-inline-end: 0; padding-bottom: var(--ribbon-padding-y); - padding-inline-start: 0; @include border-radius(0 var(--ribbon-border-radius) 0 0); - &:after { - top: 100%; - inset-inline-end: 0; + &::after { inset-inline-start: 0; + inset-inline-end: 0; + top: 100%; border-color: inherit; border-width: var(--ribbon-bookmark-border-size); border-top-width: 0; diff --git a/core/scss/ui/_segmented.scss b/core/scss/ui/_segmented.scss index ebe34f19f..3c9f9e2a2 100644 --- a/core/scss/ui/_segmented.scss +++ b/core/scss/ui/_segmented.scss @@ -25,31 +25,31 @@ .nav-link { display: inline-flex; + flex-grow: 1; gap: calc(#{$nav-segmented-link-gap} + var(--nav-link-gap)); align-items: center; - margin: 0; - font-size: var(--nav-font-size); + justify-content: center; min-width: calc(var(--nav-height) - 2 * var(--nav-padding)); height: calc(var(--nav-height) - 2 * var(--nav-padding)); padding: 0 calc(var(--nav-link-padding-x) - 2px); - border: 1px solid transparent; - background: transparent; + margin: 0; + font-size: var(--nav-font-size); color: var(--secondary); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; + background: transparent; + border: 1px solid transparent; transition: background-color $transition-time, color $transition-time; @include border-radius(var(--nav-radius)); - flex-grow: 1; - justify-content: center; &:hover, &.hover { - background: rgba(0, 0, 0, 0.04); color: var(--body-color); + background: rgba(0, 0, 0, 0.04); } &.disabled, diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss index 908d910d6..e224ca7d7 100644 --- a/core/scss/ui/_signature.scss +++ b/core/scss/ui/_signature.scss @@ -4,19 +4,19 @@ --signature-padding: var(--spacer-1); --signature-border-radius: var(--border-radius); --signature-canvas-height: 12.5rem; - border: var(--border-width) solid var(--border-color); padding: var(--signature-padding); + border: var(--border-width) solid var(--border-color); @include border-radius(var(--border-radius)); } .signature-canvas { - border: var(--border-width) dashed var(--border-color); - @include border-radius(calc(var(--signature-border-radius) - var(--signature-padding))); display: block; - cursor: crosshair; width: 100%; // A fixed height is required: without it the canvas height comes from its own // width/height attributes, which `resizeCanvas()` rewrites on every resize — // each run then measures a different `offsetHeight` and the pad drifts. height: var(--signature-canvas-height); + cursor: crosshair; + border: var(--border-width) dashed var(--border-color); + @include border-radius(calc(var(--signature-border-radius) - var(--signature-padding))); } diff --git a/core/scss/ui/_social.scss b/core/scss/ui/_social.scss index b69c95c30..cf4574096 100644 --- a/core/scss/ui/_social.scss +++ b/core/scss/ui/_social.scss @@ -8,8 +8,8 @@ display: inline-block; height: config.$avatar-size; aspect-ratio: 1; - background: no-repeat center/cover; vertical-align: bottom; + background: no-repeat center/cover; } @each $app in config.$social-apps { diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss index dd46cccd6..94945435b 100644 --- a/core/scss/ui/_stars.scss +++ b/core/scss/ui/_stars.scss @@ -4,8 +4,8 @@ --stars-gap: #{$stars-gap}; display: inline-flex; - color: $gray-400; font-size: $h5-font-size; + color: $gray-400; .star:not(:first-child) { margin-inline-start: var(--stars-gap); diff --git a/core/scss/ui/_status.scss b/core/scss/ui/_status.scss index 29baf20ba..b954f7cf5 100644 --- a/core/scss/ui/_status.scss +++ b/core/scss/ui/_status.scss @@ -31,12 +31,12 @@ transform: scale(1, 1); } 80% { - transform: scale(3, 3); opacity: 0; + transform: scale(3, 3); } 100% { - transform: scale(3, 3); opacity: 0; + transform: scale(3, 3); } } @@ -52,19 +52,19 @@ --status-gap: #{$status-gap}; display: inline-flex; + gap: var(--status-gap); align-items: center; height: var(--status-height); padding: var(--status-padding-y) var(--status-padding-x); - gap: var(--status-gap); - color: var(--status-color); - background: color-transparent(var(--status-color), 0.1); + margin: 0; font-size: $font-size-base; - text-transform: none; - letter-spacing: normal; - @include border-radius(var(--border-radius-pill)); font-weight: var(--font-weight-medium); line-height: 1; - margin: 0; + color: var(--status-color); + text-transform: none; + letter-spacing: normal; + background: color-transparent(var(--status-color), 0.1); + @include border-radius(var(--border-radius-pill)); .status-dot { background: var(--status-color); @@ -76,9 +76,9 @@ } .status-lite { - border: var(--border-width) var(--border-style) var(--border-color) !important; - background: transparent !important; color: var(--body-color) !important; + background: transparent !important; + border: var(--border-width) var(--border-style) var(--border-color) !important; } @each $name, $color in map.merge($theme-colors, $social-colors) { @@ -103,11 +103,11 @@ } .status-dot-animated { - &:before { - content: ''; + &::before { position: absolute; inset: 0; z-index: 0; + content: ''; background: inherit; border-radius: inherit; opacity: 0.6; @@ -121,8 +121,8 @@ .status-indicator { --status-indicator-size: #{$status-indicator-size}; --status-indicator-color: var(--status-color, #{$text-secondary}); - display: block; position: relative; + display: block; width: var(--status-indicator-size); height: var(--status-indicator-size); } @@ -132,11 +132,11 @@ position: absolute; inset-inline-start: 50%; top: 50%; - margin: calc(var(--status-circle-size) / -2) 0 0 calc(var(--status-circle-size) / -2); width: var(--status-circle-size); height: var(--status-circle-size); - @include border-radius(var(--border-radius-pill)); + margin: calc(var(--status-circle-size) / -2) 0 0 calc(var(--status-circle-size) / -2); background: var(--status-color); + @include border-radius(var(--border-radius-pill)); &:nth-child(1) { z-index: 3; diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss index 6b5e2dac7..9878c939e 100644 --- a/core/scss/ui/_steps.scss +++ b/core/scss/ui/_steps.scss @@ -40,11 +40,11 @@ position: relative; flex: 1 1 0; min-height: var(--step-item-min-height); + padding-top: calc(var(--steps-dot-size)); margin-top: 0; color: inherit; text-align: center; cursor: default; - padding-top: calc(var(--steps-dot-size)); @at-root a#{&} { cursor: pointer; @@ -54,12 +54,12 @@ } } - &:after, - &:before { + &::after, + &::before { background: var(--steps-color); } - &:not(:last-child):after { + &:not(:last-child)::after { position: absolute; inset-inline-start: 50%; width: 100%; @@ -67,41 +67,42 @@ transform: translateY(-50%); } - &:after { + &::after { top: calc(var(--steps-dot-size) * 0.5); height: var(--steps-border-width); } - &:before { - content: ''; + &::before { position: absolute; - top: 0; inset-inline-start: 50%; + top: 0; z-index: 1; box-sizing: content-box; display: flex; align-items: center; justify-content: center; - @include border-radius(var(--border-radius-pill)); - /*rtl:ignore*/ - transform: translateX(calc(var(--dir) * -50%)); - color: var(--white); width: var(--steps-dot-size); height: var(--steps-dot-size); + color: var(--white); + content: ''; + + /* rtl:ignore */ + transform: translateX(calc(var(--dir) * -50%)); + @include border-radius(var(--border-radius-pill)); } &.active { font-weight: var(--font-weight-semibold); - &:after { + &::after { background: var(--steps-inactive-color); } - & ~ .step-item { + ~ .step-item { color: var(--disabled-color); - &:after, - &:before { + &::after, + &::before { background: var(--steps-inactive-color); } } @@ -118,7 +119,7 @@ .step-item { counter-increment: steps; - &:before { + &::before { content: counter(steps); } } @@ -139,31 +140,32 @@ } .step-item { - text-align: start; - padding-top: 0; - padding-inline-start: calc(var(--steps-dot-size) + var(--steps-vertical-padding-start)); min-height: auto; + padding-inline-start: calc(var(--steps-dot-size) + var(--steps-vertical-padding-start)); + padding-top: 0; + text-align: start; &:not(:first-child) { margin-top: var(--steps-vertical-item-gap); } - &:before { - top: var(--steps-dot-offset); + &::before { inset-inline-start: 0; + top: var(--steps-dot-offset); transform: translate(0, 0); } &:not(:last-child) { - &:after { + &::after { position: absolute; - content: ''; - /*rtl:ignore*/ - transform: translateX(calc(var(--dir) * -50%)); - top: var(--steps-dot-offset); inset-inline-start: calc(var(--steps-dot-size) * 0.5); + top: var(--steps-dot-offset); width: var(--steps-border-width); height: calc(100% + var(--steps-vertical-connector-gap)); + content: ''; + + /* rtl:ignore */ + transform: translateX(calc(var(--dir) * -50%)); } } } diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss index 14d7dd552..593e64fea 100644 --- a/core/scss/ui/_switch-icon.scss +++ b/core/scss/ui/_switch-icon.scss @@ -1,16 +1,16 @@ @use '../config' as *; .switch-icon { + position: relative; display: inline-block; - line-height: 1; - border: 0; - padding: 0; - background: transparent; width: $icon-size; height: $icon-size; + padding: 0; + line-height: 1; vertical-align: bottom; - position: relative; cursor: pointer; + background: transparent; + border: 0; &.disabled { pointer-events: none; @@ -45,8 +45,8 @@ .switch-icon-b { position: absolute; - top: 0; inset-inline-start: 0; + top: 0; opacity: 0; } @@ -166,13 +166,13 @@ } .switch-icon-b { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * 100%)); } &.active { .switch-icon-a { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * -100%)); } @@ -189,13 +189,13 @@ } .switch-icon-b { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * -100%)); } &.active { .switch-icon-a { - /*rtl:ignore*/ + /* rtl:ignore */ transform: translateX(calc(var(--dir) * 100%)); } diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss index da05382d1..5881684a6 100644 --- a/core/scss/ui/_tables.scss +++ b/core/scss/ui/_tables.scss @@ -5,13 +5,13 @@ thead { th { - background: $table-th-bg; - @include subheader; padding-top: $table-th-padding-y; padding-bottom: $table-th-padding-y; white-space: nowrap; + background: $table-th-bg; + @include subheader(); - @include media-print { + @include media-print() { background: transparent; } } @@ -32,6 +32,9 @@ } } +// Matches Bootstrap's own `.table > :not(caption) > * > *` idiom for targeting every +// cell regardless of thead/tbody/tfoot wrapping. +// stylelint-disable selector-max-universal .table-nowrap { > :not(caption) > * > * { white-space: nowrap; @@ -49,10 +52,11 @@ text-align: center; } } +// stylelint-enable selector-max-universal .td-truncate { - max-width: 1px; width: 100%; + max-width: 1px; } .table-mobile { @@ -74,14 +78,14 @@ td { display: block; padding: $table-cell-padding-x $table-cell-padding-y !important; - border: none; color: var(--body-color) !important; + border: none; &[data-label] { - &:before { - @include subheader; - content: attr(data-label); + &::before { + @include subheader(); display: block; + content: attr(data-label); } } } @@ -104,18 +108,18 @@ Table sort .table-sort { --table-sort-icon-size: #{$table-sort-icon-size}; --table-sort-icon-margin-start: #{$table-sort-icon-margin-start}; + display: block; + width: 100%; + padding: $table-th-padding-y $table-th-padding-x; + margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x); font: inherit; color: inherit; + text-align: inherit; text-transform: inherit; letter-spacing: inherit; - border: 0; background: inherit; - display: block; - width: 100%; - text-align: inherit; - margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x); - padding: $table-th-padding-y $table-th-padding-x; + border: 0; @include transition(color $transition-time); &:hover, @@ -124,22 +128,22 @@ Table sort color: var(--body-color); } - &:after { - content: ''; + &::after { display: inline-flex; width: var(--table-sort-icon-size); height: var(--table-sort-icon-size); - vertical-align: bottom; - mask-image: $table-sort-bg-image; - background: currentColor; margin-inline-start: var(--table-sort-icon-margin-start); + vertical-align: bottom; + content: ''; + background: currentColor; + mask-image: $table-sort-bg-image; } - &.asc:after { + &.asc::after { mask-image: $table-sort-desc-bg-image; } - &.desc:after { + &.desc::after { mask-image: $table-sort-asc-bg-image; } } diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss index ff24c8fb2..1f8a7fd91 100644 --- a/core/scss/ui/_tags.scss +++ b/core/scss/ui/_tags.scss @@ -12,23 +12,23 @@ --tag-icon-margin-end: #{$tag-icon-margin-end}; --tag-icon-size: #{$tag-icon-size}; --tag-check-size: #{$tag-check-size}; - - border: $border-width solid var(--border-color); display: inline-flex; + gap: var(--tag-gap); align-items: center; height: var(--tag-height); - @include border-radius(var(--border-radius)); padding: 0 var(--tag-padding-x); background: var(--bg-surface); + + border: $border-width solid var(--border-color); box-shadow: var(--shadow-input); - gap: var(--tag-gap); + @include border-radius(var(--border-radius)); .btn-close { - margin-inline-end: var(--tag-close-margin-end); - margin-inline-start: var(--tag-close-margin-start); - padding: 0; width: var(--tag-close-size); height: var(--tag-close-size); + padding: 0; + margin-inline-start: var(--tag-close-margin-start); + margin-inline-end: var(--tag-close-margin-end); font-size: var(--tag-close-font-size); } } @@ -53,10 +53,10 @@ } .tag-icon { - color: var(--secondary); - margin-inline-end: var(--tag-icon-margin-end); width: var(--tag-icon-size); height: var(--tag-icon-size); + margin-inline-end: var(--tag-icon-margin-end); + color: var(--secondary); } .tag-check { @@ -69,5 +69,5 @@ // Tags list // .tags-list { - @include elements-list; + @include elements-list(); } diff --git a/core/scss/ui/_timeline.scss b/core/scss/ui/_timeline.scss index c359644f0..53b975a75 100644 --- a/core/scss/ui/_timeline.scss +++ b/core/scss/ui/_timeline.scss @@ -6,8 +6,8 @@ .timeline { --timeline-icon-size: #{$avatar-size}; position: relative; - list-style: none; padding: 0; + list-style: none; } // @@ -19,13 +19,13 @@ &:not(:last-child) { margin-bottom: var(--page-padding); - &:before { - content: ''; + &::before { position: absolute; - top: var(--timeline-icon-size); inset-inline-start: calc(var(--timeline-icon-size) / 2); + top: var(--timeline-icon-size); bottom: calc(-1 * var(--page-padding)); width: var(--border-width); + content: ''; background-color: var(--border-color); @include border-radius(var(--border-radius)); } @@ -34,15 +34,15 @@ .timeline-event-icon { position: absolute; + z-index: 5; display: flex; align-items: center; justify-content: center; width: var(--timeline-icon-size, $avatar-size); height: var(--timeline-icon-size, $avatar-size); - background: var(--bg-surface-secondary); color: var(--secondary); + background: var(--bg-surface-secondary); @include border-radius(var(--border-radius)); - z-index: 5; } .timeline-event-card { diff --git a/core/scss/ui/_toasts.scss b/core/scss/ui/_toasts.scss index 5db8798e9..2446f39e4 100644 --- a/core/scss/ui/_toasts.scss +++ b/core/scss/ui/_toasts.scss @@ -15,7 +15,7 @@ } } - @include media-print { + @include media-print() { display: none; } } diff --git a/core/scss/ui/_toolbar.scss b/core/scss/ui/_toolbar.scss index 2ec0ae315..e3529e881 100644 --- a/core/scss/ui/_toolbar.scss +++ b/core/scss/ui/_toolbar.scss @@ -4,15 +4,15 @@ --toolbar-gutter: #{$toolbar-gutter}; display: flex; - flex-wrap: nowrap; flex-shrink: 0; + flex-wrap: nowrap; margin: 0 calc(-1 * var(--toolbar-gutter)); > * { margin: 0 var(--toolbar-gutter); } - @include media-print { + @include media-print() { display: none; } } diff --git a/core/scss/ui/_tracking.scss b/core/scss/ui/_tracking.scss index f5ece0f5c..fa0a1ed22 100644 --- a/core/scss/ui/_tracking.scss +++ b/core/scss/ui/_tracking.scss @@ -15,18 +15,18 @@ .tracking-block { height: auto; - &:before { - content: ''; + &::before { display: block; padding-top: 100%; + content: ''; } } } .tracking-block { flex: 1; - @include border-radius(var(--tracking-block-border-radius)); - height: var(--tracking-height); min-width: var(--tracking-block-min-width); + height: var(--tracking-height); background: var(--border-color); + @include border-radius(var(--tracking-block-border-radius)); } diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index 9f40dcef4..435946d17 100644 --- a/core/scss/ui/_type.scss +++ b/core/scss/ui/_type.scss @@ -3,16 +3,16 @@ @forward 'typo/hr'; .lead { - color: var(--secondary); font-size: inherit; + color: var(--secondary); } a { text-decoration-skip-ink: auto; - color: color-mix(in srgb, transparent, var(--link-color) var(--link-opacity, 100%)); + color: color-mix(in sRGB, transparent, var(--link-color) var(--link-opacity, 100%)); &:hover { - color: color-mix(in srgb, transparent, var(--link-hover-color) var(--link-opacity, 100%)); + color: color-mix(in sRGB, transparent, var(--link-hover-color) var(--link-opacity, 100%)); } } @@ -97,7 +97,7 @@ blockquote { display: block; text-align: end; - &:before { + &::before { content: '— '; } } @@ -125,22 +125,22 @@ dl { pre { --scrollbar-color: #{$pre-color}; padding: $pre-padding; - background: $pre-bg; - color: $pre-color; - @include border-radius(var(--border-radius)); line-height: $line-height-base; + color: $pre-color; + background: $pre-bg; + @include border-radius(var(--border-radius)); - @include scrollbar; + @include scrollbar(); code { - background: transparent; padding: 0; + background: transparent; } } code { - background: var(--code-bg); padding: 2px 4px; + background: var(--code-bg); @include border-radius(var(--border-radius)); } @@ -152,14 +152,14 @@ abbr { kbd, .kbd { - border: $kbd-border; - display: inline-block; box-sizing: border-box; + display: inline-block; max-width: 100%; font-size: $kbd-font-size; font-weight: $kbd-font-weight; line-height: 1; vertical-align: baseline; + border: $kbd-border; @include border-radius($kbd-border-radius); } @@ -204,8 +204,8 @@ a:hover:has(.icon) { transition: background-color 0.15s ease-in-out; &:hover { - text-decoration: none; color: var(--primary); + text-decoration: none; background: color-transparent(var(--secondary), 0.04); } } @@ -214,7 +214,7 @@ a:hover:has(.icon) { Subheader */ .subheader { - @include subheader; + @include subheader(); } /** @@ -222,22 +222,22 @@ Mentions */ .mention { display: inline-block; - box-shadow: var(--shadow-border); - @include border-radius(var(--border-radius-pill)); - line-height: calc(16em / 12); + padding: calc(2em / 12) calc(8em / 12); font-size: calc(12em / 14); + font-weight: var(--font-weight-medium); + line-height: calc(16em / 12); color: var(--body-color); background: var(--bg-surface-tertiary); - padding: calc(2em / 12) calc(8em / 12); - font-weight: var(--font-weight-medium); + box-shadow: var(--shadow-border); + @include border-radius(var(--border-radius-pill)); @at-root a#{&} { cursor: pointer; &:hover, &.hover { - background: var(--bg-surface-secondary); text-decoration: underline; + background: var(--bg-surface-secondary); } } } @@ -245,26 +245,26 @@ Mentions .mention-avatar, .mention-app, .mention-color { + display: inline-flex; width: calc(14em / 12); height: calc(14em / 12); - @include border-radius(var(--border-radius-pill)); margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12); - display: inline-flex; + text-align: center; + vertical-align: middle; background: no-repeat center center/cover; box-shadow: var(--shadow-border); - vertical-align: middle; - text-align: center; + @include border-radius(var(--border-radius-pill)); } .mention-app { - box-shadow: none; background: none; border-radius: 0; + box-shadow: none; } .mention-count { - color: var(--secondary); margin-inline-start: calc(8em / 12); + color: var(--secondary); } $text-variants: ( @@ -274,11 +274,11 @@ $text-variants: ( @each $variant, $color in $text-variants { .text-#{$variant} { - background: color-transparent($color, 0.04); - background: color-transparent($color, 4%); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: $color; + background: color-transparent($color, 0.04); + background: color-transparent($color, 4%); } } @@ -288,11 +288,11 @@ $text-variants: ( --steps-margin-start: #{$steps-margin-start}; --steps-margin-bottom: #{$steps-margin-bottom}; --steps-heading-margin-top: #{$steps-heading-margin-top}; - margin-inline-start: var(--steps-margin-start); padding-inline-start: var(--steps-padding); + margin-inline-start: var(--steps-margin-start); + margin-bottom: var(--steps-margin-bottom); counter-reset: step; border-inline-start: 1px solid var(--border-color); - margin-bottom: var(--steps-margin-bottom); h3 { counter-increment: step; @@ -301,22 +301,22 @@ $text-variants: ( margin-top: var(--steps-heading-margin-top) !important; } - &:before { - content: counter(step); - display: inline-block; + &::before { position: absolute; - margin-top: 1px; - margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2); + display: inline-block; width: var(--steps-item-size); height: var(--steps-item-size); - text-align: center; - color: var(--body-color); - border: 1px solid var(--border-color); - background: var(--bg-surface); - @include border-radius(var(--border-radius)); - line-height: calc(var(--steps-item-size) - 2px); + margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2); + margin-top: 1px; font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); + line-height: calc(var(--steps-item-size) - 2px); + color: var(--body-color); + text-align: center; + content: counter(step); + background: var(--bg-surface); + border: 1px solid var(--border-color); + @include border-radius(var(--border-radius)); } } @@ -329,13 +329,13 @@ $text-variants: ( --callout-margin-bottom: #{$callout-margin-bottom}; --callout-padding-y: #{$callout-padding-y}; --callout-padding-x: #{$callout-padding-x}; + padding: var(--callout-padding-y) var(--callout-padding-x); margin-bottom: var(--callout-margin-bottom); + background: var(--primary-lt); border: 1px solid var(--primary-200); @include border-radius(var(--border-radius)); - padding: var(--callout-padding-y) var(--callout-padding-x); - background: var(--primary-lt); - & > :last-child { + > :last-child { margin-bottom: 0; } } diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss index 1ac9eeac1..f22825fd1 100644 --- a/core/scss/ui/forms/_form-check.scss +++ b/core/scss/ui/forms/_form-check.scss @@ -25,14 +25,10 @@ Form check .form-check-input { --form-check-input-width: #{$form-check-input-width}; + margin-top: ($form-check-min-height - $form-check-input-width) * 0.5; background-size: var(--form-check-input-width); - margin-top: ($form-check-min-height - $form-check-input-width) * 0.5; box-shadow: $form-check-input-box-shadow; - - .form-switch & { - @include transition(background-color$transition-time, background-position $transition-time); - } } .form-check-label { @@ -41,10 +37,10 @@ Form check display: block; &.required { - &:after { - content: '*'; + &::after { margin-inline-start: var(--form-check-label-required-gap); color: $red; + content: '*'; } } } @@ -53,9 +49,9 @@ Form check --form-check-description-margin-top: #{$form-check-description-margin-top}; display: block; - color: var(--secondary); - font-size: $h5-font-size; margin-top: var(--form-check-description-margin-top); + font-size: $h5-font-size; + color: var(--secondary); } .form-check-single { @@ -73,6 +69,7 @@ Form switch .form-check-input { height: $form-switch-height; margin-top: ($form-check-min-height - $form-switch-height) * 0.5; + @include transition(background-color $transition-time, background-position $transition-time); } } @@ -84,15 +81,15 @@ Form switch --form-switch-lg-bg-size: #{$form-switch-lg-bg-size}; --form-switch-lg-input-offset: #{$form-switch-lg-input-offset}; --form-switch-lg-label-padding-top: #{$form-switch-lg-label-padding-top}; - - padding-inline-start: var(--form-switch-lg-padding-start); min-height: var(--form-switch-lg-min-height); + padding-inline-start: var(--form-switch-lg-padding-start); + .form-check-input { - height: var(--form-switch-lg-height); width: var(--form-switch-lg-width); - background-size: var(--form-switch-lg-bg-size); + height: var(--form-switch-lg-height); margin-inline-start: var(--form-switch-lg-input-offset); + background-size: var(--form-switch-lg-bg-size); } .form-check-label { diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss index 1ef58626a..aef9d7ae7 100644 --- a/core/scss/ui/forms/_form-colorinput.scss +++ b/core/scss/ui/forms/_form-colorinput.scss @@ -27,10 +27,10 @@ Color Input @include border-radius(var(--border-radius)); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - &:before { + &::before { position: absolute; - top: 0; inset-inline-start: 0; + top: 0; width: 100%; height: 100%; content: ''; @@ -50,7 +50,7 @@ Color Input } @at-root .form-colorinput-light & { - &:before { + &::before { background-image: escape-svg($form-check-input-checked-bg-image-dark); } } diff --git a/core/scss/ui/forms/_form-custom.scss b/core/scss/ui/forms/_form-custom.scss index 17a301614..c01c81929 100644 --- a/core/scss/ui/forms/_form-custom.scss +++ b/core/scss/ui/forms/_form-custom.scss @@ -13,7 +13,7 @@ Bootstrap color input Remove the cancel buttons in Chrome and Safari on macOS. */ [type='search']::-webkit-search-cancel-button { - -webkit-appearance: none; + appearance: none; } /** diff --git a/core/scss/ui/forms/_form-icon.scss b/core/scss/ui/forms/_form-icon.scss index 8577d0ef4..0da902cfe 100644 --- a/core/scss/ui/forms/_form-icon.scss +++ b/core/scss/ui/forms/_form-icon.scss @@ -22,21 +22,21 @@ Icon input .input-icon-addon { --input-icon-addon-width: #{$input-icon-addon-width}; position: absolute; + inset-inline-start: 0; top: 0; bottom: 0; - inset-inline-start: 0; z-index: 10; display: flex; align-items: center; justify-content: center; min-width: var(--input-icon-addon-width); height: $input-height; + font-size: 1.2em; color: var(--icon-color); pointer-events: none; - font-size: 1.2em; &:last-child { - inset-inline-end: 0; inset-inline-start: auto; + inset-inline-end: 0; } } diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss index 1038cdf02..5b3066aeb 100644 --- a/core/scss/ui/forms/_form-imagecheck.scss +++ b/core/scss/ui/forms/_form-imagecheck.scss @@ -35,10 +35,10 @@ Image check border-color: var(--primary); } - &:before { + &::before { position: absolute; - top: var(--form-imagecheck-check-offset); inset-inline-start: var(--form-imagecheck-check-offset); + top: var(--form-imagecheck-check-offset); z-index: 1; display: block; width: $form-check-input-width; @@ -72,8 +72,8 @@ Image check } .form-imagecheck-image { - max-width: 100%; display: block; + max-width: 100%; opacity: 0.64; @include transition(opacity $transition-time); @@ -83,8 +83,8 @@ Image check } &:last-child { - border-end-end-radius: calc(var(--form-imagecheck-radius) - 1px); border-end-start-radius: calc(var(--form-imagecheck-radius) - 1px); + border-end-end-radius: calc(var(--form-imagecheck-radius) - 1px); } .form-imagecheck:hover &, diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss index f77e0a6c1..12b40c137 100644 --- a/core/scss/ui/forms/_form-selectgroup.scss +++ b/core/scss/ui/forms/_form-selectgroup.scss @@ -7,9 +7,9 @@ Select group --form-selectgroup-gap: #{$form-selectgroup-gap}; --form-selectgroup-icon-margin-x: #{$form-selectgroup-icon-margin-x}; display: inline-flex; - margin: 0; flex-wrap: wrap; gap: var(--form-selectgroup-gap); + margin: 0; .form-selectgroup-item { margin: 0; @@ -21,14 +21,14 @@ Select group } .form-selectgroup-item { - display: block; position: relative; + display: block; } .form-selectgroup-input { position: absolute; - top: 0; inset-inline-start: 0; + top: 0; z-index: -1; opacity: 0; } @@ -37,18 +37,18 @@ Select group position: relative; display: block; min-width: $input-height; - margin: 0; padding: $input-btn-padding-y $input-btn-padding-x; + margin: 0; font-size: $input-btn-font-size; line-height: $input-line-height; color: var(--secondary); - background: $form-check-input-bg; text-align: center; cursor: pointer; user-select: none; + background: $form-check-input-bg; border: var(--border-width) var(--border-style) $input-border-color; - @include border-radius(var(--border-radius)); box-shadow: $input-box-shadow; + @include border-radius(var(--border-radius)); @include transition(border-color $transition-time, background $transition-time, color $transition-time); .icon:only-child { @@ -64,8 +64,8 @@ Select group display: inline-block; width: $form-check-input-width; height: $form-check-input-width; - border: $form-check-input-border; vertical-align: middle; + border: $form-check-input-border; box-shadow: $form-check-input-box-shadow; .form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & { @@ -95,8 +95,8 @@ Select group .form-selectgroup-check-floated { position: absolute; - top: $input-btn-padding-y; inset-inline-end: $input-btn-padding-y; + top: $input-btn-padding-y; } .form-selectgroup-input:checked + .form-selectgroup-label { @@ -113,17 +113,14 @@ Select group box-shadow: $input-btn-focus-box-shadow; } -.form-selectgroup-label-content { -} - /** Alternate version of form select group */ .form-selectgroup-boxes { .form-selectgroup-label { - text-align: start; padding: $card-spacer-x $card-spacer-y; color: inherit; + text-align: start; } .form-selectgroup-input:checked { diff --git a/core/scss/ui/typo/_hr.scss b/core/scss/ui/typo/_hr.scss index cd76a7516..7ce983756 100644 --- a/core/scss/ui/typo/_hr.scss +++ b/core/scss/ui/typo/_hr.scss @@ -14,58 +14,58 @@ Hr text --hr-text-gap: #{$hr-text-gap}; display: flex; align-items: center; - margin: $hr-margin-y 0; - @include subheader; height: 1px; + margin: $hr-margin-y 0; + @include subheader(); - &:after, - &:before { + &::after, + &::before { flex: 1 1 auto; height: 1px; background-color: var(--border-color); } - &:before { - content: ''; + &::before { margin-inline-end: var(--hr-text-gap); + content: ''; } - &:after { - content: ''; + &::after { margin-inline-start: var(--hr-text-gap); + content: ''; } > *:first-child { - padding-inline-end: var(--hr-text-gap); padding-inline-start: 0; + padding-inline-end: var(--hr-text-gap); color: var(--secondary); } &.hr-text-left, &.hr-text-start { - &:before { + &::before { content: none; } - & > *:first-child { - padding-inline-end: var(--hr-text-gap); + > *:first-child { padding-inline-start: var(--hr-text-gap); + padding-inline-end: var(--hr-text-gap); } } &.hr-text-right, &.hr-text-end { - &:before { + &::before { content: ''; } - &:after { + &::after { content: none; } - & > *:first-child { - padding-inline-end: 0; + > *:first-child { padding-inline-start: var(--hr-text-gap); + padding-inline-end: 0; } } diff --git a/core/scss/utils/_background.scss b/core/scss/utils/_background.scss index 33bdfe05c..b8b2870c8 100644 --- a/core/scss/utils/_background.scss +++ b/core/scss/utils/_background.scss @@ -12,6 +12,6 @@ .bg-cover { background-repeat: no-repeat; - background-size: cover; background-position: center; + background-size: cover; } diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss index 83c2fd120..473bf0e83 100644 --- a/core/scss/utils/_colors.scss +++ b/core/scss/utils/_colors.scss @@ -52,7 +52,7 @@ &:focus { $hover-color: if(sass(color-contrast($value) == $color-contrast-light): shade-color($value, $link-shade-percentage); else: tint-color($value, $link-shade-percentage)); color: RGBA(#{to-rgb($hover-color)}, var(--link-opacity, 1)) if(sass($enable-important-utilities): !important; else: null); - text-decoration-color: RGBA(to-rgb($hover-color), var(--link-underline-opacity, 1)) if(sass($enable-important-utilities): !important; else: null); + text-decoration-color: rgba(to-rgb($hover-color), var(--link-underline-opacity, 1)) if(sass($enable-important-utilities): !important; else: null); } } } @@ -97,7 +97,7 @@ .bg-inverted { --bg-opacity: 1; - background-color: color-mix(in srgb, var(--bg-surface-inverted) calc(var(--bg-opacity) * 100%), transparent) !important; + background-color: color-mix(in sRGB, var(--bg-surface-inverted) calc(var(--bg-opacity) * 100%), transparent) !important; } .bg-surface { background-color: var(--bg-surface) !important; diff --git a/core/scss/vendor/_apexcharts.scss b/core/scss/vendor/_apexcharts.scss index 00bcb78da..899de4650 100644 --- a/core/scss/vendor/_apexcharts.scss +++ b/core/scss/vendor/_apexcharts.scss @@ -1,19 +1,19 @@ @use '../config' as *; .apexcharts-tooltip { + padding: 0.25rem !important; + font-size: $tooltip-font-size !important; color: $tooltip-color !important; background: $tooltip-bg !important; - font-size: $tooltip-font-size !important; - padding: 0.25rem !important; box-shadow: none !important; } .apexcharts-tooltip-title { - background: transparent !important; - border: 0 !important; + padding: 0.25rem 0.5rem !important; margin: 0 !important; font-weight: var(--font-weight-semibold); - padding: 0.25rem 0.5rem !important; + background: transparent !important; + border: 0 !important; } .apexcharts-tooltip-y-group { @@ -21,10 +21,10 @@ } .apexcharts-tooltip-series-group { - padding: 0 0.5rem 0 !important; + padding: 0 0.5rem !important; } -.apexcharts-tooltip-marker:before { +.apexcharts-tooltip-marker::before { font-size: 16px !important; } diff --git a/core/scss/vendor/_coloris.scss b/core/scss/vendor/_coloris.scss index a428ace09..396dbb9c3 100644 --- a/core/scss/vendor/_coloris.scss +++ b/core/scss/vendor/_coloris.scss @@ -1,8 +1,8 @@ @use '../config' as *; .clr-picker { - box-shadow: var(--shadow-dropdown); background-color: var(--bg-surface); + box-shadow: var(--shadow-dropdown); @include border-radius(var(--border-radius)); } @@ -13,8 +13,8 @@ input.clr-color { @include border-radius(var(--border-radius)); color: var(--body-color); - border-color: var(--border-color); background: transparent; + border-color: var(--border-color); &:focus { @include focus-ring(true); @@ -24,10 +24,10 @@ input.clr-color { .clr-swatches { button { @include border-radius(var(--border-radius)); - padding: 0 2px 4px 2px; + padding: 0 2px 4px; &:focus { - @include focus-ring; + @include focus-ring(); } } } @@ -37,14 +37,14 @@ input.clr-color { overflow: visible; button, - &:before, - &:after { + &::before, + &::after { @include border-radius(var(--border-radius)); } button { &:focus { - @include focus-ring; + @include focus-ring(); } } } @@ -53,18 +53,18 @@ input.clr-color { display: block; button { - width: 1.5rem; - height: 1.5rem; inset-inline-start: 6px; inset-inline-end: auto; + width: 1.5rem; + height: 1.5rem; @include border-radius(var(--border-radius)); - &:after { + &::after { box-shadow: inset 0 0 0 1px var(--border-color-translucent); } &:focus { - @include focus-ring; + @include focus-ring(); } } diff --git a/core/scss/vendor/_dropzone.scss b/core/scss/vendor/_dropzone.scss index 8b30c27de..8dfbb1495 100644 --- a/core/scss/vendor/_dropzone.scss +++ b/core/scss/vendor/_dropzone.scss @@ -1,14 +1,14 @@ @use '../config' as *; .dropzone { - border: var(--border-width) dashed var(--border-color) !important; - color: var(--secondary) !important; padding: 1rem !important; + color: var(--secondary) !important; + border: var(--border-width) dashed var(--border-color) !important; &.dz-drag-hover { - border: var(--border-width) dashed var(--primary); - background: color-transparent(var(--primary), 0.01); color: var(--primary); + background: color-transparent(var(--primary), 0.01); + border: var(--border-width) dashed var(--primary); .dz-message { opacity: 1; diff --git a/core/scss/vendor/_fullcalendar.scss b/core/scss/vendor/_fullcalendar.scss index b9ab18bf8..759fc2974 100644 --- a/core/scss/vendor/_fullcalendar.scss +++ b/core/scss/vendor/_fullcalendar.scss @@ -15,11 +15,11 @@ } .fc-daygrid-dot-event { - background-color: var(--fc-event-bg-color); - border: 1px solid var(--fc-event-border-color); - color: var(--fc-event-text-color); padding-top: 1px; padding-bottom: 1px; + color: var(--fc-event-text-color); + background-color: var(--fc-event-bg-color); + border: 1px solid var(--fc-event-border-color); .fc-event-title { font-weight: inherit; @@ -27,14 +27,14 @@ } .fc-col-header-cell { - background-color: var(--bg-surface-secondary); - color: var(--secondary); - text-transform: uppercase; - font-weight: var(--font-weight-medium); - font-size: var(--font-size-h5); padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; + font-size: var(--font-size-h5); + font-weight: var(--font-weight-medium); line-height: 1; + color: var(--secondary); + text-transform: uppercase; + background-color: var(--bg-surface-secondary); } .fc-event-time { @@ -50,8 +50,8 @@ } .fc-button { + font-weight: var(--font-weight-medium) !important; color: var(--body-color) !important; background-color: transparent !important; border-color: var(--border-color) !important; - font-weight: var(--font-weight-medium) !important; } diff --git a/core/scss/vendor/_jsvectormap.scss b/core/scss/vendor/_jsvectormap.scss index e26cd0843..af3688eb2 100644 --- a/core/scss/vendor/_jsvectormap.scss +++ b/core/scss/vendor/_jsvectormap.scss @@ -1,22 +1,22 @@ @use '../config' as *; .jvm-tooltip { - background: var(--bg-surface-inverted); - color: var(--text-inverted); font-family: inherit; font-size: $h5-font-size; + color: var(--text-inverted); + background: var(--bg-surface-inverted); box-shadow: $card-box-shadow; } .jvm-series-container .jvm-legend .jvm-legend-title { - border-bottom: 0; font-weight: var(--font-weight-medium); + border-bottom: 0; } .jvm-series-container .jvm-legend { + min-width: 8rem; background-color: var(--card-bg, var(--bg-surface)); border: var(--border-width) var(--border-style) var(--border-color); - min-width: 8rem; .jvm-legend-inner .jvm-legend-tick { display: flex; @@ -30,17 +30,17 @@ } .jvm-zoom-btn { - border: var(--border-width) var(--border-style) var(--border-color); - background: var(--card-bg, var(--bg-surface)); - color: var(--body-color); - padding: 0; display: flex; align-items: center; justify-content: center; - line-height: 1; width: 1.5rem; height: 1.5rem; + padding: 0; font-size: 1rem; + line-height: 1; + color: var(--body-color); + background: var(--card-bg, var(--bg-surface)); + border: var(--border-width) var(--border-style) var(--border-color); box-shadow: $card-box-shadow; &.jvm-zoomout { diff --git a/core/scss/vendor/_litepicker.scss b/core/scss/vendor/_litepicker.scss index be9261589..674c9c6a2 100644 --- a/core/scss/vendor/_litepicker.scss +++ b/core/scss/vendor/_litepicker.scss @@ -52,8 +52,8 @@ .container__days { .day-item { - cursor: pointer !important; padding: 0.5rem 0 !important; + cursor: pointer !important; @include transition(color $transition-time, background-color $transition-time, border-color $transition-time); } } @@ -62,8 +62,8 @@ box-shadow: $input-box-shadow; .container__months { - box-shadow: none; background-color: var(--bg-forms); + box-shadow: none; @include border-radius(calc(var(--border-radius) - 1px)); } } diff --git a/core/scss/vendor/_nouislider.scss b/core/scss/vendor/_nouislider.scss index 61ef7c474..1fbb7a776 100644 --- a/core/scss/vendor/_nouislider.scss +++ b/core/scss/vendor/_nouislider.scss @@ -1,11 +1,11 @@ @use '../config' as *; .noUi-target { + color: $form-range-thumb-bg; + background: none; border: 0; box-shadow: none; - background: none; @include border-radius(0); - color: $form-range-thumb-bg; } .noUi-horizontal { @@ -21,22 +21,22 @@ .noUi-handle { width: $form-range-thumb-width; height: $form-range-thumb-height; + background: currentColor; border: $form-range-thumb-border; + outline: 0; box-shadow: $form-range-thumb-box-shadow; @include border-radius($form-range-thumb-border-radius); - background: currentColor; - outline: 0; - &:before, - &:after { + &::before, + &::after { content: none; } .noUi-horizontal & { + inset-inline-end: calc($form-range-thumb-height * -0.5); + top: calc($form-range-thumb-height * -0.5); width: $form-range-thumb-width; height: $form-range-thumb-height; - top: calc($form-range-thumb-height * -0.5); - inset-inline-end: calc($form-range-thumb-height * -0.5); margin: 1px 1px 0 0; } diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss index 314aadaa5..28f968948 100644 --- a/core/scss/vendor/_tom-select.scss +++ b/core/scss/vendor/_tom-select.scss @@ -41,10 +41,10 @@ $input-border-width: 1px; } .ts-dropdown { - background: var(--bg-surface); - color: var(--body-color); - box-shadow: var(--shadow-dropdown); z-index: $zindex-dropdown; + color: var(--body-color); + background: var(--bg-surface); + box-shadow: var(--shadow-dropdown); .option { padding: $dropdown-item-padding-y $dropdown-item-padding-x; @@ -52,8 +52,8 @@ $input-border-width: 1px; // Override TomSelect's bootstrap5 preset which references --bs- vars not available in Tabler (#2600) .active { - background-color: var(--active-bg); color: var(--body-color); + background-color: var(--active-bg); } .active.create { @@ -61,8 +61,8 @@ $input-border-width: 1px; } .optgroup-header { - background: var(--bg-surface); color: var(--body-color); + background: var(--bg-surface); } } @@ -80,15 +80,15 @@ $input-border-width: 1px; .ts-wrapper.multi, .ts-wrapper.multi.disabled { .ts-control > div { + color: var(--body-color); background: var(--bg-surface-secondary); border: 1px solid var(--border-color); - color: var(--body-color); } } .ts-wrapper.disabled .ts-control { - opacity: 1; background-color: var(--secondary-bg); + opacity: 1; & > div.item { color: var(--gray-500); diff --git a/core/scss/vendor/_wysiwyg.scss b/core/scss/vendor/_wysiwyg.scss index 8d740d229..cfcb03b6a 100644 --- a/core/scss/vendor/_wysiwyg.scss +++ b/core/scss/vendor/_wysiwyg.scss @@ -1,13 +1,13 @@ @use '../config' as *; .tox-hugerte { + font-family: var(--font-sans-serif) !important; border: var(--border-width) var(--border-style) var(--border-color) !important; @include border-radius($border-radius); - font-family: var(--font-sans-serif) !important; } .tox-toolbar__group { - padding: 0 0.5rem 0; + padding: 0 0.5rem; } .tox .tox-toolbar__primary { @@ -16,9 +16,9 @@ .tox:not(.tox-hugerte-inline) { .tox-editor-header { + padding: 0 !important; border-bottom: var(--border-width) var(--border-style) var(--border-color) !important; box-shadow: none !important; - padding: 0 !important; } } diff --git a/package.json b/package.json index f629e182c..41b264679 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,9 @@ "publish": "changeset publish", "reformat-md": "tsx .build/reformat-mdx.ts", "lint": "pnpm run lint-md && pnpm run lint-prettier && pnpm run lint-scss-vars", - "lint:fix": "pnpm run lint-md-fix && pnpm run format-prettier", + "lint:fix": "(pnpm run lint-md-fix || true) && (pnpm run lint:scss:fix || true) && (pnpm run format-prettier || true)", + "lint:scss": "pnpm --filter @tabler/core lint:scss", + "lint:scss:fix": "pnpm --filter @tabler/core lint:scss:fix", "lint-md": "markdownlint --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"", "lint-md-fix": "markdownlint --fix --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"", "lint-prettier": "prettier --check \"core/scss/**/*.scss\" \"core/js/**/*.{js,ts}\" \"core/.build/**/*.{ts,mts,mjs}\" \".build/**/*.ts\" \"preview/scss/**/*.scss\" \"preview/js/**/*.{js,ts}\" \"{preview,docs,shared}/**/*.astro\" \"{preview,docs}/**/*.{mjs,mts}\" \"shared/**/*.{js,mjs,mts,ts}\" --cache", @@ -34,6 +36,7 @@ "devDependencies": { "@changesets/changelog-github": "^0.7.0", "@changesets/cli": "^2.31.1", + "@stylistic/stylelint-config": "^2.0.0", "adm-zip": "^0.6.0", "autoprefixer": "^10.5.4", "bundlewatch": "^0.4.2", @@ -53,6 +56,8 @@ "rtlcss": "^4.3.0", "sass": "1.102.0", "shelljs": "^0.10.0", + "stylelint": "^16.26.1", + "stylelint-config-twbs-bootstrap": "^16.1.0", "terser": "^5.49.0", "tsx": "^4.23.1", "turbo": "2.10.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8dff49d9..33c5123a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,6 +21,9 @@ importers: '@changesets/cli': specifier: ^2.31.1 version: 2.31.1(@types/node@26.1.1) + '@stylistic/stylelint-config': + specifier: ^2.0.0 + version: 2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) adm-zip: specifier: ^0.6.0 version: 0.6.0 @@ -78,6 +81,12 @@ importers: shelljs: specifier: ^0.10.0 version: 0.10.0 + stylelint: + specifier: ^16.26.1 + version: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + stylelint-config-twbs-bootstrap: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) terser: specifier: ^5.49.0 version: 5.49.0 @@ -621,6 +630,12 @@ packages: cpu: [x64] os: [win32] + '@cacheable/memory@2.2.0': + resolution: {integrity: sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==} + + '@cacheable/utils@2.5.0': + resolution: {integrity: sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==} + '@capsizecss/unpack@4.0.1': resolution: {integrity: sha512-CuNiSqg7+e1cO/GjffyMOm5Tt2jUF9CWHHnvQ/UkqvtkGfHdgwEC0wpmq7fkN3gxwpRnrAN0WzO3vREKmNolMQ==} engines: {node: '>=18'} @@ -694,6 +709,47 @@ packages: resolution: {integrity: sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==} engines: {node: '>= 20.12.0'} + '@csstools/css-parser-algorithms@3.0.5': + resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/css-syntax-patches-for-csstree@1.1.7': + resolution: {integrity: sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==} + peerDependencies: + css-tree: ^3.2.1 + peerDependenciesMeta: + css-tree: + optional: true + + '@csstools/css-tokenizer@3.0.4': + resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==} + engines: {node: '>=18'} + + '@csstools/media-query-list-parser@3.0.1': + resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.1 + '@csstools/css-tokenizer': ^3.0.1 + + '@csstools/media-query-list-parser@4.0.3': + resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/selector-specificity@5.0.0': + resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^7.0.0 + + '@dual-bundle/import-meta-resolve@4.2.1': + resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==} + '@emmetio/abbreviation@2.3.3': resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} @@ -1266,6 +1322,15 @@ packages: '@jridgewell/trace-mapping@0.3.31': resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} + '@keyv/bigmap@1.3.1': + resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==} + engines: {node: '>= 18'} + peerDependencies: + keyv: ^5.6.0 + + '@keyv/serialize@1.1.1': + resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==} + '@manypkg/find-root@1.1.0': resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} @@ -1714,6 +1779,18 @@ packages: '@standard-schema/spec@1.1.0': resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} + '@stylistic/stylelint-config@2.0.0': + resolution: {integrity: sha512-8J4YAxggy2Nzkb8KJIOLbtMXTPZ5gpKVmyhiiuKEUgCl9XFND5lM0e/ZZBMGEYZ68h5qcsS/jgg1wh235erRAw==} + engines: {node: ^18.12 || >=20.9} + peerDependencies: + stylelint: ^16.8.0 + + '@stylistic/stylelint-plugin@3.1.3': + resolution: {integrity: sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==} + engines: {node: ^18.12 || >=20.9} + peerDependencies: + stylelint: ^16.8.0 + '@swc/helpers@0.2.14': resolution: {integrity: sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==} @@ -2091,6 +2168,10 @@ packages: resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} engines: {node: '>=12'} + astral-regex@2.0.0: + resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==} + engines: {node: '>=8'} + astring@1.9.0: resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==} hasBin: true @@ -2141,6 +2222,9 @@ packages: balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + balanced-match@2.0.0: + resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==} + balanced-match@4.0.4: resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==} engines: {node: 18 || 20 || >=22} @@ -2189,10 +2273,17 @@ packages: resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==} engines: {node: '>= 0.8'} + cacheable@2.5.0: + resolution: {integrity: sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==} + call-bind-apply-helpers@1.0.2: resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==} engines: {node: '>= 0.4'} + callsites@3.1.0: + resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} + engines: {node: '>=6'} + caniuse-lite@1.0.30001806: resolution: {integrity: sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==} @@ -2276,6 +2367,9 @@ packages: color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + colord@2.9.3: + resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} + combined-stream@1.0.8: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} @@ -2341,6 +2435,15 @@ packages: core-js@3.49.0: resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==} + cosmiconfig@9.0.2: + resolution: {integrity: sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==} + engines: {node: '>=14'} + peerDependencies: + typescript: '>=4.9.5' + peerDependenciesMeta: + typescript: + optional: true + countup.js@2.10.1: resolution: {integrity: sha512-UHW/BsPDgVZfN919D4iu2HPv+jJxZUuaR3EhT0ScFZaD446GiQtkMTgOnOyJXdA2AewdlyUk9UvERlTHTbVpcw==} @@ -2360,6 +2463,10 @@ packages: crossws@0.3.5: resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==} + css-functions-list@3.3.3: + resolution: {integrity: sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==} + engines: {node: '>=12'} + css-select@5.2.2: resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==} @@ -2375,6 +2482,11 @@ packages: resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==} engines: {node: '>= 6'} + cssesc@3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + csso@5.0.5: resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} @@ -2491,6 +2603,9 @@ packages: emoji-regex@10.6.0: resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==} + emoji-regex@8.0.0: + resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} + end-of-stream@1.4.5: resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==} @@ -2506,6 +2621,10 @@ packages: resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} engines: {node: '>=0.12'} + env-paths@2.2.1: + resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==} + engines: {node: '>=6'} + error-ex@1.3.4: resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==} @@ -2616,6 +2735,10 @@ packages: fast-wrap-ansi@0.2.2: resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==} + fastest-levenshtein@1.0.16: + resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} + engines: {node: '>= 4.9.1'} + fastq@1.20.1: resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==} @@ -2628,6 +2751,9 @@ packages: picomatch: optional: true + file-entry-cache@11.1.5: + resolution: {integrity: sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==} + fill-range@7.1.1: resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} engines: {node: '>=8'} @@ -2641,9 +2767,15 @@ packages: resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==} engines: {node: '>=8'} + flat-cache@6.1.23: + resolution: {integrity: sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==} + flatpickr@4.6.13: resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==} + flatted@3.4.4: + resolution: {integrity: sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==} + flattie@1.1.1: resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==} engines: {node: '>=8'} @@ -2761,10 +2893,21 @@ packages: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me + global-modules@2.0.0: + resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==} + engines: {node: '>=6'} + + global-prefix@3.0.0: + resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==} + engines: {node: '>=6'} + globby@11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} + globjoin@0.1.4: + resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==} + good-listener@1.2.2: resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==} @@ -2798,6 +2941,10 @@ packages: resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} engines: {node: '>= 0.4'} + hashery@1.5.1: + resolution: {integrity: sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==} + engines: {node: '>=20'} + hasown@2.0.4: resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==} engines: {node: '>= 0.4'} @@ -2838,6 +2985,12 @@ packages: hastscript@9.0.1: resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==} + hookified@1.15.1: + resolution: {integrity: sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==} + + hookified@2.2.0: + resolution: {integrity: sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==} + hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} @@ -2847,6 +3000,10 @@ packages: html-escaper@3.0.3: resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} + html-tags@3.3.1: + resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} + engines: {node: '>=8'} + html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} @@ -2886,6 +3043,14 @@ packages: immutable@5.1.9: resolution: {integrity: sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==} + import-fresh@3.3.1: + resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==} + engines: {node: '>=6'} + + imurmurhash@0.1.4: + resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} + engines: {node: '>=0.8.19'} + inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. @@ -2939,6 +3104,10 @@ packages: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} + is-fullwidth-code-point@3.0.0: + resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} + engines: {node: '>=8'} + is-glob@4.0.3: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} @@ -2954,6 +3123,10 @@ packages: resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} engines: {node: '>=12'} + is-plain-object@5.0.0: + resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} + engines: {node: '>=0.10.0'} + is-stream@1.1.0: resolution: {integrity: sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==} engines: {node: '>=0.10.0'} @@ -3057,10 +3230,20 @@ packages: resolution: {integrity: sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==} hasBin: true + keyv@5.6.0: + resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==} + + kind-of@6.0.3: + resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} + engines: {node: '>=0.10.0'} + kleur@4.1.5: resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} engines: {node: '>=6'} + known-css-properties@0.37.0: + resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==} + lightningcss-android-arm64@1.32.0: resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==} engines: {node: '>= 12.0.0'} @@ -3161,6 +3344,9 @@ packages: lodash.startcase@4.4.0: resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==} + lodash.truncate@4.4.2: + resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==} + longest-streak@3.1.0: resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==} @@ -3211,6 +3397,9 @@ packages: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} + mathml-tag-names@2.1.3: + resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==} + mdast-util-definitions@6.0.0: resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==} @@ -3271,6 +3460,10 @@ packages: mdurl@2.0.0: resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==} + meow@13.2.0: + resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==} + engines: {node: '>=18'} + merge-stream@2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} @@ -3590,6 +3783,10 @@ packages: package-manager-detector@1.7.0: resolution: {integrity: sha512-xg1eHpwYL/D/HEdWw2goFZP6vV0FH7W+PZ5rFkGjdIDLtxq7EkzBUeT3m+lndYCt8wKbmofUu1MUdMCXkCk9ZQ==} + parent-module@1.0.1: + resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} + engines: {node: '>=6'} + parse-entities@4.0.2: resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==} @@ -3676,17 +3873,42 @@ packages: engines: {node: '>=18.12'} hasBin: true + postcss-media-query-parser@0.2.3: + resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} + postcss-prefix-custom-properties@0.1.0: resolution: {integrity: sha512-sAKQSRw+KTl9G549Q9awV/ra06fOZNEIVIIRTwiSTbvkV1t8z7WPqNQ5XBbxF1fV2mp0yQFObavc5J/GxP0a6g==} peerDependencies: postcss: ^8.4.0 + postcss-resolve-nested-selector@0.1.6: + resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==} + + postcss-safe-parser@7.0.1: + resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==} + engines: {node: '>=18.0'} + peerDependencies: + postcss: ^8.4.31 + postcss-scss@4.0.9: resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.4.29 + postcss-selector-parser@6.1.4: + resolution: {integrity: sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==} + engines: {node: '>=4'} + + postcss-selector-parser@7.1.4: + resolution: {integrity: sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==} + engines: {node: '>=4'} + + postcss-sorting@8.0.2: + resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==} + peerDependencies: + postcss: ^8.4.20 + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -3751,6 +3973,10 @@ packages: resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==} engines: {node: '>=6'} + qified@0.10.1: + resolution: {integrity: sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==} + engines: {node: '>=20'} + quansync@0.2.11: resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==} @@ -3867,6 +4093,10 @@ packages: resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} engines: {node: '>=0.10.0'} + resolve-from@4.0.0: + resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} + engines: {node: '>=4'} + resolve-from@5.0.0: resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==} engines: {node: '>=8'} @@ -4051,6 +4281,10 @@ packages: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} + slice-ansi@4.0.0: + resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==} + engines: {node: '>=10'} + smol-toml@1.6.1: resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==} engines: {node: '>= 18'} @@ -4110,6 +4344,10 @@ packages: string-natural-compare@2.0.3: resolution: {integrity: sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ==} + string-width@4.2.3: + resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} + engines: {node: '>=8'} + string-width@7.2.0: resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==} engines: {node: '>=18'} @@ -4145,6 +4383,9 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + style-search@0.1.0: + resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} + style-to-js@1.1.21: resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==} @@ -4164,6 +4405,65 @@ packages: babel-plugin-macros: optional: true + stylelint-config-recess-order@5.1.1: + resolution: {integrity: sha512-eDAHWVBelzDbMbdMj15pSw0Ycykv5eLeriJdbGCp0zd44yvhgZLI+wyVHegzXp5NrstxTPSxl0fuOVKdMm0XLA==} + peerDependencies: + stylelint: '>=16' + + stylelint-config-recommended-scss@14.1.0: + resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==} + engines: {node: '>=18.12.0'} + peerDependencies: + postcss: ^8.3.3 + stylelint: ^16.6.1 + peerDependenciesMeta: + postcss: + optional: true + + stylelint-config-recommended@14.0.1: + resolution: {integrity: sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==} + engines: {node: '>=18.12.0'} + peerDependencies: + stylelint: ^16.1.0 + + stylelint-config-standard-scss@14.0.0: + resolution: {integrity: sha512-6Pa26D9mHyi4LauJ83ls3ELqCglU6VfCXchovbEqQUiEkezvKdv6VgsIoMy58i00c854wVmOw0k8W5FTpuaVqg==} + engines: {node: '>=18.12.0'} + peerDependencies: + postcss: ^8.3.3 + stylelint: ^16.11.0 + peerDependenciesMeta: + postcss: + optional: true + + stylelint-config-standard@36.0.1: + resolution: {integrity: sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==} + engines: {node: '>=18.12.0'} + peerDependencies: + stylelint: ^16.1.0 + + stylelint-config-twbs-bootstrap@16.1.0: + resolution: {integrity: sha512-jp+/lHxOo5r21g05+qC/nbFueb7OH5Pub5SdWeBj7T0HVGuHDjB4NoNlWklmz1GsqNhAtFms6ZCnJsAgc8XOmQ==} + engines: {node: '>=18.12.0'} + peerDependencies: + stylelint: ^16.11.0 + + stylelint-order@6.0.4: + resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==} + peerDependencies: + stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1 + + stylelint-scss@6.14.0: + resolution: {integrity: sha512-ZKmHMZolxeuYsnB+PCYrTpFce0/QWX9i9gh0hPXzp73WjuIMqUpzdQaBCrKoLWh6XtCFSaNDErkMPqdjy1/8aA==} + engines: {node: '>=18.12.0'} + peerDependencies: + stylelint: ^16.8.2 + + stylelint@16.26.1: + resolution: {integrity: sha512-v20V59/crfc8sVTAtge0mdafI3AdnzQ2KsWe6v523L4OA1bJO02S7MO2oyXDCS6iWb9ckIPnqAFVItqSBQr7jw==} + engines: {node: '>=18.12.0'} + hasBin: true + suf-log@2.5.3: resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==} @@ -4179,15 +4479,26 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} + supports-hyperlinks@3.2.0: + resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==} + engines: {node: '>=14.18'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + svg-tags@1.0.0: + resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} + svgo@4.0.2: resolution: {integrity: sha512-ekx94z1rRc5LDi6oSUaeRnYhd0UOJxdtQCL2rF8xpWxD3TPAsISWOrxezqGovqS38GRZOdpDfvQe3ts6F7nsng==} engines: {node: '>=16'} hasBin: true + table@6.9.0: + resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==} + engines: {node: '>=10.0.0'} + term-size@2.2.1: resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==} engines: {node: '>=8'} @@ -4422,6 +4733,9 @@ packages: url-polyfill@1.1.14: resolution: {integrity: sha512-p4f3TTAG6ADVF3mwbXw7hGw+QJyw5CnNGvYh5fCuQQZIiuKUswqcznyV3pGDP9j0TSmC4UvRKm8kl1QsX1diiQ==} + util-deprecate@1.0.2: + resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + validate-npm-package-license@3.0.4: resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} @@ -4701,6 +5015,10 @@ packages: wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + write-file-atomic@5.0.1: + resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + ws@8.21.0: resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==} engines: {node: '>=10.0.0'} @@ -5140,6 +5458,18 @@ snapshots: '@bruits/satteri-win32-x64-msvc@0.9.5': optional: true + '@cacheable/memory@2.2.0': + dependencies: + '@cacheable/utils': 2.5.0 + '@keyv/bigmap': 1.3.1(keyv@5.6.0) + hookified: 1.15.1 + keyv: 5.6.0 + + '@cacheable/utils@2.5.0': + dependencies: + hashery: 1.5.1 + keyv: 5.6.0 + '@capsizecss/unpack@4.0.1': dependencies: fontkitten: 1.0.3 @@ -5314,6 +5644,32 @@ snapshots: fast-wrap-ansi: 0.2.2 sisteransi: 1.0.5 + '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/css-syntax-patches-for-csstree@1.1.7(css-tree@3.2.1)': + optionalDependencies: + css-tree: 3.2.1 + + '@csstools/css-tokenizer@3.0.4': {} + + '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.4)': + dependencies: + postcss-selector-parser: 7.1.4 + + '@dual-bundle/import-meta-resolve@4.2.1': {} + '@emmetio/abbreviation@2.3.3': dependencies: '@emmetio/scanner': 1.0.4 @@ -5701,6 +6057,14 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 + '@keyv/bigmap@1.3.1(keyv@5.6.0)': + dependencies: + hashery: 1.5.1 + hookified: 1.15.1 + keyv: 5.6.0 + + '@keyv/serialize@1.1.1': {} + '@manypkg/find-root@1.1.0': dependencies: '@babel/runtime': 7.29.7 @@ -6035,6 +6399,23 @@ snapshots: '@standard-schema/spec@1.1.0': {} + '@stylistic/stylelint-config@2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))': + dependencies: + '@stylistic/stylelint-plugin': 3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + + '@stylistic/stylelint-plugin@3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + is-plain-object: 5.0.0 + postcss: 8.5.23 + postcss-selector-parser: 6.1.4 + postcss-value-parser: 4.2.0 + style-search: 0.1.0 + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + '@swc/helpers@0.2.14': {} '@swc/helpers@0.5.15': @@ -6378,6 +6759,8 @@ snapshots: assertion-error@2.0.1: {} + astral-regex@2.0.0: {} + astring@1.9.0: {} astro@7.1.5(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@26.1.1)(sass@1.102.0)(terser@5.49.0)(tsx@4.23.1)(yaml@2.9.0): @@ -6591,6 +6974,8 @@ snapshots: balanced-match@1.0.2: {} + balanced-match@2.0.0: {} + balanced-match@4.0.4: {} baseline-browser-mapping@2.11.6: {} @@ -6643,11 +7028,21 @@ snapshots: bytes@3.1.2: {} + cacheable@2.5.0: + dependencies: + '@cacheable/memory': 2.2.0 + '@cacheable/utils': 2.5.0 + hookified: 1.15.1 + keyv: 5.6.0 + qified: 0.10.1 + call-bind-apply-helpers@1.0.2: dependencies: es-errors: 1.3.0 function-bind: 1.1.2 + callsites@3.1.0: {} + caniuse-lite@1.0.30001806: {} ccount@2.0.1: {} @@ -6727,6 +7122,8 @@ snapshots: color-name@1.1.4: {} + colord@2.9.3: {} + combined-stream@1.0.8: dependencies: delayed-stream: 1.0.0 @@ -6775,6 +7172,15 @@ snapshots: core-js@3.49.0: {} + cosmiconfig@9.0.2(typescript@7.0.2): + dependencies: + env-paths: 2.2.1 + import-fresh: 3.3.1 + js-yaml: 4.3.0 + parse-json: 5.2.0 + optionalDependencies: + typescript: 7.0.2 + countup.js@2.10.1: {} cross-env@10.1.0: @@ -6800,6 +7206,8 @@ snapshots: dependencies: uncrypto: 0.1.3 + css-functions-list@3.3.3: {} + css-select@5.2.2: dependencies: boolbase: 1.0.0 @@ -6820,6 +7228,8 @@ snapshots: css-what@6.2.2: {} + cssesc@3.0.0: {} + csso@5.0.5: dependencies: css-tree: 2.2.1 @@ -6927,6 +7337,8 @@ snapshots: emoji-regex@10.6.0: {} + emoji-regex@8.0.0: {} + end-of-stream@1.4.5: dependencies: once: 1.4.0 @@ -6940,6 +7352,8 @@ snapshots: entities@6.0.1: {} + env-paths@2.2.1: {} + error-ex@1.3.4: dependencies: is-arrayish: 0.2.1 @@ -7097,6 +7511,8 @@ snapshots: dependencies: fast-string-width: 3.0.2 + fastest-levenshtein@1.0.16: {} + fastq@1.20.1: dependencies: reusify: 1.1.0 @@ -7105,6 +7521,10 @@ snapshots: optionalDependencies: picomatch: 4.0.5 + file-entry-cache@11.1.5: + dependencies: + flat-cache: 6.1.23 + fill-range@7.1.1: dependencies: to-regex-range: 5.0.1 @@ -7123,8 +7543,16 @@ snapshots: locate-path: 5.0.0 path-exists: 4.0.0 + flat-cache@6.1.23: + dependencies: + cacheable: 2.5.0 + flatted: 3.4.4 + hookified: 1.15.1 + flatpickr@4.6.13: {} + flatted@3.4.4: {} + flattie@1.1.1: {} follow-redirects@1.16.0(debug@4.4.3(supports-color@5.5.0)): @@ -7249,6 +7677,16 @@ snapshots: once: 1.4.0 path-is-absolute: 1.0.1 + global-modules@2.0.0: + dependencies: + global-prefix: 3.0.0 + + global-prefix@3.0.0: + dependencies: + ini: 1.3.8 + kind-of: 6.0.3 + which: 1.3.1 + globby@11.1.0: dependencies: array-union: 2.1.0 @@ -7258,6 +7696,8 @@ snapshots: merge2: 1.4.1 slash: 3.0.0 + globjoin@0.1.4: {} + good-listener@1.2.2: dependencies: delegate: 3.2.0 @@ -7292,6 +7732,10 @@ snapshots: dependencies: has-symbols: 1.1.0 + hashery@1.5.1: + dependencies: + hookified: 1.15.1 + hasown@2.0.4: dependencies: function-bind: 1.1.2 @@ -7424,12 +7868,18 @@ snapshots: property-information: 7.2.0 space-separated-tokens: 2.0.2 + hookified@1.15.1: {} + + hookified@2.2.0: {} + hosted-git-info@2.8.9: {} html-escaper@2.0.2: {} html-escaper@3.0.3: {} + html-tags@3.3.1: {} + html-void-elements@3.0.0: {} http-cache-semantics@4.2.0: {} @@ -7456,6 +7906,13 @@ snapshots: immutable@5.1.9: {} + import-fresh@3.3.1: + dependencies: + parent-module: 1.0.1 + resolve-from: 4.0.0 + + imurmurhash@0.1.4: {} + inflight@1.0.6: dependencies: once: 1.4.0 @@ -7496,6 +7953,8 @@ snapshots: is-extglob@2.1.1: {} + is-fullwidth-code-point@3.0.0: {} + is-glob@4.0.3: dependencies: is-extglob: 2.1.1 @@ -7506,6 +7965,8 @@ snapshots: is-plain-obj@4.1.0: {} + is-plain-object@5.0.0: {} + is-stream@1.1.0: {} is-stream@2.0.1: {} @@ -7597,8 +8058,16 @@ snapshots: dependencies: commander: 8.3.0 + keyv@5.6.0: + dependencies: + '@keyv/serialize': 1.1.1 + + kind-of@6.0.3: {} + kleur@4.1.5: {} + known-css-properties@0.37.0: {} + lightningcss-android-arm64@1.32.0: optional: true @@ -7670,6 +8139,8 @@ snapshots: lodash.startcase@4.4.0: {} + lodash.truncate@4.4.2: {} + longest-streak@3.1.0: {} lru-cache@11.5.1: {} @@ -7744,6 +8215,8 @@ snapshots: math-intrinsics@1.1.0: {} + mathml-tag-names@2.1.3: {} + mdast-util-definitions@6.0.0: dependencies: '@types/mdast': 4.0.4 @@ -7919,6 +8392,8 @@ snapshots: mdurl@2.0.0: {} + meow@13.2.0: {} + merge-stream@2.0.0: {} merge2@1.4.1: {} @@ -8391,6 +8866,10 @@ snapshots: package-manager-detector@1.7.0: {} + parent-module@1.0.1: + dependencies: + callsites: 3.1.0 + parse-entities@4.0.2: dependencies: '@types/unist': 2.0.11 @@ -8472,15 +8951,37 @@ snapshots: pnpm@10.34.4: {} + postcss-media-query-parser@0.2.3: {} + postcss-prefix-custom-properties@0.1.0(postcss@8.5.23): dependencies: postcss: 8.5.23 postcss-value-parser: 4.2.0 + postcss-resolve-nested-selector@0.1.6: {} + + postcss-safe-parser@7.0.1(postcss@8.5.23): + dependencies: + postcss: 8.5.23 + postcss-scss@4.0.9(postcss@8.5.23): dependencies: postcss: 8.5.23 + postcss-selector-parser@6.1.4: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + + postcss-selector-parser@7.1.4: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + + postcss-sorting@8.0.2(postcss@8.5.23): + dependencies: + postcss: 8.5.23 + postcss-value-parser@4.2.0: {} postcss@8.4.31: @@ -8535,6 +9036,10 @@ snapshots: punycode.js@2.3.1: {} + qified@0.10.1: + dependencies: + hookified: 2.2.0 + quansync@0.2.11: {} queue-microtask@1.2.3: {} @@ -8699,6 +9204,8 @@ snapshots: require-from-string@2.0.2: {} + resolve-from@4.0.0: {} + resolve-from@5.0.0: {} resolve-pkg-maps@1.0.0: {} @@ -8985,6 +9492,12 @@ snapshots: slash@3.0.0: {} + slice-ansi@4.0.0: + dependencies: + ansi-styles: 4.3.0 + astral-regex: 2.0.0 + is-fullwidth-code-point: 3.0.0 + smol-toml@1.6.1: {} smol-toml@1.7.1: {} @@ -9035,6 +9548,12 @@ snapshots: string-natural-compare@2.0.3: {} + string-width@4.2.3: + dependencies: + emoji-regex: 8.0.0 + is-fullwidth-code-point: 3.0.0 + strip-ansi: 6.0.1 + string-width@7.2.0: dependencies: emoji-regex: 10.6.0 @@ -9067,6 +9586,8 @@ snapshots: strip-json-comments@3.1.1: {} + style-search@0.1.0: {} + style-to-js@1.1.21: dependencies: style-to-object: 1.0.14 @@ -9082,6 +9603,112 @@ snapshots: optionalDependencies: '@babel/core': 7.29.7(supports-color@10.2.2) + stylelint-config-recess-order@5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)): + dependencies: + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + stylelint-order: 6.0.4(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + + stylelint-config-recommended-scss@14.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)): + dependencies: + postcss-scss: 4.0.9(postcss@8.5.23) + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + stylelint-config-recommended: 14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + stylelint-scss: 6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + optionalDependencies: + postcss: 8.5.23 + + stylelint-config-recommended@14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)): + dependencies: + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + + stylelint-config-standard-scss@14.0.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)): + dependencies: + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + stylelint-config-recommended-scss: 14.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + stylelint-config-standard: 36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + optionalDependencies: + postcss: 8.5.23 + + stylelint-config-standard@36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)): + dependencies: + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + stylelint-config-recommended: 14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + + stylelint-config-twbs-bootstrap@16.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)): + dependencies: + '@stylistic/stylelint-config': 2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + '@stylistic/stylelint-plugin': 3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + stylelint-config-recess-order: 5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + stylelint-config-standard: 36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + stylelint-config-standard-scss: 14.0.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + stylelint-scss: 6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)) + transitivePeerDependencies: + - postcss + + stylelint-order@6.0.4(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)): + dependencies: + postcss: 8.5.23 + postcss-sorting: 8.0.2(postcss@8.5.23) + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + + stylelint-scss@6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)): + dependencies: + css-tree: 3.2.1 + is-plain-object: 5.0.0 + known-css-properties: 0.37.0 + mdn-data: 2.27.1 + postcss-media-query-parser: 0.2.3 + postcss-resolve-nested-selector: 0.1.6 + postcss-selector-parser: 7.1.4 + postcss-value-parser: 4.2.0 + stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2) + + stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2): + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-syntax-patches-for-csstree': 1.1.7(css-tree@3.2.1) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.4) + '@dual-bundle/import-meta-resolve': 4.2.1 + balanced-match: 2.0.0 + colord: 2.9.3 + cosmiconfig: 9.0.2(typescript@7.0.2) + css-functions-list: 3.3.3 + css-tree: 3.2.1 + debug: 4.4.3(supports-color@5.5.0) + fast-glob: 3.3.3 + fastest-levenshtein: 1.0.16 + file-entry-cache: 11.1.5 + global-modules: 2.0.0 + globby: 11.1.0 + globjoin: 0.1.4 + html-tags: 3.3.1 + ignore: 7.0.6 + imurmurhash: 0.1.4 + is-plain-object: 5.0.0 + known-css-properties: 0.37.0 + mathml-tag-names: 2.1.3 + meow: 13.2.0 + micromatch: 4.0.8 + normalize-path: 3.0.0 + picocolors: 1.1.1 + postcss: 8.5.23 + postcss-resolve-nested-selector: 0.1.6 + postcss-safe-parser: 7.0.1(postcss@8.5.23) + postcss-selector-parser: 7.1.4 + postcss-value-parser: 4.2.0 + resolve-from: 5.0.0 + string-width: 4.2.3 + supports-hyperlinks: 3.2.0 + svg-tags: 1.0.0 + table: 6.9.0 + write-file-atomic: 5.0.1 + transitivePeerDependencies: + - supports-color + - typescript + suf-log@2.5.3: dependencies: s.color: 0.0.15 @@ -9096,8 +9723,15 @@ snapshots: dependencies: has-flag: 4.0.0 + supports-hyperlinks@3.2.0: + dependencies: + has-flag: 4.0.0 + supports-color: 7.2.0 + supports-preserve-symlinks-flag@1.0.0: {} + svg-tags@1.0.0: {} + svgo@4.0.2: dependencies: commander: 11.1.0 @@ -9108,6 +9742,14 @@ snapshots: picocolors: 1.1.1 sax: 1.6.0 + table@6.9.0: + dependencies: + ajv: 8.20.0 + lodash.truncate: 4.4.2 + slice-ansi: 4.0.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + term-size@2.2.1: {} terser@5.49.0: @@ -9306,6 +9948,8 @@ snapshots: url-polyfill@1.1.14: {} + util-deprecate@1.0.2: {} + validate-npm-package-license@3.0.4: dependencies: spdx-correct: 3.2.0 @@ -9527,6 +10171,11 @@ snapshots: wrappy@1.0.2: {} + write-file-atomic@5.0.1: + dependencies: + imurmurhash: 0.1.4 + signal-exit: 4.1.0 + ws@8.21.0: {} xxhash-wasm@1.1.0: {} diff --git a/stylelint.config.mjs b/stylelint.config.mjs new file mode 100644 index 000000000..7abb2d9b7 --- /dev/null +++ b/stylelint.config.mjs @@ -0,0 +1,52 @@ +// Keep this dependency on the same major as stylelint-config-twbs-bootstrap uses +// (currently @stylistic/stylelint-config@^2 / @stylistic/stylelint-plugin@^3). A newer +// major lists rule names the plugin twbs loads does not register, and stylelint then +// fails every file with "Unknown rule @stylistic/…". +import stylistic from '@stylistic/stylelint-config' + +// Prettier already owns SCSS formatting in this repo (`pnpm lint-prettier`), so every +// purely stylistic rule that stylelint-config-twbs-bootstrap pulls in through @stylistic +// is switched off — otherwise the two tools fight over quotes, indentation and zeros. +const prettierOwned = Object.fromEntries(Object.keys(stylistic.rules).map((rule) => [rule, null])) + +export default { + extends: ['stylelint-config-twbs-bootstrap'], + ignoreFiles: [ + '**/node_modules/**', + '**/dist/**', + // sass-true fixtures spell out the exact CSS a mixin must emit, so any autofix here + // (property order, `!important`, hex length) rewrites the assertion and breaks + // `pnpm test:scss`. Bootstrap excludes its own `**/tests/` for the same reason. + 'core/scss/tests/**', + ], + rules: { + ...prettierOwned, + 'scss/dollar-variable-colon-space-after': null, + 'selector-no-qualifying-type': null, + 'scss/at-function-named-arguments': null, + 'import-notation': null, + 'value-keyword-case': ['lower', { ignoreProperties: ['/^\\$font-family/', '/^--.*font/'], camelCaseSvgKeywords: true }], + 'declaration-no-important': null, + }, + overrides: [ + { + // Copied from upstream Bootstrap, which lints them under its own scss/vendor/ exclusion. + // Their declaration order is upstream's and is asserted by scss/tests — reordering it + // creates sync noise on every Bootstrap bump for no gain. + files: ['core/scss/bootstrap/**/*.scss', 'core/scss/mixins/bootstrap/**/*.scss'], + rules: { 'scss/operator-no-unspaced': null, 'order/properties-order': null }, + }, + { + // Overrides for third-party widgets — their class names and specificity aren't ours. + files: ['core/scss/vendor/**/*.scss'], + rules: { + 'declaration-no-important': null, + 'selector-class-pattern': null, + 'selector-max-class': null, + 'selector-max-compound-selectors': null, + 'custom-property-no-missing-var-function': null, + 'scss/selector-no-redundant-nesting-selector': null, + }, + }, + ], +} From 324b0fbf0e5bf24f68e2b1d5939f38dda6990320 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Thu, 6 Aug 2026 12:47:48 +0200 Subject: [PATCH 2/3] Make `.card-header` background transparent by default, add override hooks (#2802) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> --- .changeset/card-header-footer-bg-vars.md | 5 +++++ core/scss/_variables.scss | 2 ++ core/scss/bootstrap/_card.scss | 10 ++++++++-- core/scss/ui/_cards.scss | 2 +- 4 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 .changeset/card-header-footer-bg-vars.md diff --git a/.changeset/card-header-footer-bg-vars.md b/.changeset/card-header-footer-bg-vars.md new file mode 100644 index 000000000..eb116b336 --- /dev/null +++ b/.changeset/card-header-footer-bg-vars.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Added `--card-header-bg` and `--card-footer-bg` CSS variables (with `$card-header-bg` and `$card-footer-bg` Sass defaults) so `.card-header` and `.card-footer` backgrounds can be overridden independently, and made `.card-header` transparent by default instead of using `--card-cap-bg`. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 2f7be8444..0d8ad01a3 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -1241,6 +1241,8 @@ $card-cap-padding-y: $card-spacer-y !default; $card-cap-padding-x: $card-spacer-x !default; $card-cap-bg: var(--bg-surface-tertiary) !default; $card-cap-color: inherit !default; +$card-header-bg: transparent !default; +$card-footer-bg: null !default; $card-height: null !default; $card-color: inherit !default; $card-bg: var(--bg-surface) !default; diff --git a/core/scss/bootstrap/_card.scss b/core/scss/bootstrap/_card.scss index cb90290a9..a2e96f600 100644 --- a/core/scss/bootstrap/_card.scss +++ b/core/scss/bootstrap/_card.scss @@ -106,10 +106,13 @@ // .card-header { + @if $card-header-bg != null { + --card-header-bg: #{$card-header-bg}; + } padding: var(--card-cap-padding-y) var(--card-cap-padding-x); margin-bottom: 0; // Removes the default margin-bottom of color: var(--card-cap-color); - background-color: var(--card-cap-bg); + background-color: var(--card-header-bg, var(--card-cap-bg)); border-bottom: var(--card-border-width) solid var(--card-border-color); &:first-child { @@ -118,9 +121,12 @@ } .card-footer { + @if $card-footer-bg != null { + --card-footer-bg: #{$card-footer-bg}; + } padding: var(--card-cap-padding-y) var(--card-cap-padding-x); color: var(--card-cap-color); - background-color: var(--card-cap-bg); + background-color: var(--card-footer-bg, var(--card-cap-bg)); border-top: var(--card-border-width) solid var(--card-border-color); &:last-child { diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index d746cb813..3aec2efc7 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -221,7 +221,7 @@ Stacked card display: flex; align-items: center; color: inherit; - background-color: var(--card-cap-bg); + background-color: var(--card-header-bg, var(--card-cap-bg)); &:first-child { @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0); From f2004da7b2ddac4737bdf7258efd744808945573 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Fri, 7 Aug 2026 00:12:53 +0200 Subject: [PATCH 3/3] Fix ribbon and payment icons dark mode on All Elements preview (#2804) Co-authored-by: codecalm --- .changeset/fix-payment-icons-dark-mode.md | 5 ++++ .changeset/fix-ribbon-example-background.md | 5 ++++ preview/pages/all-elements.astro | 28 ++++++++------------- 3 files changed, 20 insertions(+), 18 deletions(-) create mode 100644 .changeset/fix-payment-icons-dark-mode.md create mode 100644 .changeset/fix-ribbon-example-background.md diff --git a/.changeset/fix-payment-icons-dark-mode.md b/.changeset/fix-payment-icons-dark-mode.md new file mode 100644 index 000000000..d50056d18 --- /dev/null +++ b/.changeset/fix-payment-icons-dark-mode.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Fixed payment icons on the all-elements page by rendering light and dark variants with `hide-theme-dark` and `hide-theme-light` so the correct icon shows when the preview theme changes. diff --git a/.changeset/fix-ribbon-example-background.md b/.changeset/fix-ribbon-example-background.md new file mode 100644 index 000000000..924f72969 --- /dev/null +++ b/.changeset/fix-ribbon-example-background.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Fixed ribbon examples background on the all-elements page by replacing hardcoded `#f8f9fa` with `var(--tblr-bg-surface-secondary)` so it adapts to dark mode. diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro index 164dfae05..557feb60d 100644 --- a/preview/pages/all-elements.astro +++ b/preview/pages/all-elements.astro @@ -539,10 +539,10 @@ function greetUser(name) {

Ribbons

-
+
-
+
@@ -573,22 +573,14 @@ function greetUser(name) {

Payment Icons

- - - - - - - - - - - - - - - - + { + (['visa', 'mastercard', 'paypal', 'americanexpress', 'applepay', 'google-pay', 'stripe', 'discover', 'jcb', 'maestro', 'dinersclub', 'bitcoin', 'ethereum', 'klarna', 'venmo', 'square'] as const).map((payment) => ( + <> + + + + )) + }