Skip to content

Commit e81ee89

Browse files
mrholekmrholek
committed
refactor: update CSS & SCSS variables
1 parent f901ec4 commit e81ee89

File tree

2 files changed

+42
-33
lines changed

2 files changed

+42
-33
lines changed

‎scss/_nav.scss

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,32 +135,41 @@
135135
}
136136
}
137137

138+
138139
//
139140
// Underline
140141
//
141142

142143
.nav-underline {
143-
border-bottom: $nav-underline-border-width solid var(--#{$prefix}nav-underline-border-color, $nav-underline-border-color);
144+
// scss-docs-start nav-underline-css-vars
145+
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
146+
--#{$prefix}nav-underline-border-color: #{$nav-underline-border-color};
147+
--#{$prefix}nav-underline-link-color: #{$nav-underline-link-color};
148+
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
149+
--#{$prefix}nav-underline-link-active-border-color: #{$nav-underline-link-active-border-color};
150+
// scss-docs-end nav-underline-css-vars
151+
152+
border-bottom: var(--#{$prefix}nav-underline-border-width) solid var(--#{$prefix}nav-underline-border-color);
144153

145154
.nav-item {
146-
margin-bottom: $nav-underline-border-width * -1;
155+
margin-bottom: calc(var(--#{$prefix}nav-underline-border-width) * -1); // stylelint-disable-line function-disallowed-list
147156
}
148157

149158
.nav-link {
150-
color: var(--#{$prefix}nav-underline-link-color, $nav-underline-link-color);
151-
border-bottom: $nav-underline-border-width solid transparent;
159+
color: var(--#{$prefix}nav-underline-link-color);
160+
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
152161

153162
&:hover,
154163
&:focus {
155-
border-color: var(--#{$prefix}nav-underline-link-active-border-color, $nav-underline-link-active-border-color);
164+
border-color: var(--#{$prefix}nav-underline-link-active-border-color);
156165
}
157166
}
158167

159168
.nav-link.active,
160169
.show > .nav-link {
161-
color: var(--#{$prefix}nav-underline-link-active-color, $nav-underline-link-active-color);
170+
color: var(--#{$prefix}nav-underline-link-active-color);
162171
background: transparent;
163-
border-color: var(--#{$prefix}nav-underline-link-active-border-color, $nav-underline-link-active-border-color);
172+
border-color: var(--#{$prefix}nav-underline-link-active-border-color);;
164173
}
165174
}
166175

‎scss/_variables.scss

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1457,11 +1457,11 @@ $nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
14571457
$nav-pills-link-active-color: $component-active-color !default;
14581458
$nav-pills-link-active-bg: $component-active-bg !default;
14591459

1460-
$nav-underline-border-color: $gray-300 !default;
1461-
$nav-underline-border-width: $border-width * 2 !default;
1462-
$nav-underline-link-color: $gray-700 !default;
1463-
$nav-underline-link-active-color: $primary !default;
1464-
$nav-underline-link-active-border-color: $primary !default;
1460+
$nav-underline-border-color: var(--#{$prefix}border-color) !default;
1461+
$nav-underline-border-width: calc(var(--#{$prefix}border-width) * 2) !default; // stylelint-disable-line function-disallowed-list
1462+
$nav-underline-link-color: var(--#{$prefix}secondary-color) !default;
1463+
$nav-underline-link-active-color: var(--#{$prefix}primary) !default;
1464+
$nav-underline-link-active-border-color: var(--#{$prefix}primary) !default;
14651465
// scss-docs-end nav-variables
14661466

14671467

@@ -2172,48 +2172,48 @@ $sidebar-toggler-hover-bg: rgba(0, 0, 0, .3) !default;
21722172
$sidebar-toggler-indicator-hover-color: $sidebar-nav-link-hover-color !default;
21732173
$sidebar-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
21742174

2175-
$sidebar-light-color: var(--#{$prefix}body-color) !default;
2176-
$sidebar-light-bg: var(--#{$prefix}body-bg) !default;
2177-
$sidebar-light-border-width: 0 !default;
2178-
$sidebar-light-border-color: transparent !default;
2175+
$sidebar-light-color: var(--#{$prefix}body-color) !default;
2176+
$sidebar-light-bg: var(--#{$prefix}body-bg) !default;
2177+
$sidebar-light-border-width: 0 !default;
2178+
$sidebar-light-border-color: transparent !default;
21792179

2180-
$sidebar-light-brand-color: $white !default;
2181-
$sidebar-light-brand-bg: $primary !default;
2180+
$sidebar-light-brand-color: $white !default;
2181+
$sidebar-light-brand-bg: var(--#{$prefix}primary) !default;
21822182

2183-
$sidebar-light-header-bg: rgba($black, .2) !default;
2183+
$sidebar-light-header-bg: rgba($black, .2) !default;
21842184

2185-
$sidebar-light-nav-title-color: $medium-emphasis !default;
2185+
$sidebar-light-nav-title-color: var(--#{$prefix}body-secondary-color) !default;
21862186

2187-
$sidebar-light-nav-link-color: $medium-emphasis !default;
2187+
$sidebar-light-nav-link-color: var(--#{$prefix}body-secondary-color) !default;
21882188
$sidebar-light-nav-link-bg: transparent !default;
2189-
$sidebar-light-nav-link-icon-color: $medium-emphasis !default;
2189+
$sidebar-light-nav-link-icon-color: var(--#{$prefix}body-secondary-color) !default;
21902190

2191-
$sidebar-light-nav-link-hover-color: $high-emphasis !default;
2192-
$sidebar-light-nav-link-hover-bg: theme-color("primary") !default;
2193-
$sidebar-light-nav-link-hover-icon-color: $high-emphasis !default;
2191+
$sidebar-light-nav-link-hover-color: var(--#{$prefix}body-color) !default;
2192+
$sidebar-light-nav-link-hover-bg: var(--#{$prefix}primary) !default;
2193+
$sidebar-light-nav-link-hover-icon-color: var(--#{$prefix}body-color) !default;
21942194

2195-
$sidebar-light-nav-link-active-color: $high-emphasis !default;
2195+
$sidebar-light-nav-link-active-color: var(--#{$prefix}body-color) !default;
21962196
$sidebar-light-nav-link-active-bg: rgba($white, .05) !default;
2197-
$sidebar-light-nav-link-active-icon-color: $high-emphasis !default;
2197+
$sidebar-light-nav-link-active-icon-color: var(--#{$prefix}body-color) !default;
21982198

2199-
$sidebar-light-nav-link-disabled-color: $disabled !default;
2200-
$sidebar-light-nav-link-disabled-icon-color: $sidebar-light-nav-link-icon-color !default;
2199+
$sidebar-light-nav-link-disabled-color: var(--#{$prefix}body-secondary-color) !default;
2200+
$sidebar-light-nav-link-disabled-icon-color: var(--#{$prefix}body-color) !default;
22012201

22022202
$sidebar-light-nav-group-bg: rgba(0, 0, 0, .05) !default;
22032203
$sidebar-light-nav-group-toggle-show-color: $sidebar-light-nav-link-color !default;
22042204

2205-
$sidebar-light-nav-group-indicator-color: $medium-emphasis !default;
2205+
$sidebar-light-nav-group-indicator-color: $body-secondary-color !default;
22062206
$sidebar-light-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-light-nav-group-indicator-color}'><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;
2207-
$sidebar-light-nav-group-indicator-hover-color: $sidebar-light-nav-link-hover-color !default;
2207+
$sidebar-light-nav-group-indicator-hover-color: $body-color !default;
22082208
$sidebar-light-nav-group-indicator-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-light-nav-group-indicator-hover-color}'><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;
22092209

22102210
$sidebar-light-footer-bg: rgba($black, .1) !default;
22112211

22122212
$sidebar-light-toggler-bg: rgba($black, .1) !default;
22132213
$sidebar-light-toggler-hover-bg: rgba(0, 0, 0, .2) !default;
2214-
$sidebar-light-toggler-indicator-color: $medium-emphasis !default;
2214+
$sidebar-light-toggler-indicator-color: $body-secondary-color !default;
22152215
$sidebar-light-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
2216-
$sidebar-light-toggler-indicator-hover-color: $sidebar-light-nav-link-hover-color !default;
2216+
$sidebar-light-toggler-indicator-hover-color: $body-color !default;
22172217
$sidebar-light-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
22182218
// scss-docs-end sidebar-variables
22192219

0 commit comments

Comments
 (0)