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.
Files changed (65) hide show
  1. data/bower.json +2 -2
  2. data/lib/foundation/rails/version.rb +1 -1
  3. data/vendor/assets/javascripts/foundation.js +1 -1
  4. data/vendor/assets/javascripts/foundation/foundation.abide.js +96 -28
  5. data/vendor/assets/javascripts/foundation/foundation.accordion.js +28 -7
  6. data/vendor/assets/javascripts/foundation/foundation.alert.js +3 -3
  7. data/vendor/assets/javascripts/foundation/foundation.clearing.js +50 -20
  8. data/vendor/assets/javascripts/foundation/foundation.dropdown.js +26 -11
  9. data/vendor/assets/javascripts/foundation/foundation.equalizer.js +43 -16
  10. data/vendor/assets/javascripts/foundation/foundation.interchange.js +19 -14
  11. data/vendor/assets/javascripts/foundation/foundation.joyride.js +1 -1
  12. data/vendor/assets/javascripts/foundation/foundation.js +51 -29
  13. data/vendor/assets/javascripts/foundation/foundation.magellan.js +40 -28
  14. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +3 -3
  15. data/vendor/assets/javascripts/foundation/foundation.orbit.js +1 -1
  16. data/vendor/assets/javascripts/foundation/foundation.reveal.js +70 -43
  17. data/vendor/assets/javascripts/foundation/foundation.slider.js +23 -5
  18. data/vendor/assets/javascripts/foundation/foundation.tab.js +30 -18
  19. data/vendor/assets/javascripts/foundation/foundation.tooltip.js +47 -15
  20. data/vendor/assets/javascripts/foundation/foundation.topbar.js +31 -25
  21. data/vendor/assets/stylesheets/foundation.scss +37 -38
  22. data/vendor/assets/stylesheets/foundation/_functions.scss +52 -42
  23. data/vendor/assets/stylesheets/foundation/_settings.scss +53 -34
  24. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +7 -7
  25. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +11 -11
  26. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +13 -13
  27. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +17 -18
  28. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +29 -22
  29. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +13 -17
  30. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +51 -47
  31. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +10 -11
  32. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +42 -36
  33. data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +7 -7
  34. data/vendor/assets/stylesheets/foundation/components/_forms.scss +82 -50
  35. data/vendor/assets/stylesheets/foundation/components/_global.scss +86 -64
  36. data/vendor/assets/stylesheets/foundation/components/_grid.scss +24 -21
  37. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +335 -234
  38. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +8 -8
  39. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +40 -42
  40. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +2 -3
  41. data/vendor/assets/stylesheets/foundation/components/_labels.scss +6 -6
  42. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +2 -2
  43. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +178 -175
  44. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +82 -62
  45. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +15 -15
  46. data/vendor/assets/stylesheets/foundation/components/_panels.scss +21 -15
  47. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +16 -16
  48. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +4 -4
  49. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +23 -16
  50. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +27 -27
  51. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +15 -11
  52. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +16 -16
  53. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +14 -11
  54. data/vendor/assets/stylesheets/foundation/components/_switches.scss +22 -19
  55. data/vendor/assets/stylesheets/foundation/components/_tables.scss +8 -8
  56. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +49 -32
  57. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +8 -8
  58. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +25 -25
  59. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +163 -122
  60. data/vendor/assets/stylesheets/foundation/components/_type.scss +19 -19
  61. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +23 -5
  62. data/vendor/assets/stylesheets/normalize.scss +8 -11
  63. metadata +28 -20
  64. checksums.yaml +0 -7
  65. 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 "global";
6
- @import "grid";
7
- @import "buttons";
8
- @import "forms";
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: $oil !default;
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: 0.75rem !default;
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: $oil !default;
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: 0.4 !default;
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: $medium-up !default;
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 { margin-bottom: $topbar-margin-bottom; }
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
- overflow: hidden;
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 { max-width: none; }
170
+ .row {
171
+ max-width: none;
172
+ }
168
173
 
169
174
  form,
170
- input { margin-bottom: 0; }
175
+ input,
176
+ select {
177
+ margin-bottom: 0;
178
+ }
171
179
 
172
- input {
173
- height: $topbar-input-height;
174
- padding-top: .35rem;
175
- padding-bottom: .35rem;
176
- font-size: $topbar-button-font-size;
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
- text-transform: $topbar-menu-link-transform;
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 { background: $topbar-bg; }
272
+ .title-area {
273
+ background: $topbar-bg;
274
+ }
277
275
 
278
276
  .toggle-topbar {
279
- a { color: $topbar-menu-link-color-toggled;
280
- span::after {
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
- & > a {
319
- display: block;
320
- width: 100%;
333
+
334
+ > a {
321
335
  color: $topbar-link-color;
322
- padding: 12px 0 12px 0;
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 { padding: $topbar-link-padding; }
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
- & > a {
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 { position: static;
394
- & > .dropdown {
417
+ &.moved {
418
+ position: static;
419
+
420
+ > .dropdown {
395
421
  @include topbar-show-dropdown();
396
422
  width: 100%;
397
423
  }
398
- & > a:after {
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
- @include topbar-hide-dropdown();
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, &.parent-link {
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
- &.has-form { padding: 8px $topbar-link-padding; }
438
- .button, button { top: auto; }
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 { background: $topbar-bg; }
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($topbar-arrows){
544
- & > a {
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
- & > .dropdown {
595
+ > .dropdown {
556
596
  @include topbar-hide-dropdown();
557
597
  }
558
598
  }
559
599
 
560
600
  &.hover, &.not-click:hover {
561
- & > .dropdown {
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
- & > a {
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: 1rem;
576
- margin-top: -1px;
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
- background: $topbar-dropdown-link-bg;
637
+ white-space: nowrap;
598
638
  }
599
639
 
600
640
  &:not(.has-form):not(.active) {
601
- & > a:not(.button) {
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
- & > ul > .divider,
629
- & > ul > [role="separator"] {
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
- & > .dropdown {
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
  }