Skip to content

Commit 08bde97

Browse files
mrholekmrholek
committed
refactor(Header): update CSS Variables
1 parent e30f6ab commit 08bde97

File tree

3 files changed

+69
-36
lines changed

3 files changed

+69
-36
lines changed

‎docs/content/components/header.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -274,10 +274,12 @@ When the container is within your header, its horizontal padding is removed at b
274274

275275
## Customizing
276276

277-
### SASS
277+
### CSS variables
278278

279-
#### Variables
280-
{{< scss-docs name="header-variables" file="scss/_variables.scss" >}}
279+
Sidebars use local CSS variables on `.header` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
280+
281+
{{< scss-docs name="header-css-vars" file="scss/_header.scss" >}}
281282

282-
### CSS Vars
283-
{{< css-vars-docs file="scss/_header.scss" >}}
283+
### SASS variables
284+
285+
{{< scss-docs name="header-variables" file="scss/_variables.scss" >}}

‎scss/_header.scss

Lines changed: 59 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
11
.header {
2+
// scss-docs-start header-css-vars
3+
--#{$prefix}header-min-height: #{$header-min-height};
4+
--#{$prefix}header-padding-x: #{$header-padding-x};
5+
--#{$prefix}header-padding-y: #{$header-padding-y};
6+
--#{$prefix}header-bg: #{$header-bg};
7+
--#{$prefix}header-color: #{$header-color};
8+
--#{$prefix}header-border-color: #{$header-border-color};
9+
--#{$prefix}header-border: #{$header-border-width} solid var(--#{$prefix}header-border-color);
10+
--#{$prefix}header-hover-color: #{$header-hover-color};
11+
--#{$prefix}header-disabled-color: #{$header-disabled-color};
12+
--#{$prefix}header-active-color: #{$header-active-color};
13+
--#{$prefix}header-brand-padding-y: #{$header-brand-padding-y};
14+
--#{$prefix}header-brand-color: #{$header-brand-color};
15+
--#{$prefix}header-brand-hover-color: #{$header-brand-hover-color};
16+
--#{$prefix}header-toggler-padding-x: #{$header-toggler-padding-x};
17+
--#{$prefix}header-toggler-padding-y: #{$header-toggler-padding-y};
18+
--#{$prefix}header-toggler-bg: #{$header-toggler-bg};
19+
--#{$prefix}header-toggler-color: #{$header-toggler-color};
20+
--#{$prefix}header-toggler-border-radius: #{$header-toggler-border-radius};
21+
--#{$prefix}header-toggler-hover-color: #{$header-toggler-hover-color};
22+
--#{$prefix}header-toggler-icon-bg: #{escape-svg($header-toggler-icon-bg)};
23+
--#{$prefix}header-toggler-hover-icon-bg: #{escape-svg($header-toggler-hover-icon-bg)};
24+
--#{$prefix}header-nav-link-padding-x: #{$header-nav-link-padding-x};
25+
--#{$prefix}header-nav-link-padding-y: #{$header-nav-link-padding-y};
26+
--#{$prefix}header-divider-border-color: #{$header-divider-border-color};
27+
--#{$prefix}header-divider-border: #{$header-divider-border-width} solid var(--#{$prefix}header-divider-border-color);
28+
--#{$prefix}subheader-min-height: #{$subheader-min-height};
29+
// scss-docs-end header-css-vars
30+
231
position: relative;
332
display: flex;
433
flex-wrap: wrap; // allow us to do the line break for collapsing content
534
align-items: center;
635
justify-content: space-between; // space out brand from logo
7-
min-height: $header-min-height;
8-
padding: $header-padding-y $header-padding-x;
9-
background: var(--#{$prefix}header-bg, $header-bg);
10-
border-bottom: var(--#{$prefix}header-border-width, $header-border-width) solid var(--#{$prefix}header-border-color, $header-border-color);
36+
min-height: var(--#{$prefix}header-min-height);
37+
padding: var(--#{$prefix}header-padding-y) var(--#{$prefix}header-padding-x);
38+
background: var(--#{$prefix}header-bg);
39+
border-bottom: var(--#{$prefix}header-border);
1140

1241
// Because flex properties aren't inherited, we need to redeclare these first
1342
// few properties so that content nested within behave properly.
@@ -32,12 +61,12 @@
3261

3362
.container:first-child,
3463
.container-fluid:first-child {
35-
min-height: $header-min-height - (2 * $header-padding-y);
64+
min-height: calc(var(--#{$prefix}header-min-height) - (2 * var(--#{$prefix}header-padding-y))); // stylelint-disable-line function-disallowed-list
3665
}
3766

3867
.container:nth-child(n+2),
3968
.container-fluid:nth-child(n+2) {
40-
min-height: $subheader-min-height - (2 * $header-padding-y);
69+
min-height: calc(var(--#{$prefix}subheader-min-height) - (2 * var(--#{$prefix}header-padding-y))); // stylelint-disable-line function-disallowed-list
4170
}
4271

4372
&.header-sticky {
@@ -48,28 +77,28 @@
4877
}
4978

5079
.header-divider {
51-
flex-basis: calc(100% + #{2 * $header-padding-x}); // stylelint-disable-line function-disallowed-list
80+
flex-basis: calc(100% + (2 * var(--#{$prefix}header-padding-x))); // stylelint-disable-line function-disallowed-list
5281
height: 0;
53-
margin: $header-padding-y (- $header-padding-x);
54-
border-top: var(--#{$prefix}header-divider-border-width, $header-divider-border-width) solid var(--#{$prefix}header-divider-border-color, $header-divider-border-color);
82+
margin: var(--#{$prefix}header-padding-y) calc(var(--#{$prefix}header-padding-x) * -1); // stylelint-disable-line function-disallowed-list
83+
border-top: var(--#{$prefix}header-divider-border);
5584
}
5685

5786
// Header brand
5887
//
5988
// Used for brand, project, or site names.
6089

6190
.header-brand {
62-
padding-top: $header-brand-padding-y;
63-
padding-bottom: $header-brand-padding-y;
91+
padding-top: var(--#{$prefix}header-brand-padding-y);
92+
padding-bottom: var(--#{$prefix}header-brand-padding-y);
6493
@include ltr-rtl("margin-right", $header-brand-margin-end);
6594
@include font-size($header-brand-font-size);
66-
color: var(--#{$prefix}header-brand-color, $header-brand-color);
95+
color: var(--#{$prefix}header-brand-color);
6796
text-decoration: if($link-decoration == none, null, none);
6897
white-space: nowrap;
6998

7099
&:hover,
71100
&:focus {
72-
color: var(--#{$prefix}header-brand-hover-color, $header-brand-hover-color);
101+
color: var(--#{$prefix}header-brand-hover-color);
73102
text-decoration: if($link-hover-decoration == underline, none, null);
74103
}
75104
}
@@ -86,23 +115,22 @@
86115
list-style: none;
87116

88117
.nav-link {
89-
padding-right: $header-nav-link-padding-x;
90-
padding-left: $header-nav-link-padding-x;
91-
color: var(--#{$prefix}header-color, $header-color);
118+
padding: var(--#{$prefix}header-nav-link-padding-y) var(--#{$prefix}header-nav-link-padding-x);
119+
color: var(--#{$prefix}header-color);
92120

93121
&:hover,
94122
&:focus {
95-
color: var(--#{$prefix}header-hover-color, $header-hover-color);
123+
color: var(--#{$prefix}header-hover-color);
96124
}
97125

98126
&.disabled {
99-
color: var(--#{$prefix}header-disabled-color, $header-disabled-color);
127+
color: var(--#{$prefix}header-disabled-color);
100128
}
101129
}
102130

103131
.show > .nav-link,
104132
.nav-link.active {
105-
color: var(--#{$prefix}header-active-color, $header-active-color);
133+
color: var(--#{$prefix}header-active-color);
106134
}
107135

108136
.dropdown-menu {
@@ -116,30 +144,30 @@
116144
//
117145

118146
.header-text {
119-
padding-top: $nav-link-padding-y;
120-
padding-bottom: $nav-link-padding-y;
121-
color: var(--#{$prefix}header-color, $header-color);
147+
padding-top: var(--#{$prefix}header-nav-link-padding-y);
148+
padding-bottom: var(--#{$prefix}header-nav-link-padding-y);
149+
color: var(--#{$prefix}header-color);
122150

123151
a {
124-
color: var(--#{$prefix}header-active-color, $header-active-color);
152+
color: var(--#{$prefix}header-active-color);
125153

126154
&:hover,
127155
&:focus {
128-
color: var(--#{$prefix}header-active-color, $header-active-color);
156+
color: var(--#{$prefix}header-active-color);
129157
}
130158
}
131159
}
132160

133161
.header-toggler {
134-
padding: $header-toggler-padding-y $header-toggler-padding-x;
162+
padding: var(--#{$prefix}header-toggler-padding-y) var(--#{$prefix}header-toggler-padding-x);
135163
@include font-size($header-toggler-font-size);
136-
color: var(--#{$prefix}header-color, $header-color);
137-
background-color: var(--#{$prefix}header-toggler-bg, $header-toggler-bg);
164+
color: var(--#{$prefix}header-toggler-color);
165+
background-color: var(--#{$prefix}header-toggler-bg);
138166
border: 0; // remove default button style
139-
@include border-radius($header-toggler-border-radius);
167+
@include border-radius(var(--#{$prefix}header-toggler-border-radius));
140168

141169
&:hover {
142-
color: $body-color;
170+
color: var(--#{$prefix}header-toggler-hover-color);
143171
text-decoration: none;
144172
}
145173

@@ -156,12 +184,12 @@
156184
.header-toggler-icon {
157185
display: block;
158186
height: $header-toggler-font-size * 1.25;
159-
background-image: var(--#{$prefix}header-toggler-icon-bg, escape-svg($header-toggler-icon-bg));
187+
background-image: var(--#{$prefix}header-toggler-icon-bg);
160188
background-repeat: no-repeat;
161189
background-position: center center;
162190
background-size: 100% 100%;
163191

164192
&:hover {
165-
background-image: var(--#{$prefix}header-toggler-hover-icon-bg, escape-svg($header-toggler-hover-icon-bg));
193+
background-image: var(--#{$prefix}header-toggler-hover-icon-bg);
166194
}
167195
}

‎scss/_variables.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1722,13 +1722,16 @@ $header-brand-hover-color: shade-color($gray-900, 10%) !default;
17221722
$header-toggler-padding-y: .25rem !default;
17231723
$header-toggler-padding-x: .75rem !default;
17241724
$header-toggler-font-size: $font-size-lg !default;
1725+
$header-toggler-color: $header-color !default;
17251726
$header-toggler-bg: transparent !default;
17261727
$header-toggler-border-radius: $btn-border-radius !default;
1728+
$header-toggler-hover-color: $header-active-color !default;
17271729

17281730
$header-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !default;
17291731
$header-toggler-hover-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !default;
17301732

17311733
$header-nav-link-padding-x: .5rem !default;
1734+
$header-nav-link-padding-y: .5rem !default;
17321735

17331736
$header-divider-border-width: 1px !default;
17341737
$header-divider-border-color: $header-border-color !default;

0 commit comments

Comments
 (0)