mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-02 09:52:43 +02:00
Code Issues Releases Wiki Activity

prototype: handle data-bs-theme differently

Browse Source
This commit is contained in:
Julien Déramond
2023-10-13 15:16:38 +02:00
parent ce114117a8
commit ecab15443f
6 changed files with 411 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
scss/_accordion.scss
View File

@@ -15,11 +15,11 @@
--#{$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: #{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-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
@@ -148,11 +148,25 @@
}
}
@include color-mode() {
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
}
@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)};
}
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
}
}
/*
[data-bs-theme="light"] .accordion
[data-bs-theme="light"].accordion
[data-bs-theme="dark"] .accordion
[data-bs-theme="dark"].accordion
accordion data-bs-theme="dark"
<div data-bs-theme="light">
accordion
*/

20
scss/_root.scss
View File

@@ -1,5 +1,25 @@
:root,
[data-bs-theme] {
color: var(--#{$prefix}body-color);
background-color: var(--#{$prefix}body-bg);
}
// Note that some of these variables could be extracted into `:root` only selector since they are not modified by other color modes!
/*
:root {
// ...
--#{$prefix}box-shadow: #{$box-shadow};
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
// ...
*/
:root,
[data-bs-theme="light"] {
color-scheme: light;
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors

4
scss/_variables-dark.scss
View File

@@ -79,8 +79,8 @@ $form-invalid-border-color-dark: $red-300 !default;
// Accordion
//
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
$accordion-icon-color-dark: $purple !default;
$accordion-icon-active-color-dark: $pink !default;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;

8
scss/_variables.scss
View File

@@ -1365,8 +1365,8 @@ $card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-color: null !default;
$accordion-bg: null !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
@@ -1387,8 +1387,8 @@ $accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $body-color !default;
$accordion-icon-active-color: $primary-text-emphasis !default;
$accordion-icon-color: $orange !default;
$accordion-icon-active-color: $red !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;

11
scss/mixins/_color-mode.scss
View File

@@ -13,8 +13,15 @@
}
}
} @else {
[data-bs-theme="#{$mode}"] {
@content;
@if $mode == "light" {
:root,
[data-bs-theme="#{$mode}"] {
@content;
}
} @else {
[data-bs-theme="#{$mode}"] {
@content;
}
}
}
}