Skip to content

Commit fea7f8a

Browse files
UnderlineWordsUnderlineWords
committed
added a new .divided class to navbar
1 parent 71b4271 commit fea7f8a

File tree

3 files changed

+106
-48
lines changed

3 files changed

+106
-48
lines changed

‎src/Components/Navbar/Navbar.scss‎

Lines changed: 62 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,12 @@
105105
box-shadow: none;
106106
.#{$button-class},
107107
.#{$dropdown-name} .#{$button-class} {
108-
background: transparent;
109-
border-color: transparent;
108+
background: transparent;
109+
border-color: transparent;
110110
color: theme('color-negative');
111111
min-height: 100%;
112-
border-radius: 0;
113-
border: none;
112+
border-radius: 0;
113+
border: 0;
114114
i, span.#{$icon-font-class-name} {
115115
color: theme('color-negative');
116116
}
@@ -119,11 +119,25 @@
119119
border-radius: 0;
120120
}
121121
}
122-
.#{$dropdown-name}:last-child,
122+
.#{$dropdown-name}:last-child,
123123
.#{$dropdown-name}:last-child > .#{$button-class}:first-child,
124124
.#{$dropdown-name}:last-child > .#{$button-class}:last-child {
125-
border-radius: 0;
126-
}
125+
border-radius: 0;
126+
}
127+
}
128+
///
129+
/// DIVIDED NAVBAR
130+
///
131+
@if $components-navbar-divided {
132+
&.#{$navbar-divided} {
133+
@include navbar-divided();
134+
.#{$button-class-group} {
135+
.#{$button-class},
136+
.#{$dropdown-name} .#{$button-class} {
137+
border: solid darken(theme('primary-color'), 10.15%);
138+
}
139+
}
140+
}
127141
}
128142
.#{$button-class},
129143
.#{$dropdown-name} .#{$button-class} {
@@ -141,29 +155,29 @@
141155
}
142156
}
143157
}
144-
///
145-
/// NAVBAR SIZES
146-
///
147-
@if $components-navbar-sizes {
148-
@each $size-name, $min-height, $font-size, $button-padding, $spacer-top in $navbar-sizes {
149-
&.#{$size-name} {
150-
min-height: $min-height;
151-
& .#{$button-class},
152-
& .#{$dropdown-name} .#{$button-class} {
153-
font-size: $font-size;
154-
padding: $button-padding;
155-
}
156-
@at-root .#{$navbar-spacer}-#{$size-name} {
157-
margin-top: $spacer-top !important;
158-
}
159-
@include breakpoints($breakpoints-medium, 'max-width') {
160-
@at-root .#{$navbar-spacer}-#{$size-name} {
161-
margin-top: $spacer-top / 2 !important;
162-
}
163-
}
164-
}
165-
}
166-
}
158+
///
159+
/// NAVBAR SIZES
160+
///
161+
@if $components-navbar-sizes {
162+
@each $size-name, $min-height, $font-size, $button-padding, $spacer-top in $navbar-sizes {
163+
&.#{$size-name} {
164+
min-height: $min-height;
165+
& .#{$button-class},
166+
& .#{$dropdown-name} .#{$button-class} {
167+
font-size: $font-size;
168+
padding: $button-padding;
169+
}
170+
@at-root .#{$navbar-spacer}-#{$size-name} {
171+
margin-top: $spacer-top !important;
172+
}
173+
@include breakpoints($breakpoints-medium, 'max-width') {
174+
@at-root .#{$navbar-spacer}-#{$size-name} {
175+
margin-top: $spacer-top / 2 !important;
176+
}
177+
}
178+
}
179+
}
180+
}
167181
}
168182
//
169183
@include breakpoints($breakpoints-medium, 'max-width') {
@@ -230,24 +244,24 @@
230244
top: auto;
231245
}
232246
}
233-
///
234-
/// NAVBAR SIZES
235-
///
236-
@if $components-navbar-sizes {
237-
@each $size-name, $min-height, $font-size, $button-padding, $spacer-top in $navbar-sizes {
238-
&.#{$size-name} {
239-
& .#{$navbar-burger},
240-
& .#{$navbar-burger}::before {
241-
min-height: $min-height;
242-
min-width: $min-height;
243-
font-size: 1.359em;
244-
}
245-
section.#{$navbar-links} {
246-
top: $min-height;
247-
}
248-
}
249-
}
250-
}
247+
///
248+
/// NAVBAR SIZES
249+
///
250+
@if $components-navbar-sizes {
251+
@each $size-name, $min-height, $font-size, $button-padding, $spacer-top in $navbar-sizes {
252+
&.#{$size-name} {
253+
& .#{$navbar-burger},
254+
& .#{$navbar-burger}::before {
255+
min-height: $min-height;
256+
min-width: $min-height;
257+
font-size: 1.359em;
258+
}
259+
section.#{$navbar-links} {
260+
top: $min-height;
261+
}
262+
}
263+
}
264+
}
251265
input[type=checkbox]##{$navbar-burger}:not(:checked) ~ section.#{$navbar-links} {
252266
height: 0;
253267
}

‎src/Components/Navbar/mixins.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,19 @@
3131
}
3232
}
3333
}
34+
///
35+
/// DIVIDED NAVBAR
36+
///
37+
@if($components-navbar-divided) {
38+
&.#{$navbar-divided} {
39+
.#{$button-class-group} {
40+
.#{$button-class},
41+
.#{$dropdown-name} .#{$button-class} {
42+
border: solid $input-border-color;
43+
}
44+
}
45+
}
46+
}
3447
.#{$navbar-brand} {
3548
a,
3649
a:visited {
@@ -52,4 +65,34 @@
5265
}
5366
}
5467
}
68+
}
69+
70+
///
71+
/// Divided Navbar
72+
///
73+
@mixin navbar-divided() {
74+
.#{$button-class-group} {
75+
.#{$button-class},
76+
.#{$dropdown-name} .#{$button-class} {
77+
border-width: 0 1px !important;
78+
}
79+
&>.#{$button-class}:first-child {
80+
border-left-width: 0 !important;
81+
}
82+
&>.#{$button-class}:last-child {
83+
border-right-width: 0 !important;
84+
}
85+
.#{$dropdown-name}:first-child {
86+
.#{$button-class} {
87+
border-left-width: 0 !important;
88+
}
89+
}
90+
.#{$dropdown-name}:last-child {
91+
.#{$button-class} {
92+
border-right-width: 0 !important;
93+
border-left-width: 0 !important;
94+
margin-left: 1px;
95+
}
96+
}
97+
}
5598
}

‎src/Components/Navbar/variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ $navbar-fixed : 'fixed';
99
$navbar-brand : 'brand';
1010
$navbar-links : 'links';
1111
$navbar-burger : 'burger';
12+
$navbar-divided : 'divided';
1213
$navbar-spacer : 'navbar-spacer';
1314

1415
/// STYLES ==============================================

0 commit comments

Comments
 (0)