foundation-scss 6.3.1.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 (90) hide show
  1. checksums.yaml +7 -0
  2. data/_vendor/normalize-scss/sass/_normalize.scss +3 -0
  3. data/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
  4. data/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
  5. data/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
  6. data/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
  7. data/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
  8. data/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
  9. data/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
  10. data/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
  11. data/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
  12. data/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
  13. data/foundation-scss.gemspec +9 -0
  14. data/lib/foundation/scss/in/sass_path.rb +6 -0
  15. data/scss/_global.scss +219 -0
  16. data/scss/components/_accordion-menu.scss +36 -0
  17. data/scss/components/_accordion.scss +150 -0
  18. data/scss/components/_badge.scss +63 -0
  19. data/scss/components/_breadcrumbs.scss +100 -0
  20. data/scss/components/_button-group.scss +253 -0
  21. data/scss/components/_button.scss +332 -0
  22. data/scss/components/_callout.scss +106 -0
  23. data/scss/components/_card.scss +121 -0
  24. data/scss/components/_close-button.scss +102 -0
  25. data/scss/components/_drilldown.scss +93 -0
  26. data/scss/components/_dropdown-menu.scss +226 -0
  27. data/scss/components/_dropdown.scss +72 -0
  28. data/scss/components/_flex-video.scss +1 -0
  29. data/scss/components/_flex.scss +34 -0
  30. data/scss/components/_float.scss +27 -0
  31. data/scss/components/_label.scss +64 -0
  32. data/scss/components/_media-object.scss +114 -0
  33. data/scss/components/_menu-icon.scss +9 -0
  34. data/scss/components/_menu.scss +376 -0
  35. data/scss/components/_off-canvas.scss +329 -0
  36. data/scss/components/_orbit.scss +196 -0
  37. data/scss/components/_pagination.scss +193 -0
  38. data/scss/components/_progress-bar.scss +64 -0
  39. data/scss/components/_responsive-embed.scss +70 -0
  40. data/scss/components/_reveal.scss +178 -0
  41. data/scss/components/_slider.scss +138 -0
  42. data/scss/components/_sticky.scss +38 -0
  43. data/scss/components/_switch.scss +247 -0
  44. data/scss/components/_table.scss +329 -0
  45. data/scss/components/_tabs.scss +196 -0
  46. data/scss/components/_thumbnail.scss +67 -0
  47. data/scss/components/_title-bar.scss +84 -0
  48. data/scss/components/_tooltip.scss +107 -0
  49. data/scss/components/_top-bar.scss +173 -0
  50. data/scss/components/_visibility.scss +132 -0
  51. data/scss/forms/_checkbox.scss +41 -0
  52. data/scss/forms/_error.scss +88 -0
  53. data/scss/forms/_fieldset.scss +54 -0
  54. data/scss/forms/_forms.scss +34 -0
  55. data/scss/forms/_help-text.scss +30 -0
  56. data/scss/forms/_input-group.scss +135 -0
  57. data/scss/forms/_label.scss +50 -0
  58. data/scss/forms/_meter.scss +110 -0
  59. data/scss/forms/_progress.scss +94 -0
  60. data/scss/forms/_range.scss +149 -0
  61. data/scss/forms/_select.scss +85 -0
  62. data/scss/forms/_text.scss +170 -0
  63. data/scss/foundation.scss +118 -0
  64. data/scss/grid/_classes.scss +176 -0
  65. data/scss/grid/_column.scss +112 -0
  66. data/scss/grid/_flex-grid.scss +312 -0
  67. data/scss/grid/_grid.scss +48 -0
  68. data/scss/grid/_gutter.scss +82 -0
  69. data/scss/grid/_layout.scss +76 -0
  70. data/scss/grid/_position.scss +76 -0
  71. data/scss/grid/_row.scss +99 -0
  72. data/scss/grid/_size.scss +24 -0
  73. data/scss/settings/_settings.scss +620 -0
  74. data/scss/typography/_alignment.scss +22 -0
  75. data/scss/typography/_base.scss +509 -0
  76. data/scss/typography/_helpers.scss +78 -0
  77. data/scss/typography/_print.scss +86 -0
  78. data/scss/typography/_typography.scss +26 -0
  79. data/scss/util/_breakpoint.scss +281 -0
  80. data/scss/util/_color.scss +126 -0
  81. data/scss/util/_direction.scss +31 -0
  82. data/scss/util/_flex.scss +85 -0
  83. data/scss/util/_math.scss +72 -0
  84. data/scss/util/_mixins.scss +276 -0
  85. data/scss/util/_selector.scss +41 -0
  86. data/scss/util/_typography.scss +26 -0
  87. data/scss/util/_unit.scss +152 -0
  88. data/scss/util/_util.scss +14 -0
  89. data/scss/util/_value.scss +160 -0
  90. metadata +144 -0
@@ -0,0 +1,332 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group button
7
+ ////
8
+
9
+ /// Padding inside buttons.
10
+ /// @type List
11
+ $button-padding: 0.85em 1em !default;
12
+
13
+ /// Margin around buttons.
14
+ /// @type List
15
+ $button-margin: 0 0 $global-margin 0 !default;
16
+
17
+ /// Default fill for buttons. Can either be `solid` or `hollow`.
18
+ /// @type Keyword
19
+ $button-fill: solid !default;
20
+
21
+ /// Default background color for buttons.
22
+ /// @type Color
23
+ $button-background: $primary-color !default;
24
+
25
+ /// Background color on hover for buttons.
26
+ /// @type Color
27
+ $button-background-hover: scale-color($button-background, $lightness: -15%) !default;
28
+
29
+ /// Font color for buttons.
30
+ /// @type List
31
+ $button-color: $white !default;
32
+
33
+ /// Alternative font color for buttons.
34
+ /// @type List
35
+ $button-color-alt: $black !default;
36
+
37
+ /// Border radius for buttons, defaulted to global-radius.
38
+ /// @type Number
39
+ $button-radius: $global-radius !default;
40
+
41
+ /// Border width for hollow outline buttons
42
+ /// @type Number
43
+ $button-hollow-border-width: 1px !default;
44
+
45
+ /// Sizes for buttons.
46
+ /// @type Map
47
+ $button-sizes: (
48
+ tiny: 0.6rem,
49
+ small: 0.75rem,
50
+ default: 0.9rem,
51
+ large: 1.25rem,
52
+ ) !default;
53
+
54
+ /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
55
+ /// @type Map
56
+ $button-palette: $foundation-palette !default;
57
+
58
+ /// opacity for a disabled button.
59
+ /// @type List
60
+ $button-opacity-disabled: 0.25 !default;
61
+
62
+ /// Background color lightness on hover for buttons.
63
+ /// @type Number
64
+ $button-background-hover-lightness: -20% !default;
65
+
66
+ /// Color lightness on hover for hollow buttons.
67
+ /// @type Number
68
+ $button-hollow-hover-lightness: -50% !default;
69
+
70
+ // Internal: flip from margin-right to margin-left for defaults
71
+ @if $global-text-direction == 'rtl' {
72
+ $button-margin: 0 0 $global-margin $global-margin !default;
73
+ }
74
+
75
+ /// transitions for buttons.
76
+ /// @type List
77
+ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
78
+
79
+ // TODO: Document button-base() mixin
80
+ @mixin button-base {
81
+ @include disable-mouse-outline;
82
+ display: inline-block;
83
+ vertical-align: middle;
84
+ margin: $button-margin;
85
+
86
+ @if (type-of($button-padding) == 'map') {
87
+ @each $size, $padding in $button-padding {
88
+ @include breakpoint($size) {
89
+ padding: $padding;
90
+ }
91
+ }
92
+ }
93
+ @else {
94
+ padding: $button-padding;
95
+ }
96
+
97
+ -webkit-appearance: none;
98
+ border: 1px solid transparent;
99
+ border-radius: $button-radius;
100
+ transition: $button-transition;
101
+
102
+ font-size: map-get($button-sizes, default);
103
+ line-height: 1;
104
+ text-align: center;
105
+ cursor: pointer;
106
+ }
107
+
108
+ /// Expands a button to make it full-width.
109
+ /// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.
110
+ @mixin button-expand($expand: true) {
111
+ @if $expand {
112
+ display: block;
113
+ width: 100%;
114
+ margin-right: 0;
115
+ margin-left: 0;
116
+ }
117
+ @else {
118
+ display: inline-block;
119
+ width: auto;
120
+ margin: $button-margin;
121
+ }
122
+ }
123
+
124
+ /// Sets the visual style of a button.
125
+ /// @param {Color} $background [$button-background] - Background color of the button.
126
+ /// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
127
+ /// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
128
+ @mixin button-style(
129
+ $background: $button-background,
130
+ $background-hover: $button-background-hover,
131
+ $color: $button-color,
132
+ $background-hover-lightness: $button-background-hover-lightness
133
+ ) {
134
+ @if $color == auto {
135
+ $color: color-pick-contrast($background, ($button-color, $button-color-alt));
136
+ }
137
+
138
+ @if $background-hover == auto {
139
+ $background-hover: scale-color($background, $lightness: $background-hover-lightness);
140
+ }
141
+
142
+ background-color: $background;
143
+ color: $color;
144
+
145
+ &:hover, &:focus {
146
+ background-color: $background-hover;
147
+ color: $color;
148
+ }
149
+ }
150
+
151
+ /// Removes background fill on hover and focus for hollow buttons.
152
+ @mixin button-hollow {
153
+ &,
154
+ &:hover, &:focus {
155
+ background-color: transparent;
156
+ }
157
+ }
158
+
159
+ @mixin button-hollow-style(
160
+ $color: $primary-color,
161
+ $hover-lightness: $button-hollow-hover-lightness,
162
+ $border-width: $button-hollow-border-width
163
+ ) {
164
+ $color-hover: scale-color($color, $lightness: $hover-lightness);
165
+
166
+ border: $border-width solid $color;
167
+ color: $color;
168
+
169
+ &:hover, &:focus {
170
+ border-color: $color-hover;
171
+ color: $color-hover;
172
+ }
173
+ }
174
+
175
+ /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
176
+ /// @param [Color] $background [$primary-color] - Background color of the disabled button.
177
+ /// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
178
+ @mixin button-disabled(
179
+ $background: $primary-color,
180
+ $color: $button-color
181
+ ) {
182
+ @if $color == auto {
183
+ $color: color-pick-contrast($background, ($button-color, $button-color-alt));
184
+ }
185
+
186
+ opacity: $button-opacity-disabled;
187
+ cursor: not-allowed;
188
+
189
+ &, &:hover, &:focus {
190
+ background-color: $background;
191
+ color: $color;
192
+ }
193
+ }
194
+
195
+ /// Adds a dropdown arrow to a button.
196
+ /// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
197
+ /// @param {Color} $color [white] - Color of the arrow.
198
+ /// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.
199
+ @mixin button-dropdown(
200
+ $size: 0.4em,
201
+ $color: $white,
202
+ $offset: get-side($button-padding, right)
203
+ ) {
204
+ &::after {
205
+ @include css-triangle($size, $color, down);
206
+ position: relative;
207
+ top: 0.4em; // Aligns the arrow with the text of the button
208
+
209
+ display: inline-block;
210
+ float: #{$global-right};
211
+ margin-#{$global-left}: get-side($button-padding, right);
212
+ }
213
+ }
214
+
215
+ /// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
216
+ /// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.
217
+ /// @param {Color} $background [$button-background] - Background color of the button.
218
+ /// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
219
+ /// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
220
+ /// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.
221
+ @mixin button(
222
+ $expand: false,
223
+ $background: $button-background,
224
+ $background-hover: $button-background-hover,
225
+ $color: $button-color,
226
+ $style: $button-fill
227
+ ) {
228
+ @include button-base;
229
+
230
+ @if $style == solid {
231
+ @include button-style($background, $background-hover, $color);
232
+ }
233
+ @else if $style == hollow {
234
+ @include button-hollow;
235
+ @include button-hollow-style($background);
236
+ }
237
+
238
+ @if $expand {
239
+ @include button-expand;
240
+ }
241
+ }
242
+
243
+ @mixin foundation-button {
244
+ .button {
245
+ @include button;
246
+
247
+ // Sizes
248
+ @each $size, $value in map-remove($button-sizes, default) {
249
+ &.#{$size} {
250
+ font-size: $value;
251
+ }
252
+ }
253
+
254
+ &.expanded { @include button-expand; }
255
+
256
+ // Colors
257
+ @each $name, $color in $button-palette {
258
+ @if $button-fill != hollow {
259
+ &.#{$name} {
260
+ @include button-style($color, auto, auto);
261
+ }
262
+ }
263
+ @else {
264
+ &.#{$name} {
265
+ @include button-hollow-style($color);
266
+ }
267
+
268
+ &.#{$name}.dropdown::after {
269
+ border-top-color: $color;
270
+ }
271
+ }
272
+ }
273
+
274
+ // Hollow style
275
+ @if $button-fill != hollow {
276
+ &.hollow {
277
+ @include button-hollow;
278
+ @include button-hollow-style;
279
+
280
+ @each $name, $color in $button-palette {
281
+ &.#{$name} {
282
+ @include button-hollow-style($color);
283
+ }
284
+ }
285
+ }
286
+ }
287
+
288
+ // Disabled style
289
+ &.disabled,
290
+ &[disabled] {
291
+ @include button-disabled;
292
+
293
+ @each $name, $color in $button-palette {
294
+ &.#{$name} {
295
+ @include button-disabled($color, auto);
296
+ }
297
+ }
298
+ }
299
+
300
+ // Dropdown arrow
301
+ &.dropdown {
302
+ @include button-dropdown;
303
+
304
+ @if $button-fill == hollow {
305
+ &::after {
306
+ border-top-color: $button-background;
307
+ }
308
+ }
309
+
310
+ &.hollow {
311
+ &::after {
312
+ border-top-color: $button-background;
313
+ }
314
+
315
+ @each $name, $color in $button-palette {
316
+ &.#{$name} {
317
+ &::after {
318
+ border-top-color: $color;
319
+ }
320
+ }
321
+ }
322
+ }
323
+ }
324
+
325
+ // Button with dropdown arrow only
326
+ &.arrow-only::after {
327
+ top: -0.1em;
328
+ float: none;
329
+ margin-#{$global-left}: 0;
330
+ }
331
+ }
332
+ }
@@ -0,0 +1,106 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group callout
7
+ ////
8
+
9
+ /// Default background color.
10
+ /// @type Color
11
+ $callout-background: $white !default;
12
+
13
+ /// Default fade value for callout backgrounds.
14
+ /// @type Number
15
+ $callout-background-fade: 85% !default;
16
+
17
+ /// Default border style for callouts.
18
+ /// @type List
19
+ $callout-border: 1px solid rgba($black, 0.25) !default;
20
+
21
+ /// Default bottom margin for callouts.
22
+ /// @type Number
23
+ $callout-margin: 0 0 1rem 0 !default;
24
+
25
+ /// Default inner padding for callouts.
26
+ /// @type Number
27
+ $callout-padding: 1rem !default;
28
+
29
+ /// Default font color for callouts.
30
+ /// @type Color
31
+ $callout-font-color: $body-font-color !default;
32
+
33
+ /// Default font color for callouts, if the callout has a dark background.
34
+ /// @type Color
35
+ $callout-font-color-alt: $body-background !default;
36
+
37
+ /// Default border radius for callouts.
38
+ /// @type Color
39
+ $callout-radius: $global-radius !default;
40
+
41
+ /// Amount to tint links used within colored panels. Set to `false` to disable this feature.
42
+ /// @type Number | Boolean
43
+ $callout-link-tint: 30% !default;
44
+
45
+ /// Adds basic styles for a callout, including padding and margin.
46
+ @mixin callout-base() {
47
+ position: relative;
48
+ margin: $callout-margin;
49
+ padding: $callout-padding;
50
+
51
+ border: $callout-border;
52
+ border-radius: $callout-radius;
53
+
54
+ // Respect the padding, fool.
55
+ > :first-child {
56
+ margin-top: 0;
57
+ }
58
+
59
+ > :last-child {
60
+ margin-bottom: 0;
61
+ }
62
+ }
63
+
64
+ /// Generate quick styles for a callout using a single color as a baseline.
65
+ /// @param {Color} $color [$callout-background] - Color to use.
66
+ @mixin callout-style($color: $callout-background) {
67
+ $background: scale-color($color, $lightness: $callout-background-fade);
68
+
69
+ background-color: $background;
70
+ color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt));
71
+ }
72
+
73
+ @mixin callout-size($padding) {
74
+ padding-top: $padding;
75
+ padding-right: $padding;
76
+ padding-bottom: $padding;
77
+ padding-left: $padding;
78
+ }
79
+
80
+
81
+ /// Adds styles for a callout.
82
+ /// @param {Color} $color [$callout-background] - Color to use.
83
+ @mixin callout($color: $callout-background) {
84
+ @include callout-base;
85
+ @include callout-style($color);
86
+ }
87
+
88
+ @mixin foundation-callout {
89
+ .callout {
90
+ @include callout;
91
+
92
+ @each $name, $color in $foundation-palette {
93
+ &.#{$name} {
94
+ @include callout-style($color);
95
+ }
96
+ }
97
+
98
+ &.small {
99
+ @include callout-size(0.5rem);
100
+ }
101
+
102
+ &.large {
103
+ @include callout-size(3rem);
104
+ }
105
+ }
106
+ }
@@ -0,0 +1,121 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group card
7
+ ////
8
+
9
+ /// Defualt background color.
10
+ /// @type Color
11
+ $card-background: $white !default;
12
+
13
+ /// Default font color for cards.
14
+ /// @type Color
15
+ $card-font-color: $body-font-color !default;
16
+
17
+ /// Default background.
18
+ /// @type Color
19
+ $card-divider-background: $light-gray !default;
20
+
21
+ /// Default border style.
22
+ /// @type List
23
+ $card-border: 1px solid $light-gray !default;
24
+
25
+ /// Default card shadow.
26
+ /// @type List
27
+ $card-shadow: none !default;
28
+
29
+ /// Default border radius.
30
+ /// @type List
31
+ $card-border-radius: $global-radius !default;
32
+
33
+ /// Default padding.
34
+ /// @type Number
35
+ $card-padding: $global-padding !default;
36
+
37
+ /// Default bottom margin.
38
+ /// @type number
39
+ $card-margin: $global-margin !default;
40
+
41
+ /// Adds styles for a card container.
42
+ /// @param {Color} $background - Background color of the card.
43
+ /// @param {Color} $color - font color of the card.
44
+ /// @param {Number} $margin - Bottom margin of the card.
45
+ /// @param {List} $border - Border around the card.
46
+ /// @param {List} $radius - border radius of the card.
47
+ /// @param {List} $shadow - box shadow of the card.
48
+ @mixin card-container(
49
+ $background: $card-background,
50
+ $color: $card-font-color,
51
+ $margin: $card-margin,
52
+ $border: $card-border,
53
+ $radius: $card-border-radius,
54
+ $shadow: $card-shadow
55
+ ) {
56
+ @if $global-flexbox {
57
+ display: flex;
58
+ flex-direction: column;
59
+ }
60
+
61
+ margin-bottom: $margin;
62
+
63
+ border: $border;
64
+ border-radius: $radius;
65
+
66
+ background: $background;
67
+ box-shadow: $shadow;
68
+
69
+ overflow: hidden;
70
+ color: $color;
71
+
72
+ & > :last-child {
73
+ margin-bottom: 0;
74
+ }
75
+ }
76
+
77
+ /// Adds styles for a card divider.
78
+ @mixin card-divider(
79
+ $background: $card-divider-background,
80
+ $padding: $card-padding
81
+ ) {
82
+ @if $global-flexbox {
83
+ flex: 0 1 auto;
84
+ }
85
+
86
+ padding: $padding;
87
+ background: $background;
88
+
89
+ & > :last-child {
90
+ margin-bottom: 0;
91
+ }
92
+ }
93
+
94
+ /// Adds styles for a card section.
95
+ @mixin card-section(
96
+ $padding: $card-padding
97
+ ) {
98
+ @if $global-flexbox {
99
+ flex: 1 0 auto;
100
+ }
101
+
102
+ padding: $padding;
103
+
104
+ & > :last-child {
105
+ margin-bottom: 0;
106
+ }
107
+ }
108
+
109
+ @mixin foundation-card {
110
+ .card {
111
+ @include card-container;
112
+ }
113
+
114
+ .card-divider {
115
+ @include card-divider;
116
+ }
117
+
118
+ .card-section {
119
+ @include card-section;
120
+ }
121
+ }