foundation-rails 5.5.2.1 → 5.5.3.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.
- checksums.yaml +4 -4
- data/.ruby-version +1 -1
- 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 +42 -24
- data/vendor/assets/javascripts/foundation/foundation.accordion.js +39 -2
- data/vendor/assets/javascripts/foundation/foundation.alert.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.clearing.js +5 -5
- data/vendor/assets/javascripts/foundation/foundation.dropdown.js +17 -12
- data/vendor/assets/javascripts/foundation/foundation.equalizer.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.interchange.js +3 -2
- data/vendor/assets/javascripts/foundation/foundation.joyride.js +53 -50
- data/vendor/assets/javascripts/foundation/foundation.js +24 -17
- data/vendor/assets/javascripts/foundation/foundation.magellan.js +4 -5
- data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +75 -2
- data/vendor/assets/javascripts/foundation/foundation.orbit.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.reveal.js +40 -16
- data/vendor/assets/javascripts/foundation/foundation.slider.js +21 -6
- data/vendor/assets/javascripts/foundation/foundation.tab.js +25 -27
- data/vendor/assets/javascripts/foundation/foundation.tooltip.js +24 -15
- data/vendor/assets/javascripts/foundation/foundation.topbar.js +11 -11
- data/vendor/assets/stylesheets/foundation.scss +0 -2
- data/vendor/assets/stylesheets/foundation/_functions.scss +2 -2
- data/vendor/assets/stylesheets/foundation/_settings.scss +6 -3
- data/vendor/assets/stylesheets/foundation/components/_accordion.scss +6 -2
- data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +2 -1
- data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +1 -0
- data/vendor/assets/stylesheets/foundation/components/_buttons.scss +18 -13
- data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +3 -2
- data/vendor/assets/stylesheets/foundation/components/_forms.scss +21 -23
- data/vendor/assets/stylesheets/foundation/components/_global.scss +73 -9
- data/vendor/assets/stylesheets/foundation/components/_grid.scss +15 -15
- data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +2 -1
- data/vendor/assets/stylesheets/foundation/components/_joyride.scss +1 -1
- data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +92 -4
- data/vendor/assets/stylesheets/foundation/components/_pagination.scss +1 -0
- data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +6 -0
- data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_reveal.scss +3 -0
- data/vendor/assets/stylesheets/foundation/components/_tabs.scss +1 -1
- data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +1 -1
- data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +11 -3
- data/vendor/assets/stylesheets/foundation/components/_type.scss +73 -12
- data/vendor/assets/stylesheets/foundation/components/_visibility.scss +8 -75
- metadata +3 -4
@@ -70,9 +70,76 @@ $base-line-height: 1.5 !default;
|
|
70
70
|
// We use this to add transitions to elements
|
71
71
|
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
|
72
72
|
// $speed - Default: 300ms
|
73
|
-
// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
|
73
|
+
// $ease - Default: ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
|
74
74
|
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
75
|
-
transition
|
75
|
+
@include transition($property, $speed, $ease);
|
76
|
+
}
|
77
|
+
|
78
|
+
// @mixins
|
79
|
+
//
|
80
|
+
// We use this to add single or multiple transitions to elements
|
81
|
+
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
|
82
|
+
// $speed - Default: 300ms
|
83
|
+
// $ease - Default: ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
|
84
|
+
// $delay - Default: null (0s)
|
85
|
+
@mixin transition($property:all, $speed:300ms, $ease:ease-out, $delay:null) {
|
86
|
+
$transition: none;
|
87
|
+
|
88
|
+
@if length($property) > 1 {
|
89
|
+
|
90
|
+
@each $transition_list in $property {
|
91
|
+
|
92
|
+
@for $i from 1 through length($transition_list) {
|
93
|
+
|
94
|
+
@if $i == 1 {
|
95
|
+
$_property: nth($transition_list, $i);
|
96
|
+
}
|
97
|
+
|
98
|
+
@if length($transition_list) > 1 {
|
99
|
+
@if $i == 2 {
|
100
|
+
$_speed: nth($transition_list, $i);
|
101
|
+
}
|
102
|
+
} @else {
|
103
|
+
$_speed: $speed;
|
104
|
+
}
|
105
|
+
|
106
|
+
@if length($transition_list) > 2 {
|
107
|
+
@if $i == 3 {
|
108
|
+
$_ease: nth($transition_list, $i);
|
109
|
+
}
|
110
|
+
} @else {
|
111
|
+
$_ease: $ease;
|
112
|
+
}
|
113
|
+
|
114
|
+
@if length($transition_list) > 3 {
|
115
|
+
@if $i == 4 {
|
116
|
+
$_delay: nth($transition_list, $i);
|
117
|
+
}
|
118
|
+
} @else {
|
119
|
+
$_delay: $delay;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
@if $transition == none {
|
124
|
+
$transition: $_property $_speed $_ease $_delay;
|
125
|
+
} @else {
|
126
|
+
$transition: $transition, $_property $_speed $_ease $_delay;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
}
|
130
|
+
@else {
|
131
|
+
|
132
|
+
@each $prop in $property {
|
133
|
+
|
134
|
+
@if $transition == none {
|
135
|
+
$transition: $prop $speed $ease $delay;
|
136
|
+
} @else {
|
137
|
+
$transition: $transition, $prop $speed $ease $delay;
|
138
|
+
}
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
142
|
+
transition: $transition;
|
76
143
|
}
|
77
144
|
|
78
145
|
// @mixins
|
@@ -80,7 +147,7 @@ $base-line-height: 1.5 !default;
|
|
80
147
|
// We use this to add box-sizing across browser prefixes
|
81
148
|
@mixin box-sizing($type:border-box) {
|
82
149
|
-webkit-box-sizing: $type; // Android < 2.3, iOS < 4
|
83
|
-
-moz-box-sizing: $type;
|
150
|
+
-moz-box-sizing: $type; // Firefox < 29
|
84
151
|
box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
|
85
152
|
}
|
86
153
|
|
@@ -338,7 +405,7 @@ $retina: (
|
|
338
405
|
);
|
339
406
|
|
340
407
|
// Legacy
|
341
|
-
$small: $
|
408
|
+
$small: $small-up;
|
342
409
|
$medium: $medium-up;
|
343
410
|
$large: $large-up;
|
344
411
|
|
@@ -362,7 +429,7 @@ $cursor-text-value: text !default;
|
|
362
429
|
@if $include-js-meta-styles {
|
363
430
|
|
364
431
|
meta.foundation-version {
|
365
|
-
font-family: "/5.5.
|
432
|
+
font-family: "/5.5.3/";
|
366
433
|
}
|
367
434
|
|
368
435
|
meta.foundation-mq-small {
|
@@ -422,13 +489,10 @@ $cursor-text-value: text !default;
|
|
422
489
|
html, body { height: 100%; }
|
423
490
|
|
424
491
|
// Set box-sizing globally to handle padding and border widths
|
425
|
-
html {
|
426
|
-
box-sizing: border-box;
|
427
|
-
}
|
428
492
|
*,
|
429
493
|
*:before,
|
430
494
|
*:after {
|
431
|
-
@include box-sizing(
|
495
|
+
@include box-sizing(border-box);
|
432
496
|
}
|
433
497
|
|
434
498
|
html,
|
@@ -128,7 +128,7 @@ $last-child-float: $opposite-direction !default;
|
|
128
128
|
@if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
|
129
129
|
@if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
|
130
130
|
|
131
|
-
@if $float {
|
131
|
+
@if $float and $last-column == false {
|
132
132
|
@if $float == left or $float == true { float: $default-float; }
|
133
133
|
@else if $float == right { float: $opposite-direction; }
|
134
134
|
@else { float: none; }
|
@@ -207,20 +207,20 @@ $last-child-float: $opposite-direction !default;
|
|
207
207
|
float: $opposite-direction;
|
208
208
|
}
|
209
209
|
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
210
|
+
.row {
|
211
|
+
&.#{$size}-collapse {
|
212
|
+
> .column,
|
213
|
+
> .columns { @include grid-column($collapse:true, $float:false); }
|
214
|
+
|
215
|
+
.row {margin-left:0; margin-right:0;}
|
216
|
+
}
|
217
|
+
&.#{$size}-uncollapse {
|
218
|
+
> .column,
|
219
|
+
> .columns {
|
220
|
+
@include grid-column;
|
221
|
+
}
|
222
|
+
}
|
223
|
+
}
|
224
224
|
}
|
225
225
|
|
226
226
|
@include exports("grid") {
|
@@ -33,9 +33,10 @@ $inline-list-children-display: block !default;
|
|
33
33
|
// We use this mixin to create inline lists
|
34
34
|
@mixin inline-list {
|
35
35
|
list-style: none;
|
36
|
+
margin-top: $inline-list-top-margin;
|
37
|
+
margin-bottom: $inline-list-bottom-margin;
|
36
38
|
margin-#{$default-float}: $inline-list-default-float-margin;
|
37
39
|
margin-#{$opposite-direction}: $inline-list-opposite-margin;
|
38
|
-
margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
|
39
40
|
overflow: $inline-list-overflow;
|
40
41
|
padding: $inline-list-padding;
|
41
42
|
|
@@ -28,6 +28,7 @@ $tabbar-header-margin: 0 !default;
|
|
28
28
|
|
29
29
|
// Off Canvas Menu Variables
|
30
30
|
$off-canvas-width: rem-calc(250) !default;
|
31
|
+
$off-canvas-height: rem-calc(300) !default;
|
31
32
|
$off-canvas-bg: $oil !default;
|
32
33
|
$off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default;
|
33
34
|
$off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%) !default;
|
@@ -95,7 +96,6 @@ $menu-slide: "transform 500ms ease" !default;
|
|
95
96
|
-webkit-transform: translate3d($tx, $ty, $tz);
|
96
97
|
-moz-transform: translate3d($tx, $ty, $tz);
|
97
98
|
-ms-transform: translate($tx, $ty);
|
98
|
-
-ms-transform: translate3d($tx, $ty, $tz);
|
99
99
|
-o-transform: translate3d($tx, $ty, $tz);
|
100
100
|
transform: translate3d($tx, $ty, $tz)
|
101
101
|
}
|
@@ -112,7 +112,6 @@ $menu-slide: "transform 500ms ease" !default;
|
|
112
112
|
overflow-x: hidden;
|
113
113
|
overflow-y: auto;
|
114
114
|
position: absolute;
|
115
|
-
top: 0;
|
116
115
|
transition: transform 500ms ease 0s;
|
117
116
|
width: $off-canvas-width;
|
118
117
|
z-index: 1001;
|
@@ -120,10 +119,24 @@ $menu-slide: "transform 500ms ease" !default;
|
|
120
119
|
@if $position == left {
|
121
120
|
@include translate3d(-100%,0,0);
|
122
121
|
left: 0;
|
122
|
+
top: 0;
|
123
123
|
}
|
124
124
|
@if $position == right {
|
125
125
|
@include translate3d(100%,0,0);
|
126
126
|
right: 0;
|
127
|
+
top: 0;
|
128
|
+
}
|
129
|
+
@if $position == top {
|
130
|
+
@include translate3d(0,-100%,0);
|
131
|
+
top: 0;
|
132
|
+
width: 100%;
|
133
|
+
height: $off-canvas-height;
|
134
|
+
}
|
135
|
+
@if $position == bottom {
|
136
|
+
@include translate3d(0,100%,0);
|
137
|
+
bottom: 0;
|
138
|
+
width: 100%;
|
139
|
+
height: $off-canvas-height;
|
127
140
|
}
|
128
141
|
}
|
129
142
|
|
@@ -134,7 +147,9 @@ $menu-slide: "transform 500ms ease" !default;
|
|
134
147
|
@include wrap-base;
|
135
148
|
overflow: hidden;
|
136
149
|
&.move-right,
|
137
|
-
&.move-left
|
150
|
+
&.move-left,
|
151
|
+
&.move-bottom,
|
152
|
+
&.move-top { min-height: 100%; -webkit-overflow-scrolling: touch; }
|
138
153
|
}
|
139
154
|
|
140
155
|
// INNER WRAP
|
@@ -300,6 +315,7 @@ $menu-slide: "transform 500ms ease" !default;
|
|
300
315
|
position: absolute;
|
301
316
|
top: 0;
|
302
317
|
width: $off-canvas-width;
|
318
|
+
height: $off-canvas-height;
|
303
319
|
z-index: 1002;
|
304
320
|
@if $position == left {
|
305
321
|
@include translate3d(-100%,0,0);
|
@@ -309,6 +325,16 @@ $menu-slide: "transform 500ms ease" !default;
|
|
309
325
|
@include translate3d(100%,0,0);
|
310
326
|
right: 0;
|
311
327
|
}
|
328
|
+
@if $position == top {
|
329
|
+
@include translate3d(0,-100%,0);
|
330
|
+
top: 0;
|
331
|
+
width: 100%;
|
332
|
+
}
|
333
|
+
@if $position == bottom {
|
334
|
+
@include translate3d(0,100%,0);
|
335
|
+
bottom: 0;
|
336
|
+
width: 100%;
|
337
|
+
}
|
312
338
|
-webkit-transition: -webkit-#{$menu-slide};
|
313
339
|
-moz-transition: -moz-#{$menu-slide};
|
314
340
|
-ms-transition: -ms-#{$menu-slide};
|
@@ -421,6 +447,8 @@ $menu-slide: "transform 500ms ease" !default;
|
|
421
447
|
|
422
448
|
.left-off-canvas-menu { @include off-canvas-menu($position: left); }
|
423
449
|
.right-off-canvas-menu { @include off-canvas-menu($position: right); }
|
450
|
+
.top-off-canvas-menu { @include off-canvas-menu($position: top); }
|
451
|
+
.bottom-off-canvas-menu { @include off-canvas-menu($position: bottom); }
|
424
452
|
|
425
453
|
ul.off-canvas-list { @include off-canvas-list; }
|
426
454
|
|
@@ -441,8 +469,23 @@ $menu-slide: "transform 500ms ease" !default;
|
|
441
469
|
}
|
442
470
|
.exit-off-canvas { @include back-link; }
|
443
471
|
}
|
472
|
+
.move-top {
|
473
|
+
> .inner-wrap {
|
474
|
+
@include translate3d(0,-($off-canvas-height),0);
|
475
|
+
|
476
|
+
}
|
477
|
+
.exit-off-canvas { @include back-link; }
|
478
|
+
}
|
479
|
+
.move-bottom {
|
480
|
+
> .inner-wrap {
|
481
|
+
@include translate3d(0,($off-canvas-height),0);
|
482
|
+
|
483
|
+
}
|
484
|
+
.exit-off-canvas { @include back-link; }
|
485
|
+
}
|
444
486
|
.offcanvas-overlap {
|
445
|
-
.left-off-canvas-menu, .right-off-canvas-menu
|
487
|
+
.left-off-canvas-menu, .right-off-canvas-menu,
|
488
|
+
.top-off-canvas-menu, .bottom-off-canvas-menu {
|
446
489
|
-ms-transform: none;
|
447
490
|
-webkit-transform: none;
|
448
491
|
-moz-transform: none;
|
@@ -474,14 +517,42 @@ $menu-slide: "transform 500ms ease" !default;
|
|
474
517
|
}
|
475
518
|
.exit-off-canvas { @include back-link; }
|
476
519
|
}
|
520
|
+
.offcanvas-overlap-top {
|
521
|
+
.bottom-off-canvas-menu {
|
522
|
+
-ms-transform: none;
|
523
|
+
-webkit-transform: none;
|
524
|
+
-moz-transform: none;
|
525
|
+
-o-transform: none;
|
526
|
+
transform: none;
|
527
|
+
z-index: 1003;
|
528
|
+
}
|
529
|
+
.exit-off-canvas { @include back-link; }
|
530
|
+
}
|
531
|
+
.offcanvas-overlap-bottom {
|
532
|
+
.top-off-canvas-menu {
|
533
|
+
-ms-transform: none;
|
534
|
+
-webkit-transform: none;
|
535
|
+
-moz-transform: none;
|
536
|
+
-o-transform: none;
|
537
|
+
transform: none;
|
538
|
+
z-index: 1003;
|
539
|
+
}
|
540
|
+
.exit-off-canvas { @include back-link; }
|
541
|
+
}
|
477
542
|
|
478
543
|
// Older browsers
|
479
544
|
.no-csstransforms {
|
480
545
|
.left-off-canvas-menu { left: -($off-canvas-width); }
|
481
546
|
.right-off-canvas-menu { right: -($off-canvas-width); }
|
547
|
+
.top-off-canvas-menu { top: -($off-canvas-height); }
|
548
|
+
.bottom-off-canvas-menu { bottom: -($off-canvas-height); }
|
482
549
|
|
483
550
|
.move-left > .inner-wrap { right: $off-canvas-width; }
|
484
551
|
.move-right > .inner-wrap { left: $off-canvas-width; }
|
552
|
+
.move-top > .inner-wrap { right: $off-canvas-height; }
|
553
|
+
.move-bottom > .inner-wrap { left: $off-canvas-height; }
|
554
|
+
|
555
|
+
|
485
556
|
}
|
486
557
|
|
487
558
|
.left-submenu {
|
@@ -498,6 +569,20 @@ $menu-slide: "transform 500ms ease" !default;
|
|
498
569
|
}
|
499
570
|
}
|
500
571
|
|
572
|
+
.top-submenu {
|
573
|
+
@include off-canvas-submenu($position: top);
|
574
|
+
&.move-bottom, &.offcanvas-overlap-bottom, &.offcanvas-overlap {
|
575
|
+
@include translate3d(0,0%,0);
|
576
|
+
}
|
577
|
+
}
|
578
|
+
|
579
|
+
.bottom-submenu {
|
580
|
+
@include off-canvas-submenu($position: bottom);
|
581
|
+
&.move-top, &.offcanvas-overlap-top, &.offcanvas-overlap {
|
582
|
+
@include translate3d(0,0%,0);
|
583
|
+
}
|
584
|
+
}
|
585
|
+
|
501
586
|
@if $text-direction == rtl {
|
502
587
|
.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
|
503
588
|
@include icon-double-arrows($position: left);
|
@@ -516,3 +601,6 @@ $menu-slide: "transform 500ms ease" !default;
|
|
516
601
|
|
517
602
|
}
|
518
603
|
}
|
604
|
+
|
605
|
+
|
606
|
+
|
@@ -47,6 +47,8 @@ $progress-meter-alert-color: $alert-color !default;
|
|
47
47
|
background: $bg;
|
48
48
|
display: block;
|
49
49
|
height: 100%;
|
50
|
+
float: left;
|
51
|
+
width: 0%;
|
50
52
|
}
|
51
53
|
|
52
54
|
|
@@ -60,6 +62,10 @@ $progress-meter-alert-color: $alert-color !default;
|
|
60
62
|
// Meter
|
61
63
|
.meter {
|
62
64
|
@include progress-meter;
|
65
|
+
|
66
|
+
&.secondary { @include progress-meter($bg:$progress-meter-secondary-color); }
|
67
|
+
&.success { @include progress-meter($bg:$progress-meter-success-color); }
|
68
|
+
&.alert { @include progress-meter($bg:$progress-meter-alert-color); }
|
63
69
|
}
|
64
70
|
&.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
|
65
71
|
&.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
|
@@ -15,7 +15,7 @@
|
|
15
15
|
|
16
16
|
$include-html-range-slider-classes: $include-html-classes !default;
|
17
17
|
|
18
|
-
// These
|
18
|
+
// These variables define the slider bar styles
|
19
19
|
$range-slider-bar-width: 100% !default;
|
20
20
|
$range-slider-bar-height: rem-calc(16) !default;
|
21
21
|
|
@@ -31,7 +31,7 @@ $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness:
|
|
31
31
|
$range-slider-vertical-bar-width: rem-calc(16) !default;
|
32
32
|
$range-slider-vertical-bar-height: rem-calc(200) !default;
|
33
33
|
|
34
|
-
// These
|
34
|
+
// These variables define the slider handle styles
|
35
35
|
$range-slider-handle-width: rem-calc(32) !default;
|
36
36
|
$range-slider-handle-height: rem-calc(22) !default;
|
37
37
|
$range-slider-handle-position-top: rem-calc(-5) !default;
|
@@ -66,8 +66,8 @@ $tooltip-max-width: 300px !default;
|
|
66
66
|
#{$default-float}: 50%;
|
67
67
|
|
68
68
|
> .nub {
|
69
|
-
border-color: transparent transparent $tooltip-bg transparent;
|
70
69
|
border: solid $tooltip-pip-size;
|
70
|
+
border-color: transparent transparent $tooltip-bg transparent;
|
71
71
|
display: block;
|
72
72
|
height: 0;
|
73
73
|
pointer-events: none;
|