rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Test for Sass compilation

Browse Source
This commit is contained in:
Julien Déramond 2024-07-30 11:16:28 +02:00
parent 7915584fa4
commit d7fb9a4b0a
No known key found for this signature in database
GPG Key ID: DCD226672FC08F31
71 changed files with 355 additions and 664 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/css/mixins/index.css vendored Normal file
View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=index.css.map */

1
dist/css/mixins/index.css.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css","sourcesContent":[]}

3
dist/css/setup/index.css vendored Normal file
View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=index.css.map */

1
dist/css/setup/index.css.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css","sourcesContent":[]}

2
scss/_accordion.scss
View File

@ -2,7 +2,7 @@
@use "mixins/border-radius";
@use "mixins/color-mode";
@use "mixins/transition";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
//

2
scss/_alert.scss
View File

@ -1,6 +1,6 @@
@use "sass:map";
@use "mixins/border-radius";
@use "variables";
@use "setup/variables";
//
// Base styles

2
scss/_badge.scss
View File

@ -1,6 +1,6 @@
@use "mixins/border-radius";
@use "mixins/gradients";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
// Base class

2
scss/_breadcrumb.scss
View File

@ -1,6 +1,6 @@
@use "functions";
@use "mixins/border-radius";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
.breadcrumb {

2
scss/_button-group.scss
View File

@ -1,6 +1,6 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "variables";
@use "setup/variables";
// Make the div behave like a button
.btn-group,

185
scss/_buttons.scss
View File

@ -1,10 +1,9 @@
@use "functions";
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/buttons";
@use "mixins/gradients";
@use "mixins/transition";
@use "variables";
@use "setup" as *;
@use "vendor/rfs";
//
@ -13,77 +12,77 @@
.btn {
// scss-docs-start btn-css-vars
--#{variables.$prefix}btn-padding-x: #{variables.$btn-padding-x};
--#{variables.$prefix}btn-padding-y: #{variables.$btn-padding-y};
--#{variables.$prefix}btn-font-family: #{variables.$btn-font-family};
@include rfs.rfs(variables.$btn-font-size, --#{variables.$prefix}btn-font-size);
--#{variables.$prefix}btn-font-weight: #{variables.$btn-font-weight};
--#{variables.$prefix}btn-line-height: #{variables.$btn-line-height};
--#{variables.$prefix}btn-color: #{variables.$btn-color};
--#{variables.$prefix}btn-bg: transparent;
--#{variables.$prefix}btn-border-width: #{variables.$btn-border-width};
--#{variables.$prefix}btn-border-color: transparent;
--#{variables.$prefix}btn-border-radius: #{variables.$btn-border-radius};
--#{variables.$prefix}btn-hover-border-color: transparent;
--#{variables.$prefix}btn-box-shadow: #{variables.$btn-box-shadow};
--#{variables.$prefix}btn-disabled-opacity: #{variables.$btn-disabled-opacity};
--#{variables.$prefix}btn-focus-box-shadow: 0 0 0 #{variables.$btn-focus-width} rgba(var(--#{variables.$prefix}btn-focus-shadow-rgb), .5);
--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs.rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$btn-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
// scss-docs-end btn-css-vars
display: inline-block;
padding: var(--#{variables.$prefix}btn-padding-y) var(--#{variables.$prefix}btn-padding-x);
font-family: var(--#{variables.$prefix}btn-font-family);
@include rfs.font-size(var(--#{variables.$prefix}btn-font-size));
font-weight: var(--#{variables.$prefix}btn-font-weight);
line-height: var(--#{variables.$prefix}btn-line-height);
color: var(--#{variables.$prefix}btn-color);
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
font-family: var(--#{$prefix}btn-font-family);
@include rfs.font-size(var(--#{$prefix}btn-font-size));
font-weight: var(--#{$prefix}btn-font-weight);
line-height: var(--#{$prefix}btn-line-height);
color: var(--#{$prefix}btn-color);
text-align: center;
text-decoration: if(variables.$link-decoration == none, null, none);
white-space: variables.$btn-white-space;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
vertical-align: middle;
cursor: if(variables.$enable-button-pointers, pointer, null);
cursor: if($enable-button-pointers, pointer, null);
user-select: none;
border: var(--#{variables.$prefix}btn-border-width) solid var(--#{variables.$prefix}btn-border-color);
@include border-radius.border-radius(var(--#{variables.$prefix}btn-border-radius));
@include gradients.gradient-bg(var(--#{variables.$prefix}btn-bg));
@include box-shadow.box-shadow(var(--#{variables.$prefix}btn-box-shadow));
@include transition.transition(variables.$btn-transition);
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
@include border-radius.border-radius(var(--#{$prefix}btn-border-radius));
@include gradients.gradient-bg(var(--#{$prefix}btn-bg));
@include box-shadow.box-shadow(var(--#{$prefix}btn-box-shadow));
@include transition.transition($btn-transition);
&:hover {
color: var(--#{variables.$prefix}btn-hover-color);
text-decoration: if(variables.$link-hover-decoration == underline, none, null);
background-color: var(--#{variables.$prefix}btn-hover-bg);
border-color: var(--#{variables.$prefix}btn-hover-border-color);
color: var(--#{$prefix}btn-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}btn-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color);
}
.btn-check + &:hover {
// override for the checkbox/radio buttons
color: var(--#{variables.$prefix}btn-color);
background-color: var(--#{variables.$prefix}btn-bg);
border-color: var(--#{variables.$prefix}btn-border-color);
color: var(--#{$prefix}btn-color);
background-color: var(--#{$prefix}btn-bg);
border-color: var(--#{$prefix}btn-border-color);
}
&:focus-visible {
color: var(--#{variables.$prefix}btn-hover-color);
@include gradients.gradient-bg(var(--#{variables.$prefix}btn-hover-bg));
border-color: var(--#{variables.$prefix}btn-hover-border-color);
color: var(--#{$prefix}btn-hover-color);
@include gradients.gradient-bg(var(--#{$prefix}btn-hover-bg));
border-color: var(--#{$prefix}btn-hover-border-color);
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly
@if variables.$enable-shadows {
box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
} @else {
box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
.btn-check:focus-visible + & {
border-color: var(--#{variables.$prefix}btn-hover-border-color);
border-color: var(--#{$prefix}btn-hover-border-color);
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly
@if variables.$enable-shadows {
box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
} @else {
box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
@ -92,41 +91,41 @@
&:first-child:active,
&.active,
&.show {
color: var(--#{variables.$prefix}btn-active-color);
background-color: var(--#{variables.$prefix}btn-active-bg);
color: var(--#{$prefix}btn-active-color);
background-color: var(--#{$prefix}btn-active-bg);
// Remove CSS gradients if they're enabled
background-image: if(variables.$enable-gradients, none, null);
border-color: var(--#{variables.$prefix}btn-active-border-color);
@include box-shadow.box-shadow(var(--#{variables.$prefix}btn-active-shadow));
background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-active-border-color);
@include box-shadow.box-shadow(var(--#{$prefix}btn-active-shadow));
&:focus-visible {
// Avoid using mixin so we can pass custom focus shadow properly
@if variables.$enable-shadows {
box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
} @else {
box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
}
.btn-check:checked:focus-visible + & {
// Avoid using mixin so we can pass custom focus shadow properly
@if variables.$enable-shadows {
box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
} @else {
box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
color: var(--#{variables.$prefix}btn-disabled-color);
color: var(--#{$prefix}btn-disabled-color);
pointer-events: none;
background-color: var(--#{variables.$prefix}btn-disabled-bg);
background-image: if(variables.$enable-gradients, none, null);
border-color: var(--#{variables.$prefix}btn-disabled-border-color);
opacity: var(--#{variables.$prefix}btn-disabled-opacity);
background-color: var(--#{$prefix}btn-disabled-bg);
background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-disabled-border-color);
opacity: var(--#{$prefix}btn-disabled-opacity);
@include box-shadow.box-shadow(none);
}
}
@ -137,25 +136,25 @@
//
// scss-docs-start btn-variant-loops
@each $color, $value in variables.$theme-colors {
@each $color, $value in $theme-colors {
.btn-#{$color} {
@if $color == "light" {
@include buttons.button-variant(
$value,
$value,
$hover-background: functions.shade-color($value, variables.$btn-hover-bg-shade-amount),
$hover-border: functions.shade-color($value, variables.$btn-hover-border-shade-amount),
$active-background: functions.shade-color($value, variables.$btn-active-bg-shade-amount),
$active-border: functions.shade-color($value, variables.$btn-active-border-shade-amount)
$hover-background: shade-color($value, $btn-hover-bg-shade-amount),
$hover-border: shade-color($value, $btn-hover-border-shade-amount),
$active-background: shade-color($value, $btn-active-bg-shade-amount),
$active-border: shade-color($value, $btn-active-border-shade-amount)
);
} @else if $color == "dark" {
@include buttons.button-variant(
$value,
$value,
$hover-background: functions.tint-color($value, variables.$btn-hover-bg-tint-amount),
$hover-border: functions.tint-color($value, variables.$btn-hover-border-tint-amount),
$active-background: functions.tint-color($value, variables.$btn-active-bg-tint-amount),
$active-border: functions.tint-color($value, variables.$btn-active-border-tint-amount)
$hover-background: tint-color($value, $btn-hover-bg-tint-amount),
$hover-border: tint-color($value, $btn-hover-border-tint-amount),
$active-background: tint-color($value, $btn-active-bg-tint-amount),
$active-border: tint-color($value, $btn-active-border-tint-amount)
);
} @else {
@include buttons.button-variant($value, $value);
@ -163,7 +162,7 @@
}
}
@each $color, $value in variables.$theme-colors {
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include buttons.button-outline-variant($value);
}
@ -177,35 +176,35 @@
// Make a button look and behave like a link
.btn-link {
--#{variables.$prefix}btn-font-weight: #{variables.$font-weight-normal};
--#{variables.$prefix}btn-color: #{variables.$btn-link-color};
--#{variables.$prefix}btn-bg: transparent;
--#{variables.$prefix}btn-border-color: transparent;
--#{variables.$prefix}btn-hover-color: #{variables.$btn-link-hover-color};
--#{variables.$prefix}btn-hover-border-color: transparent;
--#{variables.$prefix}btn-active-color: #{variables.$btn-link-hover-color};
--#{variables.$prefix}btn-active-border-color: transparent;
--#{variables.$prefix}btn-disabled-color: #{variables.$btn-link-disabled-color};
--#{variables.$prefix}btn-disabled-border-color: transparent;
--#{variables.$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
--#{variables.$prefix}btn-focus-shadow-rgb: #{variables.$btn-link-focus-shadow-rgb};
--#{$prefix}btn-font-weight: #{$font-weight-normal};
--#{$prefix}btn-color: #{$btn-link-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-color: #{$btn-link-hover-color};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-active-color: #{$btn-link-hover-color};
--#{$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-disabled-border-color: transparent;
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
--#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
text-decoration: variables.$link-decoration;
@if variables.$enable-gradients {
text-decoration: $link-decoration;
@if $enable-gradients {
background-image: none;
}
&:hover,
&:focus-visible {
text-decoration: variables.$link-hover-decoration;
text-decoration: $link-hover-decoration;
}
&:focus-visible {
color: var(--#{variables.$prefix}btn-color);
color: var(--#{$prefix}btn-color);
}
&:hover {
color: var(--#{variables.$prefix}btn-hover-color);
color: var(--#{$prefix}btn-hover-color);
}
// No need for an active state here
@ -217,9 +216,9 @@
//
.btn-lg {
@include buttons.button-size(variables.$btn-padding-y-lg, variables.$btn-padding-x-lg, variables.$btn-font-size-lg, variables.$btn-border-radius-lg);
@include buttons.button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
}
.btn-sm {
@include buttons.button-size(variables.$btn-padding-y-sm, variables.$btn-padding-x-sm, variables.$btn-font-size-sm, variables.$btn-border-radius-sm);
@include buttons.button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
}

2
scss/_card.scss
View File

@ -1,7 +1,7 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/breakpoints";
@use "variables";
@use "setup/variables";
//
// Base styles

2
scss/_carousel.scss
View File

@ -2,7 +2,7 @@
@use "mixins/clearfix";
@use "mixins/color-mode";
@use "mixins/transition";
@use "variables";
@use "setup/variables";
// Notes on the classes:
//

2
scss/_close.scss
View File

@ -1,7 +1,7 @@
@use "functions";
@use "mixins/border-radius";
@use "mixins/color-mode";
@use "variables";
@use "setup/variables";
// Transparent background and border properties included for button version.
// iOS requires the button element instead of an anchor tag.

2
scss/_containers.scss
View File

@ -1,6 +1,6 @@
@use "mixins/breakpoints";
@use "mixins/container";
@use "variables";
@use "setup/variables";
// Container widths
//

2
scss/_dropdown.scss
View File

@ -4,7 +4,7 @@
@use "mixins/breakpoints";
@use "mixins/caret";
@use "mixins/gradients";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
// The dropdown wrapper (`<div>`)

312
scss/_functions.scss
View File

@ -1,312 +0,0 @@
@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:string";
// @use "variables";
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
// Do nothing
} @else if not math.compatible($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
@if list.length($map) > 0 {
$values: map.values($map);
$first-value: list.nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
}
}
// Colors
@function to-rgb($value) {
@return color.red($value), color.green($value), color.blue($value);
}
// stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) {
@if $identifier == "body" and $target == "bg" {
@return rgba(var(--#{variables.$prefix}#{$identifier}-bg-rgb), var(--#{variables.$prefix}#{$target}-opacity));
} @if $identifier == "body" and $target == "text" {
@return rgba(var(--#{variables.$prefix}#{$identifier}-color-rgb), var(--#{variables.$prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{variables.$prefix}#{$identifier}-rgb), var(--#{variables.$prefix}#{$target}-opacity));
}
}
@function map-loop($map, $func, $args...) {
$_map: ();
@each $key, $value in $map {
// allow to pass the $key and $value of the map as an function argument
$_args: ();
@each $arg in $args {
$_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
}
$_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
}
@return $_map;
}
// stylelint-enable scss/dollar-variable-pattern
@function varify($list) {
$result: null;
@each $entry in $list {
$result: list.append($result, var(--#{variables.$prefix}#{$entry}), space);
}
@return $result;
}
// Internal Bootstrap function to turn maps into its negative variant.
// It prefixes the keys with `n` and makes the value negative.
@function negativify-map($map) {
$result: ();
@each $key, $value in $map {
@if $key != 0 {
$result: map.merge($result, ("n" + $key: (-$value)));
}
}
@return $result;
}
// Get multiple keys from a sass map
@function map-get-multiple($map, $values) {
$result: ();
@each $key, $value in $map {
@if (list.index($values, $key) != null) {
$result: map.merge($result, ($key: $value));
}
}
@return $result;
}
// Merge multiple maps
@function map-merge-multiple($maps...) {
$merged-maps: ();
@each $map in $maps {
$merged-maps: map.merge($merged-maps, $map);
}
@return $merged-maps;
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Kitty Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: string.index($string, $search);
@if $index {
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
}
@return $string;
}
// See https://codepen.io/kevinweber/pen/dXWoRw
//
// Requires the use of quotes around data URIs.
@function escape-svg($string) {
@if string.index($string, "data:image/svg+xml") {
@each $char, $encoded in variables.$escaped-characters {
// Do not escape the url brackets
@if string.index($string, "url(") == 1 {
$string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
} @else {
$string: str-replace($string, $char, $encoded);
}
}
}
@return $string;
}
// Color contrast
// See https://github.com/twbs/bootstrap/pull/30168
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, variables.$white, variables.$black;
$max-ratio: 0;
$max-ratio-color: null;
@each $color in $foregrounds {
$contrast-ratio: contrast-ratio($background, $color);
@if $contrast-ratio > $min-contrast-ratio {
@return $color;
} @else if $contrast-ratio > $max-ratio {
$max-ratio: $contrast-ratio;
$max-ratio-color: $color;
}
}
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
@return $max-ratio-color;
}
@function contrast-ratio($background, $foreground: variables.$color-contrast-light) {
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
}
// Return WCAG2.1 relative luminance
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) {
$rgb: (
"r": color.red($color),
"g": color.green($color),
"b": color.blue($color)
);
@each $name, $value in $rgb {
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
$rgb: map.merge($rgb, ($name: $value));
}
@return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
}
// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
@return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}
// mdo-do: Replace tint-color and shade-color with color.adjust(COLOR, $lightness: %).
// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return color.mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return color.mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions
// Return valid calc
// @function add($value1, $value2, $return-calc: true) {
// @if $value1 == null {
// @return $value2;
// }
// @if $value2 == null {
// @return $value1;
// }
// @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
// @return $value1 + $value2;
// }
// @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
// }
// @function subtract($value1, $value2, $return-calc: true) {
// @if $value1 == null and $value2 == null {
// @return null;
// }
// @if $value1 == null {
// @return -$value2;
// }
// @if $value2 == null {
// @return $value1;
// }
// @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
// @return $value1 - $value2;
// }
// @if type-of($value2) != number {
// $value2: unquote("(") + $value2 + unquote(")");
// }
// @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
// }
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: math.abs($dividend);
$divisor: math.abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: math.unit($dividend);
$divisor-unit: math.unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
$result: $result * map.get($unit-map, $dividend-unit);
}
@return $result;
}

2
scss/_grid.scss
View File

@ -1,5 +1,5 @@
@use "mixins/grid";
@use "variables";
@use "setup/variables";
// Row
//

2
scss/_images.scss
View File

@ -1,7 +1,7 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/image";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
// Responsive images (ensure images don't scale beyond their parents)

2
scss/_list-group.scss
View File

@ -1,7 +1,7 @@
@use "sass:map";
@use "mixins/border-radius";
@use "mixins/breakpoints";
@use "variables";
@use "setup/variables";
// Base class
//

2
scss/_maps.scss
View File

@ -2,7 +2,7 @@
@use "setup/variables" as *;
@use "setup/functions" as *;
// @use "functions";
// @use "variables";
// @use "setup/variables";
// Re-assigned maps
//

2
scss/_modal.scss
View File

@ -4,7 +4,7 @@
@use "mixins/box-shadow";
@use "mixins/breakpoints";
@use "mixins/transition";
@use "variables";
@use "setup/variables";
// stylelint-disable function-disallowed-list

2
scss/_nav.scss
View File

@ -1,7 +1,7 @@
@use "mixins/border-radius";
@use "mixins/gradients";
@use "mixins/transition";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
// Base class

2
scss/_navbar.scss
View File

@ -7,7 +7,7 @@
@use "mixins/deprecate";
@use "mixins/gradients";
@use "mixins/transition";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
// Navbar

2
scss/_offcanvas.scss
View File

@ -3,7 +3,7 @@
@use "mixins/box-shadow";
@use "mixins/breakpoints";
@use "mixins/transition";
@use "variables";
@use "setup/variables";
// stylelint-disable function-disallowed-list

2
scss/_pagination.scss
View File

@ -3,7 +3,7 @@
@use "mixins/lists";
@use "mixins/pagination";
@use "mixins/transition";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
.pagination {

2
scss/_placeholders.scss
View File

@ -1,4 +1,4 @@
@use "variables";
@use "setup/variables";
.placeholder {
display: inline-block;

2
scss/_popover.scss
View File

@ -1,7 +1,7 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/reset-text";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
.popover {

2
scss/_progress.scss
View File

@ -2,7 +2,7 @@
@use "mixins/box-shadow";
@use "mixins/gradients";
@use "mixins/transition";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
// Disable animation if transitions are disabled

2
scss/_reboot.scss
View File

@ -1,5 +1,5 @@
@use "mixins/border-radius";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix

2
scss/_spinners.scss
View File

@ -1,4 +1,4 @@
@use "variables";
@use "setup/variables";
//
// Rotating border

2
scss/_tables.scss
View File

@ -1,7 +1,7 @@
@use "sass:map";
@use "mixins/breakpoints";
@use "mixins/table-variants";
@use "variables";
@use "setup/variables";
//
// Basic Bootstrap table

2
scss/_toasts.scss
View File

@ -1,5 +1,5 @@
@use "mixins/border-radius";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
.toast {

2
scss/_tooltip.scss
View File

@ -1,7 +1,7 @@
@use "mixins/border-radius";
@use "mixins/deprecate";
@use "mixins/reset-text";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
// Base class

2
scss/_transitions.scss
View File

@ -1,5 +1,5 @@
@use "mixins/transition";
@use "variables";
@use "setup/variables";
.fade {
@include transition.transition(variables.$transition-fade);

3
scss/_type.scss
View File

@ -1,6 +1,7 @@
@use "mixins/lists";
@use "variables";
@use "setup/variables";
@use "vendor/rfs";
@use "reboot";
//
// Headings

2
scss/_utilities.scss
View File

@ -1,7 +1,7 @@
@use "sass:map";
@use "functions";
@use "maps";
@use "variables";
@use "setup/variables";
// Utilities

16
scss/bootstrap.scss vendored
View File

@ -16,14 +16,14 @@
// Layout & components
@use "root";
// @use "reboot";
// @use "type";
// @use "images";
// @use "containers";
// @use "grid";
// @use "tables";
// @use "forms";
// @use "buttons";
@use "reboot";
@use "type";
@use "images";
@use "containers";
@use "grid";
@use "tables";
@use "forms";
@use "buttons";
// @use "transitions";
// @use "dropdown";
// @use "button-group";

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

@ -1,6 +1,6 @@
@use "../mixins/border-radius";
@use "../mixins/transition";
@use "../variables";
@use "../setup/variables";
.form-floating {
position: relative;

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

@ -1,8 +1,7 @@
@use "../functions";
@use "../mixins/border-radius";
@use "../mixins/color-mode";
@use "../mixins/transition";
@use "../variables";
@use "../setup" as *;
//
// Check/radio
@ -10,101 +9,101 @@
.form-check {
display: block;
min-height: variables.$form-check-min-height;
padding-left: variables.$form-check-padding-start;
margin-bottom: variables.$form-check-margin-bottom;
min-height: $form-check-min-height;
padding-left: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom;
.form-check-input {
float: left;
margin-left: variables.$form-check-padding-start * -1;
margin-left: $form-check-padding-start * -1;
}
}
.form-check-reverse {
padding-right: variables.$form-check-padding-start;
padding-right: $form-check-padding-start;
padding-left: 0;
text-align: right;
.form-check-input {
float: right;
margin-right: variables.$form-check-padding-start * -1;
margin-right: $form-check-padding-start * -1;
margin-left: 0;
}
}
.form-check-input {
--#{variables.$prefix}form-check-bg: #{variables.$form-check-input-bg};
--#{$prefix}form-check-bg: #{$form-check-input-bg};
flex-shrink: 0;
width: variables.$form-check-input-width;
height: variables.$form-check-input-width;
margin-top: (variables.$line-height-base - variables.$form-check-input-width) * .5; // line-height minus check height
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
appearance: none;
background-color: var(--#{variables.$prefix}form-check-bg);
background-image: var(--#{variables.$prefix}form-check-bg-image);
background-color: var(--#{$prefix}form-check-bg);
background-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: variables.$form-check-input-border;
border: $form-check-input-border;
print-color-adjust: exact; // Keep themed appearance for print
@include transition.transition(variables.$form-check-transition);
@include transition.transition($form-check-transition);
&[type="checkbox"] {
@include border-radius.border-radius(variables.$form-check-input-border-radius);
@include border-radius.border-radius($form-check-input-border-radius);
}
&[type="radio"] {
// stylelint-disable-next-line property-disallowed-list
border-radius: variables.$form-check-radio-border-radius;
border-radius: $form-check-radio-border-radius;
}
&:active {
filter: variables.$form-check-input-active-filter;
filter: $form-check-input-active-filter;
}
&:focus {
border-color: variables.$form-check-input-focus-border;
border-color: $form-check-input-focus-border;
outline: 0;
box-shadow: variables.$form-check-input-focus-box-shadow;
box-shadow: $form-check-input-focus-box-shadow;
}
&:checked {
background-color: variables.$form-check-input-checked-bg-color;
border-color: variables.$form-check-input-checked-border-color;
background-color: $form-check-input-checked-bg-color;
border-color: $form-check-input-checked-border-color;
&[type="checkbox"] {
@if variables.$enable-gradients {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)}, var(--#{variables.$prefix}gradient);
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)};
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
}
}
&[type="radio"] {
@if variables.$enable-gradients {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)}, var(--#{variables.$prefix}gradient);
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)};
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
}
}
}
&[type="checkbox"]:indeterminate {
background-color: variables.$form-check-input-indeterminate-bg-color;
border-color: variables.$form-check-input-indeterminate-border-color;
background-color: $form-check-input-indeterminate-bg-color;
border-color: $form-check-input-indeterminate-border-color;
@if variables.$enable-gradients {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)}, var(--#{variables.$prefix}gradient);
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)};
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
}
}
&:disabled {
pointer-events: none;
filter: none;
opacity: variables.$form-check-input-disabled-opacity;
opacity: $form-check-input-disabled-opacity;
}
// Use disabled attribute in addition of :disabled pseudo-class
@ -113,14 +112,14 @@
&:disabled {
~ .form-check-label {
cursor: default;
opacity: variables.$form-check-label-disabled-opacity;
opacity: $form-check-label-disabled-opacity;
}
}
}
.form-check-label {
color: variables.$form-check-label-color;
cursor: variables.$form-check-label-cursor;
color: $form-check-label-color;
cursor: $form-check-label-cursor;
}
//
@ -128,39 +127,39 @@
//
.form-switch {
padding-left: variables.$form-switch-padding-start;
padding-left: $form-switch-padding-start;
.form-check-input {
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-bg-image)};
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
width: variables.$form-switch-width;
margin-left: variables.$form-switch-padding-start * -1;
background-image: var(--#{variables.$prefix}form-switch-bg);
width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
@include border-radius.border-radius(variables.$form-switch-border-radius, 0);
@include transition.transition(variables.$form-switch-transition);
@include border-radius.border-radius($form-switch-border-radius, 0);
@include transition.transition($form-switch-transition);
&:focus {
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-focus-bg-image)};
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
}
&:checked {
background-position: variables.$form-switch-checked-bg-position;
background-position: $form-switch-checked-bg-position;
@if variables.$enable-gradients {
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)}, var(--#{variables.$prefix}gradient);
@if $enable-gradients {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)};
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
}
}
}
&.form-check-reverse {
padding-right: variables.$form-switch-padding-start;
padding-right: $form-switch-padding-start;
padding-left: 0;
.form-check-input {
margin-right: variables.$form-switch-padding-start * -1;
margin-right: $form-switch-padding-start * -1;
margin-left: 0;
}
}
@ -168,7 +167,7 @@
.form-check-inline {
display: inline-block;
margin-right: variables.$form-check-inline-margin-end;
margin-right: $form-check-inline-margin-end;
}
.btn-check {
@ -181,15 +180,15 @@
+ .btn {
pointer-events: none;
filter: none;
opacity: variables.$form-check-btn-check-disabled-opacity;
opacity: $form-check-btn-check-disabled-opacity;
}
}
}
@if variables.$enable-dark-mode {
@if $enable-dark-mode {
@include color-mode.color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) {
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg($form-switch-bg-image-dark)};
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
}
}
}

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

@ -3,7 +3,7 @@
@use "../mixins/box-shadow";
@use "../mixins/gradients";
@use "../mixins/transition";
@use "../variables";
@use "../setup/variables";
@use "../vendor/rfs";
//

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

@ -2,7 +2,7 @@
@use "../mixins/box-shadow";
@use "../mixins/gradients";
@use "../mixins/transition";
@use "../variables";
@use "../setup/variables";
// Range
//

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

@ -1,9 +1,8 @@
@use "../functions";
@use "../mixins/border-radius";
@use "../mixins/box-shadow";
@use "../mixins/color-mode";
@use "../mixins/transition";
@use "../variables";
@use "../setup" as *;
@use "../vendor/rfs";
// Select
@ -12,77 +11,77 @@
// https://primer.github.io/.
.form-select {
--#{variables.$prefix}form-select-bg-img: #{functions.escape-svg(variables.$form-select-indicator)};
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
display: block;
width: 100%;
padding: variables.$form-select-padding-y variables.$form-select-indicator-padding variables.$form-select-padding-y variables.$form-select-padding-x;
font-family: variables.$form-select-font-family;
@include rfs.font-size(variables.$form-select-font-size);
font-weight: variables.$form-select-font-weight;
line-height: variables.$form-select-line-height;
color: variables.$form-select-color;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
font-family: $form-select-font-family;
@include rfs.font-size($form-select-font-size);
font-weight: $form-select-font-weight;
line-height: $form-select-line-height;
color: $form-select-color;
appearance: none;
background-color: variables.$form-select-bg;
background-image: var(--#{variables.$prefix}form-select-bg-img), var(--#{variables.$prefix}form-select-bg-icon, none);
background-color: $form-select-bg;
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: variables.$form-select-bg-position;
background-size: variables.$form-select-bg-size;
border: variables.$form-select-border-width solid variables.$form-select-border-color;
@include border-radius.border-radius(variables.$form-select-border-radius, 0);
@include box-shadow.box-shadow(variables.$form-select-box-shadow);
@include transition.transition(variables.$form-select-transition);
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
border: $form-select-border-width solid $form-select-border-color;
@include border-radius.border-radius($form-select-border-radius, 0);
@include box-shadow.box-shadow($form-select-box-shadow);
@include transition.transition($form-select-transition);
&:focus {
border-color: variables.$form-select-focus-border-color;
border-color: $form-select-focus-border-color;
outline: 0;
@if variables.$enable-shadows {
@include box-shadow.box-shadow(variables.$form-select-box-shadow, variables.$form-select-focus-box-shadow);
@if $enable-shadows {
@include box-shadow.box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: variables.$form-select-focus-box-shadow;
box-shadow: $form-select-focus-box-shadow;
}
}
&[multiple],
&[size]:not([size="1"]) {
padding-right: variables.$form-select-padding-x;
padding-right: $form-select-padding-x;
background-image: none;
}
&:disabled {
color: variables.$form-select-disabled-color;
background-color: variables.$form-select-disabled-bg;
border-color: variables.$form-select-disabled-border-color;
color: $form-select-disabled-color;
background-color: $form-select-disabled-bg;
border-color: $form-select-disabled-border-color;
}
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 variables.$form-select-color;
text-shadow: 0 0 0 $form-select-color;
}
}
.form-select-sm {
padding-top: variables.$form-select-padding-y-sm;
padding-bottom: variables.$form-select-padding-y-sm;
padding-left: variables.$form-select-padding-x-sm;
@include rfs.font-size(variables.$form-select-font-size-sm);
@include border-radius.border-radius(variables.$form-select-border-radius-sm);
padding-top: $form-select-padding-y-sm;
padding-bottom: $form-select-padding-y-sm;
padding-left: $form-select-padding-x-sm;
@include rfs.font-size($form-select-font-size-sm);
@include border-radius.border-radius($form-select-border-radius-sm);
}
.form-select-lg {
padding-top: variables.$form-select-padding-y-lg;
padding-bottom: variables.$form-select-padding-y-lg;
padding-left: variables.$form-select-padding-x-lg;
@include rfs.font-size(variables.$form-select-font-size-lg);
@include border-radius.border-radius(variables.$form-select-border-radius-lg);
padding-top: $form-select-padding-y-lg;
padding-bottom: $form-select-padding-y-lg;
padding-left: $form-select-padding-x-lg;
@include rfs.font-size($form-select-font-size-lg);
@include border-radius.border-radius($form-select-border-radius-lg);
}
@if variables.$enable-dark-mode {
@if $enable-dark-mode {
@include color-mode.color-mode(dark) {
.form-select {
--#{variables.$prefix}form-select-bg-img: #{functions.escape-svg($form-select-indicator-dark)};
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
}
}
}

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

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
@use "../vendor/rfs";
//

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

@ -1,7 +1,7 @@
@use "sass:map";
@use "sass:string";
@use "../mixins/border-radius";
@use "../variables";
@use "../setup/variables";
@use "../vendor/rfs";
//

2
scss/forms/_labels.scss
View File

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
@use "../vendor/rfs";
//

2
scss/forms/_validation.scss
View File

@ -1,5 +1,5 @@
@use "../mixins/forms";
@use "../variables";
@use "../setup/variables";
// Form validation
//

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

@ -1,5 +1,5 @@
@use "../functions";
@use "../variables";
@use "../setup/variables";
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in variables.$theme-colors {

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

@ -1,5 +1,5 @@
@use "../functions";
@use "../variables";
@use "../setup/variables";
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in variables.$theme-colors {

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

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
.focus-ring:focus {
outline: 0;

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

@ -1,5 +1,5 @@
@use "../mixins/transition";
@use "../variables";
@use "../setup/variables";
.icon-link {
display: inline-flex;

2
scss/helpers/_position.scss
View File

@ -1,6 +1,6 @@
@use "sass:map";
@use "../mixins/breakpoints";
@use "../variables";
@use "../setup/variables";
// Shorthand

2
scss/helpers/_ratio.scss
View File

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
// Credit: Nicolas Gallagher and SUIT CSS.

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

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
//
// Stretched link

2
scss/helpers/_vr.scss
View File

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
.vr {
display: inline-block;

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

@ -1,6 +1,6 @@
@use "sass:list";
@use "sass:meta";
@use "../variables";
@use "../setup/variables";
// stylelint-disable property-disallowed-list
// Single side border-radius

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

@ -1,5 +1,5 @@
@use "sass:list";
@use "../variables";
@use "../setup/variables";
@mixin box-shadow($shadow...) {
@if variables.$enable-shadows {

2
scss/mixins/_breakpoints.scss
View File

@ -1,6 +1,6 @@
@use "sass:list";
@use "sass:map";
@use "../variables";
@use "../setup/variables";
// Breakpoint viewport sizes and media queries.
//

87
scss/mixins/_buttons.scss
View File

@ -1,6 +1,5 @@
@use "sass:color";
@use "../functions";
@use "../variables";
@use "../setup" as *;
@use "../vendor/rfs";
// Button variants
@ -12,64 +11,64 @@
@mixin button-variant(
$background,
$border,
$color: functions.color-contrast($background),
$hover-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-hover-bg-shade-amount), functions.tint-color($background, variables.$btn-hover-bg-tint-amount)),
$hover-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-hover-border-shade-amount), functions.tint-color($border, variables.$btn-hover-border-tint-amount)),
$hover-color: functions.color-contrast($hover-background),
$active-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-active-bg-shade-amount), functions.tint-color($background, variables.$btn-active-bg-tint-amount)),
$active-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-active-border-shade-amount), functions.tint-color($border, variables.$btn-active-border-tint-amount)),
$active-color: functions.color-contrast($active-background),
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: functions.color-contrast($disabled-background)
$disabled-color: color-contrast($disabled-background)
) {
--#{variables.$prefix}btn-color: #{$color};
--#{variables.$prefix}btn-bg: #{$background};
--#{variables.$prefix}btn-border-color: #{$border};
--#{variables.$prefix}btn-hover-color: #{$hover-color};
--#{variables.$prefix}btn-hover-bg: #{$hover-background};
--#{variables.$prefix}btn-hover-border-color: #{$hover-border};
--#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb(color.mix($color, $border, 15%))};
--#{variables.$prefix}btn-active-color: #{$active-color};
--#{variables.$prefix}btn-active-bg: #{$active-background};
--#{variables.$prefix}btn-active-border-color: #{$active-border};
--#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
--#{variables.$prefix}btn-disabled-color: #{$disabled-color};
--#{variables.$prefix}btn-disabled-bg: #{$disabled-background};
--#{variables.$prefix}btn-disabled-border-color: #{$disabled-border};
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
$color,
$color-hover: functions.color-contrast($color),
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: functions.color-contrast($active-background)
$active-color: color-contrast($active-background)
) {
--#{variables.$prefix}btn-color: #{$color};
--#{variables.$prefix}btn-border-color: #{$color};
--#{variables.$prefix}btn-hover-color: #{$color-hover};
--#{variables.$prefix}btn-hover-bg: #{$active-background};
--#{variables.$prefix}btn-hover-border-color: #{$active-border};
--#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb($color)};
--#{variables.$prefix}btn-active-color: #{$active-color};
--#{variables.$prefix}btn-active-bg: #{$active-background};
--#{variables.$prefix}btn-active-border-color: #{$active-border};
--#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
--#{variables.$prefix}btn-disabled-color: #{$color};
--#{variables.$prefix}btn-disabled-bg: transparent;
--#{variables.$prefix}btn-disabled-border-color: #{$color};
--#{variables.$prefix}gradient: none;
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-border-color: #{$color};
--#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{variables.$prefix}btn-padding-y: #{$padding-y};
--#{variables.$prefix}btn-padding-x: #{$padding-x};
@include rfs.rfs($font-size, --#{variables.$prefix}btn-font-size);
--#{variables.$prefix}btn-border-radius: #{$border-radius};
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs.rfs($font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin

2
scss/mixins/_caret.scss
View File

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
// scss-docs-start caret-mixins
@mixin caret-down($width: variables.$caret-width) {

2
scss/mixins/_container.scss
View File

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
// Container mixins

61
scss/mixins/_forms.scss
View File

@ -1,8 +1,7 @@
@use "../functions";
@use "../variables";
@use "../vendor/rfs";
@use "border-radius";
@use "box-shadow";
@use "../setup" as *;
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
@ -25,17 +24,17 @@
$state,
$color,
$icon,
$tooltip-color: functions.color-contrast($color),
$tooltip-bg-color: rgba($color, variables.$form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 variables.$input-btn-focus-blur variables.$input-focus-width rgba($color, variables.$input-btn-focus-color-opacity),
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
$border-color: $color
) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: variables.$form-feedback-margin-top;
@include rfs.font-size(variables.$form-feedback-font-size);
font-style: variables.$form-feedback-font-style;
margin-top: $form-feedback-margin-top;
@include rfs.font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
@ -45,13 +44,13 @@
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: variables.$form-feedback-tooltip-padding-y variables.$form-feedback-tooltip-padding-x;
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include rfs.font-size(variables.$form-feedback-tooltip-font-size);
line-height: variables.$form-feedback-tooltip-line-height;
@include rfs.font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius.border-radius(variables.$form-feedback-tooltip-border-radius);
@include border-radius.border-radius($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
@ -65,18 +64,18 @@
@include form-validation-state-selector($state) {
border-color: $border-color;
@if variables.$enable-validation-icons {
padding-right: variables.$input-height-inner;
background-image: functions.escape-svg($icon);
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right variables.$input-height-inner-quarter center;
background-size: variables.$input-height-inner-half variables.$input-height-inner-half;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $border-color;
@if variables.$enable-shadows {
@include box-shadow.box-shadow(variables.$input-box-shadow, $focus-box-shadow);
@if $enable-shadows {
@include box-shadow.box-shadow($input-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
@ -88,9 +87,9 @@
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if variables.$enable-validation-icons {
padding-right: variables.$input-height-inner;
background-position: top variables.$input-height-inner-quarter right variables.$input-height-inner-quarter;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
@ -99,20 +98,20 @@
@include form-validation-state-selector($state) {
border-color: $border-color;
@if variables.$enable-validation-icons {
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
--#{variables.$prefix}form-select-bg-icon: #{functions.escape-svg($icon)};
padding-right: variables.$form-select-feedback-icon-padding-end;
background-position: variables.$form-select-bg-position, variables.$form-select-feedback-icon-position;
background-size: variables.$form-select-bg-size, variables.$form-select-feedback-icon-size;
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end;
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $border-color;
@if variables.$enable-shadows {
@include box-shadow.box-shadow(variables.$form-select-box-shadow, $focus-box-shadow);
@if $enable-shadows {
@include box-shadow.box-shadow($form-select-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
@ -123,8 +122,8 @@
.form-control-color {
@include form-validation-state-selector($state) {
@if variables.$enable-validation-icons {
width: calc(#{variables.$form-color-width} + #{variables.$input-height-inner});
@if $enable-validation-icons {
width: calc(#{$form-color-width} + #{$input-height-inner});
}
}
}

2
scss/mixins/_gradients.scss
View File

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
// Gradients

7
scss/mixins/_grid.scss
View File

@ -1,10 +1,9 @@
@use "sass:map";
@use "sass:math";
@use "sass:meta";
// @use "../setup" as *;
// @use "../maps";
// @use "../setup/variables";
// @use "breakpoints";
@use "../setup" as *;
@use "../maps";
@use "breakpoints";
// Grid system
//

2
scss/mixins/_pagination.scss
View File

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
@use "../vendor/rfs";
// Pagination

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

@ -1,4 +1,4 @@
@use "../variables";
@use "../setup/variables";
@mixin reset-text {
font-family: variables.$font-family-base;

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

@ -1,29 +1,28 @@
@use "sass:color";
@use "sass:math";
@use "../functions";
@use "../variables";
@use "../setup" as *;
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: functions.color-contrast(functions.opaque(variables.$body-bg, $background));
$hover-bg: color.mix($color, $background, math.percentage(variables.$table-hover-bg-factor));
$striped-bg: color.mix($color, $background, math.percentage(variables.$table-striped-bg-factor));
$active-bg: color.mix($color, $background, math.percentage(variables.$table-active-bg-factor));
$table-border-color: color.mix($color, $background, math.percentage(variables.$table-border-factor));
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
$table-border-color: mix($color, $background, percentage($table-border-factor));
--#{variables.$prefix}table-color: #{$color};
--#{variables.$prefix}table-bg: #{$background};
--#{variables.$prefix}table-border-color: #{$table-border-color};
--#{variables.$prefix}table-striped-bg: #{$striped-bg};
--#{variables.$prefix}table-striped-color: #{functions.color-contrast($striped-bg)};
--#{variables.$prefix}table-active-bg: #{$active-bg};
--#{variables.$prefix}table-active-color: #{functions.color-contrast($active-bg)};
--#{variables.$prefix}table-hover-bg: #{$hover-bg};
--#{variables.$prefix}table-hover-color: #{functions.color-contrast($hover-bg)};
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{variables.$prefix}table-color);
border-color: var(--#{variables.$prefix}table-border-color);
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant
// scss-docs-end table-variant

2
scss/mixins/_transition.scss
View File

@ -1,5 +1,5 @@
@use "sass:list";
@use "../variables";
@use "../setup/variables";
// stylelint-disable property-disallowed-list
@mixin transition($transition...) {

2
scss/mixins/_utilities.scss
View File

@ -2,7 +2,7 @@
@use "sass:map";
@use "sass:meta";
@use "sass:string";
@use "../variables";
@use "../setup/variables";
@use "../vendor/rfs";
// Utility generator

2
scss/setup/_functions.scss
View File

@ -317,4 +317,4 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$result: $result * map.get($unit-map, $dividend-unit);
}
@return $result;
}
}

5
scss/setup/_variables.scss
View File

@ -1,6 +1,6 @@
@use "sass:color";
@use "sass:string";
@use "functions";
@use "functions" as *;
// Variables
//
@ -847,7 +847,8 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default;
$btn-link-focus-shadow-rgb: to-rgb(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default;
// $btn-link-focus-shadow-rgb: to-rgb(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default;
$btn-link-focus-shadow-rgb: #fd0 !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default;

2
scss/utilities/_api.scss
View File

@ -3,7 +3,7 @@
@use "../mixins/breakpoints";
@use "../mixins/utilities" as mixins-utilities;
@use "../utilities";
@use "../variables";
@use "../setup/variables";
@use "../vendor/rfs";
// Loop over each breakpoint