-@use "sass:map";
-@use "colors" as *;
-@use "functions" as *;
-@use "config" as *;
-@use "variables" as *;
-
-// Re-assigned maps
-//
-// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
-
-// scss-docs-start theme-colors-rgb
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
-// scss-docs-end theme-colors-rgb
-
-// scss-docs-start theme-text-map
-$theme-colors-text: (
- "primary": $primary-text-emphasis,
- "secondary": $secondary-text-emphasis,
- "success": $success-text-emphasis,
- "info": $info-text-emphasis,
- "warning": $warning-text-emphasis,
- "danger": $danger-text-emphasis,
- "light": $light-text-emphasis,
- "dark": $dark-text-emphasis,
-) !default;
-// scss-docs-end theme-text-map
-
-// scss-docs-start theme-bg-subtle-map
-$theme-colors-bg-subtle: (
- "primary": $primary-bg-subtle,
- "secondary": $secondary-bg-subtle,
- "success": $success-bg-subtle,
- "info": $info-bg-subtle,
- "warning": $warning-bg-subtle,
- "danger": $danger-bg-subtle,
- "light": $light-bg-subtle,
- "dark": $dark-bg-subtle,
-) !default;
-// scss-docs-end theme-bg-subtle-map
-
-// scss-docs-start theme-border-subtle-map
-$theme-colors-border-subtle: (
- "primary": $primary-border-subtle,
- "secondary": $secondary-border-subtle,
- "success": $success-border-subtle,
- "info": $info-border-subtle,
- "warning": $warning-border-subtle,
- "danger": $danger-border-subtle,
- "light": $light-border-subtle,
- "dark": $dark-border-subtle,
-) !default;
-// scss-docs-end theme-border-subtle-map
-
-$theme-colors-text-dark: null !default;
-$theme-colors-bg-subtle-dark: null !default;
-$theme-colors-border-subtle-dark: null !default;
-
-@if $enable-dark-mode {
- // scss-docs-start theme-text-dark-map
- $theme-colors-text-dark: (
- "primary": $primary-text-emphasis-dark,
- "secondary": $secondary-text-emphasis-dark,
- "success": $success-text-emphasis-dark,
- "info": $info-text-emphasis-dark,
- "warning": $warning-text-emphasis-dark,
- "danger": $danger-text-emphasis-dark,
- "light": $light-text-emphasis-dark,
- "dark": $dark-text-emphasis-dark,
- ) !default;
- // scss-docs-end theme-text-dark-map
-
- // scss-docs-start theme-bg-subtle-dark-map
- $theme-colors-bg-subtle-dark: (
- "primary": $primary-bg-subtle-dark,
- "secondary": $secondary-bg-subtle-dark,
- "success": $success-bg-subtle-dark,
- "info": $info-bg-subtle-dark,
- "warning": $warning-bg-subtle-dark,
- "danger": $danger-bg-subtle-dark,
- "light": $light-bg-subtle-dark,
- "dark": $dark-bg-subtle-dark,
- ) !default;
- // scss-docs-end theme-bg-subtle-dark-map
-
- // scss-docs-start theme-border-subtle-dark-map
- $theme-colors-border-subtle-dark: (
- "primary": $primary-border-subtle-dark,
- "secondary": $secondary-border-subtle-dark,
- "success": $success-border-subtle-dark,
- "info": $info-border-subtle-dark,
- "warning": $warning-border-subtle-dark,
- "danger": $danger-border-subtle-dark,
- "light": $light-border-subtle-dark,
- "dark": $dark-border-subtle-dark,
- ) !default;
- // scss-docs-end theme-border-subtle-dark-map
-}
-
-// Utilities maps
-//
-// Extends the default `$theme-colors` maps to help create our utilities.
-
-// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
-// scss-docs-start utilities-colors
-$utilities-colors: $theme-colors-rgb !default;
-// scss-docs-end utilities-colors
-
-// scss-docs-start utilities-text-colors
-$utilities-text: map.merge(
- $utilities-colors,
- (
- "black": to-rgb($black),
- "white": to-rgb($white),
- "body": to-rgb($body-color)
- )
-) !default;
-$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
-
-$utilities-text-emphasis-colors: (
- "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
- "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
- "success-emphasis": var(--#{$prefix}success-text-emphasis),
- "info-emphasis": var(--#{$prefix}info-text-emphasis),
- "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
- "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
- "light-emphasis": var(--#{$prefix}light-text-emphasis),
- "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
-) !default;
-// scss-docs-end utilities-text-colors
-
-// scss-docs-start utilities-bg-colors
-$utilities-bg: map.merge(
- $utilities-colors,
- (
- "black": to-rgb($black),
- "white": to-rgb($white),
- "body": to-rgb($body-bg)
- )
-) !default;
-$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
-
-$utilities-bg-subtle: (
- "primary-subtle": var(--#{$prefix}primary-bg-subtle),
- "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
- "success-subtle": var(--#{$prefix}success-bg-subtle),
- "info-subtle": var(--#{$prefix}info-bg-subtle),
- "warning-subtle": var(--#{$prefix}warning-bg-subtle),
- "danger-subtle": var(--#{$prefix}danger-bg-subtle),
- "light-subtle": var(--#{$prefix}light-bg-subtle),
- "dark-subtle": var(--#{$prefix}dark-bg-subtle)
-) !default;
-// scss-docs-end utilities-bg-colors
-
-// scss-docs-start utilities-border-colors
-$utilities-border: map.merge(
- $utilities-colors,
- (
- "black": to-rgb($black),
- "white": to-rgb($white)
- )
-) !default;
-$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
-
-$utilities-border-subtle: (
- "primary-subtle": var(--#{$prefix}primary-border-subtle),
- "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
- "success-subtle": var(--#{$prefix}success-border-subtle),
- "info-subtle": var(--#{$prefix}info-border-subtle),
- "warning-subtle": var(--#{$prefix}warning-border-subtle),
- "danger-subtle": var(--#{$prefix}danger-border-subtle),
- "light-subtle": var(--#{$prefix}light-border-subtle),
- "dark-subtle": var(--#{$prefix}dark-border-subtle)
-) !default;
-// scss-docs-end utilities-border-colors
-
-$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
-
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
-
-$gutters: $spacers !default;
+// @use "sass:map";
+// @use "colors" as *;
+// @use "functions" as *;
+// @use "config" as *;
+// @use "variables" as *;
+
+// // Re-assigned maps
+// //
+// // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// // scss-docs-start theme-colors-rgb
+// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// // scss-docs-end theme-colors-rgb
+
+// // scss-docs-start theme-text-map
+// $theme-colors-text: (
+// "primary": $primary-text-emphasis,
+// "secondary": $secondary-text-emphasis,
+// "success": $success-text-emphasis,
+// "info": $info-text-emphasis,
+// "warning": $warning-text-emphasis,
+// "danger": $danger-text-emphasis,
+// "light": $light-text-emphasis,
+// "dark": $dark-text-emphasis,
+// ) !default;
+// // scss-docs-end theme-text-map
+
+// // scss-docs-start theme-bg-subtle-map
+// $theme-colors-bg-subtle: (
+// "primary": $primary-bg-subtle,
+// "secondary": $secondary-bg-subtle,
+// "success": $success-bg-subtle,
+// "info": $info-bg-subtle,
+// "warning": $warning-bg-subtle,
+// "danger": $danger-bg-subtle,
+// "light": $light-bg-subtle,
+// "dark": $dark-bg-subtle,
+// ) !default;
+// // scss-docs-end theme-bg-subtle-map
+
+// // scss-docs-start theme-border-subtle-map
+// $theme-colors-border-subtle: (
+// "primary": $primary-border-subtle,
+// "secondary": $secondary-border-subtle,
+// "success": $success-border-subtle,
+// "info": $info-border-subtle,
+// "warning": $warning-border-subtle,
+// "danger": $danger-border-subtle,
+// "light": $light-border-subtle,
+// "dark": $dark-border-subtle,
+// ) !default;
+// // scss-docs-end theme-border-subtle-map
+
+// $theme-colors-text-dark: null !default;
+// $theme-colors-bg-subtle-dark: null !default;
+// $theme-colors-border-subtle-dark: null !default;
+
+// @if $enable-dark-mode {
+// // scss-docs-start theme-text-dark-map
+// $theme-colors-text-dark: (
+// "primary": $primary-text-emphasis-dark,
+// "secondary": $secondary-text-emphasis-dark,
+// "success": $success-text-emphasis-dark,
+// "info": $info-text-emphasis-dark,
+// "warning": $warning-text-emphasis-dark,
+// "danger": $danger-text-emphasis-dark,
+// "light": $light-text-emphasis-dark,
+// "dark": $dark-text-emphasis-dark,
+// ) !default;
+// // scss-docs-end theme-text-dark-map
+
+// // scss-docs-start theme-bg-subtle-dark-map
+// $theme-colors-bg-subtle-dark: (
+// "primary": $primary-bg-subtle-dark,
+// "secondary": $secondary-bg-subtle-dark,
+// "success": $success-bg-subtle-dark,
+// "info": $info-bg-subtle-dark,
+// "warning": $warning-bg-subtle-dark,
+// "danger": $danger-bg-subtle-dark,
+// "light": $light-bg-subtle-dark,
+// "dark": $dark-bg-subtle-dark,
+// ) !default;
+// // scss-docs-end theme-bg-subtle-dark-map
+
+// // scss-docs-start theme-border-subtle-dark-map
+// $theme-colors-border-subtle-dark: (
+// "primary": $primary-border-subtle-dark,
+// "secondary": $secondary-border-subtle-dark,
+// "success": $success-border-subtle-dark,
+// "info": $info-border-subtle-dark,
+// "warning": $warning-border-subtle-dark,
+// "danger": $danger-border-subtle-dark,
+// "light": $light-border-subtle-dark,
+// "dark": $dark-border-subtle-dark,
+// ) !default;
+// // scss-docs-end theme-border-subtle-dark-map
+// }
+
+// // Utilities maps
+// //
+// // Extends the default `$theme-colors` maps to help create our utilities.
+
+// // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// // scss-docs-start utilities-colors
+// $utilities-colors: $theme-colors-rgb !default;
+// // scss-docs-end utilities-colors
+
+// // scss-docs-start utilities-text-colors
+// $utilities-text: map.merge(
+// $utilities-colors,
+// (
+// "black": to-rgb($black),
+// "white": to-rgb($white),
+// "body": to-rgb($body-color)
+// )
+// ) !default;
+// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+// $utilities-text-emphasis-colors: (
+// "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
+// "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
+// "success-emphasis": var(--#{$prefix}success-text-emphasis),
+// "info-emphasis": var(--#{$prefix}info-text-emphasis),
+// "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
+// "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
+// "light-emphasis": var(--#{$prefix}light-text-emphasis),
+// "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
+// ) !default;
+// // scss-docs-end utilities-text-colors
+
+// // scss-docs-start utilities-bg-colors
+// $utilities-bg: map.merge(
+// $utilities-colors,
+// (
+// "black": to-rgb($black),
+// "white": to-rgb($white),
+// "body": to-rgb($body-bg)
+// )
+// ) !default;
+// $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+// $utilities-bg-subtle: (
+// "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+// "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+// "success-subtle": var(--#{$prefix}success-bg-subtle),
+// "info-subtle": var(--#{$prefix}info-bg-subtle),
+// "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+// "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+// "light-subtle": var(--#{$prefix}light-bg-subtle),
+// "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+// ) !default;
+// // scss-docs-end utilities-bg-colors
+
+// // scss-docs-start utilities-border-colors
+// $utilities-border: map.merge(
+// $utilities-colors,
+// (
+// "black": to-rgb($black),
+// "white": to-rgb($white)
+// )
+// ) !default;
+// $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+// $utilities-border-subtle: (
+// "primary-subtle": var(--#{$prefix}primary-border-subtle),
+// "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+// "success-subtle": var(--#{$prefix}success-border-subtle),
+// "info-subtle": var(--#{$prefix}info-border-subtle),
+// "warning-subtle": var(--#{$prefix}warning-border-subtle),
+// "danger-subtle": var(--#{$prefix}danger-border-subtle),
+// "light-subtle": var(--#{$prefix}light-border-subtle),
+// "dark-subtle": var(--#{$prefix}dark-border-subtle)
+// ) !default;
+// // scss-docs-end utilities-border-colors
+
+// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+
+// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+// $gutters: $spacers !default;
@use "colors" as *;
@use "config" as *;
@use "variables" as *;
-@use "maps" as *;
+@use "theme" as *;
+// @use "maps" as *;
@use "vendor/rfs" as *;
@use "mixins/color-mode" as *;
+:root {
+ color-scheme: light dark;
+
+ @each $color-group-name, $color-group in $all-colors {
+ @if meta.type-of($color-group) == "map" {
+ @each $color-name, $color-value in $color-group {
+ --#{$prefix}#{$color-name}: #{$color-value};
+ }
+ } @else {
+ --#{$prefix}#{$color-group-name}: #{$color-group};
+ }
+ }
+
+ @each $color, $value in $theme-colors {
+ --#{$prefix}#{$color}: #{$value};
+ }
+
+ @each $color-name, $color-map in $new-theme-colors {
+ @each $key, $value in $color-map {
+ --#{$prefix}#{$color-name}-#{$key}: #{$value};
+ }
+ }
+
+ --#{$prefix}black: #{$black};
+ --#{$prefix}white: #{$white};
+}
+
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
//
// Generate palettes for full colors, grays, and theme colors.
- @each $color, $value in $colors {
- --#{$prefix}#{$color}: #{$value};
- }
+ // @each $color, $value in $colors {
+ // --#{$prefix}#{$color}: #{$value};
+ // }
- @each $color, $value in $grays {
- --#{$prefix}gray-#{$color}: #{$value};
- }
+ // @each $color, $value in $grays {
+ // --#{$prefix}gray-#{$color}: #{$value};
+ // }
- @each $color, $value in $theme-colors {
- --#{$prefix}#{$color}: #{$value};
- }
+ // @each $color, $value in $theme-colors {
+ // --#{$prefix}#{$color}: #{$value};
+ // }
- @each $color, $value in $theme-colors-rgb {
- --#{$prefix}#{$color}-rgb: #{$value};
- }
+ // @each $color, $value in $theme-colors-rgb {
+ // --#{$prefix}#{$color}-rgb: #{$value};
+ // }
- @each $color, $value in $theme-colors-text {
- --#{$prefix}#{$color}-text-emphasis: #{$value};
- }
+ // @each $color, $value in $theme-colors-text {
+ // --#{$prefix}#{$color}-text-emphasis: #{$value};
+ // }
- @each $color, $value in $theme-colors-bg-subtle {
- --#{$prefix}#{$color}-bg-subtle: #{$value};
- }
+ // @each $color, $value in $theme-colors-bg-subtle {
+ // --#{$prefix}#{$color}-bg-subtle: #{$value};
+ // }
- @each $color, $value in $theme-colors-border-subtle {
- --#{$prefix}#{$color}-border-subtle: #{$value};
- }
+ // @each $color, $value in $theme-colors-border-subtle {
+ // --#{$prefix}#{$color}-border-subtle: #{$value};
+ // }
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
--#{$prefix}body-text-align: #{$body-text-align};
}
+ @each $key, $value in $theme-bgs {
+ $key: if($key == null, "", "-" + $key);
+ --#{$prefix}bg#{$key}: #{$value};
+ }
+
+ @each $key, $value in $theme-fgs {
+ $key: if($key == null, "", "-" + $key);
+ --#{$prefix}fg#{$key}: #{$value};
+ }
+
+ @each $key, $value in $theme-borders {
+ $key: if($key == null, "", "-" + $key);
+ --#{$prefix}border#{$key}: #{$value};
+ }
+
--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
- --#{$prefix}emphasis-color: #{$body-emphasis-color};
- --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+ // --#{$prefix}emphasis-color: #{$body-emphasis-color};
+ // --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
- --#{$prefix}secondary-color: #{$body-secondary-color};
- --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
- --#{$prefix}secondary-bg: #{$body-secondary-bg};
- --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+ // --#{$prefix}secondary-color: #{$body-secondary-color};
+ // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+ // --#{$prefix}secondary-bg: #{$body-secondary-bg};
+ // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
- --#{$prefix}tertiary-color: #{$body-tertiary-color};
- --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
- --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
- --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+ // --#{$prefix}tertiary-color: #{$body-tertiary-color};
+ // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+ // --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+ // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color};
- --#{$prefix}link-color: #{$link-color};
- --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
- --#{$prefix}link-decoration: #{$link-decoration};
+ // --#{$prefix}link-color: #{$link-color};
+ // --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+ // --#{$prefix}link-decoration: #{$link-decoration};
+
+ // --#{$prefix}link-hover-color: #{$link-hover-color};
+ // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
- --#{$prefix}link-hover-color: #{$link-hover-color};
- --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+ --#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
+ --#{$prefix}link-decoration: #{$link-decoration};
+ --#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
@if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
- @each $color, $value in $theme-colors-text-dark {
- --#{$prefix}#{$color}-text-emphasis: #{$value};
- }
+ // @each $color, $value in $theme-colors-text-dark {
+ // --#{$prefix}#{$color}-text-emphasis: #{$value};
+ // }
- @each $color, $value in $theme-colors-bg-subtle-dark {
- --#{$prefix}#{$color}-bg-subtle: #{$value};
- }
+ // @each $color, $value in $theme-colors-bg-subtle-dark {
+ // --#{$prefix}#{$color}-bg-subtle: #{$value};
+ // }
- @each $color, $value in $theme-colors-border-subtle-dark {
- --#{$prefix}#{$color}-border-subtle: #{$value};
- }
+ // @each $color, $value in $theme-colors-border-subtle-dark {
+ // --#{$prefix}#{$color}-border-subtle: #{$value};
+ // }
--#{$prefix}heading-color: #{$headings-color-dark};
@use "sass:map";
-@use "colors" as *;
@use "config" as *;
+@use "colors" as *;
@use "variables" as *;
@use "functions" as *;
-@use "maps" as *;
-
-// Utilities
+@use "theme" as *;
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-aspect-ratio
- "aspect-ratio": (
+ "aspect-ratio-attr": (
+ selector: "attr-includes",
+ class: "ratio-",
property: aspect-ratio,
+ values: var(--#{$prefix}ratio),
+ ),
+ "aspect-ratio": (
+ // property: aspect-ratio,
+ property: --#{$prefix}ratio,
class: ratio,
values: $aspect-ratios
),
// scss-docs-end utils-aspect-ratio
// scss-docs-start utils-float
"float": (
- responsive: true,
property: float,
+ responsive: true,
values: (
start: left,
end: right,
print: true,
property: display,
class: d,
- values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
+ values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
),
// scss-docs-end utils-display
// scss-docs-start utils-shadow
// scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring
"focus-ring": (
- css-var: true,
- css-variable-name: focus-ring-color,
+ // css-var: true,
+ property: --#{$prefix}focus-ring-color,
class: focus-ring,
- values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
+ values: theme-color-values("focus-ring"),
),
// scss-docs-end utils-focus-ring
// scss-docs-start utils-position
)
),
"border-top": (
- property: border-top,
+ class: border-top,
+ property: border-block-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-end": (
- property: border-right,
+ property: border-inline-end,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
)
),
"border-bottom": (
- property: border-bottom,
+ property: border-block-end,
+ class: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-start": (
- property: border-left,
+ property: border-inline-start,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
- "border-color": (
- property: border-color,
- class: border,
- local-vars: (
- "border-opacity": 1
- ),
- values: $utilities-border-colors
+ "border-y": (
+ property: border-block,
+ values: (
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ 0: 0,
+ )
),
- "subtle-border-color": (
+ "border-x": (
+ property: border-inline,
+ values: (
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ 0: 0,
+ )
+ ),
+ "border-color": (
property: border-color,
class: border,
- values: $utilities-border-subtle
+ values: theme-color-values("border")
),
"border-width": (
property: border-width,
class: border,
values: $border-widths
),
- "border-opacity": (
- css-var: true,
- class: border-opacity,
- values: (
- 10: .1,
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1
- )
- ),
+ // "border-opacity": (
+ // css-var: true,
+ // class: border-opacity,
+ // values: (
+ // 10: .1,
+ // 25: .25,
+ // 50: .5,
+ // 75: .75,
+ // 100: 1
+ // )
+ // ),
// scss-docs-end utils-borders
// Sizing utilities
// scss-docs-start utils-sizing
50: 50%,
75: 75%,
100: 100%,
- auto: auto
+ auto: auto,
+ min: min-content,
+ max: max-content,
+ fit: fit-content,
)
),
"max-width": (
property: max-width,
- class: mw,
+ class: max-w,
values: (100: 100%)
),
+ "min-width": (
+ property: min-width,
+ class: min-w,
+ values: (
+ 0: 0,
+ 100: 100%
+ )
+ ),
"viewport-width": (
property: width,
class: vw,
50: 50%,
75: 75%,
100: 100%,
- auto: auto
+ auto: auto,
+ min: min-content,
+ max: max-content,
+ fit: fit-content,
)
),
"max-height": (
property: max-height,
- class: mh,
+ class: max-h,
values: (100: 100%)
),
+ "min-height": (
+ property: min-height,
+ class: min-h,
+ values: (
+ 0: 0,
+ 100: 100%,
+ ),
+ ),
"viewport-height": (
property: height,
class: vh,
evenly: space-evenly,
)
),
+ "justify-self": (
+ responsive: true,
+ property: justify-self,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ )
+ ),
"align-items": (
responsive: true,
property: align-items,
values: map.merge($spacers, (auto: auto))
),
// Negative margin utilities
- "negative-margin": (
- responsive: true,
- property: margin,
- class: m,
- values: $negative-spacers
- ),
- "negative-margin-x": (
- responsive: true,
- property: margin-right margin-left,
- class: mx,
- values: $negative-spacers
- ),
- "negative-margin-y": (
- responsive: true,
- property: margin-top margin-bottom,
- class: my,
- values: $negative-spacers
- ),
- "negative-margin-top": (
- responsive: true,
- property: margin-top,
- class: mt,
- values: $negative-spacers
- ),
- "negative-margin-end": (
- responsive: true,
- property: margin-right,
- class: me,
- values: $negative-spacers
- ),
- "negative-margin-bottom": (
- responsive: true,
- property: margin-bottom,
- class: mb,
- values: $negative-spacers
- ),
- "negative-margin-start": (
- responsive: true,
- property: margin-left,
- class: ms,
- values: $negative-spacers
- ),
+ // "negative-margin": (
+ // responsive: true,
+ // property: margin,
+ // class: m,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-x": (
+ // responsive: true,
+ // property: margin-right margin-left,
+ // class: mx,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-y": (
+ // responsive: true,
+ // property: margin-top margin-bottom,
+ // class: my,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-top": (
+ // responsive: true,
+ // property: margin-top,
+ // class: mt,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-end": (
+ // responsive: true,
+ // property: margin-right,
+ // class: me,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-bottom": (
+ // responsive: true,
+ // property: margin-bottom,
+ // class: mb,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-start": (
+ // responsive: true,
+ // property: margin-left,
+ // class: ms,
+ // values: $negative-spacers
+ // ),
// Padding utilities
"padding": (
responsive: true,
),
// scss-docs-end utils-text
// scss-docs-start utils-color
+ "color-attr": (
+ selector: "attr-includes",
+ class: "color-",
+ property: color,
+ values: var(--#{$prefix}color),
+ ),
"color": (
+ property: --#{$prefix}color,
+ class: color,
+ values: map.merge(theme-color-values("text"), $theme-fgs),
+ ),
+ "color-opacity": (
+ class: color,
property: color,
- class: text,
- local-vars: (
- "text-opacity": 1
- ),
- values: map.merge(
- $utilities-text-colors,
- (
- "muted": var(--#{$prefix}secondary-color), // deprecated
- "black-50": rgba($black, .5), // deprecated
- "white-50": rgba($white, .5), // deprecated
- "body-secondary": var(--#{$prefix}secondary-color),
- "body-tertiary": var(--#{$prefix}tertiary-color),
- "body-emphasis": var(--#{$prefix}emphasis-color),
- "reset": inherit,
- )
- )
- ),
- "text-opacity": (
- css-var: true,
- class: text-opacity,
values: (
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1
+ 10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
+ 20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
+ 30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
+ 40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent),
+ 50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent),
+ 60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent),
+ 70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent),
+ 80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent),
+ 90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent),
+ 100: var(--#{$prefix}color),
)
),
- "text-color": (
- property: color,
- class: text,
- values: $utilities-text-emphasis-colors
+ "contrast-color": (
+ property: --#{$prefix}color,
+ class: color-on,
+ values: theme-color-values("contrast"),
),
// scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
- css-var: true,
+ property: --#{$prefix}link-opacity,
+ // css-var: true,
class: link-opacity,
state: hover,
values: (
local-vars: (
"link-underline-opacity": 1
),
- values: map.merge(
- $utilities-links-underline,
- (
- null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
- )
- )
+ // values: map.merge(
+ // $utilities-links-underline,
+ // (
+ // // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+ // )
+ // )
),
"link-underline-opacity": (
- css-var: true,
+ // css-var: true,
+ property: --#{$prefix}link-underline-opacity,
class: link-underline-opacity,
state: hover,
values: (
),
// scss-docs-end utils-links
// scss-docs-start utils-bg-color
- "background-color": (
+ "bg-attr": (
+ selector: "attr-includes",
+ class: "bg-",
property: background-color,
+ values: var(--#{$prefix}bg),
+ ),
+ "bg-color": (
+ property: --#{$prefix}bg,
class: bg,
- local-vars: (
- "bg-opacity": 1
- ),
- values: map.merge(
- $utilities-bg-colors,
- (
- "transparent": transparent,
- "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
- "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
- )
- )
+ values: map.merge(theme-color-values("bg"), $theme-bgs),
+ ),
+ "bg-color-subtle": (
+ property: --#{$prefix}bg,
+ class: bg-subtle,
+ values: theme-color-values("bg-subtle"),
+ ),
+ "bg-color-muted": (
+ property: --#{$prefix}bg,
+ class: bg-muted,
+ values: theme-color-values("bg-muted"),
),
"bg-opacity": (
- css-var: true,
- class: bg-opacity,
+ class: bg,
+ property: background-color,
values: (
- 10: .1,
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1
+ 10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
+ 20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
+ 30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
+ 40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
+ 50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent),
+ 60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent),
+ 70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent),
+ 80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent),
+ 90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent),
+ 100: var(--#{$prefix}bg),
)
),
- "subtle-background-color": (
- property: background-color,
- class: bg,
- values: $utilities-bg-subtle
- ),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
),
// scss-docs-end utils-interaction
// scss-docs-start utils-border-radius
- "rounded": (
+ "border-radius": (
property: border-radius,
class: rounded,
values: (
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
) !default;
// scss-docs-end theme-colors-map
-// scss-docs-start theme-text-variables
-$primary-text-emphasis: shade-color($primary, 60%) !default;
-$secondary-text-emphasis: shade-color($secondary, 60%) !default;
-$success-text-emphasis: shade-color($success, 60%) !default;
-$info-text-emphasis: shade-color($info, 60%) !default;
-$warning-text-emphasis: shade-color($warning, 60%) !default;
-$danger-text-emphasis: shade-color($danger, 60%) !default;
-$light-text-emphasis: $gray-700 !default;
-$dark-text-emphasis: $gray-700 !default;
-// scss-docs-end theme-text-variables
-
-// scss-docs-start theme-bg-subtle-variables
-$primary-bg-subtle: tint-color($primary, 80%) !default;
-$secondary-bg-subtle: tint-color($secondary, 80%) !default;
-$success-bg-subtle: tint-color($success, 80%) !default;
-$info-bg-subtle: tint-color($info, 80%) !default;
-$warning-bg-subtle: tint-color($warning, 80%) !default;
-$danger-bg-subtle: tint-color($danger, 80%) !default;
-$light-bg-subtle: color.mix($gray-100, $white) !default;
-$dark-bg-subtle: $gray-400 !default;
-// scss-docs-end theme-bg-subtle-variables
-
-// scss-docs-start theme-border-subtle-variables
-$primary-border-subtle: tint-color($primary, 60%) !default;
-$secondary-border-subtle: tint-color($secondary, 60%) !default;
-$success-border-subtle: tint-color($success, 60%) !default;
-$info-border-subtle: tint-color($info, 60%) !default;
-$warning-border-subtle: tint-color($warning, 60%) !default;
-$danger-border-subtle: tint-color($danger, 60%) !default;
-$light-border-subtle: $gray-200 !default;
-$dark-border-subtle: $gray-500 !default;
-// scss-docs-end theme-border-subtle-variables
+// // scss-docs-start theme-text-variables
+// $primary-text-emphasis: shade-color($primary, 60%) !default;
+// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
+// $success-text-emphasis: shade-color($success, 60%) !default;
+// $info-text-emphasis: shade-color($info, 60%) !default;
+// $warning-text-emphasis: shade-color($warning, 60%) !default;
+// $danger-text-emphasis: shade-color($danger, 60%) !default;
+// $light-text-emphasis: $gray-700 !default;
+// $dark-text-emphasis: $gray-700 !default;
+// // scss-docs-end theme-text-variables
+
+// // scss-docs-start theme-bg-subtle-variables
+// $primary-bg-subtle: tint-color($primary, 80%) !default;
+// $secondary-bg-subtle: tint-color($secondary, 80%) !default;
+// $success-bg-subtle: tint-color($success, 80%) !default;
+// $info-bg-subtle: tint-color($info, 80%) !default;
+// $warning-bg-subtle: tint-color($warning, 80%) !default;
+// $danger-bg-subtle: tint-color($danger, 80%) !default;
+// $light-bg-subtle: color.mix($gray-100, $white) !default;
+// $dark-bg-subtle: $gray-400 !default;
+// // scss-docs-end theme-bg-subtle-variables
+
+// // scss-docs-start theme-border-subtle-variables
+// $primary-border-subtle: tint-color($primary, 60%) !default;
+// $secondary-border-subtle: tint-color($secondary, 60%) !default;
+// $success-border-subtle: tint-color($success, 60%) !default;
+// $info-border-subtle: tint-color($info, 60%) !default;
+// $warning-border-subtle: tint-color($warning, 60%) !default;
+// $danger-border-subtle: tint-color($danger, 60%) !default;
+// $light-border-subtle: $gray-200 !default;
+// $dark-border-subtle: $gray-500 !default;
+// // scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function
$escaped-characters: (
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
-$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
-$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
-$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
-$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
+$navbar-light-color: color-mix(in srgb, var(--#{$prefix}fg-black) 65%, transparent) !default;
+$navbar-light-hover-color: color-mix(in srgb, var(--#{$prefix}fg-black) 80%, transparent) !default;
+$navbar-light-active-color: color-mix(in srgb, var(--#{$prefix}fg-black) 100%, transparent) !default;
+$navbar-light-disabled-color: color-mix(in srgb, var(--#{$prefix}fg-black) 30%, transparent) !default;
$navbar-light-icon-color: rgba($body-color, .75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: $body-color !default;
-$accordion-icon-active-color: $primary-text-emphasis !default;
+$accordion-icon-color: var(--#{$prefix}body-color) !default;
+$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
@use "config" as *;
@use "variables" as *;
@use "functions" as *;
-@use "maps" as *;
+// @use "maps" as *;
@forward "utilities"; // Make utilities available downstream
@use "utilities" as *; // Bring utilities into the current namespace
-@use "../colors" as *;
@use "../config" as *;
+@use "../colors" as *;
@use "../variables" as *;
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-@each $color, $value in $theme-colors {
- .link-#{$color} {
- color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+@layer helpers {
+ @each $color, $value in $theme-colors {
+ .link-#{$color} {
+ color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
+ text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
- @if $link-shade-percentage != 0 {
- &:hover,
- &:focus {
- $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
- color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ @if $link-shade-percentage != 0 {
+ &:hover,
+ &:focus {
+ $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+ color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
+ text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
+ }
}
}
}
-}
-// One-off special link helper as a bridge until v6
-.link-body-emphasis {
- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ // One-off special link helper as a bridge until v6
+ .link-body-emphasis {
+ color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity));
+ text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity));
- @if $link-shade-percentage != 0 {
- &:hover,
- &:focus {
- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+ @if $link-shade-percentage != 0 {
+ &:hover,
+ &:focus {
+ color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75));
+ text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75));
+ }
}
}
}
@use "sass:map";
@use "sass:meta";
-@use "../variables" as *;
@use "../config" as *;
+@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../layout/breakpoints" as *;
@use "../mixins/utilities" as *;
@use "../utilities" as *;
-// Loop over each breakpoint
-@each $breakpoint in map.keys($grid-breakpoints) {
+@layer utilities {
+ // Loop over each breakpoint
+ @each $breakpoint in map.keys($grid-breakpoints) {
- // Generate media query if needed
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ // Generate media query if needed
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- // Loop over each utility property
- @each $key, $utility in $utilities {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Only proceed if responsive media queries are enabled or if it's the base media query
- @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
- @include generate-utility($utility, $infix);
+ // Loop over each utility property
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
+ @include generate-utility($utility, $infix);
+ }
}
}
}
-}
-// RFS rescaling
-@media (min-width: $rfs-mq-value) {
- @each $breakpoint in map.keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ // RFS rescaling
+ @media (min-width: $rfs-mq-value) {
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
- // Loop over each utility property
- @each $key, $utility in $utilities {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Only proceed if responsive media queries are enabled or if it's the base media query
- @if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
- @include generate-utility($utility, $infix, true);
+ @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+ // Loop over each utility property
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
+ @include generate-utility($utility, $infix, true);
+ }
}
}
}
}
-}
-// Print utilities
-@media print {
- @each $key, $utility in $utilities {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Then check if the utility needs print styles
- @if meta.type-of($utility) == "map" and map.get($utility, print) == true {
- @include generate-utility($utility, "-print");
+ // Print utilities
+ @media print {
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Then check if the utility needs print styles
+ @if meta.type-of($utility) == "map" and map.get($utility, print) == true {
+ @include generate-utility($utility, "-print");
+ }
}
}
}
projects / thirdparty / bootstrap.git / commitdiff
