Skip to content

Commit db5349a

Browse files
author
AMJones
committed
Initial commit.
1 parent 2f00a98 commit db5349a

File tree

5 files changed

+453
-0
lines changed

5 files changed

+453
-0
lines changed

‎scss/_bs4-shim.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
$font-size-base: 1rem !default;
3+
$font-weight-light: 300 !default;
4+
$spacer: 1rem !default;
5+
$navbar-padding-y: ($spacer / 2) !default;
6+
$navbar-padding-x: $spacer !default;
7+
$grid-gutter-width: 30px !default;
8+
$line-height-base: 1.5 !default;

‎scss/_header.scss‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
@import "layout-variables";
2+
@import "layout-mixins";
3+
4+
// Unlike bootstrap, which builds this with the .navbar-fixed-top and .navbar-fixed-bottom
5+
// classes, this is intended to apply to the entire header. This ensures that any toolbars
6+
// that are in the header are also properly fixed in place. This class is intended to be
7+
// toggled on and off via JS
8+
9+
// Fixed Header
10+
header.header-fixed-top {
11+
position: fixed;
12+
right: 0;
13+
left: 0;
14+
top: 0;
15+
z-index: const(ZINDEX_FIXED);
16+
.navbar {
17+
border-radius: 0;
18+
}
19+
& + main {
20+
padding-top: 1rem;
21+
top: -1px;
22+
}
23+
}
24+
25+
header {
26+
display: flex;
27+
flex-direction: column;
28+
border-bottom: none;
29+
@include elevation(3);
30+
.navbar {
31+
display: flex;
32+
padding: 0 $header-navbar-padding-x;
33+
height: $header-navbar-height;
34+
margin-top: 1px;
35+
flex: 0 1 auto;
36+
border-bottom: none;
37+
> .container, > .container-fluid {
38+
display: flex;
39+
flex-wrap: nowrap;
40+
align-items: center;
41+
}
42+
}
43+
.navbar-nav {
44+
display: inline-flex;
45+
flex-direction: row;
46+
flex-wrap: nowrap;
47+
align-items: center;
48+
flex: 0 1 auto;
49+
> .nav-item {
50+
display: inline-flex;
51+
flex-direction: row;
52+
}
53+
}
54+
.navbar-brand {
55+
display: flex;
56+
flex-wrap: nowrap;
57+
margin-right: $header-navbar-padding-x;
58+
align-items: center;
59+
@include hover-focus {
60+
text-decoration: none;
61+
}
62+
}
63+
.navbar-text {
64+
display: inline-block;
65+
padding-top: $header-navbar-padding-y;
66+
padding-bottom: $header-navbar-padding-y;
67+
}
68+
.navbar-toggler {
69+
display: flex;
70+
align-items: center;
71+
@include hover-focus-active {
72+
text-decoration: none;
73+
}
74+
}
75+
.navbar-nav {
76+
.nav-link {
77+
padding: 0 $navbar-padding-x;
78+
height: 100%;
79+
display: flex;
80+
align-items: center;
81+
@if component("icons") {
82+
//noinspection SassScssUnresolvedVariable
83+
> .#{$icon-css-prefix} {
84+
font-size: floor((4 / 3) * $icon-font-size-base);
85+
// Must go with $navbar-height rather than the Font Awesome recommended height due to IE10/11 silliness that
86+
// has the icons jumping around on mouseover. Could not find documented instances of this issue.
87+
line-height: $navbar-height;
88+
}
89+
//noinspection SassScssUnresolvedVariable
90+
> svg.#{$icon-css-prefix} {
91+
width: floor((4 / 3) * $icon-font-size-base);
92+
height: floor((4 / 3) * $icon-font-size-base);
93+
}
94+
//noinspection SassScssUnresolvedVariable
95+
> .#{$icon-css-prefix}-caret-down {
96+
opacity: .3;
97+
}
98+
}
99+
}
100+
}
101+
.navbar-nav.navbar-right {
102+
margin-left: auto;
103+
}
104+
105+
.nav-tabs {
106+
margin-left: $header-navbar-padding-x;
107+
margin-right: $header-navbar-padding-x;
108+
border-bottom-width: 0;
109+
order: 10;
110+
flex: 1 0 auto;
111+
flex-wrap: nowrap;
112+
> .nav-item {
113+
display: flex;
114+
flex: 0 1 auto; // Must Specify Default for IE10
115+
margin-bottom: 0;
116+
// Push to the right with all right aligned
117+
&.pull-right {
118+
margin-left: auto;
119+
order: 1;
120+
& ~ li.pull-right {
121+
margin-left: 0;
122+
}
123+
}
124+
> a {
125+
border-bottom-width: 0;
126+
display: inline-flex;
127+
align-items: center;
128+
flex: 1 0 auto;
129+
padding: 0 (space-x(md) * 1rem);
130+
height: 3 * $font-size-base; // 48px recommended by Google
131+
font-size: .85rem;
132+
font-weight: $font-weight-light;
133+
text-transform: uppercase;
134+
letter-spacing: .2px;
135+
@if component("icons") {
136+
//noinspection SassScssUnresolvedVariable
137+
> .#{$icon-css-prefix} + span, span + .#{$icon-css-prefix} {
138+
margin-left: (space-x(md) / 2) * 1rem;
139+
line-height: 1;
140+
}
141+
//noinspection SassScssUnresolvedVariable
142+
> span + .#{$icon-css-prefix}-caret-down {
143+
opacity: .5;
144+
}
145+
}
146+
}
147+
}
148+
}
149+
150+
.dropdown {
151+
position: relative;
152+
}
153+
.dropdown-menu {
154+
margin-top: $navbar-dropdown-offset;
155+
$padding-x: space-x(lg);
156+
$padding-y: space-y(lg);
157+
@include elevation(4);
158+
border: none;
159+
max-width: calc(100vw - 32px);
160+
max-height: calc(100vw - 32px);
161+
min-width: 10rem;
162+
transform: scale(0);
163+
-webkit-transform-origin: top left;
164+
transform-origin: top left;
165+
opacity: 0;
166+
will-change: transform, opacity;
167+
> li.dropdown-header, > li > a {
168+
padding: 0 1.25rem; // 16px Mobile / 24px Desktop recommended by Google
169+
height: (space-y(md) * 2rem) + $line-height-base; // 48px Mobile / 32px Desktop recommended by Google
170+
}
171+
> li.dropdown-header {
172+
align-items: center;
173+
display: flex;
174+
}
175+
> li + li.dropdown-header {
176+
padding-top: .25rem;
177+
}
178+
> li > a {
179+
outline: none;
180+
letter-spacing: 0.04em;
181+
text-overflow: ellipsis;
182+
@if component("icons") {
183+
> .#{$icon-css-prefix} {
184+
color: rgba(gray("700"), .80);
185+
width: #{$padding-x}rem;
186+
margin-right: #{$padding-x}rem;
187+
}
188+
> svg.#{$icon-css-prefix} {
189+
color: rgba(gray("700"), .80);
190+
height: #{$padding-x}rem; // Not an error!
191+
}
192+
i.#{$icon-css-prefix} {
193+
position: relative;
194+
top: 1px;
195+
}
196+
}
197+
}
198+
}
199+
.open > .dropdown-menu {
200+
transform: scale(1);
201+
opacity: 1;
202+
}
203+
204+
@include header-navbar-theme(light, $navbar-light-bg, $navbar-light-color, $navbar-light-active-color, $navbar-light-hover-color, $navbar-light-disabled-color);
205+
@include header-navbar-theme(dark, $navbar-dark-bg, $navbar-dark-color, $navbar-dark-active-color, $navbar-dark-hover-color, $navbar-dark-disabled-color);
206+
}

‎scss/_layout-mixins.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@import "strapless/base/scss/base";
2+
3+
// region //////////////////////////////////////////////// Header Mixins
4+
5+
@mixin header-navbar-theme($theme, $bg, $color, $active, $hover, $disabled) {
6+
&.header-#{$theme} {
7+
background-color: $bg;
8+
.navbar-brand {
9+
color: $color;
10+
@include hover-focus {
11+
color: $active;
12+
}
13+
}
14+
.navbar-toggler {
15+
color: $color;
16+
@include hover-focus {
17+
color: $hover;
18+
}
19+
}
20+
21+
.navbar-nav {
22+
.nav-link {
23+
color: $color;
24+
@include hover-focus {
25+
color: $hover;
26+
}
27+
&.disabled {
28+
color: $disabled;
29+
}
30+
}
31+
.active {
32+
.nav-link {
33+
color: $active;
34+
}
35+
}
36+
.disabled {
37+
.nav-link {
38+
color: $disabled;
39+
}
40+
}
41+
}
42+
43+
.nav-tabs > li {
44+
> a {
45+
color: rgba($color,.85);
46+
transition: all 0.2s;
47+
background-color: transparent !important;
48+
border: none !important;
49+
@include hover-focus {
50+
color: $hover;
51+
box-shadow: inset 0 -2px 0 $hover;
52+
}
53+
}
54+
&.active > a, > a.active {
55+
color: $active;
56+
box-shadow: inset 0 -2px 0 $active;
57+
}
58+
&.disabled > a, > a.disabled {
59+
color: $disabled;
60+
}
61+
}
62+
}
63+
}
64+
65+
66+
// endregion ///////////////////////////////////////////// End Header Mixins

‎scss/_layout-variables.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import "strapless/colors/scss/colors";
2+
@import "strapless/base/scss/base";
3+
@import "bs4-shim";
4+
5+
// region //////////////////////////////////////////////// Header Variables
6+
7+
$header-margin-bottom: 1rem !default;
8+
$header-navbar-padding-x: $navbar-padding-x !default;
9+
$header-navbar-padding-y: $navbar-padding-y !default;
10+
$header-navbar-height: if(variable-exists(navbar-height),$navbar-height, 64px) !default;
11+
$navbar-dropdown-offset: 2px !default;
12+
13+
// endregion ///////////////////////////////////////////// End Header Variables
14+
15+
// region //////////////////////////////////////////////// Footer Variables
16+
17+
$footer-height: 4rem;
18+
$footer-dark-color: gray(400) !default;
19+
$footer-dark-hover-color: lighten($footer-dark-color, 12%) !default;
20+
$footer-dark-active-color: color("white") !default;
21+
$footer-dark-disabled-color: rgba($footer-dark-color,.25) !default;
22+
$footer-dark-toggler-bg: transparent !default;
23+
$footer-dark-toggler-border: transparent !default;
24+
25+
// endregion ///////////////////////////////////////////// End Footer Variables

0 commit comments

Comments
 (0)