From d7fb9a4b0a2d0cf09e013b40366ab28bf41ae6e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 30 Jul 2024 11:16:28 +0200 Subject: [PATCH] Test for Sass compilation --- dist/css/mixins/index.css | 3 + dist/css/mixins/index.css.map | 1 + dist/css/setup/index.css | 3 + dist/css/setup/index.css.map | 1 + scss/_accordion.scss | 2 +- scss/_alert.scss | 2 +- scss/_badge.scss | 2 +- scss/_breadcrumb.scss | 2 +- scss/_button-group.scss | 2 +- scss/_buttons.scss | 185 +++++++++--------- scss/_card.scss | 2 +- scss/_carousel.scss | 2 +- scss/_close.scss | 2 +- scss/_containers.scss | 2 +- scss/_dropdown.scss | 2 +- scss/_functions.scss | 312 ------------------------------ scss/_grid.scss | 2 +- scss/_images.scss | 2 +- scss/_list-group.scss | 2 +- scss/_maps.scss | 2 +- scss/_modal.scss | 2 +- scss/_nav.scss | 2 +- scss/_navbar.scss | 2 +- scss/_offcanvas.scss | 2 +- scss/_pagination.scss | 2 +- scss/_placeholders.scss | 2 +- scss/_popover.scss | 2 +- scss/_progress.scss | 2 +- scss/_reboot.scss | 2 +- scss/_spinners.scss | 2 +- scss/_tables.scss | 2 +- scss/_toasts.scss | 2 +- scss/_tooltip.scss | 2 +- scss/_transitions.scss | 2 +- scss/_type.scss | 3 +- scss/_utilities.scss | 2 +- scss/bootstrap.scss | 16 +- scss/forms/_floating-labels.scss | 2 +- scss/forms/_form-check.scss | 111 ++++++----- scss/forms/_form-control.scss | 2 +- scss/forms/_form-range.scss | 2 +- scss/forms/_form-select.scss | 75 ++++--- scss/forms/_form-text.scss | 2 +- scss/forms/_input-group.scss | 2 +- scss/forms/_labels.scss | 2 +- scss/forms/_validation.scss | 2 +- scss/helpers/_color-bg.scss | 2 +- scss/helpers/_colored-links.scss | 2 +- scss/helpers/_focus-ring.scss | 2 +- scss/helpers/_icon-link.scss | 2 +- scss/helpers/_position.scss | 2 +- scss/helpers/_ratio.scss | 2 +- scss/helpers/_stretched-link.scss | 2 +- scss/helpers/_vr.scss | 2 +- scss/mixins/_border-radius.scss | 2 +- scss/mixins/_box-shadow.scss | 2 +- scss/mixins/_breakpoints.scss | 2 +- scss/mixins/_buttons.scss | 87 ++++----- scss/mixins/_caret.scss | 2 +- scss/mixins/_container.scss | 2 +- scss/mixins/_forms.scss | 61 +++--- scss/mixins/_gradients.scss | 2 +- scss/mixins/_grid.scss | 7 +- scss/mixins/_pagination.scss | 2 +- scss/mixins/_reset-text.scss | 2 +- scss/mixins/_table-variants.scss | 37 ++-- scss/mixins/_transition.scss | 2 +- scss/mixins/_utilities.scss | 2 +- scss/setup/_functions.scss | 2 +- scss/setup/_variables.scss | 5 +- scss/utilities/_api.scss | 2 +- 71 files changed, 355 insertions(+), 664 deletions(-) create mode 100644 dist/css/mixins/index.css create mode 100644 dist/css/mixins/index.css.map create mode 100644 dist/css/setup/index.css create mode 100644 dist/css/setup/index.css.map diff --git a/dist/css/mixins/index.css b/dist/css/mixins/index.css new file mode 100644 index 0000000000..293771b28d --- /dev/null +++ b/dist/css/mixins/index.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=index.css.map */ diff --git a/dist/css/mixins/index.css.map b/dist/css/mixins/index.css.map new file mode 100644 index 0000000000..ec9a3d81f7 --- /dev/null +++ b/dist/css/mixins/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css","sourcesContent":[]} \ No newline at end of file diff --git a/dist/css/setup/index.css b/dist/css/setup/index.css new file mode 100644 index 0000000000..293771b28d --- /dev/null +++ b/dist/css/setup/index.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=index.css.map */ diff --git a/dist/css/setup/index.css.map b/dist/css/setup/index.css.map new file mode 100644 index 0000000000..ec9a3d81f7 --- /dev/null +++ b/dist/css/setup/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css","sourcesContent":[]} \ No newline at end of file diff --git a/scss/_accordion.scss b/scss/_accordion.scss index d69dfd617f..574ef3148a 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -2,7 +2,7 @@ @use "mixins/border-radius"; @use "mixins/color-mode"; @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // diff --git a/scss/_alert.scss b/scss/_alert.scss index 172411f21b..f96aea77ae 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -1,6 +1,6 @@ @use "sass:map"; @use "mixins/border-radius"; -@use "variables"; +@use "setup/variables"; // // Base styles diff --git a/scss/_badge.scss b/scss/_badge.scss index 802c9629ab..3d6946373e 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -1,6 +1,6 @@ @use "mixins/border-radius"; @use "mixins/gradients"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // Base class diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 1a0ad49bf5..17bc4ec977 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,6 +1,6 @@ @use "functions"; @use "mixins/border-radius"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; .breadcrumb { diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 9fdba871fb..0a9664c3bb 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -1,6 +1,6 @@ @use "mixins/border-radius"; @use "mixins/box-shadow"; -@use "variables"; +@use "setup/variables"; // Make the div behave like a button .btn-group, diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 18ad4c6746..c387d9a2ac 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -1,10 +1,9 @@ -@use "functions"; @use "mixins/border-radius"; @use "mixins/box-shadow"; @use "mixins/buttons"; @use "mixins/gradients"; @use "mixins/transition"; -@use "variables"; +@use "setup" as *; @use "vendor/rfs"; // @@ -13,77 +12,77 @@ .btn { // scss-docs-start btn-css-vars - --#{variables.$prefix}btn-padding-x: #{variables.$btn-padding-x}; - --#{variables.$prefix}btn-padding-y: #{variables.$btn-padding-y}; - --#{variables.$prefix}btn-font-family: #{variables.$btn-font-family}; - @include rfs.rfs(variables.$btn-font-size, --#{variables.$prefix}btn-font-size); - --#{variables.$prefix}btn-font-weight: #{variables.$btn-font-weight}; - --#{variables.$prefix}btn-line-height: #{variables.$btn-line-height}; - --#{variables.$prefix}btn-color: #{variables.$btn-color}; - --#{variables.$prefix}btn-bg: transparent; - --#{variables.$prefix}btn-border-width: #{variables.$btn-border-width}; - --#{variables.$prefix}btn-border-color: transparent; - --#{variables.$prefix}btn-border-radius: #{variables.$btn-border-radius}; - --#{variables.$prefix}btn-hover-border-color: transparent; - --#{variables.$prefix}btn-box-shadow: #{variables.$btn-box-shadow}; - --#{variables.$prefix}btn-disabled-opacity: #{variables.$btn-disabled-opacity}; - --#{variables.$prefix}btn-focus-box-shadow: 0 0 0 #{variables.$btn-focus-width} rgba(var(--#{variables.$prefix}btn-focus-shadow-rgb), .5); + --#{$prefix}btn-padding-x: #{$btn-padding-x}; + --#{$prefix}btn-padding-y: #{$btn-padding-y}; + --#{$prefix}btn-font-family: #{$btn-font-family}; + @include rfs.rfs($btn-font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-font-weight: #{$btn-font-weight}; + --#{$prefix}btn-line-height: #{$btn-line-height}; + --#{$prefix}btn-color: #{$btn-color}; + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-width: #{$btn-border-width}; + --#{$prefix}btn-border-color: transparent; + --#{$prefix}btn-border-radius: #{$btn-border-radius}; + --#{$prefix}btn-hover-border-color: transparent; + --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; + --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; + --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); // scss-docs-end btn-css-vars display: inline-block; - padding: var(--#{variables.$prefix}btn-padding-y) var(--#{variables.$prefix}btn-padding-x); - font-family: var(--#{variables.$prefix}btn-font-family); - @include rfs.font-size(var(--#{variables.$prefix}btn-font-size)); - font-weight: var(--#{variables.$prefix}btn-font-weight); - line-height: var(--#{variables.$prefix}btn-line-height); - color: var(--#{variables.$prefix}btn-color); + padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); + font-family: var(--#{$prefix}btn-font-family); + @include rfs.font-size(var(--#{$prefix}btn-font-size)); + font-weight: var(--#{$prefix}btn-font-weight); + line-height: var(--#{$prefix}btn-line-height); + color: var(--#{$prefix}btn-color); text-align: center; - text-decoration: if(variables.$link-decoration == none, null, none); - white-space: variables.$btn-white-space; + text-decoration: if($link-decoration == none, null, none); + white-space: $btn-white-space; vertical-align: middle; - cursor: if(variables.$enable-button-pointers, pointer, null); + cursor: if($enable-button-pointers, pointer, null); user-select: none; - border: var(--#{variables.$prefix}btn-border-width) solid var(--#{variables.$prefix}btn-border-color); - @include border-radius.border-radius(var(--#{variables.$prefix}btn-border-radius)); - @include gradients.gradient-bg(var(--#{variables.$prefix}btn-bg)); - @include box-shadow.box-shadow(var(--#{variables.$prefix}btn-box-shadow)); - @include transition.transition(variables.$btn-transition); + border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); + @include border-radius.border-radius(var(--#{$prefix}btn-border-radius)); + @include gradients.gradient-bg(var(--#{$prefix}btn-bg)); + @include box-shadow.box-shadow(var(--#{$prefix}btn-box-shadow)); + @include transition.transition($btn-transition); &:hover { - color: var(--#{variables.$prefix}btn-hover-color); - text-decoration: if(variables.$link-hover-decoration == underline, none, null); - background-color: var(--#{variables.$prefix}btn-hover-bg); - border-color: var(--#{variables.$prefix}btn-hover-border-color); + color: var(--#{$prefix}btn-hover-color); + text-decoration: if($link-hover-decoration == underline, none, null); + background-color: var(--#{$prefix}btn-hover-bg); + border-color: var(--#{$prefix}btn-hover-border-color); } .btn-check + &:hover { // override for the checkbox/radio buttons - color: var(--#{variables.$prefix}btn-color); - background-color: var(--#{variables.$prefix}btn-bg); - border-color: var(--#{variables.$prefix}btn-border-color); + color: var(--#{$prefix}btn-color); + background-color: var(--#{$prefix}btn-bg); + border-color: var(--#{$prefix}btn-border-color); } &:focus-visible { - color: var(--#{variables.$prefix}btn-hover-color); - @include gradients.gradient-bg(var(--#{variables.$prefix}btn-hover-bg)); - border-color: var(--#{variables.$prefix}btn-hover-border-color); + color: var(--#{$prefix}btn-hover-color); + @include gradients.gradient-bg(var(--#{$prefix}btn-hover-bg)); + border-color: var(--#{$prefix}btn-hover-border-color); outline: 0; // Avoid using mixin so we can pass custom focus shadow properly - @if variables.$enable-shadows { - box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow); + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); } @else { - box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-focus-box-shadow); } } .btn-check:focus-visible + & { - border-color: var(--#{variables.$prefix}btn-hover-border-color); + border-color: var(--#{$prefix}btn-hover-border-color); outline: 0; // Avoid using mixin so we can pass custom focus shadow properly - @if variables.$enable-shadows { - box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow); + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); } @else { - box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-focus-box-shadow); } } @@ -92,41 +91,41 @@ &:first-child:active, &.active, &.show { - color: var(--#{variables.$prefix}btn-active-color); - background-color: var(--#{variables.$prefix}btn-active-bg); + color: var(--#{$prefix}btn-active-color); + background-color: var(--#{$prefix}btn-active-bg); // Remove CSS gradients if they're enabled - background-image: if(variables.$enable-gradients, none, null); - border-color: var(--#{variables.$prefix}btn-active-border-color); - @include box-shadow.box-shadow(var(--#{variables.$prefix}btn-active-shadow)); + background-image: if($enable-gradients, none, null); + border-color: var(--#{$prefix}btn-active-border-color); + @include box-shadow.box-shadow(var(--#{$prefix}btn-active-shadow)); &:focus-visible { // Avoid using mixin so we can pass custom focus shadow properly - @if variables.$enable-shadows { - box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow); + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); } @else { - box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-focus-box-shadow); } } } .btn-check:checked:focus-visible + & { // Avoid using mixin so we can pass custom focus shadow properly - @if variables.$enable-shadows { - box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow); + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); } @else { - box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-focus-box-shadow); } } &:disabled, &.disabled, fieldset:disabled & { - color: var(--#{variables.$prefix}btn-disabled-color); + color: var(--#{$prefix}btn-disabled-color); pointer-events: none; - background-color: var(--#{variables.$prefix}btn-disabled-bg); - background-image: if(variables.$enable-gradients, none, null); - border-color: var(--#{variables.$prefix}btn-disabled-border-color); - opacity: var(--#{variables.$prefix}btn-disabled-opacity); + background-color: var(--#{$prefix}btn-disabled-bg); + background-image: if($enable-gradients, none, null); + border-color: var(--#{$prefix}btn-disabled-border-color); + opacity: var(--#{$prefix}btn-disabled-opacity); @include box-shadow.box-shadow(none); } } @@ -137,25 +136,25 @@ // // scss-docs-start btn-variant-loops -@each $color, $value in variables.$theme-colors { +@each $color, $value in $theme-colors { .btn-#{$color} { @if $color == "light" { @include buttons.button-variant( $value, $value, - $hover-background: functions.shade-color($value, variables.$btn-hover-bg-shade-amount), - $hover-border: functions.shade-color($value, variables.$btn-hover-border-shade-amount), - $active-background: functions.shade-color($value, variables.$btn-active-bg-shade-amount), - $active-border: functions.shade-color($value, variables.$btn-active-border-shade-amount) + $hover-background: shade-color($value, $btn-hover-bg-shade-amount), + $hover-border: shade-color($value, $btn-hover-border-shade-amount), + $active-background: shade-color($value, $btn-active-bg-shade-amount), + $active-border: shade-color($value, $btn-active-border-shade-amount) ); } @else if $color == "dark" { @include buttons.button-variant( $value, $value, - $hover-background: functions.tint-color($value, variables.$btn-hover-bg-tint-amount), - $hover-border: functions.tint-color($value, variables.$btn-hover-border-tint-amount), - $active-background: functions.tint-color($value, variables.$btn-active-bg-tint-amount), - $active-border: functions.tint-color($value, variables.$btn-active-border-tint-amount) + $hover-background: tint-color($value, $btn-hover-bg-tint-amount), + $hover-border: tint-color($value, $btn-hover-border-tint-amount), + $active-background: tint-color($value, $btn-active-bg-tint-amount), + $active-border: tint-color($value, $btn-active-border-tint-amount) ); } @else { @include buttons.button-variant($value, $value); @@ -163,7 +162,7 @@ } } -@each $color, $value in variables.$theme-colors { +@each $color, $value in $theme-colors { .btn-outline-#{$color} { @include buttons.button-outline-variant($value); } @@ -177,35 +176,35 @@ // Make a button look and behave like a link .btn-link { - --#{variables.$prefix}btn-font-weight: #{variables.$font-weight-normal}; - --#{variables.$prefix}btn-color: #{variables.$btn-link-color}; - --#{variables.$prefix}btn-bg: transparent; - --#{variables.$prefix}btn-border-color: transparent; - --#{variables.$prefix}btn-hover-color: #{variables.$btn-link-hover-color}; - --#{variables.$prefix}btn-hover-border-color: transparent; - --#{variables.$prefix}btn-active-color: #{variables.$btn-link-hover-color}; - --#{variables.$prefix}btn-active-border-color: transparent; - --#{variables.$prefix}btn-disabled-color: #{variables.$btn-link-disabled-color}; - --#{variables.$prefix}btn-disabled-border-color: transparent; - --#{variables.$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows - --#{variables.$prefix}btn-focus-shadow-rgb: #{variables.$btn-link-focus-shadow-rgb}; + --#{$prefix}btn-font-weight: #{$font-weight-normal}; + --#{$prefix}btn-color: #{$btn-link-color}; + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-color: transparent; + --#{$prefix}btn-hover-color: #{$btn-link-hover-color}; + --#{$prefix}btn-hover-border-color: transparent; + --#{$prefix}btn-active-color: #{$btn-link-hover-color}; + --#{$prefix}btn-active-border-color: transparent; + --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; + --#{$prefix}btn-disabled-border-color: transparent; + --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows + --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb}; - text-decoration: variables.$link-decoration; - @if variables.$enable-gradients { + text-decoration: $link-decoration; + @if $enable-gradients { background-image: none; } &:hover, &:focus-visible { - text-decoration: variables.$link-hover-decoration; + text-decoration: $link-hover-decoration; } &:focus-visible { - color: var(--#{variables.$prefix}btn-color); + color: var(--#{$prefix}btn-color); } &:hover { - color: var(--#{variables.$prefix}btn-hover-color); + color: var(--#{$prefix}btn-hover-color); } // No need for an active state here @@ -217,9 +216,9 @@ // .btn-lg { - @include buttons.button-size(variables.$btn-padding-y-lg, variables.$btn-padding-x-lg, variables.$btn-font-size-lg, variables.$btn-border-radius-lg); + @include buttons.button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); } .btn-sm { - @include buttons.button-size(variables.$btn-padding-y-sm, variables.$btn-padding-x-sm, variables.$btn-font-size-sm, variables.$btn-border-radius-sm); + @include buttons.button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); } diff --git a/scss/_card.scss b/scss/_card.scss index 8897445ee0..19c4085c8d 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -1,7 +1,7 @@ @use "mixins/border-radius"; @use "mixins/box-shadow"; @use "mixins/breakpoints"; -@use "variables"; +@use "setup/variables"; // // Base styles diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 3a12313fdd..5a1ba666da 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -2,7 +2,7 @@ @use "mixins/clearfix"; @use "mixins/color-mode"; @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; // Notes on the classes: // diff --git a/scss/_close.scss b/scss/_close.scss index cde2347f71..c8d48c7272 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,7 +1,7 @@ @use "functions"; @use "mixins/border-radius"; @use "mixins/color-mode"; -@use "variables"; +@use "setup/variables"; // Transparent background and border properties included for button version. // iOS requires the button element instead of an anchor tag. diff --git a/scss/_containers.scss b/scss/_containers.scss index 628c475c65..d025074a9c 100644 --- a/scss/_containers.scss +++ b/scss/_containers.scss @@ -1,6 +1,6 @@ @use "mixins/breakpoints"; @use "mixins/container"; -@use "variables"; +@use "setup/variables"; // Container widths // diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 74374c39fc..09178b4ba3 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -4,7 +4,7 @@ @use "mixins/breakpoints"; @use "mixins/caret"; @use "mixins/gradients"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // The dropdown wrapper (`
`) diff --git a/scss/_functions.scss b/scss/_functions.scss index d6f804b562..e69de29bb2 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -1,312 +0,0 @@ -@use "sass:color"; -@use "sass:list"; -@use "sass:map"; -@use "sass:math"; -@use "sass:meta"; -@use "sass:string"; -// @use "variables"; - -// Bootstrap functions -// -// Utility mixins and functions for evaluating source code across our variables, maps, and mixins. - -// Ascending -// Used to evaluate Sass maps like our grid breakpoints. -@mixin assert-ascending($map, $map-name) { - $prev-key: null; - $prev-num: null; - @each $key, $num in $map { - @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" { - // Do nothing - } @else if not math.compatible($prev-num, $num) { - @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } @else if $prev-num >= $num { - @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } - $prev-key: $key; - $prev-num: $num; - } -} - -// Starts at zero -// Used to ensure the min-width of the lowest breakpoint starts at 0. -@mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { - @if list.length($map) > 0 { - $values: map.values($map); - $first-value: list.nth($values, 1); - @if $first-value != 0 { - @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; - } - } -} - -// Colors -@function to-rgb($value) { - @return color.red($value), color.green($value), color.blue($value); -} - -// stylelint-disable scss/dollar-variable-pattern -@function rgba-css-var($identifier, $target) { - @if $identifier == "body" and $target == "bg" { - @return rgba(var(--#{variables.$prefix}#{$identifier}-bg-rgb), var(--#{variables.$prefix}#{$target}-opacity)); - } @if $identifier == "body" and $target == "text" { - @return rgba(var(--#{variables.$prefix}#{$identifier}-color-rgb), var(--#{variables.$prefix}#{$target}-opacity)); - } @else { - @return rgba(var(--#{variables.$prefix}#{$identifier}-rgb), var(--#{variables.$prefix}#{$target}-opacity)); - } -} - -@function map-loop($map, $func, $args...) { - $_map: (); - - @each $key, $value in $map { - // allow to pass the $key and $value of the map as an function argument - $_args: (); - @each $arg in $args { - $_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg))); - } - - $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...))); - } - - @return $_map; -} -// stylelint-enable scss/dollar-variable-pattern - -@function varify($list) { - $result: null; - @each $entry in $list { - $result: list.append($result, var(--#{variables.$prefix}#{$entry}), space); - } - @return $result; -} - -// Internal Bootstrap function to turn maps into its negative variant. -// It prefixes the keys with `n` and makes the value negative. -@function negativify-map($map) { - $result: (); - @each $key, $value in $map { - @if $key != 0 { - $result: map.merge($result, ("n" + $key: (-$value))); - } - } - @return $result; -} - -// Get multiple keys from a sass map -@function map-get-multiple($map, $values) { - $result: (); - @each $key, $value in $map { - @if (list.index($values, $key) != null) { - $result: map.merge($result, ($key: $value)); - } - } - @return $result; -} - -// Merge multiple maps -@function map-merge-multiple($maps...) { - $merged-maps: (); - - @each $map in $maps { - $merged-maps: map.merge($merged-maps, $map); - } - @return $merged-maps; -} - -// Replace `$search` with `$replace` in `$string` -// Used on our SVG icon backgrounds for custom forms. -// -// @author Kitty Giraudel -// @param {String} $string - Initial string -// @param {String} $search - Substring to replace -// @param {String} $replace ('') - New value -// @return {String} - Updated string -@function str-replace($string, $search, $replace: "") { - $index: string.index($string, $search); - - @if $index { - @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace); - } - - @return $string; -} - -// See https://codepen.io/kevinweber/pen/dXWoRw -// -// Requires the use of quotes around data URIs. - -@function escape-svg($string) { - @if string.index($string, "data:image/svg+xml") { - @each $char, $encoded in variables.$escaped-characters { - // Do not escape the url brackets - @if string.index($string, "url(") == 1 { - $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}"); - } @else { - $string: str-replace($string, $char, $encoded); - } - } - } - - @return $string; -} - -// Color contrast -// See https://github.com/twbs/bootstrap/pull/30168 - -// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255) -// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern -$_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, variables.$white, variables.$black; - $max-ratio: 0; - $max-ratio-color: null; - - @each $color in $foregrounds { - $contrast-ratio: contrast-ratio($background, $color); - @if $contrast-ratio > $min-contrast-ratio { - @return $color; - } @else if $contrast-ratio > $max-ratio { - $max-ratio: $contrast-ratio; - $max-ratio-color: $color; - } - } - - @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}..."; - - @return $max-ratio-color; -} - -@function contrast-ratio($background, $foreground: variables.$color-contrast-light) { - $l1: luminance($background); - $l2: luminance(opaque($background, $foreground)); - - @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05)); -} - -// Return WCAG2.1 relative luminance -// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance -// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio -@function luminance($color) { - $rgb: ( - "r": color.red($color), - "g": color.green($color), - "b": color.blue($color) - ); - - @each $name, $value in $rgb { - $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1)); - $rgb: map.merge($rgb, ($name: $value)); - } - - @return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722); -} - -// Return opaque color -// opaque(#fff, rgba(0, 0, 0, .5)) => #808080 -@function opaque($background, $foreground) { - @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%); -} - -// mdo-do: Replace tint-color and shade-color with color.adjust(COLOR, $lightness: %). - -// scss-docs-start color-functions -// Tint a color: mix a color with white -@function tint-color($color, $weight) { - @return color.mix(white, $color, $weight); -} - -// Shade a color: mix a color with black -@function shade-color($color, $weight) { - @return color.mix(black, $color, $weight); -} - -// Shade the color if the weight is positive, else tint it -@function shift-color($color, $weight) { - @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight)); -} -// scss-docs-end color-functions - -// Return valid calc -// @function add($value1, $value2, $return-calc: true) { -// @if $value1 == null { -// @return $value2; -// } - -// @if $value2 == null { -// @return $value1; -// } - -// @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { -// @return $value1 + $value2; -// } - -// @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); -// } - -// @function subtract($value1, $value2, $return-calc: true) { -// @if $value1 == null and $value2 == null { -// @return null; -// } - -// @if $value1 == null { -// @return -$value2; -// } - -// @if $value2 == null { -// @return $value1; -// } - -// @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { -// @return $value1 - $value2; -// } - -// @if type-of($value2) != number { -// $value2: unquote("(") + $value2 + unquote(")"); -// } - -// @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); -// } - -@function divide($dividend, $divisor, $precision: 10) { - $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); - $dividend: math.abs($dividend); - $divisor: math.abs($divisor); - @if $dividend == 0 { - @return 0; - } - @if $divisor == 0 { - @error "Cannot divide by 0"; - } - $remainder: $dividend; - $result: 0; - $factor: 10; - @while ($remainder > 0 and $precision >= 0) { - $quotient: 0; - @while ($remainder >= $divisor) { - $remainder: $remainder - $divisor; - $quotient: $quotient + 1; - } - $result: $result * 10 + $quotient; - $factor: $factor * .1; - $remainder: $remainder * 10; - $precision: $precision - 1; - @if ($precision < 0 and $remainder >= $divisor * 5) { - $result: $result + 1; - } - } - $result: $result * $factor * $sign; - $dividend-unit: math.unit($dividend); - $divisor-unit: math.unit($divisor); - $unit-map: ( - "px": 1px, - "rem": 1rem, - "em": 1em, - "%": 1% - ); - @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) { - $result: $result * map.get($unit-map, $dividend-unit); - } - @return $result; -} diff --git a/scss/_grid.scss b/scss/_grid.scss index fa39489bf5..60d5e010ec 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -1,5 +1,5 @@ @use "mixins/grid"; -@use "variables"; +@use "setup/variables"; // Row // diff --git a/scss/_images.scss b/scss/_images.scss index 26d627f6de..1ac3e98d3d 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -1,7 +1,7 @@ @use "mixins/border-radius"; @use "mixins/box-shadow"; @use "mixins/image"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // Responsive images (ensure images don't scale beyond their parents) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 40d95fc196..bbb035a468 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "mixins/border-radius"; @use "mixins/breakpoints"; -@use "variables"; +@use "setup/variables"; // Base class // diff --git a/scss/_maps.scss b/scss/_maps.scss index f35e1db918..795f7ca42d 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -2,7 +2,7 @@ @use "setup/variables" as *; @use "setup/functions" as *; // @use "functions"; -// @use "variables"; +// @use "setup/variables"; // Re-assigned maps // diff --git a/scss/_modal.scss b/scss/_modal.scss index 3b39de0d05..a41873fb5e 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -4,7 +4,7 @@ @use "mixins/box-shadow"; @use "mixins/breakpoints"; @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; // stylelint-disable function-disallowed-list diff --git a/scss/_nav.scss b/scss/_nav.scss index d52c1a18ee..23599021fc 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -1,7 +1,7 @@ @use "mixins/border-radius"; @use "mixins/gradients"; @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // Base class diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 50c65b3c4e..3a245912fa 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -7,7 +7,7 @@ @use "mixins/deprecate"; @use "mixins/gradients"; @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // Navbar diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index 9a08262cb9..b133522f27 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -3,7 +3,7 @@ @use "mixins/box-shadow"; @use "mixins/breakpoints"; @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; // stylelint-disable function-disallowed-list diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 7295208ec6..5536e05f29 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -3,7 +3,7 @@ @use "mixins/lists"; @use "mixins/pagination"; @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; .pagination { diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss index 2bee991b88..b1778368be 100644 --- a/scss/_placeholders.scss +++ b/scss/_placeholders.scss @@ -1,4 +1,4 @@ -@use "variables"; +@use "setup/variables"; .placeholder { display: inline-block; diff --git a/scss/_popover.scss b/scss/_popover.scss index 8a37b1038d..6932b2fb11 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -1,7 +1,7 @@ @use "mixins/border-radius"; @use "mixins/box-shadow"; @use "mixins/reset-text"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; .popover { diff --git a/scss/_progress.scss b/scss/_progress.scss index 4036fa28e9..4e1230bdd2 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -2,7 +2,7 @@ @use "mixins/box-shadow"; @use "mixins/gradients"; @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // Disable animation if transitions are disabled diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 85395400ab..498f0f159f 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -1,5 +1,5 @@ @use "mixins/border-radius"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix diff --git a/scss/_spinners.scss b/scss/_spinners.scss index 059dff0077..dae065f2b1 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -1,4 +1,4 @@ -@use "variables"; +@use "setup/variables"; // // Rotating border diff --git a/scss/_tables.scss b/scss/_tables.scss index aa92050ae7..0345a2ca87 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "mixins/breakpoints"; @use "mixins/table-variants"; -@use "variables"; +@use "setup/variables"; // // Basic Bootstrap table diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 93a0f4a71b..bec94f350b 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -1,5 +1,5 @@ @use "mixins/border-radius"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; .toast { diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index a5e579dc57..9aa065c4c8 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -1,7 +1,7 @@ @use "mixins/border-radius"; @use "mixins/deprecate"; @use "mixins/reset-text"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; // Base class diff --git a/scss/_transitions.scss b/scss/_transitions.scss index 3b37c8392f..c536376818 100644 --- a/scss/_transitions.scss +++ b/scss/_transitions.scss @@ -1,5 +1,5 @@ @use "mixins/transition"; -@use "variables"; +@use "setup/variables"; .fade { @include transition.transition(variables.$transition-fade); diff --git a/scss/_type.scss b/scss/_type.scss index 48f51659bd..d523c481dc 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -1,6 +1,7 @@ @use "mixins/lists"; -@use "variables"; +@use "setup/variables"; @use "vendor/rfs"; +@use "reboot"; // // Headings diff --git a/scss/_utilities.scss b/scss/_utilities.scss index fba70c6be1..860e504130 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "functions"; @use "maps"; -@use "variables"; +@use "setup/variables"; // Utilities diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index aa9c6cb510..237b6c4fc8 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -16,14 +16,14 @@ // Layout & components @use "root"; -// @use "reboot"; -// @use "type"; -// @use "images"; -// @use "containers"; -// @use "grid"; -// @use "tables"; -// @use "forms"; -// @use "buttons"; +@use "reboot"; +@use "type"; +@use "images"; +@use "containers"; +@use "grid"; +@use "tables"; +@use "forms"; +@use "buttons"; // @use "transitions"; // @use "dropdown"; // @use "button-group"; diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 7fd032b68a..5ada388bdd 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -1,6 +1,6 @@ @use "../mixins/border-radius"; @use "../mixins/transition"; -@use "../variables"; +@use "../setup/variables"; .form-floating { position: relative; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 1d8d8a0202..ed1ef8f4e1 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -1,8 +1,7 @@ -@use "../functions"; @use "../mixins/border-radius"; @use "../mixins/color-mode"; @use "../mixins/transition"; -@use "../variables"; +@use "../setup" as *; // // Check/radio @@ -10,101 +9,101 @@ .form-check { display: block; - min-height: variables.$form-check-min-height; - padding-left: variables.$form-check-padding-start; - margin-bottom: variables.$form-check-margin-bottom; + min-height: $form-check-min-height; + padding-left: $form-check-padding-start; + margin-bottom: $form-check-margin-bottom; .form-check-input { float: left; - margin-left: variables.$form-check-padding-start * -1; + margin-left: $form-check-padding-start * -1; } } .form-check-reverse { - padding-right: variables.$form-check-padding-start; + padding-right: $form-check-padding-start; padding-left: 0; text-align: right; .form-check-input { float: right; - margin-right: variables.$form-check-padding-start * -1; + margin-right: $form-check-padding-start * -1; margin-left: 0; } } .form-check-input { - --#{variables.$prefix}form-check-bg: #{variables.$form-check-input-bg}; + --#{$prefix}form-check-bg: #{$form-check-input-bg}; flex-shrink: 0; - width: variables.$form-check-input-width; - height: variables.$form-check-input-width; - margin-top: (variables.$line-height-base - variables.$form-check-input-width) * .5; // line-height minus check height + width: $form-check-input-width; + height: $form-check-input-width; + margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height vertical-align: top; appearance: none; - background-color: var(--#{variables.$prefix}form-check-bg); - background-image: var(--#{variables.$prefix}form-check-bg-image); + background-color: var(--#{$prefix}form-check-bg); + background-image: var(--#{$prefix}form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; - border: variables.$form-check-input-border; + border: $form-check-input-border; print-color-adjust: exact; // Keep themed appearance for print - @include transition.transition(variables.$form-check-transition); + @include transition.transition($form-check-transition); &[type="checkbox"] { - @include border-radius.border-radius(variables.$form-check-input-border-radius); + @include border-radius.border-radius($form-check-input-border-radius); } &[type="radio"] { // stylelint-disable-next-line property-disallowed-list - border-radius: variables.$form-check-radio-border-radius; + border-radius: $form-check-radio-border-radius; } &:active { - filter: variables.$form-check-input-active-filter; + filter: $form-check-input-active-filter; } &:focus { - border-color: variables.$form-check-input-focus-border; + border-color: $form-check-input-focus-border; outline: 0; - box-shadow: variables.$form-check-input-focus-box-shadow; + box-shadow: $form-check-input-focus-box-shadow; } &:checked { - background-color: variables.$form-check-input-checked-bg-color; - border-color: variables.$form-check-input-checked-border-color; + background-color: $form-check-input-checked-bg-color; + border-color: $form-check-input-checked-border-color; &[type="checkbox"] { - @if variables.$enable-gradients { - --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)}, var(--#{variables.$prefix}gradient); + @if $enable-gradients { + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient); } @else { - --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)}; + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}; } } &[type="radio"] { - @if variables.$enable-gradients { - --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)}, var(--#{variables.$prefix}gradient); + @if $enable-gradients { + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient); } @else { - --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)}; + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}; } } } &[type="checkbox"]:indeterminate { - background-color: variables.$form-check-input-indeterminate-bg-color; - border-color: variables.$form-check-input-indeterminate-border-color; + background-color: $form-check-input-indeterminate-bg-color; + border-color: $form-check-input-indeterminate-border-color; - @if variables.$enable-gradients { - --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)}, var(--#{variables.$prefix}gradient); + @if $enable-gradients { + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient); } @else { - --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)}; + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}; } } &:disabled { pointer-events: none; filter: none; - opacity: variables.$form-check-input-disabled-opacity; + opacity: $form-check-input-disabled-opacity; } // Use disabled attribute in addition of :disabled pseudo-class @@ -113,14 +112,14 @@ &:disabled { ~ .form-check-label { cursor: default; - opacity: variables.$form-check-label-disabled-opacity; + opacity: $form-check-label-disabled-opacity; } } } .form-check-label { - color: variables.$form-check-label-color; - cursor: variables.$form-check-label-cursor; + color: $form-check-label-color; + cursor: $form-check-label-cursor; } // @@ -128,39 +127,39 @@ // .form-switch { - padding-left: variables.$form-switch-padding-start; + padding-left: $form-switch-padding-start; .form-check-input { - --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-bg-image)}; + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)}; - width: variables.$form-switch-width; - margin-left: variables.$form-switch-padding-start * -1; - background-image: var(--#{variables.$prefix}form-switch-bg); + width: $form-switch-width; + margin-left: $form-switch-padding-start * -1; + background-image: var(--#{$prefix}form-switch-bg); background-position: left center; - @include border-radius.border-radius(variables.$form-switch-border-radius, 0); - @include transition.transition(variables.$form-switch-transition); + @include border-radius.border-radius($form-switch-border-radius, 0); + @include transition.transition($form-switch-transition); &:focus { - --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-focus-bg-image)}; + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)}; } &:checked { - background-position: variables.$form-switch-checked-bg-position; + background-position: $form-switch-checked-bg-position; - @if variables.$enable-gradients { - --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)}, var(--#{variables.$prefix}gradient); + @if $enable-gradients { + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient); } @else { - --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)}; + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}; } } } &.form-check-reverse { - padding-right: variables.$form-switch-padding-start; + padding-right: $form-switch-padding-start; padding-left: 0; .form-check-input { - margin-right: variables.$form-switch-padding-start * -1; + margin-right: $form-switch-padding-start * -1; margin-left: 0; } } @@ -168,7 +167,7 @@ .form-check-inline { display: inline-block; - margin-right: variables.$form-check-inline-margin-end; + margin-right: $form-check-inline-margin-end; } .btn-check { @@ -181,15 +180,15 @@ + .btn { pointer-events: none; filter: none; - opacity: variables.$form-check-btn-check-disabled-opacity; + opacity: $form-check-btn-check-disabled-opacity; } } } -@if variables.$enable-dark-mode { +@if $enable-dark-mode { @include color-mode.color-mode(dark) { .form-switch .form-check-input:not(:checked):not(:focus) { - --#{variables.$prefix}form-switch-bg: #{functions.escape-svg($form-switch-bg-image-dark)}; + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)}; } } } diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 3f3d8323a8..03b078f9e7 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -3,7 +3,7 @@ @use "../mixins/box-shadow"; @use "../mixins/gradients"; @use "../mixins/transition"; -@use "../variables"; +@use "../setup/variables"; @use "../vendor/rfs"; // diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index 86ceb04aa3..c408af0b6f 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -2,7 +2,7 @@ @use "../mixins/box-shadow"; @use "../mixins/gradients"; @use "../mixins/transition"; -@use "../variables"; +@use "../setup/variables"; // Range // diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 92e70d22f6..7adca06ed7 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -1,9 +1,8 @@ -@use "../functions"; @use "../mixins/border-radius"; @use "../mixins/box-shadow"; @use "../mixins/color-mode"; @use "../mixins/transition"; -@use "../variables"; +@use "../setup" as *; @use "../vendor/rfs"; // Select @@ -12,77 +11,77 @@ // https://primer.github.io/. .form-select { - --#{variables.$prefix}form-select-bg-img: #{functions.escape-svg(variables.$form-select-indicator)}; + --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)}; display: block; width: 100%; - padding: variables.$form-select-padding-y variables.$form-select-indicator-padding variables.$form-select-padding-y variables.$form-select-padding-x; - font-family: variables.$form-select-font-family; - @include rfs.font-size(variables.$form-select-font-size); - font-weight: variables.$form-select-font-weight; - line-height: variables.$form-select-line-height; - color: variables.$form-select-color; + padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; + font-family: $form-select-font-family; + @include rfs.font-size($form-select-font-size); + font-weight: $form-select-font-weight; + line-height: $form-select-line-height; + color: $form-select-color; appearance: none; - background-color: variables.$form-select-bg; - background-image: var(--#{variables.$prefix}form-select-bg-img), var(--#{variables.$prefix}form-select-bg-icon, none); + background-color: $form-select-bg; + background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none); background-repeat: no-repeat; - background-position: variables.$form-select-bg-position; - background-size: variables.$form-select-bg-size; - border: variables.$form-select-border-width solid variables.$form-select-border-color; - @include border-radius.border-radius(variables.$form-select-border-radius, 0); - @include box-shadow.box-shadow(variables.$form-select-box-shadow); - @include transition.transition(variables.$form-select-transition); + background-position: $form-select-bg-position; + background-size: $form-select-bg-size; + border: $form-select-border-width solid $form-select-border-color; + @include border-radius.border-radius($form-select-border-radius, 0); + @include box-shadow.box-shadow($form-select-box-shadow); + @include transition.transition($form-select-transition); &:focus { - border-color: variables.$form-select-focus-border-color; + border-color: $form-select-focus-border-color; outline: 0; - @if variables.$enable-shadows { - @include box-shadow.box-shadow(variables.$form-select-box-shadow, variables.$form-select-focus-box-shadow); + @if $enable-shadows { + @include box-shadow.box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); } @else { // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: variables.$form-select-focus-box-shadow; + box-shadow: $form-select-focus-box-shadow; } } &[multiple], &[size]:not([size="1"]) { - padding-right: variables.$form-select-padding-x; + padding-right: $form-select-padding-x; background-image: none; } &:disabled { - color: variables.$form-select-disabled-color; - background-color: variables.$form-select-disabled-bg; - border-color: variables.$form-select-disabled-border-color; + color: $form-select-disabled-color; + background-color: $form-select-disabled-bg; + border-color: $form-select-disabled-border-color; } // Remove outline from select box in FF &:-moz-focusring { color: transparent; - text-shadow: 0 0 0 variables.$form-select-color; + text-shadow: 0 0 0 $form-select-color; } } .form-select-sm { - padding-top: variables.$form-select-padding-y-sm; - padding-bottom: variables.$form-select-padding-y-sm; - padding-left: variables.$form-select-padding-x-sm; - @include rfs.font-size(variables.$form-select-font-size-sm); - @include border-radius.border-radius(variables.$form-select-border-radius-sm); + padding-top: $form-select-padding-y-sm; + padding-bottom: $form-select-padding-y-sm; + padding-left: $form-select-padding-x-sm; + @include rfs.font-size($form-select-font-size-sm); + @include border-radius.border-radius($form-select-border-radius-sm); } .form-select-lg { - padding-top: variables.$form-select-padding-y-lg; - padding-bottom: variables.$form-select-padding-y-lg; - padding-left: variables.$form-select-padding-x-lg; - @include rfs.font-size(variables.$form-select-font-size-lg); - @include border-radius.border-radius(variables.$form-select-border-radius-lg); + padding-top: $form-select-padding-y-lg; + padding-bottom: $form-select-padding-y-lg; + padding-left: $form-select-padding-x-lg; + @include rfs.font-size($form-select-font-size-lg); + @include border-radius.border-radius($form-select-border-radius-lg); } -@if variables.$enable-dark-mode { +@if $enable-dark-mode { @include color-mode.color-mode(dark) { .form-select { - --#{variables.$prefix}form-select-bg-img: #{functions.escape-svg($form-select-indicator-dark)}; + --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)}; } } } diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss index 4da63f44b9..cb8abe2df9 100644 --- a/scss/forms/_form-text.scss +++ b/scss/forms/_form-text.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; @use "../vendor/rfs"; // diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index db0ac80c4c..9776089d4f 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "sass:string"; @use "../mixins/border-radius"; -@use "../variables"; +@use "../setup/variables"; @use "../vendor/rfs"; // diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss index 1a26eb2c6c..c6be8f7362 100644 --- a/scss/forms/_labels.scss +++ b/scss/forms/_labels.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; @use "../vendor/rfs"; // diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index 372fb7aa49..f913c1258d 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -1,5 +1,5 @@ @use "../mixins/forms"; -@use "../variables"; +@use "../setup/variables"; // Form validation // diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss index adbc31911d..e5394280e7 100644 --- a/scss/helpers/_color-bg.scss +++ b/scss/helpers/_color-bg.scss @@ -1,5 +1,5 @@ @use "../functions"; -@use "../variables"; +@use "../setup/variables"; // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in variables.$theme-colors { diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index 74307d2592..aa6d539317 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -1,5 +1,5 @@ @use "../functions"; -@use "../variables"; +@use "../setup/variables"; // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in variables.$theme-colors { diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss index 7f9a25a42e..f310b59c29 100644 --- a/scss/helpers/_focus-ring.scss +++ b/scss/helpers/_focus-ring.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; .focus-ring:focus { outline: 0; diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index 49aa757a97..c30fa857b7 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -1,5 +1,5 @@ @use "../mixins/transition"; -@use "../variables"; +@use "../setup/variables"; .icon-link { display: inline-flex; diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss index 37544e9499..d792d69d46 100644 --- a/scss/helpers/_position.scss +++ b/scss/helpers/_position.scss @@ -1,6 +1,6 @@ @use "sass:map"; @use "../mixins/breakpoints"; -@use "../variables"; +@use "../setup/variables"; // Shorthand diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss index b11f102e81..969871682d 100644 --- a/scss/helpers/_ratio.scss +++ b/scss/helpers/_ratio.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; // Credit: Nicolas Gallagher and SUIT CSS. diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss index f31ae8f618..a538fe06af 100644 --- a/scss/helpers/_stretched-link.scss +++ b/scss/helpers/_stretched-link.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; // // Stretched link diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss index 462192386c..8b07e05878 100644 --- a/scss/helpers/_vr.scss +++ b/scss/helpers/_vr.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; .vr { display: inline-block; diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 3809934a35..e97b5730ac 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -1,6 +1,6 @@ @use "sass:list"; @use "sass:meta"; -@use "../variables"; +@use "../setup/variables"; // stylelint-disable property-disallowed-list // Single side border-radius diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss index 2fc140e59d..d7757f98aa 100644 --- a/scss/mixins/_box-shadow.scss +++ b/scss/mixins/_box-shadow.scss @@ -1,5 +1,5 @@ @use "sass:list"; -@use "../variables"; +@use "../setup/variables"; @mixin box-shadow($shadow...) { @if variables.$enable-shadows { diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 0ca37485c6..e0091e8766 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -1,6 +1,6 @@ @use "sass:list"; @use "sass:map"; -@use "../variables"; +@use "../setup/variables"; // Breakpoint viewport sizes and media queries. // diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index c6a283d586..89907edd85 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -1,6 +1,5 @@ @use "sass:color"; -@use "../functions"; -@use "../variables"; +@use "../setup" as *; @use "../vendor/rfs"; // Button variants @@ -12,64 +11,64 @@ @mixin button-variant( $background, $border, - $color: functions.color-contrast($background), - $hover-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-hover-bg-shade-amount), functions.tint-color($background, variables.$btn-hover-bg-tint-amount)), - $hover-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-hover-border-shade-amount), functions.tint-color($border, variables.$btn-hover-border-tint-amount)), - $hover-color: functions.color-contrast($hover-background), - $active-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-active-bg-shade-amount), functions.tint-color($background, variables.$btn-active-bg-tint-amount)), - $active-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-active-border-shade-amount), functions.tint-color($border, variables.$btn-active-border-tint-amount)), - $active-color: functions.color-contrast($active-background), + $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: functions.color-contrast($disabled-background) + $disabled-color: color-contrast($disabled-background) ) { - --#{variables.$prefix}btn-color: #{$color}; - --#{variables.$prefix}btn-bg: #{$background}; - --#{variables.$prefix}btn-border-color: #{$border}; - --#{variables.$prefix}btn-hover-color: #{$hover-color}; - --#{variables.$prefix}btn-hover-bg: #{$hover-background}; - --#{variables.$prefix}btn-hover-border-color: #{$hover-border}; - --#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb(color.mix($color, $border, 15%))}; - --#{variables.$prefix}btn-active-color: #{$active-color}; - --#{variables.$prefix}btn-active-bg: #{$active-background}; - --#{variables.$prefix}btn-active-border-color: #{$active-border}; - --#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow}; - --#{variables.$prefix}btn-disabled-color: #{$disabled-color}; - --#{variables.$prefix}btn-disabled-bg: #{$disabled-background}; - --#{variables.$prefix}btn-disabled-border-color: #{$disabled-border}; + --#{$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: functions.color-contrast($color), + $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, - $active-color: functions.color-contrast($active-background) + $active-color: color-contrast($active-background) ) { - --#{variables.$prefix}btn-color: #{$color}; - --#{variables.$prefix}btn-border-color: #{$color}; - --#{variables.$prefix}btn-hover-color: #{$color-hover}; - --#{variables.$prefix}btn-hover-bg: #{$active-background}; - --#{variables.$prefix}btn-hover-border-color: #{$active-border}; - --#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb($color)}; - --#{variables.$prefix}btn-active-color: #{$active-color}; - --#{variables.$prefix}btn-active-bg: #{$active-background}; - --#{variables.$prefix}btn-active-border-color: #{$active-border}; - --#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow}; - --#{variables.$prefix}btn-disabled-color: #{$color}; - --#{variables.$prefix}btn-disabled-bg: transparent; - --#{variables.$prefix}btn-disabled-border-color: #{$color}; - --#{variables.$prefix}gradient: none; + --#{$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) { - --#{variables.$prefix}btn-padding-y: #{$padding-y}; - --#{variables.$prefix}btn-padding-x: #{$padding-x}; - @include rfs.rfs($font-size, --#{variables.$prefix}btn-font-size); - --#{variables.$prefix}btn-border-radius: #{$border-radius}; + --#{$prefix}btn-padding-y: #{$padding-y}; + --#{$prefix}btn-padding-x: #{$padding-x}; + @include rfs.rfs($font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-border-radius: #{$border-radius}; } // scss-docs-end btn-size-mixin diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss index 2f1a1e1472..c1b508dabb 100644 --- a/scss/mixins/_caret.scss +++ b/scss/mixins/_caret.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; // scss-docs-start caret-mixins @mixin caret-down($width: variables.$caret-width) { diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss index 1073ce3ab2..28062e811d 100644 --- a/scss/mixins/_container.scss +++ b/scss/mixins/_container.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; // Container mixins diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 608b6e5d00..e1c2e1834e 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -1,8 +1,7 @@ -@use "../functions"; -@use "../variables"; @use "../vendor/rfs"; @use "border-radius"; @use "box-shadow"; +@use "../setup" as *; // This mixin uses an `if()` technique to be compatible with Dart Sass // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details @@ -25,17 +24,17 @@ $state, $color, $icon, - $tooltip-color: functions.color-contrast($color), - $tooltip-bg-color: rgba($color, variables.$form-feedback-tooltip-opacity), - $focus-box-shadow: 0 0 variables.$input-btn-focus-blur variables.$input-focus-width rgba($color, variables.$input-btn-focus-color-opacity), + $tooltip-color: color-contrast($color), + $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), + $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity), $border-color: $color ) { .#{$state}-feedback { display: none; width: 100%; - margin-top: variables.$form-feedback-margin-top; - @include rfs.font-size(variables.$form-feedback-font-size); - font-style: variables.$form-feedback-font-style; + margin-top: $form-feedback-margin-top; + @include rfs.font-size($form-feedback-font-size); + font-style: $form-feedback-font-style; color: $color; } @@ -45,13 +44,13 @@ z-index: 5; display: none; max-width: 100%; // Contain to parent when possible - padding: variables.$form-feedback-tooltip-padding-y variables.$form-feedback-tooltip-padding-x; + padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; - @include rfs.font-size(variables.$form-feedback-tooltip-font-size); - line-height: variables.$form-feedback-tooltip-line-height; + @include rfs.font-size($form-feedback-tooltip-font-size); + line-height: $form-feedback-tooltip-line-height; color: $tooltip-color; background-color: $tooltip-bg-color; - @include border-radius.border-radius(variables.$form-feedback-tooltip-border-radius); + @include border-radius.border-radius($form-feedback-tooltip-border-radius); } @include form-validation-state-selector($state) { @@ -65,18 +64,18 @@ @include form-validation-state-selector($state) { border-color: $border-color; - @if variables.$enable-validation-icons { - padding-right: variables.$input-height-inner; - background-image: functions.escape-svg($icon); + @if $enable-validation-icons { + padding-right: $input-height-inner; + background-image: escape-svg($icon); background-repeat: no-repeat; - background-position: right variables.$input-height-inner-quarter center; - background-size: variables.$input-height-inner-half variables.$input-height-inner-half; + background-position: right $input-height-inner-quarter center; + background-size: $input-height-inner-half $input-height-inner-half; } &:focus { border-color: $border-color; - @if variables.$enable-shadows { - @include box-shadow.box-shadow(variables.$input-box-shadow, $focus-box-shadow); + @if $enable-shadows { + @include box-shadow.box-shadow($input-box-shadow, $focus-box-shadow); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $focus-box-shadow; @@ -88,9 +87,9 @@ // stylelint-disable-next-line selector-no-qualifying-type textarea.form-control { @include form-validation-state-selector($state) { - @if variables.$enable-validation-icons { - padding-right: variables.$input-height-inner; - background-position: top variables.$input-height-inner-quarter right variables.$input-height-inner-quarter; + @if $enable-validation-icons { + padding-right: $input-height-inner; + background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } } @@ -99,20 +98,20 @@ @include form-validation-state-selector($state) { border-color: $border-color; - @if variables.$enable-validation-icons { + @if $enable-validation-icons { &:not([multiple]):not([size]), &:not([multiple])[size="1"] { - --#{variables.$prefix}form-select-bg-icon: #{functions.escape-svg($icon)}; - padding-right: variables.$form-select-feedback-icon-padding-end; - background-position: variables.$form-select-bg-position, variables.$form-select-feedback-icon-position; - background-size: variables.$form-select-bg-size, variables.$form-select-feedback-icon-size; + --#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; + padding-right: $form-select-feedback-icon-padding-end; + background-position: $form-select-bg-position, $form-select-feedback-icon-position; + background-size: $form-select-bg-size, $form-select-feedback-icon-size; } } &:focus { border-color: $border-color; - @if variables.$enable-shadows { - @include box-shadow.box-shadow(variables.$form-select-box-shadow, $focus-box-shadow); + @if $enable-shadows { + @include box-shadow.box-shadow($form-select-box-shadow, $focus-box-shadow); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $focus-box-shadow; @@ -123,8 +122,8 @@ .form-control-color { @include form-validation-state-selector($state) { - @if variables.$enable-validation-icons { - width: calc(#{variables.$form-color-width} + #{variables.$input-height-inner}); + @if $enable-validation-icons { + width: calc(#{$form-color-width} + #{$input-height-inner}); } } } diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index 6f38e58df8..287cfa9b1a 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; // Gradients diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index d0645075ca..d0ac0d828c 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -1,10 +1,9 @@ @use "sass:map"; @use "sass:math"; @use "sass:meta"; -// @use "../setup" as *; -// @use "../maps"; -// @use "../setup/variables"; -// @use "breakpoints"; +@use "../setup" as *; +@use "../maps"; +@use "breakpoints"; // Grid system // diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index a68311997a..26aacf4156 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; @use "../vendor/rfs"; // Pagination diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss index aa5f8ab92e..142140295c 100644 --- a/scss/mixins/_reset-text.scss +++ b/scss/mixins/_reset-text.scss @@ -1,4 +1,4 @@ -@use "../variables"; +@use "../setup/variables"; @mixin reset-text { font-family: variables.$font-family-base; diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss index 40cec1e6e5..2dfea0c0cb 100644 --- a/scss/mixins/_table-variants.scss +++ b/scss/mixins/_table-variants.scss @@ -1,29 +1,28 @@ @use "sass:color"; @use "sass:math"; -@use "../functions"; -@use "../variables"; +@use "../setup" as *; // scss-docs-start table-variant @mixin table-variant($state, $background) { .table-#{$state} { - $color: functions.color-contrast(functions.opaque(variables.$body-bg, $background)); - $hover-bg: color.mix($color, $background, math.percentage(variables.$table-hover-bg-factor)); - $striped-bg: color.mix($color, $background, math.percentage(variables.$table-striped-bg-factor)); - $active-bg: color.mix($color, $background, math.percentage(variables.$table-active-bg-factor)); - $table-border-color: color.mix($color, $background, math.percentage(variables.$table-border-factor)); + $color: color-contrast(opaque($body-bg, $background)); + $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); + $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); + $active-bg: mix($color, $background, percentage($table-active-bg-factor)); + $table-border-color: mix($color, $background, percentage($table-border-factor)); - --#{variables.$prefix}table-color: #{$color}; - --#{variables.$prefix}table-bg: #{$background}; - --#{variables.$prefix}table-border-color: #{$table-border-color}; - --#{variables.$prefix}table-striped-bg: #{$striped-bg}; - --#{variables.$prefix}table-striped-color: #{functions.color-contrast($striped-bg)}; - --#{variables.$prefix}table-active-bg: #{$active-bg}; - --#{variables.$prefix}table-active-color: #{functions.color-contrast($active-bg)}; - --#{variables.$prefix}table-hover-bg: #{$hover-bg}; - --#{variables.$prefix}table-hover-color: #{functions.color-contrast($hover-bg)}; + --#{$prefix}table-color: #{$color}; + --#{$prefix}table-bg: #{$background}; + --#{$prefix}table-border-color: #{$table-border-color}; + --#{$prefix}table-striped-bg: #{$striped-bg}; + --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; + --#{$prefix}table-active-bg: #{$active-bg}; + --#{$prefix}table-active-color: #{color-contrast($active-bg)}; + --#{$prefix}table-hover-bg: #{$hover-bg}; + --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; - color: var(--#{variables.$prefix}table-color); - border-color: var(--#{variables.$prefix}table-border-color); + color: var(--#{$prefix}table-color); + border-color: var(--#{$prefix}table-border-color); } } -// scss-docs-end table-variant +// scss-docs-end table-variant \ No newline at end of file diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss index db8688c028..261e4e6bc5 100644 --- a/scss/mixins/_transition.scss +++ b/scss/mixins/_transition.scss @@ -1,5 +1,5 @@ @use "sass:list"; -@use "../variables"; +@use "../setup/variables"; // stylelint-disable property-disallowed-list @mixin transition($transition...) { diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index a673cc096a..a30ab02960 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -2,7 +2,7 @@ @use "sass:map"; @use "sass:meta"; @use "sass:string"; -@use "../variables"; +@use "../setup/variables"; @use "../vendor/rfs"; // Utility generator diff --git a/scss/setup/_functions.scss b/scss/setup/_functions.scss index c8d5968434..ba46cc9f98 100644 --- a/scss/setup/_functions.scss +++ b/scss/setup/_functions.scss @@ -317,4 +317,4 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 $result: $result * map.get($unit-map, $dividend-unit); } @return $result; -} +} \ No newline at end of file diff --git a/scss/setup/_variables.scss b/scss/setup/_variables.scss index 24bc3572e4..34ed1b1696 100644 --- a/scss/setup/_variables.scss +++ b/scss/setup/_variables.scss @@ -1,6 +1,6 @@ @use "sass:color"; @use "sass:string"; -@use "functions"; +@use "functions" as *; // Variables // @@ -847,7 +847,8 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; $btn-link-color: var(--#{$prefix}link-color) !default; $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default; $btn-link-disabled-color: $gray-600 !default; -$btn-link-focus-shadow-rgb: to-rgb(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default; +// $btn-link-focus-shadow-rgb: to-rgb(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default; +$btn-link-focus-shadow-rgb: #fd0 !default; // Allows for customizing button radius independently from global border radius $btn-border-radius: var(--#{$prefix}border-radius) !default; diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss index 96471c7b97..84a5c31b5e 100644 --- a/scss/utilities/_api.scss +++ b/scss/utilities/_api.scss @@ -3,7 +3,7 @@ @use "../mixins/breakpoints"; @use "../mixins/utilities" as mixins-utilities; @use "../utilities"; -@use "../variables"; +@use "../setup/variables"; @use "../vendor/rfs"; // Loop over each breakpoint