mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

Migrate to Sass modules

Browse Source
This commit is contained in:
Mark Otto
2025-02-18 09:50:10 -08:00
parent eaa83fa86b
commit d96374ada9
106 changed files with 2001 additions and 1062 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

@@ -1,3 +1,9 @@
@use "sass:list";
@use "sass:math";
@use "sass:meta";
@use "../config" as *;
@use "../variables" as *;
// stylelint-disable property-disallowed-list
// Single side border-radius
@@ -5,10 +11,10 @@
@function valid-radius($radius) {
$return: ();
@each $value in $radius {
@if type-of($value) == number {
$return: append($return, max($value, 0));
@if meta.type-of($value) == number {
$return: list.append($return, math.max($value, 0));
} @else {
$return: append($return, $value);
$return: list.append($return, $value);
}
}
@return $return;

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

2
scss/mixins/_deprecate.scss
View File

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

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

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

11
scss/mixins/_transition.scss
View File

@@ -1,10 +1,13 @@
@use "sass:list";
@use "../config" as *;
// stylelint-disable property-disallowed-list
@mixin transition($transition...) {
@if length($transition) == 0 {
@if list.length($transition) == 0 {
$transition: $transition-base;
}
@if length($transition) > 1 {
@if list.length($transition) > 1 {
@each $value in $transition {
@if $value == null or $value == none {
@warn "The keyword 'none' or 'null' must be used as a single argument.";
@@ -13,11 +16,11 @@
}
@if $enable-transitions {
@if nth($transition, 1) != null {
@if list.nth($transition, 1) != null {
transition: $transition;
}
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
@if $enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
@media (prefers-reduced-motion: reduce) {
transition: none;
}

39
scss/mixins/_utilities.scss
View File

@@ -1,37 +1,48 @@
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "sass:string";
@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" {
$values: zip($values, $values);
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
// A single value is converted to a map with a null key.
@if list.length($values) == 1 {
$values: (null: list.nth($values, 1));
} @else {
$values: list.zip($values, $values);
}
}
@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" {
$properties: append((), $properties);
@if meta.type-of($properties) == "string" {
$properties: list.append((), $properties);
}
// 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), list.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);
$infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.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 +55,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";