$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb
+// scss-docs-start theme-text-map
$theme-colors-text: (
"primary": $primary-text,
"secondary": $secondary-text,
"light": $light-text,
"dark": $dark-text,
) !default;
+// scss-docs-end theme-text-map
+// scss-docs-start theme-bg-subtle-map
$theme-colors-bg-subtle: (
"primary": $primary-bg-subtle,
"secondary": $secondary-bg-subtle,
"light": $light-bg-subtle,
"dark": $dark-bg-subtle,
) !default;
+// scss-docs-end theme-bg-subtle-map
+// scss-docs-start theme-border-subtle-map
$theme-colors-border-subtle: (
"primary": $primary-border-subtle,
"secondary": $secondary-border-subtle,
"light": $light-border-subtle,
"dark": $dark-border-subtle,
) !default;
+// scss-docs-end theme-border-subtle-map
$theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default;
$theme-colors-border-subtle-dark: null !default;
@if $enable-dark-mode {
+ // scss-docs-start theme-text-dark-map
$theme-colors-text-dark: (
"primary": $primary-text-dark,
"secondary": $secondary-text-dark,
"light": $light-text-dark,
"dark": $dark-text-dark,
) !default;
+ // scss-docs-end theme-text-dark-map
+ // scss-docs-start theme-bg-subtle-dark-map
$theme-colors-bg-subtle-dark: (
"primary": $primary-bg-subtle-dark,
"secondary": $secondary-bg-subtle-dark,
"light": $light-bg-subtle-dark,
"dark": $dark-bg-subtle-dark,
) !default;
+ // scss-docs-end theme-bg-subtle-dark-map
+ // scss-docs-start theme-border-subtle-dark-map
$theme-colors-border-subtle-dark: (
"primary": $primary-border-subtle-dark,
"secondary": $secondary-border-subtle-dark,
"light": $light-border-subtle-dark,
"dark": $dark-border-subtle-dark,
) !default;
+ // scss-docs-end theme-border-subtle-dark-map
}
// Utilities maps
//
// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
$primary-text-dark: $blue-300 !default;
$secondary-text-dark: $gray-300 !default;
$success-text-dark: $green-300 !default;
$danger-text-dark: $red-300 !default;
$light-text-dark: $gray-100 !default;
$dark-text-dark: $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: $blue-900 !default;
$secondary-bg-subtle-dark: $gray-900 !default;
$success-bg-subtle-dark: $green-900 !default;
$danger-bg-subtle-dark: $red-900 !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: $blue-700 !default;
$secondary-border-subtle-dark: $gray-700 !default;
$success-border-subtle-dark: $green-700 !default;
$danger-border-subtle-dark: $red-700 !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: $gray-500 !default;
$body-bg-dark: $gray-900 !default;
) !default;
// scss-docs-end theme-colors-map
+// scss-docs-start theme-text-variables
$primary-text: $blue-700 !default;
$secondary-text: $gray-700 !default;
$success-text: $green-700 !default;
$danger-text: $red-700 !default;
$light-text: $gray-700 !default;
$dark-text: $gray-700 !default;
+// scss-docs-end theme-text-variables
+// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: $blue-100 !default;
$secondary-bg-subtle: $gray-100 !default;
$success-bg-subtle: $green-100 !default;
$danger-bg-subtle: $red-100 !default;
$light-bg-subtle: mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
+// scss-docs-start theme-border-subtle-variables
$primary-border-subtle: $blue-200 !default;
$secondary-border-subtle: $gray-200 !default;
$success-border-subtle: $green-200 !default;
$danger-border-subtle: $red-200 !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function
$escaped-characters: (
.highlight {
margin-bottom: 0;
+ @include border-top-radius(0);
}
.bd-example {
background-color: var(--bd-pre-bg);
}
+.bd-scss-docs {
+ .highlight-toolbar {
+ @include border-top-radius(calc(var(--bs-border-radius) + 1px));
+ }
+}
+
.focused {
outline: 0;
box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. `transition: transform 2s ease, opacity .5s ease-out`).
-## Sass
+## CSS
-### Variables
+### Sass variables
Variables for all carousels:
Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [ARIA Authoring Practices Guide accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - you will need to include these yourself with custom JavaScript.
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}}
</figure>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}
{{< /tables.inline >}}
{{< /highlight >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
-### Loop
+### Sass loop
{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
-## Sass
+## CSS
-### Variables
+### Sass variables
Headings have some dedicated variables for sizing and spacing.
{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
-### Mixins
+### Sass mixins
There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
Variables for checks:
</div>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
-## Sass
+## CSS
Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables.
-### Variables
+### Sass variables
`$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}
</select>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
</form>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
-### Mixins
+### Sass mixins
Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
-### Map
+### Sass map
This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
-### Loop
+### Sass loop
Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
</div>
{{< /example >}}
-## Sass
+## CSS
{{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}}
</div>
{{< /example >}}
-## Sass
+## CSS
When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
-### Variables
+### Sass variables
Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
-### Mixins
+### Sass mixins
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
{{< /example >}}
-## Sass
+## CSS
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
-### Variables
+### Sass variables
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
-### Map
+Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
+
+{{< scss-docs name="theme-bg-subtle-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
-And background color opacities build on that with their own map that's consumed by the utilities API:
+Background color opacities build on that with their own map that's consumed by the utilities API:
{{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}}
-### Mixins
+Color mode background colors are also available as a Sass map:
+
+{{< scss-docs name="theme-bg-subtle-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" >}}
+
+### Sass mixins
**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
{{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}}
-### Utilities API
+## Utilities API
Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
+Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
+
+{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
+
+Color mode adaptive border colors are also available as a Sass map:
+
+{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}}
+
### Sass mixins
{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class.
-## Sass
+## CSS
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
-### Variables
+### Sass variables
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
-### Map
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
+
+{{< scss-docs name="theme-text-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-text-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
-And color opacities build on that with their own map that's consumed by the utilities API:
+Color opacities build on that with their own map that's consumed by the utilities API:
{{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
+Color mode adaptive text colors are also available as a Sass map:
+
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}}
+
### Utilities API
Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
+
+Default type and font related Sass variables:
{{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
-### Maps
+### Sass maps
Font-size utilities are generated from this map, in combination with our utilities API.
{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
-### Utilities API
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+## Utilities API
Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{- $match = replace $match " !default" "" -}}
{{- end -}}
- {{- highlight $match "scss" "" -}}
+ <div class="bd-example-snippet bd-code-snippet bd-scss-docs">
+ <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+ <a class="font-monospace text-body-secondary text-decoration-none small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
+ {{- $file -}}
+ </a>
+ <div class="d-flex ms-auto">
+ <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+ <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
+ </button>
+ </div>
+ </div>
+ {{- highlight $match "scss" "" -}}
+ </div>
{{- end -}}
projects / thirdparty / bootstrap.git / commitdiff
