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

Tons of Sass module fixes

Browse Source
This commit is contained in:
Mark Otto 2025-02-18 13:37:25 -08:00
parent a9845cb079
commit f7720abc0b
55 changed files with 362 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
scss/_accordion.scss
View File

@ -1,4 +1,11 @@
@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

2
scss/_alert.scss
View File

@ -1,4 +1,6 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
//
// Base styles

4
scss/_badge.scss
View File

@ -1,4 +1,8 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
// Base class
//

3
scss/_breadcrumb.scss
View File

@ -1,4 +1,7 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
.breadcrumb {
// scss-docs-start breadcrumb-css-vars

3
scss/_button-group.scss
View File

@ -1,4 +1,7 @@
@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,

80
scss/_buttons.scss
View File

@ -1,4 +1,84 @@
@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

4
scss/_card.scss
View File

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

6
scss/_carousel.scss
View File

@ -1,4 +1,10 @@
@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:
//

3
scss/_close.scss
View File

@ -1,4 +1,7 @@
@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.

26
scss/_config.scss
View File

@ -4,12 +4,26 @@
$prefix: bs- !default;
$enable-container-classes: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: false !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;

8
scss/_dropdown.scss
View File

@ -1,4 +1,12 @@
@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,

5
scss/_images.scss
View File

@ -1,4 +1,9 @@
@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)
//

4
scss/_list-group.scss
View File

@ -1,5 +1,9 @@
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// Base class
//

2
scss/_maps.scss
View File

@ -1,5 +1,7 @@
@use "config" as *;
@use "colors" as *;
@use "functions" as *;
@use "variables" as *;
// Re-assigned maps
//

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";

8
scss/_modal.scss
View File

@ -1,4 +1,12 @@
@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

5
scss/_nav.scss
View File

@ -1,4 +1,9 @@
@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
//

9
scss/_navbar.scss
View File

@ -1,4 +1,13 @@
@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
//

5
scss/_offcanvas.scss
View File

@ -1,4 +1,9 @@
@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

6
scss/_pagination.scss
View File

@ -1,4 +1,10 @@
@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) {

1
scss/_placeholders.scss
View File

@ -1,5 +1,6 @@
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
.placeholder {
display: inline-block;

5
scss/_popover.scss
View File

@ -1,4 +1,9 @@
@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

5
scss/_progress.scss
View File

@ -1,5 +1,10 @@
@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

3
scss/_reboot.scss
View File

@ -1,5 +1,8 @@
@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

4
scss/_root.scss
View File

@ -1,5 +1,9 @@
@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"] {

1
scss/_spinners.scss
View File

@ -1,4 +1,5 @@
@use "config" as *;
@use "variables" as *;
//
// Rotating border

3
scss/_tables.scss
View File

@ -1,5 +1,8 @@
@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) {

3
scss/_toasts.scss
View File

@ -1,4 +1,7 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
.toast {
// scss-docs-start toast-css-vars

5
scss/_tooltip.scss
View File

@ -1,4 +1,9 @@
@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 {

2
scss/_transitions.scss
View File

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

44
scss/_type.scss
View File

@ -1,31 +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 {
@ -48,11 +52,11 @@
// Emphasis
//
.small {
@extend small;
// @extend small;
}
.mark {
@extend mark;
// @extend mark;
}
//

3
scss/_utilities.scss
View File

@ -1,5 +1,8 @@
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "functions" as *;
@use "maps" as *;
// Utilities

36
scss/_variables.scss
View File

@ -77,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

@ -6,51 +6,51 @@
// Configuration
// @use "config" as *;
@import "functions";
// @import "functions";
// @import "colors";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// @import "variables";
// @import "variables-dark";
@use "maps";
@use "mixins";
// @use "utilities";
// 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

2
scss/helpers/_clearfix.scss
View File

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

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

@ -1,5 +1,6 @@
@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 {

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

@ -1,5 +1,6 @@
@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 {

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

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

2
scss/helpers/_position.scss
View File

@ -1,4 +1,6 @@
@use "../config" as *;
@use "../variables" as *;
@use "../layout/breakpoints" as *;
// Shorthand

2
scss/helpers/_ratio.scss
View File

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

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;

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

73
scss/mixins/_buttons.scss
View File

@ -1,73 +0,0 @@
@use "../config" as *;
@use "../colors" 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

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;

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.

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

@ -1,29 +0,0 @@
@use "../config" as *;
@use "../colors" as *;
@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

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";

5
scss/utilities/_api.scss
View File

@ -1,4 +1,9 @@
@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) {

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

@ -1,3 +1,4 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/vendor/rfs" as *;