foundation-rails 6.2.3.0 → 6.2.4.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 (50) hide show
  1. checksums.yaml +4 -4
  2. data/bower.json +1 -1
  3. data/lib/foundation/rails/version.rb +1 -1
  4. data/lib/generators/foundation/templates/_settings.scss +7 -0
  5. data/vendor/assets/js/foundation.accordion.js.es6 +13 -24
  6. data/vendor/assets/js/foundation.accordionMenu.js.es6 +9 -10
  7. data/vendor/assets/js/foundation.core.js.es6 +1 -1
  8. data/vendor/assets/js/foundation.drilldown.js.es6 +21 -9
  9. data/vendor/assets/js/foundation.dropdown.js.es6 +11 -8
  10. data/vendor/assets/js/foundation.dropdownMenu.js.es6 +46 -21
  11. data/vendor/assets/js/foundation.equalizer.js.es6 +3 -1
  12. data/vendor/assets/js/foundation.interchange.js.es6 +1 -1
  13. data/vendor/assets/js/foundation.magellan.js.es6 +3 -1
  14. data/vendor/assets/js/foundation.offcanvas.js.es6 +41 -27
  15. data/vendor/assets/js/foundation.orbit.js.es6 +23 -15
  16. data/vendor/assets/js/foundation.reveal.js.es6 +10 -3
  17. data/vendor/assets/js/foundation.slider.js.es6 +1 -1
  18. data/vendor/assets/js/foundation.sticky.js.es6 +18 -7
  19. data/vendor/assets/js/foundation.tooltip.js.es6 +2 -1
  20. data/vendor/assets/js/foundation.util.box.js.es6 +2 -2
  21. data/vendor/assets/js/foundation.util.mediaQuery.js.es6 +1 -1
  22. data/vendor/assets/js/foundation.util.nest.js.es6 +1 -1
  23. data/vendor/assets/js/foundation.util.timerAndImageLoader.js.es6 +1 -1
  24. data/vendor/assets/js/foundation.util.triggers.js.es6 +1 -1
  25. data/vendor/assets/scss/components/_button.scss +24 -6
  26. data/vendor/assets/scss/components/_drilldown.scss +1 -1
  27. data/vendor/assets/scss/components/_off-canvas.scss +1 -0
  28. data/vendor/assets/scss/components/_orbit.scss +1 -0
  29. data/vendor/assets/scss/components/_pagination.scss +13 -2
  30. data/vendor/assets/scss/components/_reveal.scss +3 -3
  31. data/vendor/assets/scss/components/_switch.scss +4 -0
  32. data/vendor/assets/scss/components/_table.scss +39 -4
  33. data/vendor/assets/scss/components/_title-bar.scss +0 -4
  34. data/vendor/assets/scss/components/_top-bar.scss +4 -2
  35. data/vendor/assets/scss/forms/_input-group.scss +4 -3
  36. data/vendor/assets/scss/forms/_meter.scss +3 -1
  37. data/vendor/assets/scss/forms/_progress.scss +9 -0
  38. data/vendor/assets/scss/forms/_text.scss +6 -2
  39. data/vendor/assets/scss/foundation.scss +1 -1
  40. data/vendor/assets/scss/grid/_classes.scss +14 -10
  41. data/vendor/assets/scss/grid/_flex-grid.scss +19 -9
  42. data/vendor/assets/scss/grid/_layout.scss +27 -2
  43. data/vendor/assets/scss/grid/_position.scss +4 -1
  44. data/vendor/assets/scss/grid/_row.scss +1 -2
  45. data/vendor/assets/scss/settings/_settings.scss +7 -0
  46. data/vendor/assets/scss/util/_breakpoint.scss +12 -15
  47. data/vendor/assets/scss/util/_color.scss +13 -0
  48. data/vendor/assets/scss/util/_mixins.scss +6 -2
  49. data/vendor/assets/scss/util/_unit.scss +5 -0
  50. metadata +2 -2
@@ -39,7 +39,7 @@ $drilldown-background: $white !default;
39
39
  top: 0;
40
40
  #{$global-left}: 100%;
41
41
  z-index: -1;
42
- height: 100%;
42
+ // height: 100%;
43
43
  width: 100%;
44
44
  background: $drilldown-background;
45
45
  transition: $drilldown-transition;
@@ -60,6 +60,7 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
60
60
  @include clearfix;
61
61
  position: relative;
62
62
  width: 100%;
63
+ min-height: 100%;
63
64
  transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
64
65
  }
65
66
 
@@ -80,6 +80,7 @@ $orbit-control-zindex: 10 !default;
80
80
  margin: 0;
81
81
  }
82
82
 
83
+ /// Adds styles for a slide containing an image. These styles are used on the `.orbit-image` class.
83
84
  @mixin orbit-image {
84
85
  margin: 0;
85
86
  width: 100%;
@@ -10,7 +10,7 @@
10
10
  /// @type Number
11
11
  $pagination-font-size: rem-calc(14) !default;
12
12
 
13
- /// Default bottom margin of the media object.
13
+ /// Default bottom margin of the pagination object.
14
14
  /// @type Number
15
15
  $pagination-margin-bottom: $global-margin !default;
16
16
 
@@ -50,10 +50,15 @@ $pagination-item-color-disabled: $medium-gray !default;
50
50
  /// @type Color
51
51
  $pagination-ellipsis-color: $black !default;
52
52
 
53
- /// If `false`, don't display page number links on mobile, only next/previous links.
53
+ /// If `false`, don't display page number links on mobile, only next/previous links
54
+ /// and optionally current page number.
54
55
  /// @type Boolean
55
56
  $pagination-mobile-items: false !default;
56
57
 
58
+ /// If `false`, don't display current page number on mobile.
59
+ /// @type Boolean
60
+ $pagination-mobile-current-item: false !default;
61
+
57
62
  /// If `true`, arrows are added to the next and previous links of pagination.
58
63
  /// @type Boolean
59
64
  $pagination-arrows: true !default;
@@ -81,6 +86,12 @@ $pagination-arrows: true !default;
81
86
  display: inline-block;
82
87
  }
83
88
 
89
+ @if $pagination-mobile-current-item {
90
+ &.current {
91
+ display: inline-block;
92
+ }
93
+ }
94
+
84
95
  @include breakpoint(medium) {
85
96
  display: inline-block;
86
97
  }
@@ -40,7 +40,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
40
40
 
41
41
  /// Adds styles for a modal overlay.
42
42
  /// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
43
- @mixin reveal-overlay {
43
+ @mixin reveal-overlay($background: $reveal-overlay-background) {
44
44
  display: none;
45
45
  position: fixed;
46
46
  top: 0;
@@ -48,7 +48,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
48
48
  left: 0;
49
49
  right: 0;
50
50
  z-index: $reveal-zindex;
51
- background-color: $reveal-overlay-background;
51
+ background-color: $background;
52
52
  overflow-y: scroll;
53
53
  }
54
54
 
@@ -116,7 +116,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
116
116
  // html gets this class only in iOS
117
117
  html.is-reveal-open,
118
118
  html.is-reveal-open body {
119
- height: 100%;
119
+ min-height: 100%;
120
120
  overflow: hidden;
121
121
  user-select: none;
122
122
  }
@@ -75,6 +75,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
75
75
  @mixin switch-input {
76
76
  opacity: 0;
77
77
  position: absolute;
78
+ margin-bottom: 0;
78
79
  }
79
80
 
80
81
  /// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
@@ -168,6 +169,8 @@ $switch-paddle-transition: all 0.25s ease-out !default;
168
169
  $paddle-height: $height - ($paddle-offset * 2);
169
170
  $paddle-left-active: $width - $paddle-width - $paddle-offset;
170
171
 
172
+ height: $height;
173
+
171
174
  .switch-paddle {
172
175
  width: $width;
173
176
  height: $height;
@@ -187,6 +190,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
187
190
  @mixin foundation-switch {
188
191
  // Container class
189
192
  .switch {
193
+ height: $switch-height;
190
194
  @include switch-container;
191
195
  }
192
196
 
@@ -48,14 +48,26 @@ $table-stripe: even !default;
48
48
  /// @type Color
49
49
  $table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
50
50
 
51
+ /// Default color of header rows on hover.
52
+ /// @type List
53
+ $table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
54
+
51
55
  /// Default color for footer background.
52
56
  /// @type Color
53
57
  $table-foot-background: smart-scale($table-background, $table-color-scale) !default;
54
58
 
59
+ /// Default color of footer rows on hover.
60
+ /// @type List
61
+ $table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
62
+
55
63
  /// Default font color for header.
56
64
  /// @type Color
57
65
  $table-head-font-color: $body-font-color !default;
58
66
 
67
+ /// Default font color for footer.
68
+ /// @type Color
69
+ $table-foot-font-color: $body-font-color !default;
70
+
59
71
  /// Default value for showing the header when using stacked tables.
60
72
  /// @type Boolean
61
73
  $show-header-for-stacked: false !default;
@@ -73,13 +85,22 @@ $show-header-for-stacked: false !default;
73
85
  font-weight: $global-weight-bold;
74
86
  padding: $table-padding;
75
87
  }
88
+
89
+ // Table head
90
+ thead {
91
+ background: $table-head-background;
92
+ color: $table-head-font-color;
93
+ }
94
+
95
+ // Table foot
96
+ tfoot {
97
+ background: $table-foot-background;
98
+ color: $table-foot-font-color;
99
+ }
76
100
 
77
101
  // Table head and foot
78
102
  thead,
79
103
  tfoot {
80
- background: $table-head-background;
81
- color: $table-head-font-color;
82
-
83
104
  // Rows within head and foot
84
105
  tr {
85
106
  background: transparent;
@@ -148,7 +169,21 @@ $show-header-for-stacked: false !default;
148
169
 
149
170
  /// Slightly darkens the table rows on hover.
150
171
  @mixin table-hover {
151
- tr {
172
+ thead tr {
173
+ //Darkens the table header rows on hover.
174
+ &:hover {
175
+ background-color: $table-head-row-hover;
176
+ }
177
+ }
178
+
179
+ tfoot tr {
180
+ //Darkens the table footer rows on hover.
181
+ &:hover {
182
+ background-color: $table-foot-row-hover;
183
+ }
184
+ }
185
+
186
+ tbody tr {
152
187
  //Darkens the non-striped table rows on hover.
153
188
  &:hover {
154
189
  background-color: $table-row-hover;
@@ -82,8 +82,4 @@ $titlebar-icon-spacing: 0.25rem !default;
82
82
  vertical-align: middle;
83
83
  display: inline-block;
84
84
  }
85
-
86
- .menu-icon.dark {
87
- @include hamburger;
88
- }
89
85
  }
@@ -101,9 +101,11 @@ $topbar-unstack-breakpoint: medium !default;
101
101
  flex-wrap: nowrap;
102
102
 
103
103
  // scss-lint:disable ZeroUnit
104
- .top-bar-left,
104
+ .top-bar-left {
105
+ flex: 1 1 auto;
106
+ }
105
107
  .top-bar-right {
106
- flex: 1 1 0px;
108
+ flex: 0 1 auto;
107
109
  }
108
110
  }
109
111
  @else {
@@ -91,7 +91,6 @@ $input-prefix-padding: 1rem !default;
91
91
  // scss-lint:disable ZeroUnit
92
92
  @if $global-flexbox {
93
93
  flex: 1 1 0px;
94
- width: auto;
95
94
  height: auto;
96
95
  }
97
96
  @else {
@@ -122,7 +121,9 @@ $input-prefix-padding: 1rem !default;
122
121
 
123
122
  // Specificity bump needed to prevent override by buttons
124
123
  // scss-lint:disable QualifyingSelector
125
- .input-group .input-group-button {
126
- display: table-cell;
124
+ @if not $global-flexbox {
125
+ .input-group .input-group-button {
126
+ display: table-cell;
127
+ }
127
128
  }
128
129
  }
@@ -47,13 +47,15 @@ $meter-fill-bad: $alert-color !default;
47
47
  background: $meter-background;
48
48
  border: 0;
49
49
 
50
- // Chrome/Safari
50
+ // Chrome/Safari/Edge
51
51
  &::-webkit-meter-bar {
52
52
  background: $meter-background;
53
53
 
54
54
  @if has-value($meter-radius) {
55
55
  border-radius: $meter-radius;
56
56
  }
57
+
58
+ border: 0;
57
59
  }
58
60
 
59
61
  &::-webkit-meter-inner-element {
@@ -81,5 +81,14 @@ $progress-radius: $global-radius !default;
81
81
  }
82
82
  }
83
83
  }
84
+
85
+ // For IE and Edge
86
+ &::-ms-fill{
87
+ @if hasvalue($progress-radius) {
88
+ border-radius: $progress-radius;
89
+ }
90
+
91
+ border: 0;
92
+ }
84
93
  }
85
94
  }
@@ -66,6 +66,10 @@ $input-number-spinners: true !default;
66
66
  /// @type Border
67
67
  $input-radius: $global-radius !default;
68
68
 
69
+ /// Border radius for buttons, defaulted to global-radius.
70
+ /// @type Number
71
+ $button-radius: $global-radius !default;
72
+
69
73
  @mixin form-element {
70
74
  $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
71
75
 
@@ -153,8 +157,8 @@ $input-radius: $global-radius !default;
153
157
  @if not $input-number-spinners {
154
158
  -moz-appearance: textfield;
155
159
 
156
- [type='number']::-webkit-inner-spin-button,
157
- [type='number']::-webkit-outer-spin-button {
160
+ &::-webkit-inner-spin-button,
161
+ &::-webkit-outer-spin-button {
158
162
  -webkit-appearance: none;
159
163
  margin: 0;
160
164
  }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Foundation for Sites by ZURB
3
- * Version 6.2.3
3
+ * Version 6.2.4
4
4
  * foundation.zurb.com
5
5
  * Licensed under MIT Open Source
6
6
  */
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  // Nesting
37
- & & {
37
+ & .#{$row} {
38
38
  @include grid-row-nest($grid-column-gutter);
39
39
 
40
40
  &.#{$collapse} {
@@ -69,14 +69,14 @@
69
69
  // The double .row class is needed to bump up the specificity
70
70
  .#{$column}.#{$row}.#{$row} {
71
71
  float: none;
72
+ }
72
73
 
73
- // To properly nest a column row, padding and margin is removed
74
- .#{$row} & {
75
- padding-left: 0;
76
- padding-right: 0;
77
- margin-left: 0;
78
- margin-right: 0;
79
- }
74
+ // To properly nest a column row, padding and margin is removed
75
+ .#{$row} .#{$column}.#{$row}.#{$row} {
76
+ padding-left: 0;
77
+ padding-right: 0;
78
+ margin-left: 0;
79
+ margin-right: 0;
80
80
  }
81
81
 
82
82
  @include -zf-each-breakpoint {
@@ -116,13 +116,17 @@
116
116
  .#{$-zf-size}-#{$collapse} {
117
117
  > .#{$column} { @include grid-col-collapse; }
118
118
 
119
- .#{$row},
120
- .#{$expanded}.#{$row} &.#{$row} {
119
+ .#{$row} {
121
120
  margin-left: 0;
122
121
  margin-right: 0;
123
122
  }
124
123
  }
125
124
 
125
+ .#{$expanded}.#{$row} .#{$-zf-size}-#{$collapse}.#{$row} {
126
+ margin-left: 0;
127
+ margin-right: 0;
128
+ }
129
+
126
130
  .#{$-zf-size}-#{$uncollapse} {
127
131
  $gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size);
128
132
 
@@ -155,7 +155,7 @@
155
155
  @include flex-grid-row;
156
156
 
157
157
  // Nesting behavior
158
- & & {
158
+ & .row {
159
159
  @include flex-grid-row(nest, $base: false);
160
160
  }
161
161
 
@@ -165,7 +165,17 @@
165
165
  }
166
166
 
167
167
  &.collapse {
168
- > .column { @include grid-col-collapse; }
168
+ > .column {
169
+ @include grid-col-collapse;
170
+ }
171
+ }
172
+
173
+ // Undo negative margins
174
+ // From collapsed child
175
+ &.is-collapse-child,
176
+ &.collapse > .column > .row {
177
+ margin-left: 0;
178
+ margin-right: 0;
169
179
  }
170
180
  }
171
181
 
@@ -179,14 +189,14 @@
179
189
  .column.row.row {
180
190
  float: none;
181
191
  display: block;
192
+ }
182
193
 
183
- // To properly nest a column row, padding and margin is removed
184
- .row & {
185
- padding-left: 0;
186
- padding-right: 0;
187
- margin-left: 0;
188
- margin-right: 0;
189
- }
194
+ // To properly nest a column row, padding and margin is removed
195
+ .row .column.row.row {
196
+ padding-left: 0;
197
+ padding-right: 0;
198
+ margin-left: 0;
199
+ margin-right: 0;
190
200
  }
191
201
 
192
202
  @include -zf-each-breakpoint {
@@ -10,14 +10,39 @@
10
10
  ///
11
11
  /// @param {Number} $n - Number of elements to display per row.
12
12
  /// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
13
+ /// @param {Number|List} $gutter
14
+ /// The gutter to apply to child elements. Accepts multiple values:
15
+ /// - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
16
+ /// - A fixed numeric value will apply this gutter to all breakpoints.
13
17
  @mixin grid-layout(
14
18
  $n,
15
- $selector: '.column'
19
+ $selector: '.column',
20
+ $gutter: null
16
21
  ) {
17
22
  & > #{$selector} {
18
23
  width: percentage(1/$n);
19
24
  float: $global-left;
20
25
 
26
+ // If a $gutter value is passed
27
+ @if($gutter) {
28
+ // Gutters
29
+ @if type-of($gutter) == 'map' {
30
+ @each $breakpoint, $value in $gutter {
31
+ $padding: rem-calc($value) / 2;
32
+
33
+ @include breakpoint($breakpoint) {
34
+ padding-left: $padding;
35
+ padding-right: $padding;
36
+ }
37
+ }
38
+ }
39
+ @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
40
+ $padding: rem-calc($gutter) / 2;
41
+ padding-left: $padding;
42
+ padding-right: $padding;
43
+ }
44
+ }
45
+
21
46
  &:nth-of-type(1n) {
22
47
  clear: none;
23
48
  }
@@ -27,7 +52,7 @@
27
52
  }
28
53
 
29
54
  &:last-child {
30
- float: left;
55
+ float: $global-left;
31
56
  }
32
57
  }
33
58
  }