foundation-rails 5.5.1.2 → 5.5.2.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.
- data/bower.json +2 -2
- data/lib/foundation/rails/version.rb +1 -1
- data/vendor/assets/javascripts/foundation.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.abide.js +96 -28
- data/vendor/assets/javascripts/foundation/foundation.accordion.js +28 -7
- data/vendor/assets/javascripts/foundation/foundation.alert.js +3 -3
- data/vendor/assets/javascripts/foundation/foundation.clearing.js +50 -20
- data/vendor/assets/javascripts/foundation/foundation.dropdown.js +26 -11
- data/vendor/assets/javascripts/foundation/foundation.equalizer.js +43 -16
- data/vendor/assets/javascripts/foundation/foundation.interchange.js +19 -14
- data/vendor/assets/javascripts/foundation/foundation.joyride.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.js +51 -29
- data/vendor/assets/javascripts/foundation/foundation.magellan.js +40 -28
- data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +3 -3
- data/vendor/assets/javascripts/foundation/foundation.orbit.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.reveal.js +70 -43
- data/vendor/assets/javascripts/foundation/foundation.slider.js +23 -5
- data/vendor/assets/javascripts/foundation/foundation.tab.js +30 -18
- data/vendor/assets/javascripts/foundation/foundation.tooltip.js +47 -15
- data/vendor/assets/javascripts/foundation/foundation.topbar.js +31 -25
- data/vendor/assets/stylesheets/foundation.scss +37 -38
- data/vendor/assets/stylesheets/foundation/_functions.scss +52 -42
- data/vendor/assets/stylesheets/foundation/_settings.scss +53 -34
- data/vendor/assets/stylesheets/foundation/components/_accordion.scss +7 -7
- data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +11 -11
- data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +13 -13
- data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +17 -18
- data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +29 -22
- data/vendor/assets/stylesheets/foundation/components/_buttons.scss +13 -17
- data/vendor/assets/stylesheets/foundation/components/_clearing.scss +51 -47
- data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +10 -11
- data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +42 -36
- data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +7 -7
- data/vendor/assets/stylesheets/foundation/components/_forms.scss +82 -50
- data/vendor/assets/stylesheets/foundation/components/_global.scss +86 -64
- data/vendor/assets/stylesheets/foundation/components/_grid.scss +24 -21
- data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +335 -234
- data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +8 -8
- data/vendor/assets/stylesheets/foundation/components/_joyride.scss +40 -42
- data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +2 -3
- data/vendor/assets/stylesheets/foundation/components/_labels.scss +6 -6
- data/vendor/assets/stylesheets/foundation/components/_magellan.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +178 -175
- data/vendor/assets/stylesheets/foundation/components/_orbit.scss +82 -62
- data/vendor/assets/stylesheets/foundation/components/_pagination.scss +15 -15
- data/vendor/assets/stylesheets/foundation/components/_panels.scss +21 -15
- data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +16 -16
- data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +4 -4
- data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +23 -16
- data/vendor/assets/stylesheets/foundation/components/_reveal.scss +27 -27
- data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +15 -11
- data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +16 -16
- data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +14 -11
- data/vendor/assets/stylesheets/foundation/components/_switches.scss +22 -19
- data/vendor/assets/stylesheets/foundation/components/_tables.scss +8 -8
- data/vendor/assets/stylesheets/foundation/components/_tabs.scss +49 -32
- data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +8 -8
- data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +25 -25
- data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +163 -122
- data/vendor/assets/stylesheets/foundation/components/_type.scss +19 -19
- data/vendor/assets/stylesheets/foundation/components/_visibility.scss +23 -5
- data/vendor/assets/stylesheets/normalize.scss +8 -11
- metadata +28 -20
- checksums.yaml +0 -7
- data/vendor/assets/stylesheets/foundation/components/_toolbar.scss +0 -72
@@ -2,10 +2,10 @@
|
|
2
2
|
// foundation.zurb.com
|
3
3
|
// Licensed under MIT Open Source
|
4
4
|
|
5
|
-
@import
|
6
|
-
@import
|
7
|
-
@import
|
8
|
-
@import
|
5
|
+
@import 'global';
|
6
|
+
@import 'grid';
|
7
|
+
@import 'buttons';
|
8
|
+
@import 'forms';
|
9
9
|
|
10
10
|
//
|
11
11
|
// Top Bar Variables
|
@@ -33,7 +33,7 @@ $topbar-link-weight: $font-weight-normal !default;
|
|
33
33
|
$topbar-link-font-size: rem-calc(13) !default;
|
34
34
|
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
|
35
35
|
$topbar-link-bg: $topbar-bg !default;
|
36
|
-
$topbar-link-bg-hover: $
|
36
|
+
$topbar-link-bg-hover: $jet !default;
|
37
37
|
$topbar-link-bg-color-hover: $charcoal !default;
|
38
38
|
$topbar-link-bg-active: $primary-color !default;
|
39
39
|
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
|
@@ -42,7 +42,7 @@ $topbar-link-text-transform: none !default;
|
|
42
42
|
$topbar-link-padding: ($topbar-height / 3) !default;
|
43
43
|
$topbar-back-link-size: rem-calc(18) !default;
|
44
44
|
$topbar-link-dropdown-padding: rem-calc(20) !default;
|
45
|
-
$topbar-button-font-size:
|
45
|
+
$topbar-button-font-size: .75rem !default;
|
46
46
|
$topbar-button-top: 7px !default;
|
47
47
|
|
48
48
|
// Style the top bar dropdown elements
|
@@ -50,11 +50,11 @@ $topbar-dropdown-bg: $oil !default;
|
|
50
50
|
$topbar-dropdown-link-color: $white !default;
|
51
51
|
$topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
|
52
52
|
$topbar-dropdown-link-bg: $oil !default;
|
53
|
-
$topbar-dropdown-link-bg-hover: $
|
53
|
+
$topbar-dropdown-link-bg-hover: $jet !default;
|
54
54
|
$topbar-dropdown-link-weight: $font-weight-normal !default;
|
55
55
|
$topbar-dropdown-toggle-size: 5px !default;
|
56
56
|
$topbar-dropdown-toggle-color: $white !default;
|
57
|
-
$topbar-dropdown-toggle-alpha:
|
57
|
+
$topbar-dropdown-toggle-alpha: .4 !default;
|
58
58
|
|
59
59
|
$topbar-dropdown-label-color: $monsoon !default;
|
60
60
|
$topbar-dropdown-label-text-transform: uppercase !default;
|
@@ -76,7 +76,7 @@ $topbar-menu-icon-position: $opposite-direction !default; // Change to $default-
|
|
76
76
|
$topbar-transition-speed: 300ms !default;
|
77
77
|
// Using rem-calc for the below breakpoint causes issues with top bar
|
78
78
|
$topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
|
79
|
-
$topbar-media-query: $
|
79
|
+
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
|
80
80
|
|
81
81
|
// Top-bar input styles
|
82
82
|
$topbar-input-height: rem-calc(28) !default;
|
@@ -93,13 +93,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
93
93
|
// Accessibility mixins for hiding and showing the menu dropdown items
|
94
94
|
@mixin topbar-hide-dropdown {
|
95
95
|
// Makes an element visually hidden by default, but visible when focused.
|
96
|
-
display: block;
|
97
96
|
@include element-invisible();
|
97
|
+
display: block;
|
98
98
|
}
|
99
99
|
|
100
100
|
@mixin topbar-show-dropdown {
|
101
|
-
display: block;
|
102
101
|
@include element-invisible-off();
|
102
|
+
display: block;
|
103
103
|
position: absolute !important; // Reset the position from static to absolute
|
104
104
|
}
|
105
105
|
|
@@ -120,67 +120,76 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
120
120
|
width: 100%;
|
121
121
|
background: $topbar-bg;
|
122
122
|
|
123
|
-
.top-bar {
|
123
|
+
.top-bar {
|
124
|
+
margin-bottom: $topbar-margin-bottom;
|
125
|
+
}
|
124
126
|
}
|
125
127
|
|
126
128
|
// Wrapped around .top-bar to make it stick to the top
|
127
129
|
.fixed {
|
128
|
-
width: 100%;
|
129
|
-
#{$default-float}: 0;
|
130
130
|
position: fixed;
|
131
131
|
top: 0;
|
132
|
+
width: 100%;
|
132
133
|
z-index: 99;
|
134
|
+
#{$default-float}: 0;
|
133
135
|
|
134
136
|
&.expanded:not(.top-bar) {
|
135
|
-
overflow-y: auto;
|
136
137
|
height: auto;
|
137
|
-
width: 100%;
|
138
138
|
max-height: 100%;
|
139
|
+
overflow-y: auto;
|
140
|
+
width: 100%;
|
139
141
|
|
140
142
|
.title-area {
|
141
143
|
position: fixed;
|
142
144
|
width: 100%;
|
143
145
|
z-index: 99;
|
144
146
|
}
|
147
|
+
|
145
148
|
// Ensure you can scroll the menu on small screens
|
146
149
|
.top-bar-section {
|
147
|
-
z-index: 98;
|
148
150
|
margin-top: $topbar-height;
|
151
|
+
z-index: 98;
|
149
152
|
}
|
150
153
|
}
|
151
154
|
}
|
152
155
|
|
153
156
|
.top-bar {
|
154
|
-
|
157
|
+
background: $topbar-bg;
|
155
158
|
height: $topbar-height;
|
156
159
|
line-height: $topbar-height;
|
157
|
-
position: relative;
|
158
|
-
background: $topbar-bg;
|
159
160
|
margin-bottom: $topbar-margin-bottom;
|
161
|
+
overflow: hidden;
|
162
|
+
position: relative;
|
160
163
|
|
161
164
|
// Topbar Global list Styles
|
162
165
|
ul {
|
163
|
-
margin-bottom: 0;
|
164
166
|
list-style: none;
|
167
|
+
margin-bottom: 0;
|
165
168
|
}
|
166
169
|
|
167
|
-
.row {
|
170
|
+
.row {
|
171
|
+
max-width: none;
|
172
|
+
}
|
168
173
|
|
169
174
|
form,
|
170
|
-
input
|
175
|
+
input,
|
176
|
+
select {
|
177
|
+
margin-bottom: 0;
|
178
|
+
}
|
171
179
|
|
172
|
-
input
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
180
|
+
input,
|
181
|
+
select {
|
182
|
+
font-size: $topbar-button-font-size;
|
183
|
+
height: $topbar-input-height;
|
184
|
+
padding-bottom: .35rem;
|
185
|
+
padding-top: .35rem;
|
177
186
|
}
|
178
187
|
|
179
188
|
.button, button {
|
180
|
-
padding-top: .35rem + rem-calc(1);
|
181
|
-
padding-bottom: .35rem + rem-calc(1);
|
182
|
-
margin-bottom: 0;
|
183
189
|
font-size: $topbar-button-font-size;
|
190
|
+
margin-bottom: 0;
|
191
|
+
padding-bottom: .35rem + rem-calc(1);
|
192
|
+
padding-top: .35rem + rem-calc(1);
|
184
193
|
// position: relative;
|
185
194
|
// top: -1px;
|
186
195
|
|
@@ -193,26 +202,26 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
193
202
|
|
194
203
|
// Title Area
|
195
204
|
.title-area {
|
196
|
-
position: relative;
|
197
205
|
margin: 0;
|
206
|
+
position: relative;
|
198
207
|
}
|
199
208
|
|
200
209
|
.name {
|
210
|
+
font-size: $rem-base;
|
201
211
|
height: $topbar-height;
|
202
212
|
margin: 0;
|
203
|
-
font-size: $rem-base;
|
204
|
-
// @if $topbar-menu-icon-position == $default-float {float: $opposite-direction;}
|
205
213
|
|
206
214
|
h1, h2, h3, h4, p, span {
|
207
|
-
line-height: $topbar-height;
|
208
215
|
font-size: $topbar-title-font-size;
|
216
|
+
line-height: $topbar-height;
|
209
217
|
margin: 0;
|
218
|
+
|
210
219
|
a {
|
211
|
-
font-weight: $topbar-title-weight;
|
212
220
|
color: $topbar-link-color;
|
213
|
-
width: 75%;
|
214
221
|
display: block;
|
222
|
+
font-weight: $topbar-title-weight;
|
215
223
|
padding: 0 $topbar-link-padding;
|
224
|
+
width: 75%;
|
216
225
|
}
|
217
226
|
}
|
218
227
|
}
|
@@ -225,59 +234,50 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
225
234
|
|
226
235
|
a {
|
227
236
|
color: $topbar-link-color;
|
228
|
-
|
237
|
+
display: block;
|
229
238
|
font-size: $topbar-menu-link-font-size;
|
230
239
|
font-weight: $topbar-menu-link-weight;
|
231
|
-
position: relative;
|
232
|
-
display: block;
|
233
|
-
padding: 0 $topbar-link-padding;
|
234
240
|
height: $topbar-height;
|
235
241
|
line-height: $topbar-height;
|
242
|
+
padding: 0 $topbar-link-padding;
|
243
|
+
position: relative;
|
244
|
+
text-transform: $topbar-menu-link-transform;
|
236
245
|
}
|
237
246
|
|
238
247
|
// Adding the class "menu-icon" will add the 3-line icon people love and adore.
|
239
248
|
&.menu-icon {
|
240
|
-
top: 50%;
|
241
249
|
margin-top: -16px;
|
250
|
+
top: 50%;
|
242
251
|
|
243
252
|
a {
|
253
|
+
@include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
|
254
|
+
|
244
255
|
@if $text-direction == rtl {
|
245
256
|
text-indent: -58px;
|
246
257
|
}
|
258
|
+
color: $topbar-menu-link-color;
|
247
259
|
height: 34px;
|
248
260
|
line-height: 33px;
|
249
261
|
padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
|
250
|
-
color: $topbar-menu-link-color;
|
251
262
|
position: relative;
|
252
|
-
|
253
|
-
& {
|
254
|
-
// @include hamburger icon
|
255
|
-
//
|
256
|
-
// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
|
257
|
-
// $width - Width of hamburger icon
|
258
|
-
// $left - If false, icon will be centered horizontally || explicitly set value in rem
|
259
|
-
// $top - If false, icon will be centered vertically || explicitly set value in rem
|
260
|
-
// $thickness - thickness of lines in hamburger icon, set value in px
|
261
|
-
// $gap - spacing between the lines in hamburger icon, set value in px
|
262
|
-
// $color - icon color
|
263
|
-
// $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled
|
264
|
-
// $offcanvas - Set to false of @include in topbar
|
265
|
-
@include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
|
266
|
-
}
|
267
263
|
}
|
268
264
|
}
|
269
265
|
}
|
270
266
|
|
271
267
|
// Change things up when the top-bar is expanded
|
272
268
|
&.expanded {
|
273
|
-
height: auto;
|
274
269
|
background: transparent;
|
270
|
+
height: auto;
|
275
271
|
|
276
|
-
.title-area {
|
272
|
+
.title-area {
|
273
|
+
background: $topbar-bg;
|
274
|
+
}
|
277
275
|
|
278
276
|
.toggle-topbar {
|
279
|
-
a {
|
280
|
-
|
277
|
+
a {
|
278
|
+
color: $topbar-menu-link-color-toggled;
|
279
|
+
|
280
|
+
span::after {
|
281
281
|
// Shh, don't tell, but box-shadows create the menu icon :)
|
282
282
|
// Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
|
283
283
|
box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
|
@@ -286,6 +286,21 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
286
286
|
}
|
287
287
|
}
|
288
288
|
}
|
289
|
+
|
290
|
+
// Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
|
291
|
+
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
292
|
+
.top-bar-section {
|
293
|
+
.has-dropdown.moved > .dropdown,
|
294
|
+
.dropdown {
|
295
|
+
clip: initial;
|
296
|
+
}
|
297
|
+
|
298
|
+
// This was needed as parent ul's had padding, and the clip: was allowing content to peak through
|
299
|
+
.has-dropdown:not(.moved) > ul {
|
300
|
+
padding: 0;
|
301
|
+
}
|
302
|
+
}
|
303
|
+
}
|
289
304
|
}
|
290
305
|
}
|
291
306
|
|
@@ -297,12 +312,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
297
312
|
@include single-transition($default-float, $topbar-transition-speed);
|
298
313
|
|
299
314
|
ul {
|
300
|
-
padding: 0;
|
301
|
-
width: 100%;
|
302
|
-
height: auto;
|
303
315
|
display: block;
|
304
316
|
font-size: $rem-base;
|
317
|
+
height: auto;
|
305
318
|
margin: 0;
|
319
|
+
padding: 0;
|
320
|
+
width: 100%;
|
306
321
|
}
|
307
322
|
|
308
323
|
.divider,
|
@@ -315,54 +330,60 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
315
330
|
|
316
331
|
ul li {
|
317
332
|
background: $topbar-dropdown-bg;
|
318
|
-
|
319
|
-
|
320
|
-
width: 100%;
|
333
|
+
|
334
|
+
> a {
|
321
335
|
color: $topbar-link-color;
|
322
|
-
|
323
|
-
padding-#{$default-float}: $topbar-link-padding;
|
336
|
+
display: block;
|
324
337
|
font-family: $topbar-link-font-family;
|
325
338
|
font-size: $topbar-link-font-size;
|
326
339
|
font-weight: $topbar-link-weight;
|
340
|
+
padding-#{$default-float}: $topbar-link-padding;
|
341
|
+
padding: 12px 0 12px $topbar-link-padding;
|
327
342
|
text-transform: $topbar-link-text-transform;
|
343
|
+
width: 100%;
|
328
344
|
|
329
345
|
&.button {
|
330
346
|
font-size: $topbar-link-font-size;
|
331
|
-
padding-#{$opposite-direction}: $topbar-link-padding;
|
332
347
|
padding-#{$default-float}: $topbar-link-padding;
|
348
|
+
padding-#{$opposite-direction}: $topbar-link-padding;
|
333
349
|
@include button-style($bg:$primary-color);
|
334
350
|
}
|
351
|
+
|
335
352
|
&.button.secondary { @include button-style($bg:$secondary-color); }
|
336
353
|
&.button.success { @include button-style($bg:$success-color); }
|
337
354
|
&.button.alert { @include button-style($bg:$alert-color); }
|
338
355
|
&.button.warning { @include button-style($bg:$warning-color); }
|
356
|
+
&.button.info { @include button-style($bg:$info-color); }
|
339
357
|
}
|
340
358
|
|
341
359
|
> button {
|
342
360
|
font-size: $topbar-link-font-size;
|
343
|
-
padding-#{$opposite-direction}: $topbar-link-padding;
|
344
361
|
padding-#{$default-float}: $topbar-link-padding;
|
362
|
+
padding-#{$opposite-direction}: $topbar-link-padding;
|
345
363
|
@include button-style($bg:$primary-color);
|
346
364
|
|
347
365
|
&.secondary { @include button-style($bg:$secondary-color); }
|
348
366
|
&.success { @include button-style($bg:$success-color); }
|
349
367
|
&.alert { @include button-style($bg:$alert-color); }
|
350
368
|
&.warning { @include button-style($bg:$warning-color); }
|
369
|
+
&.info { @include button-style($bg:$info-color); }
|
351
370
|
}
|
352
371
|
|
353
372
|
// Apply the hover link color when it has that class
|
354
373
|
&:hover:not(.has-form) > a {
|
355
374
|
background-color: $topbar-link-bg-color-hover;
|
375
|
+
color: $topbar-link-color-hover;
|
376
|
+
|
356
377
|
@if ($topbar-link-bg-hover) {
|
357
378
|
background: $topbar-link-bg-hover;
|
358
379
|
}
|
359
|
-
color: $topbar-link-color-hover;
|
360
380
|
}
|
361
381
|
|
362
382
|
// Apply the active link color when it has that class
|
363
383
|
&.active > a {
|
364
384
|
background: $topbar-link-bg-active;
|
365
385
|
color: $topbar-link-color-active;
|
386
|
+
|
366
387
|
&:hover {
|
367
388
|
background: $topbar-link-bg-active-hover;
|
368
389
|
color: $topbar-link-color-active-hover;
|
@@ -371,17 +392,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
371
392
|
}
|
372
393
|
|
373
394
|
// Add some extra padding for list items contains buttons
|
374
|
-
.has-form {
|
395
|
+
.has-form {
|
396
|
+
padding: $topbar-link-padding;
|
397
|
+
}
|
375
398
|
|
376
399
|
// Styling for list items that have a dropdown within them.
|
377
400
|
.has-dropdown {
|
378
401
|
position: relative;
|
379
402
|
|
380
|
-
|
403
|
+
> a {
|
381
404
|
&:after {
|
382
|
-
@if ($topbar-arrows){
|
405
|
+
@if ($topbar-arrows) {
|
383
406
|
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
|
384
407
|
}
|
408
|
+
|
385
409
|
margin-#{$opposite-direction}: $topbar-link-padding;
|
386
410
|
margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
|
387
411
|
position: absolute;
|
@@ -390,12 +414,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
390
414
|
}
|
391
415
|
}
|
392
416
|
|
393
|
-
&.moved {
|
394
|
-
|
417
|
+
&.moved {
|
418
|
+
position: static;
|
419
|
+
|
420
|
+
> .dropdown {
|
395
421
|
@include topbar-show-dropdown();
|
396
422
|
width: 100%;
|
397
423
|
}
|
398
|
-
|
424
|
+
|
425
|
+
> a:after {
|
399
426
|
display: none;
|
400
427
|
}
|
401
428
|
}
|
@@ -403,16 +430,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
403
430
|
|
404
431
|
// Styling elements inside of dropdowns
|
405
432
|
.dropdown {
|
433
|
+
@include topbar-hide-dropdown();
|
406
434
|
padding: 0;
|
407
435
|
position: absolute;
|
408
|
-
#{$default-float}: 100%;
|
409
436
|
top: 0;
|
410
437
|
z-index: 99;
|
411
|
-
|
438
|
+
#{$default-float}: 100%;
|
412
439
|
|
413
440
|
li {
|
414
|
-
width: 100%;
|
415
441
|
height: auto;
|
442
|
+
width: 100%;
|
416
443
|
|
417
444
|
a {
|
418
445
|
font-weight: $topbar-dropdown-link-weight;
|
@@ -422,7 +449,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
422
449
|
}
|
423
450
|
}
|
424
451
|
|
425
|
-
&.title h5,
|
452
|
+
&.title h5,
|
453
|
+
&.parent-link {
|
426
454
|
// Back Button
|
427
455
|
margin-bottom: 0;
|
428
456
|
margin-top: 0;
|
@@ -434,17 +462,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
434
462
|
&:hover { background:none; }
|
435
463
|
}
|
436
464
|
}
|
437
|
-
|
438
|
-
|
465
|
+
|
466
|
+
&.has-form {
|
467
|
+
padding: 8px $topbar-link-padding;
|
468
|
+
}
|
469
|
+
|
470
|
+
.button,
|
471
|
+
button {
|
472
|
+
top: auto;
|
473
|
+
}
|
439
474
|
}
|
440
475
|
|
441
476
|
label {
|
442
|
-
padding: 8px $topbar-link-padding 2px;
|
443
|
-
margin-bottom: 0;
|
444
|
-
text-transform: $topbar-dropdown-label-text-transform;
|
445
477
|
color: $topbar-dropdown-label-color;
|
446
|
-
font-weight: $topbar-dropdown-label-font-weight;
|
447
478
|
font-size: $topbar-dropdown-label-font-size;
|
479
|
+
font-weight: $topbar-dropdown-label-font-weight;
|
480
|
+
margin-bottom: 0;
|
481
|
+
padding: 8px $topbar-link-padding 2px;
|
482
|
+
text-transform: $topbar-dropdown-label-text-transform;
|
448
483
|
}
|
449
484
|
}
|
450
485
|
}
|
@@ -455,8 +490,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
455
490
|
// Top Bar styles intended for screen sizes above the breakpoint.
|
456
491
|
@media #{$topbar-media-query} {
|
457
492
|
.top-bar {
|
458
|
-
background: $topbar-bg;
|
459
493
|
@include clearfix;
|
494
|
+
background: $topbar-bg;
|
460
495
|
overflow: visible;
|
461
496
|
|
462
497
|
.toggle-topbar { display: none; }
|
@@ -470,21 +505,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
470
505
|
.name h6 a { width: auto; }
|
471
506
|
|
472
507
|
input,
|
508
|
+
select,
|
473
509
|
.button,
|
474
510
|
button {
|
475
511
|
font-size: rem-calc(14);
|
476
|
-
position: relative;
|
477
512
|
height: $topbar-input-height;
|
513
|
+
position: relative;
|
478
514
|
top: (($topbar-height - $topbar-input-height) / 2);
|
479
515
|
}
|
480
516
|
|
481
|
-
&.expanded {
|
517
|
+
&.expanded {
|
518
|
+
background: $topbar-bg;
|
519
|
+
}
|
482
520
|
}
|
483
521
|
|
484
522
|
.contain-to-grid .top-bar {
|
485
|
-
max-width: $row-width;
|
486
|
-
margin: 0 auto;
|
487
523
|
margin-bottom: $topbar-margin-bottom;
|
524
|
+
margin: 0 auto;
|
525
|
+
max-width: $row-width;
|
488
526
|
}
|
489
527
|
|
490
528
|
.top-bar-section {
|
@@ -492,9 +530,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
492
530
|
#{$default-float}: 0 !important;
|
493
531
|
|
494
532
|
ul {
|
495
|
-
width: auto;
|
496
|
-
height: auto !important;
|
497
533
|
display: inline;
|
534
|
+
height: auto !important;
|
535
|
+
width: auto;
|
498
536
|
|
499
537
|
li {
|
500
538
|
float: $default-float;
|
@@ -512,11 +550,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
512
550
|
color: $topbar-link-color-hover;
|
513
551
|
}
|
514
552
|
}
|
553
|
+
|
515
554
|
&:not(.has-form) {
|
516
555
|
a:not(.button) {
|
517
|
-
padding: 0 $topbar-link-padding;
|
518
|
-
line-height: $topbar-height;
|
519
556
|
background: $topbar-link-bg;
|
557
|
+
line-height: $topbar-height;
|
558
|
+
padding: 0 $topbar-link-padding;
|
520
559
|
&:hover {
|
521
560
|
background-color: $topbar-link-bg-color-hover;
|
522
561
|
@if ($topbar-link-bg-hover) {
|
@@ -525,12 +564,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
525
564
|
}
|
526
565
|
}
|
527
566
|
}
|
567
|
+
|
528
568
|
&.active:not(.has-form) {
|
529
569
|
a:not(.button) {
|
530
|
-
padding: 0 $topbar-link-padding;
|
531
|
-
line-height: $topbar-height;
|
532
|
-
color: $topbar-link-color-active;
|
533
570
|
background: $topbar-link-bg-active;
|
571
|
+
color: $topbar-link-color-active;
|
572
|
+
line-height: $topbar-height;
|
573
|
+
padding: 0 $topbar-link-padding;
|
534
574
|
&:hover {
|
535
575
|
background: $topbar-link-bg-active-hover;
|
536
576
|
color: $topbar-link-color-active-hover;
|
@@ -540,8 +580,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
540
580
|
}
|
541
581
|
|
542
582
|
.has-dropdown {
|
543
|
-
@if
|
544
|
-
|
583
|
+
@if $topbar-arrows {
|
584
|
+
> a {
|
545
585
|
padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
|
546
586
|
&:after {
|
547
587
|
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
|
@@ -552,30 +592,30 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
552
592
|
}
|
553
593
|
|
554
594
|
&.moved { position: relative;
|
555
|
-
|
595
|
+
> .dropdown {
|
556
596
|
@include topbar-hide-dropdown();
|
557
597
|
}
|
558
598
|
}
|
559
599
|
|
560
600
|
&.hover, &.not-click:hover {
|
561
|
-
|
601
|
+
> .dropdown {
|
562
602
|
@include topbar-show-dropdown();
|
563
603
|
}
|
564
604
|
}
|
605
|
+
|
565
606
|
> a:focus + .dropdown {
|
566
607
|
@include topbar-show-dropdown();
|
567
608
|
}
|
568
609
|
|
569
610
|
.dropdown li.has-dropdown {
|
570
|
-
|
571
|
-
@if ($topbar-dropdown-arrows){
|
611
|
+
> a {
|
612
|
+
@if ($topbar-dropdown-arrows) {
|
572
613
|
&:after {
|
573
614
|
border: none;
|
574
615
|
content: "\00bb";
|
575
|
-
top:
|
576
|
-
|
616
|
+
top: rem-calc(3);
|
617
|
+
|
577
618
|
#{$opposite-direction}: 5px;
|
578
|
-
line-height: 1.2;
|
579
619
|
}
|
580
620
|
}
|
581
621
|
}
|
@@ -584,28 +624,28 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
584
624
|
|
585
625
|
.dropdown {
|
586
626
|
#{$default-float}: 0;
|
587
|
-
top: auto;
|
588
627
|
background: transparent;
|
589
628
|
min-width: 100%;
|
629
|
+
top: auto;
|
590
630
|
|
591
631
|
li {
|
592
632
|
a {
|
633
|
+
background: $topbar-dropdown-link-bg;
|
593
634
|
color: $topbar-dropdown-link-color;
|
594
635
|
line-height: $topbar-height;
|
595
|
-
white-space: nowrap;
|
596
636
|
padding: 12px $topbar-link-padding;
|
597
|
-
|
637
|
+
white-space: nowrap;
|
598
638
|
}
|
599
639
|
|
600
640
|
&:not(.has-form):not(.active) {
|
601
|
-
|
602
|
-
color: $topbar-dropdown-link-color;
|
641
|
+
> a:not(.button) {
|
603
642
|
background: $topbar-dropdown-link-bg;
|
643
|
+
color: $topbar-dropdown-link-color;
|
604
644
|
}
|
605
645
|
|
606
646
|
&:hover > a:not(.button) {
|
607
|
-
color: $topbar-dropdown-link-color-hover;
|
608
647
|
background-color: $topbar-link-bg-color-hover;
|
648
|
+
color: $topbar-dropdown-link-color-hover;
|
609
649
|
@if ($topbar-dropdown-link-bg-hover) {
|
610
650
|
background: $topbar-dropdown-link-bg-hover;
|
611
651
|
}
|
@@ -613,8 +653,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
613
653
|
}
|
614
654
|
|
615
655
|
label {
|
616
|
-
white-space: nowrap;
|
617
656
|
background: $topbar-dropdown-label-bg;
|
657
|
+
white-space: nowrap;
|
618
658
|
}
|
619
659
|
|
620
660
|
// Second Level Dropdowns
|
@@ -625,11 +665,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
625
665
|
}
|
626
666
|
}
|
627
667
|
|
628
|
-
|
629
|
-
|
668
|
+
> ul > .divider,
|
669
|
+
> ul > [role="separator"] {
|
670
|
+
border-#{$opposite-direction}: $topbar-divider-border-bottom;
|
630
671
|
border-bottom: none;
|
631
672
|
border-top: none;
|
632
|
-
border-#{$opposite-direction}: $topbar-divider-border-bottom;
|
633
673
|
clear: none;
|
634
674
|
height: $topbar-height;
|
635
675
|
width: 0;
|
@@ -637,8 +677,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
637
677
|
|
638
678
|
.has-form {
|
639
679
|
background: $topbar-link-bg;
|
640
|
-
padding: 0 $topbar-link-padding;
|
641
680
|
height: $topbar-height;
|
681
|
+
padding: 0 $topbar-link-padding;
|
642
682
|
}
|
643
683
|
|
644
684
|
// Position overrides for ul.right and ul.left
|
@@ -682,10 +722,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
682
722
|
|
683
723
|
.has-dropdown {
|
684
724
|
&:hover {
|
685
|
-
|
725
|
+
> .dropdown {
|
686
726
|
@include topbar-show-dropdown();
|
687
727
|
}
|
688
728
|
}
|
729
|
+
|
689
730
|
> a:focus + .dropdown {
|
690
731
|
@include topbar-show-dropdown();
|
691
732
|
}
|