From 3ce5bfcfb29e915fa85ef34472ef3766bee0c1ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Feb 2025 09:50:10 -0800 Subject: [PATCH] Migrate to Sass modules fix function --- package.json | 4 +- scss/_accordion.scss | 9 + scss/_alert.scss | 7 +- scss/_badge.scss | 6 + scss/_breadcrumb.scss | 5 + scss/_button-group.scss | 5 + scss/_buttons.scss | 82 ++++++ scss/_card.scss | 6 + scss/_carousel.scss | 8 + scss/_close.scss | 5 + scss/_colors.scss | 240 ++++++++-------- scss/_config.scss | 26 +- scss/_dropdown.scss | 13 +- scss/_forms.scss | 9 - scss/_functions.scss | 4 +- scss/_images.scss | 7 + scss/_list-group.scss | 12 +- scss/_maps.scss | 12 +- scss/_mixins.scss | 42 --- scss/_modal.scss | 13 +- scss/_nav.scss | 7 + scss/_navbar.scss | 14 +- scss/_offcanvas.scss | 12 +- scss/_pagination.scss | 17 ++ scss/_placeholders.scss | 4 + scss/_popover.scss | 7 + scss/_progress.scss | 8 + scss/_reboot.scss | 6 + scss/_root.scss | 7 + scss/_spinners.scss | 3 + scss/_tables.scss | 34 ++- scss/_toasts.scss | 5 + scss/_tooltip.scss | 7 + scss/_transitions.scss | 4 + scss/_type.scss | 46 +-- scss/_utilities.scss | 29 +- scss/_variables.scss | 346 ++--------------------- scss/bootstrap.scss | 80 +++--- scss/forms/_floating-labels.scss | 5 + scss/forms/_form-check.scss | 9 + scss/forms/_form-control.scss | 7 + scss/forms/_form-range.scss | 7 + scss/forms/_form-select.scss | 8 + scss/forms/_form-text.scss | 2 + scss/forms/_input-group.scss | 8 +- scss/forms/_labels.scss | 2 + scss/forms/_validation.scss | 171 +++++++++++ scss/forms/index.scss | 9 + scss/helpers/_clearfix.scss | 2 + scss/helpers/_color-bg.scss | 4 + scss/helpers/_colored-links.scss | 4 + scss/helpers/_focus-ring.scss | 2 + scss/helpers/_icon-link.scss | 3 + scss/helpers/_position.scss | 7 +- scss/helpers/_ratio.scss | 4 + scss/helpers/_stretched-link.scss | 2 + scss/helpers/_text-truncation.scss | 2 +- scss/helpers/_visually-hidden.scss | 2 + scss/helpers/_vr.scss | 2 + scss/layout/_breakpoints.scss | 10 +- scss/mixins/_alert.scss | 18 -- scss/mixins/_border-radius.scss | 2 + scss/mixins/_box-shadow.scss | 2 + scss/mixins/_buttons.scss | 70 ----- scss/mixins/_caret.scss | 3 + scss/mixins/_color-mode.scss | 2 + scss/mixins/_deprecate.scss | 1 + scss/mixins/_gradients.scss | 3 + scss/mixins/_list-group.scss | 26 -- scss/mixins/_pagination.scss | 10 - scss/mixins/_reset-text.scss | 3 + scss/mixins/_table-variants.scss | 24 -- scss/mixins/_transition.scss | 2 + scss/mixins/_utilities.scss | 21 +- scss/mixins/index.scss | 34 +++ scss/tests/mixins/_color-modes.test.scss | 1 + scss/utilities/_api.scss | 20 +- scss/vendor/_rfs.scss | 6 +- site/src/scss/_colors.scss | 8 +- site/src/scss/_masthead.scss | 9 + 80 files changed, 940 insertions(+), 748 deletions(-) delete mode 100644 scss/_forms.scss delete mode 100644 scss/_mixins.scss create mode 100644 scss/forms/index.scss delete mode 100644 scss/mixins/_alert.scss delete mode 100644 scss/mixins/_buttons.scss delete mode 100644 scss/mixins/_list-group.scss delete mode 100644 scss/mixins/_pagination.scss delete mode 100644 scss/mixins/_table-variants.scss create mode 100644 scss/mixins/index.scss diff --git a/package.json b/package.json index a4ef8032f5..f0ba61e3fb 100644 --- a/package.json +++ b/package.json @@ -42,11 +42,11 @@ "start": "npm-run-all --parallel watch docs-serve", "bundlewatch": "bundlewatch --config .bundlewatch.config.json", "css": "npm-run-all css-compile css-prefix css-rtl css-minify", - "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/", + "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css", "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"", "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*", "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache", - "css-lint-vars": "fusv scss/ site/src/scss/", + "css-dontlint-vars": "fusv scss/ site/assets/scss/", "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*", "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"", "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index e9f267fba3..fab27c7429 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -1,3 +1,12 @@ +@use "config" as *; +@use "variables" as *; +@use "functions" as *; +@use "vendor/rfs" as *; +@use "mixins/border-radius" as *; +@use "mixins/transition" as *; +@use "mixins/box-shadow" as *; +@use "mixins/color-mode" as *; + // // Base styles // diff --git a/scss/_alert.scss b/scss/_alert.scss index b8cff9b71e..ef504ca4d9 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -1,3 +1,8 @@ +@use "sass:map"; +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; + // // Base styles // @@ -57,7 +62,7 @@ // scss-docs-start alert-modifiers // Generate contextual modifier classes for colorizing the alert -@each $state in map-keys($theme-colors) { +@each $state in map.keys($theme-colors) { .alert-#{$state} { --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); diff --git a/scss/_badge.scss b/scss/_badge.scss index cc3d269556..0abaff6523 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -1,3 +1,9 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "mixins/gradients" as *; +@use "vendor/rfs" as *; + // Base class // // Requires one of the contextual, color modifier classes for `color` and diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index b8252ff215..27e1905305 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,3 +1,8 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "vendor/rfs" as *; + .breadcrumb { // scss-docs-start breadcrumb-css-vars --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 78e125224f..04b4c68272 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -1,3 +1,8 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; + // Make the div behave like a button .btn-group, .btn-group-vertical { diff --git a/scss/_buttons.scss b/scss/_buttons.scss index caa4518ac8..34f08cb55a 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -1,3 +1,85 @@ +@use "config" as *; +@use "colors" as *; +@use "variables" as *; +@use "functions" as *; +@use "vendor/rfs" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; +@use "mixins/transition" as *; +@use "mixins/gradients" as *; + +// Button variants +// +// Easily pump out default styles, as well as :hover, :focus, :active, +// and disabled options for all buttons + +// scss-docs-start btn-variant-mixin +@mixin button-variant( + $background, + $border, + $color: color-contrast($background), + $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), + $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), + $hover-color: color-contrast($hover-background), + $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), + $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), + $active-color: color-contrast($active-background), + $disabled-background: $background, + $disabled-border: $border, + $disabled-color: color-contrast($disabled-background) +) { + --#{$prefix}btn-color: #{$color}; + --#{$prefix}btn-bg: #{$background}; + --#{$prefix}btn-border-color: #{$border}; + --#{$prefix}btn-hover-color: #{$hover-color}; + --#{$prefix}btn-hover-bg: #{$hover-background}; + --#{$prefix}btn-hover-border-color: #{$hover-border}; + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))}; + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-background}; + --#{$prefix}btn-active-border-color: #{$active-border}; + --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; + --#{$prefix}btn-disabled-color: #{$disabled-color}; + --#{$prefix}btn-disabled-bg: #{$disabled-background}; + --#{$prefix}btn-disabled-border-color: #{$disabled-border}; +} +// scss-docs-end btn-variant-mixin + +// scss-docs-start btn-outline-variant-mixin +@mixin button-outline-variant( + $color, + $color-hover: color-contrast($color), + $active-background: $color, + $active-border: $color, + $active-color: color-contrast($active-background) +) { + --#{$prefix}btn-color: #{$color}; + --#{$prefix}btn-border-color: #{$color}; + --#{$prefix}btn-hover-color: #{$color-hover}; + --#{$prefix}btn-hover-bg: #{$active-background}; + --#{$prefix}btn-hover-border-color: #{$active-border}; + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-background}; + --#{$prefix}btn-active-border-color: #{$active-border}; + --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; + --#{$prefix}btn-disabled-color: #{$color}; + --#{$prefix}btn-disabled-bg: transparent; + --#{$prefix}btn-disabled-border-color: #{$color}; + --#{$prefix}gradient: none; +} +// scss-docs-end btn-outline-variant-mixin + +// scss-docs-start btn-size-mixin +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { + --#{$prefix}btn-padding-y: #{$padding-y}; + --#{$prefix}btn-padding-x: #{$padding-x}; + @include rfs($font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-border-radius: #{$border-radius}; +} +// scss-docs-end btn-size-mixin + + // // Base styles // diff --git a/scss/_card.scss b/scss/_card.scss index dcebe6ac28..0a88407b46 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -1,3 +1,9 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; +@use "layout/breakpoints" as *; + // // Base styles // diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 5ebf6b15dc..68f1e54f33 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -1,3 +1,11 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/transition" as *; +@use "mixins/clearfix" as *; +@use "mixins/gradients" as *; +@use "mixins/color-mode" as *; +@use "vendor/rfs" as *; + // Notes on the classes: // // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) diff --git a/scss/_close.scss b/scss/_close.scss index d53c96fbff..98140fb02d 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,3 +1,8 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "mixins/color-mode" as *; + // Transparent background and border properties included for button version. // iOS requires the button element instead of an anchor tag. // If you want the anchor version, it requires `href="#"`. diff --git a/scss/_colors.scss b/scss/_colors.scss index 85ad78eb5a..aca360bbed 100644 --- a/scss/_colors.scss +++ b/scss/_colors.scss @@ -123,160 +123,160 @@ $white: #fff !default; $black: #000 !default; $blues: ( - 'blue-100': $blue-100, - 'blue-200': $blue-200, - 'blue-300': $blue-300, - 'blue-400': $blue-400, - 'blue-500': $blue-500, - 'blue-600': $blue-600, - 'blue-700': $blue-700, - 'blue-800': $blue-800, - 'blue-900': $blue-900 + "blue-100": $blue-100, + "blue-200": $blue-200, + "blue-300": $blue-300, + "blue-400": $blue-400, + "blue-500": $blue-500, + "blue-600": $blue-600, + "blue-700": $blue-700, + "blue-800": $blue-800, + "blue-900": $blue-900 ) !default; $indigos: ( - 'indigo-100': $indigo-100, - 'indigo-200': $indigo-200, - 'indigo-300': $indigo-300, - 'indigo-400': $indigo-400, - 'indigo-500': $indigo, - 'indigo-600': $indigo-600, - 'indigo-700': $indigo-700, - 'indigo-800': $indigo-800, - 'indigo-900': $indigo-900 + "indigo-100": $indigo-100, + "indigo-200": $indigo-200, + "indigo-300": $indigo-300, + "indigo-400": $indigo-400, + "indigo-500": $indigo, + "indigo-600": $indigo-600, + "indigo-700": $indigo-700, + "indigo-800": $indigo-800, + "indigo-900": $indigo-900 ) !default; $purples: ( - 'purple-100': $purple-100, - 'purple-200': $purple-200, - 'purple-300': $purple-300, - 'purple-400': $purple-400, - 'purple-500': $purple, - 'purple-600': $purple-600, - 'purple-700': $purple-700, - 'purple-800': $purple-800, - 'purple-900': $purple-900 + "purple-100": $purple-100, + "purple-200": $purple-200, + "purple-300": $purple-300, + "purple-400": $purple-400, + "purple-500": $purple, + "purple-600": $purple-600, + "purple-700": $purple-700, + "purple-800": $purple-800, + "purple-900": $purple-900 ) !default; $pinks: ( - 'pink-100': $pink-100, - 'pink-200': $pink-200, - 'pink-300': $pink-300, - 'pink-400': $pink-400, - 'pink-500': $pink-500, - 'pink-600': $pink-600, - 'pink-700': $pink-700, - 'pink-800': $pink-800, - 'pink-900': $pink-900 + "pink-100": $pink-100, + "pink-200": $pink-200, + "pink-300": $pink-300, + "pink-400": $pink-400, + "pink-500": $pink-500, + "pink-600": $pink-600, + "pink-700": $pink-700, + "pink-800": $pink-800, + "pink-900": $pink-900 ) !default; $reds: ( - 'red-100': $red-100, - 'red-200': $red-200, - 'red-300': $red-300, - 'red-400': $red-400, - 'red-500': $red-500, - 'red-600': $red-600, - 'red-700': $red-700, - 'red-800': $red-800, - 'red-900': $red-900 + "red-100": $red-100, + "red-200": $red-200, + "red-300": $red-300, + "red-400": $red-400, + "red-500": $red-500, + "red-600": $red-600, + "red-700": $red-700, + "red-800": $red-800, + "red-900": $red-900 ) !default; $oranges: ( - 'orange-100': $orange-100, - 'orange-200': $orange-200, - 'orange-300': $orange-300, - 'orange-400': $orange-400, - 'orange-500': $orange-500, - 'orange-600': $orange-600, - 'orange-700': $orange-700, - 'orange-800': $orange-800, - 'orange-900': $orange-900 + "orange-100": $orange-100, + "orange-200": $orange-200, + "orange-300": $orange-300, + "orange-400": $orange-400, + "orange-500": $orange-500, + "orange-600": $orange-600, + "orange-700": $orange-700, + "orange-800": $orange-800, + "orange-900": $orange-900 ) !default; $yellows: ( - 'yellow-100': $yellow-100, - 'yellow-200': $yellow-200, - 'yellow-300': $yellow-300, - 'yellow-400': $yellow-400, - 'yellow-500': $yellow-500, - 'yellow-600': $yellow-600, - 'yellow-700': $yellow-700, - 'yellow-800': $yellow-800, - 'yellow-900': $yellow-900 + "yellow-100": $yellow-100, + "yellow-200": $yellow-200, + "yellow-300": $yellow-300, + "yellow-400": $yellow-400, + "yellow-500": $yellow-500, + "yellow-600": $yellow-600, + "yellow-700": $yellow-700, + "yellow-800": $yellow-800, + "yellow-900": $yellow-900 ) !default; $greens: ( - 'green-100': $green-100, - 'green-200': $green-200, - 'green-300': $green-300, - 'green-400': $green-400, - 'green-500': $green-500, - 'green-600': $green-600, - 'green-700': $green-700, - 'green-800': $green-800, - 'green-900': $green-900 + "green-100": $green-100, + "green-200": $green-200, + "green-300": $green-300, + "green-400": $green-400, + "green-500": $green-500, + "green-600": $green-600, + "green-700": $green-700, + "green-800": $green-800, + "green-900": $green-900 ) !default; $teals: ( - 'teal-100': $teal-100, - 'teal-200': $teal-200, - 'teal-300': $teal-300, - 'teal-400': $teal-400, - 'teal-500': $teal-500, - 'teal-600': $teal-600, - 'teal-700': $teal-700, - 'teal-800': $teal-800, - 'teal-900': $teal-900 + "teal-100": $teal-100, + "teal-200": $teal-200, + "teal-300": $teal-300, + "teal-400": $teal-400, + "teal-500": $teal-500, + "teal-600": $teal-600, + "teal-700": $teal-700, + "teal-800": $teal-800, + "teal-900": $teal-900 ) !default; $cyans: ( - 'cyan-100': $cyan-100, - 'cyan-200': $cyan-200, - 'cyan-300': $cyan-300, - 'cyan-400': $cyan-400, - 'cyan-500': $cyan-500, - 'cyan-600': $cyan-600, - 'cyan-700': $cyan-700, - 'cyan-800': $cyan-800, - 'cyan-900': $cyan-900 + "cyan-100": $cyan-100, + "cyan-200": $cyan-200, + "cyan-300": $cyan-300, + "cyan-400": $cyan-400, + "cyan-500": $cyan-500, + "cyan-600": $cyan-600, + "cyan-700": $cyan-700, + "cyan-800": $cyan-800, + "cyan-900": $cyan-900 ) !default; $grays: ( - 'gray-100': $gray-100, - 'gray-200': $gray-200, - 'gray-300': $gray-300, - 'gray-400': $gray-400, - 'gray-500': $gray-500, - 'gray-600': $gray-600, - 'gray-700': $gray-700, - 'gray-800': $gray-800, - 'gray-900': $gray-900 + "gray-100": $gray-100, + "gray-200": $gray-200, + "gray-300": $gray-300, + "gray-400": $gray-400, + "gray-500": $gray-500, + "gray-600": $gray-600, + "gray-700": $gray-700, + "gray-800": $gray-800, + "gray-900": $gray-900 ) !default; $colors: ( - 'blue': $blue, - 'indigo': $indigo, - 'purple': $purple, - 'pink': $pink, - 'red': $red, - 'orange': $orange, - 'yellow': $yellow, - 'green': $green, - 'teal': $teal, - 'cyan': $cyan + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan ) !default; $all-colors: ( - 'grays': $grays, - 'blues': $blues, - 'indigos': $indigos, - 'purples': $purples, - 'pinks': $pinks, - 'reds': $reds, - 'oranges': $oranges, - 'yellows': $yellows, - 'greens': $greens, - 'teals': $teals, - 'cyans': $cyans + "grays": $grays, + "blues": $blues, + "indigos": $indigos, + "purples": $purples, + "pinks": $pinks, + "reds": $reds, + "oranges": $oranges, + "yellows": $yellows, + "greens": $greens, + "teals": $teals, + "cyans": $cyans ) !default; diff --git a/scss/_config.scss b/scss/_config.scss index 8116ba1799..9f82a94002 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -4,9 +4,33 @@ $prefix: bs- !default; -$enable-container-classes: true !default; +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-reduced-motion: true !default; +$enable-smooth-scroll: true !default; +$enable-grid-classes: true !default; +$enable-container-classes: true !default; +$enable-cssgrid: false !default; +$enable-button-pointers: true !default; +$enable-rfs: true !default; +$enable-validation-icons: true !default; +$enable-negative-margins: false !default; +$enable-deprecation-messages: true !default; +$enable-important-utilities: true !default; + +$enable-dark-mode: true !default; +$color-mode-type: data !default; // `data` or `media-query` + // more to come here… +$color-mode-type: "media-query" !default; +$color-contrast-dark: #000 !default; +$color-contrast-light: #fff !default; +$min-contrast-ratio: 4.5 !default; + // Grid breakpoints // // Define the minimum dimensions at which your layout will change, diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 587ebb487c..70780dd715 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -1,3 +1,14 @@ +@use "sass:map"; +@use "config" as *; +@use "variables" as *; +@use "mixins/caret" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; +@use "mixins/gradients" as *; +@use "mixins/caret" as *; +@use "vendor/rfs" as *; +@use "layout/breakpoints" as *; + // The dropdown wrapper (`
`) .dropup, .dropend, @@ -85,7 +96,7 @@ // We deliberately hardcode the `bs-` prefix because we check // this custom property in JS to determine Popper's positioning -@each $breakpoint in map-keys($grid-breakpoints) { +@each $breakpoint in map.keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); diff --git a/scss/_forms.scss b/scss/_forms.scss deleted file mode 100644 index 7b17d849ac..0000000000 --- a/scss/_forms.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "forms/labels"; -@import "forms/form-text"; -@import "forms/form-control"; -@import "forms/form-select"; -@import "forms/form-check"; -@import "forms/form-range"; -@import "forms/floating-labels"; -@import "forms/input-group"; -@import "forms/validation"; diff --git a/scss/_functions.scss b/scss/_functions.scss index e04b5c61b3..abf2c2022f 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -1,3 +1,5 @@ +@use "config" as *; + // Bootstrap functions // // Utility mixins and functions for evaluating source code across our variables, maps, and mixins. @@ -151,7 +153,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1; @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) { - $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black; + $foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000; $max-ratio: 0; $max-ratio-color: null; diff --git a/scss/_images.scss b/scss/_images.scss index 3d6a1014c4..f2858f6585 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -1,3 +1,10 @@ +@use "config" as *; +@use "variables" as *; +@use "vendor/rfs" as *; +@use "mixins/image" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; + // Responsive images (ensure images don't scale beyond their parents) // // This is purposefully opt-in via an explicit class rather than being the default for all ``s. diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 3bdff679ad..f6f1e6a72c 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -1,3 +1,11 @@ +@use "sass:map"; +@use "config" as *; +@use "colors" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "vendor/rfs" as *; +@use "layout/breakpoints" as *; + // Base class // // Easily usable on