From ba7863a5bb33dfb5744efadb641977613cdb57d7 Mon Sep 17 00:00:00 2001 From: Alexander Gitter Date: Tue, 7 Dec 2021 11:34:16 +0100 Subject: Fix typo in $purples (#35466) Co-authored-by: XhmikosR --- scss/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index f6a37b764..9db64ae72 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -224,8 +224,8 @@ $indigos: ( ) !default; $purples: ( - "purple-100": $purple-200, - "purple-200": $purple-100, + "purple-100": $purple-100, + "purple-200": $purple-200, "purple-300": $purple-300, "purple-400": $purple-400, "purple-500": $purple-500, -- cgit v1.2.3 From 8cdb6c40bdf55229459f479111e6a44d49052cf1 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 14 Dec 2021 09:51:31 +0200 Subject: Update stylelint and stylelint-config-twbs-bootstrap (#35438) --- scss/_modal.scss | 2 +- scss/_nav.scss | 2 +- scss/_utilities.scss | 2 -- scss/forms/_form-select.scss | 1 - scss/mixins/_reset-text.scss | 2 +- 5 files changed, 3 insertions(+), 6 deletions(-) (limited to 'scss') diff --git a/scss/_modal.scss b/scss/_modal.scss index 21e1258f5..803b4d811 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -124,8 +124,8 @@ // Footer (for actions) .modal-footer { display: flex; - flex-wrap: wrap; 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: $modal-inner-padding - $modal-footer-margin-between * .5; diff --git a/scss/_nav.scss b/scss/_nav.scss index ffb27d869..8660a4dbc 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -49,9 +49,9 @@ &:hover, &:focus { - border-color: $nav-tabs-link-hover-border-color; // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link isolation: isolate; + border-color: $nav-tabs-link-hover-border-color; } &.disabled { diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 960d6f1ad..6498349b2 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,5 +1,3 @@ -// stylelint-disable indentation - // Utilities $utilities: () !default; diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 153ff6cd5..78c34b8fd 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -7,7 +7,6 @@ display: block; width: 100%; padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; - // stylelint-disable-next-line property-no-vendor-prefix -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636 font-family: $form-select-font-family; @include font-size($form-select-font-size); diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss index 354f5648b..f5bd1afec 100644 --- a/scss/mixins/_reset-text.scss +++ b/scss/mixins/_reset-text.scss @@ -11,7 +11,7 @@ text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; } -- cgit v1.2.3 From cb46ad633c3ca0597e7205ce1957d8dbc6484db6 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 15 Dec 2021 09:29:17 +0200 Subject: Reprocess inline SVGs with the latest SVGO (#35484) --- scss/_variables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 9db64ae72..7b128833f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -870,7 +870,7 @@ $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default; $form-check-input-checked-color: $component-active-color !default; $form-check-input-checked-bg-color: $component-active-bg !default; $form-check-input-checked-border-color: $form-check-input-checked-bg-color !default; -$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; +$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; $form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; $form-check-input-indeterminate-color: $component-active-color !default; @@ -926,7 +926,7 @@ $form-select-disabled-border-color: $input-disabled-border-color !default; $form-select-bg-position: right $form-select-padding-x center !default; $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions $form-select-indicator-color: $gray-800 !default; -$form-select-indicator: url("data:image/svg+xml,") !default; +$form-select-indicator: url("data:image/svg+xml,") !default; $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default; $form-select-feedback-icon-position: center right $form-select-indicator-padding !default; @@ -1003,7 +1003,7 @@ $form-feedback-valid-color: $success !default; $form-feedback-invalid-color: $danger !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; -$form-feedback-icon-valid: url("data:image/svg+xml,") !default; +$form-feedback-icon-valid: url("data:image/svg+xml,") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: url("data:image/svg+xml,") !default; // scss-docs-end form-feedback-variables @@ -1561,7 +1561,7 @@ $btn-close-height: $btn-close-width !default; $btn-close-padding-x: .25em !default; $btn-close-padding-y: $btn-close-padding-x !default; $btn-close-color: $black !default; -$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-bg: url("data:image/svg+xml,") !default; $btn-close-focus-shadow: $input-btn-focus-box-shadow !default; $btn-close-opacity: .5 !default; $btn-close-hover-opacity: .75 !default; -- cgit v1.2.3 From d17801265e3562e5386b3445b84915618f5a81d7 Mon Sep 17 00:00:00 2001 From: Florian Lacreuse Date: Thu, 16 Dec 2021 09:27:00 +0100 Subject: Add sticky bottom utility (#35518) Co-authored-by: XhmikosR --- scss/helpers/_position.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss index 31851eb72..59103d943 100644 --- a/scss/helpers/_position.scss +++ b/scss/helpers/_position.scss @@ -16,7 +16,7 @@ z-index: $zindex-fixed; } -// Responsive sticky top +// Responsive sticky top and bottom @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); @@ -26,5 +26,11 @@ top: 0; z-index: $zindex-sticky; } + + .sticky#{$infix}-bottom { + position: sticky; + bottom: 0; + z-index: $zindex-sticky; + } } } -- cgit v1.2.3 From 4a66f229ed701d4ed8d6d5b7469984ab11d822f0 Mon Sep 17 00:00:00 2001 From: Andy Jiang Date: Thu, 16 Dec 2021 03:43:30 -0500 Subject: Add missing `border-radius` for `btn-group` (#35467) Co-authored-by: XhmikosR --- scss/_button-group.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'scss') diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 13aa0569a..47f0c1349 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -34,6 +34,8 @@ } .btn-group { + @include border-radius($btn-border-radius); + // Prevent double borders when buttons are next to each other > .btn:not(:first-child), > .btn-group:not(:first-child) { -- cgit v1.2.3 From f729e4c7d1d92d2888c76db0e2590f7adfb3a16b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Dec 2021 21:16:24 -0800 Subject: Convert alerts to CSS variables (#35401) Co-authored-by: XhmikosR --- scss/_alert.scss | 20 ++++++++++++++++---- scss/mixins/_alert.scss | 10 +++++++--- 2 files changed, 23 insertions(+), 7 deletions(-) (limited to 'scss') diff --git a/scss/_alert.scss b/scss/_alert.scss index 34f1e84ed..ed47806e2 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -3,11 +3,22 @@ // .alert { + // scss-docs-start alert-css-vars + --#{$variable-prefix}alert-bg: transparent; + --#{$variable-prefix}alert-padding: #{$alert-padding-y $alert-padding-x}; + --#{$variable-prefix}alert-margin-bottom: #{$alert-margin-bottom}; + --#{$variable-prefix}alert-color: #{$alert-padding-y $alert-padding-x}; + --#{$variable-prefix}alert-border-color: transparent; + --#{$variable-prefix}alert-border: #{$alert-border-width} solid var(--#{$variable-prefix}alert-border-color); + --#{$variable-prefix}alert-border-radius: #{$alert-border-radius}; + // scss-docs-end alert-css-vars + position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid transparent; - @include border-radius($alert-border-radius); + padding: var(--#{$variable-prefix}alert-padding); + margin-bottom: var(--#{$variable-prefix}alert-margin-bottom); + background-color: var(--#{$variable-prefix}alert-bg); + border: var(--#{$variable-prefix}alert-border); + border-radius: var(--#{$variable-prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list } // Headings for larger alerts @@ -47,6 +58,7 @@ $alert-background: shift-color($value, $alert-bg-scale); $alert-border: shift-color($value, $alert-border-scale); $alert-color: shift-color($value, $alert-color-scale); + @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); } diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index f3eb59511..eb84af128 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,8 +1,12 @@ // scss-docs-start alert-variant-mixin @mixin alert-variant($background, $border, $color) { - color: $color; - @include gradient-bg($background); - border-color: $border; + --#{$variable-prefix}alert-color: #{$color}; + --#{$variable-prefix}alert-bg: #{$background}; + --#{$variable-prefix}alert-border-color: #{$border}; + + @if $enable-gradients { + background-image: var(--#{$variable-prefix}gradient); + } .alert-link { color: shade-color($color, 20%); -- cgit v1.2.3 From a2c056e1f6d5925a5e6fef1f5d709f07a2a535d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 20 Dec 2021 13:22:29 +0100 Subject: fix(alerts): ensure color is set and used (#35571) --- scss/_alert.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_alert.scss b/scss/_alert.scss index ed47806e2..c8275e8d2 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -7,7 +7,7 @@ --#{$variable-prefix}alert-bg: transparent; --#{$variable-prefix}alert-padding: #{$alert-padding-y $alert-padding-x}; --#{$variable-prefix}alert-margin-bottom: #{$alert-margin-bottom}; - --#{$variable-prefix}alert-color: #{$alert-padding-y $alert-padding-x}; + --#{$variable-prefix}alert-color: inherit; --#{$variable-prefix}alert-border-color: transparent; --#{$variable-prefix}alert-border: #{$alert-border-width} solid var(--#{$variable-prefix}alert-border-color); --#{$variable-prefix}alert-border-radius: #{$alert-border-radius}; @@ -16,6 +16,7 @@ position: relative; padding: var(--#{$variable-prefix}alert-padding); margin-bottom: var(--#{$variable-prefix}alert-margin-bottom); + color: var(--#{$variable-prefix}alert-color); background-color: var(--#{$variable-prefix}alert-bg); border: var(--#{$variable-prefix}alert-border); border-radius: var(--#{$variable-prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list -- cgit v1.2.3 From 9680e1745672f35f6a63c6670b1668e46d5c575d Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 3 Jan 2022 15:03:42 +0200 Subject: Bump copyright year to 2022 (#35639) --- scss/bootstrap-grid.scss | 4 ++-- scss/bootstrap-reboot.scss | 4 ++-- scss/bootstrap-utilities.scss | 4 ++-- scss/bootstrap.scss | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) (limited to 'scss') diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index edca104af..e927ee491 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -1,7 +1,7 @@ /*! * Bootstrap Grid v5.1.3 (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss index 726758e92..b733597f7 100644 --- a/scss/bootstrap-reboot.scss +++ b/scss/bootstrap-reboot.scss @@ -1,7 +1,7 @@ /*! * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */ diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss index 6d7968e68..48428a10f 100644 --- a/scss/bootstrap-utilities.scss +++ b/scss/bootstrap-utilities.scss @@ -1,7 +1,7 @@ /*! * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 6a5d13166..794bbf5ed 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,7 +1,7 @@ /*! * Bootstrap v5.1.3 (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ -- cgit v1.2.3 From 0d054bb0f1484dbc0c778d3643e96e37ff46d708 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 5 Jan 2022 17:20:15 +0000 Subject: Remove explicit use of aria-hidden for offcanvas when closed (#35589) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove explicit use of aria-hidden & visibility for offcanvas when closed, handling it with css Co-authored-by: GeoSot Co-authored-by: Gaël Poupard --- scss/_offcanvas.scss | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index a089c2a08..5288fa9ce 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -12,6 +12,17 @@ outline: 0; @include box-shadow($offcanvas-box-shadow); @include transition(transform $offcanvas-transition-duration ease-in-out); + + &.showing, + &.show:not(.hiding) { + transform: none; + } + + &.showing, + &.hiding, + &.show { + visibility: visible; + } } .offcanvas-backdrop { @@ -77,7 +88,3 @@ border-top: $offcanvas-border-width solid $offcanvas-border-color; transform: translateY(100%); } - -.offcanvas.show { - transform: none; -} -- cgit v1.2.3 From 28c9002573e6cb6982697e50e1d1ebfe2ae0fc4c Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 15 Dec 2021 19:54:02 +0200 Subject: Modal: handle click event from backdrop callback --- scss/_modal.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_modal.scss b/scss/_modal.scss index 803b4d811..ac116171a 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -15,6 +15,7 @@ height: 100%; overflow-x: hidden; overflow-y: auto; + pointer-events: none; // Prevent Chrome on Windows from adding a focus outline. For details, see // https://github.com/twbs/bootstrap/pull/10951. outline: 0; -- cgit v1.2.3 From 43a9216a7fa90e0e427f9217b89d455019f2ad77 Mon Sep 17 00:00:00 2001 From: Ty Mick Date: Sun, 12 Dec 2021 09:19:19 -0800 Subject: Move `gap` utility API from "Flex" to "Spacing" The `gap` utility is described on the [Spacing page][1] but is not actually mentioned on the [Flex page][2] (apart from the [API section][3]). [1]: https://getbootstrap.com/docs/5.1/utilities/spacing/ [2]: https://getbootstrap.com/docs/5.1/utilities/flex/ [3]: https://getbootstrap.com/docs/5.1/utilities/flex/#utilities-api --- scss/_utilities.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 6498349b2..4d65bb88b 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -236,12 +236,6 @@ $utilities: map-merge( class: flex, values: wrap nowrap wrap-reverse ), - "gap": ( - responsive: true, - property: gap, - class: gap, - values: $spacers - ), "justify-content": ( responsive: true, property: justify-content, @@ -434,6 +428,13 @@ $utilities: map-merge( class: ps, values: $spacers ), + // Gap utility + "gap": ( + responsive: true, + property: gap, + class: gap, + values: $spacers + ), // scss-docs-end utils-spacing // Text // scss-docs-start utils-text -- cgit v1.2.3 From d2986daa120644a20cefb8ebe609d1404aa34796 Mon Sep 17 00:00:00 2001 From: Macinto5h Date: Sun, 14 Mar 2021 15:07:24 -0400 Subject: Add zebra striping for table columns Co-Authored-By: Macallan Camara <44030647+Macinto5h@users.noreply.github.com> Co-Authored-By: XhmikosR --- scss/_tables.scss | 9 +++++++++ scss/_variables.scss | 1 + 2 files changed, 10 insertions(+) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index 30e898b58..204511104 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -103,6 +103,7 @@ // // Default zebra-stripe styles (alternating gray and transparent backgrounds) +// For rows .table-striped { > tbody > tr:nth-of-type(#{$table-striped-order}) > * { --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); @@ -110,6 +111,14 @@ } } +// For columns +.table-striped-columns { + > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { + --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); + color: var(--#{$variable-prefix}table-striped-color); + } +} + // Active table // // The `.table-active` class can be added to highlight rows or cells diff --git a/scss/_variables.scss b/scss/_variables.scss index 7b128833f..0485ffe7c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -676,6 +676,7 @@ $table-border-width: $border-width !default; $table-border-color: $border-color !default; $table-striped-order: odd !default; +$table-striped-columns-order: even !default; $table-group-separator-color: currentColor !default; -- cgit v1.2.3 From ff2472becc4b0108d2d50bc6fc4cb78a6b3017d4 Mon Sep 17 00:00:00 2001 From: The Fake Cake Date: Mon, 7 Feb 2022 08:55:44 +0100 Subject: Set `cursor: default` on disabled `.form-check-label` (#35082) Fixes #35056 --- scss/forms/_form-check.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 6321b4100..a52a2e7c8 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -90,6 +90,7 @@ &[disabled], &:disabled { ~ .form-check-label { + cursor: default; opacity: $form-check-label-disabled-opacity; } } -- cgit v1.2.3 From c9cec89764bd3c8617dbde278e9aa6da5a3cc77c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 6 Jul 2021 19:34:12 -0700 Subject: Convert navbar to CSS variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Gaël Poupard --- scss/_navbar.scss | 200 ++++++++++++++++++++---------------------------------- 1 file changed, 75 insertions(+), 125 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index f65c9b9de..69d182640 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -1,29 +1,37 @@ -// Contents -// -// Navbar -// Navbar brand -// Navbar nav -// Navbar text -// Responsive navbar -// Navbar position -// Navbar themes - - // Navbar // // Provide a static navbar from which we expand to create full-width, fixed, and // other navbar variations. .navbar { + // scss-docs-start navbar-css-vars + --#{$variable-prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)}; + --#{$variable-prefix}navbar-padding-y: #{$navbar-padding-y}; + --#{$variable-prefix}navbar-color: #{$navbar-light-color}; + --#{$variable-prefix}navbar-hover-color: #{$navbar-light-hover-color}; + --#{$variable-prefix}navbar-disabled-color: #{$navbar-light-disabled-color}; + --#{$variable-prefix}navbar-active-color: #{$navbar-light-active-color}; + --#{$variable-prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y}; + --#{$variable-prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end}; + --#{$variable-prefix}navbar-brand-color: #{$navbar-light-brand-color}; + --#{$variable-prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color}; + --#{$variable-prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x}; + --#{$variable-prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y}; + --#{$variable-prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x}; + --#{$variable-prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size}; + --#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)}; + --#{$variable-prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color}; + --#{$variable-prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius}; + --#{$variable-prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width}; + --#{$variable-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-top: $navbar-padding-y; - padding-right: $navbar-padding-x; // default: null - padding-bottom: $navbar-padding-y; - padding-left: $navbar-padding-x; // default: null + padding: var(--#{$variable-prefix}navbar-padding-y) var(--#{$variable-prefix}navbar-padding-x); @include gradient-bg(); // Because flex properties aren't inherited, we need to redeclare these first @@ -54,15 +62,17 @@ // Used for brand, project, or site names. .navbar-brand { - padding-top: $navbar-brand-padding-y; - padding-bottom: $navbar-brand-padding-y; - margin-right: $navbar-brand-margin-end; - @include font-size($navbar-brand-font-size); + padding-top: var(--#{$variable-prefix}navbar-brand-padding-y); + padding-bottom: var(--#{$variable-prefix}navbar-brand-padding-y); + margin-right: var(--#{$variable-prefix}navbar-brand-margin-end); + @include font-size(var(--#{$variable-prefix}navbar-toggler-font-size)); + color: var(--#{$variable-prefix}navbar-brand-color); text-decoration: if($link-decoration == none, null, none); white-space: nowrap; &:hover, &:focus { + color: var(--#{$variable-prefix}navbar-brand-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); } } @@ -82,6 +92,21 @@ .nav-link { padding-right: 0; padding-left: 0; + color: var(--#{$variable-prefix}navbar-color); + + &:hover, + &:focus { + color: var(--#{$variable-prefix}navbar-hover-color); + } + + &.disabled { + color: var(--#{$variable-prefix}navbar-disabled-color); + } + } + + .show > .nav-link, + .nav-link.active { + color: var(--#{$variable-prefix}navbar-active-color); } .dropdown-menu { @@ -97,6 +122,13 @@ .navbar-text { padding-top: $nav-link-padding-y; padding-bottom: $nav-link-padding-y; + color: var(--#{$variable-prefix}navbar-color); + + a, + a:hover, + a:focus { + color: var(--#{$variable-prefix}navbar-active-color); + } } @@ -118,13 +150,14 @@ // Button for toggling the navbar when in its collapsed state .navbar-toggler { - padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; - @include font-size($navbar-toggler-font-size); + padding: var(--#{$variable-prefix}navbar-toggler-padding-y) var(--#{$variable-prefix}navbar-toggler-padding-x); + @include font-size(var(--#{$variable-prefix}navbar-toggler-font-size)); line-height: 1; + color: var(--#{$variable-prefix}navbar-color); background-color: transparent; // remove default button style - border: $border-width solid transparent; // remove default button style - @include border-radius($navbar-toggler-border-radius); - @include transition($navbar-toggler-transition); + border: $border-width solid var(--#{$variable-prefix}navbar-toggler-border-color); // remove default button style + @include border-radius(var(--#{$variable-prefix}navbar-toggler-border-radius)); + @include transition(var(--#{$variable-prefix}navbar-toggler-transition)); &:hover { text-decoration: none; @@ -133,7 +166,7 @@ &:focus { text-decoration: none; outline: 0; - box-shadow: 0 0 0 $navbar-toggler-focus-width; + box-shadow: 0 0 0 var(--#{$variable-prefix}navbar-toggler-focus-width); } } @@ -144,6 +177,7 @@ width: 1.5em; height: 1.5em; vertical-align: middle; + background-image: var(--#{$variable-prefix}navbar-toggler-icon-bg); background-repeat: no-repeat; background-position: center; background-size: 100%; @@ -176,8 +210,8 @@ } .nav-link { - padding-right: $navbar-nav-link-padding-x; - padding-left: $navbar-nav-link-padding-x; + padding-right: var(--#{$variable-prefix}navbar-nav-link-padding-x); + padding-left: var(--#{$variable-prefix}navbar-nav-link-padding-x); } } @@ -224,6 +258,12 @@ padding: 0; overflow-y: visible; } + + // Reset `background-color` in case `.bg-*` classes are used in offcanvas + .offcanvas, + .offcanvas-body { + background-color: transparent !important; // stylelint-disable-line declaration-no-important + } } } } @@ -234,103 +274,13 @@ // // Styles for switching between navbars with light or dark background. -// Dark links against a light background -.navbar-light { - .navbar-brand { - color: $navbar-light-brand-color; - - &:hover, - &:focus { - color: $navbar-light-brand-hover-color; - } - } - - .navbar-nav { - .nav-link { - color: $navbar-light-color; - - &:hover, - &:focus { - color: $navbar-light-hover-color; - } - - &.disabled { - color: $navbar-light-disabled-color; - } - } - - .show > .nav-link, - .nav-link.active { - color: $navbar-light-active-color; - } - } - - .navbar-toggler { - color: $navbar-light-color; - border-color: $navbar-light-toggler-border-color; - } - - .navbar-toggler-icon { - background-image: escape-svg($navbar-light-toggler-icon-bg); - } - - .navbar-text { - color: $navbar-light-color; - - a, - a:hover, - a:focus { - color: $navbar-light-active-color; - } - } -} - -// White links against a dark background .navbar-dark { - .navbar-brand { - color: $navbar-dark-brand-color; - - &:hover, - &:focus { - color: $navbar-dark-brand-hover-color; - } - } - - .navbar-nav { - .nav-link { - color: $navbar-dark-color; - - &:hover, - &:focus { - color: $navbar-dark-hover-color; - } - - &.disabled { - color: $navbar-dark-disabled-color; - } - } - - .show > .nav-link, - .nav-link.active { - color: $navbar-dark-active-color; - } - } - - .navbar-toggler { - color: $navbar-dark-color; - border-color: $navbar-dark-toggler-border-color; - } - - .navbar-toggler-icon { - background-image: escape-svg($navbar-dark-toggler-icon-bg); - } - - .navbar-text { - color: $navbar-dark-color; - a, - a:hover, - a:focus { - color: $navbar-dark-active-color; - } - } + --#{$variable-prefix}navbar-color: #{$navbar-dark-color}; + --#{$variable-prefix}navbar-hover-color: #{$navbar-dark-hover-color}; + --#{$variable-prefix}navbar-disabled-color: #{$navbar-dark-disabled-color}; + --#{$variable-prefix}navbar-active-color: #{$navbar-dark-active-color}; + --#{$variable-prefix}navbar-brand-color: #{$navbar-dark-brand-color}; + --#{$variable-prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color}; + --#{$variable-prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; + --#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; } -- cgit v1.2.3 From 27a0f40dc8ff890f2493c8886a39bc361f684dc3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Jul 2021 21:13:39 -0700 Subject: Add deprecation notice for .navbar-light --- scss/_navbar.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 69d182640..5f176b400 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -274,6 +274,10 @@ // // Styles for switching between navbars with light or dark background. +.navbar-light { + @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0"); +} + .navbar-dark { --#{$variable-prefix}navbar-color: #{$navbar-dark-color}; --#{$variable-prefix}navbar-hover-color: #{$navbar-dark-hover-color}; -- cgit v1.2.3 From 4308b67e59bfb47d386c3cc585e4a0fb759f6de6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 8 Feb 2022 12:33:39 -0800 Subject: Add `.form-check-reverse` modifier class (#33606) * Add .form-check-reverse modifier class * Update checks-radios.md Co-authored-by: XhmikosR --- scss/forms/_form-check.scss | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'scss') diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index a52a2e7c8..8e7cbed43 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -14,6 +14,18 @@ } } +.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 { width: $form-check-input-width; height: $form-check-input-width; @@ -130,6 +142,16 @@ } } } + + &.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 { -- cgit v1.2.3 From 0853778eba886a8ba7be09153df30e677402e69c Mon Sep 17 00:00:00 2001 From: Sebastian Podjasek Date: Tue, 8 Feb 2022 21:38:29 +0100 Subject: Support floating labels on `.form-control-plaintext` (#32840) * Support floating labels on `.form-control-plaintext` * Update floating-labels.md * Apply suggestions from code review Co-authored-by: XhmikosR Co-authored-by: Mark Otto --- scss/forms/_floating-labels.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 2f4295480..4f9fd194b 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -2,6 +2,7 @@ position: relative; > .form-control, + > .form-control-plaintext, > .form-select { height: $form-floating-height; line-height: $form-floating-line-height; @@ -19,8 +20,8 @@ @include transition($form-floating-transition); } - // stylelint-disable no-duplicate-selectors - > .form-control { + > .form-control, + > .form-control-plaintext { padding: $form-floating-padding-y $form-floating-padding-x; &::placeholder { @@ -46,6 +47,7 @@ > .form-control:focus, > .form-control:not(:placeholder-shown), + > .form-control-plaintext, > .form-select { ~ label { opacity: $form-floating-label-opacity; @@ -59,5 +61,10 @@ transform: $form-floating-label-transform; } } - // stylelint-enable no-duplicate-selectors + + > .form-control-plaintext { + ~ label { + border-width: $input-border-width 0; // Required to properly position label text - as explained above + } + } } -- cgit v1.2.3 From 761c4ff2353a42cbf325a3e1910921ced758e059 Mon Sep 17 00:00:00 2001 From: Anton Date: Tue, 1 Feb 2022 00:54:39 +0300 Subject: Fix overriding styles of `.list-group-item-action` ~~~html

red text!

still red text!

~~~ because `.list-group-item` declared after `.list-group-item-action` (order in attribute `class` no effect) --- scss/_list-group.scss | 51 ++++++++++++++++++++++++--------------------------- 1 file changed, 24 insertions(+), 27 deletions(-) (limited to 'scss') diff --git a/scss/_list-group.scss b/scss/_list-group.scss index dcd61d2b5..fbc8a3d36 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -23,33 +23,6 @@ } } - -// 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 `