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.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/.ruby-version +1 -1
  3. data/bower.json +2 -2
  4. data/lib/foundation/rails/version.rb +1 -1
  5. data/vendor/assets/javascripts/foundation.js +1 -1
  6. data/vendor/assets/javascripts/foundation/foundation.abide.js +42 -24
  7. data/vendor/assets/javascripts/foundation/foundation.accordion.js +39 -2
  8. data/vendor/assets/javascripts/foundation/foundation.alert.js +1 -1
  9. data/vendor/assets/javascripts/foundation/foundation.clearing.js +5 -5
  10. data/vendor/assets/javascripts/foundation/foundation.dropdown.js +17 -12
  11. data/vendor/assets/javascripts/foundation/foundation.equalizer.js +1 -1
  12. data/vendor/assets/javascripts/foundation/foundation.interchange.js +3 -2
  13. data/vendor/assets/javascripts/foundation/foundation.joyride.js +53 -50
  14. data/vendor/assets/javascripts/foundation/foundation.js +24 -17
  15. data/vendor/assets/javascripts/foundation/foundation.magellan.js +4 -5
  16. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +75 -2
  17. data/vendor/assets/javascripts/foundation/foundation.orbit.js +1 -1
  18. data/vendor/assets/javascripts/foundation/foundation.reveal.js +40 -16
  19. data/vendor/assets/javascripts/foundation/foundation.slider.js +21 -6
  20. data/vendor/assets/javascripts/foundation/foundation.tab.js +25 -27
  21. data/vendor/assets/javascripts/foundation/foundation.tooltip.js +24 -15
  22. data/vendor/assets/javascripts/foundation/foundation.topbar.js +11 -11
  23. data/vendor/assets/stylesheets/foundation.scss +0 -2
  24. data/vendor/assets/stylesheets/foundation/_functions.scss +2 -2
  25. data/vendor/assets/stylesheets/foundation/_settings.scss +6 -3
  26. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +6 -2
  27. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +2 -1
  28. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +1 -0
  29. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +18 -13
  30. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +3 -2
  31. data/vendor/assets/stylesheets/foundation/components/_forms.scss +21 -23
  32. data/vendor/assets/stylesheets/foundation/components/_global.scss +73 -9
  33. data/vendor/assets/stylesheets/foundation/components/_grid.scss +15 -15
  34. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +2 -1
  35. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +1 -1
  36. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +92 -4
  37. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +1 -0
  38. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +6 -0
  39. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +2 -2
  40. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +3 -0
  41. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +1 -1
  42. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +1 -1
  43. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +11 -3
  44. data/vendor/assets/stylesheets/foundation/components/_type.scss +73 -12
  45. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +8 -75
  46. 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: $property $speed $ease;
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: $medium-up;
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.2/";
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(inherit);
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
- .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
- }
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
 
@@ -57,7 +57,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
57
57
  position: absolute;
58
58
  top: 0;
59
59
  width: 95%;
60
- z-index: 101;
60
+ z-index: 103;
61
61
  #{$default-float}: 2.5%;
62
62
  }
63
63
 
@@ -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 { min-height: 100%; -webkit-overflow-scrolling: touch; }
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
+
@@ -51,6 +51,7 @@ $pagination-link-current-active-bg: $primary-color !default;
51
51
  a, button {
52
52
  cursor: $pagination-link-unavailable-cursor;
53
53
  color: $pagination-link-unavailable-font-color;
54
+ pointer-events: none;
54
55
  }
55
56
  &:hover a,
56
57
  & a:focus,
@@ -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 variabels define the slider bar styles
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 variabels define the slider handle styles
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;
@@ -136,6 +136,9 @@ $z-index-base: 1005;
136
136
  @if $box-shadow {
137
137
  box-shadow: $reveal-box-shadow;
138
138
  }
139
+ @else{
140
+ box-shadow: none;
141
+ }
139
142
 
140
143
  // We can control how much radius is used on the modal
141
144
  @if $radius == true { @include radius($reveal-radius); }
@@ -52,7 +52,7 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
52
52
  }
53
53
  }
54
54
 
55
- &.active a {
55
+ &.active > a {
56
56
  background-color: $tabs-navigation-active-bg-color;
57
57
  color: $tabs-navigation-active-font-color;
58
58
  }
@@ -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;