//
// Base styles
//
+@layer components {
+ .accordion {
+ // scss-docs-start accordion-css-vars
+ --#{$prefix}accordion-color: #{$accordion-color};
+ --#{$prefix}accordion-bg: #{$accordion-bg};
+ --#{$prefix}accordion-transition: #{$accordion-transition};
+ --#{$prefix}accordion-border-color: #{$accordion-border-color};
+ --#{$prefix}accordion-border-width: #{$accordion-border-width};
+ --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+ --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+ --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+ --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+ --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+ --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+ --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+ --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+ --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+ --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+ --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+ --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+ --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+ --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+ --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+ --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+ // scss-docs-end accordion-css-vars
+ }
-.accordion {
- // scss-docs-start accordion-css-vars
- --#{$prefix}accordion-color: #{$accordion-color};
- --#{$prefix}accordion-bg: #{$accordion-bg};
- --#{$prefix}accordion-transition: #{$accordion-transition};
- --#{$prefix}accordion-border-color: #{$accordion-border-color};
- --#{$prefix}accordion-border-width: #{$accordion-border-width};
- --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
- --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
- --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
- --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
- --#{$prefix}accordion-btn-color: #{$accordion-button-color};
- --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
- --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
- --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
- --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
- --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
- --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
- --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
- --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
- --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
- --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
- --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
- // scss-docs-end accordion-css-vars
-}
+ .accordion-button {
+ position: relative;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+ @include font-size($font-size-base);
+ color: var(--#{$prefix}accordion-btn-color);
+ text-align: left; // Reset button style
+ background-color: var(--#{$prefix}accordion-btn-bg);
+ border: 0;
+ @include border-radius(0);
+ overflow-anchor: none;
+ @include transition(var(--#{$prefix}accordion-transition));
+
+ &:not(.collapsed) {
+ color: var(--#{$prefix}accordion-active-color);
+ background-color: var(--#{$prefix}accordion-active-bg);
+ box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
-.accordion-button {
- position: relative;
- display: flex;
- align-items: center;
- width: 100%;
- padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
- @include font-size($font-size-base);
- color: var(--#{$prefix}accordion-btn-color);
- text-align: left; // Reset button style
- background-color: var(--#{$prefix}accordion-btn-bg);
- border: 0;
- @include border-radius(0);
- overflow-anchor: none;
- @include transition(var(--#{$prefix}accordion-transition));
-
- &:not(.collapsed) {
- color: var(--#{$prefix}accordion-active-color);
- background-color: var(--#{$prefix}accordion-active-bg);
- box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+ &::after {
+ background-image: var(--#{$prefix}accordion-btn-active-icon);
+ transform: var(--#{$prefix}accordion-btn-icon-transform);
+ }
+ }
+ // Accordion icon
&::after {
- background-image: var(--#{$prefix}accordion-btn-active-icon);
- transform: var(--#{$prefix}accordion-btn-icon-transform);
+ flex-shrink: 0;
+ width: var(--#{$prefix}accordion-btn-icon-width);
+ height: var(--#{$prefix}accordion-btn-icon-width);
+ margin-left: auto;
+ content: "";
+ background-image: var(--#{$prefix}accordion-btn-icon);
+ background-repeat: no-repeat;
+ background-size: var(--#{$prefix}accordion-btn-icon-width);
+ @include transition(var(--#{$prefix}accordion-btn-icon-transition));
}
- }
- // Accordion icon
- &::after {
- flex-shrink: 0;
- width: var(--#{$prefix}accordion-btn-icon-width);
- height: var(--#{$prefix}accordion-btn-icon-width);
- margin-left: auto;
- content: "";
- background-image: var(--#{$prefix}accordion-btn-icon);
- background-repeat: no-repeat;
- background-size: var(--#{$prefix}accordion-btn-icon-width);
- @include transition(var(--#{$prefix}accordion-btn-icon-transition));
- }
+ &:hover {
+ z-index: 2;
+ }
- &:hover {
- z-index: 2;
+ &:focus {
+ z-index: 3;
+ outline: 0;
+ box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+ }
}
- &:focus {
- z-index: 3;
- outline: 0;
- box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+ .accordion-header {
+ margin-bottom: 0;
}
-}
-
-.accordion-header {
- margin-bottom: 0;
-}
-.accordion-item {
- color: var(--#{$prefix}accordion-color);
- background-color: var(--#{$prefix}accordion-bg);
- border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+ .accordion-item {
+ color: var(--#{$prefix}accordion-color);
+ background-color: var(--#{$prefix}accordion-bg);
+ border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
- &:first-of-type {
- @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+ &:first-of-type {
+ @include border-top-radius(var(--#{$prefix}accordion-border-radius));
- > .accordion-header .accordion-button {
- @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+ > .accordion-header .accordion-button {
+ @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+ }
}
- }
- &:not(:first-of-type) {
- border-top: 0;
- }
+ &:not(:first-of-type) {
+ border-top: 0;
+ }
- // Only set a border-radius on the last item if the accordion is collapsed
- &:last-of-type {
- @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+ // Only set a border-radius on the last item if the accordion is collapsed
+ &:last-of-type {
+ @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
- > .accordion-header .accordion-button {
- &.collapsed {
- @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+ > .accordion-header .accordion-button {
+ &.collapsed {
+ @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+ }
}
- }
- > .accordion-collapse {
- @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+ > .accordion-collapse {
+ @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+ }
}
}
-}
-.accordion-body {
- padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
-}
+ .accordion-body {
+ padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+ }
-// Flush accordion items
-//
-// Remove borders and border-radius to keep accordion items edge-to-edge.
+ // Flush accordion items
+ //
+ // Remove borders and border-radius to keep accordion items edge-to-edge.
-.accordion-flush {
- > .accordion-item {
- border-right: 0;
- border-left: 0;
- @include border-radius(0);
+ .accordion-flush {
+ > .accordion-item {
+ border-right: 0;
+ border-left: 0;
+ @include border-radius(0);
- &:first-child { border-top: 0; }
- &:last-child { border-bottom: 0; }
+ &:first-child { border-top: 0; }
+ &:last-child { border-bottom: 0; }
- // stylelint-disable selector-max-class
- > .accordion-collapse,
- > .accordion-header .accordion-button,
- > .accordion-header .accordion-button.collapsed {
- @include border-radius(0);
+ // stylelint-disable selector-max-class
+ > .accordion-collapse,
+ > .accordion-header .accordion-button,
+ > .accordion-header .accordion-button.collapsed {
+ @include border-radius(0);
+ }
+ // stylelint-enable selector-max-class
}
- // stylelint-enable selector-max-class
}
-}
-@if $enable-dark-mode {
- @include color-mode(dark) {
- .accordion-button::after {
- --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
- --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+ @if $enable-dark-mode {
+ @include color-mode(dark) {
+ .accordion-button::after {
+ --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+ --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+ }
}
}
}
// Base styles
//
-.alert {
- // scss-docs-start alert-css-vars
- --#{$prefix}alert-bg: transparent;
- --#{$prefix}alert-padding-x: #{$alert-padding-x};
- --#{$prefix}alert-padding-y: #{$alert-padding-y};
- --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
- --#{$prefix}alert-color: inherit;
- --#{$prefix}alert-border-color: transparent;
- --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
- --#{$prefix}alert-border-radius: #{$alert-border-radius};
- --#{$prefix}alert-link-color: inherit;
- // scss-docs-end alert-css-vars
+@layer components {
+ .alert {
+ // scss-docs-start alert-css-vars
+ --#{$prefix}alert-bg: transparent;
+ --#{$prefix}alert-padding-x: #{$alert-padding-x};
+ --#{$prefix}alert-padding-y: #{$alert-padding-y};
+ --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+ --#{$prefix}alert-color: inherit;
+ --#{$prefix}alert-border-color: transparent;
+ --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+ --#{$prefix}alert-border-radius: #{$alert-border-radius};
+ --#{$prefix}alert-link-color: inherit;
+ // scss-docs-end alert-css-vars
- position: relative;
- padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
- margin-bottom: var(--#{$prefix}alert-margin-bottom);
- color: var(--#{$prefix}alert-color);
- background-color: var(--#{$prefix}alert-bg);
- border: var(--#{$prefix}alert-border);
- @include border-radius(var(--#{$prefix}alert-border-radius));
-}
+ position: relative;
+ padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+ margin-bottom: var(--#{$prefix}alert-margin-bottom);
+ color: var(--#{$prefix}alert-color);
+ background-color: var(--#{$prefix}alert-bg);
+ border: var(--#{$prefix}alert-border);
+ @include border-radius(var(--#{$prefix}alert-border-radius));
+ }
-// Headings for larger alerts
-.alert-heading {
- // Specified to prevent conflicts of changing $headings-color
- color: inherit;
-}
+ // Headings for larger alerts
+ .alert-heading {
+ // Specified to prevent conflicts of changing $headings-color
+ color: inherit;
+ }
-// Provide class for links that match alerts
-.alert-link {
- font-weight: $alert-link-font-weight;
- color: var(--#{$prefix}alert-link-color);
-}
+ // Provide class for links that match alerts
+ .alert-link {
+ font-weight: $alert-link-font-weight;
+ color: var(--#{$prefix}alert-link-color);
+ }
-// Dismissible alerts
-//
-// Expand the right padding and account for the close button's positioning.
+ // Dismissible alerts
+ //
+ // Expand the right padding and account for the close button's positioning.
-.alert-dismissible {
- padding-right: $alert-dismissible-padding-r;
+ .alert-dismissible {
+ padding-right: $alert-dismissible-padding-r;
- // Adjust close link position
- .btn-close {
- position: absolute;
- top: 0;
- right: 0;
- z-index: $stretched-link-z-index + 1;
- padding: $alert-padding-y * 1.25 $alert-padding-x;
+ // Adjust close link position
+ .btn-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: $stretched-link-z-index + 1;
+ padding: $alert-padding-y * 1.25 $alert-padding-x;
+ }
}
-}
-// scss-docs-start alert-modifiers
-// Generate contextual modifier classes for colorizing the alert
-@each $state in map.keys($theme-colors) {
- .alert-#{$state} {
- --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
- --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
- --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
- --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
+ // scss-docs-start alert-modifiers
+ // Generate contextual modifier classes for colorizing the alert
+ @each $state in map.keys($theme-colors) {
+ .alert-#{$state} {
+ --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+ --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+ --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+ --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
+ }
}
+ // scss-docs-end alert-modifiers
}
-// scss-docs-end alert-modifiers
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
-.badge {
- // scss-docs-start badge-css-vars
- --#{$prefix}badge-padding-x: #{$badge-padding-x};
- --#{$prefix}badge-padding-y: #{$badge-padding-y};
- @include rfs($badge-font-size, --#{$prefix}badge-font-size);
- --#{$prefix}badge-font-weight: #{$badge-font-weight};
- --#{$prefix}badge-color: #{$badge-color};
- --#{$prefix}badge-border-radius: #{$badge-border-radius};
- // scss-docs-end badge-css-vars
+@layer components {
+ .badge {
+ // scss-docs-start badge-css-vars
+ --#{$prefix}badge-padding-x: #{$badge-padding-x};
+ --#{$prefix}badge-padding-y: #{$badge-padding-y};
+ @include rfs($badge-font-size, --#{$prefix}badge-font-size);
+ --#{$prefix}badge-font-weight: #{$badge-font-weight};
+ --#{$prefix}badge-color: #{$badge-color};
+ --#{$prefix}badge-border-radius: #{$badge-border-radius};
+ // scss-docs-end badge-css-vars
- display: inline-block;
- padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
- @include font-size(var(--#{$prefix}badge-font-size));
- font-weight: var(--#{$prefix}badge-font-weight);
- line-height: 1;
- color: var(--#{$prefix}badge-color);
- text-align: center;
- white-space: nowrap;
- vertical-align: baseline;
- @include border-radius(var(--#{$prefix}badge-border-radius));
- @include gradient-bg();
+ display: inline-block;
+ padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+ @include font-size(var(--#{$prefix}badge-font-size));
+ font-weight: var(--#{$prefix}badge-font-weight);
+ line-height: 1;
+ color: var(--#{$prefix}badge-color);
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: baseline;
+ @include border-radius(var(--#{$prefix}badge-border-radius));
+ @include gradient-bg();
- // Empty badges collapse automatically
- &:empty {
- display: none;
+ // Empty badges collapse automatically
+ &:empty {
+ display: none;
+ }
}
-}
-// Quick fix for badges in buttons
-.btn .badge {
- position: relative;
- top: -1px;
+ // Quick fix for badges in buttons
+ .btn .badge {
+ position: relative;
+ top: -1px;
+ }
}
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
-.breadcrumb {
- // scss-docs-start breadcrumb-css-vars
- --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
- --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
- --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
- @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
- --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
- --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
- --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
- --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
- --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
- // scss-docs-end breadcrumb-css-vars
+@layer components {
+ .breadcrumb {
+ // scss-docs-start breadcrumb-css-vars
+ --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
+ --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
+ --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
+ @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
+ --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+ --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
+ --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+ --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
+ --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
+ // scss-docs-end breadcrumb-css-vars
- display: flex;
- flex-wrap: wrap;
- padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
- margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
- @include font-size(var(--#{$prefix}breadcrumb-font-size));
- list-style: none;
- background-color: var(--#{$prefix}breadcrumb-bg);
- @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
-}
+ display: flex;
+ flex-wrap: wrap;
+ padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
+ margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
+ @include font-size(var(--#{$prefix}breadcrumb-font-size));
+ list-style: none;
+ background-color: var(--#{$prefix}breadcrumb-bg);
+ @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+ }
-.breadcrumb-item {
- // The separator between breadcrumbs (by default, a forward-slash: "/")
- + .breadcrumb-item {
- padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+ .breadcrumb-item {
+ // The separator between breadcrumbs (by default, a forward-slash: "/")
+ + .breadcrumb-item {
+ padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
- &::before {
- float: left; // Suppress inline spacings and underlining of the separator
- padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
- color: var(--#{$prefix}breadcrumb-divider-color);
- content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+ &::before {
+ float: left; // Suppress inline spacings and underlining of the separator
+ padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+ color: var(--#{$prefix}breadcrumb-divider-color);
+ content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+ }
}
- }
- &.active {
- color: var(--#{$prefix}breadcrumb-item-active-color);
+ &.active {
+ color: var(--#{$prefix}breadcrumb-item-active-color);
+ }
}
}
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
-// Make the div behave like a button
-.btn-group,
-.btn-group-vertical {
- position: relative;
- display: inline-flex;
- vertical-align: middle; // match .btn alignment given font-size hack above
-
- > .btn {
+@layer components {
+ // Make the div behave like a button
+ .btn-group,
+ .btn-group-vertical {
position: relative;
- flex: 1 1 auto;
+ display: inline-flex;
+ vertical-align: middle; // match .btn alignment given font-size hack above
+
+ > .btn {
+ position: relative;
+ flex: 1 1 auto;
+ }
+
+ // Bring the hover, focused, and "active" buttons to the front to overlay
+ // the borders properly
+ > .btn-check:checked + .btn,
+ > .btn-check:focus + .btn,
+ > .btn:hover,
+ > .btn:focus,
+ > .btn:active,
+ > .btn.active {
+ z-index: 1;
+ }
}
- // Bring the hover, focused, and "active" buttons to the front to overlay
- // the borders properly
- > .btn-check:checked + .btn,
- > .btn-check:focus + .btn,
- > .btn:hover,
- > .btn:focus,
- > .btn:active,
- > .btn.active {
- z-index: 1;
- }
-}
-
-// Optional: Group multiple button groups together for a toolbar
-.btn-toolbar {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
+ // Optional: Group multiple button groups together for a toolbar
+ .btn-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
- .input-group {
- width: auto;
+ .input-group {
+ width: auto;
+ }
}
-}
-
-.btn-group {
- @include border-radius($btn-border-radius);
- // Prevent double borders when buttons are next to each other
- > :not(.btn-check:first-child) + .btn,
- > .btn-group:not(:first-child) {
- margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+ .btn-group {
+ @include border-radius($btn-border-radius);
+
+ // Prevent double borders when buttons are next to each other
+ > :not(.btn-check:first-child) + .btn,
+ > .btn-group:not(:first-child) {
+ margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+ }
+
+ // Reset rounded corners
+ > .btn:not(:last-child):not(.dropdown-toggle),
+ > .btn.dropdown-toggle-split:first-child,
+ > .btn-group:not(:last-child) > .btn {
+ @include border-end-radius(0);
+ }
+
+ // The left radius should be 0 if the button is:
+ // - the "third or more" child
+ // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+ // - part of a btn-group which isn't the first child
+ > .btn:nth-child(n + 3),
+ > :not(.btn-check) + .btn,
+ > .btn-group:not(:first-child) > .btn {
+ @include border-start-radius(0);
+ }
}
- // Reset rounded corners
- > .btn:not(:last-child):not(.dropdown-toggle),
- > .btn.dropdown-toggle-split:first-child,
- > .btn-group:not(:last-child) > .btn {
- @include border-end-radius(0);
- }
+ // Sizing
+ //
+ // Remix the default button sizing classes into new ones for easier manipulation.
- // The left radius should be 0 if the button is:
- // - the "third or more" child
- // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
- // - part of a btn-group which isn't the first child
- > .btn:nth-child(n + 3),
- > :not(.btn-check) + .btn,
- > .btn-group:not(:first-child) > .btn {
- @include border-start-radius(0);
- }
-}
-
-// Sizing
-//
-// Remix the default button sizing classes into new ones for easier manipulation.
+ .btn-group-sm > .btn { @extend .btn-sm; }
+ .btn-group-lg > .btn { @extend .btn-lg; }
-.btn-group-sm > .btn { @extend .btn-sm; }
-.btn-group-lg > .btn { @extend .btn-lg; }
+ //
+ // Split button dropdowns
+ //
-//
-// Split button dropdowns
-//
+ .dropdown-toggle-split {
+ padding-right: $btn-padding-x * .75;
+ padding-left: $btn-padding-x * .75;
-.dropdown-toggle-split {
- padding-right: $btn-padding-x * .75;
- padding-left: $btn-padding-x * .75;
+ &::after,
+ .dropup &::after,
+ .dropend &::after {
+ margin-left: 0;
+ }
- &::after,
- .dropup &::after,
- .dropend &::after {
- margin-left: 0;
+ .dropstart &::before {
+ margin-right: 0;
+ }
}
- .dropstart &::before {
- margin-right: 0;
+ .btn-sm + .dropdown-toggle-split {
+ padding-right: $btn-padding-x-sm * .75;
+ padding-left: $btn-padding-x-sm * .75;
}
-}
-.btn-sm + .dropdown-toggle-split {
- padding-right: $btn-padding-x-sm * .75;
- padding-left: $btn-padding-x-sm * .75;
-}
-
-.btn-lg + .dropdown-toggle-split {
- padding-right: $btn-padding-x-lg * .75;
- padding-left: $btn-padding-x-lg * .75;
-}
-
-
-// The clickable button for toggling the menu
-// Set the same inset shadow as the :active state
-.btn-group.show .dropdown-toggle {
- @include box-shadow($btn-active-box-shadow);
-
- // Show no shadow for `.btn-link` since it has no other button styles.
- &.btn-link {
- @include box-shadow(none);
+ .btn-lg + .dropdown-toggle-split {
+ padding-right: $btn-padding-x-lg * .75;
+ padding-left: $btn-padding-x-lg * .75;
}
-}
-
-//
-// Vertical button groups
-//
-.btn-group-vertical {
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
+ // The clickable button for toggling the menu
+ // Set the same inset shadow as the :active state
+ .btn-group.show .dropdown-toggle {
+ @include box-shadow($btn-active-box-shadow);
- > .btn,
- > .btn-group {
- width: 100%;
+ // Show no shadow for `.btn-link` since it has no other button styles.
+ &.btn-link {
+ @include box-shadow(none);
+ }
}
- > .btn:not(:first-child),
- > .btn-group:not(:first-child) {
- margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
- }
-
- // Reset rounded corners
- > .btn:not(:last-child):not(.dropdown-toggle),
- > .btn-group:not(:last-child) > .btn {
- @include border-bottom-radius(0);
- }
- // The top radius should be 0 if the button is:
- // - the "third or more" child
- // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
- // - part of a btn-group which isn't the first child
- > .btn:nth-child(n + 3),
- > :not(.btn-check) + .btn,
- > .btn-group:not(:first-child) > .btn {
- @include border-top-radius(0);
+ //
+ // Vertical button groups
+ //
+
+ .btn-group-vertical {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+
+ > .btn,
+ > .btn-group {
+ width: 100%;
+ }
+
+ > .btn:not(:first-child),
+ > .btn-group:not(:first-child) {
+ margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+ }
+
+ // Reset rounded corners
+ > .btn:not(:last-child):not(.dropdown-toggle),
+ > .btn-group:not(:last-child) > .btn {
+ @include border-bottom-radius(0);
+ }
+
+ // The top radius should be 0 if the button is:
+ // - the "third or more" child
+ // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+ // - part of a btn-group which isn't the first child
+ > .btn:nth-child(n + 3),
+ > :not(.btn-check) + .btn,
+ > .btn-group:not(:first-child) > .btn {
+ @include border-top-radius(0);
+ }
}
}
// 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
-//
-
-.btn {
- // scss-docs-start btn-css-vars
- --#{$prefix}btn-padding-x: #{$btn-padding-x};
- --#{$prefix}btn-padding-y: #{$btn-padding-y};
- --#{$prefix}btn-font-family: #{$btn-font-family};
- @include rfs($btn-font-size, --#{$prefix}btn-font-size);
- --#{$prefix}btn-font-weight: #{$btn-font-weight};
- --#{$prefix}btn-line-height: #{$btn-line-height};
- --#{$prefix}btn-color: #{$btn-color};
- --#{$prefix}btn-bg: transparent;
- --#{$prefix}btn-border-width: #{$btn-border-width};
- --#{$prefix}btn-border-color: transparent;
- --#{$prefix}btn-border-radius: #{$btn-border-radius};
- --#{$prefix}btn-hover-border-color: transparent;
- --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
- --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
- --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
- // scss-docs-end btn-css-vars
-
- display: inline-block;
- padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
- font-family: var(--#{$prefix}btn-font-family);
- @include font-size(var(--#{$prefix}btn-font-size));
- font-weight: var(--#{$prefix}btn-font-weight);
- line-height: var(--#{$prefix}btn-line-height);
- color: var(--#{$prefix}btn-color);
- text-align: center;
- text-decoration: if($link-decoration == none, null, none);
- white-space: $btn-white-space;
- vertical-align: middle;
- cursor: if($enable-button-pointers, pointer, null);
- user-select: none;
- border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
- @include border-radius(var(--#{$prefix}btn-border-radius));
- @include gradient-bg(var(--#{$prefix}btn-bg));
- @include box-shadow(var(--#{$prefix}btn-box-shadow));
- @include transition($btn-transition);
-
- &:hover {
- color: var(--#{$prefix}btn-hover-color);
- text-decoration: if($link-hover-decoration == underline, none, null);
- background-color: var(--#{$prefix}btn-hover-bg);
- border-color: var(--#{$prefix}btn-hover-border-color);
+@layer components {
+ // 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};
}
-
- .btn-check + &:hover {
- // override for the checkbox/radio buttons
- color: var(--#{$prefix}btn-color);
- background-color: var(--#{$prefix}btn-bg);
- border-color: var(--#{$prefix}btn-border-color);
+ // 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
+ //
+
+ .btn {
+ // scss-docs-start btn-css-vars
+ --#{$prefix}btn-padding-x: #{$btn-padding-x};
+ --#{$prefix}btn-padding-y: #{$btn-padding-y};
+ --#{$prefix}btn-font-family: #{$btn-font-family};
+ @include rfs($btn-font-size, --#{$prefix}btn-font-size);
+ --#{$prefix}btn-font-weight: #{$btn-font-weight};
+ --#{$prefix}btn-line-height: #{$btn-line-height};
+ --#{$prefix}btn-color: #{$btn-color};
+ --#{$prefix}btn-bg: transparent;
+ --#{$prefix}btn-border-width: #{$btn-border-width};
+ --#{$prefix}btn-border-color: transparent;
+ --#{$prefix}btn-border-radius: #{$btn-border-radius};
+ --#{$prefix}btn-hover-border-color: transparent;
+ --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+ --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+ --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
+ // scss-docs-end btn-css-vars
+
+ display: inline-block;
+ padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+ font-family: var(--#{$prefix}btn-font-family);
+ @include font-size(var(--#{$prefix}btn-font-size));
+ font-weight: var(--#{$prefix}btn-font-weight);
+ line-height: var(--#{$prefix}btn-line-height);
+ color: var(--#{$prefix}btn-color);
+ text-align: center;
+ text-decoration: if($link-decoration == none, null, none);
+ white-space: $btn-white-space;
+ vertical-align: middle;
+ cursor: if($enable-button-pointers, pointer, null);
+ user-select: none;
+ border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+ @include border-radius(var(--#{$prefix}btn-border-radius));
+ @include gradient-bg(var(--#{$prefix}btn-bg));
+ @include box-shadow(var(--#{$prefix}btn-box-shadow));
+ @include transition($btn-transition);
+
+ &:hover {
+ color: var(--#{$prefix}btn-hover-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ background-color: var(--#{$prefix}btn-hover-bg);
+ border-color: var(--#{$prefix}btn-hover-border-color);
+ }
- &:focus-visible {
- color: var(--#{$prefix}btn-hover-color);
- @include gradient-bg(var(--#{$prefix}btn-hover-bg));
- border-color: var(--#{$prefix}btn-hover-border-color);
- outline: 0;
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows {
- box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
- } @else {
- box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+ .btn-check + &:hover {
+ // override for the checkbox/radio buttons
+ color: var(--#{$prefix}btn-color);
+ background-color: var(--#{$prefix}btn-bg);
+ border-color: var(--#{$prefix}btn-border-color);
+ }
+
+ &:focus-visible {
+ color: var(--#{$prefix}btn-hover-color);
+ @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+ border-color: var(--#{$prefix}btn-hover-border-color);
+ outline: 0;
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+ } @else {
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+ }
}
- }
- .btn-check:focus-visible + & {
- border-color: var(--#{$prefix}btn-hover-border-color);
- outline: 0;
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows {
- box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
- } @else {
- box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+ .btn-check:focus-visible + & {
+ border-color: var(--#{$prefix}btn-hover-border-color);
+ outline: 0;
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+ } @else {
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+ }
}
- }
- .btn-check:checked + &,
- :not(.btn-check) + &:active,
- &:first-child:active,
- &.active,
- &.show {
- color: var(--#{$prefix}btn-active-color);
- background-color: var(--#{$prefix}btn-active-bg);
- // Remove CSS gradients if they're enabled
- background-image: if($enable-gradients, none, null);
- border-color: var(--#{$prefix}btn-active-border-color);
- @include box-shadow(var(--#{$prefix}btn-active-shadow));
+ .btn-check:checked + &,
+ :not(.btn-check) + &:active,
+ &:first-child:active,
+ &.active,
+ &.show {
+ color: var(--#{$prefix}btn-active-color);
+ background-color: var(--#{$prefix}btn-active-bg);
+ // Remove CSS gradients if they're enabled
+ background-image: if($enable-gradients, none, null);
+ border-color: var(--#{$prefix}btn-active-border-color);
+ @include box-shadow(var(--#{$prefix}btn-active-shadow));
+
+ &:focus-visible {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+ } @else {
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+ }
+ }
+ }
- &:focus-visible {
+ .btn-check:checked:focus-visible + & {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
- }
- .btn-check:checked:focus-visible + & {
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows {
- box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
- } @else {
- box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+ &:disabled,
+ &.disabled,
+ fieldset:disabled & {
+ color: var(--#{$prefix}btn-disabled-color);
+ pointer-events: none;
+ background-color: var(--#{$prefix}btn-disabled-bg);
+ background-image: if($enable-gradients, none, null);
+ border-color: var(--#{$prefix}btn-disabled-border-color);
+ opacity: var(--#{$prefix}btn-disabled-opacity);
+ @include box-shadow(none);
}
}
- &:disabled,
- &.disabled,
- fieldset:disabled & {
- color: var(--#{$prefix}btn-disabled-color);
- pointer-events: none;
- background-color: var(--#{$prefix}btn-disabled-bg);
- background-image: if($enable-gradients, none, null);
- border-color: var(--#{$prefix}btn-disabled-border-color);
- opacity: var(--#{$prefix}btn-disabled-opacity);
- @include box-shadow(none);
- }
-}
-
-
-//
-// Alternate buttons
-//
-// scss-docs-start btn-variant-loops
-@each $color, $value in $theme-colors {
- .btn-#{$color} {
- @if $color == "light" {
- @include button-variant(
- $value,
- $value,
- $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
- $hover-border: shade-color($value, $btn-hover-border-shade-amount),
- $active-background: shade-color($value, $btn-active-bg-shade-amount),
- $active-border: shade-color($value, $btn-active-border-shade-amount)
- );
- } @else if $color == "dark" {
- @include button-variant(
- $value,
- $value,
- $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
- $hover-border: tint-color($value, $btn-hover-border-tint-amount),
- $active-background: tint-color($value, $btn-active-bg-tint-amount),
- $active-border: tint-color($value, $btn-active-border-tint-amount)
- );
- } @else {
- @include button-variant($value, $value);
+ //
+ // Alternate buttons
+ //
+
+ // scss-docs-start btn-variant-loops
+ @each $color, $value in $theme-colors {
+ .btn-#{$color} {
+ @if $color == "light" {
+ @include button-variant(
+ $value,
+ $value,
+ $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+ $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+ $active-background: shade-color($value, $btn-active-bg-shade-amount),
+ $active-border: shade-color($value, $btn-active-border-shade-amount)
+ );
+ } @else if $color == "dark" {
+ @include button-variant(
+ $value,
+ $value,
+ $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+ $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+ $active-background: tint-color($value, $btn-active-bg-tint-amount),
+ $active-border: tint-color($value, $btn-active-border-tint-amount)
+ );
+ } @else {
+ @include button-variant($value, $value);
+ }
}
}
-}
-@each $color, $value in $theme-colors {
- .btn-outline-#{$color} {
- @include button-outline-variant($value);
+ @each $color, $value in $theme-colors {
+ .btn-outline-#{$color} {
+ @include button-outline-variant($value);
+ }
}
-}
-// scss-docs-end btn-variant-loops
-
-
-//
-// Link buttons
-//
+ // scss-docs-end btn-variant-loops
+
+
+ //
+ // Link buttons
+ //
+
+ // Make a button look and behave like a link
+ .btn-link {
+ --#{$prefix}btn-font-weight: #{$font-weight-normal};
+ --#{$prefix}btn-color: #{$btn-link-color};
+ --#{$prefix}btn-bg: transparent;
+ --#{$prefix}btn-border-color: transparent;
+ --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+ --#{$prefix}btn-hover-border-color: transparent;
+ --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+ --#{$prefix}btn-active-border-color: transparent;
+ --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
+ --#{$prefix}btn-disabled-border-color: transparent;
+ --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+ --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+
+ text-decoration: $link-decoration;
+ @if $enable-gradients {
+ background-image: none;
+ }
-// Make a button look and behave like a link
-.btn-link {
- --#{$prefix}btn-font-weight: #{$font-weight-normal};
- --#{$prefix}btn-color: #{$btn-link-color};
- --#{$prefix}btn-bg: transparent;
- --#{$prefix}btn-border-color: transparent;
- --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
- --#{$prefix}btn-hover-border-color: transparent;
- --#{$prefix}btn-active-color: #{$btn-link-hover-color};
- --#{$prefix}btn-active-border-color: transparent;
- --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
- --#{$prefix}btn-disabled-border-color: transparent;
- --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
- --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
-
- text-decoration: $link-decoration;
- @if $enable-gradients {
- background-image: none;
- }
+ &:hover,
+ &:focus-visible {
+ text-decoration: $link-hover-decoration;
+ }
- &:hover,
- &:focus-visible {
- text-decoration: $link-hover-decoration;
- }
+ &:focus-visible {
+ color: var(--#{$prefix}btn-color);
+ }
- &:focus-visible {
- color: var(--#{$prefix}btn-color);
- }
+ &:hover {
+ color: var(--#{$prefix}btn-hover-color);
+ }
- &:hover {
- color: var(--#{$prefix}btn-hover-color);
+ // No need for an active state here
}
- // No need for an active state here
-}
-
-//
-// Button Sizes
-//
+ //
+ // Button Sizes
+ //
-.btn-lg {
- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
-}
+ .btn-lg {
+ @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
+ }
-.btn-sm {
- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+ .btn-sm {
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+ }
}
// Base styles
//
-.card {
- // scss-docs-start card-css-vars
- --#{$prefix}card-spacer-y: #{$card-spacer-y};
- --#{$prefix}card-spacer-x: #{$card-spacer-x};
- --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
- --#{$prefix}card-title-color: #{$card-title-color};
- --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
- --#{$prefix}card-border-width: #{$card-border-width};
- --#{$prefix}card-border-color: #{$card-border-color};
- --#{$prefix}card-border-radius: #{$card-border-radius};
- --#{$prefix}card-box-shadow: #{$card-box-shadow};
- --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
- --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
- --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
- --#{$prefix}card-cap-bg: #{$card-cap-bg};
- --#{$prefix}card-cap-color: #{$card-cap-color};
- --#{$prefix}card-height: #{$card-height};
- --#{$prefix}card-color: #{$card-color};
- --#{$prefix}card-bg: #{$card-bg};
- --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
- --#{$prefix}card-group-margin: #{$card-group-margin};
- // scss-docs-end card-css-vars
-
- position: relative;
- display: flex;
- flex-direction: column;
- min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
- height: var(--#{$prefix}card-height);
- color: var(--#{$prefix}body-color);
- word-wrap: break-word;
- background-color: var(--#{$prefix}card-bg);
- background-clip: border-box;
- border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
- @include border-radius(var(--#{$prefix}card-border-radius));
- @include box-shadow(var(--#{$prefix}card-box-shadow));
-
- > hr {
- margin-right: 0;
- margin-left: 0;
- }
+@layer components {
+ .card {
+ // scss-docs-start card-css-vars
+ --#{$prefix}card-spacer-y: #{$card-spacer-y};
+ --#{$prefix}card-spacer-x: #{$card-spacer-x};
+ --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+ --#{$prefix}card-title-color: #{$card-title-color};
+ --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
+ --#{$prefix}card-border-width: #{$card-border-width};
+ --#{$prefix}card-border-color: #{$card-border-color};
+ --#{$prefix}card-border-radius: #{$card-border-radius};
+ --#{$prefix}card-box-shadow: #{$card-box-shadow};
+ --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
+ --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
+ --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
+ --#{$prefix}card-cap-bg: #{$card-cap-bg};
+ --#{$prefix}card-cap-color: #{$card-cap-color};
+ --#{$prefix}card-height: #{$card-height};
+ --#{$prefix}card-color: #{$card-color};
+ --#{$prefix}card-bg: #{$card-bg};
+ --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
+ --#{$prefix}card-group-margin: #{$card-group-margin};
+ // scss-docs-end card-css-vars
+
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+ height: var(--#{$prefix}card-height);
+ color: var(--#{$prefix}body-color);
+ word-wrap: break-word;
+ background-color: var(--#{$prefix}card-bg);
+ background-clip: border-box;
+ border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+ @include border-radius(var(--#{$prefix}card-border-radius));
+ @include box-shadow(var(--#{$prefix}card-box-shadow));
+
+ > hr {
+ margin-right: 0;
+ margin-left: 0;
+ }
- > .list-group {
- border-top: inherit;
- border-bottom: inherit;
+ > .list-group {
+ border-top: inherit;
+ border-bottom: inherit;
- &:first-child {
- border-top-width: 0;
- @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+ &:first-child {
+ border-top-width: 0;
+ @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+ }
+
+ &:last-child {
+ border-bottom-width: 0;
+ @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+ }
}
- &:last-child {
- border-bottom-width: 0;
- @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+ // Due to specificity of the above selector (`.card > .list-group`), we must
+ // use a child selector here to prevent double borders.
+ > .card-header + .list-group,
+ > .list-group + .card-footer {
+ border-top: 0;
}
}
- // Due to specificity of the above selector (`.card > .list-group`), we must
- // use a child selector here to prevent double borders.
- > .card-header + .list-group,
- > .list-group + .card-footer {
- border-top: 0;
+ .card-body {
+ // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+ // as much space as possible, ensuring footers are aligned to the bottom.
+ flex: 1 1 auto;
+ padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+ color: var(--#{$prefix}card-color);
}
-}
-
-.card-body {
- // Enable `flex-grow: 1` for decks and groups so that card blocks take up
- // as much space as possible, ensuring footers are aligned to the bottom.
- flex: 1 1 auto;
- padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
- color: var(--#{$prefix}card-color);
-}
-.card-title {
- margin-bottom: var(--#{$prefix}card-title-spacer-y);
- color: var(--#{$prefix}card-title-color);
-}
-
-.card-subtitle {
- margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
- margin-bottom: 0;
- color: var(--#{$prefix}card-subtitle-color);
-}
+ .card-title {
+ margin-bottom: var(--#{$prefix}card-title-spacer-y);
+ color: var(--#{$prefix}card-title-color);
+ }
-.card-text:last-child {
- margin-bottom: 0;
-}
+ .card-subtitle {
+ margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
+ margin-bottom: 0;
+ color: var(--#{$prefix}card-subtitle-color);
+ }
-.card-link {
- &:hover {
- text-decoration: if($link-hover-decoration == underline, none, null);
+ .card-text:last-child {
+ margin-bottom: 0;
}
- + .card-link {
- margin-left: var(--#{$prefix}card-spacer-x);
+ .card-link {
+ &:hover {
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ }
+
+ + .card-link {
+ margin-left: var(--#{$prefix}card-spacer-x);
+ }
}
-}
-//
-// Optional textual caps
-//
+ //
+ // Optional textual caps
+ //
-.card-header {
- padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
- margin-bottom: 0; // Removes the default margin-bottom of <hN>
- color: var(--#{$prefix}card-cap-color);
- background-color: var(--#{$prefix}card-cap-bg);
- border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+ .card-header {
+ padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+ margin-bottom: 0; // Removes the default margin-bottom of <hN>
+ color: var(--#{$prefix}card-cap-color);
+ background-color: var(--#{$prefix}card-cap-bg);
+ border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
- &:first-child {
- @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
+ &:first-child {
+ @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
+ }
}
-}
-.card-footer {
- padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
- color: var(--#{$prefix}card-cap-color);
- background-color: var(--#{$prefix}card-cap-bg);
- border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+ .card-footer {
+ padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+ color: var(--#{$prefix}card-cap-color);
+ background-color: var(--#{$prefix}card-cap-bg);
+ border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
- &:last-child {
- @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
+ &:last-child {
+ @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
+ }
}
-}
-//
-// Header navs
-//
+ //
+ // Header navs
+ //
-.card-header-tabs {
- margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
- margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
- margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
- border-bottom: 0;
+ .card-header-tabs {
+ margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+ margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
+ margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+ border-bottom: 0;
- .nav-link.active {
- background-color: var(--#{$prefix}card-bg);
- border-bottom-color: var(--#{$prefix}card-bg);
+ .nav-link.active {
+ background-color: var(--#{$prefix}card-bg);
+ border-bottom-color: var(--#{$prefix}card-bg);
+ }
}
-}
-
-.card-header-pills {
- margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
- margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-}
-// Card image
-.card-img-overlay {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- padding: var(--#{$prefix}card-img-overlay-padding);
- @include border-radius(var(--#{$prefix}card-inner-border-radius));
-}
+ .card-header-pills {
+ margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+ margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+ }
-.card-img,
-.card-img-top,
-.card-img-bottom {
- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-}
+ // Card image
+ .card-img-overlay {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ padding: var(--#{$prefix}card-img-overlay-padding);
+ @include border-radius(var(--#{$prefix}card-inner-border-radius));
+ }
-.card-img,
-.card-img-top {
- @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
-}
+ .card-img,
+ .card-img-top,
+ .card-img-bottom {
+ width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+ }
-.card-img,
-.card-img-bottom {
- @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
-}
+ .card-img,
+ .card-img-top {
+ @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+ }
+ .card-img,
+ .card-img-bottom {
+ @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+ }
-//
-// Card groups
-//
-.card-group {
- // The child selector allows nested `.card` within `.card-group`
- // to display properly.
- > .card {
- margin-bottom: var(--#{$prefix}card-group-margin);
- }
+ //
+ // Card groups
+ //
- @include media-breakpoint-up(sm) {
- display: flex;
- flex-flow: row wrap;
+ .card-group {
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
- flex: 1 0 0;
- margin-bottom: 0;
-
- + .card {
- margin-left: 0;
- border-left: 0;
- }
-
- // Handle rounded corners
- @if $enable-rounded {
- &:not(:last-child) {
- @include border-end-radius(0);
+ margin-bottom: var(--#{$prefix}card-group-margin);
+ }
- > .card-img-top,
- > .card-header {
- // stylelint-disable-next-line property-disallowed-list
- border-top-right-radius: 0;
- }
- > .card-img-bottom,
- > .card-footer {
- // stylelint-disable-next-line property-disallowed-list
- border-bottom-right-radius: 0;
- }
+ @include media-breakpoint-up(sm) {
+ display: flex;
+ flex-flow: row wrap;
+ // The child selector allows nested `.card` within `.card-group`
+ // to display properly.
+ > .card {
+ flex: 1 0 0;
+ margin-bottom: 0;
+
+ + .card {
+ margin-left: 0;
+ border-left: 0;
}
- &:not(:first-child) {
- @include border-start-radius(0);
-
- > .card-img-top,
- > .card-header {
- // stylelint-disable-next-line property-disallowed-list
- border-top-left-radius: 0;
+ // Handle rounded corners
+ @if $enable-rounded {
+ &:not(:last-child) {
+ @include border-end-radius(0);
+
+ > .card-img-top,
+ > .card-header {
+ // stylelint-disable-next-line property-disallowed-list
+ border-top-right-radius: 0;
+ }
+ > .card-img-bottom,
+ > .card-footer {
+ // stylelint-disable-next-line property-disallowed-list
+ border-bottom-right-radius: 0;
+ }
}
- > .card-img-bottom,
- > .card-footer {
- // stylelint-disable-next-line property-disallowed-list
- border-bottom-left-radius: 0;
+
+ &:not(:first-child) {
+ @include border-start-radius(0);
+
+ > .card-img-top,
+ > .card-header {
+ // stylelint-disable-next-line property-disallowed-list
+ border-top-left-radius: 0;
+ }
+ > .card-img-bottom,
+ > .card-footer {
+ // stylelint-disable-next-line property-disallowed-list
+ border-bottom-left-radius: 0;
+ }
}
}
}
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
// is the upcoming slide in transition.
-.carousel {
- position: relative;
-}
-
-.carousel.pointer-event {
- touch-action: pan-y;
-}
-
-.carousel-inner {
- position: relative;
- width: 100%;
- overflow: hidden;
- @include clearfix();
-}
-
-.carousel-item {
- position: relative;
- display: none;
- float: left;
- width: 100%;
- margin-right: -100%;
- backface-visibility: hidden;
- @include transition($carousel-transition);
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
- display: block;
-}
-
-.carousel-item-next:not(.carousel-item-start),
-.active.carousel-item-end {
- transform: translateX(100%);
-}
-
-.carousel-item-prev:not(.carousel-item-end),
-.active.carousel-item-start {
- transform: translateX(-100%);
-}
+@layer components {
+ .carousel {
+ position: relative;
+ }
+ .carousel.pointer-event {
+ touch-action: pan-y;
+ }
-//
-// Alternate transitions
-//
+ .carousel-inner {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+ @include clearfix();
+ }
-.carousel-fade {
.carousel-item {
- opacity: 0;
- transition-property: opacity;
- transform: none;
+ position: relative;
+ display: none;
+ float: left;
+ width: 100%;
+ margin-right: -100%;
+ backface-visibility: hidden;
+ @include transition($carousel-transition);
}
.carousel-item.active,
- .carousel-item-next.carousel-item-start,
- .carousel-item-prev.carousel-item-end {
- z-index: 1;
- opacity: 1;
+ .carousel-item-next,
+ .carousel-item-prev {
+ display: block;
}
- .active.carousel-item-start,
+ .carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
- z-index: 0;
- opacity: 0;
- @include transition(opacity 0s $carousel-transition-duration);
+ transform: translateX(100%);
}
-}
+ .carousel-item-prev:not(.carousel-item-end),
+ .active.carousel-item-start {
+ transform: translateX(-100%);
+ }
-//
-// Left/right controls for nav
-//
-.carousel-control-prev,
-.carousel-control-next {
- position: absolute;
- top: 0;
- bottom: 0;
- z-index: 1;
- // Use flex for alignment (1-3)
- display: flex; // 1. allow flex styles
- align-items: center; // 2. vertically center contents
- justify-content: center; // 3. horizontally center contents
- width: $carousel-control-width;
- padding: 0;
- color: $carousel-control-color;
- text-align: center;
- background: none;
- filter: var(--#{$prefix}carousel-control-icon-filter);
- border: 0;
- opacity: $carousel-control-opacity;
- @include transition($carousel-control-transition);
-
- // Hover/focus state
- &:hover,
- &:focus {
- color: $carousel-control-color;
- text-decoration: none;
- outline: 0;
- opacity: $carousel-control-hover-opacity;
+ //
+ // Alternate transitions
+ //
+
+ .carousel-fade {
+ .carousel-item {
+ opacity: 0;
+ transition-property: opacity;
+ transform: none;
+ }
+
+ .carousel-item.active,
+ .carousel-item-next.carousel-item-start,
+ .carousel-item-prev.carousel-item-end {
+ z-index: 1;
+ opacity: 1;
+ }
+
+ .active.carousel-item-start,
+ .active.carousel-item-end {
+ z-index: 0;
+ opacity: 0;
+ @include transition(opacity 0s $carousel-transition-duration);
+ }
}
-}
-.carousel-control-prev {
- left: 0;
- background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
-}
-.carousel-control-next {
- right: 0;
- background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
-}
-// Icons for within
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
- display: inline-block;
- width: $carousel-control-icon-width;
- height: $carousel-control-icon-width;
- background-repeat: no-repeat;
- background-position: 50%;
- background-size: 100% 100%;
-}
-.carousel-control-prev-icon {
- background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
-}
-.carousel-control-next-icon {
- background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
-}
+ //
+ // Left/right controls for nav
+ //
-// Optional indicator pips/controls
-//
-// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
-// like a button) with data-bs-target for each slide your carousel holds.
-
-.carousel-indicators {
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 2;
- display: flex;
- justify-content: center;
- padding: 0;
- // Use the .carousel-control's width as margin so we don't overlay those
- margin-right: $carousel-control-width;
- margin-bottom: 1rem;
- margin-left: $carousel-control-width;
-
- [data-bs-target] {
- box-sizing: content-box;
- flex: 0 1 auto;
- width: $carousel-indicator-width;
- height: $carousel-indicator-height;
+ .carousel-control-prev,
+ .carousel-control-next {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ z-index: 1;
+ // Use flex for alignment (1-3)
+ display: flex; // 1. allow flex styles
+ align-items: center; // 2. vertically center contents
+ justify-content: center; // 3. horizontally center contents
+ width: $carousel-control-width;
padding: 0;
- margin-right: $carousel-indicator-spacer;
- margin-left: $carousel-indicator-spacer;
- text-indent: -999px;
- cursor: pointer;
- background-color: var(--#{$prefix}carousel-indicator-active-bg);
- background-clip: padding-box;
+ color: $carousel-control-color;
+ text-align: center;
+ background: none;
+ filter: var(--#{$prefix}carousel-control-icon-filter);
border: 0;
- // Use transparent borders to increase the hit area by 10px on top and bottom.
- border-top: $carousel-indicator-hit-area-height solid transparent;
- border-bottom: $carousel-indicator-hit-area-height solid transparent;
- opacity: $carousel-indicator-opacity;
- @include transition($carousel-indicator-transition);
+ opacity: $carousel-control-opacity;
+ @include transition($carousel-control-transition);
+
+ // Hover/focus state
+ &:hover,
+ &:focus {
+ color: $carousel-control-color;
+ text-decoration: none;
+ outline: 0;
+ opacity: $carousel-control-hover-opacity;
+ }
+ }
+ .carousel-control-prev {
+ left: 0;
+ background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
+ }
+ .carousel-control-next {
+ right: 0;
+ background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
}
- .active {
- opacity: $carousel-indicator-active-opacity;
+ // Icons for within
+ .carousel-control-prev-icon,
+ .carousel-control-next-icon {
+ display: inline-block;
+ width: $carousel-control-icon-width;
+ height: $carousel-control-icon-width;
+ background-repeat: no-repeat;
+ background-position: 50%;
+ background-size: 100% 100%;
}
-}
+ .carousel-control-prev-icon {
+ background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
+ }
+ .carousel-control-next-icon {
+ background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
+ }
-// Optional captions
-//
-//
+ // Optional indicator pips/controls
+ //
+ // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
+ // like a button) with data-bs-target for each slide your carousel holds.
+
+ .carousel-indicators {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 2;
+ display: flex;
+ justify-content: center;
+ padding: 0;
+ // Use the .carousel-control's width as margin so we don't overlay those
+ margin-right: $carousel-control-width;
+ margin-bottom: 1rem;
+ margin-left: $carousel-control-width;
+
+ [data-bs-target] {
+ box-sizing: content-box;
+ flex: 0 1 auto;
+ width: $carousel-indicator-width;
+ height: $carousel-indicator-height;
+ padding: 0;
+ margin-right: $carousel-indicator-spacer;
+ margin-left: $carousel-indicator-spacer;
+ text-indent: -999px;
+ cursor: pointer;
+ background-color: var(--#{$prefix}carousel-indicator-active-bg);
+ background-clip: padding-box;
+ border: 0;
+ // Use transparent borders to increase the hit area by 10px on top and bottom.
+ border-top: $carousel-indicator-hit-area-height solid transparent;
+ border-bottom: $carousel-indicator-hit-area-height solid transparent;
+ opacity: $carousel-indicator-opacity;
+ @include transition($carousel-indicator-transition);
+ }
+
+ .active {
+ opacity: $carousel-indicator-active-opacity;
+ }
+ }
-.carousel-caption {
- position: absolute;
- right: (100% - $carousel-caption-width) * .5;
- bottom: $carousel-caption-spacer;
- left: (100% - $carousel-caption-width) * .5;
- padding-top: $carousel-caption-padding-y;
- padding-bottom: $carousel-caption-padding-y;
- color: var(--#{$prefix}carousel-caption-color);
- text-align: center;
-}
-// Dark mode carousel
+ // Optional captions
+ //
+ //
-@mixin carousel-dark() {
- --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
- --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
- --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
-}
+ .carousel-caption {
+ position: absolute;
+ right: (100% - $carousel-caption-width) * .5;
+ bottom: $carousel-caption-spacer;
+ left: (100% - $carousel-caption-width) * .5;
+ padding-top: $carousel-caption-padding-y;
+ padding-bottom: $carousel-caption-padding-y;
+ color: var(--#{$prefix}carousel-caption-color);
+ text-align: center;
+ }
-.carousel-dark {
- @include carousel-dark();
-}
+ // Dark mode carousel
-:root,
-[data-bs-theme="light"] {
- --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
- --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
- --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
-}
+ @mixin carousel-dark() {
+ --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
+ --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
+ --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
+ }
-@if $enable-dark-mode {
- @include color-mode(dark, true) {
+ .carousel-dark {
@include carousel-dark();
}
+
+ :root,
+ [data-bs-theme="light"] {
+ --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
+ --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
+ --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
+ }
+
+ @if $enable-dark-mode {
+ @include color-mode(dark, true) {
+ @include carousel-dark();
+ }
+ }
}
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-.btn-close {
- // scss-docs-start close-css-vars
- --#{$prefix}btn-close-color: #{$btn-close-color};
- --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
- --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
- --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
- --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
- --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
- --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
- // scss-docs-end close-css-vars
+@layer components {
+ .btn-close {
+ // scss-docs-start close-css-vars
+ --#{$prefix}btn-close-color: #{$btn-close-color};
+ --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+ --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+ --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+ --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+ --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+ --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+ // scss-docs-end close-css-vars
- box-sizing: content-box;
- width: $btn-close-width;
- height: $btn-close-height;
- padding: $btn-close-padding-y $btn-close-padding-x;
- color: var(--#{$prefix}btn-close-color);
- background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
- filter: var(--#{$prefix}btn-close-filter);
- border: 0; // for button elements
- @include border-radius();
- opacity: var(--#{$prefix}btn-close-opacity);
-
- // Override <a>'s hover style
- &:hover {
+ box-sizing: content-box;
+ width: $btn-close-width;
+ height: $btn-close-height;
+ padding: $btn-close-padding-y $btn-close-padding-x;
color: var(--#{$prefix}btn-close-color);
- text-decoration: none;
- opacity: var(--#{$prefix}btn-close-hover-opacity);
- }
+ background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+ filter: var(--#{$prefix}btn-close-filter);
+ border: 0; // for button elements
+ @include border-radius();
+ opacity: var(--#{$prefix}btn-close-opacity);
- &:focus {
- outline: 0;
- box-shadow: var(--#{$prefix}btn-close-focus-shadow);
- opacity: var(--#{$prefix}btn-close-focus-opacity);
- }
+ // Override <a>'s hover style
+ &:hover {
+ color: var(--#{$prefix}btn-close-color);
+ text-decoration: none;
+ opacity: var(--#{$prefix}btn-close-hover-opacity);
+ }
+
+ &:focus {
+ outline: 0;
+ box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+ opacity: var(--#{$prefix}btn-close-focus-opacity);
+ }
- &:disabled,
- &.disabled {
- pointer-events: none;
- user-select: none;
- opacity: var(--#{$prefix}btn-close-disabled-opacity);
+ &:disabled,
+ &.disabled {
+ pointer-events: none;
+ user-select: none;
+ opacity: var(--#{$prefix}btn-close-disabled-opacity);
+ }
}
-}
-@mixin btn-close-white() {
- --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
-}
+ @mixin btn-close-white() {
+ --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
+ }
-.btn-close-white {
- @include btn-close-white();
-}
+ .btn-close-white {
+ @include btn-close-white();
+ }
-:root,
-[data-bs-theme="light"] {
- --#{$prefix}btn-close-filter: #{$btn-close-filter};
-}
+ :root,
+ [data-bs-theme="light"] {
+ --#{$prefix}btn-close-filter: #{$btn-close-filter};
+ }
-@if $enable-dark-mode {
- @include color-mode(dark, true) {
- @include btn-close-white();
+ @if $enable-dark-mode {
+ @include color-mode(dark, true) {
+ @include btn-close-white();
+ }
}
}
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
-// The dropdown wrapper (`<div>`)
-.dropup,
-.dropend,
-.dropdown,
-.dropstart,
-.dropup-center,
-.dropdown-center {
- position: relative;
-}
-
-.dropdown-toggle {
- white-space: nowrap;
+@layer components {
+ // The dropdown wrapper (`<div>`)
+ .dropup,
+ .dropend,
+ .dropdown,
+ .dropstart,
+ .dropup-center,
+ .dropdown-center {
+ position: relative;
+ }
- // Generate the caret automatically
- @include caret();
-}
+ .dropdown-toggle {
+ white-space: nowrap;
-// The dropdown menu
-.dropdown-menu {
- // scss-docs-start dropdown-css-vars
- --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
- --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
- --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
- --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
- --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
- @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
- --#{$prefix}dropdown-color: #{$dropdown-color};
- --#{$prefix}dropdown-bg: #{$dropdown-bg};
- --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
- --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
- --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
- --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
- --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
- --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
- --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
- --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
- --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
- --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
- --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
- --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
- --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
- --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
- --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
- --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
- --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
- --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
- // scss-docs-end dropdown-css-vars
+ // Generate the caret automatically
+ @include caret();
+ }
- position: absolute;
- z-index: var(--#{$prefix}dropdown-zindex);
- display: none; // none by default, but block on "open" of the menu
- min-width: var(--#{$prefix}dropdown-min-width);
- padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
- margin: 0; // Override default margin of ul
- @include font-size(var(--#{$prefix}dropdown-font-size));
- color: var(--#{$prefix}dropdown-color);
- text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
- list-style: none;
- background-color: var(--#{$prefix}dropdown-bg);
- background-clip: padding-box;
- border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
- @include border-radius(var(--#{$prefix}dropdown-border-radius));
- @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
+ // The dropdown menu
+ .dropdown-menu {
+ // scss-docs-start dropdown-css-vars
+ --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
+ --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
+ --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
+ --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
+ --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
+ @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+ --#{$prefix}dropdown-color: #{$dropdown-color};
+ --#{$prefix}dropdown-bg: #{$dropdown-bg};
+ --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
+ --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
+ --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
+ --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
+ --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
+ --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
+ --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+ --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
+ --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+ --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+ --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+ --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
+ --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+ --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+ --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+ --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
+ --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
+ --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
+ // scss-docs-end dropdown-css-vars
- &[data-bs-popper] {
- top: 100%;
- left: 0;
- margin-top: var(--#{$prefix}dropdown-spacer);
- }
+ position: absolute;
+ z-index: var(--#{$prefix}dropdown-zindex);
+ display: none; // none by default, but block on "open" of the menu
+ min-width: var(--#{$prefix}dropdown-min-width);
+ padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
+ margin: 0; // Override default margin of ul
+ @include font-size(var(--#{$prefix}dropdown-font-size));
+ color: var(--#{$prefix}dropdown-color);
+ text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+ list-style: none;
+ background-color: var(--#{$prefix}dropdown-bg);
+ background-clip: padding-box;
+ border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
+ @include border-radius(var(--#{$prefix}dropdown-border-radius));
+ @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
- @if $dropdown-padding-y == 0 {
- > .dropdown-item:first-child,
- > li:first-child .dropdown-item {
- @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
- }
- > .dropdown-item:last-child,
- > li:last-child .dropdown-item {
- @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
+ &[data-bs-popper] {
+ top: 100%;
+ left: 0;
+ margin-top: var(--#{$prefix}dropdown-spacer);
}
+ @if $dropdown-padding-y == 0 {
+ > .dropdown-item:first-child,
+ > li:first-child .dropdown-item {
+ @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
+ }
+ > .dropdown-item:last-child,
+ > li:last-child .dropdown-item {
+ @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
+ }
+
+ }
}
-}
-// scss-docs-start responsive-breakpoints
-// We deliberately hardcode the `bs-` prefix because we check
-// this custom property in JS to determine Popper's positioning
+ // scss-docs-start responsive-breakpoints
+ // We deliberately hardcode the `bs-` prefix because we check
+ // this custom property in JS to determine Popper's positioning
-@each $breakpoint in map.keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- .dropdown-menu#{$infix}-start {
- --bs-position: start;
+ .dropdown-menu#{$infix}-start {
+ --bs-position: start;
- &[data-bs-popper] {
- right: auto;
- left: 0;
+ &[data-bs-popper] {
+ right: auto;
+ left: 0;
+ }
}
- }
- .dropdown-menu#{$infix}-end {
- --bs-position: end;
+ .dropdown-menu#{$infix}-end {
+ --bs-position: end;
- &[data-bs-popper] {
- right: 0;
- left: auto;
+ &[data-bs-popper] {
+ right: 0;
+ left: auto;
+ }
}
}
}
-}
-// scss-docs-end responsive-breakpoints
+ // scss-docs-end responsive-breakpoints
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-// Just add .dropup after the standard .dropdown class and you're set.
-.dropup {
- .dropdown-menu[data-bs-popper] {
- top: auto;
- bottom: 100%;
- margin-top: 0;
- margin-bottom: var(--#{$prefix}dropdown-spacer);
- }
+ // Allow for dropdowns to go bottom up (aka, dropup-menu)
+ // Just add .dropup after the standard .dropdown class and you're set.
+ .dropup {
+ .dropdown-menu[data-bs-popper] {
+ top: auto;
+ bottom: 100%;
+ margin-top: 0;
+ margin-bottom: var(--#{$prefix}dropdown-spacer);
+ }
- .dropdown-toggle {
- @include caret(up);
+ .dropdown-toggle {
+ @include caret(up);
+ }
}
-}
-.dropend {
- .dropdown-menu[data-bs-popper] {
- top: 0;
- right: auto;
- left: 100%;
- margin-top: 0;
- margin-left: var(--#{$prefix}dropdown-spacer);
- }
+ .dropend {
+ .dropdown-menu[data-bs-popper] {
+ top: 0;
+ right: auto;
+ left: 100%;
+ margin-top: 0;
+ margin-left: var(--#{$prefix}dropdown-spacer);
+ }
- .dropdown-toggle {
- @include caret(end);
- &::after {
- vertical-align: 0;
+ .dropdown-toggle {
+ @include caret(end);
+ &::after {
+ vertical-align: 0;
+ }
}
}
-}
-.dropstart {
- .dropdown-menu[data-bs-popper] {
- top: 0;
- right: 100%;
- left: auto;
- margin-top: 0;
- margin-right: var(--#{$prefix}dropdown-spacer);
- }
+ .dropstart {
+ .dropdown-menu[data-bs-popper] {
+ top: 0;
+ right: 100%;
+ left: auto;
+ margin-top: 0;
+ margin-right: var(--#{$prefix}dropdown-spacer);
+ }
- .dropdown-toggle {
- @include caret(start);
- &::before {
- vertical-align: 0;
+ .dropdown-toggle {
+ @include caret(start);
+ &::before {
+ vertical-align: 0;
+ }
}
}
-}
-// Dividers (basically an `<hr>`) within the dropdown
-.dropdown-divider {
- height: 0;
- margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
- overflow: hidden;
- border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
- opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
-}
+ // Dividers (basically an `<hr>`) within the dropdown
+ .dropdown-divider {
+ height: 0;
+ margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
+ overflow: hidden;
+ border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
+ opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
+ }
-// Links, buttons, and more within the dropdown menu
-//
-// `<button>`-specific styles are denoted with `// For <button>s`
-.dropdown-item {
- display: block;
- width: 100%; // For `<button>`s
- padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
- clear: both;
- font-weight: $font-weight-normal;
- color: var(--#{$prefix}dropdown-link-color);
- text-align: inherit; // For `<button>`s
- text-decoration: if($link-decoration == none, null, none);
- white-space: nowrap; // prevent links from randomly breaking onto new lines
- background-color: transparent; // For `<button>`s
- border: 0; // For `<button>`s
- @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
+ // Links, buttons, and more within the dropdown menu
+ //
+ // `<button>`-specific styles are denoted with `// For <button>s`
+ .dropdown-item {
+ display: block;
+ width: 100%; // For `<button>`s
+ padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+ clear: both;
+ font-weight: $font-weight-normal;
+ color: var(--#{$prefix}dropdown-link-color);
+ text-align: inherit; // For `<button>`s
+ text-decoration: if($link-decoration == none, null, none);
+ white-space: nowrap; // prevent links from randomly breaking onto new lines
+ background-color: transparent; // For `<button>`s
+ border: 0; // For `<button>`s
+ @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
- &:hover,
- &:focus {
- color: var(--#{$prefix}dropdown-link-hover-color);
- text-decoration: if($link-hover-decoration == underline, none, null);
- @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
- }
+ &:hover,
+ &:focus {
+ color: var(--#{$prefix}dropdown-link-hover-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
+ }
- &.active,
- &:active {
- color: var(--#{$prefix}dropdown-link-active-color);
- text-decoration: none;
- @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
- }
+ &.active,
+ &:active {
+ color: var(--#{$prefix}dropdown-link-active-color);
+ text-decoration: none;
+ @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
+ }
- &.disabled,
- &:disabled {
- color: var(--#{$prefix}dropdown-link-disabled-color);
- pointer-events: none;
- background-color: transparent;
- // Remove CSS gradients if they're enabled
- background-image: if($enable-gradients, none, null);
+ &.disabled,
+ &:disabled {
+ color: var(--#{$prefix}dropdown-link-disabled-color);
+ pointer-events: none;
+ background-color: transparent;
+ // Remove CSS gradients if they're enabled
+ background-image: if($enable-gradients, none, null);
+ }
}
-}
-.dropdown-menu.show {
- display: block;
-}
+ .dropdown-menu.show {
+ display: block;
+ }
-// Dropdown section headers
-.dropdown-header {
- display: block;
- padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
- margin-bottom: 0; // for use with heading elements
- @include font-size($font-size-sm);
- color: var(--#{$prefix}dropdown-header-color);
- white-space: nowrap; // as with > li > a
-}
+ // Dropdown section headers
+ .dropdown-header {
+ display: block;
+ padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
+ margin-bottom: 0; // for use with heading elements
+ @include font-size($font-size-sm);
+ color: var(--#{$prefix}dropdown-header-color);
+ white-space: nowrap; // as with > li > a
+ }
-// Dropdown text
-.dropdown-item-text {
- display: block;
- padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
- color: var(--#{$prefix}dropdown-link-color);
-}
+ // Dropdown text
+ .dropdown-item-text {
+ display: block;
+ padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+ color: var(--#{$prefix}dropdown-link-color);
+ }
-// Dark dropdowns
-.dropdown-menu-dark {
- // scss-docs-start dropdown-dark-css-vars
- --#{$prefix}dropdown-color: #{$dropdown-dark-color};
- --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
- --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
- --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
- --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
- --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
- --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
- --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
- --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
- --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
- --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
- --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
- // scss-docs-end dropdown-dark-css-vars
+ // Dark dropdowns
+ .dropdown-menu-dark {
+ // scss-docs-start dropdown-dark-css-vars
+ --#{$prefix}dropdown-color: #{$dropdown-dark-color};
+ --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
+ --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
+ --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
+ --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
+ --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
+ --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
+ --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
+ --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
+ --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
+ --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
+ --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
+ // scss-docs-end dropdown-dark-css-vars
+ }
}
+++ /dev/null
-@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)
-//
-// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
-// We previously tried the "images are responsive by default" approach in Bootstrap v2,
-// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
-// which weren't expecting the images within themselves to be involuntarily resized.
-// See also https://github.com/twbs/bootstrap/issues/18178
-.img-fluid {
- @include img-fluid();
-}
-
-
-// Image thumbnails
-.img-thumbnail {
- padding: $thumbnail-padding;
- background-color: $thumbnail-bg;
- border: $thumbnail-border-width solid $thumbnail-border-color;
- @include border-radius($thumbnail-border-radius);
- @include box-shadow($thumbnail-box-shadow);
-
- // Keep them at most 100% wide
- @include img-fluid();
-}
-
-//
-// Figures
-//
-
-.figure {
- // Ensures the caption's text aligns with the image.
- display: inline-block;
-}
-
-.figure-img {
- margin-bottom: $spacer * .5;
- line-height: 1;
-}
-
-.figure-caption {
- @include font-size($figure-caption-font-size);
- color: $figure-caption-color;
-}
//
// Easily usable on <ul>, <ol>, or <div>.
-.list-group {
- // scss-docs-start list-group-css-vars
- --#{$prefix}list-group-color: #{$list-group-color};
- --#{$prefix}list-group-bg: #{$list-group-bg};
- --#{$prefix}list-group-border-color: #{$list-group-border-color};
- --#{$prefix}list-group-border-width: #{$list-group-border-width};
- --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
- --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
- --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
- --#{$prefix}list-group-action-color: #{$list-group-action-color};
- --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
- --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
- --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
- --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
- --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
- --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
- --#{$prefix}list-group-active-color: #{$list-group-active-color};
- --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
- --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
- // scss-docs-end list-group-css-vars
-
- display: flex;
- flex-direction: column;
-
- // No need to set list-style: none; since .list-group-item is block level
- padding-left: 0; // reset padding because ul and ol
- margin-bottom: 0;
- @include border-radius(var(--#{$prefix}list-group-border-radius));
-}
-
-.list-group-numbered {
- list-style-type: none;
- counter-reset: section;
-
- > .list-group-item::before {
- // Increments only this instance of the section counter
- content: counters(section, ".") ". ";
- counter-increment: section;
- }
-}
-
-// Individual list items
-//
-// Use on `li`s or `div`s within the `.list-group` parent.
-
-.list-group-item {
- position: relative;
- display: block;
- padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
- color: var(--#{$prefix}list-group-color);
- text-decoration: if($link-decoration == none, null, none);
- background-color: var(--#{$prefix}list-group-bg);
- border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
-
- &:first-child {
- @include border-top-radius(inherit);
+@layer components {
+ .list-group {
+ // scss-docs-start list-group-css-vars
+ --#{$prefix}list-group-color: #{$list-group-color};
+ --#{$prefix}list-group-bg: #{$list-group-bg};
+ --#{$prefix}list-group-border-color: #{$list-group-border-color};
+ --#{$prefix}list-group-border-width: #{$list-group-border-width};
+ --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
+ --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
+ --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
+ --#{$prefix}list-group-action-color: #{$list-group-action-color};
+ --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
+ --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
+ --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
+ --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
+ --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
+ --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
+ --#{$prefix}list-group-active-color: #{$list-group-active-color};
+ --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
+ --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
+ // scss-docs-end list-group-css-vars
+
+ display: flex;
+ flex-direction: column;
+
+ // No need to set list-style: none; since .list-group-item is block level
+ padding-left: 0; // reset padding because ul and ol
+ margin-bottom: 0;
+ @include border-radius(var(--#{$prefix}list-group-border-radius));
}
- &:last-child {
- @include border-bottom-radius(inherit);
- }
+ .list-group-numbered {
+ list-style-type: none;
+ counter-reset: section;
- &.disabled,
- &:disabled {
- color: var(--#{$prefix}list-group-disabled-color);
- pointer-events: none;
- background-color: var(--#{$prefix}list-group-disabled-bg);
+ > .list-group-item::before {
+ // Increments only this instance of the section counter
+ content: counters(section, ".") ". ";
+ counter-increment: section;
+ }
}
+ // Individual list items
+ //
+ // Use on `li`s or `div`s within the `.list-group` parent.
+
+ .list-group-item {
+ position: relative;
+ display: block;
+ padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
+ color: var(--#{$prefix}list-group-color);
+ text-decoration: if($link-decoration == none, null, none);
+ background-color: var(--#{$prefix}list-group-bg);
+ border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
+
+ &:first-child {
+ @include border-top-radius(inherit);
+ }
- // Include both here for `<a>`s and `<button>`s
- &.active {
- z-index: 2; // Place active items above their siblings for proper border styling
- color: var(--#{$prefix}list-group-active-color);
- background-color: var(--#{$prefix}list-group-active-bg);
- border-color: var(--#{$prefix}list-group-active-border-color);
- }
+ &:last-child {
+ @include border-bottom-radius(inherit);
+ }
- // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
- & + .list-group-item {
- border-top-width: 0;
+ &.disabled,
+ &:disabled {
+ color: var(--#{$prefix}list-group-disabled-color);
+ pointer-events: none;
+ background-color: var(--#{$prefix}list-group-disabled-bg);
+ }
+ // Include both here for `<a>`s and `<button>`s
&.active {
- margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
- border-top-width: var(--#{$prefix}list-group-border-width);
+ z-index: 2; // Place active items above their siblings for proper border styling
+ color: var(--#{$prefix}list-group-active-color);
+ background-color: var(--#{$prefix}list-group-active-bg);
+ border-color: var(--#{$prefix}list-group-active-border-color);
}
- }
-}
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
- width: 100%; // For `<button>`s (anchors become 100% by default though)
- color: var(--#{$prefix}list-group-action-color);
- text-align: inherit; // For `<button>`s (anchors inherit)
-
- &:not(.active) {
- // Hover state
- &:hover,
- &:focus {
- z-index: 1; // Place hover/focus items above their siblings for proper border styling
- color: var(--#{$prefix}list-group-action-hover-color);
- text-decoration: none;
- background-color: var(--#{$prefix}list-group-action-hover-bg);
- }
+ // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
+ & + .list-group-item {
+ border-top-width: 0;
- &:active {
- color: var(--#{$prefix}list-group-action-active-color);
- background-color: var(--#{$prefix}list-group-action-active-bg);
+ &.active {
+ margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+ border-top-width: var(--#{$prefix}list-group-border-width);
+ }
}
}
-}
-// Horizontal
-//
-// Change the layout of list group items from vertical (default) to horizontal.
+ // Interactive list items
+ //
+ // Use anchor or button elements instead of `li`s or `div`s to create interactive
+ // list items. Includes an extra `.active` modifier class for selected items.
+
+ .list-group-item-action {
+ width: 100%; // For `<button>`s (anchors become 100% by default though)
+ color: var(--#{$prefix}list-group-action-color);
+ text-align: inherit; // For `<button>`s (anchors inherit)
+
+ &:not(.active) {
+ // Hover state
+ &:hover,
+ &:focus {
+ z-index: 1; // Place hover/focus items above their siblings for proper border styling
+ color: var(--#{$prefix}list-group-action-hover-color);
+ text-decoration: none;
+ background-color: var(--#{$prefix}list-group-action-hover-bg);
+ }
-@each $breakpoint in map.keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ &:active {
+ color: var(--#{$prefix}list-group-action-active-color);
+ background-color: var(--#{$prefix}list-group-action-active-bg);
+ }
+ }
+ }
- .list-group-horizontal#{$infix} {
- flex-direction: row;
+ // Horizontal
+ //
+ // Change the layout of list group items from vertical (default) to horizontal.
- > .list-group-item {
- &:first-child:not(:last-child) {
- @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
- @include border-top-end-radius(0);
- }
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- &:last-child:not(:first-child) {
- @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
- @include border-bottom-start-radius(0);
- }
+ .list-group-horizontal#{$infix} {
+ flex-direction: row;
- &.active {
- margin-top: 0;
- }
+ > .list-group-item {
+ &:first-child:not(:last-child) {
+ @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
+ @include border-top-end-radius(0);
+ }
- + .list-group-item {
- border-top-width: var(--#{$prefix}list-group-border-width);
- border-left-width: 0;
+ &:last-child:not(:first-child) {
+ @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
+ @include border-bottom-start-radius(0);
+ }
&.active {
- margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
- border-left-width: var(--#{$prefix}list-group-border-width);
+ margin-top: 0;
+ }
+
+ + .list-group-item {
+ border-top-width: var(--#{$prefix}list-group-border-width);
+ border-left-width: 0;
+
+ &.active {
+ margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+ border-left-width: var(--#{$prefix}list-group-border-width);
+ }
}
}
}
}
}
-}
-// Flush list items
-//
-// Remove borders and border-radius to keep list group items edge-to-edge. Most
-// useful within other components (e.g., cards).
+ // Flush list items
+ //
+ // Remove borders and border-radius to keep list group items edge-to-edge. Most
+ // useful within other components (e.g., cards).
-.list-group-flush {
- @include border-radius(0);
+ .list-group-flush {
+ @include border-radius(0);
- > .list-group-item {
- border-width: 0 0 var(--#{$prefix}list-group-border-width);
+ > .list-group-item {
+ border-width: 0 0 var(--#{$prefix}list-group-border-width);
- &:last-child {
- border-bottom-width: 0;
+ &:last-child {
+ border-bottom-width: 0;
+ }
}
}
-}
-// scss-docs-start list-group-modifiers
-// List group contextual variants
-//
-// Add modifier classes to change text and background color on individual items.
-// Organizationally, this must come after the `:hover` states.
-
-@each $state in map.keys($theme-colors) {
- .list-group-item-#{$state} {
- --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
- --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
- --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
- --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
- --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
- --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
- --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
- --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
- --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
- --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
+ // scss-docs-start list-group-modifiers
+ // List group contextual variants
+ //
+ // Add modifier classes to change text and background color on individual items.
+ // Organizationally, this must come after the `:hover` states.
+
+ @each $state in map.keys($theme-colors) {
+ .list-group-item-#{$state} {
+ --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
+ --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
+ --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
+ --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+ --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+ --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
+ --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
+ --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
+ --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
+ --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
+ }
}
+ // scss-docs-end list-group-modifiers
}
-// scss-docs-end list-group-modifiers
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and stuff
+@layer components {
+ // Container that the modal scrolls within
+ .modal {
+ // scss-docs-start modal-css-vars
+ --#{$prefix}modal-zindex: #{$zindex-modal};
+ --#{$prefix}modal-width: #{$modal-md};
+ --#{$prefix}modal-padding: #{$modal-inner-padding};
+ --#{$prefix}modal-margin: #{$modal-dialog-margin};
+ --#{$prefix}modal-color: #{$modal-content-color};
+ --#{$prefix}modal-bg: #{$modal-content-bg};
+ --#{$prefix}modal-border-color: #{$modal-content-border-color};
+ --#{$prefix}modal-border-width: #{$modal-content-border-width};
+ --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
+ --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
+ --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
+ --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
+ --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
+ --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
+ --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
+ --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
+ --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
+ --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
+ --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
+ --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
+ --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
+ // scss-docs-end modal-css-vars
+
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: var(--#{$prefix}modal-zindex);
+ display: none;
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ // Prevent Chrome on Windows from adding a focus outline. For details, see
+ // https://github.com/twbs/bootstrap/pull/10951.
+ outline: 0;
+ // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+ // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+ // See also https://github.com/twbs/bootstrap/issues/17695
+ }
-// Container that the modal scrolls within
-.modal {
- // scss-docs-start modal-css-vars
- --#{$prefix}modal-zindex: #{$zindex-modal};
- --#{$prefix}modal-width: #{$modal-md};
- --#{$prefix}modal-padding: #{$modal-inner-padding};
- --#{$prefix}modal-margin: #{$modal-dialog-margin};
- --#{$prefix}modal-color: #{$modal-content-color};
- --#{$prefix}modal-bg: #{$modal-content-bg};
- --#{$prefix}modal-border-color: #{$modal-content-border-color};
- --#{$prefix}modal-border-width: #{$modal-content-border-width};
- --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
- --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
- --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
- --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
- --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
- --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
- --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
- --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
- --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
- --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
- --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
- --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
- --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
- // scss-docs-end modal-css-vars
-
- position: fixed;
- top: 0;
- left: 0;
- z-index: var(--#{$prefix}modal-zindex);
- display: none;
- width: 100%;
- height: 100%;
- overflow-x: hidden;
- overflow-y: auto;
- // Prevent Chrome on Windows from adding a focus outline. For details, see
- // https://github.com/twbs/bootstrap/pull/10951.
- outline: 0;
- // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
- // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
- // See also https://github.com/twbs/bootstrap/issues/17695
-}
+ // Shell div to position the modal with bottom padding
+ .modal-dialog {
+ position: relative;
+ width: auto;
+ margin: var(--#{$prefix}modal-margin);
+ // allow clicks to pass through for custom click handling to close modal
+ pointer-events: none;
+
+ // When fading in the modal, animate it to slide down
+ .modal.fade & {
+ transform: $modal-fade-transform;
+ @include transition($modal-transition);
+ }
+ .modal.show & {
+ transform: $modal-show-transform;
+ }
-// Shell div to position the modal with bottom padding
-.modal-dialog {
- position: relative;
- width: auto;
- margin: var(--#{$prefix}modal-margin);
- // allow clicks to pass through for custom click handling to close modal
- pointer-events: none;
-
- // When fading in the modal, animate it to slide down
- .modal.fade & {
- transform: $modal-fade-transform;
- @include transition($modal-transition);
- }
- .modal.show & {
- transform: $modal-show-transform;
+ // When trying to close, animate focus to scale
+ .modal.modal-static & {
+ transform: $modal-scale-transform;
+ }
}
- // When trying to close, animate focus to scale
- .modal.modal-static & {
- transform: $modal-scale-transform;
- }
-}
+ .modal-dialog-scrollable {
+ height: calc(100% - var(--#{$prefix}modal-margin) * 2);
-.modal-dialog-scrollable {
- height: calc(100% - var(--#{$prefix}modal-margin) * 2);
+ .modal-content {
+ max-height: 100%;
+ overflow: hidden;
+ }
- .modal-content {
- max-height: 100%;
- overflow: hidden;
+ .modal-body {
+ overflow-y: auto;
+ }
}
- .modal-body {
- overflow-y: auto;
+ .modal-dialog-centered {
+ display: flex;
+ align-items: center;
+ min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
}
-}
-
-.modal-dialog-centered {
- display: flex;
- align-items: center;
- min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
-}
-// Actual modal
-.modal-content {
- position: relative;
- display: flex;
- flex-direction: column;
- width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
- // counteract the pointer-events: none; in the .modal-dialog
- color: var(--#{$prefix}modal-color);
- pointer-events: auto;
- background-color: var(--#{$prefix}modal-bg);
- background-clip: padding-box;
- border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
- @include border-radius(var(--#{$prefix}modal-border-radius));
- @include box-shadow(var(--#{$prefix}modal-box-shadow));
- // Remove focus outline from opened modal
- outline: 0;
-}
-
-// Modal background
-.modal-backdrop {
- // scss-docs-start modal-backdrop-css-vars
- --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
- --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
- --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
- // scss-docs-end modal-backdrop-css-vars
-
- @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
-}
-
-// Modal header
-// Top section of the modal w/ title and dismiss
-.modal-header {
- display: flex;
- flex-shrink: 0;
- align-items: center;
- padding: var(--#{$prefix}modal-header-padding);
- border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
- @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
-
- .btn-close {
- padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
- // Split properties to avoid invalid calc() function if value is 0
- margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
- margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
- margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
- margin-left: auto;
+ // Actual modal
+ .modal-content {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+ // counteract the pointer-events: none; in the .modal-dialog
+ color: var(--#{$prefix}modal-color);
+ pointer-events: auto;
+ background-color: var(--#{$prefix}modal-bg);
+ background-clip: padding-box;
+ border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
+ @include border-radius(var(--#{$prefix}modal-border-radius));
+ @include box-shadow(var(--#{$prefix}modal-box-shadow));
+ // Remove focus outline from opened modal
+ outline: 0;
}
-}
-// Title text within header
-.modal-title {
- margin-bottom: 0;
- line-height: var(--#{$prefix}modal-title-line-height);
-}
+ // Modal background
+ .modal-backdrop {
+ // scss-docs-start modal-backdrop-css-vars
+ --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
+ --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
+ --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
+ // scss-docs-end modal-backdrop-css-vars
-// Modal body
-// Where all modal content resides (sibling of .modal-header and .modal-footer)
-.modal-body {
- position: relative;
- // Enable `flex-grow: 1` so that the body take up as much space as possible
- // when there should be a fixed height on `.modal-dialog`.
- flex: 1 1 auto;
- padding: var(--#{$prefix}modal-padding);
-}
+ @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
+ }
-// Footer (for actions)
-.modal-footer {
- display: flex;
- flex-shrink: 0;
- flex-wrap: wrap;
- align-items: center; // vertically center
- justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
- padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
- background-color: var(--#{$prefix}modal-footer-bg);
- border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
- @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
-
- // Place margin between footer elements
- // This solution is far from ideal because of the universal selector usage,
- // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
- > * {
- margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
+ // Modal header
+ // Top section of the modal w/ title and dismiss
+ .modal-header {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ padding: var(--#{$prefix}modal-header-padding);
+ border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
+ @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
+
+ .btn-close {
+ padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
+ // Split properties to avoid invalid calc() function if value is 0
+ margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
+ margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
+ margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
+ margin-left: auto;
+ }
}
-}
-// Scale up the modal
-@include media-breakpoint-up(sm) {
- .modal {
- --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
- --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
+ // Title text within header
+ .modal-title {
+ margin-bottom: 0;
+ line-height: var(--#{$prefix}modal-title-line-height);
}
- // Automatically set modal's width for larger viewports
- .modal-dialog {
- max-width: var(--#{$prefix}modal-width);
- margin-right: auto;
- margin-left: auto;
+ // Modal body
+ // Where all modal content resides (sibling of .modal-header and .modal-footer)
+ .modal-body {
+ position: relative;
+ // Enable `flex-grow: 1` so that the body take up as much space as possible
+ // when there should be a fixed height on `.modal-dialog`.
+ flex: 1 1 auto;
+ padding: var(--#{$prefix}modal-padding);
}
- .modal-sm {
- --#{$prefix}modal-width: #{$modal-sm};
+ // Footer (for actions)
+ .modal-footer {
+ display: flex;
+ flex-shrink: 0;
+ flex-wrap: wrap;
+ align-items: center; // vertically center
+ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+ padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
+ background-color: var(--#{$prefix}modal-footer-bg);
+ border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
+ @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
+
+ // Place margin between footer elements
+ // This solution is far from ideal because of the universal selector usage,
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+ > * {
+ margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
+ }
}
-}
-@include media-breakpoint-up(lg) {
- .modal-lg,
- .modal-xl {
- --#{$prefix}modal-width: #{$modal-lg};
+ // Scale up the modal
+ @include media-breakpoint-up(sm) {
+ .modal {
+ --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
+ --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
+ }
+
+ // Automatically set modal's width for larger viewports
+ .modal-dialog {
+ max-width: var(--#{$prefix}modal-width);
+ margin-right: auto;
+ margin-left: auto;
+ }
+
+ .modal-sm {
+ --#{$prefix}modal-width: #{$modal-sm};
+ }
}
-}
-@include media-breakpoint-up(xl) {
- .modal-xl {
- --#{$prefix}modal-width: #{$modal-xl};
+ @include media-breakpoint-up(lg) {
+ .modal-lg,
+ .modal-xl {
+ --#{$prefix}modal-width: #{$modal-lg};
+ }
}
-}
-// scss-docs-start modal-fullscreen-loop
-@each $breakpoint in map.keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- $postfix: if($infix != "", $infix + "-down", "");
+ @include media-breakpoint-up(xl) {
+ .modal-xl {
+ --#{$prefix}modal-width: #{$modal-xl};
+ }
+ }
- @include media-breakpoint-down($breakpoint) {
- .modal-fullscreen#{$postfix} {
- width: 100vw;
- max-width: none;
- height: 100%;
- margin: 0;
+ // scss-docs-start modal-fullscreen-loop
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ $postfix: if($infix != "", $infix + "-down", "");
- .modal-content {
+ @include media-breakpoint-down($breakpoint) {
+ .modal-fullscreen#{$postfix} {
+ width: 100vw;
+ max-width: none;
height: 100%;
- border: 0;
- @include border-radius(0);
- }
-
- .modal-header,
- .modal-footer {
- @include border-radius(0);
- }
-
- .modal-body {
- overflow-y: auto;
+ margin: 0;
+
+ .modal-content {
+ height: 100%;
+ border: 0;
+ @include border-radius(0);
+ }
+
+ .modal-header,
+ .modal-footer {
+ @include border-radius(0);
+ }
+
+ .modal-body {
+ overflow-y: auto;
+ }
}
}
}
+ // scss-docs-end modal-fullscreen-loop
}
-// scss-docs-end modal-fullscreen-loop
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s, `<ul>`s or `<ol>`s.
-.nav {
- // scss-docs-start nav-css-vars
- --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
- --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
- @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
- --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
- --#{$prefix}nav-link-color: #{$nav-link-color};
- --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
- --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
- // scss-docs-end nav-css-vars
-
- display: flex;
- flex-wrap: wrap;
- padding-left: 0;
- margin-bottom: 0;
- list-style: none;
-}
-
-.nav-link {
- display: block;
- padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
- @include font-size(var(--#{$prefix}nav-link-font-size));
- font-weight: var(--#{$prefix}nav-link-font-weight);
- color: var(--#{$prefix}nav-link-color);
- text-decoration: if($link-decoration == none, null, none);
- background: none;
- border: 0;
- @include transition($nav-link-transition);
-
- &:hover,
- &:focus {
- color: var(--#{$prefix}nav-link-hover-color);
- text-decoration: if($link-hover-decoration == underline, none, null);
- }
-
- &:focus-visible {
- outline: 0;
- box-shadow: $nav-link-focus-box-shadow;
- }
-
- // Disabled state lightens text
- &.disabled,
- &:disabled {
- color: var(--#{$prefix}nav-link-disabled-color);
- pointer-events: none;
- cursor: default;
+@layer components {
+ .nav {
+ // scss-docs-start nav-css-vars
+ --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
+ --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+ @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+ --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+ --#{$prefix}nav-link-color: #{$nav-link-color};
+ --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+ --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+ // scss-docs-end nav-css-vars
+
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
}
-}
-
-//
-// Tabs
-//
-
-.nav-tabs {
- // scss-docs-start nav-tabs-css-vars
- --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
- --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
- --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
- --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
- --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
- --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
- --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
- // scss-docs-end nav-tabs-css-vars
-
- border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
.nav-link {
- margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
- border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
- @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
+ display: block;
+ padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+ @include font-size(var(--#{$prefix}nav-link-font-size));
+ font-weight: var(--#{$prefix}nav-link-font-weight);
+ color: var(--#{$prefix}nav-link-color);
+ text-decoration: if($link-decoration == none, null, none);
+ background: none;
+ border: 0;
+ @include transition($nav-link-transition);
&:hover,
&:focus {
- // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
- isolation: isolate;
- border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+ color: var(--#{$prefix}nav-link-hover-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ }
+
+ &:focus-visible {
+ outline: 0;
+ box-shadow: $nav-link-focus-box-shadow;
}
- }
- .nav-link.active,
- .nav-item.show .nav-link {
- color: var(--#{$prefix}nav-tabs-link-active-color);
- background-color: var(--#{$prefix}nav-tabs-link-active-bg);
- border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
+ // Disabled state lightens text
+ &.disabled,
+ &:disabled {
+ color: var(--#{$prefix}nav-link-disabled-color);
+ pointer-events: none;
+ cursor: default;
+ }
}
- .dropdown-menu {
- // Make dropdown border overlap tab border
- margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
- // Remove the top rounded corners here since there is a hard edge above the menu
- @include border-top-radius(0);
+ //
+ // Tabs
+ //
+
+ .nav-tabs {
+ // scss-docs-start nav-tabs-css-vars
+ --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+ --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+ --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+ --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+ --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+ --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+ --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+ // scss-docs-end nav-tabs-css-vars
+
+ border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+
+ .nav-link {
+ margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+ border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+ @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
+
+ &:hover,
+ &:focus {
+ // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+ isolation: isolate;
+ border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+ }
+ }
+
+ .nav-link.active,
+ .nav-item.show .nav-link {
+ color: var(--#{$prefix}nav-tabs-link-active-color);
+ background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+ border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
+ }
+
+ .dropdown-menu {
+ // Make dropdown border overlap tab border
+ margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+ // Remove the top rounded corners here since there is a hard edge above the menu
+ @include border-top-radius(0);
+ }
}
-}
-//
-// Pills
-//
+ //
+ // Pills
+ //
-.nav-pills {
- // scss-docs-start nav-pills-css-vars
- --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
- --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
- --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
- // scss-docs-end nav-pills-css-vars
+ .nav-pills {
+ // scss-docs-start nav-pills-css-vars
+ --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
+ --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
+ --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
+ // scss-docs-end nav-pills-css-vars
- .nav-link {
- @include border-radius(var(--#{$prefix}nav-pills-border-radius));
- }
+ .nav-link {
+ @include border-radius(var(--#{$prefix}nav-pills-border-radius));
+ }
- .nav-link.active,
- .show > .nav-link {
- color: var(--#{$prefix}nav-pills-link-active-color);
- @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
+ .nav-link.active,
+ .show > .nav-link {
+ color: var(--#{$prefix}nav-pills-link-active-color);
+ @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
+ }
}
-}
-//
-// Underline
-//
+ //
+ // Underline
+ //
-.nav-underline {
- // scss-docs-start nav-underline-css-vars
- --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
- --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
- --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
- // scss-docs-end nav-underline-css-vars
+ .nav-underline {
+ // scss-docs-start nav-underline-css-vars
+ --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+ --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+ --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+ // scss-docs-end nav-underline-css-vars
- gap: var(--#{$prefix}nav-underline-gap);
+ gap: var(--#{$prefix}nav-underline-gap);
- .nav-link {
- padding-right: 0;
- padding-left: 0;
- border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+ .nav-link {
+ padding-right: 0;
+ padding-left: 0;
+ border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
- &:hover,
- &:focus {
+ &:hover,
+ &:focus {
+ border-bottom-color: currentcolor;
+ }
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ font-weight: $font-weight-bold;
+ color: var(--#{$prefix}nav-underline-link-active-color);
border-bottom-color: currentcolor;
}
}
- .nav-link.active,
- .show > .nav-link {
- font-weight: $font-weight-bold;
- color: var(--#{$prefix}nav-underline-link-active-color);
- border-bottom-color: currentcolor;
- }
-}
+ //
+ // Justified variants
+ //
-//
-// Justified variants
-//
-
-.nav-fill {
- > .nav-link,
- .nav-item {
- flex: 1 1 auto;
- text-align: center;
+ .nav-fill {
+ > .nav-link,
+ .nav-item {
+ flex: 1 1 auto;
+ text-align: center;
+ }
}
-}
-.nav-justified {
- > .nav-link,
- .nav-item {
- flex-grow: 1;
- flex-basis: 0;
- text-align: center;
+ .nav-justified {
+ > .nav-link,
+ .nav-item {
+ flex-grow: 1;
+ flex-basis: 0;
+ text-align: center;
+ }
}
-}
-.nav-fill,
-.nav-justified {
- .nav-item .nav-link {
- width: 100%; // Make sure button will grow
+ .nav-fill,
+ .nav-justified {
+ .nav-item .nav-link {
+ width: 100%; // Make sure button will grow
+ }
}
-}
-// Tabbable tabs
-//
-// Hide tabbable panes to start, show them when `.active`
+ // Tabbable tabs
+ //
+ // Hide tabbable panes to start, show them when `.active`
-.tab-content {
- > .tab-pane {
- display: none;
- }
- > .active {
- display: block;
+ .tab-content {
+ > .tab-pane {
+ display: none;
+ }
+ > .active {
+ display: block;
+ }
}
}
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
-.navbar {
- // scss-docs-start navbar-css-vars
- --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
- --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
- --#{$prefix}navbar-color: #{$navbar-light-color};
- --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
- --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
- --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
- --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
- --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
- --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
- --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
- --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
- --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
- --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
- --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
- --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
- --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
- --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
- --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
- --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
- --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
- // scss-docs-end navbar-css-vars
-
- position: relative;
- display: flex;
- flex-wrap: wrap; // allow us to do the line break for collapsing content
- align-items: center;
- justify-content: space-between; // space out brand from logo
- padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
- @include gradient-bg();
-
- // Because flex properties aren't inherited, we need to redeclare these first
- // few properties so that content nested within behave properly.
- // The `flex-wrap` property is inherited to simplify the expanded navbars
- %container-flex-properties {
+@layer components {
+ .navbar {
+ // scss-docs-start navbar-css-vars
+ --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+ --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+ --#{$prefix}navbar-color: #{$navbar-light-color};
+ --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
+ --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+ --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+ --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
+ --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
+ --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
+ --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
+ --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+ --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+ --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
+ --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
+ --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+ --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+ --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+ --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
+ --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
+ // scss-docs-end navbar-css-vars
+
+ position: relative;
display: flex;
- flex-wrap: inherit;
+ flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
- justify-content: space-between;
- }
-
- > .container,
- > .container-fluid {
- @extend %container-flex-properties;
- }
+ justify-content: space-between; // space out brand from logo
+ padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
+ @include gradient-bg();
+
+ // Because flex properties aren't inherited, we need to redeclare these first
+ // few properties so that content nested within behave properly.
+ // The `flex-wrap` property is inherited to simplify the expanded navbars
+ %container-flex-properties {
+ display: flex;
+ flex-wrap: inherit;
+ align-items: center;
+ justify-content: space-between;
+ }
- @each $breakpoint, $container-max-width in $container-max-widths {
- > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+ > .container,
+ > .container-fluid {
@extend %container-flex-properties;
}
+
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+ @extend %container-flex-properties;
+ }
+ }
}
-}
-// Navbar brand
-//
-// Used for brand, project, or site names.
-
-.navbar-brand {
- padding-top: var(--#{$prefix}navbar-brand-padding-y);
- padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
- margin-right: var(--#{$prefix}navbar-brand-margin-end);
- @include font-size(var(--#{$prefix}navbar-brand-font-size));
- color: var(--#{$prefix}navbar-brand-color);
- text-decoration: if($link-decoration == none, null, none);
- white-space: nowrap;
-
- &:hover,
- &:focus {
- color: var(--#{$prefix}navbar-brand-hover-color);
- text-decoration: if($link-hover-decoration == underline, none, null);
- }
-}
+ // Navbar brand
+ //
+ // Used for brand, project, or site names.
+ .navbar-brand {
+ padding-top: var(--#{$prefix}navbar-brand-padding-y);
+ padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
+ margin-right: var(--#{$prefix}navbar-brand-margin-end);
+ @include font-size(var(--#{$prefix}navbar-brand-font-size));
+ color: var(--#{$prefix}navbar-brand-color);
+ text-decoration: if($link-decoration == none, null, none);
+ white-space: nowrap;
-// Navbar nav
-//
-// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
-
-.navbar-nav {
- // scss-docs-start navbar-nav-css-vars
- --#{$prefix}nav-link-padding-x: 0;
- --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
- @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
- --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
- --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
- --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
- --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
- // scss-docs-end navbar-nav-css-vars
-
- display: flex;
- flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
- padding-left: 0;
- margin-bottom: 0;
- list-style: none;
-
- .nav-link {
- &.active,
- &.show {
- color: var(--#{$prefix}navbar-active-color);
+ &:hover,
+ &:focus {
+ color: var(--#{$prefix}navbar-brand-hover-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
}
}
- .dropdown-menu {
- position: static;
+
+ // Navbar nav
+ //
+ // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+
+ .navbar-nav {
+ // scss-docs-start navbar-nav-css-vars
+ --#{$prefix}nav-link-padding-x: 0;
+ --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+ @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+ --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+ --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
+ --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
+ --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+ // scss-docs-end navbar-nav-css-vars
+
+ display: flex;
+ flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+
+ .nav-link {
+ &.active,
+ &.show {
+ color: var(--#{$prefix}navbar-active-color);
+ }
+ }
+
+ .dropdown-menu {
+ position: static;
+ }
}
-}
-// Navbar text
-//
-//
+ // Navbar text
+ //
+ //
-.navbar-text {
- padding-top: $nav-link-padding-y;
- padding-bottom: $nav-link-padding-y;
- color: var(--#{$prefix}navbar-color);
+ .navbar-text {
+ padding-top: $nav-link-padding-y;
+ padding-bottom: $nav-link-padding-y;
+ color: var(--#{$prefix}navbar-color);
- a,
- a:hover,
- a:focus {
- color: var(--#{$prefix}navbar-active-color);
+ a,
+ a:hover,
+ a:focus {
+ color: var(--#{$prefix}navbar-active-color);
+ }
}
-}
-// Responsive navbar
-//
-// Custom styles for responsive collapsing and toggling of navbar contents.
-// Powered by the collapse Bootstrap JavaScript plugin.
-
-// When collapsed, prevent the toggleable navbar contents from appearing in
-// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
-// on the `.navbar` parent.
-.navbar-collapse {
- flex-grow: 1;
- flex-basis: 100%;
- // For always expanded or extra full navbars, ensure content aligns itself
- // properly vertically. Can be easily overridden with flex utilities.
- align-items: center;
-}
+ // Responsive navbar
+ //
+ // Custom styles for responsive collapsing and toggling of navbar contents.
+ // Powered by the collapse Bootstrap JavaScript plugin.
-// Button for toggling the navbar when in its collapsed state
-.navbar-toggler {
- padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
- @include font-size(var(--#{$prefix}navbar-toggler-font-size));
- line-height: 1;
- color: var(--#{$prefix}navbar-color);
- background-color: transparent; // remove default button style
- border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
- @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
- @include transition(var(--#{$prefix}navbar-toggler-transition));
-
- &:hover {
- text-decoration: none;
+ // When collapsed, prevent the toggleable navbar contents from appearing in
+ // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
+ // on the `.navbar` parent.
+ .navbar-collapse {
+ flex-grow: 1;
+ flex-basis: 100%;
+ // For always expanded or extra full navbars, ensure content aligns itself
+ // properly vertically. Can be easily overridden with flex utilities.
+ align-items: center;
}
- &:focus {
- text-decoration: none;
- outline: 0;
- box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
+ // Button for toggling the navbar when in its collapsed state
+ .navbar-toggler {
+ padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
+ @include font-size(var(--#{$prefix}navbar-toggler-font-size));
+ line-height: 1;
+ color: var(--#{$prefix}navbar-color);
+ background-color: transparent; // remove default button style
+ border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
+ @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
+ @include transition(var(--#{$prefix}navbar-toggler-transition));
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:focus {
+ text-decoration: none;
+ outline: 0;
+ box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
+ }
}
-}
-// Keep as a separate element so folks can easily override it with another icon
-// or image file as needed.
-.navbar-toggler-icon {
- display: inline-block;
- width: 1.5em;
- height: 1.5em;
- vertical-align: middle;
- background-image: var(--#{$prefix}navbar-toggler-icon-bg);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100%;
-}
+ // Keep as a separate element so folks can easily override it with another icon
+ // or image file as needed.
+ .navbar-toggler-icon {
+ display: inline-block;
+ width: 1.5em;
+ height: 1.5em;
+ vertical-align: middle;
+ background-image: var(--#{$prefix}navbar-toggler-icon-bg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+ }
-.navbar-nav-scroll {
- max-height: var(--#{$prefix}scroll-height, 75vh);
- overflow-y: auto;
-}
+ .navbar-nav-scroll {
+ max-height: var(--#{$prefix}scroll-height, 75vh);
+ overflow-y: auto;
+ }
-// scss-docs-start navbar-expand-loop
-// Generate series of `.navbar-expand-*` responsive classes for configuring
-// where your navbar collapses.
-.navbar-expand {
- @each $breakpoint in map.keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
-
- // stylelint-disable-next-line scss/selector-no-union-class-name
- &#{$infix} {
- @include media-breakpoint-up($next) {
- flex-wrap: nowrap;
- justify-content: flex-start;
-
- .navbar-nav {
- flex-direction: row;
-
- .dropdown-menu {
- position: absolute;
+ // scss-docs-start navbar-expand-loop
+ // Generate series of `.navbar-expand-*` responsive classes for configuring
+ // where your navbar collapses.
+ .navbar-expand {
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ // stylelint-disable-next-line scss/selector-no-union-class-name
+ &#{$infix} {
+ @include media-breakpoint-up($next) {
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+
+ .navbar-nav {
+ flex-direction: row;
+
+ .dropdown-menu {
+ position: absolute;
+ }
+
+ .nav-link {
+ padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
+ padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+ }
}
- .nav-link {
- padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
- padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+ .navbar-nav-scroll {
+ overflow: visible;
}
- }
- .navbar-nav-scroll {
- overflow: visible;
- }
-
- .navbar-collapse {
- display: flex !important; // stylelint-disable-line declaration-no-important
- flex-basis: auto;
- }
-
- .navbar-toggler {
- display: none;
- }
+ .navbar-collapse {
+ display: flex !important; // stylelint-disable-line declaration-no-important
+ flex-basis: auto;
+ }
- .offcanvas {
- // stylelint-disable declaration-no-important
- position: static;
- z-index: auto;
- flex-grow: 1;
- width: auto !important;
- height: auto !important;
- visibility: visible !important;
- background-color: transparent !important;
- border: 0 !important;
- transform: none !important;
- @include box-shadow(none);
- @include transition(none);
- // stylelint-enable declaration-no-important
-
- .offcanvas-header {
+ .navbar-toggler {
display: none;
}
- .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible;
+ .offcanvas {
+ // stylelint-disable declaration-no-important
+ position: static;
+ z-index: auto;
+ flex-grow: 1;
+ width: auto !important;
+ height: auto !important;
+ visibility: visible !important;
+ background-color: transparent !important;
+ border: 0 !important;
+ transform: none !important;
+ @include box-shadow(none);
+ @include transition(none);
+ // stylelint-enable declaration-no-important
+
+ .offcanvas-header {
+ display: none;
+ }
+
+ .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ }
}
}
}
}
}
-}
-// scss-docs-end navbar-expand-loop
+ // scss-docs-end navbar-expand-loop
-// Navbar themes
-//
-// Styles for switching between navbars with light or dark background.
+ // Navbar themes
+ //
+ // Styles for switching between navbars with light or dark background.
-.navbar-light {
- @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
-}
+ .navbar-light {
+ @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
+ }
-.navbar-dark,
-.navbar[data-bs-theme="dark"] {
- // scss-docs-start navbar-dark-css-vars
- --#{$prefix}navbar-color: #{$navbar-dark-color};
- --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
- --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
- --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
- --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
- --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
- --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
- --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
- // scss-docs-end navbar-dark-css-vars
-}
+ .navbar-dark,
+ .navbar[data-bs-theme="dark"] {
+ // scss-docs-start navbar-dark-css-vars
+ --#{$prefix}navbar-color: #{$navbar-dark-color};
+ --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+ --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+ --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+ --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+ --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+ --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+ // scss-docs-end navbar-dark-css-vars
+ }
-@if $enable-dark-mode {
- @include color-mode(dark) {
- .navbar-toggler-icon {
- --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+ @if $enable-dark-mode {
+ @include color-mode(dark) {
+ .navbar-toggler-icon {
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+ }
}
}
}
// stylelint-disable function-disallowed-list
-%offcanvas-css-vars {
- // scss-docs-start offcanvas-css-vars
- --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
- --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
- --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
- --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
- --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
- --#{$prefix}offcanvas-color: #{$offcanvas-color};
- --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
- --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
- --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
- --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
- --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
- --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
- // scss-docs-end offcanvas-css-vars
-}
-
-@each $breakpoint in map.keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
-
- .offcanvas#{$infix} {
- @extend %offcanvas-css-vars;
+@layer components {
+ %offcanvas-css-vars {
+ // scss-docs-start offcanvas-css-vars
+ --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
+ --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
+ --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
+ --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
+ --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
+ --#{$prefix}offcanvas-color: #{$offcanvas-color};
+ --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
+ --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
+ --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
+ --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+ --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+ --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
+ // scss-docs-end offcanvas-css-vars
}
-}
-@each $breakpoint in map.keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
-
- .offcanvas#{$infix} {
- @include media-breakpoint-down($next) {
- position: fixed;
- bottom: 0;
- z-index: var(--#{$prefix}offcanvas-zindex);
- display: flex;
- flex-direction: column;
- max-width: 100%;
- color: var(--#{$prefix}offcanvas-color);
- visibility: hidden;
- background-color: var(--#{$prefix}offcanvas-bg);
- background-clip: padding-box;
- outline: 0;
- @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
- @include transition(var(--#{$prefix}offcanvas-transition));
-
- &.offcanvas-start {
- top: 0;
- left: 0;
- width: var(--#{$prefix}offcanvas-width);
- border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
- transform: translateX(-100%);
- }
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
- &.offcanvas-end {
- top: 0;
- right: 0;
- width: var(--#{$prefix}offcanvas-width);
- border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
- transform: translateX(100%);
- }
+ .offcanvas#{$infix} {
+ @extend %offcanvas-css-vars;
+ }
+ }
- &.offcanvas-top {
- top: 0;
- right: 0;
- left: 0;
- height: var(--#{$prefix}offcanvas-height);
- max-height: 100%;
- border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
- transform: translateY(-100%);
- }
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ .offcanvas#{$infix} {
+ @include media-breakpoint-down($next) {
+ position: fixed;
+ bottom: 0;
+ z-index: var(--#{$prefix}offcanvas-zindex);
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ color: var(--#{$prefix}offcanvas-color);
+ visibility: hidden;
+ background-color: var(--#{$prefix}offcanvas-bg);
+ background-clip: padding-box;
+ outline: 0;
+ @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
+ @include transition(var(--#{$prefix}offcanvas-transition));
+
+ &.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--#{$prefix}offcanvas-width);
+ border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateX(-100%);
+ }
- &.offcanvas-bottom {
- right: 0;
- left: 0;
- height: var(--#{$prefix}offcanvas-height);
- max-height: 100%;
- border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
- transform: translateY(100%);
- }
+ &.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--#{$prefix}offcanvas-width);
+ border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateX(100%);
+ }
- &.showing,
- &.show:not(.hiding) {
- transform: none;
- }
+ &.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--#{$prefix}offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateY(-100%);
+ }
- &.showing,
- &.hiding,
- &.show {
- visibility: visible;
- }
- }
+ &.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--#{$prefix}offcanvas-height);
+ max-height: 100%;
+ border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateY(100%);
+ }
- @if not ($infix == "") {
- @include media-breakpoint-up($next) {
- --#{$prefix}offcanvas-height: auto;
- --#{$prefix}offcanvas-border-width: 0;
- background-color: transparent !important; // stylelint-disable-line declaration-no-important
+ &.showing,
+ &.show:not(.hiding) {
+ transform: none;
+ }
- .offcanvas-header {
- display: none;
+ &.showing,
+ &.hiding,
+ &.show {
+ visibility: visible;
}
+ }
- .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible;
- // Reset `background-color` in case `.bg-*` classes are used in offcanvas
+ @if not ($infix == "") {
+ @include media-breakpoint-up($next) {
+ --#{$prefix}offcanvas-height: auto;
+ --#{$prefix}offcanvas-border-width: 0;
background-color: transparent !important; // stylelint-disable-line declaration-no-important
+
+ .offcanvas-header {
+ display: none;
+ }
+
+ .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ // Reset `background-color` in case `.bg-*` classes are used in offcanvas
+ background-color: transparent !important; // stylelint-disable-line declaration-no-important
+ }
}
}
}
}
-}
-.offcanvas-backdrop {
- @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
-}
+ .offcanvas-backdrop {
+ @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+ }
-.offcanvas-header {
- display: flex;
- align-items: center;
- padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
-
- .btn-close {
- padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
- // Split properties to avoid invalid calc() function if value is 0
- margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
- margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
- margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
- margin-left: auto;
+ .offcanvas-header {
+ display: flex;
+ align-items: center;
+ padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+
+ .btn-close {
+ padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
+ // Split properties to avoid invalid calc() function if value is 0
+ margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+ margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
+ margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+ margin-left: auto;
+ }
}
-}
-.offcanvas-title {
- margin-bottom: 0;
- line-height: var(--#{$prefix}offcanvas-title-line-height);
-}
+ .offcanvas-title {
+ margin-bottom: 0;
+ line-height: var(--#{$prefix}offcanvas-title-line-height);
+ }
-.offcanvas-body {
- flex-grow: 1;
- padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
- overflow-y: auto;
+ .offcanvas-body {
+ flex-grow: 1;
+ padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+ overflow-y: auto;
+ }
}
}
// scss-docs-end pagination-mixin
-.pagination {
- // scss-docs-start pagination-css-vars
- --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
- --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
- @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
- --#{$prefix}pagination-color: #{$pagination-color};
- --#{$prefix}pagination-bg: #{$pagination-bg};
- --#{$prefix}pagination-border-width: #{$pagination-border-width};
- --#{$prefix}pagination-border-color: #{$pagination-border-color};
- --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
- --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
- --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
- --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
- --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
- --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
- --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
- --#{$prefix}pagination-active-color: #{$pagination-active-color};
- --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
- --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
- --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
- --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
- --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
- // scss-docs-end pagination-css-vars
+@layer components {
+ .pagination {
+ // scss-docs-start pagination-css-vars
+ --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
+ --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
+ @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
+ --#{$prefix}pagination-color: #{$pagination-color};
+ --#{$prefix}pagination-bg: #{$pagination-bg};
+ --#{$prefix}pagination-border-width: #{$pagination-border-width};
+ --#{$prefix}pagination-border-color: #{$pagination-border-color};
+ --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
+ --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
+ --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
+ --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
+ --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
+ --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
+ --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+ --#{$prefix}pagination-active-color: #{$pagination-active-color};
+ --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
+ --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
+ --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
+ --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
+ --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
+ // scss-docs-end pagination-css-vars
- display: flex;
- @include list-unstyled();
-}
+ display: flex;
+ @include list-unstyled();
+ }
-.page-link {
- position: relative;
- display: block;
- padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
- @include font-size(var(--#{$prefix}pagination-font-size));
- color: var(--#{$prefix}pagination-color);
- text-decoration: if($link-decoration == none, null, none);
- background-color: var(--#{$prefix}pagination-bg);
- border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
- @include transition($pagination-transition);
+ .page-link {
+ position: relative;
+ display: block;
+ padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
+ @include font-size(var(--#{$prefix}pagination-font-size));
+ color: var(--#{$prefix}pagination-color);
+ text-decoration: if($link-decoration == none, null, none);
+ background-color: var(--#{$prefix}pagination-bg);
+ border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+ @include transition($pagination-transition);
- &:hover {
- z-index: 2;
- color: var(--#{$prefix}pagination-hover-color);
- text-decoration: if($link-hover-decoration == underline, none, null);
- background-color: var(--#{$prefix}pagination-hover-bg);
- border-color: var(--#{$prefix}pagination-hover-border-color);
- }
+ &:hover {
+ z-index: 2;
+ color: var(--#{$prefix}pagination-hover-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ background-color: var(--#{$prefix}pagination-hover-bg);
+ border-color: var(--#{$prefix}pagination-hover-border-color);
+ }
- &:focus {
- z-index: 3;
- color: var(--#{$prefix}pagination-focus-color);
- background-color: var(--#{$prefix}pagination-focus-bg);
- outline: $pagination-focus-outline;
- box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
- }
+ &:focus {
+ z-index: 3;
+ color: var(--#{$prefix}pagination-focus-color);
+ background-color: var(--#{$prefix}pagination-focus-bg);
+ outline: $pagination-focus-outline;
+ box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
+ }
- &.active,
- .active > & {
- z-index: 3;
- color: var(--#{$prefix}pagination-active-color);
- @include gradient-bg(var(--#{$prefix}pagination-active-bg));
- border-color: var(--#{$prefix}pagination-active-border-color);
- }
+ &.active,
+ .active > & {
+ z-index: 3;
+ color: var(--#{$prefix}pagination-active-color);
+ @include gradient-bg(var(--#{$prefix}pagination-active-bg));
+ border-color: var(--#{$prefix}pagination-active-border-color);
+ }
- &.disabled,
- .disabled > & {
- color: var(--#{$prefix}pagination-disabled-color);
- pointer-events: none;
- background-color: var(--#{$prefix}pagination-disabled-bg);
- border-color: var(--#{$prefix}pagination-disabled-border-color);
+ &.disabled,
+ .disabled > & {
+ color: var(--#{$prefix}pagination-disabled-color);
+ pointer-events: none;
+ background-color: var(--#{$prefix}pagination-disabled-bg);
+ border-color: var(--#{$prefix}pagination-disabled-border-color);
+ }
}
-}
-.page-item {
- &:not(:first-child) .page-link {
- margin-left: $pagination-margin-start;
- }
+ .page-item {
+ &:not(:first-child) .page-link {
+ margin-left: $pagination-margin-start;
+ }
- @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
- &:first-child {
- .page-link {
- @include border-start-radius(var(--#{$prefix}pagination-border-radius));
+ @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
+ &:first-child {
+ .page-link {
+ @include border-start-radius(var(--#{$prefix}pagination-border-radius));
+ }
}
- }
- &:last-child {
+ &:last-child {
+ .page-link {
+ @include border-end-radius(var(--#{$prefix}pagination-border-radius));
+ }
+ }
+ } @else {
+ // Add border-radius to all pageLinks in case they have left margin
.page-link {
- @include border-end-radius(var(--#{$prefix}pagination-border-radius));
+ @include border-radius(var(--#{$prefix}pagination-border-radius));
}
}
- } @else {
- // Add border-radius to all pageLinks in case they have left margin
- .page-link {
- @include border-radius(var(--#{$prefix}pagination-border-radius));
- }
}
-}
-//
-// Sizing
-//
+ //
+ // Sizing
+ //
-.pagination-lg {
- @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
-}
+ .pagination-lg {
+ @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
+ }
-.pagination-sm {
- @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
+ .pagination-sm {
+ @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
+ }
}
@use "colors" as *;
@use "variables" as *;
-.placeholder {
- display: inline-block;
- min-height: 1em;
- vertical-align: middle;
- cursor: wait;
- background-color: currentcolor;
- opacity: $placeholder-opacity-max;
-
- &.btn::before {
+@layer components {
+ .placeholder {
display: inline-block;
- content: "";
+ min-height: 1em;
+ vertical-align: middle;
+ cursor: wait;
+ background-color: currentcolor;
+ opacity: $placeholder-opacity-max;
+
+ &.btn::before {
+ display: inline-block;
+ content: "";
+ }
}
-}
-// Sizing
-.placeholder-xs {
- min-height: .6em;
-}
+ // Sizing
+ .placeholder-xs {
+ min-height: .6em;
+ }
-.placeholder-sm {
- min-height: .8em;
-}
+ .placeholder-sm {
+ min-height: .8em;
+ }
-.placeholder-lg {
- min-height: 1.2em;
-}
+ .placeholder-lg {
+ min-height: 1.2em;
+ }
-// Animation
-.placeholder-glow {
- .placeholder {
- animation: placeholder-glow 2s ease-in-out infinite;
+ // Animation
+ .placeholder-glow {
+ .placeholder {
+ animation: placeholder-glow 2s ease-in-out infinite;
+ }
}
-}
-@keyframes placeholder-glow {
- 50% {
- opacity: $placeholder-opacity-min;
+ @keyframes placeholder-glow {
+ 50% {
+ opacity: $placeholder-opacity-min;
+ }
}
-}
-.placeholder-wave {
- mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
- mask-size: 200% 100%;
- animation: placeholder-wave 2s linear infinite;
-}
+ .placeholder-wave {
+ mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
+ mask-size: 200% 100%;
+ animation: placeholder-wave 2s linear infinite;
+ }
-@keyframes placeholder-wave {
- 100% {
- mask-position: -200% 0%;
+ @keyframes placeholder-wave {
+ 100% {
+ mask-position: -200% 0%;
+ }
}
}
@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
-.popover {
- // scss-docs-start popover-css-vars
- --#{$prefix}popover-zindex: #{$zindex-popover};
- --#{$prefix}popover-max-width: #{$popover-max-width};
- @include rfs($popover-font-size, --#{$prefix}popover-font-size);
- --#{$prefix}popover-bg: #{$popover-bg};
- --#{$prefix}popover-border-width: #{$popover-border-width};
- --#{$prefix}popover-border-color: #{$popover-border-color};
- --#{$prefix}popover-border-radius: #{$popover-border-radius};
- --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
- --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
- --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
- --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
- @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
- --#{$prefix}popover-header-color: #{$popover-header-color};
- --#{$prefix}popover-header-bg: #{$popover-header-bg};
- --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
- --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
- --#{$prefix}popover-body-color: #{$popover-body-color};
- --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
- --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
- --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
- // scss-docs-end popover-css-vars
-
- z-index: var(--#{$prefix}popover-zindex);
- display: block;
- max-width: var(--#{$prefix}popover-max-width);
- // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
- // So reset our font and text properties to avoid inheriting weird values.
- @include reset-text();
- @include font-size(var(--#{$prefix}popover-font-size));
- // Allow breaking very long words so they don't overflow the popover's bounds
- word-wrap: break-word;
- background-color: var(--#{$prefix}popover-bg);
- background-clip: padding-box;
- border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
- @include border-radius(var(--#{$prefix}popover-border-radius));
- @include box-shadow(var(--#{$prefix}popover-box-shadow));
-
- .popover-arrow {
+@layer components {
+ .popover {
+ // scss-docs-start popover-css-vars
+ --#{$prefix}popover-zindex: #{$zindex-popover};
+ --#{$prefix}popover-max-width: #{$popover-max-width};
+ @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+ --#{$prefix}popover-bg: #{$popover-bg};
+ --#{$prefix}popover-border-width: #{$popover-border-width};
+ --#{$prefix}popover-border-color: #{$popover-border-color};
+ --#{$prefix}popover-border-radius: #{$popover-border-radius};
+ --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
+ --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+ --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
+ --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+ @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+ --#{$prefix}popover-header-color: #{$popover-header-color};
+ --#{$prefix}popover-header-bg: #{$popover-header-bg};
+ --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+ --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+ --#{$prefix}popover-body-color: #{$popover-body-color};
+ --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+ --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+ --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+ // scss-docs-end popover-css-vars
+
+ z-index: var(--#{$prefix}popover-zindex);
display: block;
- width: var(--#{$prefix}popover-arrow-width);
- height: var(--#{$prefix}popover-arrow-height);
-
- &::before,
- &::after {
- position: absolute;
+ max-width: var(--#{$prefix}popover-max-width);
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text();
+ @include font-size(var(--#{$prefix}popover-font-size));
+ // Allow breaking very long words so they don't overflow the popover's bounds
+ word-wrap: break-word;
+ background-color: var(--#{$prefix}popover-bg);
+ background-clip: padding-box;
+ border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+ @include border-radius(var(--#{$prefix}popover-border-radius));
+ @include box-shadow(var(--#{$prefix}popover-box-shadow));
+
+ .popover-arrow {
display: block;
- content: "";
- border-color: transparent;
- border-style: solid;
- border-width: 0;
+ width: var(--#{$prefix}popover-arrow-width);
+ height: var(--#{$prefix}popover-arrow-height);
+
+ &::before,
+ &::after {
+ position: absolute;
+ display: block;
+ content: "";
+ border-color: transparent;
+ border-style: solid;
+ border-width: 0;
+ }
}
}
-}
-.bs-popover-top {
- > .popover-arrow {
- bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+ .bs-popover-top {
+ > .popover-arrow {
+ bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
- &::before,
- &::after {
- border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
- }
+ &::before,
+ &::after {
+ border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ }
- &::before {
- bottom: 0;
- border-top-color: var(--#{$prefix}popover-arrow-border);
- }
+ &::before {
+ bottom: 0;
+ border-top-color: var(--#{$prefix}popover-arrow-border);
+ }
- &::after {
- bottom: var(--#{$prefix}popover-border-width);
- border-top-color: var(--#{$prefix}popover-bg);
+ &::after {
+ bottom: var(--#{$prefix}popover-border-width);
+ border-top-color: var(--#{$prefix}popover-bg);
+ }
}
}
-}
-/* rtl:begin:ignore */
-.bs-popover-end {
- > .popover-arrow {
- left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
- width: var(--#{$prefix}popover-arrow-height);
- height: var(--#{$prefix}popover-arrow-width);
-
- &::before,
- &::after {
- border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ /* rtl:begin:ignore */
+ .bs-popover-end {
+ > .popover-arrow {
+ left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+ width: var(--#{$prefix}popover-arrow-height);
+ height: var(--#{$prefix}popover-arrow-width);
+
+ &::before,
+ &::after {
+ border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ }
+
+ &::before {
+ left: 0;
+ border-right-color: var(--#{$prefix}popover-arrow-border);
+ }
+
+ &::after {
+ left: var(--#{$prefix}popover-border-width);
+ border-right-color: var(--#{$prefix}popover-bg);
+ }
}
+ }
- &::before {
- left: 0;
- border-right-color: var(--#{$prefix}popover-arrow-border);
- }
+ /* rtl:end:ignore */
- &::after {
- left: var(--#{$prefix}popover-border-width);
- border-right-color: var(--#{$prefix}popover-bg);
- }
- }
-}
+ .bs-popover-bottom {
+ > .popover-arrow {
+ top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
-/* rtl:end:ignore */
+ &::before,
+ &::after {
+ border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+ }
-.bs-popover-bottom {
- > .popover-arrow {
- top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+ &::before {
+ top: 0;
+ border-bottom-color: var(--#{$prefix}popover-arrow-border);
+ }
- &::before,
- &::after {
- border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+ &::after {
+ top: var(--#{$prefix}popover-border-width);
+ border-bottom-color: var(--#{$prefix}popover-bg);
+ }
}
- &::before {
+ // This will remove the popover-header's border just below the arrow
+ .popover-header::before {
+ position: absolute;
top: 0;
- border-bottom-color: var(--#{$prefix}popover-arrow-border);
- }
-
- &::after {
- top: var(--#{$prefix}popover-border-width);
- border-bottom-color: var(--#{$prefix}popover-bg);
+ left: 50%;
+ display: block;
+ width: var(--#{$prefix}popover-arrow-width);
+ margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
+ content: "";
+ border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
}
}
- // This will remove the popover-header's border just below the arrow
- .popover-header::before {
- position: absolute;
- top: 0;
- left: 50%;
- display: block;
- width: var(--#{$prefix}popover-arrow-width);
- margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
- content: "";
- border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+ /* rtl:begin:ignore */
+ .bs-popover-start {
+ > .popover-arrow {
+ right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+ width: var(--#{$prefix}popover-arrow-height);
+ height: var(--#{$prefix}popover-arrow-width);
+
+ &::before,
+ &::after {
+ border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+ }
+
+ &::before {
+ right: 0;
+ border-left-color: var(--#{$prefix}popover-arrow-border);
+ }
+
+ &::after {
+ right: var(--#{$prefix}popover-border-width);
+ border-left-color: var(--#{$prefix}popover-bg);
+ }
+ }
}
-}
-/* rtl:begin:ignore */
-.bs-popover-start {
- > .popover-arrow {
- right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
- width: var(--#{$prefix}popover-arrow-height);
- height: var(--#{$prefix}popover-arrow-width);
+ /* rtl:end:ignore */
- &::before,
- &::after {
- border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+ .bs-popover-auto {
+ &[data-popper-placement^="top"] {
+ @extend .bs-popover-top;
}
-
- &::before {
- right: 0;
- border-left-color: var(--#{$prefix}popover-arrow-border);
+ &[data-popper-placement^="right"] {
+ @extend .bs-popover-end;
}
-
- &::after {
- right: var(--#{$prefix}popover-border-width);
- border-left-color: var(--#{$prefix}popover-bg);
+ &[data-popper-placement^="bottom"] {
+ @extend .bs-popover-bottom;
+ }
+ &[data-popper-placement^="left"] {
+ @extend .bs-popover-start;
}
}
-}
-/* rtl:end:ignore */
-
-.bs-popover-auto {
- &[data-popper-placement^="top"] {
- @extend .bs-popover-top;
- }
- &[data-popper-placement^="right"] {
- @extend .bs-popover-end;
- }
- &[data-popper-placement^="bottom"] {
- @extend .bs-popover-bottom;
- }
- &[data-popper-placement^="left"] {
- @extend .bs-popover-start;
+ // Offset the popover to account for the popover arrow
+ .popover-header {
+ padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
+ margin-bottom: 0; // Reset the default from Reboot
+ @include font-size(var(--#{$prefix}popover-header-font-size));
+ color: var(--#{$prefix}popover-header-color);
+ background-color: var(--#{$prefix}popover-header-bg);
+ border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+ @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
+
+ &:empty {
+ display: none;
+ }
}
-}
-// Offset the popover to account for the popover arrow
-.popover-header {
- padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
- margin-bottom: 0; // Reset the default from Reboot
- @include font-size(var(--#{$prefix}popover-header-font-size));
- color: var(--#{$prefix}popover-header-color);
- background-color: var(--#{$prefix}popover-header-bg);
- border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
- @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
-
- &:empty {
- display: none;
+ .popover-body {
+ padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+ color: var(--#{$prefix}popover-body-color);
}
}
-
-.popover-body {
- padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
- color: var(--#{$prefix}popover-body-color);
-}
@use "mixins/box-shadow" as *;
@use "vendor/rfs" as *;
-// Disable animation if transitions are disabled
-
-// scss-docs-start progress-keyframes
-@if $enable-transitions {
- @keyframes progress-bar-stripes {
- 0% { background-position-x: var(--#{$prefix}progress-height); }
+@layer components {
+ // Disable animation if transitions are disabled
+ // scss-docs-start progress-keyframes
+ @if $enable-transitions {
+ @keyframes progress-bar-stripes {
+ 0% { background-position-x: var(--#{$prefix}progress-height); }
+ }
}
-}
-// scss-docs-end progress-keyframes
+ // scss-docs-end progress-keyframes
-.progress,
-.progress-stacked {
- // scss-docs-start progress-css-vars
- --#{$prefix}progress-height: #{$progress-height};
- @include rfs($progress-font-size, --#{$prefix}progress-font-size);
- --#{$prefix}progress-bg: #{$progress-bg};
- --#{$prefix}progress-border-radius: #{$progress-border-radius};
- --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
- --#{$prefix}progress-bar-color: #{$progress-bar-color};
- --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
- --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
- // scss-docs-end progress-css-vars
+ .progress,
+ .progress-stacked {
+ // scss-docs-start progress-css-vars
+ --#{$prefix}progress-height: #{$progress-height};
+ @include rfs($progress-font-size, --#{$prefix}progress-font-size);
+ --#{$prefix}progress-bg: #{$progress-bg};
+ --#{$prefix}progress-border-radius: #{$progress-border-radius};
+ --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
+ --#{$prefix}progress-bar-color: #{$progress-bar-color};
+ --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
+ --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
+ // scss-docs-end progress-css-vars
- display: flex;
- height: var(--#{$prefix}progress-height);
- overflow: hidden; // force rounded corners by cropping it
- @include font-size(var(--#{$prefix}progress-font-size));
- background-color: var(--#{$prefix}progress-bg);
- @include border-radius(var(--#{$prefix}progress-border-radius));
- @include box-shadow(var(--#{$prefix}progress-box-shadow));
-}
+ display: flex;
+ height: var(--#{$prefix}progress-height);
+ overflow: hidden; // force rounded corners by cropping it
+ @include font-size(var(--#{$prefix}progress-font-size));
+ background-color: var(--#{$prefix}progress-bg);
+ @include border-radius(var(--#{$prefix}progress-border-radius));
+ @include box-shadow(var(--#{$prefix}progress-box-shadow));
+ }
-.progress-bar {
- display: flex;
- flex-direction: column;
- justify-content: center;
- overflow: hidden;
- color: var(--#{$prefix}progress-bar-color);
- text-align: center;
- white-space: nowrap;
- background-color: var(--#{$prefix}progress-bar-bg);
- @include transition(var(--#{$prefix}progress-bar-transition));
-}
+ .progress-bar {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ color: var(--#{$prefix}progress-bar-color);
+ text-align: center;
+ white-space: nowrap;
+ background-color: var(--#{$prefix}progress-bar-bg);
+ @include transition(var(--#{$prefix}progress-bar-transition));
+ }
-.progress-bar-striped {
- @include gradient-striped();
- background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
-}
+ .progress-bar-striped {
+ @include gradient-striped();
+ background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
+ }
-.progress-stacked > .progress {
- overflow: visible;
-}
+ .progress-stacked > .progress {
+ overflow: visible;
+ }
-.progress-stacked > .progress > .progress-bar {
- width: 100%;
-}
+ .progress-stacked > .progress > .progress-bar {
+ width: 100%;
+ }
-@if $enable-transitions {
- .progress-bar-animated {
- animation: $progress-bar-animation-timing progress-bar-stripes;
+ @if $enable-transitions {
+ .progress-bar-animated {
+ animation: $progress-bar-animation-timing progress-bar-stripes;
- @if $enable-reduced-motion {
- @media (prefers-reduced-motion: reduce) {
- animation: none;
+ @if $enable-reduced-motion {
+ @media (prefers-reduced-motion: reduce) {
+ animation: none;
+ }
}
}
}
+++ /dev/null
-@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
-
-
-// Reboot
-//
-// Normalization of HTML elements, manually forked from Normalize.css to remove
-// styles targeting irrelevant browsers while applying new styles.
-//
-// Normalize is licensed MIT. https://github.com/necolas/normalize.css
-
-
-// Document
-//
-// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-
-// Root
-//
-// Ability to the value of the root font sizes, affecting the value of `rem`.
-// null by default, thus nothing is generated.
-
-:root {
- @if $font-size-root != null {
- @include font-size(var(--#{$prefix}root-font-size));
- }
-
- @if $enable-smooth-scroll {
- @media (prefers-reduced-motion: no-preference) {
- scroll-behavior: smooth;
- }
- }
-}
-
-
-// Body
-//
-// 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Prevent adjustments of font size after orientation changes in iOS.
-// 4. Change the default tap highlight to be completely transparent in iOS.
-
-// scss-docs-start reboot-body-rules
-body {
- margin: 0; // 1
- font-family: var(--#{$prefix}body-font-family);
- @include font-size(var(--#{$prefix}body-font-size));
- font-weight: var(--#{$prefix}body-font-weight);
- line-height: var(--#{$prefix}body-line-height);
- color: var(--#{$prefix}body-color);
- text-align: var(--#{$prefix}body-text-align);
- background-color: var(--#{$prefix}body-bg); // 2
- -webkit-text-size-adjust: 100%; // 3
- -webkit-tap-highlight-color: rgba($black, 0); // 4
-}
-// scss-docs-end reboot-body-rules
-
-
-// Content grouping
-//
-// 1. Reset Firefox's gray color
-
-hr {
- margin: $hr-margin-y 0;
- color: $hr-color; // 1
- border: 0;
- border-top: $hr-border-width solid $hr-border-color;
- opacity: $hr-opacity;
-}
-
-
-// Typography
-//
-// 1. Remove top margins from headings
-// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
-// margin for easier control within type scales as it avoids margin collapsing.
-
-%heading {
- margin-top: 0; // 1
- margin-bottom: $headings-margin-bottom;
- font-family: $headings-font-family;
- font-style: $headings-font-style;
- font-weight: $headings-font-weight;
- line-height: $headings-line-height;
- color: var(--#{$prefix}heading-color);
-}
-
-h1 {
- @extend %heading;
- @include font-size($h1-font-size);
-}
-
-h2 {
- @extend %heading;
- @include font-size($h2-font-size);
-}
-
-h3 {
- @extend %heading;
- @include font-size($h3-font-size);
-}
-
-h4 {
- @extend %heading;
- @include font-size($h4-font-size);
-}
-
-h5 {
- @extend %heading;
- @include font-size($h5-font-size);
-}
-
-h6 {
- @extend %heading;
- @include font-size($h6-font-size);
-}
-
-
-// Reset margins on paragraphs
-//
-// Similarly, the top margin on `<p>`s get reset. However, we also reset the
-// bottom margin to use `rem` units instead of `em`.
-
-p {
- margin-top: 0;
- margin-bottom: $paragraph-margin-bottom;
-}
-
-
-// Abbreviations
-//
-// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
-// 2. Add explicit cursor to indicate changed behavior.
-// 3. Prevent the text-decoration to be skipped.
-
-abbr[title] {
- text-decoration: underline dotted; // 1
- cursor: help; // 2
- text-decoration-skip-ink: none; // 3
-}
-
-
-// Address
-
-address {
- margin-bottom: 1rem;
- font-style: normal;
- line-height: inherit;
-}
-
-
-// Lists
-
-ol,
-ul {
- padding-left: 2rem;
-}
-
-ol,
-ul,
-dl {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
- margin-bottom: 0;
-}
-
-dt {
- font-weight: $dt-font-weight;
-}
-
-// 1. Undo browser default
-
-dd {
- margin-bottom: .5rem;
- margin-left: 0; // 1
-}
-
-
-// Blockquote
-
-blockquote {
- margin: 0 0 1rem;
-}
-
-
-// Strong
-//
-// Add the correct font weight in Chrome, Edge, and Safari
-
-b,
-strong {
- font-weight: $font-weight-bolder;
-}
-
-
-// Small
-//
-// Add the correct font size in all browsers
-
-small {
- @include font-size($small-font-size);
-}
-
-
-// Mark
-
-mark {
- padding: $mark-padding;
- color: var(--#{$prefix}highlight-color);
- background-color: var(--#{$prefix}highlight-bg);
-}
-
-
-// Sub and Sup
-//
-// Prevent `sub` and `sup` elements from affecting the line height in
-// all browsers.
-
-sub,
-sup {
- position: relative;
- @include font-size($sub-sup-font-size);
- line-height: 0;
- vertical-align: baseline;
-}
-
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
-
-// Links
-
-a {
- color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
- text-decoration: $link-decoration;
-
- &:hover {
- --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
- text-decoration: $link-hover-decoration;
- }
-}
-
-// And undo these styles for placeholder links/named anchors (without href).
-// It would be more straightforward to just use a[href] in previous block, but that
-// causes specificity issues in many other styles that are too complex to fix.
-// See https://github.com/twbs/bootstrap/issues/19402
-
-a:not([href]):not([class]) {
- &,
- &:hover {
- color: inherit;
- text-decoration: none;
- }
-}
-
-
-// Code
-
-pre,
-code,
-kbd,
-samp {
- font-family: $font-family-code;
- @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-}
-
-// 1. Remove browser default top margin
-// 2. Reset browser default of `1em` to use `rem`s
-// 3. Don't allow content to break outside
-
-pre {
- display: block;
- margin-top: 0; // 1
- margin-bottom: 1rem; // 2
- overflow: auto; // 3
- @include font-size($code-font-size);
- color: $pre-color;
-
- // Account for some code outputs that place code tags in pre tags
- code {
- @include font-size(inherit);
- color: inherit;
- word-break: normal;
- }
-}
-
-code {
- @include font-size($code-font-size);
- color: var(--#{$prefix}code-color);
- word-wrap: break-word;
-
- // Streamline the style when inside anchors to avoid broken underline and more
- a > & {
- color: inherit;
- }
-}
-
-kbd {
- padding: $kbd-padding-y $kbd-padding-x;
- @include font-size($kbd-font-size);
- color: $kbd-color;
- background-color: $kbd-bg;
- @include border-radius($border-radius-sm);
-
- kbd {
- padding: 0;
- @include font-size(1em);
- font-weight: $nested-kbd-font-weight;
- }
-}
-
-
-// Figures
-//
-// Apply a consistent margin strategy (matches our type styles).
-
-figure {
- margin: 0 0 1rem;
-}
-
-
-// Images and content
-
-img,
-svg {
- vertical-align: middle;
-}
-
-
-// Tables
-//
-// Prevent double borders
-
-table {
- caption-side: bottom;
- border-collapse: collapse;
-}
-
-caption {
- padding-top: $table-cell-padding-y;
- padding-bottom: $table-cell-padding-y;
- color: $table-caption-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
-
-th {
- font-weight: $table-th-font-weight; // 1
- text-align: inherit; // 2
- text-align: -webkit-match-parent; // 3
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
- border-color: inherit;
- border-style: solid;
- border-width: 0;
-}
-
-
-// Forms
-//
-// 1. Allow labels to use `margin` for spacing.
-
-label {
- display: inline-block; // 1
-}
-
-// Remove the default `border-radius` that macOS Chrome adds.
-// See https://github.com/twbs/bootstrap/issues/24093
-
-button {
- // stylelint-disable-next-line property-disallowed-list
- border-radius: 0;
-}
-
-// Explicitly remove focus outline in Chromium when it shouldn't be
-// visible (e.g. as result of mouse click or touch tap). It already
-// should be doing this automatically, but seems to currently be
-// confused and applies its very visible two-tone outline anyway.
-
-button:focus:not(:focus-visible) {
- outline: 0;
-}
-
-// 1. Remove the margin in Firefox and Safari
-
-input,
-button,
-select,
-optgroup,
-textarea {
- margin: 0; // 1
- font-family: inherit;
- @include font-size(inherit);
- line-height: inherit;
-}
-
-// Remove the inheritance of text transform in Firefox
-button,
-select {
- text-transform: none;
-}
-// Set the cursor for non-`<button>` buttons
-//
-// Details at https://github.com/twbs/bootstrap/pull/30562
-[role="button"] {
- cursor: pointer;
-}
-
-select {
- // Remove the inheritance of word-wrap in Safari.
- // See https://github.com/twbs/bootstrap/issues/24990
- word-wrap: normal;
-
- // Undo the opacity change from Chrome
- &:disabled {
- opacity: 1;
- }
-}
-
-// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
-// See https://stackoverflow.com/a/54997118
-
-[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
- display: none !important;
-}
-
-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-// controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS and Safari.
-// 3. Opinionated: add "hand" cursor to non-disabled button elements.
-
-button,
-[type="button"], // 1
-[type="reset"],
-[type="submit"] {
- -webkit-appearance: button; // 2
-
- @if $enable-button-pointers {
- &:not(:disabled) {
- cursor: pointer; // 3
- }
- }
-}
-
-// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-
-::-moz-focus-inner {
- padding: 0;
- border-style: none;
-}
-
-// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
-
-textarea {
- resize: vertical; // 1
-}
-
-// 1. Browsers set a default `min-width: min-content;` on fieldsets,
-// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
-// So we reset that to ensure fieldsets behave more like a standard block element.
-// See https://github.com/twbs/bootstrap/issues/12359
-// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
-// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
-
-fieldset {
- min-width: 0; // 1
- padding: 0; // 2
- margin: 0; // 2
- border: 0; // 2
-}
-
-// 1. By using `float: left`, the legend will behave like a block element.
-// This way the border of a fieldset wraps around the legend if present.
-// 2. Fix wrapping bug.
-// See https://github.com/twbs/bootstrap/issues/29712
-
-legend {
- float: left; // 1
- width: 100%;
- padding: 0;
- margin-bottom: $legend-margin-bottom;
- font-weight: $legend-font-weight;
- line-height: inherit;
- @include font-size($legend-font-size);
-
- + * {
- clear: left; // 2
- }
-}
-
-// Fix height of inputs with a type of datetime-local, date, month, week, or time
-// See https://github.com/twbs/bootstrap/issues/18842
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
- padding: 0;
-}
-
-::-webkit-inner-spin-button {
- height: auto;
-}
-
-// 1. This overrides the extra rounded corners on search inputs in iOS so that our
-// `.form-control` class can properly style them. Note that this cannot simply
-// be added to `.form-control` as it's not specific enough. For details, see
-// https://github.com/twbs/bootstrap/issues/11586.
-// 2. Correct the outline style in Safari.
-
-[type="search"] {
- -webkit-appearance: textfield; // 1
- outline-offset: -2px; // 2
-}
-
-// 1. A few input types should stay LTR
-// See https://rtlstyling.com/posts/rtl-styling#form-inputs
-// 2. RTL only output
-// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
-
-/* rtl:raw:
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
- direction: ltr;
-}
-*/
-
-// Remove the inner padding in Chrome and Safari on macOS.
-
-::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-// Remove padding around color pickers in webkit browsers
-
-::-webkit-color-swatch-wrapper {
- padding: 0;
-}
-
-
-// 1. Inherit font family and line height for file input buttons
-// 2. Correct the inability to style clickable types in iOS and Safari.
-
-::file-selector-button {
- font: inherit; // 1
- -webkit-appearance: button; // 2
-}
-
-// Correct element displays
-
-output {
- display: inline-block;
-}
-
-// Remove border from iframe
-
-iframe {
- border: 0;
-}
-
-// Summary
-//
-// 1. Add the correct display in all browsers
-
-summary {
- display: list-item; // 1
- cursor: pointer;
-}
-
-
-// Progress
-//
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
-
-progress {
- vertical-align: baseline;
-}
-
-
-// Hidden attribute
-//
-// Always hide an element with the `hidden` HTML attribute.
-
-[hidden] {
- display: none !important;
-}
@use "vendor/rfs" as *;
@use "mixins/color-mode" as *;
+// mdo-do: do we need theme?
+@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
+
+@layer colors {
+ :root,
+ [data-bs-theme="light"] {
+ @each $color-group-name, $color-group in $all-colors {
+ @each $color-name, $color-value in $color-group {
+ --#{$prefix}#{$color-name}: #{$color-value};
+ }
+ }
+
+ @each $color, $value in $theme-colors {
+ --#{$prefix}#{$color}: #{$value};
+ }
+ }
+}
+
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
//
// Generate palettes for full colors, grays, and theme colors.
- @each $color-group-name, $color-group in $all-colors {
- @each $color-name, $color-value in $color-group {
- --#{$prefix}#{$color-name}: #{$color-value};
- }
- }
+ // @each $color-group-name, $color-group in $all-colors {
+ // @each $color-name, $color-value in $color-group {
+ // --#{$prefix}#{$color-name}: #{$color-value};
+ // }
+ // }
// @each $color, $value in $colors {
// --#{$prefix}#{$color}: #{$value};
// --#{$prefix}gray-#{$color}: #{$value};
// }
- @each $color, $value in $theme-colors {
- --#{$prefix}#{$color}: #{$value};
- }
+ // @each $color, $value in $theme-colors {
+ // --#{$prefix}#{$color}: #{$value};
+ // }
@each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value};
@use "config" as *;
@use "variables" as *;
-//
-// Rotating border
-//
+@layer components {
+ //
+ // Rotating border
+ //
-.spinner-grow,
-.spinner-border {
- display: inline-block;
- width: var(--#{$prefix}spinner-width);
- height: var(--#{$prefix}spinner-height);
- vertical-align: var(--#{$prefix}spinner-vertical-align);
- // stylelint-disable-next-line property-disallowed-list
- border-radius: 50%;
- animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
-}
+ .spinner-grow,
+ .spinner-border {
+ display: inline-block;
+ width: var(--#{$prefix}spinner-width);
+ height: var(--#{$prefix}spinner-height);
+ vertical-align: var(--#{$prefix}spinner-vertical-align);
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: 50%;
+ animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
+ }
-// scss-docs-start spinner-border-keyframes
-@keyframes spinner-border {
- to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
-}
-// scss-docs-end spinner-border-keyframes
+ // scss-docs-start spinner-border-keyframes
+ @keyframes spinner-border {
+ to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+ }
+ // scss-docs-end spinner-border-keyframes
-.spinner-border {
- // scss-docs-start spinner-border-css-vars
- --#{$prefix}spinner-width: #{$spinner-width};
- --#{$prefix}spinner-height: #{$spinner-height};
- --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
- --#{$prefix}spinner-border-width: #{$spinner-border-width};
- --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
- --#{$prefix}spinner-animation-name: spinner-border;
- // scss-docs-end spinner-border-css-vars
+ .spinner-border {
+ // scss-docs-start spinner-border-css-vars
+ --#{$prefix}spinner-width: #{$spinner-width};
+ --#{$prefix}spinner-height: #{$spinner-height};
+ --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+ --#{$prefix}spinner-border-width: #{$spinner-border-width};
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+ --#{$prefix}spinner-animation-name: spinner-border;
+ // scss-docs-end spinner-border-css-vars
- border: var(--#{$prefix}spinner-border-width) solid currentcolor;
- border-right-color: transparent;
-}
+ border: var(--#{$prefix}spinner-border-width) solid currentcolor;
+ border-right-color: transparent;
+ }
-.spinner-border-sm {
- // scss-docs-start spinner-border-sm-css-vars
- --#{$prefix}spinner-width: #{$spinner-width-sm};
- --#{$prefix}spinner-height: #{$spinner-height-sm};
- --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
- // scss-docs-end spinner-border-sm-css-vars
-}
+ .spinner-border-sm {
+ // scss-docs-start spinner-border-sm-css-vars
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
+ --#{$prefix}spinner-height: #{$spinner-height-sm};
+ --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
+ // scss-docs-end spinner-border-sm-css-vars
+ }
-//
-// Growing circle
-//
+ //
+ // Growing circle
+ //
-// scss-docs-start spinner-grow-keyframes
-@keyframes spinner-grow {
- 0% {
- transform: scale(0);
- }
- 50% {
- opacity: 1;
- transform: none;
+ // scss-docs-start spinner-grow-keyframes
+ @keyframes spinner-grow {
+ 0% {
+ transform: scale(0);
+ }
+ 50% {
+ opacity: 1;
+ transform: none;
+ }
}
-}
-// scss-docs-end spinner-grow-keyframes
+ // scss-docs-end spinner-grow-keyframes
-.spinner-grow {
- // scss-docs-start spinner-grow-css-vars
- --#{$prefix}spinner-width: #{$spinner-width};
- --#{$prefix}spinner-height: #{$spinner-height};
- --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
- --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
- --#{$prefix}spinner-animation-name: spinner-grow;
- // scss-docs-end spinner-grow-css-vars
+ .spinner-grow {
+ // scss-docs-start spinner-grow-css-vars
+ --#{$prefix}spinner-width: #{$spinner-width};
+ --#{$prefix}spinner-height: #{$spinner-height};
+ --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+ --#{$prefix}spinner-animation-name: spinner-grow;
+ // scss-docs-end spinner-grow-css-vars
- background-color: currentcolor;
- opacity: 0;
-}
+ background-color: currentcolor;
+ opacity: 0;
+ }
-.spinner-grow-sm {
- --#{$prefix}spinner-width: #{$spinner-width-sm};
- --#{$prefix}spinner-height: #{$spinner-height-sm};
-}
+ .spinner-grow-sm {
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
+ --#{$prefix}spinner-height: #{$spinner-height-sm};
+ }
-@if $enable-reduced-motion {
- @media (prefers-reduced-motion: reduce) {
- .spinner-border,
- .spinner-grow {
- --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
+ @if $enable-reduced-motion {
+ @media (prefers-reduced-motion: reduce) {
+ .spinner-border,
+ .spinner-grow {
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
+ }
}
}
}
+++ /dev/null
-@use "sass:map";
-@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) {
- .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
-
-//
-// Basic Bootstrap table
-//
-
-.table {
- // Reset needed for nesting tables
- --#{$prefix}table-color-type: initial;
- --#{$prefix}table-bg-type: initial;
- --#{$prefix}table-color-state: initial;
- --#{$prefix}table-bg-state: initial;
- // End of reset
- --#{$prefix}table-color: #{$table-color};
- --#{$prefix}table-bg: #{$table-bg};
- --#{$prefix}table-border-color: #{$table-border-color};
- --#{$prefix}table-accent-bg: #{$table-accent-bg};
- --#{$prefix}table-striped-color: #{$table-striped-color};
- --#{$prefix}table-striped-bg: #{$table-striped-bg};
- --#{$prefix}table-active-color: #{$table-active-color};
- --#{$prefix}table-active-bg: #{$table-active-bg};
- --#{$prefix}table-hover-color: #{$table-hover-color};
- --#{$prefix}table-hover-bg: #{$table-hover-bg};
-
- width: 100%;
- margin-bottom: $spacer;
- vertical-align: $table-cell-vertical-align;
- border-color: var(--#{$prefix}table-border-color);
-
- // Target th & td
- // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
- // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
- // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
- // stylelint-disable-next-line selector-max-universal
- > :not(caption) > * > * {
- padding: $table-cell-padding-y $table-cell-padding-x;
- // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
- color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
- background-color: var(--#{$prefix}table-bg);
- border-bottom-width: $table-border-width;
- box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
- }
-
- > tbody {
- vertical-align: inherit;
- }
-
- > thead {
- vertical-align: bottom;
- }
-}
-
-.table-group-divider {
- border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
-}
-
-//
-// Change placement of captions with a class
-//
-
-.caption-top {
- caption-side: top;
-}
-
-
-//
-// Condensed table w/ half padding
-//
-
-.table-sm {
- // stylelint-disable-next-line selector-max-universal
- > :not(caption) > * > * {
- padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
- }
-}
-
-
-// Border versions
-//
-// Add or remove borders all around the table and between all the columns.
-//
-// When borders are added on all sides of the cells, the corners can render odd when
-// these borders do not have the same color or if they are semi-transparent.
-// Therefore we add top and border bottoms to the `tr`s and left and right borders
-// to the `td`s or `th`s
-
-.table-bordered {
- > :not(caption) > * {
- border-width: $table-border-width 0;
-
- // stylelint-disable-next-line selector-max-universal
- > * {
- border-width: 0 $table-border-width;
- }
- }
-}
-
-.table-borderless {
- // stylelint-disable-next-line selector-max-universal
- > :not(caption) > * > * {
- border-bottom-width: 0;
- }
-
- > :not(:first-child) {
- border-top-width: 0;
- }
-}
-
-// Zebra-striping
-//
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-
-// For rows
-.table-striped {
- > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
- --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
- --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
- }
-}
-
-// For columns
-.table-striped-columns {
- > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
- --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
- --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
- }
-}
-
-// Active table
-//
-// The `.table-active` class can be added to highlight rows or cells
-
-.table-active {
- --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
- --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
-}
-
-// Hover effect
-//
-// Placed here since it has to come after the potential zebra striping
-
-.table-hover {
- > tbody > tr:hover > * {
- --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
- --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
- }
-}
-
-
-// Table variants
-//
-// Table variants set the table cell backgrounds, border colors
-// and the colors of the striped, hovered & active tables
-
-@each $color, $value in $table-variants {
- @include table-variant($color, $value);
-}
-
-// Responsive tables
-//
-// Generate series of `.table-responsive-*` classes for configuring the screen
-// size of where your table will overflow.
-
-@each $breakpoint in map.keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- @include media-breakpoint-down($breakpoint) {
- .table-responsive#{$infix} {
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- }
- }
-}
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
-.toast {
- // scss-docs-start toast-css-vars
- --#{$prefix}toast-zindex: #{$zindex-toast};
- --#{$prefix}toast-padding-x: #{$toast-padding-x};
- --#{$prefix}toast-padding-y: #{$toast-padding-y};
- --#{$prefix}toast-spacing: #{$toast-spacing};
- --#{$prefix}toast-max-width: #{$toast-max-width};
- @include rfs($toast-font-size, --#{$prefix}toast-font-size);
- --#{$prefix}toast-color: #{$toast-color};
- --#{$prefix}toast-bg: #{$toast-background-color};
- --#{$prefix}toast-border-width: #{$toast-border-width};
- --#{$prefix}toast-border-color: #{$toast-border-color};
- --#{$prefix}toast-border-radius: #{$toast-border-radius};
- --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
- --#{$prefix}toast-header-color: #{$toast-header-color};
- --#{$prefix}toast-header-bg: #{$toast-header-background-color};
- --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
- // scss-docs-end toast-css-vars
+@layer components {
+ .toast {
+ // scss-docs-start toast-css-vars
+ --#{$prefix}toast-zindex: #{$zindex-toast};
+ --#{$prefix}toast-padding-x: #{$toast-padding-x};
+ --#{$prefix}toast-padding-y: #{$toast-padding-y};
+ --#{$prefix}toast-spacing: #{$toast-spacing};
+ --#{$prefix}toast-max-width: #{$toast-max-width};
+ @include rfs($toast-font-size, --#{$prefix}toast-font-size);
+ --#{$prefix}toast-color: #{$toast-color};
+ --#{$prefix}toast-bg: #{$toast-background-color};
+ --#{$prefix}toast-border-width: #{$toast-border-width};
+ --#{$prefix}toast-border-color: #{$toast-border-color};
+ --#{$prefix}toast-border-radius: #{$toast-border-radius};
+ --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
+ --#{$prefix}toast-header-color: #{$toast-header-color};
+ --#{$prefix}toast-header-bg: #{$toast-header-background-color};
+ --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
+ // scss-docs-end toast-css-vars
- width: var(--#{$prefix}toast-max-width);
- max-width: 100%;
- @include font-size(var(--#{$prefix}toast-font-size));
- color: var(--#{$prefix}toast-color);
- pointer-events: auto;
- background-color: var(--#{$prefix}toast-bg);
- background-clip: padding-box;
- border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
- box-shadow: var(--#{$prefix}toast-box-shadow);
- @include border-radius(var(--#{$prefix}toast-border-radius));
+ width: var(--#{$prefix}toast-max-width);
+ max-width: 100%;
+ @include font-size(var(--#{$prefix}toast-font-size));
+ color: var(--#{$prefix}toast-color);
+ pointer-events: auto;
+ background-color: var(--#{$prefix}toast-bg);
+ background-clip: padding-box;
+ border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
+ box-shadow: var(--#{$prefix}toast-box-shadow);
+ @include border-radius(var(--#{$prefix}toast-border-radius));
- &.showing {
- opacity: 0;
- }
+ &.showing {
+ opacity: 0;
+ }
- &:not(.show) {
- display: none;
+ &:not(.show) {
+ display: none;
+ }
}
-}
-.toast-container {
- --#{$prefix}toast-zindex: #{$zindex-toast};
+ .toast-container {
+ --#{$prefix}toast-zindex: #{$zindex-toast};
- position: absolute;
- z-index: var(--#{$prefix}toast-zindex);
- width: max-content;
- max-width: 100%;
- pointer-events: none;
+ position: absolute;
+ z-index: var(--#{$prefix}toast-zindex);
+ width: max-content;
+ max-width: 100%;
+ pointer-events: none;
- > :not(:last-child) {
- margin-bottom: var(--#{$prefix}toast-spacing);
+ > :not(:last-child) {
+ margin-bottom: var(--#{$prefix}toast-spacing);
+ }
}
-}
-.toast-header {
- display: flex;
- align-items: center;
- padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
- color: var(--#{$prefix}toast-header-color);
- background-color: var(--#{$prefix}toast-header-bg);
- background-clip: padding-box;
- border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
- @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
+ .toast-header {
+ display: flex;
+ align-items: center;
+ padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
+ color: var(--#{$prefix}toast-header-color);
+ background-color: var(--#{$prefix}toast-header-bg);
+ background-clip: padding-box;
+ border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+ @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
- .btn-close {
- margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
- margin-left: var(--#{$prefix}toast-padding-x);
+ .btn-close {
+ margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
+ margin-left: var(--#{$prefix}toast-padding-x);
+ }
}
-}
-.toast-body {
- padding: var(--#{$prefix}toast-padding-x);
- word-wrap: break-word;
+ .toast-body {
+ padding: var(--#{$prefix}toast-padding-x);
+ word-wrap: break-word;
+ }
}
@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
-// Base class
-.tooltip {
- // scss-docs-start tooltip-css-vars
- --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
- --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
- --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
- --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
- --#{$prefix}tooltip-margin: #{$tooltip-margin};
- @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
- --#{$prefix}tooltip-color: #{$tooltip-color};
- --#{$prefix}tooltip-bg: #{$tooltip-bg};
- --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
- --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
- --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
- --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
- // scss-docs-end tooltip-css-vars
-
- z-index: var(--#{$prefix}tooltip-zindex);
- display: block;
- margin: var(--#{$prefix}tooltip-margin);
- @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
- // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
- // So reset our font and text properties to avoid inheriting weird values.
- @include reset-text();
- @include font-size(var(--#{$prefix}tooltip-font-size));
- // Allow breaking very long words so they don't overflow the tooltip's bounds
- word-wrap: break-word;
- opacity: 0;
-
- &.show { opacity: var(--#{$prefix}tooltip-opacity); }
-
- .tooltip-arrow {
+@layer components {
+ // Base class
+ .tooltip {
+ // scss-docs-start tooltip-css-vars
+ --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+ --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+ --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+ --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+ --#{$prefix}tooltip-margin: #{$tooltip-margin};
+ @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+ --#{$prefix}tooltip-color: #{$tooltip-color};
+ --#{$prefix}tooltip-bg: #{$tooltip-bg};
+ --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+ --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+ --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+ --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+ // scss-docs-end tooltip-css-vars
+
+ z-index: var(--#{$prefix}tooltip-zindex);
display: block;
- width: var(--#{$prefix}tooltip-arrow-width);
- height: var(--#{$prefix}tooltip-arrow-height);
-
- &::before {
- position: absolute;
- content: "";
- border-color: transparent;
- border-style: solid;
+ margin: var(--#{$prefix}tooltip-margin);
+ @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text();
+ @include font-size(var(--#{$prefix}tooltip-font-size));
+ // Allow breaking very long words so they don't overflow the tooltip's bounds
+ word-wrap: break-word;
+ opacity: 0;
+
+ &.show { opacity: var(--#{$prefix}tooltip-opacity); }
+
+ .tooltip-arrow {
+ display: block;
+ width: var(--#{$prefix}tooltip-arrow-width);
+ height: var(--#{$prefix}tooltip-arrow-height);
+
+ &::before {
+ position: absolute;
+ content: "";
+ border-color: transparent;
+ border-style: solid;
+ }
}
}
-}
-.bs-tooltip-top .tooltip-arrow {
- bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+ .bs-tooltip-top .tooltip-arrow {
+ bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
- &::before {
- top: -1px;
- border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
- border-top-color: var(--#{$prefix}tooltip-bg);
+ &::before {
+ top: -1px;
+ border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ border-top-color: var(--#{$prefix}tooltip-bg);
+ }
}
-}
-/* rtl:begin:ignore */
-.bs-tooltip-end .tooltip-arrow {
- left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
- width: var(--#{$prefix}tooltip-arrow-height);
- height: var(--#{$prefix}tooltip-arrow-width);
+ /* rtl:begin:ignore */
+ .bs-tooltip-end .tooltip-arrow {
+ left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+ width: var(--#{$prefix}tooltip-arrow-height);
+ height: var(--#{$prefix}tooltip-arrow-width);
- &::before {
- right: -1px;
- border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
- border-right-color: var(--#{$prefix}tooltip-bg);
+ &::before {
+ right: -1px;
+ border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ border-right-color: var(--#{$prefix}tooltip-bg);
+ }
}
-}
-/* rtl:end:ignore */
+ /* rtl:end:ignore */
-.bs-tooltip-bottom .tooltip-arrow {
- top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+ .bs-tooltip-bottom .tooltip-arrow {
+ top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
- &::before {
- bottom: -1px;
- border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
- border-bottom-color: var(--#{$prefix}tooltip-bg);
+ &::before {
+ bottom: -1px;
+ border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+ border-bottom-color: var(--#{$prefix}tooltip-bg);
+ }
}
-}
-/* rtl:begin:ignore */
-.bs-tooltip-start .tooltip-arrow {
- right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
- width: var(--#{$prefix}tooltip-arrow-height);
- height: var(--#{$prefix}tooltip-arrow-width);
+ /* rtl:begin:ignore */
+ .bs-tooltip-start .tooltip-arrow {
+ right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+ width: var(--#{$prefix}tooltip-arrow-height);
+ height: var(--#{$prefix}tooltip-arrow-width);
- &::before {
- left: -1px;
- border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
- border-left-color: var(--#{$prefix}tooltip-bg);
+ &::before {
+ left: -1px;
+ border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+ border-left-color: var(--#{$prefix}tooltip-bg);
+ }
}
-}
-/* rtl:end:ignore */
+ /* rtl:end:ignore */
-.bs-tooltip-auto {
- &[data-popper-placement^="top"] {
- @extend .bs-tooltip-top;
- }
- &[data-popper-placement^="right"] {
- @extend .bs-tooltip-end;
- }
- &[data-popper-placement^="bottom"] {
- @extend .bs-tooltip-bottom;
- }
- &[data-popper-placement^="left"] {
- @extend .bs-tooltip-start;
+ .bs-tooltip-auto {
+ &[data-popper-placement^="top"] {
+ @extend .bs-tooltip-top;
+ }
+ &[data-popper-placement^="right"] {
+ @extend .bs-tooltip-end;
+ }
+ &[data-popper-placement^="bottom"] {
+ @extend .bs-tooltip-bottom;
+ }
+ &[data-popper-placement^="left"] {
+ @extend .bs-tooltip-start;
+ }
}
-}
-// Wrapper for the tooltip content
-.tooltip-inner {
- max-width: var(--#{$prefix}tooltip-max-width);
- padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
- color: var(--#{$prefix}tooltip-color);
- text-align: center;
- background-color: var(--#{$prefix}tooltip-bg);
- @include border-radius(var(--#{$prefix}tooltip-border-radius));
+ // Wrapper for the tooltip content
+ .tooltip-inner {
+ max-width: var(--#{$prefix}tooltip-max-width);
+ padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+ color: var(--#{$prefix}tooltip-color);
+ text-align: center;
+ background-color: var(--#{$prefix}tooltip-bg);
+ @include border-radius(var(--#{$prefix}tooltip-border-radius));
+ }
}
+++ /dev/null
-@use "config" as *;
-@use "variables" as *;
-@use "mixins/lists" as *;
-@use "vendor/rfs" as *;
-
-//
-// Headings
-//
-// mdo-do: remove extend
-// .h1 {
-// @extend h1;
-// }
-
-// .h2 {
-// @extend h2;
-// }
-
-// .h3 {
-// @extend h3;
-// }
-
-// .h4 {
-// @extend h4;
-// }
-
-// .h5 {
-// @extend h5;
-// }
-
-// .h6 {
-// @extend h6;
-// }
-
-
-.lead {
- @include font-size($lead-font-size);
- font-weight: $lead-font-weight;
-}
-
-// Type display classes
-@each $display, $font-size in $display-font-sizes {
- .display-#{$display} {
- font-family: $display-font-family;
- font-style: $display-font-style;
- font-weight: $display-font-weight;
- line-height: $display-line-height;
- @include font-size($font-size);
- }
-}
-
-//
-// Emphasis
-//
-.small {
- // @extend small;
-}
-
-.mark {
- // @extend mark;
-}
-
-//
-// Lists
-//
-
-.list-unstyled {
- @include list-unstyled();
-}
-
-// Inline turns list items into inline-block
-.list-inline {
- @include list-unstyled();
-}
-.list-inline-item {
- display: inline-block;
-
- &:not(:last-child) {
- margin-right: $list-inline-padding;
- }
-}
-
-
-//
-// Misc
-//
-
-// Builds on `abbr`
-.initialism {
- @include font-size($initialism-font-size);
- text-transform: uppercase;
-}
-
-// Blockquotes
-.blockquote {
- margin-bottom: $blockquote-margin-y;
- @include font-size($blockquote-font-size);
-
- > :last-child {
- margin-bottom: 0;
- }
-}
-
-.blockquote-footer {
- margin-top: -$blockquote-margin-y;
- margin-bottom: $blockquote-margin-y;
- @include font-size($blockquote-footer-font-size);
- color: $blockquote-footer-color;
-
- &::before {
- content: "\2014\00A0"; // em dash, nbsp
- }
-}
@use "functions" as *;
@use "maps" as *;
-// Utilities
-
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map.merge(
-// @import "mixins/banner";
-// @include bsBanner("");
-
+/*!
+ * Bootstrap v6.0.0-dev (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
// scss-docs-start import-stack
-// Configuration
-// @use "config" as *;
+// Global CSS variables, layer definitions, and configuration
+@use "root";
-// @import "functions";
-// @import "colors";
-// @import "variables";
-// @import "variables-dark";
-@use "maps";
-@use "mixins";
-// @use "utilities";
+// Reboot & Content
+@use "content";
-// Layout & components
-@use "root";
-@use "reboot";
-@use "type";
-@use "images";
-// @import "containers";
-// @import "grid";
+// Layout
@use "layout";
-@use "tables";
+
+// Forms
@use "forms";
+
+// Components
+@use "accordion";
+@use "alert";
+@use "badge";
+@use "breadcrumb";
@use "buttons";
-@use "transitions";
-@use "dropdown";
@use "button-group";
+@use "card";
+@use "carousel";
+@use "close";
+@use "dropdown";
+@use "list-group";
+@use "modal";
@use "nav";
@use "navbar";
-@use "card";
-@use "accordion";
-@use "breadcrumb";
+@use "offcanvas";
@use "pagination";
-@use "badge";
-@use "alert";
+@use "placeholders";
+@use "popover";
@use "progress";
-@use "list-group";
-@use "close";
+@use "spinners";
@use "toasts";
-@use "modal";
@use "tooltip";
-@use "popover";
-@use "carousel";
-@use "spinners";
-@use "offcanvas";
-@use "placeholders";
+@use "transitions";
// Helpers
@use "helpers";
--- /dev/null
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/image" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+
+@layer content {
+ // Responsive images (ensure images don't scale beyond their parents)
+ //
+ // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+ // We previously tried the "images are responsive by default" approach in Bootstrap v2,
+ // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+ // which weren't expecting the images within themselves to be involuntarily resized.
+ // See also https://github.com/twbs/bootstrap/issues/18178
+ .img-fluid {
+ @include img-fluid();
+ }
+
+
+ // Image thumbnails
+ .img-thumbnail {
+ padding: $thumbnail-padding;
+ background-color: $thumbnail-bg;
+ border: $thumbnail-border-width solid $thumbnail-border-color;
+ @include border-radius($thumbnail-border-radius);
+ @include box-shadow($thumbnail-box-shadow);
+
+ // Keep them at most 100% wide
+ @include img-fluid();
+ }
+
+ //
+ // Figures
+ //
+
+ .figure {
+ // Ensures the caption's text aligns with the image.
+ display: inline-block;
+ }
+
+ .figure-img {
+ margin-bottom: $spacer * .5;
+ line-height: 1;
+ }
+
+ .figure-caption {
+ @include font-size($figure-caption-font-size);
+ color: $figure-caption-color;
+ }
+}
--- /dev/null
+@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
+
+@layer reboot {
+ // Reboot
+ //
+ // Normalization of HTML elements, manually forked from Normalize.css to remove
+ // styles targeting irrelevant browsers while applying new styles.
+ //
+ // Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+ // Document
+ //
+ // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+
+ *,
+ *::before,
+ *::after {
+ box-sizing: border-box;
+ }
+
+
+ // Root
+ //
+ // Ability to the value of the root font sizes, affecting the value of `rem`.
+ // null by default, thus nothing is generated.
+
+ :root {
+ @if $font-size-root != null {
+ @include font-size(var(--#{$prefix}root-font-size));
+ }
+
+ @if $enable-smooth-scroll {
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
+ }
+ }
+
+
+ // Body
+ //
+ // 1. Remove the margin in all browsers.
+ // 2. As a best practice, apply a default `background-color`.
+ // 3. Prevent adjustments of font size after orientation changes in iOS.
+ // 4. Change the default tap highlight to be completely transparent in iOS.
+
+ // scss-docs-start reboot-body-rules
+ body {
+ margin: 0; // 1
+ font-family: var(--#{$prefix}body-font-family);
+ @include font-size(var(--#{$prefix}body-font-size));
+ font-weight: var(--#{$prefix}body-font-weight);
+ line-height: var(--#{$prefix}body-line-height);
+ color: var(--#{$prefix}body-color);
+ text-align: var(--#{$prefix}body-text-align);
+ background-color: var(--#{$prefix}body-bg); // 2
+ -webkit-text-size-adjust: 100%; // 3
+ -webkit-tap-highlight-color: rgba($black, 0); // 4
+ }
+ // scss-docs-end reboot-body-rules
+
+
+ // Content grouping
+ //
+ // 1. Reset Firefox's gray color
+
+ hr {
+ margin: $hr-margin-y 0;
+ color: $hr-color; // 1
+ border: 0;
+ border-top: $hr-border-width solid $hr-border-color;
+ opacity: $hr-opacity;
+ }
+
+
+ // Typography
+ //
+ // 1. Remove top margins from headings
+ // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+ // margin for easier control within type scales as it avoids margin collapsing.
+
+ %heading {
+ margin-top: 0; // 1
+ margin-bottom: $headings-margin-bottom;
+ font-family: $headings-font-family;
+ font-style: $headings-font-style;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ color: var(--#{$prefix}heading-color);
+ }
+
+ h1 {
+ @extend %heading;
+ @include font-size($h1-font-size);
+ }
+
+ h2 {
+ @extend %heading;
+ @include font-size($h2-font-size);
+ }
+
+ h3 {
+ @extend %heading;
+ @include font-size($h3-font-size);
+ }
+
+ h4 {
+ @extend %heading;
+ @include font-size($h4-font-size);
+ }
+
+ h5 {
+ @extend %heading;
+ @include font-size($h5-font-size);
+ }
+
+ h6 {
+ @extend %heading;
+ @include font-size($h6-font-size);
+ }
+
+
+ // Reset margins on paragraphs
+ //
+ // Similarly, the top margin on `<p>`s get reset. However, we also reset the
+ // bottom margin to use `rem` units instead of `em`.
+
+ p {
+ margin-top: 0;
+ margin-bottom: $paragraph-margin-bottom;
+ }
+
+
+ // Abbreviations
+ //
+ // 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+ // 2. Add explicit cursor to indicate changed behavior.
+ // 3. Prevent the text-decoration to be skipped.
+
+ abbr[title] {
+ text-decoration: underline dotted; // 1
+ cursor: help; // 2
+ text-decoration-skip-ink: none; // 3
+ }
+
+
+ // Address
+
+ address {
+ margin-bottom: 1rem;
+ font-style: normal;
+ line-height: inherit;
+ }
+
+
+ // Lists
+
+ ol,
+ ul {
+ padding-left: 2rem;
+ }
+
+ ol,
+ ul,
+ dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+ }
+
+ ol ol,
+ ul ul,
+ ol ul,
+ ul ol {
+ margin-bottom: 0;
+ }
+
+ dt {
+ font-weight: $dt-font-weight;
+ }
+
+ // 1. Undo browser default
+
+ dd {
+ margin-bottom: .5rem;
+ margin-left: 0; // 1
+ }
+
+
+ // Blockquote
+
+ blockquote {
+ margin: 0 0 1rem;
+ }
+
+
+ // Strong
+ //
+ // Add the correct font weight in Chrome, Edge, and Safari
+
+ b,
+ strong {
+ font-weight: $font-weight-bolder;
+ }
+
+
+ // Small
+ //
+ // Add the correct font size in all browsers
+
+ small {
+ @include font-size($small-font-size);
+ }
+
+
+ // Mark
+
+ mark {
+ padding: $mark-padding;
+ color: var(--#{$prefix}highlight-color);
+ background-color: var(--#{$prefix}highlight-bg);
+ }
+
+
+ // Sub and Sup
+ //
+ // Prevent `sub` and `sup` elements from affecting the line height in
+ // all browsers.
+
+ sub,
+ sup {
+ position: relative;
+ @include font-size($sub-sup-font-size);
+ line-height: 0;
+ vertical-align: baseline;
+ }
+
+ sub { bottom: -.25em; }
+ sup { top: -.5em; }
+
+
+ // Links
+
+ a {
+ color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
+ text-decoration: $link-decoration;
+
+ &:hover {
+ --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
+ text-decoration: $link-hover-decoration;
+ }
+ }
+
+ // And undo these styles for placeholder links/named anchors (without href).
+ // It would be more straightforward to just use a[href] in previous block, but that
+ // causes specificity issues in many other styles that are too complex to fix.
+ // See https://github.com/twbs/bootstrap/issues/19402
+
+ a:not([href]):not([class]) {
+ &,
+ &:hover {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+
+
+ // Code
+
+ pre,
+ code,
+ kbd,
+ samp {
+ font-family: $font-family-code;
+ @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+ }
+
+ // 1. Remove browser default top margin
+ // 2. Reset browser default of `1em` to use `rem`s
+ // 3. Don't allow content to break outside
+
+ pre {
+ display: block;
+ margin-top: 0; // 1
+ margin-bottom: 1rem; // 2
+ overflow: auto; // 3
+ @include font-size($code-font-size);
+ color: $pre-color;
+
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ @include font-size(inherit);
+ color: inherit;
+ word-break: normal;
+ }
+ }
+
+ code {
+ @include font-size($code-font-size);
+ color: var(--#{$prefix}code-color);
+ word-wrap: break-word;
+
+ // Streamline the style when inside anchors to avoid broken underline and more
+ a > & {
+ color: inherit;
+ }
+ }
+
+ kbd {
+ padding: $kbd-padding-y $kbd-padding-x;
+ @include font-size($kbd-font-size);
+ color: $kbd-color;
+ background-color: $kbd-bg;
+ @include border-radius($border-radius-sm);
+
+ kbd {
+ padding: 0;
+ @include font-size(1em);
+ font-weight: $nested-kbd-font-weight;
+ }
+ }
+
+
+ // Figures
+ //
+ // Apply a consistent margin strategy (matches our type styles).
+
+ figure {
+ margin: 0 0 1rem;
+ }
+
+
+ // Images and content
+
+ img,
+ svg {
+ vertical-align: middle;
+ }
+
+
+ // Tables
+ //
+ // Prevent double borders
+
+ table {
+ caption-side: bottom;
+ border-collapse: collapse;
+ }
+
+ caption {
+ padding-top: $table-cell-padding-y;
+ padding-bottom: $table-cell-padding-y;
+ color: $table-caption-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
+
+ th {
+ font-weight: $table-th-font-weight; // 1
+ text-align: inherit; // 2
+ text-align: -webkit-match-parent; // 3
+ }
+
+ thead,
+ tbody,
+ tfoot,
+ tr,
+ td,
+ th {
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+ }
+
+
+ // Forms
+ //
+ // 1. Allow labels to use `margin` for spacing.
+
+ label {
+ display: inline-block; // 1
+ }
+
+ // Remove the default `border-radius` that macOS Chrome adds.
+ // See https://github.com/twbs/bootstrap/issues/24093
+
+ button {
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: 0;
+ }
+
+ // Explicitly remove focus outline in Chromium when it shouldn't be
+ // visible (e.g. as result of mouse click or touch tap). It already
+ // should be doing this automatically, but seems to currently be
+ // confused and applies its very visible two-tone outline anyway.
+
+ button:focus:not(:focus-visible) {
+ outline: 0;
+ }
+
+ // 1. Remove the margin in Firefox and Safari
+
+ input,
+ button,
+ select,
+ optgroup,
+ textarea {
+ margin: 0; // 1
+ font-family: inherit;
+ @include font-size(inherit);
+ line-height: inherit;
+ }
+
+ // Remove the inheritance of text transform in Firefox
+ button,
+ select {
+ text-transform: none;
+ }
+ // Set the cursor for non-`<button>` buttons
+ //
+ // Details at https://github.com/twbs/bootstrap/pull/30562
+ [role="button"] {
+ cursor: pointer;
+ }
+
+ select {
+ // Remove the inheritance of word-wrap in Safari.
+ // See https://github.com/twbs/bootstrap/issues/24990
+ word-wrap: normal;
+
+ // Undo the opacity change from Chrome
+ &:disabled {
+ opacity: 1;
+ }
+ }
+
+ // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
+ // See https://stackoverflow.com/a/54997118
+
+ [list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+ display: none !important;
+ }
+
+ // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ // controls in Android 4.
+ // 2. Correct the inability to style clickable types in iOS and Safari.
+ // 3. Opinionated: add "hand" cursor to non-disabled button elements.
+
+ button,
+ [type="button"], // 1
+ [type="reset"],
+ [type="submit"] {
+ -webkit-appearance: button; // 2
+
+ @if $enable-button-pointers {
+ &:not(:disabled) {
+ cursor: pointer; // 3
+ }
+ }
+ }
+
+ // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+
+ ::-moz-focus-inner {
+ padding: 0;
+ border-style: none;
+ }
+
+ // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
+
+ textarea {
+ resize: vertical; // 1
+ }
+
+ // 1. Browsers set a default `min-width: min-content;` on fieldsets,
+ // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+ // So we reset that to ensure fieldsets behave more like a standard block element.
+ // See https://github.com/twbs/bootstrap/issues/12359
+ // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+ // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
+
+ fieldset {
+ min-width: 0; // 1
+ padding: 0; // 2
+ margin: 0; // 2
+ border: 0; // 2
+ }
+
+ // 1. By using `float: left`, the legend will behave like a block element.
+ // This way the border of a fieldset wraps around the legend if present.
+ // 2. Fix wrapping bug.
+ // See https://github.com/twbs/bootstrap/issues/29712
+
+ legend {
+ float: left; // 1
+ width: 100%;
+ padding: 0;
+ margin-bottom: $legend-margin-bottom;
+ font-weight: $legend-font-weight;
+ line-height: inherit;
+ @include font-size($legend-font-size);
+
+ + * {
+ clear: left; // 2
+ }
+ }
+
+ // Fix height of inputs with a type of datetime-local, date, month, week, or time
+ // See https://github.com/twbs/bootstrap/issues/18842
+
+ ::-webkit-datetime-edit-fields-wrapper,
+ ::-webkit-datetime-edit-text,
+ ::-webkit-datetime-edit-minute,
+ ::-webkit-datetime-edit-hour-field,
+ ::-webkit-datetime-edit-day-field,
+ ::-webkit-datetime-edit-month-field,
+ ::-webkit-datetime-edit-year-field {
+ padding: 0;
+ }
+
+ ::-webkit-inner-spin-button {
+ height: auto;
+ }
+
+ // 1. This overrides the extra rounded corners on search inputs in iOS so that our
+ // `.form-control` class can properly style them. Note that this cannot simply
+ // be added to `.form-control` as it's not specific enough. For details, see
+ // https://github.com/twbs/bootstrap/issues/11586.
+ // 2. Correct the outline style in Safari.
+
+ [type="search"] {
+ -webkit-appearance: textfield; // 1
+ outline-offset: -2px; // 2
+ }
+
+ // 1. A few input types should stay LTR
+ // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+ // 2. RTL only output
+ // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+ /* rtl:raw:
+ [type="tel"],
+ [type="url"],
+ [type="email"],
+ [type="number"] {
+ direction: ltr;
+ }
+ */
+
+ // Remove the inner padding in Chrome and Safari on macOS.
+
+ ::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+
+ // Remove padding around color pickers in webkit browsers
+
+ ::-webkit-color-swatch-wrapper {
+ padding: 0;
+ }
+
+
+ // 1. Inherit font family and line height for file input buttons
+ // 2. Correct the inability to style clickable types in iOS and Safari.
+
+ ::file-selector-button {
+ font: inherit; // 1
+ -webkit-appearance: button; // 2
+ }
+
+ // Correct element displays
+
+ output {
+ display: inline-block;
+ }
+
+ // Remove border from iframe
+
+ iframe {
+ border: 0;
+ }
+
+ // Summary
+ //
+ // 1. Add the correct display in all browsers
+
+ summary {
+ display: list-item; // 1
+ cursor: pointer;
+ }
+
+
+ // Progress
+ //
+ // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+ progress {
+ vertical-align: baseline;
+ }
+
+
+ // Hidden attribute
+ //
+ // Always hide an element with the `hidden` HTML attribute.
+
+ [hidden] {
+ display: none !important;
+ }
+}
--- /dev/null
+@use "sass:map";
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+@use "../functions" as *;
+@use "../layout/breakpoints" as *;
+
+@layer content {
+ // 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
+
+ //
+ // Basic Bootstrap table
+ //
+
+ .table {
+ // Reset needed for nesting tables
+ --#{$prefix}table-color-type: initial;
+ --#{$prefix}table-bg-type: initial;
+ --#{$prefix}table-color-state: initial;
+ --#{$prefix}table-bg-state: initial;
+ // End of reset
+ --#{$prefix}table-color: #{$table-color};
+ --#{$prefix}table-bg: #{$table-bg};
+ --#{$prefix}table-border-color: #{$table-border-color};
+ --#{$prefix}table-accent-bg: #{$table-accent-bg};
+ --#{$prefix}table-striped-color: #{$table-striped-color};
+ --#{$prefix}table-striped-bg: #{$table-striped-bg};
+ --#{$prefix}table-active-color: #{$table-active-color};
+ --#{$prefix}table-active-bg: #{$table-active-bg};
+ --#{$prefix}table-hover-color: #{$table-hover-color};
+ --#{$prefix}table-hover-bg: #{$table-hover-bg};
+
+ width: 100%;
+ margin-bottom: $spacer;
+ vertical-align: $table-cell-vertical-align;
+ border-color: var(--#{$prefix}table-border-color);
+
+ // Target th & td
+ // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+ // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+ // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y $table-cell-padding-x;
+ // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
+ color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+ background-color: var(--#{$prefix}table-bg);
+ border-bottom-width: $table-border-width;
+ box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
+ }
+
+ > tbody {
+ vertical-align: inherit;
+ }
+
+ > thead {
+ vertical-align: bottom;
+ }
+ }
+
+ .table-group-divider {
+ border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
+ }
+
+ //
+ // Change placement of captions with a class
+ //
+
+ .caption-top {
+ caption-side: top;
+ }
+
+
+ //
+ // Condensed table w/ half padding
+ //
+
+ .table-sm {
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+ }
+ }
+
+
+ // Border versions
+ //
+ // Add or remove borders all around the table and between all the columns.
+ //
+ // When borders are added on all sides of the cells, the corners can render odd when
+ // these borders do not have the same color or if they are semi-transparent.
+ // Therefore we add top and border bottoms to the `tr`s and left and right borders
+ // to the `td`s or `th`s
+
+ .table-bordered {
+ > :not(caption) > * {
+ border-width: $table-border-width 0;
+
+ // stylelint-disable-next-line selector-max-universal
+ > * {
+ border-width: 0 $table-border-width;
+ }
+ }
+ }
+
+ .table-borderless {
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ border-bottom-width: 0;
+ }
+
+ > :not(:first-child) {
+ border-top-width: 0;
+ }
+ }
+
+ // Zebra-striping
+ //
+ // Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+ // For rows
+ .table-striped {
+ > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
+ --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+ --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+ }
+ }
+
+ // For columns
+ .table-striped-columns {
+ > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+ --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+ --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+ }
+ }
+
+ // Active table
+ //
+ // The `.table-active` class can be added to highlight rows or cells
+
+ .table-active {
+ --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+ --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+ }
+
+ // Hover effect
+ //
+ // Placed here since it has to come after the potential zebra striping
+
+ .table-hover {
+ > tbody > tr:hover > * {
+ --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+ --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
+ }
+ }
+
+
+ // Table variants
+ //
+ // Table variants set the table cell backgrounds, border colors
+ // and the colors of the striped, hovered & active tables
+
+ @each $color, $value in $table-variants {
+ @include table-variant($color, $value);
+ }
+
+ // Responsive tables
+ //
+ // Generate series of `.table-responsive-*` classes for configuring the screen
+ // size of where your table will overflow.
+
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @include media-breakpoint-down($breakpoint) {
+ .table-responsive#{$infix} {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+ }
+ }
+}
--- /dev/null
+@use "../config" as *;
+@use "../variables" as *;
+@use "../mixins/lists" as *;
+@use "../vendor/rfs" as *;
+
+@layer content {
+ //
+ // Headings
+ //
+ // mdo-do: remove extend
+ // .h1 {
+ // @extend h1;
+ // }
+
+ // .h2 {
+ // @extend h2;
+ // }
+
+ // .h3 {
+ // @extend h3;
+ // }
+
+ // .h4 {
+ // @extend h4;
+ // }
+
+ // .h5 {
+ // @extend h5;
+ // }
+
+ // .h6 {
+ // @extend h6;
+ // }
+
+
+ .lead {
+ @include font-size($lead-font-size);
+ font-weight: $lead-font-weight;
+ }
+
+ // Type display classes
+ @each $display, $font-size in $display-font-sizes {
+ .display-#{$display} {
+ font-family: $display-font-family;
+ font-style: $display-font-style;
+ font-weight: $display-font-weight;
+ line-height: $display-line-height;
+ @include font-size($font-size);
+ }
+ }
+
+ //
+ // Emphasis
+ //
+ .small {
+ // @extend small;
+ }
+
+ .mark {
+ // @extend mark;
+ }
+
+ //
+ // Lists
+ //
+
+ .list-unstyled {
+ @include list-unstyled();
+ }
+
+ // Inline turns list items into inline-block
+ .list-inline {
+ @include list-unstyled();
+ }
+ .list-inline-item {
+ display: inline-block;
+
+ &:not(:last-child) {
+ margin-right: $list-inline-padding;
+ }
+ }
+
+
+ //
+ // Misc
+ //
+
+ // Builds on `abbr`
+ .initialism {
+ @include font-size($initialism-font-size);
+ text-transform: uppercase;
+ }
+
+ // Blockquotes
+ .blockquote {
+ margin-bottom: $blockquote-margin-y;
+ @include font-size($blockquote-font-size);
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .blockquote-footer {
+ margin-top: -$blockquote-margin-y;
+ margin-bottom: $blockquote-margin-y;
+ @include font-size($blockquote-footer-font-size);
+ color: $blockquote-footer-color;
+
+ &::before {
+ content: "\2014\00A0"; // em dash, nbsp
+ }
+ }
+}
--- /dev/null
+@forward "reboot";
+@forward "type";
+@forward "tables";
+@forward "images";
@use "../mixins/border-radius" as *;
@use "../mixins/transition" as *;
-.form-floating {
- position: relative;
+@layer forms {
+ .form-floating {
+ position: relative;
- > .form-control,
- > .form-control-plaintext,
- > .form-select {
- height: $form-floating-height;
- min-height: $form-floating-height;
- line-height: $form-floating-line-height;
- }
+ > .form-control,
+ > .form-control-plaintext,
+ > .form-select {
+ height: $form-floating-height;
+ min-height: $form-floating-height;
+ line-height: $form-floating-line-height;
+ }
- > label {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 2;
- max-width: 100%;
- height: 100%; // allow textareas
- padding: $form-floating-padding-y $form-floating-padding-x;
- overflow: hidden;
- color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
- text-align: start;
- text-overflow: ellipsis;
- white-space: nowrap;
- pointer-events: none;
- border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
- transform-origin: 0 0;
- @include transition($form-floating-transition);
- }
+ > label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ max-width: 100%;
+ height: 100%; // allow textareas
+ padding: $form-floating-padding-y $form-floating-padding-x;
+ overflow: hidden;
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+ text-align: start;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ pointer-events: none;
+ border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+ transform-origin: 0 0;
+ @include transition($form-floating-transition);
+ }
- > .form-control,
- > .form-control-plaintext {
- padding: $form-floating-padding-y $form-floating-padding-x;
+ > .form-control,
+ > .form-control-plaintext {
+ padding: $form-floating-padding-y $form-floating-padding-x;
- &::placeholder {
- color: transparent;
- }
+ &::placeholder {
+ color: transparent;
+ }
- &:focus,
- &:not(:placeholder-shown) {
- padding-top: $form-floating-input-padding-t;
- padding-bottom: $form-floating-input-padding-b;
+ &:focus,
+ &:not(:placeholder-shown) {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+ &:-webkit-autofill {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
}
- // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
- &:-webkit-autofill {
+
+ > .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
+ padding-left: $form-floating-padding-x;
}
- }
- > .form-select {
- padding-top: $form-floating-input-padding-t;
- padding-bottom: $form-floating-input-padding-b;
- padding-left: $form-floating-padding-x;
- }
-
- > .form-control:focus,
- > .form-control:not(:placeholder-shown),
- > .form-control-plaintext,
- > .form-select {
- ~ label {
- transform: $form-floating-label-transform;
+ > .form-control:focus,
+ > .form-control:not(:placeholder-shown),
+ > .form-control-plaintext,
+ > .form-select {
+ ~ label {
+ transform: $form-floating-label-transform;
+ }
}
- }
- // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
- > .form-control:-webkit-autofill {
- ~ label {
- transform: $form-floating-label-transform;
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+ > .form-control:-webkit-autofill {
+ ~ label {
+ transform: $form-floating-label-transform;
+ }
}
- }
- > textarea:focus,
- > textarea:not(:placeholder-shown) {
- ~ label::after {
- position: absolute;
- inset: $form-floating-padding-y ($form-floating-padding-x * .5);
- z-index: -1;
- height: $form-floating-label-height;
- content: "";
- background-color: $input-bg;
- @include border-radius($input-border-radius);
+ > textarea:focus,
+ > textarea:not(:placeholder-shown) {
+ ~ label::after {
+ position: absolute;
+ inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+ z-index: -1;
+ height: $form-floating-label-height;
+ content: "";
+ background-color: $input-bg;
+ @include border-radius($input-border-radius);
+ }
+ }
+ > textarea:disabled ~ label::after {
+ background-color: $input-disabled-bg;
}
- }
- > textarea:disabled ~ label::after {
- background-color: $input-disabled-bg;
- }
- > .form-control-plaintext {
- ~ label {
- border-width: $input-border-width 0; // Required to properly position label text - as explained above
+ > .form-control-plaintext {
+ ~ label {
+ border-width: $input-border-width 0; // Required to properly position label text - as explained above
+ }
}
- }
- > :disabled ~ label,
- > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
- color: $form-floating-label-disabled-color;
+ > :disabled ~ label,
+ > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
+ color: $form-floating-label-disabled-color;
+ }
}
}
@use "../mixins/transition" as *;
@use "../mixins/color-mode" as *;
-//
-// Check/radio
-//
+@layer forms {
+ //
+ // Check/radio
+ //
-.form-check {
- display: block;
- min-height: $form-check-min-height;
- padding-left: $form-check-padding-start;
- margin-bottom: $form-check-margin-bottom;
+ .form-check {
+ display: block;
+ min-height: $form-check-min-height;
+ padding-left: $form-check-padding-start;
+ margin-bottom: $form-check-margin-bottom;
- .form-check-input {
- float: left;
- margin-left: $form-check-padding-start * -1;
+ .form-check-input {
+ float: left;
+ margin-left: $form-check-padding-start * -1;
+ }
}
-}
-.form-check-reverse {
- padding-right: $form-check-padding-start;
- padding-left: 0;
- text-align: right;
+ .form-check-reverse {
+ padding-right: $form-check-padding-start;
+ padding-left: 0;
+ text-align: right;
- .form-check-input {
- float: right;
- margin-right: $form-check-padding-start * -1;
- margin-left: 0;
+ .form-check-input {
+ float: right;
+ margin-right: $form-check-padding-start * -1;
+ margin-left: 0;
+ }
}
-}
-.form-check-input {
- --#{$prefix}form-check-bg: #{$form-check-input-bg};
-
- flex-shrink: 0;
- width: $form-check-input-width;
- height: $form-check-input-width;
- margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
- vertical-align: top;
- appearance: none;
- background-color: var(--#{$prefix}form-check-bg);
- background-image: var(--#{$prefix}form-check-bg-image);
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
- border: $form-check-input-border;
- print-color-adjust: exact; // Keep themed appearance for print
- @include transition($form-check-transition);
-
- &[type="checkbox"] {
- @include border-radius($form-check-input-border-radius);
- }
+ .form-check-input {
+ --#{$prefix}form-check-bg: #{$form-check-input-bg};
+
+ flex-shrink: 0;
+ width: $form-check-input-width;
+ height: $form-check-input-width;
+ margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+ vertical-align: top;
+ appearance: none;
+ background-color: var(--#{$prefix}form-check-bg);
+ background-image: var(--#{$prefix}form-check-bg-image);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ border: $form-check-input-border;
+ print-color-adjust: exact; // Keep themed appearance for print
+ @include transition($form-check-transition);
- &[type="radio"] {
- // stylelint-disable-next-line property-disallowed-list
- border-radius: $form-check-radio-border-radius;
- }
+ &[type="checkbox"] {
+ @include border-radius($form-check-input-border-radius);
+ }
- &:active {
- filter: $form-check-input-active-filter;
- }
+ &[type="radio"] {
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: $form-check-radio-border-radius;
+ }
- &:focus {
- border-color: $form-check-input-focus-border;
- outline: 0;
- box-shadow: $form-check-input-focus-box-shadow;
- }
+ &:active {
+ filter: $form-check-input-active-filter;
+ }
- &:checked {
- background-color: $form-check-input-checked-bg-color;
- border-color: $form-check-input-checked-border-color;
+ &:focus {
+ border-color: $form-check-input-focus-border;
+ outline: 0;
+ box-shadow: $form-check-input-focus-box-shadow;
+ }
- &[type="checkbox"] {
- @if $enable-gradients {
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
- } @else {
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+ &:checked {
+ background-color: $form-check-input-checked-bg-color;
+ border-color: $form-check-input-checked-border-color;
+
+ &[type="checkbox"] {
+ @if $enable-gradients {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
+ } @else {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+ }
+ }
+
+ &[type="radio"] {
+ @if $enable-gradients {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+ } @else {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+ }
}
}
- &[type="radio"] {
+ &[type="checkbox"]:indeterminate {
+ background-color: $form-check-input-indeterminate-bg-color;
+ border-color: $form-check-input-indeterminate-border-color;
+
@if $enable-gradients {
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
} @else {
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
}
}
- }
- &[type="checkbox"]:indeterminate {
- background-color: $form-check-input-indeterminate-bg-color;
- border-color: $form-check-input-indeterminate-border-color;
+ &:disabled {
+ pointer-events: none;
+ filter: none;
+ opacity: $form-check-input-disabled-opacity;
+ }
- @if $enable-gradients {
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
- } @else {
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
+ // Use disabled attribute in addition of :disabled pseudo-class
+ // See: https://github.com/twbs/bootstrap/issues/28247
+ &[disabled],
+ &:disabled {
+ ~ .form-check-label {
+ cursor: default;
+ opacity: $form-check-label-disabled-opacity;
+ }
}
}
- &:disabled {
- pointer-events: none;
- filter: none;
- opacity: $form-check-input-disabled-opacity;
+ .form-check-label {
+ color: $form-check-label-color;
+ cursor: $form-check-label-cursor;
}
- // Use disabled attribute in addition of :disabled pseudo-class
- // See: https://github.com/twbs/bootstrap/issues/28247
- &[disabled],
- &:disabled {
- ~ .form-check-label {
- cursor: default;
- opacity: $form-check-label-disabled-opacity;
- }
- }
-}
+ //
+ // Switch
+ //
-.form-check-label {
- color: $form-check-label-color;
- cursor: $form-check-label-cursor;
-}
+ .form-switch {
+ padding-left: $form-switch-padding-start;
-//
-// Switch
-//
+ .form-check-input {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
-.form-switch {
- padding-left: $form-switch-padding-start;
+ width: $form-switch-width;
+ margin-left: $form-switch-padding-start * -1;
+ background-image: var(--#{$prefix}form-switch-bg);
+ background-position: left center;
+ @include border-radius($form-switch-border-radius, 0);
+ @include transition($form-switch-transition);
- .form-check-input {
- --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+ &:focus {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
+ }
- width: $form-switch-width;
- margin-left: $form-switch-padding-start * -1;
- background-image: var(--#{$prefix}form-switch-bg);
- background-position: left center;
- @include border-radius($form-switch-border-radius, 0);
- @include transition($form-switch-transition);
+ &:checked {
+ background-position: $form-switch-checked-bg-position;
- &:focus {
- --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
+ @if $enable-gradients {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
+ } @else {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+ }
+ }
}
- &:checked {
- background-position: $form-switch-checked-bg-position;
+ &.form-check-reverse {
+ padding-right: $form-switch-padding-start;
+ padding-left: 0;
- @if $enable-gradients {
- --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
- } @else {
- --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+ .form-check-input {
+ margin-right: $form-switch-padding-start * -1;
+ margin-left: 0;
}
}
}
- &.form-check-reverse {
- padding-right: $form-switch-padding-start;
- padding-left: 0;
-
- .form-check-input {
- margin-right: $form-switch-padding-start * -1;
- margin-left: 0;
- }
+ .form-check-inline {
+ display: inline-block;
+ margin-right: $form-check-inline-margin-end;
}
-}
-.form-check-inline {
- display: inline-block;
- margin-right: $form-check-inline-margin-end;
-}
-
-.btn-check {
- position: absolute;
- clip: rect(0, 0, 0, 0);
- pointer-events: none;
+ .btn-check {
+ position: absolute;
+ clip: rect(0, 0, 0, 0);
+ pointer-events: none;
- &[disabled],
- &:disabled {
- + .btn {
- pointer-events: none;
- filter: none;
- opacity: $form-check-btn-check-disabled-opacity;
+ &[disabled],
+ &:disabled {
+ + .btn {
+ pointer-events: none;
+ filter: none;
+ opacity: $form-check-btn-check-disabled-opacity;
+ }
}
}
-}
-@if $enable-dark-mode {
- @include color-mode(dark) {
- .form-switch .form-check-input:not(:checked):not(:focus) {
- --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+ @if $enable-dark-mode {
+ @include color-mode(dark) {
+ .form-switch .form-check-input:not(:checked):not(:focus) {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+ }
}
}
}
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
+
//
// General form controls (plus a few specific high-level interventions)
//
-.form-control {
- display: block;
- width: 100%;
- padding: $input-padding-y $input-padding-x;
- font-family: $input-font-family;
- @include font-size($input-font-size);
- font-weight: $input-font-weight;
- line-height: $input-line-height;
- color: $input-color;
- appearance: none; // Fix appearance for date inputs in Safari
- background-color: $input-bg;
- background-clip: padding-box;
- 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 box-shadow($input-box-shadow);
- @include transition($input-transition);
-
- &[type="file"] {
- overflow: hidden; // prevent pseudo element button overlap
+@layer forms {
+ .form-control {
+ display: block;
+ width: 100%;
+ padding: $input-padding-y $input-padding-x;
+ font-family: $input-font-family;
+ @include font-size($input-font-size);
+ font-weight: $input-font-weight;
+ line-height: $input-line-height;
+ color: $input-color;
+ appearance: none; // Fix appearance for date inputs in Safari
+ background-color: $input-bg;
+ background-clip: padding-box;
+ 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 box-shadow($input-box-shadow);
+ @include transition($input-transition);
+
+ &[type="file"] {
+ overflow: hidden; // prevent pseudo element button overlap
+
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
+ }
- &:not(:disabled):not([readonly]) {
- cursor: pointer;
+ // Customize the `:focus` state to imitate native WebKit styles.
+ &:focus {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ @if $enable-shadows {
+ @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $input-focus-box-shadow;
+ }
}
- }
- // Customize the `:focus` state to imitate native WebKit styles.
- &:focus {
- color: $input-focus-color;
- background-color: $input-focus-bg;
- border-color: $input-focus-border-color;
- outline: 0;
- @if $enable-shadows {
- @include box-shadow($input-box-shadow, $input-focus-box-shadow);
- } @else {
- // Avoid using mixin so we can pass custom focus shadow properly
- box-shadow: $input-focus-box-shadow;
+ &::-webkit-date-and-time-value {
+ // On Android Chrome, form-control's "width: 100%" makes the input width too small
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+ //
+ // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
+ // Tested under iOS 16.2 / Safari 16.2
+ min-width: 85px; // Seems to be a good minimum safe width
+
+ // Add some height to date inputs on iOS
+ // https://github.com/twbs/bootstrap/issues/23307
+ // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+ // Multiply line-height by 1em if it has no unit
+ height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+
+ // Android Chrome type="date" is taller than the other inputs
+ // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+ margin: 0;
}
- }
- &::-webkit-date-and-time-value {
- // On Android Chrome, form-control's "width: 100%" makes the input width too small
- // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
- //
- // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
- // Tested under iOS 16.2 / Safari 16.2
- min-width: 85px; // Seems to be a good minimum safe width
-
- // Add some height to date inputs on iOS
- // https://github.com/twbs/bootstrap/issues/23307
- // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
- // Multiply line-height by 1em if it has no unit
- height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
-
- // Android Chrome type="date" is taller than the other inputs
- // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
- // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
- margin: 0;
- }
+ // Prevent excessive date input height in Webkit
+ // https://github.com/twbs/bootstrap/issues/34433
+ &::-webkit-datetime-edit {
+ display: block;
+ padding: 0;
+ }
- // Prevent excessive date input height in Webkit
- // https://github.com/twbs/bootstrap/issues/34433
- &::-webkit-datetime-edit {
- display: block;
- padding: 0;
- }
+ // Placeholder
+ &::placeholder {
+ color: $input-placeholder-color;
+ // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+ opacity: 1;
+ }
- // Placeholder
- &::placeholder {
- color: $input-placeholder-color;
- // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
- opacity: 1;
- }
+ // Disabled inputs
+ //
+ // HTML5 says that controls under a fieldset > legend:first-child won't be
+ // disabled if the fieldset is disabled. Due to implementation difficulty, we
+ // don't honor that edge case; we style them as disabled anyway.
+ &:disabled {
+ color: $input-disabled-color;
+ background-color: $input-disabled-bg;
+ border-color: $input-disabled-border-color;
+ // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+ opacity: 1;
+ }
- // Disabled inputs
- //
- // HTML5 says that controls under a fieldset > legend:first-child won't be
- // disabled if the fieldset is disabled. Due to implementation difficulty, we
- // don't honor that edge case; we style them as disabled anyway.
- &:disabled {
- color: $input-disabled-color;
- background-color: $input-disabled-bg;
- border-color: $input-disabled-border-color;
- // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
- opacity: 1;
- }
+ // File input buttons theming
+ &::file-selector-button {
+ padding: $input-padding-y $input-padding-x;
+ margin: (-$input-padding-y) (-$input-padding-x);
+ margin-inline-end: $input-padding-x;
+ color: $form-file-button-color;
+ @include gradient-bg($form-file-button-bg);
+ pointer-events: none;
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+ border-inline-end-width: $input-border-width;
+ border-radius: 0; // stylelint-disable-line property-disallowed-list
+ @include transition($btn-transition);
+ }
- // File input buttons theming
- &::file-selector-button {
- padding: $input-padding-y $input-padding-x;
- margin: (-$input-padding-y) (-$input-padding-x);
- margin-inline-end: $input-padding-x;
- color: $form-file-button-color;
- @include gradient-bg($form-file-button-bg);
- pointer-events: none;
- border-color: inherit;
- border-style: solid;
- border-width: 0;
- border-inline-end-width: $input-border-width;
- border-radius: 0; // stylelint-disable-line property-disallowed-list
- @include transition($btn-transition);
+ &:hover:not(:disabled):not([readonly])::file-selector-button {
+ background-color: $form-file-button-hover-bg;
+ }
}
- &:hover:not(:disabled):not([readonly])::file-selector-button {
- background-color: $form-file-button-hover-bg;
- }
-}
+ // Readonly controls as plain text
+ //
+ // Apply class to a readonly input to make it appear like regular plain
+ // text (without any border, background color, focus indicator)
-// Readonly controls as plain text
-//
-// Apply class to a readonly input to make it appear like regular plain
-// text (without any border, background color, focus indicator)
-
-.form-control-plaintext {
- display: block;
- width: 100%;
- padding: $input-padding-y 0;
- margin-bottom: 0; // match inputs if this class comes on inputs with default margins
- line-height: $input-line-height;
- color: $input-plaintext-color;
- background-color: transparent;
- border: solid transparent;
- border-width: $input-border-width 0;
-
- &:focus {
- outline: 0;
- }
+ .form-control-plaintext {
+ display: block;
+ width: 100%;
+ padding: $input-padding-y 0;
+ margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+ line-height: $input-line-height;
+ color: $input-plaintext-color;
+ background-color: transparent;
+ border: solid transparent;
+ border-width: $input-border-width 0;
+
+ &:focus {
+ outline: 0;
+ }
- &.form-control-sm,
- &.form-control-lg {
- padding-right: 0;
- padding-left: 0;
+ &.form-control-sm,
+ &.form-control-lg {
+ padding-right: 0;
+ padding-left: 0;
+ }
}
-}
-// Form control sizing
-//
-// Build on `.form-control` with modifier classes to decrease or increase the
-// height and font-size of form controls.
-//
-// Repeated in `_input_group.scss` to avoid Sass extend issues.
-
-.form-control-sm {
- 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);
+ // Form control sizing
+ //
+ // Build on `.form-control` with modifier classes to decrease or increase the
+ // height and font-size of form controls.
+ //
+ // Repeated in `_input_group.scss` to avoid Sass extend issues.
- &::file-selector-button {
+ .form-control-sm {
+ min-height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
- margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
- margin-inline-end: $input-padding-x-sm;
- }
-}
+ @include font-size($input-font-size-sm);
+ @include border-radius($input-border-radius-sm);
-.form-control-lg {
- 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);
+ &::file-selector-button {
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+ margin-inline-end: $input-padding-x-sm;
+ }
+ }
- &::file-selector-button {
+ .form-control-lg {
+ min-height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
- margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
- margin-inline-end: $input-padding-x-lg;
- }
-}
+ @include font-size($input-font-size-lg);
+ @include border-radius($input-border-radius-lg);
-// Make sure textareas don't shrink too much when resized
-// https://github.com/twbs/bootstrap/pull/29124
-// stylelint-disable selector-no-qualifying-type
-textarea {
- &.form-control {
- min-height: $input-height;
+ &::file-selector-button {
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+ margin-inline-end: $input-padding-x-lg;
+ }
}
- &.form-control-sm {
- min-height: $input-height-sm;
- }
+ // Make sure textareas don't shrink too much when resized
+ // https://github.com/twbs/bootstrap/pull/29124
+ // stylelint-disable selector-no-qualifying-type
+ textarea {
+ &.form-control {
+ min-height: $input-height;
+ }
- &.form-control-lg {
- min-height: $input-height-lg;
+ &.form-control-sm {
+ min-height: $input-height-sm;
+ }
+
+ &.form-control-lg {
+ min-height: $input-height-lg;
+ }
}
-}
-// stylelint-enable selector-no-qualifying-type
+ // stylelint-enable selector-no-qualifying-type
-.form-control-color {
- width: $form-color-width;
- height: $input-height;
- padding: $input-padding-y;
+ .form-control-color {
+ width: $form-color-width;
+ height: $input-height;
+ padding: $input-padding-y;
- &:not(:disabled):not([readonly]) {
- cursor: pointer;
- }
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
- &::-moz-color-swatch {
- border: 0 !important; // stylelint-disable-line declaration-no-important
- @include border-radius($input-border-radius);
- }
+ &::-moz-color-swatch {
+ border: 0 !important; // stylelint-disable-line declaration-no-important
+ @include border-radius($input-border-radius);
+ }
- &::-webkit-color-swatch {
- border: 0 !important; // stylelint-disable-line declaration-no-important
- @include border-radius($input-border-radius);
- }
+ &::-webkit-color-swatch {
+ border: 0 !important; // stylelint-disable-line declaration-no-important
+ @include border-radius($input-border-radius);
+ }
- &.form-control-sm { height: $input-height-sm; }
- &.form-control-lg { height: $input-height-lg; }
+ &.form-control-sm { height: $input-height-sm; }
+ &.form-control-lg { height: $input-height-lg; }
+ }
}
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.
-.form-range {
- width: 100%;
- height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
- padding: 0; // Need to reset padding
- appearance: none;
- background-color: transparent;
+@layer forms {
+ .form-range {
+ width: 100%;
+ height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+ padding: 0; // Need to reset padding
+ appearance: none;
+ background-color: transparent;
- &:focus {
- outline: 0;
+ &:focus {
+ outline: 0;
- // Pseudo-elements must be split across multiple rulesets to have an effect.
- // No box-shadow() mixin for focus accessibility.
- &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
- &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
- }
+ // Pseudo-elements must be split across multiple rulesets to have an effect.
+ // No box-shadow() mixin for focus accessibility.
+ &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+ &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+ }
- &::-moz-focus-outer {
- border: 0;
- }
+ &::-moz-focus-outer {
+ border: 0;
+ }
- &::-webkit-slider-thumb {
- width: $form-range-thumb-width;
- height: $form-range-thumb-height;
- margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
- appearance: none;
- @include gradient-bg($form-range-thumb-bg);
- border: $form-range-thumb-border;
- @include border-radius($form-range-thumb-border-radius);
- @include box-shadow($form-range-thumb-box-shadow);
- @include transition($form-range-thumb-transition);
+ &::-webkit-slider-thumb {
+ width: $form-range-thumb-width;
+ height: $form-range-thumb-height;
+ margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
+ appearance: none;
+ @include gradient-bg($form-range-thumb-bg);
+ border: $form-range-thumb-border;
+ @include border-radius($form-range-thumb-border-radius);
+ @include box-shadow($form-range-thumb-box-shadow);
+ @include transition($form-range-thumb-transition);
- &:active {
- @include gradient-bg($form-range-thumb-active-bg);
+ &:active {
+ @include gradient-bg($form-range-thumb-active-bg);
+ }
}
- }
- &::-webkit-slider-runnable-track {
- width: $form-range-track-width;
- height: $form-range-track-height;
- color: transparent; // Why?
- cursor: $form-range-track-cursor;
- background-color: $form-range-track-bg;
- border-color: transparent;
- @include border-radius($form-range-track-border-radius);
- @include box-shadow($form-range-track-box-shadow);
- }
+ &::-webkit-slider-runnable-track {
+ width: $form-range-track-width;
+ height: $form-range-track-height;
+ color: transparent; // Why?
+ cursor: $form-range-track-cursor;
+ background-color: $form-range-track-bg;
+ border-color: transparent;
+ @include border-radius($form-range-track-border-radius);
+ @include box-shadow($form-range-track-box-shadow);
+ }
- &::-moz-range-thumb {
- width: $form-range-thumb-width;
- height: $form-range-thumb-height;
- appearance: none;
- @include gradient-bg($form-range-thumb-bg);
- border: $form-range-thumb-border;
- @include border-radius($form-range-thumb-border-radius);
- @include box-shadow($form-range-thumb-box-shadow);
- @include transition($form-range-thumb-transition);
+ &::-moz-range-thumb {
+ width: $form-range-thumb-width;
+ height: $form-range-thumb-height;
+ appearance: none;
+ @include gradient-bg($form-range-thumb-bg);
+ border: $form-range-thumb-border;
+ @include border-radius($form-range-thumb-border-radius);
+ @include box-shadow($form-range-thumb-box-shadow);
+ @include transition($form-range-thumb-transition);
- &:active {
- @include gradient-bg($form-range-thumb-active-bg);
+ &:active {
+ @include gradient-bg($form-range-thumb-active-bg);
+ }
}
- }
- &::-moz-range-track {
- width: $form-range-track-width;
- height: $form-range-track-height;
- color: transparent;
- cursor: $form-range-track-cursor;
- background-color: $form-range-track-bg;
- border-color: transparent; // Firefox specific?
- @include border-radius($form-range-track-border-radius);
- @include box-shadow($form-range-track-box-shadow);
- }
+ &::-moz-range-track {
+ width: $form-range-track-width;
+ height: $form-range-track-height;
+ color: transparent;
+ cursor: $form-range-track-cursor;
+ background-color: $form-range-track-bg;
+ border-color: transparent; // Firefox specific?
+ @include border-radius($form-range-track-border-radius);
+ @include box-shadow($form-range-track-box-shadow);
+ }
- &:disabled {
- pointer-events: none;
+ &:disabled {
+ pointer-events: none;
- &::-webkit-slider-thumb {
- background-color: $form-range-thumb-disabled-bg;
- }
+ &::-webkit-slider-thumb {
+ background-color: $form-range-thumb-disabled-bg;
+ }
- &::-moz-range-thumb {
- background-color: $form-range-thumb-disabled-bg;
+ &::-moz-range-thumb {
+ background-color: $form-range-thumb-disabled-bg;
+ }
}
}
}
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
-.form-select {
- --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+@layer forms {
+ .form-select {
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
- display: block;
- width: 100%;
- padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
- font-family: $form-select-font-family;
- @include font-size($form-select-font-size);
- font-weight: $form-select-font-weight;
- line-height: $form-select-line-height;
- color: $form-select-color;
- appearance: none;
- background-color: $form-select-bg;
- background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
- background-repeat: no-repeat;
- 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 box-shadow($form-select-box-shadow);
- @include transition($form-select-transition);
+ display: block;
+ width: 100%;
+ padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+ font-family: $form-select-font-family;
+ @include font-size($form-select-font-size);
+ font-weight: $form-select-font-weight;
+ line-height: $form-select-line-height;
+ color: $form-select-color;
+ appearance: none;
+ background-color: $form-select-bg;
+ background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
+ background-repeat: no-repeat;
+ 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 box-shadow($form-select-box-shadow);
+ @include transition($form-select-transition);
- &:focus {
- border-color: $form-select-focus-border-color;
- outline: 0;
- @if $enable-shadows {
- @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
- } @else {
- // Avoid using mixin so we can pass custom focus shadow properly
- box-shadow: $form-select-focus-box-shadow;
+ &:focus {
+ border-color: $form-select-focus-border-color;
+ outline: 0;
+ @if $enable-shadows {
+ @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $form-select-focus-box-shadow;
+ }
}
- }
- &[multiple],
- &[size]:not([size="1"]) {
- padding-right: $form-select-padding-x;
- background-image: none;
- }
+ &[multiple],
+ &[size]:not([size="1"]) {
+ padding-right: $form-select-padding-x;
+ background-image: none;
+ }
- &:disabled {
- color: $form-select-disabled-color;
- background-color: $form-select-disabled-bg;
- border-color: $form-select-disabled-border-color;
- }
+ &:disabled {
+ color: $form-select-disabled-color;
+ background-color: $form-select-disabled-bg;
+ border-color: $form-select-disabled-border-color;
+ }
- // Remove outline from select box in FF
- &:-moz-focusring {
- color: transparent;
- text-shadow: 0 0 0 $form-select-color;
+ // Remove outline from select box in FF
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 $form-select-color;
+ }
}
-}
-.form-select-sm {
- padding-top: $form-select-padding-y-sm;
- 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);
-}
+ .form-select-sm {
+ padding-top: $form-select-padding-y-sm;
+ 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);
+ }
-.form-select-lg {
- padding-top: $form-select-padding-y-lg;
- 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);
-}
+ .form-select-lg {
+ padding-top: $form-select-padding-y-lg;
+ 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);
+ }
-@if $enable-dark-mode {
- @include color-mode(dark) {
- .form-select {
- --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+ @if $enable-dark-mode {
+ @include color-mode(dark) {
+ .form-select {
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+ }
}
}
}
@use "../variables" as *;
@use "../vendor/rfs" as *;
+
//
// Form text
//
-.form-text {
- margin-top: $form-text-margin-top;
- @include font-size($form-text-font-size);
- font-style: $form-text-font-style;
- font-weight: $form-text-font-weight;
- color: $form-text-color;
+@layer forms {
+ .form-text {
+ margin-top: $form-text-margin-top;
+ @include font-size($form-text-font-size);
+ font-style: $form-text-font-style;
+ font-weight: $form-text-font-weight;
+ color: $form-text-color;
+ }
}
// Base styles
//
-.input-group {
- position: relative;
- display: flex;
- flex-wrap: wrap; // For form validation feedback
- align-items: stretch;
- width: 100%;
-
- > .form-control,
- > .form-select,
- > .form-floating {
- position: relative; // For focus state's z-index
- flex: 1 1 auto;
- width: 1%;
- min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
- }
-
- // Bring the "active" form control to the top of surrounding elements
- > .form-control:focus,
- > .form-select:focus,
- > .form-floating:focus-within {
- z-index: 5;
- }
-
- // Ensure buttons are always above inputs for more visually pleasing borders.
- // This isn't needed for `.input-group-text` since it shares the same border-color
- // as our inputs.
- .btn {
+@layer forms {
+ .input-group {
position: relative;
- z-index: 2;
+ display: flex;
+ flex-wrap: wrap; // For form validation feedback
+ align-items: stretch;
+ width: 100%;
+
+ > .form-control,
+ > .form-select,
+ > .form-floating {
+ position: relative; // For focus state's z-index
+ flex: 1 1 auto;
+ width: 1%;
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+ }
- &:focus {
+ // Bring the "active" form control to the top of surrounding elements
+ > .form-control:focus,
+ > .form-select:focus,
+ > .form-floating:focus-within {
z-index: 5;
}
+
+ // Ensure buttons are always above inputs for more visually pleasing borders.
+ // This isn't needed for `.input-group-text` since it shares the same border-color
+ // as our inputs.
+ .btn {
+ position: relative;
+ z-index: 2;
+
+ &:focus {
+ z-index: 5;
+ }
+ }
}
-}
-// Textual addons
-//
-// Serves as a catch-all element for any text or radio/checkbox input you wish
-// to prepend or append to an input.
-
-.input-group-text {
- display: flex;
- align-items: center;
- padding: $input-group-addon-padding-y $input-group-addon-padding-x;
- @include font-size($input-font-size); // Match inputs
- font-weight: $input-group-addon-font-weight;
- line-height: $input-line-height;
- color: $input-group-addon-color;
- text-align: center;
- 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);
-}
+ // Textual addons
+ //
+ // Serves as a catch-all element for any text or radio/checkbox input you wish
+ // to prepend or append to an input.
+
+ .input-group-text {
+ display: flex;
+ align-items: center;
+ padding: $input-group-addon-padding-y $input-group-addon-padding-x;
+ @include font-size($input-font-size); // Match inputs
+ font-weight: $input-group-addon-font-weight;
+ line-height: $input-line-height;
+ color: $input-group-addon-color;
+ text-align: center;
+ 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);
+ }
-// Sizing
-//
-// Remix the default form control sizing classes into new ones for easier
-// manipulation.
-
-.input-group-lg > .form-control,
-.input-group-lg > .form-select,
-.input-group-lg > .input-group-text,
-.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);
-}
+ // Sizing
+ //
+ // Remix the default form control sizing classes into new ones for easier
+ // manipulation.
-.input-group-sm > .form-control,
-.input-group-sm > .form-select,
-.input-group-sm > .input-group-text,
-.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);
-}
+ .input-group-lg > .form-control,
+ .input-group-lg > .form-select,
+ .input-group-lg > .input-group-text,
+ .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);
+ }
-.input-group-lg > .form-select,
-.input-group-sm > .form-select {
- padding-right: $form-select-padding-x + $form-select-indicator-padding;
-}
+ .input-group-sm > .form-control,
+ .input-group-sm > .form-select,
+ .input-group-sm > .input-group-text,
+ .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);
+ }
+ .input-group-lg > .form-select,
+ .input-group-sm > .form-select {
+ padding-right: $form-select-padding-x + $form-select-indicator-padding;
+ }
-// Rounded corners
-//
-// These rulesets must come after the sizing ones to properly override sm and lg
-// border-radius values when extending. They're more specific than we'd like
-// with the `.input-group >` part, but without it, we cannot override the sizing.
-
-// stylelint-disable-next-line no-duplicate-selectors
-.input-group {
- &:not(.has-validation) {
- > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
- > .dropdown-toggle:nth-last-child(n + 3),
- > .form-floating:not(:last-child) > .form-control,
- > .form-floating:not(:last-child) > .form-select {
- @include border-end-radius(0);
+
+ // Rounded corners
+ //
+ // These rulesets must come after the sizing ones to properly override sm and lg
+ // border-radius values when extending. They're more specific than we'd like
+ // with the `.input-group >` part, but without it, we cannot override the sizing.
+
+ // stylelint-disable-next-line no-duplicate-selectors
+ .input-group {
+ &:not(.has-validation) {
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+ > .dropdown-toggle:nth-last-child(n + 3),
+ > .form-floating:not(:last-child) > .form-control,
+ > .form-floating:not(:last-child) > .form-select {
+ @include border-end-radius(0);
+ }
}
- }
- &.has-validation {
- > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
- > .dropdown-toggle:nth-last-child(n + 4),
- > .form-floating:nth-last-child(n + 3) > .form-control,
- > .form-floating:nth-last-child(n + 3) > .form-select {
- @include border-end-radius(0);
+ &.has-validation {
+ > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+ > .dropdown-toggle:nth-last-child(n + 4),
+ > .form-floating:nth-last-child(n + 3) > .form-control,
+ > .form-floating:nth-last-child(n + 3) > .form-select {
+ @include border-end-radius(0);
+ }
}
- }
- $validation-messages: "";
- @each $state in map.keys($form-validation-states) {
- $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
- }
+ $validation-messages: "";
+ @each $state in map.keys($form-validation-states) {
+ $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+ }
- > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
- margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
- @include border-start-radius(0);
- }
+ > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+ margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
+ @include border-start-radius(0);
+ }
- > .form-floating:not(:first-child) > .form-control,
- > .form-floating:not(:first-child) > .form-select {
- @include border-start-radius(0);
+ > .form-floating:not(:first-child) > .form-control,
+ > .form-floating:not(:first-child) > .form-select {
+ @include border-start-radius(0);
+ }
}
}
@use "../variables" as *;
@use "../vendor/rfs" as *;
+
//
// Labels
//
-.form-label {
- margin-bottom: $form-label-margin-bottom;
- @include font-size($form-label-font-size);
- font-style: $form-label-font-style;
- font-weight: $form-label-font-weight;
- color: $form-label-color;
-}
+@layer forms {
+ .form-label {
+ margin-bottom: $form-label-margin-bottom;
+ @include font-size($form-label-font-size);
+ font-style: $form-label-font-style;
+ font-weight: $form-label-font-weight;
+ color: $form-label-color;
+ }
-// For use with horizontal and inline forms, when you need the label (or legend)
-// text to align with the form controls.
-.col-form-label {
- padding-top: add($input-padding-y, $input-border-width);
- padding-bottom: add($input-padding-y, $input-border-width);
- margin-bottom: 0; // Override the `<legend>` default
- @include font-size(inherit); // Override the `<legend>` default
- font-style: $form-label-font-style;
- font-weight: $form-label-font-weight;
- line-height: $input-line-height;
- color: $form-label-color;
-}
+ // For use with horizontal and inline forms, when you need the label (or legend)
+ // text to align with the form controls.
+ .col-form-label {
+ padding-top: add($input-padding-y, $input-border-width);
+ padding-bottom: add($input-padding-y, $input-border-width);
+ margin-bottom: 0; // Override the `<legend>` default
+ @include font-size(inherit); // Override the `<legend>` default
+ font-style: $form-label-font-style;
+ font-weight: $form-label-font-weight;
+ line-height: $input-line-height;
+ color: $form-label-color;
+ }
-.col-form-label-lg {
- padding-top: add($input-padding-y-lg, $input-border-width);
- padding-bottom: add($input-padding-y-lg, $input-border-width);
- @include font-size($input-font-size-lg);
-}
+ .col-form-label-lg {
+ padding-top: add($input-padding-y-lg, $input-border-width);
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
+ @include font-size($input-font-size-lg);
+ }
-.col-form-label-sm {
- padding-top: add($input-padding-y-sm, $input-border-width);
- padding-bottom: add($input-padding-y-sm, $input-border-width);
- @include font-size($input-font-size-sm);
+ .col-form-label-sm {
+ padding-top: add($input-padding-y-sm, $input-border-width);
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
+ @include font-size($input-font-size-sm);
+ }
}
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
-// scss-docs-start form-validation-mixins
-@mixin form-validation-state-selector($state) {
- @if ($state == "valid" or $state == "invalid") {
- .was-validated #{if(&, "&", "")}:#{$state},
- #{if(&, "&", "")}.is-#{$state} {
- @content;
- }
- } @else {
- #{if(&, "&", "")}.is-#{$state} {
- @content;
+@layer forms {
+ // scss-docs-start form-validation-mixins
+ @mixin form-validation-state-selector($state) {
+ @if ($state == "valid" or $state == "invalid") {
+ .was-validated #{if(&, "&", "")}:#{$state},
+ #{if(&, "&", "")}.is-#{$state} {
+ @content;
+ }
+ } @else {
+ #{if(&, "&", "")}.is-#{$state} {
+ @content;
+ }
}
}
-}
-
-@mixin form-validation-state(
- $state,
- $color,
- $icon,
- $tooltip-color: color-contrast($color),
- $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
- $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
- $border-color: $color
-) {
- .#{$state}-feedback {
- display: none;
- width: 100%;
- margin-top: $form-feedback-margin-top;
- @include font-size($form-feedback-font-size);
- font-style: $form-feedback-font-style;
- color: $color;
- }
- .#{$state}-tooltip {
- position: absolute;
- top: 100%;
- z-index: 5;
- display: none;
- max-width: 100%; // Contain to parent when possible
- padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
- margin-top: .1rem;
- @include font-size($form-feedback-tooltip-font-size);
- line-height: $form-feedback-tooltip-line-height;
- color: $tooltip-color;
- background-color: $tooltip-bg-color;
- @include border-radius($form-feedback-tooltip-border-radius);
- }
+ @mixin form-validation-state(
+ $state,
+ $color,
+ $icon,
+ $tooltip-color: color-contrast($color),
+ $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+ $border-color: $color
+ ) {
+ .#{$state}-feedback {
+ display: none;
+ width: 100%;
+ margin-top: $form-feedback-margin-top;
+ @include font-size($form-feedback-font-size);
+ font-style: $form-feedback-font-style;
+ color: $color;
+ }
- @include form-validation-state-selector($state) {
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
+ .#{$state}-tooltip {
+ position: absolute;
+ top: 100%;
+ z-index: 5;
+ display: none;
+ max-width: 100%; // Contain to parent when possible
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+ margin-top: .1rem;
+ @include font-size($form-feedback-tooltip-font-size);
+ line-height: $form-feedback-tooltip-line-height;
+ color: $tooltip-color;
+ background-color: $tooltip-bg-color;
+ @include border-radius($form-feedback-tooltip-border-radius);
}
- }
- .form-control {
@include form-validation-state-selector($state) {
- border-color: $border-color;
-
- @if $enable-validation-icons {
- padding-right: $input-height-inner;
- background-image: escape-svg($icon);
- background-repeat: no-repeat;
- background-position: right $input-height-inner-quarter center;
- background-size: $input-height-inner-half $input-height-inner-half;
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
}
+ }
- &:focus {
+ .form-control {
+ @include form-validation-state-selector($state) {
border-color: $border-color;
- @if $enable-shadows {
- @include box-shadow($input-box-shadow, $focus-box-shadow);
- } @else {
- // Avoid using mixin so we can pass custom focus shadow properly
- box-shadow: $focus-box-shadow;
+
+ @if $enable-validation-icons {
+ padding-right: $input-height-inner;
+ background-image: escape-svg($icon);
+ background-repeat: no-repeat;
+ background-position: right $input-height-inner-quarter center;
+ background-size: $input-height-inner-half $input-height-inner-half;
}
- }
- }
- }
- // stylelint-disable-next-line selector-no-qualifying-type
- textarea.form-control {
- @include form-validation-state-selector($state) {
- @if $enable-validation-icons {
- padding-right: $input-height-inner;
- background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+ &:focus {
+ border-color: $border-color;
+ @if $enable-shadows {
+ @include box-shadow($input-box-shadow, $focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $focus-box-shadow;
+ }
+ }
}
}
- }
- .form-select {
- @include form-validation-state-selector($state) {
- border-color: $border-color;
-
- @if $enable-validation-icons {
- &:not([multiple]):not([size]),
- &:not([multiple])[size="1"] {
- --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
- padding-right: $form-select-feedback-icon-padding-end;
- background-position: $form-select-bg-position, $form-select-feedback-icon-position;
- background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+ // stylelint-disable-next-line selector-no-qualifying-type
+ textarea.form-control {
+ @include form-validation-state-selector($state) {
+ @if $enable-validation-icons {
+ padding-right: $input-height-inner;
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
+ }
- &:focus {
+ .form-select {
+ @include form-validation-state-selector($state) {
border-color: $border-color;
- @if $enable-shadows {
- @include box-shadow($form-select-box-shadow, $focus-box-shadow);
- } @else {
- // Avoid using mixin so we can pass custom focus shadow properly
- box-shadow: $focus-box-shadow;
+
+ @if $enable-validation-icons {
+ &:not([multiple]):not([size]),
+ &:not([multiple])[size="1"] {
+ --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+ padding-right: $form-select-feedback-icon-padding-end;
+ background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+ background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+ }
+ }
+
+ &:focus {
+ border-color: $border-color;
+ @if $enable-shadows {
+ @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $focus-box-shadow;
+ }
}
}
}
- }
- .form-control-color {
- @include form-validation-state-selector($state) {
- @if $enable-validation-icons {
- width: add($form-color-width, $input-height-inner);
+ .form-control-color {
+ @include form-validation-state-selector($state) {
+ @if $enable-validation-icons {
+ width: add($form-color-width, $input-height-inner);
+ }
}
}
- }
- .form-check-input {
- @include form-validation-state-selector($state) {
- border-color: $border-color;
+ .form-check-input {
+ @include form-validation-state-selector($state) {
+ border-color: $border-color;
- &:checked {
- background-color: $color;
- }
+ &:checked {
+ background-color: $color;
+ }
- &:focus {
- box-shadow: $focus-box-shadow;
- }
+ &:focus {
+ box-shadow: $focus-box-shadow;
+ }
- ~ .form-check-label {
- color: $color;
+ ~ .form-check-label {
+ color: $color;
+ }
}
}
- }
- .form-check-inline .form-check-input {
- ~ .#{$state}-feedback {
- margin-left: .5em;
+ .form-check-inline .form-check-input {
+ ~ .#{$state}-feedback {
+ margin-left: .5em;
+ }
}
- }
- .input-group {
- > .form-control:not(:focus),
- > .form-select:not(:focus),
- > .form-floating:not(:focus-within) {
- @include form-validation-state-selector($state) {
- @if $state == "valid" {
- z-index: 3;
- } @else if $state == "invalid" {
- z-index: 4;
+ .input-group {
+ > .form-control:not(:focus),
+ > .form-select:not(:focus),
+ > .form-floating:not(:focus-within) {
+ @include form-validation-state-selector($state) {
+ @if $state == "valid" {
+ z-index: 3;
+ } @else if $state == "invalid" {
+ z-index: 4;
+ }
}
}
}
}
-}
-// scss-docs-end form-validation-mixins
+ // scss-docs-end form-validation-mixins
-// scss-docs-start form-validation-states-loop
-@each $state, $data in $form-validation-states {
- @include form-validation-state($state, $data...);
+ // scss-docs-start form-validation-states-loop
+ @each $state, $data in $form-validation-states {
+ @include form-validation-state($state, $data...);
+ }
+ // scss-docs-end form-validation-states-loop
}
-// scss-docs-end form-validation-states-loop
@use "../mixins/clearfix" as *;
-.clearfix {
- @include clearfix();
+@layer helpers {
+ .clearfix {
+ @include clearfix();
+ }
}
@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 {
- .text-bg-#{$color} {
- color: color-contrast($value) if($enable-important-utilities, !important, null);
- background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+@layer helpers {
+ @each $color, $value in $theme-colors {
+ .text-bg-#{$color} {
+ color: color-contrast($value) if($enable-important-utilities, !important, null);
+ background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+ }
}
}
@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 {
- .link-#{$color} {
- color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+@layer helpers {
+ @each $color, $value in $theme-colors {
+ .link-#{$color} {
+ color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
- @if $link-shade-percentage != 0 {
- &:hover,
- &:focus {
- $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
- color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ @if $link-shade-percentage != 0 {
+ &:hover,
+ &:focus {
+ $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+ color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ }
}
}
}
-}
-// One-off special link helper as a bridge until v6
-.link-body-emphasis {
- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ // One-off special link helper as a bridge until v6
+ .link-body-emphasis {
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
- @if $link-shade-percentage != 0 {
- &:hover,
- &:focus {
- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+ @if $link-shade-percentage != 0 {
+ &:hover,
+ &:focus {
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+ }
}
}
}
@use "../config" as *;
-.focus-ring:focus {
- outline: 0;
- // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
- box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+@layer helpers {
+ .focus-ring:focus {
+ outline: 0;
+ // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+ box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+ }
}
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/transition" as *;
-.icon-link {
- display: inline-flex;
- gap: $icon-link-gap;
- align-items: center;
- text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
- text-underline-offset: $icon-link-underline-offset;
- backface-visibility: hidden;
- > .bi {
- flex-shrink: 0;
- width: $icon-link-icon-size;
- height: $icon-link-icon-size;
- fill: currentcolor;
- @include transition($icon-link-icon-transition);
- }
-}
+@layer helpers {
+ .icon-link {
+ display: inline-flex;
+ gap: $icon-link-gap;
+ align-items: center;
+ text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+ text-underline-offset: $icon-link-underline-offset;
+ backface-visibility: hidden;
-.icon-link-hover {
- &:hover,
- &:focus-visible {
> .bi {
- transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+ flex-shrink: 0;
+ width: $icon-link-icon-size;
+ height: $icon-link-icon-size;
+ fill: currentcolor;
+ @include transition($icon-link-icon-transition);
+ }
+ }
+
+ .icon-link-hover {
+ &:hover,
+ &:focus-visible {
+ > .bi {
+ transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+ }
}
}
}
// Shorthand
-.fixed-top {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: $zindex-fixed;
-}
+@layer helpers {
+ .fixed-top {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+ }
-.fixed-bottom {
- position: fixed;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: $zindex-fixed;
-}
+ .fixed-bottom {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+ }
-// Responsive sticky top and bottom
-@each $breakpoint in map.keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ // Responsive sticky top and bottom
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- .sticky#{$infix}-top {
- position: sticky;
- top: 0;
- z-index: $zindex-sticky;
- }
+ .sticky#{$infix}-top {
+ position: sticky;
+ top: 0;
+ z-index: $zindex-sticky;
+ }
- .sticky#{$infix}-bottom {
- position: sticky;
- bottom: 0;
- z-index: $zindex-sticky;
+ .sticky#{$infix}-bottom {
+ position: sticky;
+ bottom: 0;
+ z-index: $zindex-sticky;
+ }
}
}
}
-// scss-docs-start stacks
-.hstack {
- display: flex;
- flex-direction: row;
- align-items: center;
- align-self: stretch;
-}
+@layer helpers {
+ // scss-docs-start stacks
+ .hstack {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ align-self: stretch;
+ }
-.vstack {
- display: flex;
- flex: 1 1 auto;
- flex-direction: column;
- align-self: stretch;
+ .vstack {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-self: stretch;
+ }
+ // scss-docs-end stacks
}
-// scss-docs-end stacks
// Stretched link
//
-.stretched-link {
- &::#{$stretched-link-pseudo-element} {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: $stretched-link-z-index;
- content: "";
+@layer helpers {
+ .stretched-link {
+ &::#{$stretched-link-pseudo-element} {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $stretched-link-z-index;
+ content: "";
+ }
}
}
@use "../mixins/text-truncate" as *;
+
+//
// Text truncation
//
-.text-truncate {
- @include text-truncate();
+@layer helpers {
+ .text-truncate {
+ @include text-truncate();
+ }
}
// Visually hidden
//
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
- @include visually-hidden();
+@layer helpers {
+ .visually-hidden,
+ .visually-hidden-focusable:not(:focus):not(:focus-within) {
+ @include visually-hidden();
+ }
}
@use "../variables" as *;
-.vr {
- display: inline-block;
- align-self: stretch;
- width: $vr-border-width;
- min-height: 1em;
- background-color: currentcolor;
- opacity: $hr-opacity;
+@layer helpers {
+ .vr {
+ display: inline-block;
+ align-self: stretch;
+ width: $vr-border-width;
+ min-height: 1em;
+ background-color: currentcolor;
+ opacity: $hr-opacity;
+ }
}
-@import "clearfix";
-@import "color-bg";
-@import "colored-links";
-@import "focus-ring";
-@import "icon-link";
-@import "position";
-@import "stacks";
-@import "visually-hidden";
-@import "stretched-link";
-@import "text-truncation";
-@import "vr";
+@forward "clearfix";
+@forward "color-bg";
+@forward "colored-links";
+@forward "focus-ring";
+@forward "icon-link";
+@forward "position";
+@forward "stacks";
+@forward "visually-hidden";
+@forward "stretched-link";
+@forward "text-truncation";
+@forward "vr";
margin-left: auto;
}
-@if $enable-container-classes {
- // Single container class with breakpoint max-widths
- .container,
- // 100% wide container at all breakpoints
- .container-fluid {
- @include make-container();
- }
-
- // Responsive containers that are 100% wide until a breakpoint
- @each $breakpoint, $container-max-width in $container-max-widths {
- .container-#{$breakpoint} {
- @extend .container-fluid;
+@layer layout {
+ @if $enable-container-classes {
+ // Single container class with breakpoint max-widths
+ .container,
+ // 100% wide container at all breakpoints
+ .container-fluid {
+ @include make-container();
}
- @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
- %responsive-container-#{$breakpoint} {
- max-width: $container-max-width;
+ // Responsive containers that are 100% wide until a breakpoint
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ .container-#{$breakpoint} {
+ @extend .container-fluid;
}
- // Extend each breakpoint which is smaller or equal to the current breakpoint
- $extend-breakpoint: true;
+ @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+ %responsive-container-#{$breakpoint} {
+ max-width: $container-max-width;
+ }
- @each $name, $width in $grid-breakpoints {
- @if ($extend-breakpoint) {
- .container#{breakpoint-infix($name, $grid-breakpoints)} {
- @extend %responsive-container-#{$breakpoint};
- }
+ // Extend each breakpoint which is smaller or equal to the current breakpoint
+ $extend-breakpoint: true;
+
+ @each $name, $width in $grid-breakpoints {
+ @if ($extend-breakpoint) {
+ .container#{breakpoint-infix($name, $grid-breakpoints)} {
+ @extend %responsive-container-#{$breakpoint};
+ }
- // Once the current breakpoint is reached, stop extending
- @if ($breakpoint == $name) {
- $extend-breakpoint: false;
+ // Once the current breakpoint is reached, stop extending
+ @if ($breakpoint == $name) {
+ $extend-breakpoint: false;
+ }
}
}
}
@use "../mixins/utilities" as *;
@use "../utilities" as *;
-// Loop over each breakpoint
-@each $breakpoint in map.keys($grid-breakpoints) {
+@layer utilities {
+ // Loop over each breakpoint
+ @each $breakpoint in map.keys($grid-breakpoints) {
- // Generate media query if needed
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ // Generate media query if needed
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- // Loop over each utility property
- @each $key, $utility in $utilities {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Only proceed if responsive media queries are enabled or if it's the base media query
- @if type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
- @include generate-utility($utility, $infix);
+ // Loop over each utility property
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
+ @include generate-utility($utility, $infix);
+ }
}
}
}
-}
-// RFS rescaling
-@media (min-width: $rfs-mq-value) {
- @each $breakpoint in map.keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ // RFS rescaling
+ @media (min-width: $rfs-mq-value) {
+ @each $breakpoint in map.keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
- // Loop over each utility property
- @each $key, $utility in $utilities {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Only proceed if responsive media queries are enabled or if it's the base media query
- @if type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
- @include generate-utility($utility, $infix, true);
+ @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+ // Loop over each utility property
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
+ @include generate-utility($utility, $infix, true);
+ }
}
}
}
}
-}
-// Print utilities
-@media print {
- @each $key, $utility in $utilities {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Then check if the utility needs print styles
- @if type-of($utility) == "map" and map.get($utility, print) == true {
- @include generate-utility($utility, "-print");
+ // Print utilities
+ @media print {
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Then check if the utility needs print styles
+ @if type-of($utility) == "map" and map.get($utility, print) == true {
+ @include generate-utility($utility, "-print");
+ }
}
}
}
projects / thirdparty / bootstrap.git / commitdiff
