foundation_apps_styles 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +41 -0
- data/Rakefile +13 -0
- data/bin/console +14 -0
- data/bin/setup +7 -0
- data/foundation_apps_styles.gemspec +24 -0
- data/lib/foundation_apps_styles.rb +6 -0
- data/lib/foundation_apps_styles/version.rb +3 -0
- data/vendor/assets/iconic/account.svg +44 -0
- data/vendor/assets/iconic/action.svg +38 -0
- data/vendor/assets/iconic/ban.svg +17 -0
- data/vendor/assets/iconic/bell.svg +22 -0
- data/vendor/assets/iconic/bookmark.svg +14 -0
- data/vendor/assets/iconic/cart.svg +35 -0
- data/vendor/assets/iconic/chevron.svg +28 -0
- data/vendor/assets/iconic/circle-check.svg +25 -0
- data/vendor/assets/iconic/circle-x.svg +25 -0
- data/vendor/assets/iconic/cog.svg +17 -0
- data/vendor/assets/iconic/comment-square.svg +14 -0
- data/vendor/assets/iconic/dashboard.svg +38 -0
- data/vendor/assets/iconic/document.svg +28 -0
- data/vendor/assets/iconic/envelope.svg +44 -0
- data/vendor/assets/iconic/flag.svg +24 -0
- data/vendor/assets/iconic/home.svg +28 -0
- data/vendor/assets/iconic/lock.svg +55 -0
- data/vendor/assets/iconic/magnifying-glass.svg +26 -0
- data/vendor/assets/iconic/person.svg +62 -0
- data/vendor/assets/iconic/reload.svg +19 -0
- data/vendor/assets/iconic/share-boxed.svg +17 -0
- data/vendor/assets/iconic/star.svg +14 -0
- data/vendor/assets/iconic/thumb.svg +38 -0
- data/vendor/assets/iconic/zoom.svg +56 -0
- data/vendor/assets/stylesheets/_global.scss +131 -0
- data/vendor/assets/stylesheets/_includes.scss +33 -0
- data/vendor/assets/stylesheets/_settings.scss +614 -0
- data/vendor/assets/stylesheets/components/_accordion.scss +72 -0
- data/vendor/assets/stylesheets/components/_action-sheet.scss +265 -0
- data/vendor/assets/stylesheets/components/_block-list.scss +360 -0
- data/vendor/assets/stylesheets/components/_button-group.scss +197 -0
- data/vendor/assets/stylesheets/components/_button.scss +205 -0
- data/vendor/assets/stylesheets/components/_card.scss +93 -0
- data/vendor/assets/stylesheets/components/_extras.scss +54 -0
- data/vendor/assets/stylesheets/components/_forms.scss +460 -0
- data/vendor/assets/stylesheets/components/_grid.scss +422 -0
- data/vendor/assets/stylesheets/components/_iconic.scss +95 -0
- data/vendor/assets/stylesheets/components/_label.scss +134 -0
- data/vendor/assets/stylesheets/components/_list.scss +19 -0
- data/vendor/assets/stylesheets/components/_menu-bar.scss +382 -0
- data/vendor/assets/stylesheets/components/_modal.scss +129 -0
- data/vendor/assets/stylesheets/components/_motion.scss +525 -0
- data/vendor/assets/stylesheets/components/_notification.scss +207 -0
- data/vendor/assets/stylesheets/components/_off-canvas.scss +169 -0
- data/vendor/assets/stylesheets/components/_panel.scss +134 -0
- data/vendor/assets/stylesheets/components/_popup.scss +68 -0
- data/vendor/assets/stylesheets/components/_switch.scss +134 -0
- data/vendor/assets/stylesheets/components/_tabs.scss +100 -0
- data/vendor/assets/stylesheets/components/_title-bar.scss +135 -0
- data/vendor/assets/stylesheets/components/_typography.scss +345 -0
- data/vendor/assets/stylesheets/components/_utilities.scss +160 -0
- data/vendor/assets/stylesheets/foundation-apps.css +6146 -0
- data/vendor/assets/stylesheets/foundation.scss +50 -0
- data/vendor/assets/stylesheets/helpers/_breakpoints.scss +154 -0
- data/vendor/assets/stylesheets/helpers/_functions.scss +343 -0
- data/vendor/assets/stylesheets/helpers/_images.scss +19 -0
- data/vendor/assets/stylesheets/helpers/_mixins.scss +123 -0
- data/vendor/assets/stylesheets/vendor/_normalize.scss +424 -0
- metadata +140 -0
@@ -0,0 +1,134 @@
|
|
1
|
+
/*
|
2
|
+
Label
|
3
|
+
*/
|
4
|
+
|
5
|
+
/// @Foundation.settings
|
6
|
+
// Label
|
7
|
+
$label-fontsize: 0.8rem !default;
|
8
|
+
$label-padding: ($global-padding / 3) ($global-padding / 2) !default;
|
9
|
+
$label-radius: 0 !default;
|
10
|
+
$label-background: $primary-color !default;
|
11
|
+
$label-color: isitlight($primary-color) !default;
|
12
|
+
|
13
|
+
$badge-fontsize: 0.8em !default;
|
14
|
+
$badge-diameter: 1.5rem !default;
|
15
|
+
$badge-background: $primary-color !default;
|
16
|
+
$badge-color: #fff !default;
|
17
|
+
///
|
18
|
+
|
19
|
+
%label {
|
20
|
+
line-height: 1;
|
21
|
+
white-space: nowrap;
|
22
|
+
display: inline-block;
|
23
|
+
cursor: default;
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin label-layout(
|
27
|
+
$fontsize: $label-fontsize,
|
28
|
+
$padding: $label-padding
|
29
|
+
) {
|
30
|
+
font-size: $fontsize;
|
31
|
+
padding: $padding;
|
32
|
+
}
|
33
|
+
|
34
|
+
@mixin label-style(
|
35
|
+
$background: $label-background,
|
36
|
+
$color: $label-color,
|
37
|
+
$radius: $label-radius
|
38
|
+
) {
|
39
|
+
background: $background;
|
40
|
+
border-radius: $radius;
|
41
|
+
|
42
|
+
@if $color == auto {
|
43
|
+
color: isitlight($background);
|
44
|
+
}
|
45
|
+
@else {
|
46
|
+
color: $color;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
@mixin label(
|
51
|
+
$background: $label-background,
|
52
|
+
$color: $label-color,
|
53
|
+
$radius: $label-radius,
|
54
|
+
$fontsize: $label-fontsize,
|
55
|
+
$padding: $label-padding
|
56
|
+
) {
|
57
|
+
@extend %label;
|
58
|
+
@include label-layout($fontsize, $padding);
|
59
|
+
@include label-style($background, $color, $radius);
|
60
|
+
}
|
61
|
+
|
62
|
+
@include exports(label) {
|
63
|
+
.label {
|
64
|
+
@include label;
|
65
|
+
|
66
|
+
@each $color in map-keys($foundation-colors) {
|
67
|
+
&.#{$color} {
|
68
|
+
$color-value: map-get($foundation-colors, $color);
|
69
|
+
@include label-style($color-value, auto);
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
/*
|
76
|
+
Badge
|
77
|
+
*/
|
78
|
+
|
79
|
+
%badge {
|
80
|
+
align-items: center;
|
81
|
+
justify-content: center;
|
82
|
+
display: inline-flex;
|
83
|
+
border-radius: 1000px;
|
84
|
+
}
|
85
|
+
|
86
|
+
@mixin badge-layout(
|
87
|
+
$fontsize: $badge-fontsize,
|
88
|
+
$diameter: $badge-diameter
|
89
|
+
) {
|
90
|
+
font-size: $fontsize;
|
91
|
+
width: $diameter;
|
92
|
+
height: $diameter;
|
93
|
+
}
|
94
|
+
|
95
|
+
@mixin badge-style(
|
96
|
+
$background: $badge-background,
|
97
|
+
$color: $badge-font-color
|
98
|
+
) {
|
99
|
+
background: $background;
|
100
|
+
|
101
|
+
@if $color == auto {
|
102
|
+
color: isitlight($background);
|
103
|
+
}
|
104
|
+
@else {
|
105
|
+
color: $color;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
@mixin badge(
|
110
|
+
$background: $badge-background,
|
111
|
+
$color: $badge-color,
|
112
|
+
$diameter: $badge-diameter,
|
113
|
+
$fontsize: $badge-fontsize
|
114
|
+
) {
|
115
|
+
@extend %badge;
|
116
|
+
@include badge-layout($fontsize, $diameter);
|
117
|
+
@include badge-style($background, $color);
|
118
|
+
}
|
119
|
+
|
120
|
+
@include exports(badge) {
|
121
|
+
.badge {
|
122
|
+
@include badge;
|
123
|
+
|
124
|
+
&.secondary {
|
125
|
+
@include badge-style($secondary-color, auto);
|
126
|
+
}
|
127
|
+
@each $color in map-keys($foundation-colors) {
|
128
|
+
&.#{$color} {
|
129
|
+
$color-value: map-get($foundation-colors, $color);
|
130
|
+
@include badge-style($color-value, auto);
|
131
|
+
}
|
132
|
+
}
|
133
|
+
}
|
134
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
@mixin inline-list($alignment){
|
2
|
+
list-style-type: none;
|
3
|
+
text-align: $alignment;
|
4
|
+
li, dt, dd {
|
5
|
+
display: inline-block;
|
6
|
+
margin-left: -2px;
|
7
|
+
margin-right: -2px;
|
8
|
+
}
|
9
|
+
}
|
10
|
+
|
11
|
+
@include exports(list) {
|
12
|
+
.inline-list {
|
13
|
+
@include inline-list(left);
|
14
|
+
li {
|
15
|
+
margin-right: 1rem;
|
16
|
+
margin-left: 0;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
@@ -0,0 +1,382 @@
|
|
1
|
+
/*
|
2
|
+
MENU BAR
|
3
|
+
--------
|
4
|
+
|
5
|
+
A generic, flexible menu component.
|
6
|
+
|
7
|
+
Features:
|
8
|
+
- Orient horizontally and vertically
|
9
|
+
- Change orientation at certain breakpoints
|
10
|
+
- Items with icons above, below, or to the left or right
|
11
|
+
- Text labels for vertical menus and badges for horizontal menus
|
12
|
+
*/
|
13
|
+
|
14
|
+
/// @Foundation.settings
|
15
|
+
// Menu Bar
|
16
|
+
$menubar-fontsize: 1rem !default;
|
17
|
+
$menubar-background: #fff !default;
|
18
|
+
$menubar-background-hover: smartscale($menubar-background, 7%) !default;
|
19
|
+
$menubar-background-active: $menubar-background-hover;
|
20
|
+
$menubar-color: isitlight($menubar-background) !default;
|
21
|
+
$menubar-color-hover: $menubar-color !default;
|
22
|
+
$menubar-color-active: $menubar-color-hover;
|
23
|
+
|
24
|
+
$menubar-item-padding: $global-padding !default;
|
25
|
+
$menubar-icon-size: 25px !default;
|
26
|
+
$menubar-icon-spacing: $menubar-item-padding !default;
|
27
|
+
///
|
28
|
+
|
29
|
+
// Menu bar container
|
30
|
+
%menu-bar {
|
31
|
+
display: flex;
|
32
|
+
align-items: stretch;
|
33
|
+
margin: 0;
|
34
|
+
list-style-type: none;
|
35
|
+
overflow-y: visible;
|
36
|
+
|
37
|
+
// Menu item
|
38
|
+
> li {
|
39
|
+
// This flex setting makes each item an equal width
|
40
|
+
flex: 1 0 0;
|
41
|
+
align-items: center;
|
42
|
+
|
43
|
+
// The list item itself is also a flex container, to center links in case they have different height
|
44
|
+
display: flex;
|
45
|
+
align-items: stretch;
|
46
|
+
|
47
|
+
// Link inside menu item
|
48
|
+
> a {
|
49
|
+
display: flex;
|
50
|
+
flex-flow: column nowrap;
|
51
|
+
align-items: center;
|
52
|
+
padding: $menubar-item-padding;
|
53
|
+
font-size: $menubar-fontsize;
|
54
|
+
line-height: 1;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
@mixin menu-bar-layout (
|
60
|
+
$orientation: horizontal,
|
61
|
+
$stretch: true
|
62
|
+
) {
|
63
|
+
/*
|
64
|
+
Orientation
|
65
|
+
*/
|
66
|
+
@if $orientation == horizontal {
|
67
|
+
overflow-x: hidden;
|
68
|
+
flex-flow: row nowrap;
|
69
|
+
|
70
|
+
> li > a {
|
71
|
+
flex: 1 0 0;
|
72
|
+
}
|
73
|
+
> li > a {
|
74
|
+
flex-flow: column nowrap;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
@else {
|
78
|
+
flex-flow: column nowrap;
|
79
|
+
|
80
|
+
> li {
|
81
|
+
flex: 1 0 auto;
|
82
|
+
}
|
83
|
+
> li > a {
|
84
|
+
flex-flow: row nowrap;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
|
88
|
+
/*
|
89
|
+
Stretch
|
90
|
+
*/
|
91
|
+
> li {
|
92
|
+
@if $stretch == false {
|
93
|
+
flex: 0 0 auto;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
@mixin menu-bar-style(
|
99
|
+
$background: $menubar-background,
|
100
|
+
$background-hover: $menubar-background-hover,
|
101
|
+
$background-active: $menubar-background-active,
|
102
|
+
$color: $menubar-color,
|
103
|
+
$color-hover: $menubar-color-hover,
|
104
|
+
$color-active: $menubar-color-active,
|
105
|
+
$autocolor: false
|
106
|
+
) {
|
107
|
+
// Autocoloring
|
108
|
+
@if ($autocolor) {
|
109
|
+
$background-hover: smartscale($background, 7%);
|
110
|
+
$background-active: $background-hover;
|
111
|
+
|
112
|
+
$color: isitlight($background);
|
113
|
+
$color-hover: $color;
|
114
|
+
$color-active: $color;
|
115
|
+
}
|
116
|
+
|
117
|
+
// Container
|
118
|
+
background: $background;
|
119
|
+
|
120
|
+
// Items
|
121
|
+
> li > a {
|
122
|
+
color: $color;
|
123
|
+
|
124
|
+
&:hover {
|
125
|
+
background: $background-hover;
|
126
|
+
color: $color-hover;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
.is-active > a {
|
130
|
+
background: $background-active;
|
131
|
+
color: $color-active
|
132
|
+
}
|
133
|
+
|
134
|
+
// Iconic
|
135
|
+
@if using(iconic) {
|
136
|
+
.iconic { @include color-icon($color); }
|
137
|
+
}
|
138
|
+
}
|
139
|
+
|
140
|
+
@mixin menu-bar-icons(
|
141
|
+
$position: left,
|
142
|
+
$size: $menubar-icon-size
|
143
|
+
) {
|
144
|
+
> li {
|
145
|
+
// Sizing
|
146
|
+
> img, > .iconic {
|
147
|
+
margin: 0;
|
148
|
+
|
149
|
+
@if $menubar-icon-size != false {
|
150
|
+
width: $menubar-icon-size;
|
151
|
+
height: $menubar-icon-size;
|
152
|
+
}
|
153
|
+
|
154
|
+
// Remove any margins from standalone icons
|
155
|
+
&:first-child:last-child {
|
156
|
+
margin: 0;
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
// Position
|
161
|
+
@if $position == left {
|
162
|
+
> a {
|
163
|
+
flex-flow: row nowrap;
|
164
|
+
align-items: center;
|
165
|
+
> img, > .iconic { margin: 0 $menubar-icon-spacing 0 0; }
|
166
|
+
}
|
167
|
+
}
|
168
|
+
@if $position == top {
|
169
|
+
> a {
|
170
|
+
flex-flow: column nowrap;
|
171
|
+
> img, > .iconic { margin: 0 0 $menubar-icon-spacing 0; }
|
172
|
+
}
|
173
|
+
}
|
174
|
+
@if $position == right {
|
175
|
+
> a {
|
176
|
+
flex-flow: row-reverse nowrap;
|
177
|
+
> img, > .iconic { margin: 0 0 0 $menubar-icon-spacing; }
|
178
|
+
}
|
179
|
+
}
|
180
|
+
@if $position == bottom {
|
181
|
+
> a {
|
182
|
+
flex-flow: column-reverse nowrap;
|
183
|
+
> img, > .iconic { margin: $menubar-icon-spacing 0 0 0; }
|
184
|
+
}
|
185
|
+
}
|
186
|
+
}
|
187
|
+
}
|
188
|
+
|
189
|
+
@mixin menu-bar-labels(
|
190
|
+
$x: right,
|
191
|
+
$y: center,
|
192
|
+
$offset: $menubar-item-padding,
|
193
|
+
$size: 1.2rem,
|
194
|
+
$background: red,
|
195
|
+
$color: auto,
|
196
|
+
$selector: '.menu-bar-label'
|
197
|
+
) {
|
198
|
+
> li {
|
199
|
+
position: relative;
|
200
|
+
|
201
|
+
> a {
|
202
|
+
@if $x == left or $x == right {
|
203
|
+
padding-#{$x}: $size + $offset * 2;
|
204
|
+
}
|
205
|
+
}
|
206
|
+
}
|
207
|
+
|
208
|
+
#{$selector} {
|
209
|
+
display: block;
|
210
|
+
font-size: $size * 0.75;
|
211
|
+
width: $size;
|
212
|
+
height: $size;
|
213
|
+
line-height: $size;
|
214
|
+
text-align: center;
|
215
|
+
border-radius: 1000px;
|
216
|
+
background: $background;
|
217
|
+
color: if($color == auto, isitlight($background), $color);
|
218
|
+
position: absolute;
|
219
|
+
pointer-events: none;
|
220
|
+
|
221
|
+
@if $x == left or $x == right {
|
222
|
+
#{$x}: $offset;
|
223
|
+
}
|
224
|
+
|
225
|
+
@if $y == top or $y == bottom {
|
226
|
+
#{$y}: $offset;
|
227
|
+
}
|
228
|
+
@else {
|
229
|
+
top: 50%;
|
230
|
+
transform: translateY(-50%);
|
231
|
+
}
|
232
|
+
}
|
233
|
+
}
|
234
|
+
|
235
|
+
/*
|
236
|
+
Set the alignment of menu items (li) within a menu-bar
|
237
|
+
|
238
|
+
left: Items align to the left.
|
239
|
+
right: Items align to the right.
|
240
|
+
center: Items align to the center.
|
241
|
+
justify: Items are spaced equally apart so they occupy the space of the entire grid.
|
242
|
+
spaced: Items are given equal space to their left and right.
|
243
|
+
|
244
|
+
@group menu-bar
|
245
|
+
|
246
|
+
@param {string} $align - Alignment to use.
|
247
|
+
|
248
|
+
@output An appropriate justify-content value.
|
249
|
+
*/
|
250
|
+
@mixin menu-bar-align($align: left) {
|
251
|
+
$options: (
|
252
|
+
left: flex-start,
|
253
|
+
right: flex-end,
|
254
|
+
center: center,
|
255
|
+
justify: space-between,
|
256
|
+
spaced: space-around,
|
257
|
+
);
|
258
|
+
justify-content: map-get($options, $align);
|
259
|
+
}
|
260
|
+
|
261
|
+
/*
|
262
|
+
CSS output
|
263
|
+
*/
|
264
|
+
@include exports(menu-bar) {
|
265
|
+
.menu-bar {
|
266
|
+
@extend %menu-bar;
|
267
|
+
@include menu-bar-style;
|
268
|
+
|
269
|
+
// Positioning
|
270
|
+
&, &.horizontal { @include menu-bar-layout(horizontal); }
|
271
|
+
&.vertical { @include menu-bar-layout(vertical); }
|
272
|
+
|
273
|
+
// Condensed bar
|
274
|
+
&.condense {
|
275
|
+
> li { flex: 0 0 auto; }
|
276
|
+
}
|
277
|
+
|
278
|
+
// Align Menu Items
|
279
|
+
&.align-right { @include menu-bar-align(right); }
|
280
|
+
&.align-center { @include menu-bar-align(center); }
|
281
|
+
&.align-justify { @include menu-bar-align(justify); }
|
282
|
+
&.align-spaced { @include menu-bar-align(spaced); }
|
283
|
+
|
284
|
+
@each $size in $breakpoint-classes {
|
285
|
+
@include breakpoint($size) {
|
286
|
+
&.#{$size}-condense { li { flex: 0 0 auto; } }
|
287
|
+
&.#{$size}-expand { li { flex: 1 0 auto; } }
|
288
|
+
|
289
|
+
// Responsive Alignment
|
290
|
+
&.#{$size}-align-left { @include menu-bar-align(left); }
|
291
|
+
&.#{$size}-align-right { @include menu-bar-align(right); }
|
292
|
+
&.#{$size}-align-center { @include menu-bar-align(center); }
|
293
|
+
&.#{$size}-align-justify { @include menu-bar-align(justify); }
|
294
|
+
&.#{$size}-align-spaced { @include menu-bar-align(spaced); }
|
295
|
+
}
|
296
|
+
}
|
297
|
+
|
298
|
+
// Responsive positioning
|
299
|
+
@each $size in $breakpoint-classes {
|
300
|
+
@include breakpoint($size) {
|
301
|
+
&.#{$size}-horizontal {
|
302
|
+
@include menu-bar-layout(horizontal);
|
303
|
+
}
|
304
|
+
&.#{$size}-vertical {
|
305
|
+
@include menu-bar-layout(vertical);
|
306
|
+
}
|
307
|
+
}
|
308
|
+
}
|
309
|
+
|
310
|
+
// Icon positioning
|
311
|
+
&, &.icon-top { @include menu-bar-icons(top); }
|
312
|
+
&.icon-right { @include menu-bar-icons(right); }
|
313
|
+
&.icon-bottom { @include menu-bar-icons(bottom); }
|
314
|
+
&.icon-left { @include menu-bar-icons(left); }
|
315
|
+
@each $size in $breakpoint-classes {
|
316
|
+
@each $pos in (top, right, bottom, left) {
|
317
|
+
@include breakpoint($size) {
|
318
|
+
&.#{$size}-icon-#{$pos} { @include menu-bar-icons($pos); }
|
319
|
+
}
|
320
|
+
}
|
321
|
+
}
|
322
|
+
|
323
|
+
// Labels
|
324
|
+
&.label-side { @include menu-bar-labels(right, center); }
|
325
|
+
&.label-corner { @include menu-bar-labels(right, top); }
|
326
|
+
|
327
|
+
// Coloring
|
328
|
+
&.primary {
|
329
|
+
@include menu-bar-style($primary-color, $autocolor: true);
|
330
|
+
}
|
331
|
+
&.dark {
|
332
|
+
@include menu-bar-style($dark-color, $autocolor: true);
|
333
|
+
}
|
334
|
+
|
335
|
+
// Title
|
336
|
+
> li.title {
|
337
|
+
padding: $menubar-item-padding;
|
338
|
+
cursor: default;
|
339
|
+
font-weight: bold;
|
340
|
+
}
|
341
|
+
}
|
342
|
+
|
343
|
+
// Menu groups
|
344
|
+
.menu-group {
|
345
|
+
display: flex;
|
346
|
+
align-items: center;
|
347
|
+
justify-content: space-between;
|
348
|
+
flex-wrap: wrap;
|
349
|
+
|
350
|
+
@include breakpoint(medium) {
|
351
|
+
flex-wrap: nowrap;
|
352
|
+
}
|
353
|
+
|
354
|
+
> .menu-group-left, > .menu-group-right {
|
355
|
+
flex: 1 1 100%;
|
356
|
+
|
357
|
+
@include breakpoint(medium) {
|
358
|
+
flex: 0 0 auto;
|
359
|
+
}
|
360
|
+
}
|
361
|
+
|
362
|
+
// Menu bar is condensed
|
363
|
+
.menu-bar {
|
364
|
+
> li { flex: 0 0 auto; }
|
365
|
+
margin: 0;
|
366
|
+
}
|
367
|
+
|
368
|
+
// Coloring class cascades down to the menu bar
|
369
|
+
&.primary {
|
370
|
+
background-color: $primary-color;
|
371
|
+
.menu-bar {
|
372
|
+
@include menu-bar-style($primary-color, $autocolor: true);
|
373
|
+
}
|
374
|
+
}
|
375
|
+
&.dark {
|
376
|
+
background-color: $dark-color;
|
377
|
+
.menu-bar {
|
378
|
+
@include menu-bar-style($dark-color, $autocolor: true);
|
379
|
+
}
|
380
|
+
}
|
381
|
+
}
|
382
|
+
}
|