Skip to content

Commit 012a234

Browse files
mrholekmrholek
committed
refactor: improve styles
1 parent 45c3684 commit 012a234

File tree

7 files changed

+26
-17
lines changed

7 files changed

+26
-17
lines changed

‎scss/_buttons.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
162162
--#{$prefix}btn-disabled-border-color: transparent;
163163
--#{$prefix}btn-box-shadow: none;
164-
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
164+
--#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
165165

166166
text-decoration: $link-decoration;
167167
@if $enable-gradients {

‎scss/_reboot.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,7 @@ small {
217217

218218
mark {
219219
padding: $mark-padding;
220+
color: var(--#{$prefix}highlight-color);
220221
background-color: var(--#{$prefix}highlight-bg);
221222
}
222223

‎scss/_root.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@
109109
}
110110

111111
--#{$prefix}code-color: #{$code-color};
112+
--#{$prefix}highlight-color: #{$mark-color};
112113
--#{$prefix}highlight-bg: #{$mark-bg};
113114

114115
// scss-docs-start root-border-var
@@ -201,6 +202,8 @@
201202
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
202203

203204
--#{$prefix}code-color: #{$code-color-dark};
205+
--#{$prefix}highlight-color: #{$mark-color-dark};
206+
--#{$prefix}highlight-bg: #{$mark-bg-dark};
204207

205208
--#{$prefix}border-color: #{$border-color-dark};
206209
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

‎scss/_utilities.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,9 @@ $utilities: map-merge(
7878
property: box-shadow,
7979
class: shadow,
8080
values: (
81-
null: $box-shadow,
82-
sm: $box-shadow-sm,
83-
lg: $box-shadow-lg,
81+
null: var(--#{$prefix}box-shadow),
82+
sm: var(--#{$prefix}box-shadow-sm),
83+
lg: var(--#{$prefix}box-shadow-lg),
8484
none: none,
8585
)
8686
),

‎scss/_variables-dark.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,8 @@ $headings-color-dark: inherit !default;
105105
$link-color-dark: $primary-dark !default;
106106
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
107107
$code-color-dark: tint-color($code-color, 40%) !default;
108+
$mark-color-dark: $body-color-dark !default;
109+
$mark-bg-dark: $yellow-800 !default;
108110

109111

110112
//

‎scss/_variables.scss‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -726,6 +726,7 @@ $dt-font-weight: $font-weight-bold !default;
726726
$list-inline-padding: .5rem !default;
727727

728728
$mark-padding: .1875em !default;
729+
$mark-color: $body-color !default;
729730
$mark-bg: $yellow-100 !default;
730731
// scss-docs-end type-variables
731732

@@ -749,25 +750,25 @@ $table-cell-padding-x-sm: .25rem !default;
749750

750751
$table-cell-vertical-align: top !default;
751752

752-
$table-color: var(--#{$prefix}body-color) !default;
753+
$table-color: var(--#{$prefix}emphasis-color) !default;
753754
$table-bg: var(--#{$prefix}body-bg) !default;
754755
$table-accent-bg: transparent !default;
755756

756757
$table-th-font-weight: null !default;
757758

758759
$table-striped-color: $table-color !default;
759760
$table-striped-bg-factor: .05 !default;
760-
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
761+
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
761762

762763
$table-active-color: $table-color !default;
763764
$table-active-bg-factor: .1 !default;
764-
$table-active-bg: rgba($black, $table-active-bg-factor) !default;
765+
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
765766

766767
$table-hover-color: $table-color !default;
767768
$table-hover-bg-factor: .075 !default;
768-
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
769+
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
769770

770-
$table-border-factor: .1 !default;
771+
$table-border-factor: .2 !default;
771772
$table-border-width: var(--#{$prefix}border-width) !default;
772773
$table-border-color: var(--#{$prefix}border-color) !default;
773774

@@ -857,6 +858,7 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
857858
$btn-link-color: var(--#{$prefix}link-color) !default;
858859
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
859860
$btn-link-disabled-color: $gray-600 !default;
861+
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
860862

861863
// Allows for customizing button radius independently from global border radius
862864
$btn-border-radius: var(--#{$prefix}border-radius) !default;
@@ -942,7 +944,7 @@ $input-disabled-border-color: null !default;
942944
$input-color: var(--#{$prefix}body-color) !default;
943945
$input-border-color: var(--#{$prefix}border-color) !default;
944946
$input-border-width: $input-btn-border-width !default;
945-
$input-box-shadow: $box-shadow-inset !default;
947+
$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
946948

947949
$input-border-radius: var(--#{$prefix}border-radius) !default;
948950
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
@@ -1071,7 +1073,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i
10711073
$form-select-border-width: $input-border-width !default;
10721074
$form-select-border-color: $input-border-color !default;
10731075
$form-select-border-radius: $input-border-radius !default;
1074-
$form-select-box-shadow: $box-shadow-inset !default;
1076+
$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
10751077

10761078
$form-select-focus-border-color: $input-focus-border-color !default;
10771079
$form-select-focus-width: $input-focus-width !default;
@@ -1094,9 +1096,9 @@ $form-select-transition: $input-transition !default;
10941096
$form-range-track-width: 100% !default;
10951097
$form-range-track-height: .5rem !default;
10961098
$form-range-track-cursor: pointer !default;
1097-
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
1099+
$form-range-track-bg: var(--#{$prefix}secondary-bg) !default;
10981100
$form-range-track-border-radius: 1rem !default;
1099-
$form-range-track-box-shadow: $box-shadow-inset !default;
1101+
$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
11001102

11011103
$form-range-thumb-width: 1rem !default;
11021104
$form-range-thumb-height: $form-range-thumb-width !default;
@@ -1299,7 +1301,7 @@ $dropdown-border-width: var(--#{$prefix}border-width) !default;
12991301
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
13001302
$dropdown-divider-bg: $dropdown-border-color !default;
13011303
$dropdown-divider-margin-y: $spacer * .5 !default;
1302-
$dropdown-box-shadow: $box-shadow !default;
1304+
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
13031305

13041306
$dropdown-link-color: var(--#{$prefix}body-color) !default;
13051307
$dropdown-link-hover-color: $dropdown-link-color !default;
@@ -1488,7 +1490,7 @@ $popover-border-width: var(--#{$prefix}border-width) !default;
14881490
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
14891491
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
14901492
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
1491-
$popover-box-shadow: $box-shadow !default;
1493+
$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
14921494

14931495
$popover-header-font-size: $font-size-base !default;
14941496
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
@@ -1566,8 +1568,8 @@ $modal-content-border-color: var(--#{$prefix}border-color-translucent) !d
15661568
$modal-content-border-width: var(--#{$prefix}border-width) !default;
15671569
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
15681570
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1569-
$modal-content-box-shadow-xs: $box-shadow-sm !default;
1570-
$modal-content-box-shadow-sm-up: $box-shadow !default;
1571+
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
1572+
$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
15711573

15721574
$modal-backdrop-bg: $black !default;
15731575
$modal-backdrop-opacity: .5 !default;

‎scss/forms/_form-check.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
.form-check-input {
3030
--#{$prefix}form-check-bg: #{$form-check-input-bg};
3131

32+
flex-shrink: 0;
3233
width: $form-check-input-width;
3334
height: $form-check-input-width;
3435
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height

0 commit comments

Comments
 (0)