mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-12 00:24:03 +02:00
Migrate some Sass vars to be local to specific stylesheets
- Update ScssDocs tags where appropriate - Removed a null Sass variable, $table-th-font-weight - Removed $table-caption-color because we put table Sass vars in the _tables.scss file away from the _reboot.scss file - Fix docs styles as needed
This commit is contained in:
Mark Otto
@@ -7,9 +7,46 @@
|
||||
@use "mixins/box-shadow" as *;
|
||||
@use "mixins/color-mode" as *;
|
||||
|
||||
// scss-docs-start accordion-variables
|
||||
$accordion-padding-y: 1rem !default;
|
||||
$accordion-padding-x: 1.25rem !default;
|
||||
$accordion-color: var(--#{$prefix}body-color) !default;
|
||||
$accordion-bg: var(--#{$prefix}body-bg) !default;
|
||||
$accordion-border-width: var(--#{$prefix}border-width) !default;
|
||||
$accordion-border-color: var(--#{$prefix}border-color) !default;
|
||||
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$accordion-inner-border-radius: calc($accordion-border-radius - $accordion-border-width) !default;
|
||||
|
||||
$accordion-body-padding-y: $accordion-padding-y !default;
|
||||
$accordion-body-padding-x: $accordion-padding-x !default;
|
||||
|
||||
$accordion-button-padding-y: $accordion-padding-y !default;
|
||||
$accordion-button-padding-x: $accordion-padding-x !default;
|
||||
$accordion-button-color: var(--#{$prefix}body-color) !default;
|
||||
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
|
||||
$accordion-transition: $btn-transition, border-radius .15s ease !default;
|
||||
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
|
||||
$accordion-button-active-color: var(--#{$prefix}primary-text) !default;
|
||||
|
||||
// fusv-disable
|
||||
$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
|
||||
// fusv-enable
|
||||
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
||||
|
||||
$accordion-icon-width: 1.25rem !default;
|
||||
$accordion-icon-color: var(--#{$prefix}body-color) !default;
|
||||
$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
|
||||
$accordion-icon-transition: transform .2s ease-in-out !default;
|
||||
$accordion-icon-transform: rotate(-180deg) !default;
|
||||
|
||||
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
// scss-docs-end accordion-variables
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
@layer components {
|
||||
.accordion {
|
||||
// scss-docs-start accordion-css-vars
|
||||
|
||||
@@ -4,6 +4,16 @@
|
||||
@use "theme" as *;
|
||||
@use "mixins/border-radius" as *;
|
||||
|
||||
// scss-docs-start alert-variables
|
||||
$alert-padding-y: $spacer !default;
|
||||
$alert-padding-x: $spacer !default;
|
||||
$alert-margin-bottom: 1rem !default;
|
||||
$alert-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: var(--#{$prefix}border-width) !default;
|
||||
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
||||
// scss-docs-end alert-variables
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
@@ -1,9 +1,20 @@
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "colors" as *;
|
||||
@use "mixins/border-radius" as *;
|
||||
@use "mixins/gradients" as *;
|
||||
@use "vendor/rfs" as *;
|
||||
|
||||
// scss-docs-start badge-variables
|
||||
$badge-font-size: .75em !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-color: $white !default;
|
||||
$badge-padding-y: .35em !default;
|
||||
$badge-padding-x: .65em !default;
|
||||
$badge-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
// scss-docs-end badge-variables
|
||||
|
||||
|
||||
// Base class
|
||||
//
|
||||
// Requires one of the contextual, color modifier classes for `color` and
|
||||
|
||||
@@ -3,6 +3,20 @@
|
||||
@use "mixins/border-radius" as *;
|
||||
@use "vendor/rfs" as *;
|
||||
|
||||
// scss-docs-start breadcrumb-variables
|
||||
$breadcrumb-font-size: null !default;
|
||||
$breadcrumb-padding-y: 0 !default;
|
||||
$breadcrumb-padding-x: 0 !default;
|
||||
$breadcrumb-item-padding-x: .5rem !default;
|
||||
$breadcrumb-margin-bottom: 1rem !default;
|
||||
$breadcrumb-bg: null !default;
|
||||
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
|
||||
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
|
||||
$breadcrumb-divider: quote("/") !default;
|
||||
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
||||
$breadcrumb-border-radius: null !default;
|
||||
// scss-docs-end breadcrumb-variables
|
||||
|
||||
@layer components {
|
||||
.breadcrumb {
|
||||
// scss-docs-start breadcrumb-css-vars
|
||||
|
||||
@@ -4,6 +4,28 @@
|
||||
@use "mixins/box-shadow" as *;
|
||||
@use "layout/breakpoints" as *;
|
||||
|
||||
// scss-docs-start card-variables
|
||||
$card-spacer-y: $spacer !default;
|
||||
$card-spacer-x: $spacer !default;
|
||||
$card-title-spacer-y: $spacer * .5 !default;
|
||||
$card-title-color: null !default;
|
||||
$card-subtitle-color: null !default;
|
||||
$card-border-width: var(--#{$prefix}border-width) !default;
|
||||
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
$card-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$card-box-shadow: null !default;
|
||||
$card-inner-border-radius: calc($card-border-radius - $card-border-width) !default;
|
||||
$card-cap-padding-y: $card-spacer-y * .5 !default;
|
||||
$card-cap-padding-x: $card-spacer-x !default;
|
||||
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
|
||||
$card-cap-color: null !default;
|
||||
$card-height: null !default;
|
||||
$card-color: null !default;
|
||||
$card-bg: var(--#{$prefix}body-bg) !default;
|
||||
$card-img-overlay-padding: $spacer !default;
|
||||
$card-group-margin: $grid-gutter-width * .5 !default;
|
||||
// scss-docs-end card-variables
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
@@ -1,11 +1,53 @@
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "colors" as *;
|
||||
@use "mixins/transition" as *;
|
||||
@use "mixins/clearfix" as *;
|
||||
@use "mixins/gradients" as *;
|
||||
@use "mixins/color-mode" as *;
|
||||
@use "vendor/rfs" as *;
|
||||
|
||||
// scss-docs-start carousel-variables
|
||||
$carousel-control-color: $white !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
$carousel-control-hover-opacity: .9 !default;
|
||||
$carousel-control-transition: opacity .15s ease !default;
|
||||
$carousel-control-icon-filter: null !default;
|
||||
|
||||
$carousel-indicator-width: 30px !default;
|
||||
$carousel-indicator-height: 3px !default;
|
||||
$carousel-indicator-hit-area-height: 10px !default;
|
||||
$carousel-indicator-spacer: 3px !default;
|
||||
$carousel-indicator-opacity: .5 !default;
|
||||
$carousel-indicator-active-bg: $white !default;
|
||||
$carousel-indicator-active-opacity: 1 !default;
|
||||
$carousel-indicator-transition: opacity .6s ease !default;
|
||||
|
||||
$carousel-caption-width: 70% !default;
|
||||
$carousel-caption-color: $white !default;
|
||||
$carousel-caption-padding-y: 1.25rem !default;
|
||||
$carousel-caption-spacer: 1.25rem !default;
|
||||
|
||||
$carousel-control-icon-width: 2rem !default;
|
||||
|
||||
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
|
||||
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||
|
||||
$carousel-transition-duration: .6s !default;
|
||||
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||
// scss-docs-end carousel-variables
|
||||
|
||||
// scss-docs-start carousel-dark-variables
|
||||
$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
|
||||
$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
|
||||
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
|
||||
|
||||
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
|
||||
$carousel-caption-color-dark: $carousel-dark-caption-color !default;
|
||||
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
|
||||
// scss-docs-end carousel-dark-variables
|
||||
|
||||
// Notes on the classes:
|
||||
//
|
||||
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
||||
|
||||
@@ -1,8 +1,27 @@
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "colors" as *;
|
||||
@use "mixins/border-radius" as *;
|
||||
@use "mixins/color-mode" as *;
|
||||
|
||||
// scss-docs-start close-variables
|
||||
$btn-close-width: 1em !default;
|
||||
$btn-close-height: $btn-close-width !default;
|
||||
$btn-close-padding-x: .25em !default;
|
||||
$btn-close-padding-y: $btn-close-padding-x !default;
|
||||
$btn-close-color: $black !default;
|
||||
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
|
||||
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
|
||||
$btn-close-opacity: .5 !default;
|
||||
$btn-close-hover-opacity: .75 !default;
|
||||
$btn-close-focus-opacity: 1 !default;
|
||||
$btn-close-disabled-opacity: .25 !default;
|
||||
$btn-close-filter: null !default;
|
||||
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
|
||||
$btn-close-filter-dark: $btn-close-white-filter !default;
|
||||
// scss-docs-end close-variables
|
||||
|
||||
|
||||
// Transparent background and border properties included for button version.
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use "sass:map";
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "colors" as *;
|
||||
@use "mixins/caret" as *;
|
||||
@use "mixins/border-radius" as *;
|
||||
@use "mixins/box-shadow" as *;
|
||||
@@ -9,6 +10,57 @@
|
||||
@use "vendor/rfs" as *;
|
||||
@use "layout/breakpoints" as *;
|
||||
|
||||
// scss-docs-start dropdown-variables
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-x: 0 !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-spacer: .125rem !default;
|
||||
$dropdown-font-size: $font-size-base !default;
|
||||
$dropdown-color: var(--#{$prefix}body-color) !default;
|
||||
$dropdown-bg: var(--#{$prefix}body-bg) !default;
|
||||
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$dropdown-border-width: var(--#{$prefix}border-width) !default;
|
||||
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
|
||||
$dropdown-divider-bg: $dropdown-border-color !default;
|
||||
$dropdown-divider-margin-y: $spacer * .5 !default;
|
||||
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
|
||||
|
||||
$dropdown-link-color: var(--#{$prefix}body-color) !default;
|
||||
$dropdown-link-hover-color: $dropdown-link-color !default;
|
||||
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
||||
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
|
||||
|
||||
$dropdown-item-padding-y: $spacer * .25 !default;
|
||||
$dropdown-item-padding-x: $spacer !default;
|
||||
|
||||
$dropdown-header-color: $gray-600 !default;
|
||||
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
|
||||
$dropdown-header-padding-y: $dropdown-padding-y !default;
|
||||
// fusv-disable
|
||||
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
|
||||
// fusv-enable
|
||||
// scss-docs-end dropdown-variables
|
||||
|
||||
// scss-docs-start dropdown-dark-variables
|
||||
$dropdown-dark-color: $gray-300 !default;
|
||||
$dropdown-dark-bg: $gray-800 !default;
|
||||
$dropdown-dark-border-color: $dropdown-border-color !default;
|
||||
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
|
||||
$dropdown-dark-box-shadow: null !default;
|
||||
$dropdown-dark-link-color: $dropdown-dark-color !default;
|
||||
$dropdown-dark-link-hover-color: $white !default;
|
||||
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
|
||||
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
|
||||
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
|
||||
$dropdown-dark-link-disabled-color: $gray-500 !default;
|
||||
$dropdown-dark-header-color: $gray-500 !default;
|
||||
// scss-docs-end dropdown-dark-variables
|
||||
|
||||
@layer components {
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
|
||||
@@ -6,6 +6,35 @@
|
||||
@use "vendor/rfs" as *;
|
||||
@use "layout/breakpoints" as *;
|
||||
|
||||
// scss-docs-start list-group-variables
|
||||
$list-group-color: var(--#{$prefix}body-color) !default;
|
||||
$list-group-bg: var(--#{$prefix}body-bg) !default;
|
||||
$list-group-border-color: var(--#{$prefix}border-color) !default;
|
||||
$list-group-border-width: var(--#{$prefix}border-width) !default;
|
||||
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
$list-group-item-padding-y: $spacer * .5 !default;
|
||||
$list-group-item-padding-x: $spacer !default;
|
||||
// fusv-disable
|
||||
$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
|
||||
$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
|
||||
// fusv-enable
|
||||
|
||||
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border-color: $list-group-active-bg !default;
|
||||
|
||||
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
|
||||
$list-group-disabled-bg: $list-group-bg !default;
|
||||
|
||||
$list-group-action-color: var(--#{$prefix}secondary-color) !default;
|
||||
$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
|
||||
|
||||
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
|
||||
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
// scss-docs-end list-group-variables
|
||||
|
||||
// Base class
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
@@ -6,6 +6,46 @@
|
||||
@use "mixins/gradients" as *;
|
||||
@use "vendor/rfs" as *;
|
||||
|
||||
// scss-docs-start pagination-variables
|
||||
$pagination-padding-y: .375rem !default;
|
||||
$pagination-padding-x: .75rem !default;
|
||||
$pagination-padding-y-sm: .25rem !default;
|
||||
$pagination-padding-x-sm: .5rem !default;
|
||||
$pagination-padding-y-lg: .75rem !default;
|
||||
$pagination-padding-x-lg: 1.5rem !default;
|
||||
|
||||
$pagination-font-size: $font-size-base !default;
|
||||
|
||||
$pagination-color: var(--#{$prefix}link-color) !default;
|
||||
$pagination-bg: var(--#{$prefix}body-bg) !default;
|
||||
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$pagination-border-width: var(--#{$prefix}border-width) !default;
|
||||
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;
|
||||
$pagination-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
|
||||
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
|
||||
$pagination-focus-outline: 0 !default;
|
||||
|
||||
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
|
||||
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
||||
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
|
||||
|
||||
$pagination-active-color: $component-active-color !default;
|
||||
$pagination-active-bg: $component-active-bg !default;
|
||||
$pagination-active-border-color: $component-active-bg !default;
|
||||
|
||||
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
|
||||
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
||||
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
||||
// scss-docs-end pagination-variables
|
||||
|
||||
// scss-docs-start pagination-mixin
|
||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
--#{$prefix}pagination-padding-x: #{$padding-x};
|
||||
|
||||
@@ -1,11 +1,24 @@
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "colors" as *;
|
||||
@use "mixins/transition" as *;
|
||||
@use "mixins/gradients" as *;
|
||||
@use "mixins/border-radius" as *;
|
||||
@use "mixins/box-shadow" as *;
|
||||
@use "vendor/rfs" as *;
|
||||
|
||||
// scss-docs-start progress-variables
|
||||
$progress-height: 1rem !default;
|
||||
$progress-font-size: $font-size-base * .75 !default;
|
||||
$progress-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$progress-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
$progress-bar-bg: $primary !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
$progress-bar-transition: width .6s ease !default;
|
||||
// scss-docs-end progress-variables
|
||||
|
||||
@layer components {
|
||||
// Disable animation if transitions are disabled
|
||||
// scss-docs-start progress-keyframes
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
// scss-docs-start spinner-variables
|
||||
$spinner-width: 2rem !default;
|
||||
$spinner-height: $spinner-width !default;
|
||||
$spinner-vertical-align: -.125em !default;
|
||||
$spinner-border-width: .25em !default;
|
||||
$spinner-animation-speed: .75s !default;
|
||||
|
||||
$spinner-width-sm: 1rem !default;
|
||||
$spinner-height-sm: $spinner-width-sm !default;
|
||||
$spinner-border-width-sm: .2em !default;
|
||||
// scss-docs-end spinner-variables
|
||||
|
||||
@layer components {
|
||||
//
|
||||
// Rotating border
|
||||
|
||||
@@ -3,6 +3,24 @@
|
||||
@use "mixins/border-radius" as *;
|
||||
@use "vendor/rfs" as *;
|
||||
|
||||
// scss-docs-start toast-variables
|
||||
$toast-max-width: 350px !default;
|
||||
$toast-padding-x: .75rem !default;
|
||||
$toast-padding-y: .5rem !default;
|
||||
$toast-font-size: .875rem !default;
|
||||
$toast-color: null !default;
|
||||
$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
|
||||
$toast-border-width: var(--#{$prefix}border-width) !default;
|
||||
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
$toast-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
|
||||
$toast-spacing: $container-padding-x !default;
|
||||
|
||||
$toast-header-color: var(--#{$prefix}secondary-color) !default;
|
||||
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
// scss-docs-end toast-variables
|
||||
|
||||
@layer components {
|
||||
.toast {
|
||||
// scss-docs-start toast-css-vars
|
||||
|
||||
@@ -93,12 +93,12 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://
|
||||
// Carousel
|
||||
//
|
||||
|
||||
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
|
||||
$carousel-caption-color-dark: $carousel-dark-caption-color !default;
|
||||
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
|
||||
// $carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
|
||||
// $carousel-caption-color-dark: $carousel-dark-caption-color !default;
|
||||
// $carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
|
||||
|
||||
//
|
||||
// Close button
|
||||
//
|
||||
|
||||
$btn-close-filter-dark: $btn-close-white-filter !default;
|
||||
// $btn-close-filter-dark: $btn-close-white-filter !default;
|
||||
|
||||
@@ -440,64 +440,6 @@ $mark-bg: light-dark($yellow-100, $yellow-900) !default;
|
||||
// scss-docs-end type-variables
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
// scss-docs-start table-variables
|
||||
$table-cell-padding-y: .5rem !default;
|
||||
$table-cell-padding-x: .5rem !default;
|
||||
$table-cell-padding-y-sm: .25rem !default;
|
||||
$table-cell-padding-x-sm: .25rem !default;
|
||||
|
||||
$table-cell-vertical-align: top !default;
|
||||
|
||||
$table-color: var(--#{$prefix}emphasis-color) !default;
|
||||
$table-bg: var(--#{$prefix}body-bg) !default;
|
||||
$table-accent-bg: transparent !default;
|
||||
|
||||
$table-th-font-weight: null !default;
|
||||
|
||||
$table-striped-color: $table-color !default;
|
||||
$table-striped-bg-factor: .05 !default;
|
||||
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
|
||||
|
||||
$table-active-color: $table-color !default;
|
||||
$table-active-bg-factor: .1 !default;
|
||||
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
|
||||
|
||||
$table-hover-color: $table-color !default;
|
||||
$table-hover-bg-factor: .075 !default;
|
||||
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
|
||||
|
||||
$table-border-factor: .2 !default;
|
||||
$table-border-width: var(--#{$prefix}border-width) !default;
|
||||
$table-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
$table-striped-order: odd !default;
|
||||
$table-striped-columns-order: even !default;
|
||||
|
||||
$table-group-separator-color: currentcolor !default;
|
||||
|
||||
$table-caption-color: var(--#{$prefix}secondary-color) !default;
|
||||
|
||||
$table-bg-scale: -80% !default;
|
||||
// scss-docs-end table-variables
|
||||
|
||||
// scss-docs-start table-loop
|
||||
$table-variants: (
|
||||
"primary": shift-color($primary, $table-bg-scale),
|
||||
"secondary": shift-color($secondary, $table-bg-scale),
|
||||
"success": shift-color($success, $table-bg-scale),
|
||||
"info": shift-color($info, $table-bg-scale),
|
||||
"warning": shift-color($warning, $table-bg-scale),
|
||||
"danger": shift-color($danger, $table-bg-scale),
|
||||
"light": $light,
|
||||
"dark": $dark,
|
||||
) !default;
|
||||
// scss-docs-end table-loop
|
||||
|
||||
|
||||
// Buttons + Forms
|
||||
//
|
||||
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
||||
@@ -625,10 +567,6 @@ $input-border-color: var(--#{$prefix}border-color) !default;
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
|
||||
$input-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
||||
$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
||||
|
||||
$input-focus-bg: $input-bg !default;
|
||||
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
|
||||
$input-focus-color: $input-color !default;
|
||||
@@ -738,7 +676,6 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i
|
||||
|
||||
$form-select-border-width: $input-border-width !default;
|
||||
$form-select-border-color: $input-border-color !default;
|
||||
$form-select-border-radius: $input-border-radius !default;
|
||||
$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
|
||||
$form-select-focus-border-color: $input-focus-border-color !default;
|
||||
@@ -748,12 +685,10 @@ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focu
|
||||
$form-select-padding-y-sm: $input-padding-y-sm !default;
|
||||
$form-select-padding-x-sm: $input-padding-x-sm !default;
|
||||
$form-select-font-size-sm: $input-font-size-sm !default;
|
||||
$form-select-border-radius-sm: $input-border-radius-sm !default;
|
||||
|
||||
$form-select-padding-y-lg: $input-padding-y-lg !default;
|
||||
$form-select-padding-x-lg: $input-padding-x-lg !default;
|
||||
$form-select-font-size-lg: $input-font-size-lg !default;
|
||||
$form-select-border-radius-lg: $input-border-radius-lg !default;
|
||||
|
||||
$form-select-transition: $input-transition !default;
|
||||
// scss-docs-end form-select-variables
|
||||
@@ -948,105 +883,6 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
||||
// scss-docs-end navbar-dark-variables
|
||||
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
// scss-docs-start dropdown-variables
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-x: 0 !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-spacer: .125rem !default;
|
||||
$dropdown-font-size: $font-size-base !default;
|
||||
$dropdown-color: var(--#{$prefix}body-color) !default;
|
||||
$dropdown-bg: var(--#{$prefix}body-bg) !default;
|
||||
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$dropdown-border-width: var(--#{$prefix}border-width) !default;
|
||||
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
|
||||
$dropdown-divider-bg: $dropdown-border-color !default;
|
||||
$dropdown-divider-margin-y: $spacer * .5 !default;
|
||||
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
|
||||
|
||||
$dropdown-link-color: var(--#{$prefix}body-color) !default;
|
||||
$dropdown-link-hover-color: $dropdown-link-color !default;
|
||||
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
||||
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
|
||||
|
||||
$dropdown-item-padding-y: $spacer * .25 !default;
|
||||
$dropdown-item-padding-x: $spacer !default;
|
||||
|
||||
$dropdown-header-color: $gray-600 !default;
|
||||
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
|
||||
$dropdown-header-padding-y: $dropdown-padding-y !default;
|
||||
// fusv-disable
|
||||
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
|
||||
// fusv-enable
|
||||
// scss-docs-end dropdown-variables
|
||||
|
||||
// scss-docs-start dropdown-dark-variables
|
||||
$dropdown-dark-color: $gray-300 !default;
|
||||
$dropdown-dark-bg: $gray-800 !default;
|
||||
$dropdown-dark-border-color: $dropdown-border-color !default;
|
||||
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
|
||||
$dropdown-dark-box-shadow: null !default;
|
||||
$dropdown-dark-link-color: $dropdown-dark-color !default;
|
||||
$dropdown-dark-link-hover-color: $white !default;
|
||||
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
|
||||
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
|
||||
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
|
||||
$dropdown-dark-link-disabled-color: $gray-500 !default;
|
||||
$dropdown-dark-header-color: $gray-500 !default;
|
||||
// scss-docs-end dropdown-dark-variables
|
||||
|
||||
|
||||
// Pagination
|
||||
|
||||
// scss-docs-start pagination-variables
|
||||
$pagination-padding-y: .375rem !default;
|
||||
$pagination-padding-x: .75rem !default;
|
||||
$pagination-padding-y-sm: .25rem !default;
|
||||
$pagination-padding-x-sm: .5rem !default;
|
||||
$pagination-padding-y-lg: .75rem !default;
|
||||
$pagination-padding-x-lg: 1.5rem !default;
|
||||
|
||||
$pagination-font-size: $font-size-base !default;
|
||||
|
||||
$pagination-color: var(--#{$prefix}link-color) !default;
|
||||
$pagination-bg: var(--#{$prefix}body-bg) !default;
|
||||
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$pagination-border-width: var(--#{$prefix}border-width) !default;
|
||||
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;
|
||||
$pagination-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
|
||||
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
|
||||
$pagination-focus-outline: 0 !default;
|
||||
|
||||
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
|
||||
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
||||
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
|
||||
|
||||
$pagination-active-color: $component-active-color !default;
|
||||
$pagination-active-bg: $component-active-bg !default;
|
||||
$pagination-active-border-color: $component-active-bg !default;
|
||||
|
||||
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
|
||||
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
||||
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
||||
// scss-docs-end pagination-variables
|
||||
|
||||
|
||||
// Placeholders
|
||||
|
||||
// scss-docs-start placeholders
|
||||
@@ -1054,67 +890,9 @@ $placeholder-opacity-max: .5 !default;
|
||||
$placeholder-opacity-min: .2 !default;
|
||||
// scss-docs-end placeholders
|
||||
|
||||
// Cards
|
||||
|
||||
// scss-docs-start card-variables
|
||||
$card-spacer-y: $spacer !default;
|
||||
$card-spacer-x: $spacer !default;
|
||||
$card-title-spacer-y: $spacer * .5 !default;
|
||||
$card-title-color: null !default;
|
||||
$card-subtitle-color: null !default;
|
||||
$card-border-width: var(--#{$prefix}border-width) !default;
|
||||
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
$card-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$card-box-shadow: null !default;
|
||||
$card-inner-border-radius: calc($card-border-radius - $card-border-width) !default;
|
||||
$card-cap-padding-y: $card-spacer-y * .5 !default;
|
||||
$card-cap-padding-x: $card-spacer-x !default;
|
||||
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
|
||||
$card-cap-color: null !default;
|
||||
$card-height: null !default;
|
||||
$card-color: null !default;
|
||||
$card-bg: var(--#{$prefix}body-bg) !default;
|
||||
$card-img-overlay-padding: $spacer !default;
|
||||
$card-group-margin: $grid-gutter-width * .5 !default;
|
||||
// scss-docs-end card-variables
|
||||
|
||||
// Accordion
|
||||
|
||||
// scss-docs-start accordion-variables
|
||||
$accordion-padding-y: 1rem !default;
|
||||
$accordion-padding-x: 1.25rem !default;
|
||||
$accordion-color: var(--#{$prefix}body-color) !default;
|
||||
$accordion-bg: var(--#{$prefix}body-bg) !default;
|
||||
$accordion-border-width: var(--#{$prefix}border-width) !default;
|
||||
$accordion-border-color: var(--#{$prefix}border-color) !default;
|
||||
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$accordion-inner-border-radius: calc($accordion-border-radius - $accordion-border-width) !default;
|
||||
|
||||
$accordion-body-padding-y: $accordion-padding-y !default;
|
||||
$accordion-body-padding-x: $accordion-padding-x !default;
|
||||
|
||||
$accordion-button-padding-y: $accordion-padding-y !default;
|
||||
$accordion-button-padding-x: $accordion-padding-x !default;
|
||||
$accordion-button-color: var(--#{$prefix}body-color) !default;
|
||||
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
|
||||
$accordion-transition: $btn-transition, border-radius .15s ease !default;
|
||||
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
|
||||
$accordion-button-active-color: var(--#{$prefix}primary-text) !default;
|
||||
|
||||
// fusv-disable
|
||||
$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
|
||||
// fusv-enable
|
||||
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
||||
|
||||
$accordion-icon-width: 1.25rem !default;
|
||||
$accordion-icon-color: var(--#{$prefix}body-color) !default;
|
||||
$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
|
||||
$accordion-icon-transition: transform .2s ease-in-out !default;
|
||||
$accordion-icon-transform: rotate(-180deg) !default;
|
||||
|
||||
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
// scss-docs-end accordion-variables
|
||||
|
||||
// Tooltips
|
||||
|
||||
@@ -1180,39 +958,6 @@ $popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !d
|
||||
// fusv-enable
|
||||
|
||||
|
||||
// Toasts
|
||||
|
||||
// scss-docs-start toast-variables
|
||||
$toast-max-width: 350px !default;
|
||||
$toast-padding-x: .75rem !default;
|
||||
$toast-padding-y: .5rem !default;
|
||||
$toast-font-size: .875rem !default;
|
||||
$toast-color: null !default;
|
||||
$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
|
||||
$toast-border-width: var(--#{$prefix}border-width) !default;
|
||||
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
$toast-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
|
||||
$toast-spacing: $container-padding-x !default;
|
||||
|
||||
$toast-header-color: var(--#{$prefix}secondary-color) !default;
|
||||
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
// scss-docs-end toast-variables
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
// scss-docs-start badge-variables
|
||||
$badge-font-size: .75em !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-color: $white !default;
|
||||
$badge-padding-y: .35em !default;
|
||||
$badge-padding-x: .65em !default;
|
||||
$badge-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
// scss-docs-end badge-variables
|
||||
|
||||
|
||||
// Modals
|
||||
|
||||
// scss-docs-start modal-variables
|
||||
@@ -1259,183 +1004,6 @@ $modal-scale-transform: scale(1.02) !default;
|
||||
// scss-docs-end modal-variables
|
||||
|
||||
|
||||
// Alerts
|
||||
//
|
||||
// Define alert colors, border radius, and padding.
|
||||
|
||||
// scss-docs-start alert-variables
|
||||
$alert-padding-y: $spacer !default;
|
||||
$alert-padding-x: $spacer !default;
|
||||
$alert-margin-bottom: 1rem !default;
|
||||
$alert-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: var(--#{$prefix}border-width) !default;
|
||||
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
||||
// scss-docs-end alert-variables
|
||||
|
||||
// fusv-disable
|
||||
$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
|
||||
$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
|
||||
$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
|
||||
// fusv-enable
|
||||
|
||||
// Progress bars
|
||||
|
||||
// scss-docs-start progress-variables
|
||||
$progress-height: 1rem !default;
|
||||
$progress-font-size: $font-size-base * .75 !default;
|
||||
$progress-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$progress-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
$progress-bar-bg: $primary !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
$progress-bar-transition: width .6s ease !default;
|
||||
// scss-docs-end progress-variables
|
||||
|
||||
|
||||
// List group
|
||||
|
||||
// scss-docs-start list-group-variables
|
||||
$list-group-color: var(--#{$prefix}body-color) !default;
|
||||
$list-group-bg: var(--#{$prefix}body-bg) !default;
|
||||
$list-group-border-color: var(--#{$prefix}border-color) !default;
|
||||
$list-group-border-width: var(--#{$prefix}border-width) !default;
|
||||
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
$list-group-item-padding-y: $spacer * .5 !default;
|
||||
$list-group-item-padding-x: $spacer !default;
|
||||
// fusv-disable
|
||||
$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
|
||||
$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
|
||||
// fusv-enable
|
||||
|
||||
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border-color: $list-group-active-bg !default;
|
||||
|
||||
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
|
||||
$list-group-disabled-bg: $list-group-bg !default;
|
||||
|
||||
$list-group-action-color: var(--#{$prefix}secondary-color) !default;
|
||||
$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
|
||||
|
||||
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
|
||||
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
// scss-docs-end list-group-variables
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
|
||||
// scss-docs-start thumbnail-variables
|
||||
$thumbnail-padding: .25rem !default;
|
||||
$thumbnail-bg: var(--#{$prefix}body-bg) !default;
|
||||
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
|
||||
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
|
||||
$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
|
||||
// scss-docs-end thumbnail-variables
|
||||
|
||||
|
||||
// Figures
|
||||
|
||||
// scss-docs-start figure-variables
|
||||
$figure-caption-font-size: $small-font-size !default;
|
||||
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
|
||||
// scss-docs-end figure-variables
|
||||
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
// scss-docs-start breadcrumb-variables
|
||||
$breadcrumb-font-size: null !default;
|
||||
$breadcrumb-padding-y: 0 !default;
|
||||
$breadcrumb-padding-x: 0 !default;
|
||||
$breadcrumb-item-padding-x: .5rem !default;
|
||||
$breadcrumb-margin-bottom: 1rem !default;
|
||||
$breadcrumb-bg: null !default;
|
||||
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
|
||||
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
|
||||
$breadcrumb-divider: quote("/") !default;
|
||||
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
||||
$breadcrumb-border-radius: null !default;
|
||||
// scss-docs-end breadcrumb-variables
|
||||
|
||||
// Carousel
|
||||
|
||||
// scss-docs-start carousel-variables
|
||||
$carousel-control-color: $white !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
$carousel-control-hover-opacity: .9 !default;
|
||||
$carousel-control-transition: opacity .15s ease !default;
|
||||
$carousel-control-icon-filter: null !default;
|
||||
|
||||
$carousel-indicator-width: 30px !default;
|
||||
$carousel-indicator-height: 3px !default;
|
||||
$carousel-indicator-hit-area-height: 10px !default;
|
||||
$carousel-indicator-spacer: 3px !default;
|
||||
$carousel-indicator-opacity: .5 !default;
|
||||
$carousel-indicator-active-bg: $white !default;
|
||||
$carousel-indicator-active-opacity: 1 !default;
|
||||
$carousel-indicator-transition: opacity .6s ease !default;
|
||||
|
||||
$carousel-caption-width: 70% !default;
|
||||
$carousel-caption-color: $white !default;
|
||||
$carousel-caption-padding-y: 1.25rem !default;
|
||||
$carousel-caption-spacer: 1.25rem !default;
|
||||
|
||||
$carousel-control-icon-width: 2rem !default;
|
||||
|
||||
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
|
||||
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||
|
||||
$carousel-transition-duration: .6s !default;
|
||||
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||
// scss-docs-end carousel-variables
|
||||
|
||||
// scss-docs-start carousel-dark-variables
|
||||
$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
|
||||
$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
|
||||
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
|
||||
// scss-docs-end carousel-dark-variables
|
||||
|
||||
|
||||
// Spinners
|
||||
|
||||
// scss-docs-start spinner-variables
|
||||
$spinner-width: 2rem !default;
|
||||
$spinner-height: $spinner-width !default;
|
||||
$spinner-vertical-align: -.125em !default;
|
||||
$spinner-border-width: .25em !default;
|
||||
$spinner-animation-speed: .75s !default;
|
||||
|
||||
$spinner-width-sm: 1rem !default;
|
||||
$spinner-height-sm: $spinner-width-sm !default;
|
||||
$spinner-border-width-sm: .2em !default;
|
||||
// scss-docs-end spinner-variables
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
// scss-docs-start close-variables
|
||||
$btn-close-width: 1em !default;
|
||||
$btn-close-height: $btn-close-width !default;
|
||||
$btn-close-padding-x: .25em !default;
|
||||
$btn-close-padding-y: $btn-close-padding-x !default;
|
||||
$btn-close-color: $black !default;
|
||||
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
|
||||
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
|
||||
$btn-close-opacity: .5 !default;
|
||||
$btn-close-hover-opacity: .75 !default;
|
||||
$btn-close-focus-opacity: 1 !default;
|
||||
$btn-close-disabled-opacity: .25 !default;
|
||||
$btn-close-filter: null !default;
|
||||
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
|
||||
// scss-docs-end close-variables
|
||||
|
||||
|
||||
// Offcanvas
|
||||
|
||||
// scss-docs-start offcanvas-variables
|
||||
|
||||
@@ -5,6 +5,20 @@
|
||||
@use "../mixins/border-radius" as *;
|
||||
@use "../mixins/box-shadow" as *;
|
||||
|
||||
// scss-docs-start thumbnail-variables
|
||||
$thumbnail-padding: .25rem !default;
|
||||
$thumbnail-bg: var(--#{$prefix}body-bg) !default;
|
||||
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
|
||||
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
|
||||
$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
|
||||
// scss-docs-end thumbnail-variables
|
||||
|
||||
// scss-docs-start figure-variables
|
||||
$figure-caption-font-size: $small-font-size !default;
|
||||
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
|
||||
// scss-docs-end figure-variables
|
||||
|
||||
@layer content {
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
//
|
||||
|
||||
@@ -362,20 +362,18 @@
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: $table-cell-padding-y;
|
||||
padding-bottom: $table-cell-padding-y;
|
||||
color: $table-caption-color;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// 1. Removes font-weight bold by inheriting
|
||||
// 2. Matches default `<td>` alignment by inheriting `text-align`.
|
||||
// 3. Fix alignment for Safari
|
||||
// 1. Matches default `<td>` alignment by inheriting `text-align`.
|
||||
// 2. Fix alignment for Safari
|
||||
|
||||
th {
|
||||
font-weight: $table-th-font-weight; // 1
|
||||
text-align: inherit; // 2
|
||||
text-align: -webkit-match-parent; // 3
|
||||
text-align: inherit; // 1
|
||||
text-align: -webkit-match-parent; // 2
|
||||
}
|
||||
|
||||
thead,
|
||||
|
||||
@@ -5,6 +5,55 @@
|
||||
@use "../functions" as *;
|
||||
@use "../layout/breakpoints" as *;
|
||||
|
||||
// scss-docs-start table-variables
|
||||
$table-cell-padding-y: .5rem !default;
|
||||
$table-cell-padding-x: .5rem !default;
|
||||
$table-cell-padding-y-sm: .25rem !default;
|
||||
$table-cell-padding-x-sm: .25rem !default;
|
||||
|
||||
$table-cell-vertical-align: top !default;
|
||||
|
||||
$table-color: var(--#{$prefix}emphasis-color) !default;
|
||||
$table-bg: var(--#{$prefix}body-bg) !default;
|
||||
$table-accent-bg: transparent !default;
|
||||
|
||||
$table-striped-color: $table-color !default;
|
||||
$table-striped-bg-factor: .05 !default;
|
||||
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
|
||||
|
||||
$table-active-color: $table-color !default;
|
||||
$table-active-bg-factor: .1 !default;
|
||||
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
|
||||
|
||||
$table-hover-color: $table-color !default;
|
||||
$table-hover-bg-factor: .075 !default;
|
||||
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
|
||||
|
||||
$table-border-factor: .2 !default;
|
||||
$table-border-width: var(--#{$prefix}border-width) !default;
|
||||
$table-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
$table-striped-order: odd !default;
|
||||
$table-striped-columns-order: even !default;
|
||||
|
||||
$table-group-separator-color: currentcolor !default;
|
||||
|
||||
$table-bg-scale: -80% !default;
|
||||
// scss-docs-end table-variables
|
||||
|
||||
// scss-docs-start table-loop
|
||||
$table-variants: (
|
||||
"primary": shift-color($primary, $table-bg-scale),
|
||||
"secondary": shift-color($secondary, $table-bg-scale),
|
||||
"success": shift-color($success, $table-bg-scale),
|
||||
"info": shift-color($info, $table-bg-scale),
|
||||
"warning": shift-color($warning, $table-bg-scale),
|
||||
"danger": shift-color($danger, $table-bg-scale),
|
||||
"light": $light,
|
||||
"dark": $dark,
|
||||
) !default;
|
||||
// scss-docs-end table-loop
|
||||
|
||||
@layer content {
|
||||
// scss-docs-start table-variant
|
||||
@mixin table-variant($state, $background) {
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
height: $form-floating-label-height;
|
||||
content: "";
|
||||
background-color: $input-bg;
|
||||
@include border-radius($input-border-radius);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
}
|
||||
}
|
||||
> textarea:disabled ~ label::after {
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
border: $input-border-width solid $input-border-color;
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@include border-radius($input-border-radius, 0);
|
||||
@include border-radius(var(--#{$prefix}border-radius), 0);
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
@@ -155,7 +155,7 @@
|
||||
min-height: $input-height-sm;
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
@include font-size($input-font-size-sm);
|
||||
@include border-radius($input-border-radius-sm);
|
||||
@include border-radius(var(--#{$prefix}border-radius-sm));
|
||||
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
@@ -168,7 +168,7 @@
|
||||
min-height: $input-height-lg;
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
@include font-size($input-font-size-lg);
|
||||
@include border-radius($input-border-radius-lg);
|
||||
@include border-radius(var(--#{$prefix}border-radius-lg));
|
||||
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
@@ -206,12 +206,12 @@
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: 0 !important; // stylelint-disable-line declaration-no-important
|
||||
@include border-radius($input-border-radius);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: 0 !important; // stylelint-disable-line declaration-no-important
|
||||
@include border-radius($input-border-radius);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
}
|
||||
|
||||
&.form-control-sm { height: $input-height-sm; }
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
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($form-select-border-radius, 0);
|
||||
@include border-radius(var(--#{$prefix}border-radius), 0);
|
||||
@include box-shadow($form-select-box-shadow);
|
||||
@include transition($form-select-transition);
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
padding-bottom: $form-select-padding-y-sm;
|
||||
padding-left: $form-select-padding-x-sm;
|
||||
@include font-size($form-select-font-size-sm);
|
||||
@include border-radius($form-select-border-radius-sm);
|
||||
@include border-radius(var(--#{$prefix}border-radius-sm));
|
||||
}
|
||||
|
||||
.form-select-lg {
|
||||
@@ -72,7 +72,7 @@
|
||||
padding-bottom: $form-select-padding-y-lg;
|
||||
padding-left: $form-select-padding-x-lg;
|
||||
@include font-size($form-select-font-size-lg);
|
||||
@include border-radius($form-select-border-radius-lg);
|
||||
@include border-radius(var(--#{$prefix}border-radius-lg));
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
white-space: nowrap;
|
||||
background-color: $input-group-addon-bg;
|
||||
border: $input-border-width solid $input-group-addon-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
}
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
.input-group-lg > .btn {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
@include font-size($input-font-size-lg);
|
||||
@include border-radius($input-border-radius-lg);
|
||||
@include border-radius(var(--#{$prefix}border-radius-lg));
|
||||
}
|
||||
|
||||
.input-group-sm > .form-control,
|
||||
@@ -87,7 +87,7 @@
|
||||
.input-group-sm > .btn {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
@include font-size($input-font-size-sm);
|
||||
@include border-radius($input-border-radius-sm);
|
||||
@include border-radius(var(--#{$prefix}border-radius-sm));
|
||||
}
|
||||
|
||||
.input-group-lg > .form-select,
|
||||
|
||||
@@ -156,7 +156,7 @@ As part of Bootstrap’s evolving CSS variables approach, accordions now use loc
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="accordion-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="accordion-variables" file="scss/_accordion.scss" />
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -130,7 +130,7 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="alert-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="alert-variables" file="scss/_alert.scss" />
|
||||
|
||||
### Sass loop
|
||||
|
||||
|
||||
@@ -80,4 +80,4 @@ As part of Bootstrap’s evolving CSS variables approach, badges now use local C
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="badge-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="badge-variables" file="scss/_badge.scss" />
|
||||
|
||||
@@ -94,4 +94,4 @@ As part of Bootstrap’s evolving CSS variables approach, breadcrumbs now use lo
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="breadcrumb-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="breadcrumb-variables" file="scss/_breadcrumb.scss" />
|
||||
|
||||
@@ -670,4 +670,4 @@ As part of Bootstrap’s evolving CSS variables approach, cards now use local CS
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="card-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="card-variables" file="scss/_card.scss" />
|
||||
|
||||
@@ -329,11 +329,11 @@ The transition duration of `.carousel-item` can be changed with the `$carousel-t
|
||||
|
||||
Variables for all carousels:
|
||||
|
||||
<ScssDocs name="carousel-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="carousel-variables" file="scss/_carousel.scss" />
|
||||
|
||||
Variables for the [dark carousel](#dark-variant):
|
||||
|
||||
<ScssDocs name="carousel-dark-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="carousel-dark-variables" file="scss/_carousel.scss" />
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -43,4 +43,4 @@ As part of Bootstrap’s evolving CSS variables approach, close button now uses
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="close-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="close-variables" file="scss/_close.scss" />
|
||||
|
||||
@@ -951,11 +951,11 @@ Customization through CSS variables can be seen on the `.dropdown-menu-dark` cla
|
||||
|
||||
Variables for all dropdowns:
|
||||
|
||||
<ScssDocs name="dropdown-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="dropdown-variables" file="scss/_dropdown.scss" />
|
||||
|
||||
Variables for the [dark dropdown](#dark-dropdowns):
|
||||
|
||||
<ScssDocs name="dropdown-dark-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="dropdown-dark-variables" file="scss/_dropdown.scss" />
|
||||
|
||||
Variables for the CSS-based carets that indicate a dropdown’s interactivity:
|
||||
|
||||
|
||||
@@ -265,13 +265,7 @@ As part of Bootstrap’s evolving CSS variables approach, list groups now use lo
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="list-group-variables" file="scss/_variables.scss" />
|
||||
|
||||
### Sass mixins
|
||||
|
||||
<DeprecatedIn version="5.3.0" />
|
||||
|
||||
<ScssDocs name="list-group-mixin" file="scss/mixins/_list-group.scss" />
|
||||
<ScssDocs name="list-group-variables" file="scss/_list-group.scss" />
|
||||
|
||||
### Sass loops
|
||||
|
||||
|
||||
@@ -164,8 +164,8 @@ As part of Bootstrap’s evolving CSS variables approach, pagination now uses lo
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="pagination-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="pagination-variables" file="scss/_pagination.scss" />
|
||||
|
||||
### Sass mixins
|
||||
|
||||
<ScssDocs name="pagination-mixin" file="scss/mixins/_pagination.scss" />
|
||||
<ScssDocs name="pagination-mixin" file="scss/_pagination.scss" />
|
||||
|
||||
@@ -165,7 +165,7 @@ As part of Bootstrap’s evolving CSS variables approach, progress bars now use
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="progress-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="progress-variables" file="scss/_progress.scss" />
|
||||
|
||||
### Keyframes
|
||||
|
||||
|
||||
@@ -157,7 +157,7 @@ For both spinners, small spinner modifier classes are used to update the values
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="spinner-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="spinner-variables" file="scss/_spinners.scss" />
|
||||
|
||||
### Keyframes
|
||||
|
||||
|
||||
@@ -302,7 +302,7 @@ As part of Bootstrap’s evolving CSS variables approach, toasts now use local C
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="toast-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="toast-variables" file="scss/_toasts.scss" />
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -24,4 +24,4 @@ Aligning the figure’s caption is easy with our [text utilities]([[docsref:/uti
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="figure-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="figure-variables" file="scss/content/_images.scss" />
|
||||
|
||||
@@ -46,4 +46,4 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
|
||||
|
||||
Variables are available for image thumbnails.
|
||||
|
||||
<ScssDocs name="thumbnail-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="thumbnail-variables" file="scss/content/_images.scss" />
|
||||
|
||||
@@ -808,11 +808,11 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tab
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="table-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="table-variables" file="scss/content/_tables.scss" />
|
||||
|
||||
### Sass loops
|
||||
|
||||
<ScssDocs name="table-loop" file="scss/_variables.scss" />
|
||||
<ScssDocs name="table-loop" file="scss/content/_tables.scss" />
|
||||
|
||||
### Customizing
|
||||
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
box-shadow: $box-shadow-lg;
|
||||
box-shadow: var(--#{$prefix}box-shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
@include rfs(.875rem, --bs-dropdown-font-size);
|
||||
@include font-size(.875rem);
|
||||
@include border-radius(.5rem);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
box-shadow: var(--#{$prefix}dropdown-box-shadow);
|
||||
|
||||
li + li {
|
||||
margin-top: .125rem;
|
||||
|
||||
Reference in New Issue
Block a user