foundation-sass-rails 5.5.3.2

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 (58) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +11 -0
  3. data/.rspec +3 -0
  4. data/.travis.yml +5 -0
  5. data/Gemfile +6 -0
  6. data/Gemfile.lock +37 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +62 -0
  9. data/Rakefile +6 -0
  10. data/bin/console +14 -0
  11. data/bin/setup +8 -0
  12. data/foundation-sass-rails.gemspec +29 -0
  13. data/lib/foundation-sass-rails.rb +8 -0
  14. data/lib/foundation/version.rb +5 -0
  15. data/lib/generators/foundation/overrides_generator.rb +39 -0
  16. data/vendor/assets/stylesheets/foundation.scss +42 -0
  17. data/vendor/assets/stylesheets/foundation/_functions.scss +156 -0
  18. data/vendor/assets/stylesheets/foundation/_settings.scss +1489 -0
  19. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +161 -0
  20. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +128 -0
  21. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +133 -0
  22. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +132 -0
  23. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +208 -0
  24. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +261 -0
  25. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +260 -0
  26. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +130 -0
  27. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +269 -0
  28. data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +51 -0
  29. data/vendor/assets/stylesheets/foundation/components/_forms.scss +607 -0
  30. data/vendor/assets/stylesheets/foundation/components/_global.scss +566 -0
  31. data/vendor/assets/stylesheets/foundation/components/_grid.scss +292 -0
  32. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +460 -0
  33. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +58 -0
  34. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +220 -0
  35. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +60 -0
  36. data/vendor/assets/stylesheets/foundation/components/_labels.scss +106 -0
  37. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +34 -0
  38. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +606 -0
  39. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +388 -0
  40. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +163 -0
  41. data/vendor/assets/stylesheets/foundation/components/_panels.scss +107 -0
  42. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +150 -0
  43. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +85 -0
  44. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +177 -0
  45. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +212 -0
  46. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +120 -0
  47. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +203 -0
  48. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +125 -0
  49. data/vendor/assets/stylesheets/foundation/components/_switches.scss +241 -0
  50. data/vendor/assets/stylesheets/foundation/components/_tables.scss +135 -0
  51. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +142 -0
  52. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +66 -0
  53. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +142 -0
  54. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +745 -0
  55. data/vendor/assets/stylesheets/foundation/components/_type.scss +525 -0
  56. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +425 -0
  57. data/vendor/assets/stylesheets/normalize.scss +424 -0
  58. metadata +163 -0
@@ -0,0 +1,51 @@
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-media-classes: $include-html-classes !default;
11
+
12
+ // We use these to control video container padding and margins
13
+ $flex-video-padding-top: rem-calc(25) !default;
14
+ $flex-video-padding-bottom: 67.5% !default;
15
+ $flex-video-margin-bottom: rem-calc(16) !default;
16
+
17
+ // We use this to control widescreen bottom padding
18
+ $flex-video-widescreen-padding-bottom: 56.34% !default;
19
+
20
+ //
21
+ // @mixins
22
+ //
23
+
24
+ @mixin flex-video-container {
25
+ height: 0;
26
+ margin-bottom: $flex-video-margin-bottom;
27
+ overflow: hidden;
28
+ padding-bottom: $flex-video-padding-bottom;
29
+ padding-top: $flex-video-padding-top;
30
+ position: relative;
31
+
32
+ &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
33
+ &.vimeo { padding-top: 0; }
34
+
35
+ iframe,
36
+ object,
37
+ embed,
38
+ video {
39
+ height: 100%;
40
+ position: absolute;
41
+ top: 0;
42
+ width: 100%;
43
+ #{$default-float}: 0;
44
+ }
45
+ }
46
+
47
+ @include exports("flex-video") {
48
+ @if $include-html-media-classes {
49
+ .flex-video { @include flex-video-container; }
50
+ }
51
+ }
@@ -0,0 +1,607 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+ @import 'buttons';
7
+
8
+ //
9
+ // @variables
10
+ //
11
+ $include-html-form-classes: $include-html-classes !default;
12
+
13
+ // We use this to set the base for lots of form spacing and positioning styles
14
+ $form-spacing: rem-calc(16) !default;
15
+
16
+ // We use these to style the labels in different ways
17
+ $form-label-pointer: pointer !default;
18
+ $form-label-font-size: rem-calc(14) !default;
19
+ $form-label-font-weight: $font-weight-normal !default;
20
+ $form-label-line-height: 1.5 !default;
21
+ $form-label-font-color: scale-color($black, $lightness: 30%) !default;
22
+ $form-label-small-transform: capitalize !default;
23
+ $form-label-bottom-margin: 0 !default;
24
+ $input-font-family: inherit !default;
25
+ $input-font-color: rgba(0,0,0,0.75) !default;
26
+ $input-placeholder-font-color: $steel !default;
27
+ $input-font-size: rem-calc(14) !default;
28
+ $input-bg-color: $white !default;
29
+ $input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
30
+ $input-border-color: scale-color($white, $lightness: -20%) !default;
31
+ $input-focus-border-color: scale-color($white, $lightness: -40%) !default;
32
+ $input-border-style: solid !default;
33
+ $input-border-width: 1px !default;
34
+ $input-border-radius: $global-radius !default;
35
+ $input-disabled-bg: $gainsboro !default;
36
+ $input-disabled-cursor: $cursor-default-value !default;
37
+ $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
38
+ $input-include-glowing-effect: false !default;
39
+
40
+ // We use these to style the fieldset border and spacing.
41
+ $fieldset-border-style: solid !default;
42
+ $fieldset-border-width: 1px !default;
43
+ $fieldset-border-color: $gainsboro !default;
44
+ $fieldset-padding: rem-calc(20) !default;
45
+ $fieldset-margin: rem-calc(18 0) !default;
46
+
47
+ // We use these to style the legends when you use them
48
+ $legend-font-weight: $font-weight-bold !default;
49
+ $legend-padding: rem-calc(0 3) !default;
50
+
51
+ // We use these to style the prefix and postfix input elements
52
+ $input-prefix-bg: scale-color($white, $lightness: -5%) !default;
53
+ $input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
54
+ $input-prefix-border-size: 1px !default;
55
+ $input-prefix-border-type: solid !default;
56
+ $input-prefix-overflow: visible !default;
57
+ $input-prefix-font-color: $oil !default;
58
+ $input-prefix-font-color-alt: $white !default;
59
+
60
+ // We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
61
+ $input-number-spinners: true !default;
62
+
63
+ // We use these to style the error states for inputs and labels
64
+ $input-error-message-padding: rem-calc(6 9 9) !default;
65
+ $input-error-message-top: -1px !default;
66
+ $input-error-message-font-size: rem-calc(12) !default;
67
+ $input-error-message-font-weight: $font-weight-normal !default;
68
+ $input-error-message-font-style: italic !default;
69
+ $input-error-message-font-color: $white !default;
70
+ $input-error-message-bg-color: $alert-color !default;
71
+ $input-error-message-font-color-alt: $oil !default;
72
+
73
+ // We use this to style the glowing effect of inputs when focused
74
+ $glowing-effect-fade-time: .45s !default;
75
+ $glowing-effect-color: $input-focus-border-color !default;
76
+
77
+ // We use this to style the transition when inputs are focused and when the glowing effect is disabled.
78
+ $input-transition-fade-time: 0.15s !default;
79
+ $input-transition-fade-timing-function: linear !default;
80
+
81
+ // Select variables
82
+ $select-bg-color: $ghost !default;
83
+ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
84
+
85
+ //
86
+ // @MIXINS
87
+ //
88
+
89
+ // We use this mixin to give us form styles for rows inside of forms
90
+ @mixin form-row-base {
91
+ .row { margin: 0 ((-$form-spacing) / 2);
92
+
93
+ .column,
94
+ .columns { padding: 0 ($form-spacing / 2); }
95
+
96
+ // Use this to collapse the margins of a form row
97
+ &.collapse { margin: 0;
98
+
99
+ .column,
100
+ .columns { padding: 0; }
101
+ input {
102
+ @include side-radius($opposite-direction, 0);
103
+ }
104
+
105
+ }
106
+ }
107
+ input.column,
108
+ input.columns,
109
+ textarea.column,
110
+ textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
111
+ }
112
+
113
+ // @MIXIN
114
+ //
115
+ // We use this mixin to give all basic form elements their style
116
+ @mixin form-element {
117
+ background-color: $input-bg-color;
118
+ border: {
119
+ style: $input-border-style;
120
+ width: $input-border-width;
121
+ color: $input-border-color;
122
+ }
123
+ box-shadow: $input-box-shadow;
124
+ color: $input-font-color;
125
+ display: block;
126
+ font-family: $input-font-family;
127
+ font-size: $input-font-size;
128
+ height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
129
+ margin: 0 0 $form-spacing 0;
130
+ padding: $form-spacing / 2;
131
+ width: 100%;
132
+ @include box-sizing(border-box);
133
+ @if $input-include-glowing-effect {
134
+ @include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
135
+ }
136
+ // Basic focus styles
137
+ &:focus {
138
+ background: $input-focus-bg-color;
139
+ border-color: $input-focus-border-color;
140
+ outline: none;
141
+ }
142
+ // Disabled Styles
143
+ &:disabled {
144
+ background-color: $input-disabled-bg;
145
+ cursor: $input-disabled-cursor;
146
+ }
147
+
148
+ // Disabled background input background color
149
+ &[disabled],
150
+ &[readonly],
151
+ fieldset[disabled] & {
152
+ background-color: $input-disabled-bg;
153
+ cursor: $input-disabled-cursor;
154
+ }
155
+ }
156
+
157
+ // @MIXIN
158
+ //
159
+ // We use this mixin to create form labels
160
+ //
161
+ // $alignment - Alignment options. Default: false. Options: [right, inline, false]
162
+ // $base-style - Control whether or not the base styles come through. Default: true.
163
+ @mixin form-label($alignment:false, $base-style:true) {
164
+
165
+ // Control whether or not the base styles come through.
166
+ @if $base-style {
167
+ color: $form-label-font-color;
168
+ cursor: $form-label-pointer;
169
+ display: block;
170
+ font-size: $form-label-font-size;
171
+ font-weight: $form-label-font-weight;
172
+ line-height: $form-label-line-height;
173
+ margin-bottom: $form-label-bottom-margin;
174
+ }
175
+
176
+ // Alignment options
177
+ @if $alignment == right {
178
+ float: none !important;
179
+ text-align: right;
180
+ }
181
+ @else if $alignment == inline {
182
+ margin: 0 0 $form-spacing 0;
183
+ padding: $form-spacing / 2 + rem-calc($input-border-width) 0;
184
+ }
185
+ }
186
+
187
+ // We use this mixin to create postfix/prefix form Labels
188
+ @mixin prefix-postfix-base {
189
+ border-style: $input-prefix-border-type;
190
+ border-width: $input-prefix-border-size;
191
+ display: block;
192
+ font-size: $form-label-font-size;
193
+ height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
194
+ line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
195
+ overflow: $input-prefix-overflow;
196
+ padding-bottom: 0;
197
+ padding-top: 0;
198
+ position: relative;
199
+ text-align: center;
200
+ width: 100%;
201
+ z-index: 2;
202
+ }
203
+
204
+ // @MIXIN
205
+ //
206
+ // We use this mixin to create prefix label styles
207
+ // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
208
+ // $is-button - Toggle position settings if prefix is a button. Default:false
209
+ //
210
+ @mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
211
+
212
+ @if $bg {
213
+ $bg-lightness: lightness($bg);
214
+ background: $bg;
215
+ border-#{$opposite-direction}: none;
216
+
217
+ // Control the font color based on background brightness
218
+ @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
219
+ @else { color: $input-prefix-font-color-alt; }
220
+ }
221
+
222
+ @if $border {
223
+ border-color: $border;
224
+ }
225
+
226
+ @if $is-button {
227
+ border: none;
228
+ padding-#{$default-float}: 0;
229
+ padding-#{$opposite-direction}: 0;
230
+ padding-bottom: 0;
231
+ padding-top: 0;
232
+ text-align: center;
233
+ }
234
+
235
+ }
236
+
237
+ // @MIXIN
238
+ //
239
+ // We use this mixin to create postfix label styles
240
+ // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
241
+ // $is-button - Toggle position settings if prefix is a button. Default: false
242
+ @mixin postfix($bg:$input-prefix-bg, $border-left-hidden:true, $border:$input-prefix-border-color, $is-button:false) {
243
+
244
+ @if $bg {
245
+ $bg-lightness: lightness($bg);
246
+ background: $bg;
247
+ @if $border-left-hidden {
248
+ border-#{$default-float}: none;
249
+ }
250
+
251
+ // Control the font color based on background brightness
252
+ @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
253
+ @else { color: $input-prefix-font-color-alt; }
254
+ }
255
+
256
+ @if $border {
257
+ border-color: $border;
258
+ }
259
+
260
+ @if $is-button {
261
+ border: none;
262
+ padding-#{$default-float}: 0;
263
+ padding-#{$opposite-direction}: 0;
264
+ padding-bottom: 0;
265
+ padding-top: 0;
266
+ text-align: center;
267
+ }
268
+
269
+ }
270
+
271
+ // We use this mixin to style fieldsets
272
+ @mixin fieldset {
273
+ border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
274
+ margin: $fieldset-margin;
275
+ padding: $fieldset-padding;
276
+
277
+ // and legend styles
278
+ legend {
279
+ font-weight: $legend-font-weight;
280
+ margin: 0;
281
+ margin-#{$default-float}: rem-calc(-3);
282
+ padding: $legend-padding;
283
+ }
284
+ }
285
+
286
+ // @MIXIN
287
+ //
288
+ // We use this mixin to control border and background color of error inputs
289
+ // $color - Default: $alert-color (found in settings file)
290
+ @mixin form-error-color($color:$alert-color) {
291
+ background-color: rgba($color, .1);
292
+ border-color: $color;
293
+
294
+ // Go back to normal on focus
295
+ &:focus {
296
+ background: $input-focus-bg-color;
297
+ border-color: $input-focus-border-color;
298
+ }
299
+ }
300
+
301
+ // @MIXIN
302
+ //
303
+ // We use this simple mixin to style labels for error inputs
304
+ // $color - Default:$alert-color. Found in settings file
305
+ @mixin form-label-error-color($color:$alert-color) { color: $color; }
306
+
307
+ // @MIXIN
308
+ //
309
+ // We use this mixin to create error message styles
310
+ // $bg - Default: $alert-color (Found in settings file)
311
+ @mixin form-error-message($bg:$input-error-message-bg-color) {
312
+ display: block;
313
+ font-size: $input-error-message-font-size;
314
+ font-style: $input-error-message-font-style;
315
+ font-weight: $input-error-message-font-weight;
316
+ margin-bottom: $form-spacing;
317
+ margin-top: $input-error-message-top;
318
+ padding: $input-error-message-padding;
319
+
320
+ // We can control the text color based on the brightness of the background.
321
+ $bg-lightness: lightness($bg);
322
+ background: $bg;
323
+ @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
324
+ @else { color: $input-error-message-font-color-alt; }
325
+ }
326
+
327
+ // We use this mixin to style select elements
328
+ @mixin form-select {
329
+ -webkit-appearance: none !important;
330
+ -moz-appearance: none !important;
331
+ background-color: $select-bg-color;
332
+ border-radius: 0;
333
+
334
+ // Hide the dropdown arrow shown in newer IE versions
335
+ &::-ms-expand {
336
+ display: none;
337
+ }
338
+
339
+ // The custom arrow has some fake horizontal padding so we can align it
340
+ // from the right side of the element without relying on CSS3
341
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+');
342
+
343
+ // We can safely use leftmost and rightmost now
344
+ background-position: if($text-direction == 'rtl', 0%, 100%) center;
345
+
346
+ background-repeat: no-repeat;
347
+ border: {
348
+ style: $input-border-style;
349
+ width: $input-border-width;
350
+ color: $input-border-color;
351
+ }
352
+ color: $input-font-color;
353
+ font-family: $input-font-family;
354
+ font-size: $input-font-size;
355
+ line-height: normal;
356
+ padding: ($form-spacing / 2);
357
+ @include radius(0);
358
+ &.radius { @include radius($global-radius); }
359
+ &:focus {
360
+ background-color: $select-hover-bg-color;
361
+ border-color: $input-focus-border-color;
362
+ }
363
+ // Disabled Styles
364
+ &:disabled {
365
+ background-color: $input-disabled-bg;
366
+ cursor: $input-disabled-cursor;
367
+ }
368
+ }
369
+
370
+ // We use this mixin to turn on/off HTML5 number spinners
371
+ @mixin html5number($browser, $on: true) {
372
+ @if $on == false {
373
+ @if $browser == webkit {
374
+ -webkit-appearance: none;
375
+ margin: 0;
376
+ } @else if $browser == moz {
377
+ -moz-appearance: textfield;
378
+ }
379
+ }
380
+ }
381
+
382
+ @include exports("form") {
383
+ @if $include-html-form-classes {
384
+ /* Standard Forms */
385
+ form { margin: 0 0 $form-spacing; }
386
+
387
+ /* Using forms within rows, we need to set some defaults */
388
+ form .row { @include form-row-base; }
389
+
390
+ /* Label Styles */
391
+ label { @include form-label;
392
+ &.right { @include form-label(right, false); }
393
+ &.inline { @include form-label(inline, false); }
394
+ /* Styles for required inputs */
395
+ small {
396
+ text-transform: $form-label-small-transform;
397
+ color: scale-color($form-label-font-color, $lightness: 15%);
398
+ }
399
+ }
400
+
401
+ /* Attach elements to the beginning or end of an input */
402
+ .prefix,
403
+ .postfix { @include prefix-postfix-base; }
404
+
405
+ /* Adjust padding, alignment and radius if pre/post element is a button */
406
+ .postfix.button { @include button-size(false, false); @include postfix(false, false, false, true); }
407
+ .prefix.button { @include button-size(false, false); @include prefix(false, false, true); }
408
+
409
+ .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
410
+ .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
411
+ .prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); }
412
+ .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
413
+
414
+ /* Separate prefix and postfix styles when on span or label so buttons keep their own */
415
+ span.prefix, label.prefix { @include prefix(); }
416
+ span.postfix, label.postfix { @include postfix(); }
417
+
418
+ /* We use this to get basic styling on all basic form elements */
419
+ input:not([type]), #{text-inputs(all, 'input')} {
420
+ -webkit-appearance: none;
421
+ -moz-appearance: none;
422
+ border-radius: 0;
423
+ @include form-element;
424
+ @if $input-include-glowing-effect == false {
425
+ -webkit-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
426
+ -moz-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
427
+ -ms-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
428
+ -o-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
429
+ transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
430
+ }
431
+ &.radius {
432
+ @include radius($input-border-radius);
433
+ }
434
+ }
435
+
436
+ form {
437
+ .row {
438
+ .prefix-radius.row.collapse {
439
+ input,
440
+ textarea,
441
+ select,
442
+ button { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
443
+ .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
444
+ }
445
+ .postfix-radius.row.collapse {
446
+ input,
447
+ textarea,
448
+ select,
449
+ button { @include radius(0); @include side-radius($default-float, $button-radius); }
450
+ .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
451
+ }
452
+ .prefix-round.row.collapse {
453
+ input,
454
+ textarea,
455
+ select,
456
+ button { @include radius(0); @include side-radius($opposite-direction, $button-round); }
457
+ .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
458
+ }
459
+ .postfix-round.row.collapse {
460
+ input,
461
+ textarea,
462
+ select,
463
+ button { @include radius(0); @include side-radius($default-float, $button-round); }
464
+ .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
465
+ }
466
+ }
467
+ }
468
+
469
+ input[type="submit"] {
470
+ -webkit-appearance: none;
471
+ -moz-appearance: none;
472
+ border-radius: 0;
473
+ }
474
+
475
+ /* Respect enforced amount of rows for textarea */
476
+ textarea[rows] {
477
+ height: auto;
478
+ }
479
+
480
+ /* Not allow resize out of parent */
481
+ textarea {
482
+ max-width: 100%;
483
+ }
484
+
485
+ // style placeholder text cross browser
486
+ ::-webkit-input-placeholder {
487
+ color: $input-placeholder-font-color;
488
+ }
489
+
490
+ :-moz-placeholder { /* Firefox 18- */
491
+ color: $input-placeholder-font-color;
492
+ }
493
+
494
+ ::-moz-placeholder { /* Firefox 19+ */
495
+ color: $input-placeholder-font-color;
496
+ }
497
+
498
+ :-ms-input-placeholder {
499
+ color: $input-placeholder-font-color;
500
+ }
501
+
502
+
503
+ /* Add height value for select elements to match text input height */
504
+ select {
505
+ @include form-select;
506
+ height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
507
+ &[multiple] {
508
+ height: auto;
509
+ }
510
+ }
511
+
512
+ /* Adjust margin for form elements below */
513
+ input[type="file"],
514
+ input[type="checkbox"],
515
+ input[type="radio"],
516
+ select {
517
+ margin: 0 0 $form-spacing 0;
518
+ }
519
+
520
+ input[type="checkbox"] + label,
521
+ input[type="radio"] + label {
522
+ display: inline-block;
523
+ margin-#{$default-float}: $form-spacing * .5;
524
+ margin-#{$opposite-direction}: $form-spacing;
525
+ margin-bottom: 0;
526
+ vertical-align: baseline;
527
+ }
528
+
529
+ /* Normalize file input width */
530
+ input[type="file"] {
531
+ width:100%;
532
+ }
533
+
534
+ /* HTML5 Number spinners settings */
535
+ input[type=number] {
536
+ @include html5number(moz, $input-number-spinners)
537
+ }
538
+ input[type="number"]::-webkit-inner-spin-button,
539
+ input[type="number"]::-webkit-outer-spin-button {
540
+ @include html5number(webkit, $input-number-spinners);
541
+ }
542
+
543
+ /* We add basic fieldset styling */
544
+ fieldset {
545
+ @include fieldset;
546
+ }
547
+
548
+ /* Error Handling */
549
+
550
+ #{data('abide')} {
551
+ .error small.error, .error span.error, span.error, small.error {
552
+ @include form-error-message;
553
+ }
554
+ span.error, small.error { display: none; }
555
+ }
556
+
557
+ span.error, small.error {
558
+ @include form-error-message;
559
+ }
560
+
561
+ .error {
562
+ input,
563
+ textarea,
564
+ select {
565
+ margin-bottom: 0;
566
+ }
567
+
568
+ input[type="checkbox"],
569
+ input[type="radio"] {
570
+ margin-bottom: $form-spacing
571
+ }
572
+
573
+ label,
574
+ label.error {
575
+ @include form-label-error-color;
576
+ }
577
+
578
+ small.error {
579
+ @include form-error-message;
580
+ }
581
+
582
+ > label {
583
+ > small {
584
+ background: transparent;
585
+ color: scale-color($form-label-font-color, $lightness: 15%);
586
+ display: inline;
587
+ font-size: 60%;
588
+ font-style: normal;
589
+ margin: 0;
590
+ padding: 0;
591
+ text-transform: $form-label-small-transform;
592
+ }
593
+ }
594
+
595
+ span.error-message {
596
+ display: block;
597
+ }
598
+ }
599
+
600
+ input.error,
601
+ textarea.error,
602
+ select.error {
603
+ margin-bottom: 0;
604
+ }
605
+ label.error { @include form-label-error-color; }
606
+ }
607
+ }