Skip to content

Commit 4bf4e35

Browse files
mrholekmrholek
committed
refactor: remove elevations from components and update elevation utility classes
1 parent c119ba8 commit 4bf4e35

13 files changed

+6
-92
lines changed

‎scss/_card.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
3838
@include border-radius(var(--#{$prefix}card-border-radius));
3939
@include box-shadow(var(--#{$prefix}card-box-shadow));
40-
@include elevation(1);
4140

4241
> hr {
4342
margin-right: 0;
@@ -238,11 +237,3 @@
238237
}
239238
}
240239
}
241-
242-
@if $enable-dark-mode and $enable-elevations {
243-
@include color-mode(dark) {
244-
.card:not([class*="border"]):not([class*="elevation-0"]) {
245-
background-color: color-mix(in srgb, var(--#{$prefix}card-bg) 98%, #fff);
246-
}
247-
}
248-
}

‎scss/_date-picker.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@
170170
background-clip: padding-box;
171171
border: var(--#{$prefix}date-picker-dropdown-border-width) solid var(--#{$prefix}date-picker-dropdown-border-color);
172172
@include border-radius(var(--#{$prefix}date-picker-dropdown-border-radius));
173-
@include elevation(4);
174173

175174
.date-picker.show & {
176175
display: block;
@@ -278,11 +277,3 @@
278277
}
279278
}
280279
}
281-
282-
@if $enable-dark-mode and $enable-elevations {
283-
@include color-mode(dark) {
284-
.date-picker-dropdown {
285-
background-color: color-mix(in srgb, var(--#{$prefix}date-picker-dropdown-bg) 96%, #fff);
286-
}
287-
}
288-
}

‎scss/_dropdown.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@
6161
border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
6262
@include border-radius(var(--#{$prefix}dropdown-border-radius));
6363
@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
64-
@include elevation(4);
6564

6665
&[data-coreui-popper] {
6766
top: 100%;
@@ -249,11 +248,3 @@
249248
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
250249
// scss-docs-end dropdown-dark-css-vars
251250
}
252-
253-
@if $enable-dark-mode and $enable-elevations {
254-
@include color-mode(dark) {
255-
.dropdown-menu {
256-
background-color: color-mix(in srgb, var(--#{$prefix}dropdown-bg) 96%, #fff);
257-
}
258-
}
259-
}

‎scss/_footer.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,4 @@
2424
position: sticky;
2525
bottom: 0;
2626
z-index: $zindex-fixed;
27-
@include elevation(2, "top");
2827
}

‎scss/_header.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@
7373
position: sticky;
7474
top: 0;
7575
z-index: $zindex-fixed - 1;
76-
@include elevation(2);
7776
}
7877
}
7978

‎scss/_mixins.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@
3939
// Skins
4040
@import "mixins/border-radius";
4141
@import "mixins/box-shadow";
42-
@import "mixins/elevation";
4342
@import "mixins/gradients";
4443
@import "mixins/transition";
4544

‎scss/_modal.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@
107107
@include box-shadow(var(--#{$prefix}modal-box-shadow));
108108
// Remove focus outline from opened modal
109109
outline: 0;
110-
@include elevation(24);
111110
}
112111

113112
// Modal background

‎scss/_subheader.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
position: sticky;
1515
top: 0;
1616
z-index: $zindex-fixed - 1;
17-
@include elevation(2);
1817
}
1918

2019
// Subheader nav

‎scss/_time-picker.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,6 @@
164164
background-clip: padding-box;
165165
border: var(--#{$prefix}time-picker-dropdown-border-width) solid var(--#{$prefix}time-picker-dropdown-border-color);
166166
@include border-radius(var(--#{$prefix}time-picker-dropdown-border-radius));
167-
@include elevation(4);
168167

169168
.time-picker.show & {
170169
display: block;
@@ -288,11 +287,3 @@
288287
}
289288
}
290289
}
291-
292-
@if $enable-dark-mode and $enable-elevations {
293-
@include color-mode(dark) {
294-
.time-picker-dropdown {
295-
background-color: color-mix(in srgb, var(--#{$prefix}time-picker-dropdown-bg) 96%, #fff);
296-
}
297-
}
298-
}

‎scss/_variables.scss

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -447,7 +447,6 @@ $enable-validation-icons: true !default;
447447
$enable-negative-margins: false !default;
448448
$enable-deprecation-messages: true !default;
449449
$enable-important-utilities: true !default;
450-
$enable-elevations: true !default;
451450
$enable-ltr: true !default;
452451
$enable-rtl: false !default;
453452

@@ -510,14 +509,9 @@ $elevations: (
510509
0: unquote("none"),
511510
1: unquote("0 1px 1px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 2px 1px -1px rgba(var(--#{$prefix}elevation-base-color), .12), 0 1px 3px 0 rgba(var(--#{$prefix}elevation-base-color), .20)"),
512511
2: unquote("0 2px 2px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 1px -2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 1px 5px 0 rgba(var(--#{$prefix}elevation-base-color), .20)"),
513-
3: unquote("0 3px 4px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 3px -2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 1px 8px 0 rgba(var(--#{$prefix}elevation-base-color), .20)"),
514-
4: unquote("0 4px 5px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 1px 10px 0 rgba(var(--#{$prefix}elevation-base-color), .12), 0 2px 4px -1px rgba(var(--#{$prefix}elevation-base-color), .20)"),
515-
6: unquote("0 6px 10px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 1px 18px 0 rgba(var(--#{$prefix}elevation-base-color), .12), 0 3px 5px -1px rgba(var(--#{$prefix}elevation-base-color), .20)"),
516-
8: unquote("0 8px 10px 1px rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 14px 2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 5px 5px -3px rgba(var(--#{$prefix}elevation-base-color), .20)"),
517-
9: unquote("0 9px 12px 1px rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 16px 2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 5px 6px -3px rgba(var(--#{$prefix}elevation-base-color), .20)"),
518-
12: unquote("0 12px 17px 2px rgba(var(--#{$prefix}elevation-base-color), .14), 0 5px 22px 4px rgba(var(--#{$prefix}elevation-base-color), .12), 0 7px 8px -4px rgba(var(--#{$prefix}elevation-base-color), .20)"),
519-
16: unquote("0 16px 24px 2px rgba(var(--#{$prefix}elevation-base-color), .14), 0 6px 30px 5px rgba(var(--#{$prefix}elevation-base-color), .12), 0 8px 10px -5px rgba(var(--#{$prefix}elevation-base-color), .20)"),
520-
24: unquote("0 24px 38px 3px rgba(var(--#{$prefix}elevation-base-color), .14), 0 9px 46px 8px rgba(var(--#{$prefix}elevation-base-color), .12), 0 11px 15px -7px rgba(var(--#{$prefix}elevation-base-color), .20)")
512+
3: unquote("0 6px 10px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 1px 18px 0 rgba(var(--#{$prefix}elevation-base-color), .12), 0 3px 5px -1px rgba(var(--#{$prefix}elevation-base-color), .20)"),
513+
4: unquote("0 8px 10px 1px rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 14px 2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 5px 5px -3px rgba(var(--#{$prefix}elevation-base-color), .20)"),
514+
5: unquote("0 12px 17px 2px rgba(var(--#{$prefix}elevation-base-color), .14), 0 5px 22px 4px rgba(var(--#{$prefix}elevation-base-color), .12), 0 7px 8px -4px rgba(var(--#{$prefix}elevation-base-color), .20)"),
521515
) !default;
522516

523517
// Body
@@ -654,7 +648,7 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
654648
// scss-docs-end box-shadow-variables
655649

656650
$component-active-color: $high-emphasis-inverse !default;
657-
$component-active-bg: $primary !default;
651+
$component-active-bg: var(--#{$prefix}primary) !default;
658652

659653
// scss-docs-start focus-ring-variables
660654
$focus-ring-width: .25rem !default;
@@ -1028,7 +1022,7 @@ $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !defau
10281022
$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
10291023

10301024
$input-focus-bg: $input-bg !default;
1031-
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
1025+
$input-focus-border-color: tint-color($primary, 50%) !default;
10321026
$input-focus-color: $input-color !default;
10331027
$input-focus-width: $input-btn-focus-width !default;
10341028
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
@@ -1334,7 +1328,7 @@ $form-range-thumb-border-radius: 1rem !default;
13341328
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
13351329
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
13361330
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
1337-
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
1331+
$form-range-thumb-active-bg: tint-color($primary, 70%) !default;
13381332
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
13391333
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
13401334
// scss-docs-end form-range-variables

0 commit comments

Comments
 (0)