mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Start component changes

Browse Source
This commit is contained in:
Mark Otto
2022-04-27 17:18:04 -07:00
parent 540686868a
commit 9f6ff84aa5
17 changed files with 222 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_accordion.scss
+1 -1
View File
@@ -4,7 +4,7 @@
.accordion {
// scss-docs-start accordion-css-vars
--#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
scss/_close.scss
+8
View File
@@ -38,3 +38,11 @@
.btn-close-white {
filter: $btn-close-white-filter;
}
@if $enable-dark-mode {
[data-theme="dark"] {
.btn-close {
filter: $btn-close-white-filter;
}
}
}
scss/_root.scss
+20 -10
View File
@@ -88,23 +88,28 @@
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var
--#{$prefix}emphasis-color: #{$emphasis-color};
--#{$prefix}accent-color: #{$accent-color};
--#{$prefix}accent-bg: #{$accent-bg};
--#{$prefix}accent-border: #{$accent-border};
// TODO: move to form components? or make global?
--#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
--#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
}
[data-theme="dark"] {
--#{$prefix}primary: #{$blue-300};
--#{$prefix}success: #{$green-300};
--#{$prefix}danger: #{$red-300};
--#{$prefix}warning: #{$yellow-300};
--#{$prefix}info: #{$cyan-300};
// --#{$prefix}primary: #{$blue-300};
// --#{$prefix}success: #{$green-300};
// --#{$prefix}danger: #{$red-300};
// --#{$prefix}warning: #{$yellow-300};
// --#{$prefix}info: #{$cyan-300};
--#{$prefix}primary-rgb: #{to-rgb($blue-300)};
--#{$prefix}success-rgb: #{to-rgb($green-300)};
--#{$prefix}danger-rgb: #{to-rgb($red-300)};
--#{$prefix}warning-rgb: #{to-rgb($yellow-300)};
--#{$prefix}info-rgb: #{to-rgb($cyan-300)};
// --#{$prefix}primary-rgb: #{to-rgb($blue-300)};
// --#{$prefix}success-rgb: #{to-rgb($green-300)};
// --#{$prefix}danger-rgb: #{to-rgb($red-300)};
// --#{$prefix}warning-rgb: #{to-rgb($yellow-300)};
// --#{$prefix}info-rgb: #{to-rgb($cyan-300)};
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
@@ -121,6 +126,11 @@
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
--#{$prefix}emphasis-color: #{$emphasis-color-dark};
--#{$prefix}accent-color: #{$accent-color-dark};
--#{$prefix}accent-bg: #{$accent-bg-dark};
--#{$prefix}accent-border: #{$accent-border-dark};
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
scss/_variables-dark.scss
+25
View File
@@ -0,0 +1,25 @@
// Dark color mode variables
//
// Custom variables for the `[data-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
$body-color-dark: $gray-500 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$emphasis-color-dark: $white !default;
$accent-bg-dark: $blue-300 !default;
$accent-color-dark: color-contrast($accent-bg-dark) !default;
$accent-border-dark: $blue-400 !default;
$border-color-dark: $gray-700 !default;
$headings-color-dark: #fff !default;
$link-color-dark: $blue-300 !default;
$link-hover-color-dark: $blue-200 !default;
$code-color-dark: $pink-300 !default;
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: 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-dark}'/></svg>") !default;
scss/_variables.scss
+78 -84
View File
@@ -350,6 +350,7 @@ $enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;
// Prefix for :root CSS variables
@@ -402,20 +403,17 @@ $body-text-align: null !default;
$body-color: $gray-900 !default;
$body-bg: $white !default;
$body-color-dark: $gray-500 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color: rgba($body-color, .75) !default;
$body-secondary-bg: $gray-200 !default;
$body-tertiary-color: rgba($body-color, .5) !default;
$body-tertiary-bg: $gray-100 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$emphasis-color: $black !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$accent-bg: $blue !default;
$accent-color: color-contrast($accent-bg) !default;
$accent-border: $blue-500 !default;
// Links
//
@@ -430,9 +428,6 @@ $link-hover-decoration: null !default;
$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;
$link-color-dark: $blue-300 !default;
$link-hover-color-dark: $blue-200 !default;
// Paragraphs
//
// Style p element.
@@ -504,8 +499,7 @@ $border-widths: (
5: 5px
) !default;
$border-style: solid !default;
$border-color: rgba($black, .15) !default;
$border-color-dark: rgba($white, .15) !default;
$border-color: $gray-300 !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
@@ -609,7 +603,6 @@ $headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: null !default;
$headings-color-dark: #fff !default;
// scss-docs-end headings-variables
// scss-docs-start display-headings
@@ -934,7 +927,7 @@ $input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
@@ -949,7 +942,7 @@ $form-select-line-height: $input-line-height !default;
$form-select-color: $input-color !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-color: null !default;
$form-select-disabled-bg: $gray-200 !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$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
@@ -986,7 +979,7 @@ $form-select-transition: $input-transition !default;
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: $gray-300 !default;
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: $box-shadow-inset !default;
@@ -999,14 +992,14 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
$form-file-button-bg: $input-group-addon-bg !default;
$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
@@ -1078,19 +1071,19 @@ $nav-link-font-weight: null !default;
$nav-link-color: var(--#{$prefix}link-color) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !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-link-disabled-color: var(--#{$prefix}secondary-color) !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-width: $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;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-pills-link-active-color: var(--#{$prefix}accent-color) !default;
$nav-pills-link-active-bg: var(--#{$prefix}accent-bg) !default;
// scss-docs-end nav-variables
@@ -1125,10 +1118,10 @@ $navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
$navbar-light-color: rgba($black, .55) !default;
$navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
$navbar-light-color: var(--#{$prefix}secondary-color) !default;
$navbar-light-hover-color: var(--#{$prefix}body-color) !default;
$navbar-light-active-color: var(--#{$prefix}emphasis-color) !default;
$navbar-light-disabled-color: var(--#{$prefix}tertiary-color) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;
@@ -1208,28 +1201,28 @@ $pagination-padding-x-lg: 1.5rem !default;
$pagination-font-size: $font-size-base !default;
$pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: $white !default;
$pagination-border-radius: $border-radius !default;
$pagination-border-width: $border-width !default;
$pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: $gray-300 !default;
$pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
$pagination-focus-bg: $gray-200 !default;
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-active-color: var(--#{$prefix}accent-color) !default;
$pagination-active-bg: var(--#{$prefix}accent-bg) !default;
$pagination-active-border-color: var(--#{$prefix}accent-bg) !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@@ -1251,18 +1244,18 @@ $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) !default;
$card-border-radius: $border-radius !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-bg: var(--#{$prefix}body-bg) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
@@ -1273,10 +1266,10 @@ $card-group-margin: $grid-gutter-width * .5 !default;
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-bg: $body-bg !default;
$accordion-border-width: $border-width !default;
$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: $border-radius !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
@@ -1308,9 +1301,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-color: var(--#{$prefix}body-bg) !default;
$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default;
@@ -1338,21 +1331,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-bg: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: $box-shadow !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: shade-color($popover-bg, 6%) !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: var(--#{$prefix}heading-color) !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
$popover-body-color: $body-color !default;
$popover-body-color: var(--#{$prefix}body-color) !default;
$popover-body-padding-y: $spacer !default;
$popover-body-padding-x: $spacer !default;
@@ -1363,7 +1356,7 @@ $popover-arrow-height: .5rem !default;
// fusv-disable
// Deprecated in Bootstrap 5.2.0 for CSS variables
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
$popover-arrow-outer-color: var(--#{$prefix}border-color) !default;
// fusv-enable
@@ -1375,16 +1368,16 @@ $toast-padding-x: .75rem !default;
$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-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-border-radius: var(--#{$prefix}border-radius) !default;
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default;
$toast-header-border-color: rgba($black, .05) !default;
$toast-header-color: var(--#{$prefix}secondary-color) !default;
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
@@ -1413,10 +1406,10 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}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;
$modal-content-box-shadow-sm-up: $box-shadow !default;
@@ -1469,9 +1462,9 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: $box-shadow-inset !default;
$progress-bg: var(--#{$prefix}secondary-bg) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
@@ -1482,9 +1475,9 @@ $progress-bar-transition: width .6s ease !default;
// List group
// scss-docs-start list-group-variables
$list-group-color: $gray-900 !default;
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-color: var(--#{$prefix}body-color) !default;
$list-group-bg: var(--#{$prefix}body-bg) !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
@@ -1493,18 +1486,18 @@ $list-group-item-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 40% !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-600 !default;
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $body-color !default;
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
$list-group-action-active-bg: $gray-200 !default;
// scss-docs-end list-group-variables
@@ -1637,7 +1630,6 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
$code-font-size: $small-font-size !default;
$code-color: $pink !default;
$code-color-dark: $pink-300 !default;
$kbd-padding-y: .1875rem !default;
$kbd-padding-x: .375rem !default;
@@ -1647,3 +1639,5 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
$pre-color: null !default;
@import "variables-dark";
scss/forms/_form-check.scss
+9
View File
@@ -173,3 +173,12 @@
}
}
}
@if $enable-dark-mode {
[data-theme="dark"] {
// Use `:not()` to keep from having to override subsequent embedded SVGs
.form-switch .form-check-input:not(:checked):not(:focus) {
background-image: escape-svg($form-switch-bg-image-dark);
}
}
}
scss/forms/_form-select.scss
+8
View File
@@ -69,3 +69,11 @@
@include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg);
}
@if $enable-dark-mode {
[data-theme="dark"] {
.form-select {
background-image: escape-svg($form-select-indicator-dark);
}
}
}