root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Migrate to Sass modules 

fix function
This commit is contained in:
Mark Otto 2025-02-18 09:50:10 -08:00
parent a1eb57cac2
commit 24c1b88e9d
80 changed files with 1104 additions and 620 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -42,11 +42,11 @@
"start": "npm-run-all --parallel watch docs-serve",
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
"css": "npm-run-all css-compile css-prefix css-rtl css-minify",
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css",
"css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
"css-lint-vars": "fusv scss/ site/src/scss/",
"css-dontlint-vars": "fusv scss/ site/assets/scss/",
"css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",

9
scss/_accordion.scss
View File

@ -1,3 +1,12 @@
@use "config" as *;
@use "variables" as *;
@use "functions" as *;
@use "vendor/rfs" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/box-shadow" as *;
@use "mixins/color-mode" as *;
//
// Base styles
//

7
scss/_alert.scss
View File

@ -1,3 +1,8 @@
@use "sass:map";
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
//
// Base styles
//
@ -57,7 +62,7 @@
// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
@each $state in map.keys($theme-colors) {
.alert-#{$state} {
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);

6
scss/_badge.scss
View File

@ -1,3 +1,9 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and

5
scss/_breadcrumb.scss
View File

@ -1,3 +1,8 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
.breadcrumb {
// scss-docs-start breadcrumb-css-vars
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};

5
scss/_button-group.scss
View File

@ -1,3 +1,8 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
// Make the div behave like a button
.btn-group,
.btn-group-vertical {

82
scss/_buttons.scss
View File

@ -1,3 +1,85 @@
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "functions" as *;
@use "vendor/rfs" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
// scss-docs-start btn-variant-mixin
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-border-color: #{$color};
--#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin
//
// Base styles
//

6
scss/_card.scss
View File

@ -1,3 +1,9 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "layout/breakpoints" as *;
//
// Base styles
//

8
scss/_carousel.scss
View File

@ -1,3 +1,11 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/transition" as *;
@use "mixins/clearfix" as *;
@use "mixins/gradients" as *;
@use "mixins/color-mode" as *;
@use "vendor/rfs" as *;
// Notes on the classes:
//
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)

5
scss/_close.scss
View File

@ -1,3 +1,8 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/color-mode" as *;
// Transparent background and border properties included for button version.
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.

282
scss/_colors.scss Normal file
View File

@ -0,0 +1,282 @@
$blue: #0d6efd !default;
$blue-100: #cfe2ff !default;
$blue-200: #9ec5fe !default;
$blue-300: #6ea8fe !default;
$blue-400: #3d8bfd !default;
$blue-500: $blue !default;
$blue-600: #0a58ca !default;
$blue-700: #084298 !default;
$blue-800: #052c65 !default;
$blue-900: #031633 !default;
$indigo: #6610f2 !default;
$indigo-100: #e0cffc !default;
$indigo-200: #c29ffa !default;
$indigo-300: #a370f7 !default;
$indigo-400: #8540f5 !default;
$indigo-500: $indigo !default;
$indigo-600: #520dc2 !default;
$indigo-700: #3d0a91 !default;
$indigo-800: #290661 !default;
$indigo-900: #140330 !default;
$purple: #6f42c1 !default;
$purple-100: #e2d9f3 !default;
$purple-200: #c5b3e6 !default;
$purple-300: #a98eda !default;
$purple-400: #8c68cd !default;
$purple-500: $purple !default;
$purple-600: #59359a !default;
$purple-700: #432874 !default;
$purple-800: #2c1a4d !default;
$purple-900: #160d27 !default;
$pink: #d63384 !default;
$pink-100: #f7d6e6 !default;
$pink-200: #efadce !default;
$pink-300: #e685b5 !default;
$pink-400: #de5c9d !default;
$pink-500: $pink !default;
$pink-600: #ab296a !default;
$pink-700: #801f4f !default;
$pink-800: #561435 !default;
$pink-900: #2b0a1a !default;
$red: #dc3545 !default;
$red-100: #f8d7da !default;
$red-200: #f1aeb5 !default;
$red-300: #ea868f !default;
$red-400: #e35d6a !default;
$red-500: $red !default;
$red-600: #b02a37 !default;
$red-700: #842029 !default;
$red-800: #58151c !default;
$red-900: #2c0b0e !default;
$orange: #fd7e14 !default;
$orange-100: #ffe5d0 !default;
$orange-200: #fecba1 !default;
$orange-300: #feb272 !default;
$orange-400: #fd9843 !default;
$orange-500: $orange !default;
$orange-600: #ca6510 !default;
$orange-700: #984c0c !default;
$orange-800: #653208 !default;
$orange-900: #331904 !default;
$yellow: #ffc107 !default;
$yellow-100: #fff3cd !default;
$yellow-200: #ffe69c !default;
$yellow-300: #ffda6a !default;
$yellow-400: #ffcd39 !default;
$yellow-500: $yellow !default;
$yellow-600: #cc9a06 !default;
$yellow-700: #997404 !default;
$yellow-800: #664d03 !default;
$yellow-900: #332701 !default;
$green: #198754 !default;
$green-100: #d1e7dd !default;
$green-200: #a3cfbb !default;
$green-300: #75b798 !default;
$green-400: #479f76 !default;
$green-500: $green !default;
$green-600: #146c43 !default;
$green-700: #0f5132 !default;
$green-800: #0a3622 !default;
$green-900: #051b11 !default;
$teal: #20c997 !default;
$teal-100: #d2f4ea !default;
$teal-200: #a6e9d5 !default;
$teal-300: #79dfc1 !default;
$teal-400: #4dd4ac !default;
$teal-500: $teal !default;
$teal-600: #1aa179 !default;
$teal-700: #13795b !default;
$teal-800: #0d503c !default;
$teal-900: #06281e !default;
$cyan: #0dcaf0 !default;
$cyan-100: #cff4fc !default;
$cyan-200: #9eeaf9 !default;
$cyan-300: #6edff6 !default;
$cyan-400: #3dd5f3 !default;
$cyan-500: $cyan !default;
$cyan-600: #0aa2c0 !default;
$cyan-700: #087990 !default;
$cyan-800: #055160 !default;
$cyan-900: #032830 !default;
$gray: #adb5bd !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: $gray !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$white: #fff !default;
$black: #000 !default;
$blues: (
"blue-100": $blue-100,
"blue-200": $blue-200,
"blue-300": $blue-300,
"blue-400": $blue-400,
"blue-500": $blue-500,
"blue-600": $blue-600,
"blue-700": $blue-700,
"blue-800": $blue-800,
"blue-900": $blue-900
) !default;
$indigos: (
"indigo-100": $indigo-100,
"indigo-200": $indigo-200,
"indigo-300": $indigo-300,
"indigo-400": $indigo-400,
"indigo-500": $indigo,
"indigo-600": $indigo-600,
"indigo-700": $indigo-700,
"indigo-800": $indigo-800,
"indigo-900": $indigo-900
) !default;
$purples: (
"purple-100": $purple-100,
"purple-200": $purple-200,
"purple-300": $purple-300,
"purple-400": $purple-400,
"purple-500": $purple,
"purple-600": $purple-600,
"purple-700": $purple-700,
"purple-800": $purple-800,
"purple-900": $purple-900
) !default;
$pinks: (
"pink-100": $pink-100,
"pink-200": $pink-200,
"pink-300": $pink-300,
"pink-400": $pink-400,
"pink-500": $pink-500,
"pink-600": $pink-600,
"pink-700": $pink-700,
"pink-800": $pink-800,
"pink-900": $pink-900
) !default;
$reds: (
"red-100": $red-100,
"red-200": $red-200,
"red-300": $red-300,
"red-400": $red-400,
"red-500": $red-500,
"red-600": $red-600,
"red-700": $red-700,
"red-800": $red-800,
"red-900": $red-900
) !default;
$oranges: (
"orange-100": $orange-100,
"orange-200": $orange-200,
"orange-300": $orange-300,
"orange-400": $orange-400,
"orange-500": $orange-500,
"orange-600": $orange-600,
"orange-700": $orange-700,
"orange-800": $orange-800,
"orange-900": $orange-900
) !default;
$yellows: (
"yellow-100": $yellow-100,
"yellow-200": $yellow-200,
"yellow-300": $yellow-300,
"yellow-400": $yellow-400,
"yellow-500": $yellow-500,
"yellow-600": $yellow-600,
"yellow-700": $yellow-700,
"yellow-800": $yellow-800,
"yellow-900": $yellow-900
) !default;
$greens: (
"green-100": $green-100,
"green-200": $green-200,
"green-300": $green-300,
"green-400": $green-400,
"green-500": $green-500,
"green-600": $green-600,
"green-700": $green-700,
"green-800": $green-800,
"green-900": $green-900
) !default;
$teals: (
"teal-100": $teal-100,
"teal-200": $teal-200,
"teal-300": $teal-300,
"teal-400": $teal-400,
"teal-500": $teal-500,
"teal-600": $teal-600,
"teal-700": $teal-700,
"teal-800": $teal-800,
"teal-900": $teal-900
) !default;
$cyans: (
"cyan-100": $cyan-100,
"cyan-200": $cyan-200,
"cyan-300": $cyan-300,
"cyan-400": $cyan-400,
"cyan-500": $cyan-500,
"cyan-600": $cyan-600,
"cyan-700": $cyan-700,
"cyan-800": $cyan-800,
"cyan-900": $cyan-900
) !default;
$grays: (
"gray-100": $gray-100,
"gray-200": $gray-200,
"gray-300": $gray-300,
"gray-400": $gray-400,
"gray-500": $gray-500,
"gray-600": $gray-600,
"gray-700": $gray-700,
"gray-800": $gray-800,
"gray-900": $gray-900
) !default;
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan
) !default;
$all-colors: (
"grays": $grays,
"blues": $blues,
"indigos": $indigos,
"purples": $purples,
"pinks": $pinks,
"reds": $reds,
"oranges": $oranges,
"yellows": $yellows,
"greens": $greens,
"teals": $teals,
"cyans": $cyans
) !default;

26
scss/_config.scss
View File

@ -4,9 +4,33 @@
$prefix: bs- !default;
$enable-container-classes: true !default;
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-container-classes: true !default;
$enable-cssgrid: false !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;
$color-mode-type: data !default; // `data` or `media-query`
// more to come here…
$color-mode-type: "media-query" !default;
$color-contrast-dark: #000 !default;
$color-contrast-light: #fff !default;
$min-contrast-ratio: 4.5 !default;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,

13
scss/_dropdown.scss
View File

@ -1,3 +1,14 @@
@use "sass:map";
@use "config" as *;
@use "variables" as *;
@use "mixins/caret" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/gradients" as *;
@use "mixins/caret" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// The dropdown wrapper (`<div>`)
.dropup,
.dropend,
@ -85,7 +96,7 @@
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

9
scss/_forms.scss
View File

@ -1,9 +0,0 @@
@import "forms/labels";
@import "forms/form-text";
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";
@import "forms/form-range";
@import "forms/floating-labels";
@import "forms/input-group";
@import "forms/validation";

4
scss/_functions.scss
View File

@ -1,3 +1,5 @@
@use "config" as *;
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@ -151,7 +153,7 @@
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
$foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000;
$max-ratio: 0;
$max-ratio-color: null;

7
scss/_images.scss
View File

@ -1,3 +1,10 @@
@use "config" as *;
@use "variables" as *;
@use "vendor/rfs" as *;
@use "mixins/image" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.

12
scss/_list-group.scss
View File

@ -1,3 +1,11 @@
@use "sass:map";
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
@ -121,7 +129,7 @@
//
// Change the layout of list group items from vertical (default) to horizontal.
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@ -182,7 +190,7 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state in map-keys($theme-colors) {
@each $state in map.keys($theme-colors) {
.list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);

12
scss/_maps.scss
View File

@ -1,3 +1,9 @@
@use "sass:map";
@use "config" as *;
@use "colors" as *;
@use "functions" 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.
@ -100,7 +106,7 @@ $utilities-colors: $theme-colors-rgb !default;
// scss-docs-end utilities-colors
// scss-docs-start utilities-text-colors
$utilities-text: map-merge(
$utilities-text: map.merge(
$utilities-colors,
(
"black": to-rgb($black),
@ -123,7 +129,7 @@ $utilities-text-emphasis-colors: (
// scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors
$utilities-bg: map-merge(
$utilities-bg: map.merge(
$utilities-colors,
(
"black": to-rgb($black),
@ -146,7 +152,7 @@ $utilities-bg-subtle: (
// scss-docs-end utilities-bg-colors
// scss-docs-start utilities-border-colors
$utilities-border: map-merge(
$utilities-border: map.merge(
$utilities-colors,
(
"black": to-rgb($black),

42
scss/_mixins.scss
View File

@ -1,42 +0,0 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
@import "vendor/rfs";
// Deprecate
@import "mixins/deprecate";
// Helpers
// @import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/visually-hidden";
@import "mixins/reset-text";
@import "mixins/text-truncate";
// Utilities
@import "mixins/utilities";
// Components
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/forms";
@import "mixins/table-variants";
// Skins
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";
// Layout
@import "mixins/clearfix";
// @import "mixins/container";
// @import "mixins/grid";

13
scss/_modal.scss
View File

@ -1,3 +1,14 @@
@use "sass:map";
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "mixins/backdrop" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// stylelint-disable function-disallowed-list
// .modal-open - body class for killing the scroll
@ -209,7 +220,7 @@
}
// scss-docs-start modal-fullscreen-loop
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");

7
scss/_nav.scss
View File

@ -1,3 +1,10 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with

14
scss/_navbar.scss
View File

@ -1,3 +1,15 @@
@use "sass:map";
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/gradients" as *;
@use "mixins/transition" as *;
@use "mixins/color-mode" as *;
@use "mixins/deprecate" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
@ -190,7 +202,7 @@
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

12
scss/_offcanvas.scss
View File

@ -1,3 +1,11 @@
@use "sass:map";
@use "config" as *;
@use "variables" as *;
@use "mixins/box-shadow" as *;
@use "mixins/transition" as *;
@use "mixins/backdrop" as *;
@use "layout/breakpoints" as *;
// stylelint-disable function-disallowed-list
%offcanvas-css-vars {
@ -17,7 +25,7 @@
// scss-docs-end offcanvas-css-vars
}
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
@ -26,7 +34,7 @@
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

17
scss/_pagination.scss
View File

@ -1,3 +1,20 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/lists" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin
.pagination {
// scss-docs-start pagination-css-vars
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};

4
scss/_placeholders.scss
View File

@ -1,3 +1,7 @@
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
.placeholder {
display: inline-block;
min-height: 1em;

7
scss/_popover.scss
View File

@ -1,3 +1,10 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
.popover {
// scss-docs-start popover-css-vars
--#{$prefix}popover-zindex: #{$zindex-popover};

8
scss/_progress.scss
View File

@ -1,3 +1,11 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "vendor/rfs" as *;
// Disable animation if transitions are disabled
// scss-docs-start progress-keyframes

6
scss/_reboot.scss
View File

@ -1,3 +1,9 @@
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "vendor/rfs" as *;
@use "mixins/border-radius" as *;
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix

7
scss/_root.scss
View File

@ -1,3 +1,10 @@
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "maps" as *;
@use "vendor/rfs" as *;
@use "mixins/color-mode" as *;
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.

3
scss/_spinners.scss
View File

@ -1,3 +1,6 @@
@use "config" as *;
@use "variables" as *;
//
// Rotating border
//

34
scss/_tables.scss
View File

@ -1,3 +1,35 @@
@use "sass:map";
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "functions" as *;
@use "layout/breakpoints" as *;
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
$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));
--#{$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(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant
//
// Basic Bootstrap table
//
@ -159,7 +191,7 @@
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-down($breakpoint) {

5
scss/_toasts.scss
View File

@ -1,3 +1,8 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
.toast {
// scss-docs-start toast-css-vars
--#{$prefix}toast-zindex: #{$zindex-toast};

7
scss/_tooltip.scss
View File

@ -1,3 +1,10 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/deprecate" as *;
@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
// Base class
.tooltip {
// scss-docs-start tooltip-css-vars

4
scss/_transitions.scss
View File

@ -1,3 +1,7 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/transition" as *;
.fade {
@include transition($transition-fade);

46
scss/_type.scss
View File

@ -1,29 +1,35 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/lists" as *;
@use "vendor/rfs" as *;
//
// Headings
//
.h1 {
@extend h1;
}
// mdo-do: remove extend
// .h1 {
// @extend h1;
// }
.h2 {
@extend h2;
}
// .h2 {
// @extend h2;
// }
.h3 {
@extend h3;
}
// .h3 {
// @extend h3;
// }
.h4 {
@extend h4;
}
// .h4 {
// @extend h4;
// }
.h5 {
@extend h5;
}
// .h5 {
// @extend h5;
// }
.h6 {
@extend h6;
}
// .h6 {
// @extend h6;
// }
.lead {
@ -46,11 +52,11 @@
// Emphasis
//
.small {
@extend small;
// @extend small;
}
.mark {
@extend mark;
// @extend mark;
}
//

29
scss/_utilities.scss
View File

@ -1,8 +1,15 @@
@use "sass:map";
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "functions" as *;
@use "maps" as *;
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
$utilities: map.merge(
(
// scss-docs-start utils-vertical-align
"align": (
@ -353,43 +360,43 @@ $utilities: map-merge(
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
@ -579,7 +586,7 @@ $utilities: map-merge(
local-vars: (
"text-opacity": 1
),
values: map-merge(
values: map.merge(
$utilities-text-colors,
(
"muted": var(--#{$prefix}secondary-color), // deprecated
@ -637,7 +644,7 @@ $utilities: map-merge(
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
values: map.merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
@ -665,7 +672,7 @@ $utilities: map-merge(
local-vars: (
"bg-opacity": 1
),
values: map-merge(
values: map.merge(
$utilities-bg-colors,
(
"transparent": transparent,

344
scss/_variables.scss
View File

@ -1,309 +1,19 @@
@use "config" as *;
@use "colors" as *;
@use "functions" as *;
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// scss-docs-end gray-color-variables
// fusv-disable
// scss-docs-start gray-colors-map
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
) !default;
// scss-docs-end gray-colors-map
// fusv-enable
// scss-docs-start color-variables
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// scss-docs-end color-variables
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"black": $black,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
// scss-docs-end colors-map
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG/#contrast-minimum
$min-contrast-ratio: 4.5 !default;
// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: $black !default;
$color-contrast-light: $white !default;
// fusv-disable
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;
$indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 80%) !default;
$purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 80%) !default;
$pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 80%) !default;
$red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
$red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 80%) !default;
$orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 80%) !default;
$yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 80%) !default;
$green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
$green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 80%) !default;
$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;
$cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;
$blues: (
"blue-100": $blue-100,
"blue-200": $blue-200,
"blue-300": $blue-300,
"blue-400": $blue-400,
"blue-500": $blue-500,
"blue-600": $blue-600,
"blue-700": $blue-700,
"blue-800": $blue-800,
"blue-900": $blue-900
) !default;
$indigos: (
"indigo-100": $indigo-100,
"indigo-200": $indigo-200,
"indigo-300": $indigo-300,
"indigo-400": $indigo-400,
"indigo-500": $indigo-500,
"indigo-600": $indigo-600,
"indigo-700": $indigo-700,
"indigo-800": $indigo-800,
"indigo-900": $indigo-900
) !default;
$purples: (
"purple-100": $purple-100,
"purple-200": $purple-200,
"purple-300": $purple-300,
"purple-400": $purple-400,
"purple-500": $purple-500,
"purple-600": $purple-600,
"purple-700": $purple-700,
"purple-800": $purple-800,
"purple-900": $purple-900
) !default;
$pinks: (
"pink-100": $pink-100,
"pink-200": $pink-200,
"pink-300": $pink-300,
"pink-400": $pink-400,
"pink-500": $pink-500,
"pink-600": $pink-600,
"pink-700": $pink-700,
"pink-800": $pink-800,
"pink-900": $pink-900
) !default;
$reds: (
"red-100": $red-100,
"red-200": $red-200,
"red-300": $red-300,
"red-400": $red-400,
"red-500": $red-500,
"red-600": $red-600,
"red-700": $red-700,
"red-800": $red-800,
"red-900": $red-900
) !default;
$oranges: (
"orange-100": $orange-100,
"orange-200": $orange-200,
"orange-300": $orange-300,
"orange-400": $orange-400,
"orange-500": $orange-500,
"orange-600": $orange-600,
"orange-700": $orange-700,
"orange-800": $orange-800,
"orange-900": $orange-900
) !default;
$yellows: (
"yellow-100": $yellow-100,
"yellow-200": $yellow-200,
"yellow-300": $yellow-300,
"yellow-400": $yellow-400,
"yellow-500": $yellow-500,
"yellow-600": $yellow-600,
"yellow-700": $yellow-700,
"yellow-800": $yellow-800,
"yellow-900": $yellow-900
) !default;
$greens: (
"green-100": $green-100,
"green-200": $green-200,
"green-300": $green-300,
"green-400": $green-400,
"green-500": $green-500,
"green-600": $green-600,
"green-700": $green-700,
"green-800": $green-800,
"green-900": $green-900
) !default;
$teals: (
"teal-100": $teal-100,
"teal-200": $teal-200,
"teal-300": $teal-300,
"teal-400": $teal-400,
"teal-500": $teal-500,
"teal-600": $teal-600,
"teal-700": $teal-700,
"teal-800": $teal-800,
"teal-900": $teal-900
) !default;
$cyans: (
"cyan-100": $cyan-100,
"cyan-200": $cyan-200,
"cyan-300": $cyan-300,
"cyan-400": $cyan-400,
"cyan-500": $cyan-500,
"cyan-600": $cyan-600,
"cyan-700": $cyan-700,
"cyan-800": $cyan-800,
"cyan-900": $cyan-900
) !default;
// fusv-enable
// scss-docs-start theme-color-variables
$primary: $blue !default;
$primary: $purple-500 !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$success: $green-500 !default;
$info: $cyan-500 !default;
$warning: $yellow-500 !default;
$danger: $red-500 !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;
// scss-docs-end theme-color-variables
@ -367,25 +77,25 @@ $escaped-characters: (
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-container-classes: true !default;
$enable-cssgrid: false !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
// $enable-caret: true !default;
// $enable-rounded: true !default;
// $enable-shadows: false !default;
// $enable-gradients: false !default;
// $enable-transitions: true !default;
// $enable-reduced-motion: true !default;
// $enable-smooth-scroll: true !default;
// $enable-grid-classes: true !default;
// $enable-container-classes: true !default;
// $enable-cssgrid: false !default;
// $enable-button-pointers: true !default;
// $enable-rfs: true !default;
// $enable-validation-icons: true !default;
// $enable-negative-margins: false !default;
// $enable-deprecation-messages: true !default;
// $enable-important-utilities: true !default;
$enable-dark-mode: true !default;
$color-mode-type: data !default; // `data` or `media-query`
// $enable-dark-mode: true !default;
// $color-mode-type: data !default; // `data` or `media-query`
// Prefix for :root CSS variables

76
scss/bootstrap.scss vendored
View File

@ -4,52 +4,62 @@
// scss-docs-start import-stack
// Configuration
@use "config" as *;
// @use "config" as *;
<<<<<<< HEAD
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
=======
// @import "functions";
// @import "colors";
// @import "variables";
// @import "variables-dark";
@use "maps";
@use "mixins";
// @use "utilities";
>>>>>>> 3ce5bfcfb (Migrate to Sass modules)
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@use "root";
@use "reboot";
@use "type";
@use "images";
// @import "containers";
// @import "grid";
@import "layout";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
@use "layout";
@use "tables";
@use "forms";
@use "buttons";
@use "transitions";
@use "dropdown";
@use "button-group";
@use "nav";
@use "navbar";
@use "card";
@use "accordion";
@use "breadcrumb";
@use "pagination";
@use "badge";
@use "alert";
@use "progress";
@use "list-group";
@use "close";
@use "toasts";
@use "modal";
@use "tooltip";
@use "popover";
@use "carousel";
@use "spinners";
@use "offcanvas";
@use "placeholders";
// Helpers
@import "helpers";
@use "helpers";
// Utilities
@import "utilities/api";
@use "utilities/api";
// scss-docs-end import-stack

5
scss/forms/_floating-labels.scss
View File

@ -1,3 +1,8 @@
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/transition" as *;
.form-floating {
position: relative;

9
scss/forms/_form-check.scss
View File

@ -1,3 +1,12 @@
@use "../config" as *;
@use "../variables" as *;
@use "../functions" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/color-mode" as *;
//
// Check/radio
//

7
scss/forms/_form-control.scss
View File

@ -1,3 +1,10 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
//
// General form controls (plus a few specific high-level interventions)
//

7
scss/forms/_form-range.scss
View File

@ -1,3 +1,10 @@
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo

8
scss/forms/_form-select.scss
View File

@ -1,3 +1,11 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/color-mode" as *;
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from

2
scss/forms/_form-text.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
@use "../vendor/rfs" as *;
//
// Form text
//

8
scss/forms/_input-group.scss
View File

@ -1,3 +1,9 @@
@use "sass:map";
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
//
// Base styles
//
@ -116,7 +122,7 @@
}
$validation-messages: "";
@each $state in map-keys($form-validation-states) {
@each $state in map.keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}

2
scss/forms/_labels.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
@use "../vendor/rfs" as *;
//
// Labels
//

171
scss/forms/_validation.scss
View File

@ -1,3 +1,9 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
@ -5,6 +11,171 @@
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server-side validation.
// 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
// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state(
$state,
$color,
$icon,
$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: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include 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($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include 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;
}
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
--#{$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 $enable-shadows {
@include 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;
}
}
}
}
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $border-color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group {
> .form-control:not(:focus),
> .form-select:not(:focus),
> .form-floating:not(:focus-within) {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 3;
} @else if $state == "invalid" {
z-index: 4;
}
}
}
}
}
// scss-docs-end form-validation-mixins
// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);

9
scss/forms/index.scss Normal file
View File

@ -0,0 +1,9 @@
@forward "labels";
@forward "form-text";
@forward "form-control";
@forward "form-select";
@forward "form-check";
@forward "form-range";
@forward "floating-labels";
@forward "input-group";
@forward "validation";

2
scss/helpers/_clearfix.scss
View File

@ -1,3 +1,5 @@
@use "../mixins/clearfix" as *;
.clearfix {
@include clearfix();
}

4
scss/helpers/_color-bg.scss
View File

@ -1,3 +1,7 @@
@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 {
.text-bg-#{$color} {

4
scss/helpers/_colored-links.scss
View File

@ -1,3 +1,7 @@
@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} {

2
scss/helpers/_focus-ring.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
.focus-ring:focus {
outline: 0;
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values

3
scss/helpers/_icon-link.scss
View File

@ -1,3 +1,6 @@
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/transition" as *;
.icon-link {
display: inline-flex;
gap: $icon-link-gap;

7
scss/helpers/_position.scss
View File

@ -1,3 +1,8 @@
@use "sass:map";
@use "../config" as *;
@use "../variables" as *;
@use "../layout/breakpoints" as *;
// Shorthand
.fixed-top {
@ -17,7 +22,7 @@
}
// Responsive sticky top and bottom
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

4
scss/helpers/_ratio.scss
View File

@ -1,3 +1,7 @@
@use "../config" as *;
@use "../variables" as *;
// mdo-do: remve for utilities
// Credit: Nicolas Gallagher and SUIT CSS.
.ratio {

2
scss/helpers/_stretched-link.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
//
// Stretched link
//

2
scss/helpers/_text-truncation.scss
View File

@ -1,4 +1,4 @@
//
@use "../mixins/text-truncate" as *;
// Text truncation
//

2
scss/helpers/_visually-hidden.scss
View File

@ -1,3 +1,5 @@
@use "../mixins/visually-hidden" as *;
//
// Visually hidden
//

2
scss/helpers/_vr.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
.vr {
display: inline-block;
align-self: stretch;

10
scss/layout/_breakpoints.scss
View File

@ -1,3 +1,7 @@
@use "sass:map";
@use "../config" as *;
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
@ -14,7 +18,7 @@
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
@ -27,7 +31,7 @@
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
$min: map.get($breakpoints, $name);
@return if($min != 0, $min, null);
}
@ -41,7 +45,7 @@
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
$max: map.get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null);
}

18
scss/mixins/_alert.scss
View File

@ -1,18 +0,0 @@
@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
--#{$prefix}alert-color: #{$color};
--#{$prefix}alert-bg: #{$background};
--#{$prefix}alert-border-color: #{$border};
--#{$prefix}alert-link-color: #{shade-color($color, 20%)};
@if $enable-gradients {
background-image: var(--#{$prefix}gradient);
}
.alert-link {
color: var(--#{$prefix}alert-link-color);
}
}
// scss-docs-end alert-variant-mixin

2
scss/mixins/_border-radius.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
// stylelint-disable property-disallowed-list
// Single side border-radius

2
scss/mixins/_box-shadow.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
@mixin box-shadow($shadow...) {
@if $enable-shadows {
$result: ();

70
scss/mixins/_buttons.scss
View File

@ -1,70 +0,0 @@
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
// scss-docs-start btn-variant-mixin
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-border-color: #{$color};
--#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin

3
scss/mixins/_caret.scss
View File

@ -1,3 +1,6 @@
@use "../config" as *;
@use "../variables" as *;
// scss-docs-start caret-mixins
@mixin caret-down($width: $caret-width) {
border-top: $width solid;

2
scss/mixins/_color-mode.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $root: false) {
@if $color-mode-type == "media-query" {

1
scss/mixins/_deprecate.scss
View File

@ -1,3 +1,4 @@
@use "../config" as *;
// Deprecate mixin
//
// This mixin can be used to deprecate mixins or functions.

3
scss/mixins/_gradients.scss
View File

@ -1,3 +1,6 @@
@use "../config" as *;
@use "../colors" as *;
// Gradients
// scss-docs-start gradient-bg-mixin

26
scss/mixins/_list-group.scss
View File

@ -1,26 +0,0 @@
@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
// List Groups
// scss-docs-start list-group-mixin
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
// scss-docs-end list-group-mixin

10
scss/mixins/_pagination.scss
View File

@ -1,10 +0,0 @@
// Pagination
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin

3
scss/mixins/_reset-text.scss
View File

@ -1,3 +1,6 @@
@use "../config" as *;
@use "../variables" as *;
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.

24
scss/mixins/_table-variants.scss
View File

@ -1,24 +0,0 @@
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
$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));
--#{$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(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant

2
scss/mixins/_transition.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
// stylelint-disable property-disallowed-list
@mixin transition($transition...) {
@if length($transition) == 0 {

21
scss/mixins/_utilities.scss
View File

@ -1,7 +1,10 @@
@use "sass:map";
@use "../config" as *;
// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
$values: map-get($utility, values);
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
@ -9,7 +12,7 @@
}
@each $key, $value in $values {
$properties: map-get($utility, property);
$properties: map.get($utility, property);
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
@if type-of($properties) == "string" {
@ -17,21 +20,21 @@
}
// Use custom class if present
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
$property-class: if(map.has-key($utility, class), map.get($utility, class), nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
// Use custom CSS variable name if present, otherwise default to `class`
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
$css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
// State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ());
$state: if(map.has-key($utility, state), map.get($utility, state), ());
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
// Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
@if map-get($utility, rfs) {
@if map.get($utility, rfs) {
// Inside the media query
@if $is-rfs-media-query {
$val: rfs-value($value);
@ -44,9 +47,9 @@
}
}
$is-css-var: map-get($utility, css-var);
$is-local-vars: map-get($utility, local-vars);
$is-rtl: map-get($utility, rtl);
$is-css-var: map.get($utility, css-var);
$is-local-vars: map.get($utility, local-vars);
$is-rtl: map.get($utility, rtl);
@if $value != null {
@if $is-rtl == false {

34
scss/mixins/index.scss Normal file
View File

@ -0,0 +1,34 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
// @forward "vendor/rfs";
// Deprecate
@forward "deprecate";
// Helpers
@forward "color-mode";
@forward "color-scheme";
@forward "image";
@forward "resize";
@forward "visually-hidden";
@forward "reset-text";
@forward "text-truncate";
// Utilities
@forward "utilities";
// Components
@forward "backdrop";
@forward "caret";
// Skins
@forward "border-radius";
@forward "box-shadow";
@forward "gradients";
@forward "transition";
// Layout
@forward "clearfix";

1
scss/tests/mixins/_color-modes.test.scss
View File

@ -1,5 +1,6 @@
// stylelint-disable selector-attribute-quotes
@import "../../colors";
@import "../../functions";
@import "../../variables";
@import "../../variables-dark";

20
scss/utilities/_api.scss
View File

@ -1,5 +1,13 @@
@use "sass:map";
@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) {
@each $breakpoint in map.keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
@ -9,7 +17,7 @@
@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 type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
@if type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix);
}
}
@ -18,15 +26,15 @@
// RFS rescaling
@media (min-width: $rfs-mq-value) {
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
@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 type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
@if type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix, true);
}
}
@ -40,7 +48,7 @@
@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 type-of($utility) == "map" and map-get($utility, print) == true {
@if type-of($utility) == "map" and map.get($utility, print) == true {
@include generate-utility($utility, "-print");
}
}

6
scss/vendor/_rfs.scss vendored
View File

@ -1,3 +1,5 @@
@use "sass:map";
// stylelint-disable scss/dimension-no-non-numeric-values
// SCSS RFS mixin
@ -88,8 +90,8 @@ $rfs-base-value-unit: unit($rfs-base-value);
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
@if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
$result: $result * map.get($unit-map, $dividend-unit);
}
@return $result;
}

8
site/src/scss/_colors.scss
View File

@ -1,8 +1,14 @@
@use "sass:map";
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/functions" as *;
//
// Docs color palette classes
//
@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
@each $color, $value in map.merge($colors, ("gray-500": $gray-500)) {
.swatch-#{$color} {
color: color-contrast($value);
background-color: #{$value};

9
site/src/scss/_masthead.scss
View File

@ -1,3 +1,12 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/vendor/rfs" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/border-radius" as *;
@use "../../../scss/mixins/transition" as *;
@use "../../../scss/mixins/color-mode" as *;
.bd-masthead {
--bd-pink-rgb: #{to-rgb($pink)};
padding: 3rem 0;