foundation-rails 5.2.3.0 → 5.3.0.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 (45) hide show
  1. checksums.yaml +4 -4
  2. data/bower.json +2 -2
  3. data/lib/foundation/rails/version.rb +1 -1
  4. data/test/dummy/.ruby-version +1 -0
  5. data/vendor/assets/_settings.scss +1298 -0
  6. data/vendor/assets/javascripts/foundation/foundation.abide.js +4 -4
  7. data/vendor/assets/javascripts/foundation/foundation.accordion.js +7 -1
  8. data/vendor/assets/javascripts/foundation/foundation.alert.js +3 -3
  9. data/vendor/assets/javascripts/foundation/foundation.clearing.js +17 -9
  10. data/vendor/assets/javascripts/foundation/foundation.dropdown.js +7 -5
  11. data/vendor/assets/javascripts/foundation/foundation.equalizer.js +2 -2
  12. data/vendor/assets/javascripts/foundation/foundation.interchange.js +24 -11
  13. data/vendor/assets/javascripts/foundation/foundation.joyride.js +14 -11
  14. data/vendor/assets/javascripts/foundation/foundation.js +6 -4
  15. data/vendor/assets/javascripts/foundation/foundation.magellan.js +5 -3
  16. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +2 -2
  17. data/vendor/assets/javascripts/foundation/foundation.orbit.js +123 -261
  18. data/vendor/assets/javascripts/foundation/foundation.reveal.js +15 -15
  19. data/vendor/assets/javascripts/foundation/foundation.slider.js +51 -24
  20. data/vendor/assets/javascripts/foundation/foundation.topbar.js +13 -12
  21. data/vendor/assets/javascripts/vendor/modernizr.js +3 -3
  22. data/vendor/assets/stylesheets/foundation.scss +2 -1
  23. data/vendor/assets/stylesheets/foundation/_settings.scss +19 -10
  24. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +115 -1
  25. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +2 -2
  26. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +9 -1
  27. data/vendor/assets/stylesheets/foundation/components/_forms.scss +8 -6
  28. data/vendor/assets/stylesheets/foundation/components/_global.scss +12 -7
  29. data/vendor/assets/stylesheets/foundation/components/_grid.scss +17 -4
  30. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +229 -0
  31. data/vendor/assets/stylesheets/foundation/components/_iconbar.scss +67 -0
  32. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +18 -16
  33. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +84 -139
  34. data/vendor/assets/stylesheets/foundation/components/_panels.scss +6 -3
  35. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +20 -5
  36. data/vendor/assets/stylesheets/foundation/components/_reveal-new.scss +0 -0
  37. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +1 -1
  38. data/vendor/assets/stylesheets/foundation/components/_switches.scss +215 -0
  39. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +1 -1
  40. data/vendor/assets/stylesheets/foundation/components/_toolbar.scss +67 -0
  41. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +2 -1
  42. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +26 -11
  43. data/vendor/assets/stylesheets/foundation/components/_type.scss +2 -0
  44. metadata +10 -3
  45. data/vendor/assets/stylesheets/foundation/components/_switch.scss +0 -294
@@ -15,7 +15,7 @@ $side-nav-padding: rem-calc(14 0) !default;
15
15
 
16
16
  // We use these to control list styles.
17
17
  $side-nav-list-type: none !default;
18
- $side-nav-list-position: inside !default;
18
+ $side-nav-list-position: outside !default;
19
19
  $side-nav-list-margin: rem-calc(0 0 7 0) !default;
20
20
 
21
21
  // We use these to control link styles.
@@ -0,0 +1,215 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import "global";
6
+
7
+ //
8
+ // @name
9
+ // @dependencies _global.scss
10
+ //
11
+
12
+ //
13
+ // @variables
14
+ //
15
+
16
+ $include-html-form-classes: $include-html-classes !default;
17
+
18
+ // Controlling background color for the switch container
19
+ $switch-bg: #ddd !default;
20
+
21
+ // We use these to control the switch heights for our default classes
22
+ $switch-height-tny: 1.5rem !default;
23
+ $switch-height-sml: 1.75rem !default;
24
+ $switch-height-med: 2rem !default;
25
+ $switch-height-lrg: 2.5rem !default;
26
+ $switch-bottom-margin: 1.5rem !default;
27
+
28
+ // We use these to style the switch-paddle
29
+ $switch-paddle-bg: #fff !default;
30
+ $switch-paddle-transition-speed: .15s !default;
31
+ $switch-paddle-transition-ease: ease-out !default;
32
+ $switch-active-color: $primary-color;
33
+
34
+
35
+ //
36
+ // @mixins
37
+ //
38
+
39
+ // We use this mixin to create the base styles for our switch element.
40
+ //
41
+ // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
42
+ // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
43
+ @mixin switch-base(
44
+ $transition-speed:$switch-paddle-transition-speed,
45
+ $transition-ease:$switch-paddle-transition-ease) {
46
+
47
+
48
+ // Default label styles for type and transition
49
+ label {
50
+ display: block;
51
+ margin-bottom: $switch-height-med / 2;
52
+ position: relative;
53
+ color: transparent;
54
+ background: $switch-bg;
55
+ text-indent: 100%;
56
+ width: $switch-height-med * 2; height: $switch-height-med;
57
+ cursor: pointer;
58
+
59
+ // Transition for the switch label to follow paddle
60
+ @include single-transition(left, $transition-speed, $transition-ease);
61
+ }
62
+
63
+ // So that we don't need to recreate the form with any JS, we use the
64
+ // existing checkbox or radio button, but we cleverly position and hide it.
65
+ input {
66
+ display: none;
67
+
68
+ & + label { margin-left: 0; margin-right: 0; }
69
+ }
70
+
71
+ // The paddle for the switch is created from an after psuedoclass
72
+ // content element. This is sized and positioned, and reacts to
73
+ // the state of the input.
74
+
75
+ label:after {
76
+ content: "";
77
+ display: block;
78
+ background: $switch-paddle-bg;
79
+ position: absolute; top: .25rem; left: .25rem;
80
+ width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem;
81
+
82
+ -webkit-transition: left 0.15s ease-out;
83
+ -moz-transition: left 0.15s ease-out;
84
+ transition: left 0.15s ease-out;
85
+ }
86
+
87
+ input:checked + label {
88
+ background: $switch-active-color;
89
+ }
90
+
91
+ input:checked + label:after {
92
+ left: $switch-height-med + 0.25rem;
93
+ }
94
+ }
95
+
96
+ // We use this mixin to create the size styles for switches.
97
+ //
98
+ // $height - Height (in px) of the switch. Default: $switch-height-med.
99
+ // $font-size - Font size of text in switch. Default: $switch-font-size-med.
100
+ // $line-height - Line height of switch. Default: 2.3rem.
101
+ @mixin switch-size($height: $switch-height-med) {
102
+
103
+ label {
104
+ width: $height * 2; height: $height;
105
+ }
106
+
107
+ label:after {
108
+ width: $height - 0.5rem; height: $height - 0.5rem;
109
+ }
110
+
111
+ input:checked + label:after {
112
+ left: $height + 0.25rem;
113
+ }
114
+
115
+ }
116
+
117
+ // We use this mixin to add color and other fanciness to the switches.
118
+ //
119
+ // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
120
+ // $active-color - Background color of positive side of switch. Default: $switch-positive-color.
121
+ // $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
122
+ // $radius - Radius to apply to switch. Default: false.
123
+ // $base-style - Apply base styles? Default: true.
124
+ @mixin switch-style(
125
+ $paddle-bg:$switch-paddle-bg,
126
+ $radius:false,
127
+ $base-style:true) {
128
+
129
+ @if $base-style {
130
+
131
+ label {
132
+ color: transparent;
133
+ background: $switch-bg;
134
+ }
135
+
136
+ label:after {
137
+ background: $paddle-bg;
138
+ }
139
+
140
+ input:checked + label {
141
+ background: $switch-active-color;
142
+ }
143
+ }
144
+
145
+ // Setting up the radius for switches
146
+ @if $radius == true {
147
+ label {
148
+ border-radius: 2rem;
149
+ }
150
+ label:after {
151
+ border-radius: 2rem;
152
+ }
153
+ }
154
+ @else if $radius {
155
+ label {
156
+ border-radius: $radius;
157
+ }
158
+ label:after {
159
+ border-radius: $radius;
160
+ }
161
+ }
162
+
163
+ }
164
+
165
+ // We use this to quickly create switches with a single mixin
166
+ //
167
+ // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
168
+ // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
169
+ // $height - Height (in px) of the switch. Default: $switch-height-med.
170
+ // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
171
+ // $active-color - Background color of an active switch. Default: $switch-active-color.
172
+ // $radius - Radius to apply to switch. Default: false.
173
+ // $base-style - Apply base styles? Default: true.
174
+ @mixin switch(
175
+ $transition-speed: $switch-paddle-transition-speed,
176
+ $transition-ease: $switch-paddle-transition-ease,
177
+ $height: $switch-height-med,
178
+ $paddle-bg: $switch-paddle-bg,
179
+ $active-color: $switch-active-color,
180
+ $radius:false,
181
+ $base-style:true) {
182
+ @include switch-base($transition-speed, $transition-ease);
183
+ @include switch-size($height);
184
+ @include switch-style($paddle-bg, $radius, $base-style);
185
+ }
186
+
187
+ @include exports("switch") {
188
+ @if $include-html-form-classes {
189
+ div.switch {
190
+ @include switch;
191
+
192
+ // Large radio switches
193
+ &.large { @include switch-size($switch-height-lrg); }
194
+
195
+ // Small radio switches
196
+ &.small { @include switch-size($switch-height-sml); }
197
+
198
+ // Tiny radio switches
199
+ &.tiny { @include switch-size($switch-height-tny); }
200
+
201
+ // Add a radius to the switch
202
+ &.radius {
203
+ label { @include radius(4px); }
204
+ label:after { @include radius(3px); }
205
+ }
206
+
207
+ // Make the switch completely round, like a pill
208
+ &.round { @include radius(1000px);
209
+ label { @include radius(2rem); }
210
+ label:after { @include radius(2rem); }
211
+ }
212
+
213
+ }
214
+ }
215
+ }
@@ -57,7 +57,7 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
57
57
  }
58
58
  }
59
59
  &.vertical {
60
- dd, .tab {
60
+ dd, .tab-title {
61
61
  position: inherit;
62
62
  float: none;
63
63
  display: block;
@@ -0,0 +1,67 @@
1
+ /* toolbar styles */
2
+
3
+ .toolbar {
4
+ background: #333;
5
+ width: 100%;
6
+ font-size: 0;
7
+ display: inline-block;
8
+
9
+ &.label-bottom .tab .tab-content {
10
+ i, img { margin-bottom: 10px; }
11
+ }
12
+
13
+ &.label-right .tab .tab-content {
14
+ i, img { margin-right: 10px; display: inline-block;}
15
+ label { display: inline-block; }
16
+ }
17
+
18
+ &.vertical.label-right .tab .tab-content {
19
+ text-align: left;
20
+ }
21
+
22
+ &.vertical {
23
+ height: 100%;
24
+ width: auto;
25
+
26
+ .tab {
27
+ width: auto;
28
+ margin: auto;
29
+ float: none;
30
+ }
31
+ }
32
+
33
+ .tab {
34
+ text-align: center;
35
+ width: 25%;
36
+ margin: 0 auto;
37
+ display: block;
38
+ padding: 20px;
39
+ float: left;
40
+
41
+ &:hover {
42
+ background: rgba(#fff, 0.1);
43
+ }
44
+ }
45
+ }
46
+
47
+ .toolbar .tab-content {
48
+ font-size: 16px;
49
+ text-align: center;
50
+
51
+ label { color: #ccc; }
52
+
53
+ i {
54
+ font-size: 30px;
55
+ display: block;
56
+ margin: 0 auto;
57
+ color: #ccc;
58
+ vertical-align: middle;
59
+ }
60
+
61
+ img {
62
+ width: 30px;
63
+ height: 30px;
64
+ display: block;
65
+ margin: 0 auto;
66
+ }
67
+ }
@@ -29,6 +29,7 @@ $tooltip-font-size-sml: rem-calc(14) !default;
29
29
  $tooltip-radius: $global-radius !default;
30
30
  $tooltip-rounded: $global-rounded !default;
31
31
  $tooltip-pip-size: 5px !default;
32
+ $tooltip-max-width: 300px !default;
32
33
 
33
34
  @include exports("tooltip") {
34
35
  @if $include-html-tooltip-classes {
@@ -58,7 +59,7 @@ $tooltip-pip-size: 5px !default;
58
59
  font-size: $tooltip-font-size;
59
60
  line-height: $tooltip-line-height;
60
61
  padding: $tooltip-padding;
61
- max-width: 85%;
62
+ max-width: $tooltip-max-width;
62
63
  #{$default-float}: 50%;
63
64
  width: 100%;
64
65
  color: $tooltip-font-color;
@@ -42,6 +42,7 @@ $topbar-link-font-size: rem-calc(13) !default;
42
42
  $topbar-link-hover-lightness: -10% !default; // Darken by 10%
43
43
  $topbar-link-bg: $topbar-bg !default;
44
44
  $topbar-link-bg-hover: #272727 !default;
45
+ $topbar-link-bg-color-hover: #555555 !default;
45
46
  $topbar-link-bg-active: $primary-color !default;
46
47
  $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
47
48
  $topbar-link-font-family: $body-font-family !default;
@@ -216,10 +217,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
216
217
 
217
218
  // Adding the class "menu-icon" will add the 3-line icon people love and adore.
218
219
  &.menu-icon {
219
- #{$opposite-direction}: $topbar-link-padding;
220
220
  top: 50%;
221
221
  margin-top: -16px;
222
- padding-#{$default-float}: 40px;
223
222
 
224
223
  a {
225
224
  @if $text-direction == rtl {
@@ -227,11 +226,11 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
227
226
  }
228
227
  height: 34px;
229
228
  line-height: 33px;
230
- padding: 0;
229
+ padding: 0 $topbar-link-padding+25 0 $topbar-link-padding;
231
230
  color: $topbar-menu-link-color;
232
231
  position: relative;
233
232
 
234
- &::after {
233
+ & {
235
234
  // @include hamburger icon
236
235
  //
237
236
  // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
@@ -243,8 +242,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
243
242
  // $color - icon color
244
243
  // $hover-color - icon color during hover, here it is set the same as $color because the values are changed on line 264
245
244
  // $offcanvas - Set to false of @include in topbar
246
- @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false );
247
- #{$opposite-direction}: 0;
245
+ @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false);
248
246
  }
249
247
  }
250
248
  }
@@ -335,7 +333,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
335
333
 
336
334
  // Apply the hover link color when it has that class
337
335
  &:hover:not(.has-form) > a {
338
- background: $topbar-link-bg-hover;
336
+ background-color: $topbar-link-bg-color-hover;
337
+ @if ($topbar-link-bg-hover) {
338
+ background: $topbar-link-bg-hover;
339
+ }
339
340
  color: $topbar-link-color-hover;
340
341
 
341
342
  }
@@ -477,7 +478,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
477
478
  li {
478
479
  &.hover {
479
480
  > a:not(.button) {
480
- background: $topbar-link-bg-hover;
481
+ background-color: $topbar-link-bg-color-hover;
482
+ @if ($topbar-link-bg-hover) {
483
+ background: $topbar-link-bg-hover;
484
+ }
481
485
  color: $topbar-link-color-hover;
482
486
  }
483
487
  }
@@ -486,7 +490,12 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
486
490
  padding: 0 $topbar-link-padding;
487
491
  line-height: $topbar-height;
488
492
  background: $topbar-link-bg;
489
- &:hover { background: $topbar-link-bg-hover; }
493
+ &:hover {
494
+ background-color: $topbar-link-bg-color-hover;
495
+ @if ($topbar-link-bg-hover) {
496
+ background: $topbar-link-bg-hover;
497
+ }
498
+ }
490
499
  }
491
500
  }
492
501
  &.active:not(.has-form) {
@@ -563,7 +572,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
563
572
  }
564
573
  &:not(.has-form):hover > a:not(.button) {
565
574
  color: $topbar-link-color-hover;
566
- background: $topbar-link-bg-hover;
575
+ background-color: $topbar-link-bg-color-hover;
576
+ @if ($topbar-link-bg-hover) {
577
+ background: $topbar-link-bg-hover;
578
+ }
567
579
  }
568
580
 
569
581
  label {
@@ -620,7 +632,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
620
632
  ul li {
621
633
  // Apply the hover link color when it has that class
622
634
  &:hover > a {
623
- background: $topbar-link-bg-hover;
635
+ background-color: $topbar-link-bg-color-hover;
636
+ @if ($topbar-link-bg-hover) {
637
+ background: $topbar-link-bg-hover;
638
+ }
624
639
  color: $topbar-link-color-hover;
625
640
  }
626
641
 
@@ -445,6 +445,8 @@ $align-class-breakpoints:
445
445
  h2 { font-size: $h2-font-size; }
446
446
  h3 { font-size: $h3-font-size; }
447
447
  h4 { font-size: $h4-font-size; }
448
+ h5 { font-size: $h5-font-size; }
449
+ h6 { font-size: $h6-font-size; }
448
450
  }
449
451
 
450
452
  // Only include these styles if you want them.
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: foundation-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 5.2.3.0
4
+ version: 5.3.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - ZURB
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-05-29 00:00:00.000000000 Z
11
+ date: 2014-06-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -92,6 +92,7 @@ files:
92
92
  - lib/foundation/rails/templates/application.html.slim
93
93
  - lib/foundation/rails/version.rb
94
94
  - test/dummy/.gitignore
95
+ - test/dummy/.ruby-version
95
96
  - test/dummy/Gemfile
96
97
  - test/dummy/README.rdoc
97
98
  - test/dummy/Rakefile
@@ -150,6 +151,7 @@ files:
150
151
  - test/dummy/vendor/assets/javascripts/.keep
151
152
  - test/dummy/vendor/assets/stylesheets/.keep
152
153
  - update-gem.sh
154
+ - vendor/assets/_settings.scss
153
155
  - vendor/assets/javascripts/foundation.js
154
156
  - vendor/assets/javascripts/foundation/foundation.abide.js
155
157
  - vendor/assets/javascripts/foundation/foundation.accordion.js
@@ -185,6 +187,8 @@ files:
185
187
  - vendor/assets/stylesheets/foundation/components/_forms.scss
186
188
  - vendor/assets/stylesheets/foundation/components/_global.scss
187
189
  - vendor/assets/stylesheets/foundation/components/_grid.scss
190
+ - vendor/assets/stylesheets/foundation/components/_icon-bar.scss
191
+ - vendor/assets/stylesheets/foundation/components/_iconbar.scss
188
192
  - vendor/assets/stylesheets/foundation/components/_inline-lists.scss
189
193
  - vendor/assets/stylesheets/foundation/components/_joyride.scss
190
194
  - vendor/assets/stylesheets/foundation/components/_keystrokes.scss
@@ -197,14 +201,16 @@ files:
197
201
  - vendor/assets/stylesheets/foundation/components/_pricing-tables.scss
198
202
  - vendor/assets/stylesheets/foundation/components/_progress-bars.scss
199
203
  - vendor/assets/stylesheets/foundation/components/_range-slider.scss
204
+ - vendor/assets/stylesheets/foundation/components/_reveal-new.scss
200
205
  - vendor/assets/stylesheets/foundation/components/_reveal.scss
201
206
  - vendor/assets/stylesheets/foundation/components/_side-nav.scss
202
207
  - vendor/assets/stylesheets/foundation/components/_split-buttons.scss
203
208
  - vendor/assets/stylesheets/foundation/components/_sub-nav.scss
204
- - vendor/assets/stylesheets/foundation/components/_switch.scss
209
+ - vendor/assets/stylesheets/foundation/components/_switches.scss
205
210
  - vendor/assets/stylesheets/foundation/components/_tables.scss
206
211
  - vendor/assets/stylesheets/foundation/components/_tabs.scss
207
212
  - vendor/assets/stylesheets/foundation/components/_thumbs.scss
213
+ - vendor/assets/stylesheets/foundation/components/_toolbar.scss
208
214
  - vendor/assets/stylesheets/foundation/components/_tooltips.scss
209
215
  - vendor/assets/stylesheets/foundation/components/_top-bar.scss
210
216
  - vendor/assets/stylesheets/foundation/components/_type.scss
@@ -236,6 +242,7 @@ specification_version: 4
236
242
  summary: ZURB Foundation on Sass/Compass
237
243
  test_files:
238
244
  - test/dummy/.gitignore
245
+ - test/dummy/.ruby-version
239
246
  - test/dummy/Gemfile
240
247
  - test/dummy/README.rdoc
241
248
  - test/dummy/Rakefile