From 7cb376a8fd2133d28960c3a1a1fa2b5016747bae Mon Sep 17 00:00:00 2001 From: jonnysp Date: Sun, 23 Oct 2022 06:13:13 +0200 Subject: Use `--bs-border-width` for some components (#37344) * Update _variables.scss adds variable border-width to some components. to combine utility borders (border-1, boder-2, ...) on these. like "card border-2", "alert border-4" , ... * add more border-width * fix lint & bundlewatch --- scss/_tables.scss | 2 +- scss/_variables.scss | 30 +++++++++++++++--------------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index 1fdd43c6bb..6c981f6c2f 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -42,7 +42,7 @@ } .table-group-divider { - border-top: ($table-border-width * 2) solid $table-group-separator-color; + border-top: calc($table-border-width * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list } // diff --git a/scss/_variables.scss b/scss/_variables.scss index dd4bf01261..fa25b8e72a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -637,7 +637,7 @@ $hr-height: null !default; // Deprecated in v5.2.0 // fusv-enable $hr-border-color: null !default; // Allows for inherited colors -$hr-border-width: $border-width !default; +$hr-border-width: var(--#{$prefix}border-width) !default; $hr-opacity: .25 !default; $legend-margin-bottom: .5rem !default; @@ -684,7 +684,7 @@ $table-hover-bg-factor: .075 !default; $table-hover-bg: rgba($black, $table-hover-bg-factor) !default; $table-border-factor: .1 !default; -$table-border-width: $border-width !default; +$table-border-width: var(--#{$prefix}border-width) !default; $table-border-color: var(--#{$prefix}border-color) !default; $table-striped-order: odd !default; @@ -736,7 +736,7 @@ $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; $input-btn-font-size-lg: $font-size-lg !default; -$input-btn-border-width: $border-width !default; +$input-btn-border-width: var(--#{$prefix}border-width) !default; // scss-docs-end input-btn-variables @@ -848,7 +848,7 @@ $input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: $gray-600 !default; $input-plaintext-color: $body-color !default; -$input-height-border: $input-border-width * 2 !default; +$input-height-border: calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default; $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default; @@ -1078,7 +1078,7 @@ $nav-link-transition: color .15s ease-in-out, background-color .15 $nav-link-disabled-color: $gray-600 !default; $nav-tabs-border-color: $gray-300 !default; -$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-width: var(--#{$prefix}border-width) !default; $nav-tabs-border-radius: $border-radius !default; $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; $nav-tabs-link-active-color: $gray-700 !default; @@ -1149,8 +1149,8 @@ $dropdown-color: $body-color !default; $dropdown-bg: $white !default; $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default; $dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; +$dropdown-border-width: var(--#{$prefix}border-width) !default; +$dropdown-inner-border-radius: calc($dropdown-border-radius - $dropdown-border-width) !default; // stylelint-disable-line function-disallowed-list $dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-margin-y: $spacer * .5 !default; $dropdown-box-shadow: $box-shadow !default; @@ -1247,7 +1247,7 @@ $placeholder-opacity-min: .2 !default; $card-spacer-y: $spacer !default; $card-spacer-x: $spacer !default; $card-title-spacer-y: $spacer * .5 !default; -$card-border-width: $border-width !default; +$card-border-width: var(--#{$prefix}border-width) !default; $card-border-color: var(--#{$prefix}border-color-translucent) !default; $card-border-radius: $border-radius !default; $card-box-shadow: null !default; @@ -1270,7 +1270,7 @@ $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; $accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon $accordion-bg: $body-bg !default; -$accordion-border-width: $border-width !default; +$accordion-border-width: var(--#{$prefix}border-width) !default; $accordion-border-color: var(--#{$prefix}border-color) !default; $accordion-border-radius: $border-radius !default; $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default; @@ -1336,7 +1336,7 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default; $popover-font-size: $font-size-sm !default; $popover-bg: $white !default; $popover-max-width: 276px !default; -$popover-border-width: $border-width !default; +$popover-border-width: var(--#{$prefix}border-width) !default; $popover-border-color: var(--#{$prefix}border-color-translucent) !default; $popover-border-radius: $border-radius-lg !default; $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; @@ -1372,7 +1372,7 @@ $toast-padding-y: .5rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; $toast-background-color: rgba($white, .85) !default; -$toast-border-width: $border-width !default; +$toast-border-width: var(--#{$prefix}border-width) !default; $toast-border-color: var(--#{$prefix}border-color-translucent) !default; $toast-border-radius: $border-radius !default; $toast-box-shadow: $box-shadow !default; @@ -1411,7 +1411,7 @@ $modal-title-line-height: $line-height-base !default; $modal-content-color: null !default; $modal-content-bg: $white !default; $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default; -$modal-content-border-width: $border-width !default; +$modal-content-border-width: var(--#{$prefix}border-width) !default; $modal-content-border-radius: $border-radius-lg !default; $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; $modal-content-box-shadow-xs: $box-shadow-sm !default; @@ -1452,7 +1452,7 @@ $alert-padding-x: $spacer !default; $alert-margin-bottom: 1rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: $font-weight-bold !default; -$alert-border-width: $border-width !default; +$alert-border-width: var(--#{$prefix}border-width) !default; $alert-bg-scale: -80% !default; $alert-border-scale: -70% !default; $alert-color-scale: 40% !default; @@ -1481,7 +1481,7 @@ $progress-bar-transition: width .6s ease !default; $list-group-color: $gray-900 !default; $list-group-bg: $white !default; $list-group-border-color: rgba($black, .125) !default; -$list-group-border-width: $border-width !default; +$list-group-border-width: var(--#{$prefix}border-width) !default; $list-group-border-radius: $border-radius !default; $list-group-item-padding-y: $spacer * .5 !default; @@ -1510,7 +1510,7 @@ $list-group-action-active-bg: $gray-200 !default; // scss-docs-start thumbnail-variables $thumbnail-padding: .25rem !default; $thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; +$thumbnail-border-width: var(--#{$prefix}border-width) !default; $thumbnail-border-color: var(--#{$prefix}border-color) !default; $thumbnail-border-radius: $border-radius !default; $thumbnail-box-shadow: $box-shadow-sm !default; -- cgit v1.2.3