aboutsummaryrefslogtreecommitdiff
path: root/scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss')
-rw-r--r--scss/_alert.scss4
-rw-r--r--scss/_button-group.scss2
-rw-r--r--scss/_card.scss18
-rw-r--r--scss/_dropdown.scss2
-rw-r--r--scss/_functions.scss2
-rw-r--r--scss/_grid.scss34
-rw-r--r--scss/_list-group.scss26
-rw-r--r--scss/_modal.scss39
-rw-r--r--scss/_nav.scss1
-rw-r--r--scss/_navbar.scss3
-rw-r--r--scss/_reboot.scss16
-rw-r--r--scss/_spinners.scss1
-rw-r--r--scss/_tables.scss25
-rw-r--r--scss/_utilities.scss2
-rw-r--r--scss/_variables.scss36
-rw-r--r--scss/forms/_form-check.scss5
-rw-r--r--scss/forms/_form-control.scss5
-rw-r--r--scss/forms/_form-select.scss3
-rw-r--r--scss/forms/_input-group.scss1
-rw-r--r--scss/forms/_labels.scss13
-rw-r--r--scss/forms/_validation.scss2
-rw-r--r--scss/mixins/_buttons.scss16
-rw-r--r--scss/mixins/_clearfix.scss2
-rw-r--r--scss/mixins/_grid.scss27
-rw-r--r--scss/mixins/_transition.scss18
25 files changed, 166 insertions, 137 deletions
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 45d621806..19157b298 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -40,8 +40,7 @@
}
-// Alternate styles
-//
+// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert.
@each $color, $value in $theme-colors {
@@ -49,3 +48,4 @@
@include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
}
}
+// scss-docs-end alert-modifiers
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index e486d469d..e3d2e4cc4 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -149,8 +149,6 @@
.btn-group-toggle {
> .btn,
> .btn-group > .btn {
- margin-bottom: 0; // Override default `<label>` value
-
input[type="radio"],
input[type="checkbox"] {
position: absolute;
diff --git a/scss/_card.scss b/scss/_card.scss
index 3099109b1..230ab113a 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -19,15 +19,18 @@
margin-left: 0;
}
- > .list-group:first-child {
- .list-group-item:first-child {
- @include border-top-radius($card-border-radius);
+ > .list-group {
+ border-top: inherit;
+ border-bottom: inherit;
+
+ &:first-child {
+ border-top-width: 0;
+ @include border-top-radius($card-inner-border-radius);
}
- }
- > .list-group:last-child {
- .list-group-item:last-child {
- @include border-bottom-radius($card-border-radius);
+ &:last-child {
+ border-bottom-width: 0;
+ @include border-bottom-radius($card-inner-border-radius);
}
}
}
@@ -87,6 +90,7 @@
.card-footer {
padding: $card-cap-padding-y $card-cap-padding-x;
+ color: $card-cap-color;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 3290f22cb..b30f2ba7e 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -34,6 +34,7 @@
@include box-shadow($dropdown-box-shadow);
}
+// scss-docs-start responsive-breakpoints
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -49,6 +50,7 @@
}
}
}
+// 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.
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 00179049c..49a460466 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -128,12 +128,14 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
}
// Request a color level
+// scss-docs-start color-level
@function color-level($color: $primary, $level: 0) {
$color-base: if($level > 0, $black, $white);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
+// scss-docs-end color-level
@function tint-color($color, $level) {
@return mix(white, $color, $level * $theme-color-interval);
diff --git a/scss/_grid.scss b/scss/_grid.scss
index e4e3c9796..5686f31fe 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -12,40 +12,6 @@
}
}
-// Gutters
-//
-// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-
-@if $enable-grid-classes {
- @each $breakpoint in map-keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-
- @each $key, $value in $gutters {
- .g#{$infix}-#{$key},
- .gx#{$infix}-#{$key} {
- margin-right: -$value / 2;
- margin-left: -$value / 2;
-
- > * {
- padding-right: $value / 2;
- padding-left: $value / 2;
- }
- }
-
- .g#{$infix}-#{$key},
- .gy#{$infix}-#{$key} {
- margin-top: -$value;
-
- > * {
- margin-top: $value;
- }
- }
- }
- }
- }
-}
// Columns
//
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index a7fa9f702..7378a14b8 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -9,6 +9,7 @@
// 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($list-group-border-radius);
}
@@ -46,18 +47,17 @@
position: relative;
display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
- margin-bottom: 0; // for <label> variations
color: $list-group-color;
text-decoration: if($link-decoration == none, null, none);
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
&:first-child {
- @include border-top-radius($list-group-border-radius);
+ @include border-top-radius(inherit);
}
&:last-child {
- @include border-bottom-radius($list-group-border-radius);
+ @include border-bottom-radius(inherit);
}
&.disabled,
@@ -133,29 +133,25 @@
// useful within other components (e.g., cards).
.list-group-flush {
- .list-group-item {
- border-right-width: 0;
- border-left-width: 0;
- @include border-radius(0);
+ @include border-radius(0);
- &:first-child {
- border-top-width: 0;
- }
- }
+ .list-group-item {
+ border-width: 0 0 $list-group-border-width;
- &:last-child {
- .list-group-item:last-child {
+ &:last-child {
border-bottom-width: 0;
}
}
}
-// Contextual variants
+// 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 $color, $value in $theme-colors {
- @include list-group-item-variant($color, color-level($value, -9), color-level($value, 6));
+ @include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level));
}
+// scss-docs-end list-group-modifiers
diff --git a/scss/_modal.scss b/scss/_modal.scss
index ed6ab4eb1..49f27d304 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -62,11 +62,6 @@
overflow: hidden;
}
- .modal-header,
- .modal-footer {
- flex-shrink: 0;
- }
-
.modal-body {
overflow-y: auto;
}
@@ -115,6 +110,7 @@
// Top section of the modal w/ title and dismiss
.modal-header {
display: flex;
+ flex-shrink: 0;
align-items: flex-start; // so the close btn always stays on the upper right corner
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding;
@@ -148,6 +144,7 @@
.modal-footer {
display: flex;
flex-wrap: wrap;
+ flex-shrink: 0;
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: $modal-inner-padding - $modal-footer-margin-between / 2;
@@ -204,3 +201,35 @@
@include media-breakpoint-up(xl) {
.modal-xl { max-width: $modal-xl; }
}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $next-breakpoint: breakpoint-next($breakpoint);
+ $postfix: if(breakpoint-max($breakpoint, $grid-breakpoints) == null, "", "-#{$next-breakpoint}-down");
+
+ @include media-breakpoint-down($breakpoint) {
+ .modal-fullscreen#{$postfix} {
+ width: 100vw;
+ max-width: none;
+ height: 100%;
+ margin: 0;
+
+ .modal-content {
+ height: 100%;
+ border: 0;
+ @include border-radius(0);
+ }
+
+ .modal-header {
+ @include border-radius(0);
+ }
+
+ .modal-body {
+ overflow-y: auto;
+ }
+
+ .modal-footer {
+ @include border-radius(0);
+ }
+ }
+ }
+}
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 81eec4ed3..e71f6839e 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -15,6 +15,7 @@
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
text-decoration: if($link-decoration == none, null, none);
+ @include transition($nav-link-transition);
&:hover,
&:focus {
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index c21d9fd73..129351d19 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -57,11 +57,12 @@
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-brand-margin-right;
@include font-size($navbar-brand-font-size);
+ text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
&:hover,
&:focus {
- text-decoration: none;
+ text-decoration: if($link-hover-decoration == underline, none, null);
}
}
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index cf48352d2..e7a1f2a11 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -283,7 +283,7 @@ pre,
code,
kbd,
samp {
- font-family: $font-family-monospace;
+ font-family: var(--font-family-monospace);
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
@@ -381,7 +381,6 @@ th {
label {
display: inline-block; // 1
- margin-bottom: $label-margin-bottom;
}
// Remove the default `border-radius` that macOS Chrome adds.
@@ -467,19 +466,6 @@ button,
border-style: none;
}
-// Remove the default appearance of temporal inputs to avoid a Mobile Safari
-// bug where setting a custom line-height prevents text from being vertically
-// centered within the input.
-// See https://bugs.webkit.org/show_bug.cgi?id=139848
-// and https://github.com/twbs/bootstrap/issues/11266
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
- -webkit-appearance: textfield;
-}
-
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
textarea {
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index ac4d4c31b..e8e4c044e 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -34,6 +34,7 @@
}
50% {
opacity: 1;
+ transform: none;
}
}
diff --git a/scss/_tables.scss b/scss/_tables.scss
index cb5fc8421..253282c98 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -174,23 +174,14 @@
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
-.table-responsive {
- @each $breakpoint in map-keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
-
- &#{$infix} {
- @include media-breakpoint-down($breakpoint) {
- display: block;
- width: 100%;
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
-
- // Prevent double border on horizontal scroll due to use of `display: block;`
- > .table-bordered {
- border: 0;
- }
- }
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ @include media-breakpoint-down($breakpoint) {
+ .table-responsive#{$infix} {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
}
}
}
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index a872c6bb9..c02eec7b3 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -441,7 +441,7 @@ $utilities: map-merge(
"font-family": (
property: font-family,
class: font,
- values: (monospace: $font-family-monospace)
+ values: (monospace: var(--font-family-monospace))
),
"user-select": (
property: user-select,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 21b497784..6123f3ce1 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -320,13 +320,13 @@ $border-width: 1px !default;
$border-color: $gray-300 !default;
$border-radius: .25rem !default;
-$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
+$border-radius-lg: .3rem !default;
$rounded-pill: 50rem !default;
-$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
@@ -341,6 +341,7 @@ $transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
+// scss-docs-start embed-responsive-aspect-ratios
$embed-responsive-aspect-ratios: (
"21by9": (
x: 21,
@@ -359,6 +360,7 @@ $embed-responsive-aspect-ratios: (
y: 1
)
) !default;
+// scss-docs-end embed-responsive-aspect-ratios
// Typography
//
@@ -367,15 +369,15 @@ $embed-responsive-aspect-ratios: (
// stylelint-disable value-keyword-case
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-base: $font-family-sans-serif !default;
+$font-family-base: var(--font-family-sans-serif) !default;
// stylelint-enable value-keyword-case
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
// $font-size-base effects the font size of the body text
$font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg: $font-size-base * 1.25 !default;
$font-size-sm: $font-size-base * .875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
@@ -386,8 +388,8 @@ $font-weight-bolder: bolder !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
-$line-height-lg: 2 !default;
$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
@@ -549,15 +551,19 @@ $btn-block-spacing-y: .5rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
-$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// Forms
-$label-margin-bottom: .5rem !default;
+$form-label-margin-bottom: .5rem !default;
+$form-label-font-size: null !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: null !default;
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
@@ -584,8 +590,8 @@ $input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
$input-border-radius: $border-radius !default;
-$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
+$input-border-radius-lg: $border-radius-lg !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
@@ -615,6 +621,7 @@ $form-check-padding-left: $form-check-input-width + .5em !defaul
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
+$form-check-transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-check-input-active-filter: brightness(90%) !default;
@@ -648,8 +655,6 @@ $form-switch-padding-left: $form-switch-width + .5em !default;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
$form-switch-bg-size: contain !default;
$form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition: .2s ease-in-out !default;
-$form-switch-transition-property: background-position, background-color !default;
$form-switch-focus-color: hsla(211, 100%, 75%, 1) !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
@@ -770,6 +775,7 @@ $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://w
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+// scss-docs-start form-validation-states
$form-validation-states: (
"valid": (
"color": $form-feedback-valid-color,
@@ -780,6 +786,7 @@ $form-validation-states: (
"icon": $form-feedback-icon-invalid
)
) !default;
+// scss-docs-end form-validation-states
// Z-index master list
//
@@ -799,6 +806,7 @@ $zindex-tooltip: 1070 !default;
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
+$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-tabs-border-color: $gray-300 !default;
@@ -1055,10 +1063,10 @@ $modal-header-padding-y: 1rem !default;
$modal-header-padding-x: 1rem !default;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
-$modal-xl: 1140px !default;
-$modal-lg: 800px !default;
-$modal-md: 500px !default;
$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
@@ -1105,6 +1113,8 @@ $list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !default;
+$list-group-item-bg-level: -9 !default;
+$list-group-item-color-level: 6 !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 03ae57385..572bd547e 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -23,6 +23,7 @@
border: $form-check-input-border;
appearance: none;
color-adjust: exact; // Keep themed appearance for print
+ @include transition($form-check-transition);
&[type="checkbox"] {
@include border-radius($form-check-input-border-radius);
@@ -99,7 +100,6 @@
}
.form-check-label {
- margin-bottom: 0;
color: $form-check-label-color;
cursor: $form-check-label-cursor;
}
@@ -120,9 +120,6 @@
background-size: $form-switch-bg-size; // Get a 1px separation
@include border-radius($form-switch-border-radius);
color-adjust: exact; // Keep themed appearance for print
- // Todo: Figure out how to tackle these, with or without mixin?
- // transition: $form-switch-transition;
- // transition-property: $form-switch-transition-property;
&:focus {
background-image: escape-svg($form-switch-focus-bg-image);
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index fb3142333..6686ecfb8 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -15,6 +15,7 @@
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
+ appearance: none; // Fix appearance for date inputs in Safari
// 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);
@@ -28,10 +29,10 @@
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
- // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
+ @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;
}
}
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 8c410c97b..e4cab0878 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -28,8 +28,9 @@
border-color: $form-select-focus-border-color;
outline: 0;
@if $enable-shadows {
- box-shadow: $form-select-box-shadow, $form-select-focus-box-shadow;
+ @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;
}
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 878cb83d6..c8e86cebe 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -63,7 +63,6 @@
display: flex;
align-items: center;
padding: $input-padding-y $input-padding-x;
- margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
@include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index a3184b7d7..39ecafcd2 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -2,14 +2,25 @@
// 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;
+}
+
// 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 `<label>/<legend>` default
+ 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 {
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index d15e20899..acd68f2ed 100644
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -5,6 +5,8 @@
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server-side validation.
+// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
+// scss-docs-end form-validation-states-loop
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 53a337ba0..4bb9feb8a 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -30,10 +30,10 @@
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
- // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+ @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
@@ -48,10 +48,10 @@
border-color: $active-border;
&:focus {
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows and $btn-active-box-shadow != none {
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+ @if $enable-shadows {
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
@@ -96,10 +96,10 @@
border-color: $active-border;
&:focus {
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows and $btn-active-box-shadow != none {
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+ @if $enable-shadows {
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index 11a977b73..ffc62bb28 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,3 +1,4 @@
+// scss-docs-start clearfix
@mixin clearfix() {
&::after {
display: block;
@@ -5,3 +6,4 @@
content: "";
}
}
+// scss-docs-end clearfix
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 35283207d..aba7dcb58 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -3,10 +3,13 @@
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
+ --grid-gutter-x: #{$gutter};
+ --grid-gutter-y: 0;
display: flex;
flex-wrap: wrap;
- margin-right: -$gutter / 2;
- margin-left: -$gutter / 2;
+ margin-top: calc(var(--grid-gutter-y) * -1); // stylelint-disable-line function-blacklist
+ margin-right: calc(var(--grid-gutter-x) / -2); // stylelint-disable-line function-blacklist
+ margin-left: calc(var(--grid-gutter-x) / -2); // stylelint-disable-line function-blacklist
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -18,8 +21,9 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
- padding-right: $gutter / 2;
- padding-left: $gutter / 2;
+ padding-right: calc(var(--grid-gutter-x) / 2); // stylelint-disable-line function-blacklist
+ padding-left: calc(var(--grid-gutter-x) / 2); // stylelint-disable-line function-blacklist
+ margin-top: var(--grid-gutter-y);
}
@mixin make-col($size, $columns: $grid-columns) {
@@ -93,6 +97,21 @@
}
}
}
+
+ // Gutters
+ //
+ // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+ @each $key, $value in $gutters {
+ .g#{$infix}-#{$key},
+ .gx#{$infix}-#{$key} {
+ --grid-gutter-x: #{$value};
+ }
+
+ .g#{$infix}-#{$key},
+ .gy#{$infix}-#{$key} {
+ --grid-gutter-y: #{$value};
+ }
+ }
}
}
}
diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
index 54983d736..54553deb9 100644
--- a/scss/mixins/_transition.scss
+++ b/scss/mixins/_transition.scss
@@ -1,13 +1,23 @@
// stylelint-disable property-blacklist
@mixin transition($transition...) {
+ @if length($transition) == 0 {
+ $transition: $transition-base;
+ }
+
+ @if length($transition) > 1 {
+ @each $value in $transition {
+ @if $value == null or $value == none {
+ @warn "The keyword 'none' or 'null' must be used as a single argument.";
+ }
+ }
+ }
+
@if $enable-transitions {
- @if length($transition) == 0 {
- transition: $transition-base;
- } @else {
+ @if nth($transition, 1) != null {
transition: $transition;
}
- @if $enable-prefers-reduced-motion-media-query {
+ @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
@media (prefers-reduced-motion: reduce) {
transition: none;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-22 03:49:26 +0000