zurb-foundation-5 5.2.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (123) hide show
  1. checksums.yaml +7 -0
  2. data/.bowerrc +3 -0
  3. data/.editorconfig +9 -0
  4. data/.gitignore +46 -0
  5. data/.travis.yml +34 -0
  6. data/CONTRIBUTING.md +55 -0
  7. data/Gemfile +3 -0
  8. data/Gemfile.lock +16 -0
  9. data/Gruntfile.js +222 -0
  10. data/LICENSE +22 -0
  11. data/README.md +44 -0
  12. data/bower.json +20 -0
  13. data/composer.json +9 -0
  14. data/foundation.gemspec +21 -0
  15. data/humans.txt +8 -0
  16. data/js/foundation/foundation.abide.js +299 -0
  17. data/js/foundation/foundation.accordion.js +54 -0
  18. data/js/foundation/foundation.alert.js +43 -0
  19. data/js/foundation/foundation.clearing.js +531 -0
  20. data/js/foundation/foundation.dropdown.js +306 -0
  21. data/js/foundation/foundation.equalizer.js +68 -0
  22. data/js/foundation/foundation.interchange.js +331 -0
  23. data/js/foundation/foundation.joyride.js +849 -0
  24. data/js/foundation/foundation.js +609 -0
  25. data/js/foundation/foundation.magellan.js +173 -0
  26. data/js/foundation/foundation.offcanvas.js +50 -0
  27. data/js/foundation/foundation.orbit.js +606 -0
  28. data/js/foundation/foundation.reveal.js +427 -0
  29. data/js/foundation/foundation.slider.js +200 -0
  30. data/js/foundation/foundation.tab.js +168 -0
  31. data/js/foundation/foundation.tooltip.js +272 -0
  32. data/js/foundation/foundation.topbar.js +422 -0
  33. data/karma.conf.js +114 -0
  34. data/lib/foundation/engine.rb +20 -0
  35. data/lib/foundation/generators/USAGE +15 -0
  36. data/lib/foundation/generators/install_generator.rb +54 -0
  37. data/lib/foundation/generators/templates/application.html.erb +47 -0
  38. data/lib/foundation/generators/templates/application.html.haml +31 -0
  39. data/lib/foundation/generators/templates/application.html.slim +35 -0
  40. data/lib/foundation/sprockets.rb +4 -0
  41. data/lib/foundation/version.rb +3 -0
  42. data/lib/scss.js +114 -0
  43. data/lib/zurb-foundation.rb +33 -0
  44. data/package.json +48 -0
  45. data/robots.txt +4 -0
  46. data/run-tests.sh +83 -0
  47. data/sache.json +5 -0
  48. data/scss/foundation.scss +45 -0
  49. data/scss/foundation/_functions.scss +101 -0
  50. data/scss/foundation/_settings.scss +1279 -0
  51. data/scss/foundation/components/_accordion.scss +52 -0
  52. data/scss/foundation/components/_alert-boxes.scss +126 -0
  53. data/scss/foundation/components/_block-grid.scss +132 -0
  54. data/scss/foundation/components/_breadcrumbs.scss +127 -0
  55. data/scss/foundation/components/_button-groups.scss +108 -0
  56. data/scss/foundation/components/_buttons.scss +222 -0
  57. data/scss/foundation/components/_clearing.scss +247 -0
  58. data/scss/foundation/components/_dropdown-buttons.scss +129 -0
  59. data/scss/foundation/components/_dropdown.scss +248 -0
  60. data/scss/foundation/components/_flex-video.scss +51 -0
  61. data/scss/foundation/components/_forms.scss +496 -0
  62. data/scss/foundation/components/_global.scss +365 -0
  63. data/scss/foundation/components/_grid.scss +261 -0
  64. data/scss/foundation/components/_inline-lists.scss +56 -0
  65. data/scss/foundation/components/_joyride.scss +220 -0
  66. data/scss/foundation/components/_keystrokes.scss +61 -0
  67. data/scss/foundation/components/_labels.scss +104 -0
  68. data/scss/foundation/components/_magellan.scss +34 -0
  69. data/scss/foundation/components/_offcanvas.scss +381 -0
  70. data/scss/foundation/components/_orbit.scss +415 -0
  71. data/scss/foundation/components/_pagination.scss +150 -0
  72. data/scss/foundation/components/_panels.scss +91 -0
  73. data/scss/foundation/components/_pricing-tables.scss +150 -0
  74. data/scss/foundation/components/_progress-bars.scss +79 -0
  75. data/scss/foundation/components/_range-slider.scss +148 -0
  76. data/scss/foundation/components/_reveal-new.scss +0 -0
  77. data/scss/foundation/components/_reveal.scss +216 -0
  78. data/scss/foundation/components/_side-nav.scss +93 -0
  79. data/scss/foundation/components/_split-buttons.scss +191 -0
  80. data/scss/foundation/components/_sub-nav.scss +125 -0
  81. data/scss/foundation/components/_switch.scss +294 -0
  82. data/scss/foundation/components/_tables.scss +97 -0
  83. data/scss/foundation/components/_tabs.scss +105 -0
  84. data/scss/foundation/components/_thumbs.scss +68 -0
  85. data/scss/foundation/components/_tooltips.scss +140 -0
  86. data/scss/foundation/components/_top-bar.scss +640 -0
  87. data/scss/foundation/components/_type.scss +493 -0
  88. data/scss/foundation/components/_visibility.scss +345 -0
  89. data/scss/foundation/test.html +0 -0
  90. data/scss/normalize.scss +423 -0
  91. data/spec/abide/abide.js +173 -0
  92. data/spec/abide/advanced.html +22 -0
  93. data/spec/abide/basic.html +13 -0
  94. data/spec/accordion/accordion.js +94 -0
  95. data/spec/accordion/basic.html +39 -0
  96. data/spec/accordion/grid.html +44 -0
  97. data/spec/accordion/multiexpand.html +20 -0
  98. data/spec/alert/alert.js +35 -0
  99. data/spec/alert/basic.html +4 -0
  100. data/spec/clearing/222.gif +0 -0
  101. data/spec/clearing/777.gif +0 -0
  102. data/spec/clearing/basic.html +5 -0
  103. data/spec/clearing/ccc.gif +0 -0
  104. data/spec/clearing/clearing.js +55 -0
  105. data/spec/dropdown/basic.html +10 -0
  106. data/spec/dropdown/dropdown.js +65 -0
  107. data/spec/equalizer/basic.html +24 -0
  108. data/spec/equalizer/equalizer.js +30 -0
  109. data/spec/framework/framework.js +14 -0
  110. data/spec/helpers.js +37 -0
  111. data/spec/interchange/basic.html +3 -0
  112. data/spec/interchange/interchange.js +60 -0
  113. data/spec/joyride/joyride.js +14 -0
  114. data/spec/magellan/magellan.js +14 -0
  115. data/spec/offcanvas/offcanvas.js +14 -0
  116. data/spec/orbit/orbit.js +14 -0
  117. data/spec/reveal/reveal.js +14 -0
  118. data/spec/tab/tab.js +14 -0
  119. data/spec/tooltip/tooltip.js +14 -0
  120. data/spec/topbar/multidropdown.html +60 -0
  121. data/spec/topbar/sticky.html +31 -0
  122. data/spec/topbar/topbar.js +96 -0
  123. metadata +238 -0
@@ -0,0 +1,222 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import "global";
6
+
7
+ //
8
+ // @variables
9
+ //
10
+ $include-html-button-classes: $include-html-classes !default;
11
+
12
+ // We use these to build padding for buttons.
13
+ $button-tny: rem-calc(10) !default;
14
+ $button-sml: rem-calc(14) !default;
15
+ $button-med: rem-calc(16) !default;
16
+ $button-lrg: rem-calc(18) !default;
17
+
18
+ // We use this to control the display property.
19
+ $button-display: inline-block !default;
20
+ $button-margin-bottom: rem-calc(20) !default;
21
+
22
+ // We use these to control button text styles.
23
+ $button-font-family: $body-font-family !default;
24
+ $button-font-color: #fff !default;
25
+ $button-font-color-alt: #333 !default;
26
+ $button-font-tny: rem-calc(11) !default;
27
+ $button-font-sml: rem-calc(13) !default;
28
+ $button-font-med: rem-calc(16) !default;
29
+ $button-font-lrg: rem-calc(20) !default;
30
+ $button-font-weight: normal !default;
31
+ $button-font-align: center !default;
32
+
33
+ // We use these to control various hover effects.
34
+ $button-function-factor: -20% !default;
35
+
36
+ // We use these to control button border styles.
37
+ $button-border-width: 0px !default;
38
+ $button-border-style: solid !default;
39
+ $bg: $primary-color !default;
40
+ $button-border-color: scale-color($bg, $lightness: $button-function-factor) !default;
41
+
42
+ // We use this to set the default radius used throughout the core.
43
+ $button-radius: $global-radius !default;
44
+ $button-round: $global-rounded !default;
45
+
46
+ // We use this to set default opacity for disabled buttons.
47
+ $button-disabled-opacity: 0.7 !default;
48
+
49
+
50
+ //
51
+ // @MIXIN
52
+ //
53
+ // We use this mixin to create a default button base.
54
+ //
55
+ // $style - Sets base styles. Can be set to false. Default: true.
56
+ // $display - Used to control display property. Default: $button-display || inline-block
57
+
58
+ @mixin button-base($style:true, $display:$button-display) {
59
+ @if $style {
60
+ border-style: $button-border-style;
61
+ border-width: $button-border-width;
62
+ cursor: $cursor-pointer-value;
63
+ font-family: $button-font-family;
64
+ font-weight: $button-font-weight;
65
+ line-height: normal;
66
+ margin: 0 0 $button-margin-bottom;
67
+ position: relative;
68
+ text-decoration: none;
69
+ text-align: $button-font-align;
70
+ -webkit-appearance: none;
71
+ -webkit-border-radius:0;
72
+ }
73
+ @if $display { display: $display; }
74
+ }
75
+
76
+ // @MIXIN
77
+ //
78
+ // We use this mixin to add button size styles
79
+ //
80
+ // $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12)
81
+ // $full-width - We can set $full-width:true to remove side padding extend width - Default: false
82
+
83
+ @mixin button-size($padding:$button-med, $full-width:false) {
84
+
85
+ // We control which padding styles come through,
86
+ // these can be turned off by setting $padding:false
87
+ @if $padding {
88
+ padding-top: $padding;
89
+ padding-#{$opposite-direction}: $padding * 2;
90
+ padding-bottom: $padding + rem-calc(1);
91
+ padding-#{$default-float}: $padding * 2;
92
+
93
+ // We control the font-size based on mixin input.
94
+ @if $padding == $button-med { font-size: $button-font-med; }
95
+ @else if $padding == $button-tny { font-size: $button-font-tny; }
96
+ @else if $padding == $button-sml { font-size: $button-font-sml; }
97
+ @else if $padding == $button-lrg { font-size: $button-font-lrg; }
98
+ }
99
+
100
+ // We can set $full-width:true to remove side padding extend width.
101
+ @if $full-width {
102
+ // We still need to check if $padding is set.
103
+ @if $padding {
104
+ padding-top: $padding;
105
+ padding-bottom: $padding + rem-calc(1);
106
+ } @else if $padding == false {
107
+ padding-top:0;
108
+ padding-bottom:0;
109
+ }
110
+ padding-right: 0;
111
+ padding-left: 0;
112
+ width: 100%;
113
+ }
114
+ }
115
+
116
+ // @MIXIN
117
+ //
118
+ // We use this mixin to add button color styles
119
+ //
120
+ // $bg - Primary color set in settings file. Default: $primary-color.
121
+ // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
122
+ // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
123
+ @mixin button-style($bg:$primary-color, $radius:false, $disabled:false) {
124
+
125
+ // We control which background styles are used,
126
+ // these can be removed by setting $bg:false
127
+ @if $bg {
128
+ // This find the lightness percentage of the background color.
129
+ $bg-lightness: lightness($bg);
130
+
131
+ background-color: $bg;
132
+ border-color: scale-color($bg, $lightness: $button-function-factor);
133
+ &:hover,
134
+ &:focus { background-color: scale-color($bg, $lightness: $button-function-factor); }
135
+
136
+ // We control the text color for you based on the background color.
137
+ @if $bg-lightness > 70% {
138
+ color: $button-font-color-alt;
139
+ &:hover,
140
+ &:focus { color: $button-font-color-alt; }
141
+ }
142
+ @else {
143
+ color: $button-font-color;
144
+ &:hover,
145
+ &:focus { color: $button-font-color; }
146
+ }
147
+ }
148
+
149
+ // We can set $disabled:true to create a disabled transparent button.
150
+ @if $disabled {
151
+ cursor: $cursor-default-value;
152
+ opacity: $button-disabled-opacity;
153
+ box-shadow: none;
154
+ &:hover,
155
+ &:focus { background-color: $bg; }
156
+ }
157
+
158
+ // We can control how much button radius us used.
159
+ @if $radius == true { @include radius($button-radius); }
160
+ @else if $radius { @include radius($radius); }
161
+
162
+ }
163
+
164
+ // @MIXIN
165
+ //
166
+ // We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
167
+ //
168
+ // $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12)
169
+ // $bg - Primary color set in settings file. Default: $primary-color.
170
+ // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false.
171
+ // $full-width - We can set $full-width:true to remove side padding extend width. Default:false.
172
+ // $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
173
+ // $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false.
174
+ // $is-prefix - Not used? Default:false.
175
+ @mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false) {
176
+ @include button-base;
177
+ @include button-size($padding, $full-width);
178
+ @include button-style($bg, $radius, $disabled);
179
+ }
180
+
181
+
182
+ @include exports("button") {
183
+ @if $include-html-button-classes {
184
+
185
+ // Default styles applied outside of media query
186
+ button, .button {
187
+ @include button-base;
188
+ @include button-size;
189
+ @include button-style;
190
+
191
+ @include single-transition(background-color);
192
+
193
+ &.secondary { @include button-style($bg:$secondary-color); }
194
+ &.success { @include button-style($bg:$success-color); }
195
+ &.alert { @include button-style($bg:$alert-color); }
196
+
197
+ &.large { @include button-size($padding:$button-lrg); }
198
+ &.small { @include button-size($padding:$button-sml); }
199
+ &.tiny { @include button-size($padding:$button-tny); }
200
+ &.expand { @include button-size($padding:null,$full-width:true); }
201
+
202
+ &.left-align { text-align: left; text-indent: rem-calc(12); }
203
+ &.right-align { text-align: right; padding-right: rem-calc(12); }
204
+
205
+ &.radius { @include button-style($bg:false, $radius:true); }
206
+ &.round { @include button-style($bg:false, $radius:$button-round); }
207
+
208
+ &.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
209
+ &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
210
+ &.success { @include button-style($bg:$success-color, $disabled:true); }
211
+ &.alert { @include button-style($bg:$alert-color, $disabled:true); }
212
+ }
213
+ }
214
+
215
+ @media #{$medium-up} {
216
+ button, .button {
217
+ @include button-base($style:false, $display:inline-block);
218
+ @include button-size($padding:false, $full-width:false);
219
+ }
220
+ }
221
+ }
222
+ }
@@ -0,0 +1,247 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import "global";
6
+
7
+ //
8
+ // @variables
9
+ //
10
+ $include-html-clearing-classes: $include-html-classes !default;
11
+
12
+ // We use these to set the background colors for parts of Clearing.
13
+ $clearing-bg: #333 !default;
14
+ $clearing-caption-bg: $clearing-bg !default;
15
+ $clearing-carousel-bg: rgba(51,51,51,0.8) !default;
16
+ $clearing-img-bg: $clearing-bg !default;
17
+
18
+ // We use these to style the close button
19
+ $clearing-close-color: #ccc !default;
20
+ $clearing-close-size: 30px !default;
21
+
22
+ // We use these to style the arrows
23
+ $clearing-arrow-size: 12px !default;
24
+ $clearing-arrow-color: $clearing-close-color !default;
25
+
26
+ // We use these to style captions
27
+ $clearing-caption-font-color: #ccc !default;
28
+ $clearing-caption-font-size: 0.875em !default;
29
+ $clearing-caption-padding: 10px 30px 20px !default;
30
+
31
+ // We use these to make the image and carousel height and style
32
+ $clearing-active-img-height: 85% !default;
33
+ $clearing-carousel-height: 120px !default;
34
+ $clearing-carousel-thumb-width: 120px !default;
35
+ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
36
+
37
+ @include exports("clearing") {
38
+ @if $include-html-clearing-classes {
39
+ // We decided to not create a mixin for Clearing because it relies
40
+ // on predefined classes and structure to work properly.
41
+ // The variables above should give enough control.
42
+
43
+ /* Clearing Styles */
44
+ .clearing-thumbs, #{data('clearing')} {
45
+ @include clearfix;
46
+ margin-bottom: 0;
47
+ margin-#{$default-float}: 0;
48
+ list-style: none;
49
+
50
+ li {
51
+ float: $default-float;
52
+ margin-#{$opposite-direction}: 10px;
53
+ }
54
+
55
+ &[class*="block-grid-"] li {
56
+ margin-#{$opposite-direction}: 0;
57
+ }
58
+ }
59
+
60
+ .clearing-blackout {
61
+ background: $clearing-bg;
62
+ position: fixed;
63
+ width: 100%;
64
+ height: 100%;
65
+ top: 0;
66
+ #{$default-float}: 0;
67
+ z-index: 998;
68
+
69
+ .clearing-close { display: block; }
70
+ }
71
+
72
+ .clearing-container {
73
+ position: relative;
74
+ z-index: 998;
75
+ height: 100%;
76
+ overflow: hidden;
77
+ margin: 0;
78
+ }
79
+
80
+ .clearing-touch-label {
81
+ position: absolute;
82
+ top: 50%;
83
+ left: 50%;
84
+ color: #aaa;
85
+ font-size: 0.6em;
86
+ }
87
+
88
+ .visible-img {
89
+ height: 95%;
90
+ position: relative;
91
+
92
+ img {
93
+ position: absolute;
94
+ #{$default-float}: 50%;
95
+ top: 50%;
96
+ margin-#{$default-float}: -50%;
97
+ max-height: 100%;
98
+ max-width: 100%;
99
+ }
100
+ }
101
+
102
+ .clearing-caption {
103
+ color: $clearing-caption-font-color;
104
+ font-size: $clearing-caption-font-size;
105
+ line-height: 1.3;
106
+ margin-bottom: 0;
107
+ text-align: center;
108
+ bottom: 0;
109
+ background: $clearing-caption-bg;
110
+ width: 100%;
111
+ padding: $clearing-caption-padding;
112
+ position: absolute;
113
+ #{$default-float}: 0;
114
+ }
115
+
116
+ .clearing-close {
117
+ z-index: 999;
118
+ padding-#{$default-float}: 20px;
119
+ padding-top: 10px;
120
+ font-size: $clearing-close-size;
121
+ line-height: 1;
122
+ color: $clearing-close-color;
123
+ display: none;
124
+
125
+ &:hover,
126
+ &:focus { color: #ccc; }
127
+ }
128
+
129
+ .clearing-assembled .clearing-container { height: 100%;
130
+ .carousel > ul { display: none; }
131
+ }
132
+
133
+ // If you want to show a lightbox, but only have a single image come through as the thumbnail
134
+ .clearing-feature li {
135
+ display: none;
136
+ &.clearing-featured-img {
137
+ display: block;
138
+ }
139
+ }
140
+
141
+ // Large screen overrides
142
+ @media #{$medium-up} {
143
+ .clearing-main-prev,
144
+ .clearing-main-next {
145
+ position: absolute;
146
+ height: 100%;
147
+ width: 40px;
148
+ top: 0;
149
+ & > span {
150
+ position: absolute;
151
+ top: 50%;
152
+ display: block;
153
+ width: 0;
154
+ height: 0;
155
+ border: solid $clearing-arrow-size;
156
+ &:hover { opacity: 0.8; }
157
+ }
158
+ }
159
+ .clearing-main-prev {
160
+ #{$default-float}: 0;
161
+ & > span {
162
+ #{$default-float}: 5px;
163
+ border-color: transparent;
164
+ border-#{$opposite-direction}-color: $clearing-arrow-color;
165
+ }
166
+ }
167
+ .clearing-main-next {
168
+ #{$opposite-direction}: 0;
169
+ & > span {
170
+ border-color: transparent;
171
+ border-#{$default-float}-color: $clearing-arrow-color;
172
+ }
173
+ }
174
+
175
+ .clearing-main-prev.disabled,
176
+ .clearing-main-next.disabled { opacity: 0.3; }
177
+
178
+ .clearing-assembled .clearing-container {
179
+
180
+ .carousel {
181
+ background: $clearing-carousel-bg;
182
+ height: $clearing-carousel-height;
183
+ margin-top: 10px;
184
+ text-align: center;
185
+
186
+ & > ul {
187
+ display: inline-block;
188
+ z-index: 999;
189
+ height: 100%;
190
+ position: relative;
191
+ float: none;
192
+
193
+ li {
194
+ display: block;
195
+ width: $clearing-carousel-thumb-width;
196
+ min-height: inherit;
197
+ float: $default-float;
198
+ overflow: hidden;
199
+ margin-#{$opposite-direction}: 0;
200
+ padding: 0;
201
+ position: relative;
202
+ cursor: $cursor-pointer-value;
203
+ opacity: 0.4;
204
+ clear: none;
205
+
206
+ &.fix-height {
207
+ img {
208
+ height: 100%;
209
+ max-width: none;
210
+ }
211
+ }
212
+
213
+ a.th {
214
+ border: none;
215
+ box-shadow: none;
216
+ display: block;
217
+ }
218
+
219
+ img {
220
+ cursor: $cursor-pointer-value !important;
221
+ width: 100% !important;
222
+ }
223
+
224
+ &.visible { opacity: 1; }
225
+ &:hover { opacity: 0.8; }
226
+ }
227
+ }
228
+ }
229
+
230
+ .visible-img {
231
+ background: $clearing-img-bg;
232
+ overflow: hidden;
233
+ height: $clearing-active-img-height;
234
+ }
235
+ }
236
+
237
+ .clearing-close {
238
+ position: absolute;
239
+ top: 10px;
240
+ #{$opposite-direction}: 20px;
241
+ padding-#{$default-float}: 0;
242
+ padding-top: 0;
243
+ }
244
+ }
245
+
246
+ }
247
+ }