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.
- checksums.yaml +4 -4
- data/bower.json +1 -1
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/templates/_settings.scss +7 -0
- data/vendor/assets/js/foundation.accordion.js.es6 +13 -24
- data/vendor/assets/js/foundation.accordionMenu.js.es6 +9 -10
- data/vendor/assets/js/foundation.core.js.es6 +1 -1
- data/vendor/assets/js/foundation.drilldown.js.es6 +21 -9
- data/vendor/assets/js/foundation.dropdown.js.es6 +11 -8
- data/vendor/assets/js/foundation.dropdownMenu.js.es6 +46 -21
- data/vendor/assets/js/foundation.equalizer.js.es6 +3 -1
- data/vendor/assets/js/foundation.interchange.js.es6 +1 -1
- data/vendor/assets/js/foundation.magellan.js.es6 +3 -1
- data/vendor/assets/js/foundation.offcanvas.js.es6 +41 -27
- data/vendor/assets/js/foundation.orbit.js.es6 +23 -15
- data/vendor/assets/js/foundation.reveal.js.es6 +10 -3
- data/vendor/assets/js/foundation.slider.js.es6 +1 -1
- data/vendor/assets/js/foundation.sticky.js.es6 +18 -7
- data/vendor/assets/js/foundation.tooltip.js.es6 +2 -1
- data/vendor/assets/js/foundation.util.box.js.es6 +2 -2
- data/vendor/assets/js/foundation.util.mediaQuery.js.es6 +1 -1
- data/vendor/assets/js/foundation.util.nest.js.es6 +1 -1
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js.es6 +1 -1
- data/vendor/assets/js/foundation.util.triggers.js.es6 +1 -1
- data/vendor/assets/scss/components/_button.scss +24 -6
- data/vendor/assets/scss/components/_drilldown.scss +1 -1
- data/vendor/assets/scss/components/_off-canvas.scss +1 -0
- data/vendor/assets/scss/components/_orbit.scss +1 -0
- data/vendor/assets/scss/components/_pagination.scss +13 -2
- data/vendor/assets/scss/components/_reveal.scss +3 -3
- data/vendor/assets/scss/components/_switch.scss +4 -0
- data/vendor/assets/scss/components/_table.scss +39 -4
- data/vendor/assets/scss/components/_title-bar.scss +0 -4
- data/vendor/assets/scss/components/_top-bar.scss +4 -2
- data/vendor/assets/scss/forms/_input-group.scss +4 -3
- data/vendor/assets/scss/forms/_meter.scss +3 -1
- data/vendor/assets/scss/forms/_progress.scss +9 -0
- data/vendor/assets/scss/forms/_text.scss +6 -2
- data/vendor/assets/scss/foundation.scss +1 -1
- data/vendor/assets/scss/grid/_classes.scss +14 -10
- data/vendor/assets/scss/grid/_flex-grid.scss +19 -9
- data/vendor/assets/scss/grid/_layout.scss +27 -2
- data/vendor/assets/scss/grid/_position.scss +4 -1
- data/vendor/assets/scss/grid/_row.scss +1 -2
- data/vendor/assets/scss/settings/_settings.scss +7 -0
- data/vendor/assets/scss/util/_breakpoint.scss +12 -15
- data/vendor/assets/scss/util/_color.scss +13 -0
- data/vendor/assets/scss/util/_mixins.scss +6 -2
- data/vendor/assets/scss/util/_unit.scss +5 -0
- metadata +2 -2
@@ -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
|
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: $
|
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;
|
@@ -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:
|
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
|
-
|
126
|
-
|
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 {
|
@@ -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
|
-
|
157
|
-
|
160
|
+
&::-webkit-inner-spin-button,
|
161
|
+
&::-webkit-outer-spin-button {
|
158
162
|
-webkit-appearance: none;
|
159
163
|
margin: 0;
|
160
164
|
}
|
@@ -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
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
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 {
|
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
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
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
|
}
|