foundation-rails 5.5.1.0 → 5.5.1.1

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 (44) hide show
  1. data/bower.json +2 -2
  2. data/lib/foundation/rails/version.rb +1 -1
  3. data/update-gem.sh +12 -7
  4. data/vendor/assets/javascripts/foundation.js +2 -2
  5. data/vendor/assets/javascripts/foundation/foundation.abide.js +62 -40
  6. data/vendor/assets/javascripts/foundation/foundation.accordion.js +7 -7
  7. data/vendor/assets/javascripts/foundation/foundation.alert.js +3 -3
  8. data/vendor/assets/javascripts/foundation/foundation.clearing.js +46 -48
  9. data/vendor/assets/javascripts/foundation/foundation.dropdown.js +71 -62
  10. data/vendor/assets/javascripts/foundation/foundation.equalizer.js +18 -14
  11. data/vendor/assets/javascripts/foundation/foundation.interchange.js +31 -25
  12. data/vendor/assets/javascripts/foundation/foundation.joyride.js +81 -73
  13. data/vendor/assets/javascripts/foundation/foundation.js +54 -41
  14. data/vendor/assets/javascripts/foundation/foundation.magellan.js +44 -39
  15. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +19 -19
  16. data/vendor/assets/javascripts/foundation/foundation.orbit.js +133 -129
  17. data/vendor/assets/javascripts/foundation/foundation.reveal.js +73 -51
  18. data/vendor/assets/javascripts/foundation/foundation.slider.js +63 -67
  19. data/vendor/assets/javascripts/foundation/foundation.tab.js +39 -19
  20. data/vendor/assets/javascripts/foundation/foundation.tooltip.js +30 -23
  21. data/vendor/assets/javascripts/foundation/foundation.topbar.js +66 -59
  22. data/vendor/assets/stylesheets/foundation/_functions.scss +1 -1
  23. data/vendor/assets/stylesheets/foundation/_settings.scss +99 -77
  24. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +2 -2
  25. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +1 -0
  26. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +1 -1
  27. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +7 -4
  28. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +2 -1
  29. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +11 -2
  30. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +1 -0
  31. data/vendor/assets/stylesheets/foundation/components/_forms.scss +13 -6
  32. data/vendor/assets/stylesheets/foundation/components/_global.scss +3 -3
  33. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +32 -2
  34. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +6 -4
  35. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +15 -29
  36. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +12 -0
  37. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +1 -2
  38. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +3 -1
  39. data/vendor/assets/stylesheets/foundation/components/_toolbar.scss +3 -1
  40. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +10 -3
  41. data/vendor/assets/stylesheets/foundation/components/_type.scss +1 -62
  42. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +78 -12
  43. metadata +2 -3
  44. data/vendor/assets/_settings.scss +0 -1445
@@ -37,7 +37,7 @@ $alert-close-position: rem-calc(4) !default;
37
37
  $alert-close-font-size: rem-calc(22) !default;
38
38
  $alert-close-opacity: 0.3 !default;
39
39
  $alert-close-opacity-hover: 0.5 !default;
40
- $alert-close-padding: 9px 6px 4px !default;
40
+ $alert-close-padding: 0 6px 4px !default;
41
41
  $alert-close-background: inherit !default;
42
42
 
43
43
  // We use this to control border radius
@@ -85,7 +85,7 @@ $alert-transition-ease: ease-out !default;
85
85
  @mixin alert-close {
86
86
  font-size: $alert-close-font-size;
87
87
  padding: $alert-close-padding;
88
- line-height: 0;
88
+ line-height: .9;
89
89
  position: absolute;
90
90
  top: $alert-close-top;
91
91
  margin-top: -($alert-close-font-size / 2);
@@ -30,6 +30,7 @@ $block-grid-media-queries: true !default;
30
30
  //
31
31
  // $per-row - # of items to display per row. Default: false.
32
32
  // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
33
+ // $include-spacing - Adds padding to our list item. Default: true.
33
34
  // $base-style - Apply a base style to block grid. Default: true.
34
35
  @mixin block-grid(
35
36
  $per-row:false,
@@ -95,7 +95,7 @@ $crumb-slash: "/" !default;
95
95
  a:focus {
96
96
  text-decoration: none;
97
97
  color: $crumb-font-color-unavailable;
98
- cursor: $cursor-default-value;
98
+ cursor: $cursor-disabled-value;
99
99
  }
100
100
  }
101
101
 
@@ -70,6 +70,9 @@ $button-group-border-width: 1px !default;
70
70
  margin:0;
71
71
  display: block;
72
72
  }
73
+ > button {
74
+ width: 100%;
75
+ }
73
76
 
74
77
  &:first-child {
75
78
  button, .button {
@@ -147,6 +150,10 @@ $button-group-border-width: 1px !default;
147
150
  @if $include-html-button-classes {
148
151
  .button-group { @include button-group-container;
149
152
 
153
+ @for $i from 2 through 8 {
154
+ &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
155
+ }
156
+
150
157
  & > li { @include button-group-style(); }
151
158
 
152
159
  &.stack {
@@ -183,10 +190,6 @@ $button-group-border-width: 1px !default;
183
190
  @include button-group-style($radius:$button-med, $orientation:vertical);
184
191
  }
185
192
  }
186
-
187
- @for $i from 2 through 8 {
188
- &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
189
- }
190
193
  }
191
194
 
192
195
  .button-bar {
@@ -80,6 +80,7 @@ $button-disabled-cursor: $cursor-default-value !default;
80
80
  text-decoration: none;
81
81
  text-align: $button-font-align;
82
82
  -webkit-appearance: none;
83
+ -moz-appearance: none;
83
84
  border-radius:0;
84
85
  }
85
86
  @if $display { display: $display; }
@@ -134,7 +135,7 @@ $button-disabled-cursor: $cursor-default-value !default;
134
135
  // We use this mixin to add button color styles
135
136
  //
136
137
  // $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
137
- // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
138
+ // $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
138
139
  // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
139
140
  // $bg-hover - Button Hover Background Color. Default: $button-bg-hover
140
141
  // $border-color - Button Border Color. Default: $button-border-color
@@ -93,7 +93,16 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
93
93
  position: absolute;
94
94
  #{$default-float}: 50%;
95
95
  top: 50%;
96
- margin-#{$default-float}: -50%;
96
+ @if $default-float == left {
97
+ transform: translateY(-50%) translateX(-50%);
98
+ -webkit-transform: translateY(-50%) translateX(-50%);
99
+ -ms-transform: translateY(-50%) translateX(-50%);
100
+ }
101
+ @else {
102
+ transform: translateY(-50%) translateX(50%);
103
+ -webkit-transform: translateY(-50%) translateX(50%);
104
+ -ms-transform: translateY(-50%) translateX(50%);
105
+ };
97
106
  max-height: 100%;
98
107
  max-width: 100%;
99
108
  }
@@ -171,7 +180,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
171
180
  border-#{$default-float}-color: $clearing-arrow-color;
172
181
  }
173
182
  }
174
-
183
+
175
184
  .clearing-main-prev.disabled,
176
185
  .clearing-main-next.disabled { opacity: 0.3; }
177
186
 
@@ -13,6 +13,7 @@ $include-html-button-classes: $include-html-classes !default;
13
13
  $dropdown-button-pip-color: $white !default;
14
14
  $dropdown-button-pip-color-alt: $oil !default;
15
15
 
16
+ // We use these to set the size of the pip in dropdown buttons
16
17
  $button-pip-tny: rem-calc(6) !default;
17
18
  $button-pip-sml: rem-calc(7) !default;
18
19
  $button-pip-med: rem-calc(9) !default;
@@ -34,7 +34,7 @@ $input-border-radius: $global-radius !default;
34
34
  $input-disabled-bg: $gainsboro !default;
35
35
  $input-disabled-cursor: $cursor-default-value !default;
36
36
  $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
37
- $input-include-glowing-effect: true !default;
37
+ $input-include-glowing-effect: false !default;
38
38
 
39
39
  // We use these to style the fieldset border and spacing.
40
40
  $fieldset-border-style: solid !default;
@@ -53,7 +53,7 @@ $input-prefix-bg: scale-color($white, $lightness: -5%) !default;
53
53
  $input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
54
54
  $input-prefix-border-size: 1px !default;
55
55
  $input-prefix-border-type: solid !default;
56
- $input-prefix-overflow: hidden !default;
56
+ $input-prefix-overflow: visible !default;
57
57
  $input-prefix-font-color: $oil !default;
58
58
  $input-prefix-font-color-alt: $white !default;
59
59
 
@@ -427,25 +427,29 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
427
427
  .prefix-radius.row.collapse {
428
428
  input,
429
429
  textarea,
430
- select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
430
+ select,
431
+ button { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
431
432
  .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
432
433
  }
433
434
  .postfix-radius.row.collapse {
434
435
  input,
435
436
  textarea,
436
- select { @include radius(0); @include side-radius($default-float, $button-radius); }
437
+ select,
438
+ button { @include radius(0); @include side-radius($default-float, $button-radius); }
437
439
  .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
438
440
  }
439
441
  .prefix-round.row.collapse {
440
442
  input,
441
443
  textarea,
442
- select { @include radius(0); @include side-radius($opposite-direction, $button-round); }
444
+ select,
445
+ button { @include radius(0); @include side-radius($opposite-direction, $button-round); }
443
446
  .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
444
447
  }
445
448
  .postfix-round.row.collapse {
446
449
  input,
447
450
  textarea,
448
- select { @include radius(0); @include side-radius($default-float, $button-round); }
451
+ select,
452
+ button { @include radius(0); @include side-radius($default-float, $button-round); }
449
453
  .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
450
454
  }
451
455
  }
@@ -470,6 +474,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
470
474
  select {
471
475
  @include form-select;
472
476
  height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
477
+ &[multiple] {
478
+ height: auto;
479
+ }
473
480
  }
474
481
 
475
482
  /* Adjust margin for form elements below */
@@ -333,6 +333,7 @@ $large: $large-up;
333
333
  $cursor-auto-value: auto !default;
334
334
  $cursor-crosshair-value: crosshair !default;
335
335
  $cursor-default-value: default !default;
336
+ $cursor-disabled-value: not-allowed !default;
336
337
  $cursor-pointer-value: pointer !default;
337
338
  $cursor-help-value: help !default;
338
339
  $cursor-text-value: text !default;
@@ -345,7 +346,7 @@ $cursor-text-value: text !default;
345
346
  // Forward slash placed around everything to convince PhantomJS to read the value.
346
347
 
347
348
  meta.foundation-version {
348
- font-family: "/5.5.0/";
349
+ font-family: "/5.5.1/";
349
350
  }
350
351
 
351
352
  meta.foundation-mq-small {
@@ -448,8 +449,7 @@ $cursor-text-value: text !default;
448
449
 
449
450
  // Hide visually and from screen readers
450
451
  .hide {
451
- display: none !important;
452
- visibility: hidden;
452
+ display: none;
453
453
  }
454
454
 
455
455
  // Hide visually and from screen readers, but maintain layout
@@ -28,7 +28,8 @@ $icon-bar-item-padding: 1.25rem !default;
28
28
 
29
29
  // We use this to set default opacity and cursor for disabled icons.
30
30
  $icon-bar-disabled-opacity: 0.7 !default;
31
- $icon-bar-disabled-cursor: $cursor-default-value !default;
31
+ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
32
+
32
33
 
33
34
  //
34
35
  // @mixins
@@ -200,6 +201,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
200
201
  .item.disabled {
201
202
  opacity: $icon-bar-disabled-opacity;
202
203
  cursor: $icon-bar-disabled-cursor;
204
+ pointer-events: none;
203
205
  >* {
204
206
  opacity: $icon-bar-disabled-opacity;
205
207
  cursor: $icon-bar-disabled-cursor;
@@ -233,7 +235,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
233
235
  $image-width: $icon-bar-image-width,
234
236
  $image-height: $icon-bar-image-height,
235
237
  $base-style:true,
236
- $disabled:false) {
238
+ $disabled:true) {
237
239
  @include icon-bar-base();
238
240
  @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
239
241
  @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
@@ -325,5 +327,33 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
325
327
  }
326
328
  }
327
329
  }
330
+ &.seven-up {
331
+ .item { width: 14.28571%; }
332
+ &.vertical .item, &.small-vertical .item { width: auto; }
333
+ &.medium-vertical .item {
334
+ @media #{$medium-up} {
335
+ width: auto;
336
+ }
337
+ }
338
+ &.large-vertical .item {
339
+ @media #{$large-up} {
340
+ width: auto;
341
+ }
342
+ }
343
+ }
344
+ &.eight-up {
345
+ .item { width: 12.5%; }
346
+ &.vertical .item, &.small-vertical .item { width: auto; }
347
+ &.medium-vertical .item {
348
+ @media #{$medium-up} {
349
+ width: auto;
350
+ }
351
+ }
352
+ &.large-vertical .item {
353
+ @media #{$large-up} {
354
+ width: auto;
355
+ }
356
+ }
357
+ }
328
358
  }
329
359
  }
@@ -45,16 +45,14 @@ $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12
45
45
  $range-slider-handle-cursor: pointer !default;
46
46
 
47
47
  $range-slider-disabled-opacity: 0.7 !default;
48
+ $range-slider-disabled-cursor: $cursor-disabled-value !default;
48
49
 
49
50
  //
50
51
  // @mixins
51
52
  //
52
53
 
53
54
  @mixin range-slider-bar-base($vertical: false) {
54
- display: block;
55
55
  position: relative;
56
- width: $range-slider-bar-width;
57
- height: $range-slider-bar-height;
58
56
  border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
59
57
  margin: rem-calc(20 0);
60
58
  -ms-touch-action: none;
@@ -63,6 +61,10 @@ $range-slider-disabled-opacity: 0.7 !default;
63
61
  display: inline-block;
64
62
  width: $range-slider-vertical-bar-width;
65
63
  height: $range-slider-vertical-bar-height;
64
+ } @else {
65
+ display: block;
66
+ width: $range-slider-bar-width;
67
+ height: $range-slider-bar-height;
66
68
  }
67
69
  }
68
70
  @mixin range-slider-bar-style(
@@ -74,7 +76,7 @@ $range-slider-disabled-opacity: 0.7 !default;
74
76
  @if $radius == true { @include radius($range-slider-radius); }
75
77
  @if $round == true { @include radius($range-slider-round); }
76
78
  @if $disabled == true {
77
- cursor: $cursor-default-value;
79
+ cursor: $range-slider-disabled-cursor;
78
80
  opacity: $range-slider-disabled-opacity;
79
81
  }
80
82
  }
@@ -43,21 +43,24 @@ $reveal-border-color: $steel !default;
43
43
  $reveal-modal-class: "reveal-modal" !default;
44
44
  $close-reveal-modal-class: "close-reveal-modal" !default;
45
45
 
46
+ // Set base z-index
47
+ $z-index-base: 1005;
48
+
46
49
  //
47
50
  // @mixins
48
51
  //
49
52
 
50
53
  // We use this to create the reveal background overlay styles
51
54
  @mixin reveal-bg( $include-z-index-value: true ) {
52
- //position: fixed;
53
- position: absolute; // allows modal background to extend beyond window position
55
+ position: fixed;
56
+ // position: absolute; // allows modal background to extend beyond window position
54
57
  top: 0;
55
58
  bottom: 0;
56
59
  left: 0;
57
60
  right: 0;
58
61
  background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
59
62
  background: $reveal-overlay-bg;
60
- z-index: if( $include-z-index-value, 1004, auto );
63
+ z-index: if( $include-z-index-value, $z-index-base - 1, auto );
61
64
  display: none;
62
65
  #{$default-float}: 0;
63
66
  }
@@ -72,8 +75,8 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
72
75
  visibility: hidden;
73
76
  display: none;
74
77
  position: absolute;
75
- z-index: 1005;
76
- width: 100vw;
78
+ z-index: $z-index-base;
79
+ width: 100%;
77
80
  top:0;
78
81
  border-radius: $border-radius;
79
82
  #{$default-float}: 0;
@@ -169,13 +172,12 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
169
172
  @include reveal-modal-base;
170
173
  @include reveal-modal-style(
171
174
  $bg:$reveal-modal-bg,
172
- $padding:$reveal-modal-padding,
175
+ $padding:$reveal-modal-padding * 1.5,
173
176
  $border:true,
174
177
  $box-shadow:true,
175
178
  $radius:false,
176
179
  $top-offset:$reveal-position-top
177
180
  );
178
- @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
179
181
 
180
182
  &.radius { @include reveal-modal-style($radius:true); }
181
183
  &.round { @include reveal-modal-style($radius:$reveal-round); }
@@ -186,7 +188,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
186
188
  &.large { @include reveal-modal-base(false, 70%); }
187
189
  &.xlarge { @include reveal-modal-base(false, 95%); }
188
190
  &.full {
189
- @include reveal-modal-base(false, 100vw);
191
+ @include reveal-modal-base(false, 100%);
190
192
  top:0;
191
193
  left:0;
192
194
  height:100%;
@@ -195,29 +197,13 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
195
197
  max-width: none !important;
196
198
  margin-left: 0 !important;
197
199
  }
198
-
199
- .#{$close-reveal-modal-class} { @include reveal-close; }
200
- }
201
-
202
- dialog {
203
- @extend .#{$reveal-modal-class};
204
- display: none;
205
-
206
- &::backdrop, & + .backdrop {
207
- @include reveal-bg(false);
200
+
201
+ // Modals pushed to back
202
+ &.toback {
203
+ z-index: $z-index-base - 2;
208
204
  }
209
205
 
210
- &[open]{
211
- display: block;
212
- }
213
- }
214
-
215
- // Reveal Print Styles: It should be invisible, adds no value being printed.
216
- @media print {
217
- dialog, .#{$reveal-modal-class} {
218
- display: none;
219
- background: $white !important;
220
- }
206
+ .#{$close-reveal-modal-class} { @include reveal-close; }
221
207
  }
222
208
  }
223
209
  }
@@ -185,6 +185,18 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
185
185
 
186
186
  &.radius span { @include side-radius($opposite-direction, $global-radius); }
187
187
  &.round span { @include side-radius($opposite-direction, 1000px); }
188
+ &.no-pip{
189
+ span:before{ border-style:none; }
190
+ span:after{ border-style:none; }
191
+ span>i{
192
+ top: 50%;
193
+ display: block;
194
+ position: absolute;
195
+ left: 50%;
196
+ margin-left: -0.28889em;
197
+ margin-top: -0.48889em;
198
+ }
199
+ }
188
200
  }
189
201
 
190
202
  }
@@ -61,7 +61,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
61
61
  display: block;
62
62
  width: auto;
63
63
  overflow: hidden;
64
- margin: $sub-nav-list-margin;
64
+ margin-bottom: $sub-nav-list-margin;
65
65
  padding-top: $sub-nav-list-padding-top;
66
66
 
67
67
  dt {
@@ -72,7 +72,6 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
72
72
  dd,
73
73
  li {
74
74
  float: $default-float;
75
- display: inline;
76
75
  margin-#{$default-float}: rem-calc(16);
77
76
  margin-bottom: 0;
78
77
  font-family: $sub-nav-font-family;
@@ -37,7 +37,6 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
37
37
  list-style: none;
38
38
  float: $default-float;
39
39
  > a {
40
- outline: none;
41
40
  display: block;
42
41
  background: {
43
42
  color: $tabs-navigation-bg-color;
@@ -51,6 +50,9 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
51
50
  color: $tabs-navigation-hover-bg-color;
52
51
  }
53
52
  }
53
+ &:focus{
54
+ outline: none;
55
+ }
54
56
  }
55
57
  &.active a {
56
58
  background: {