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 @@
1
+ @import 'responsive-embed';
@@ -0,0 +1,34 @@
1
+ @mixin foundation-flex-classes {
2
+ // Horizontal alignment using justify-content
3
+ @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
4
+ .align-#{$hdir} {
5
+ @include flex-align($x: $hdir);
6
+ }
7
+ }
8
+
9
+ // Vertical alignment using align-items and align-self
10
+ @each $vdir, $prop in $-zf-flex-align {
11
+ .align-#{$vdir} {
12
+ @include flex-align($y: $vdir);
13
+ }
14
+
15
+ .align-self-#{$vdir} {
16
+ @include flex-align-self($y: $vdir);
17
+ }
18
+ }
19
+
20
+ // Central alignment of content
21
+ .align-center-middle {
22
+ @include flex-align($x: center, $y: middle);
23
+ align-content: center;
24
+ }
25
+
26
+ // Source ordering
27
+ @include -zf-each-breakpoint {
28
+ @for $i from 1 through 6 {
29
+ .#{$-zf-size}-order-#{$i} {
30
+ @include flex-order($i);
31
+ }
32
+ }
33
+ }
34
+ }
@@ -0,0 +1,27 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group float
7
+ ////
8
+
9
+ @mixin foundation-float-classes {
10
+ .float-left {
11
+ float: left !important;
12
+ }
13
+
14
+ .float-right {
15
+ float: right !important;
16
+ }
17
+
18
+ .float-center {
19
+ display: block;
20
+ margin-right: auto;
21
+ margin-left: auto;
22
+ }
23
+
24
+ .clearfix {
25
+ @include clearfix;
26
+ }
27
+ }
@@ -0,0 +1,64 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group label
7
+ ////
8
+
9
+ /// Default background color for labels.
10
+ /// @type Color
11
+ $label-background: $primary-color !default;
12
+
13
+ /// Default text color for labels.
14
+ /// @type Color
15
+ $label-color: $white !default;
16
+
17
+ /// Alternate text color for labels.
18
+ /// @type Color
19
+ $label-color-alt: $black !default;
20
+
21
+ /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
22
+ /// @type Map
23
+ $label-palette: $foundation-palette !default;
24
+
25
+ /// Default font size for labels.
26
+ /// @type Number
27
+ $label-font-size: 0.8rem !default;
28
+
29
+ /// Default padding inside labels.
30
+ /// @type Number
31
+ $label-padding: 0.33333rem 0.5rem !default;
32
+
33
+ /// Default radius of labels.
34
+ /// @type Number
35
+ $label-radius: $global-radius !default;
36
+
37
+ /// Generates base styles for a label.
38
+ @mixin label {
39
+ display: inline-block;
40
+ padding: $label-padding;
41
+
42
+ border-radius: $label-radius;
43
+
44
+ font-size: $label-font-size;
45
+ line-height: 1;
46
+ white-space: nowrap;
47
+ cursor: default;
48
+ }
49
+
50
+ @mixin foundation-label {
51
+ .label {
52
+ @include label;
53
+
54
+ background: $label-background;
55
+ color: $label-color;
56
+
57
+ @each $name, $color in $label-palette {
58
+ &.#{$name} {
59
+ background: $color;
60
+ color: color-pick-contrast($color, ($label-color, $label-color-alt));
61
+ }
62
+ }
63
+ }
64
+ }
@@ -0,0 +1,114 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group media-object
7
+ ////
8
+
9
+ /// Bottom margin of a media object.
10
+ /// @type Number
11
+ $mediaobject-margin-bottom: $global-margin !default;
12
+
13
+ /// Left and right padding on sections within a media object.
14
+ /// @type Number
15
+ $mediaobject-section-padding: $global-padding !default;
16
+
17
+ /// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
18
+ /// @type Number
19
+ $mediaobject-image-width-stacked: 100% !default;
20
+
21
+ /// Adds styles for a media object container.
22
+ @mixin media-object-container {
23
+ display: if($global-flexbox, flex, block);
24
+ margin-bottom: $mediaobject-margin-bottom;
25
+
26
+ @if $global-flexbox {
27
+ flex-wrap: nowrap;
28
+ }
29
+ }
30
+
31
+ /// Adds styles for sections within a media object.
32
+ /// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
33
+ @mixin media-object-section($padding: $mediaobject-section-padding) {
34
+ @if $global-flexbox {
35
+ flex: 0 1 auto;
36
+ }
37
+ @else {
38
+ display: table-cell;
39
+ vertical-align: top;
40
+ }
41
+
42
+ &:first-child {
43
+ padding-#{$global-right}: $padding;
44
+ }
45
+
46
+ &:last-child:not(:nth-child(2)) {
47
+ padding-#{$global-left}: $padding;
48
+ }
49
+
50
+ > :last-child {
51
+ margin-bottom: 0;
52
+ }
53
+ }
54
+
55
+ /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
56
+ @mixin media-object-stack {
57
+ padding: 0;
58
+ padding-bottom: $mediaobject-section-padding;
59
+
60
+ @if $global-flexbox {
61
+ flex-basis: 100%;
62
+ max-width: 100%;
63
+ }
64
+ @else {
65
+ display: block;
66
+ }
67
+
68
+ img {
69
+ width: $mediaobject-image-width-stacked;
70
+ }
71
+ }
72
+
73
+ @mixin foundation-media-object {
74
+ .media-object {
75
+ @include media-object-container;
76
+
77
+ img {
78
+ max-width: none;
79
+ }
80
+
81
+ @if $global-flexbox {
82
+ &.stack-for-#{$-zf-zero-breakpoint} {
83
+ @include breakpoint($-zf-zero-breakpoint only) {
84
+ flex-wrap: wrap;
85
+ }
86
+ }
87
+ }
88
+
89
+ &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
90
+ @include breakpoint($-zf-zero-breakpoint only) {
91
+ @include media-object-stack;
92
+ }
93
+ }
94
+ }
95
+
96
+ .media-object-section {
97
+ @include media-object-section;
98
+
99
+ @if $global-flexbox {
100
+ &.main-section {
101
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
102
+ }
103
+ }
104
+ @else {
105
+ &.middle {
106
+ vertical-align: middle;
107
+ }
108
+
109
+ &.bottom {
110
+ vertical-align: bottom;
111
+ }
112
+ }
113
+ }
114
+ }
@@ -0,0 +1,9 @@
1
+ @mixin foundation-menu-icon {
2
+ .menu-icon {
3
+ @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
4
+ }
5
+
6
+ .menu-icon.dark {
7
+ @include hamburger;
8
+ }
9
+ }
@@ -0,0 +1,376 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group menu
7
+ ////
8
+
9
+ /// Margin of a menu.
10
+ /// @type Number
11
+ $menu-margin: 0 !default;
12
+
13
+ /// Left-hand margin of a nested menu.
14
+ /// @type Number
15
+ $menu-margin-nested: 1rem !default;
16
+
17
+ /// Padding for items in a menu.
18
+ /// @type Number
19
+ $menu-item-padding: 0.7rem 1rem !default;
20
+
21
+ /// Text color of an active menu item.
22
+ /// @type Color
23
+ $menu-item-color-active: $white !default;
24
+
25
+ /// Background color of an active menu item.
26
+ /// @type Color
27
+ $menu-item-background-active: get-color(primary) !default;
28
+
29
+ /// Spacing between an icon and text in a menu item.
30
+ /// @type Number
31
+ $menu-icon-spacing: 0.25rem !default;
32
+
33
+ /// Background color for an hovered menu item.
34
+ /// @type Color
35
+ $menu-item-background-hover: $light-gray !default;
36
+
37
+ /// Color for bordered menu
38
+ /// @type Color
39
+ $menu-border: $light-gray !default;
40
+
41
+ /// Creates the base styles for a Menu.
42
+ @mixin menu-base {
43
+ margin: $menu-margin;
44
+ list-style-type: none;
45
+
46
+ @if $global-flexbox {
47
+ display: flex;
48
+ flex-wrap: nowrap;
49
+ align-items: center;
50
+ width: 100%;
51
+ }
52
+
53
+ // List items are table cell to allow for vertical alignment
54
+ > li {
55
+ @include disable-mouse-outline;
56
+
57
+ @if $global-flexbox {
58
+ flex: 0 0 auto;
59
+ }
60
+ @else {
61
+ display: table-cell;
62
+ vertical-align: middle;
63
+ }
64
+ }
65
+
66
+ // Reset line height to make the height of the overall item easier to calculate
67
+ > li > a {
68
+ display: block;
69
+ padding: $menu-item-padding;
70
+ line-height: 1;
71
+ }
72
+
73
+ // Reset styles of inner elements
74
+ input,
75
+ select,
76
+ a,
77
+ button {
78
+ margin-bottom: 0;
79
+ }
80
+ }
81
+
82
+ /// Expands the items of a Menu, so each item is the same width.
83
+ @mixin menu-expand {
84
+ @if $global-flexbox {
85
+ > li {
86
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
87
+ }
88
+ }
89
+ @else {
90
+ display: table;
91
+ width: 100%;
92
+ table-layout: fixed;
93
+ }
94
+
95
+ > li:first-child:last-child {
96
+ width: 100%;
97
+ }
98
+ }
99
+
100
+ /// Sets the direction of a Menu.
101
+ /// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
102
+ @mixin menu-direction($dir: horizontal) {
103
+ @if $dir == horizontal {
104
+ @if $global-flexbox {
105
+ flex-wrap: nowrap;
106
+
107
+ > li {
108
+ flex: 0 0 auto;
109
+ }
110
+ }
111
+ @else {
112
+ > li {
113
+ display: table-cell;
114
+ }
115
+ }
116
+ }
117
+ @else if $dir == vertical {
118
+ @if $global-flexbox {
119
+ flex-wrap: wrap;
120
+
121
+ > li {
122
+ flex: 0 0 100%;
123
+ max-width: 100%;
124
+ }
125
+
126
+ > li > a {
127
+ justify-content: flex-start;
128
+ align-items: flex-start;
129
+ }
130
+ }
131
+ @else {
132
+ > li {
133
+ display: block;
134
+ }
135
+ }
136
+ }
137
+ @else {
138
+ @warn 'The direction used for menu-direction() must be horizontal or vertical.';
139
+ }
140
+ }
141
+
142
+ /// Creates a simple Menu, which has no padding or hover state.
143
+ /// @param {Keyword} $dir [$global-left] - Direction of the menu. Set to `null` to do not generate styles for direction.
144
+ @mixin menu-simple($dir: $global-left) {
145
+ li {
146
+ display: inline-block;
147
+ vertical-align: top;
148
+ line-height: 1;
149
+ }
150
+
151
+ a {
152
+ padding: 0;
153
+ }
154
+
155
+ @if $dir != null {
156
+ @include menu-simple-direction($dir);
157
+ }
158
+ }
159
+
160
+ /// Direction modifier for a simple Menu
161
+ /// @param {Keyword} $dir [$global-left] - Direction of the menu
162
+ @mixin menu-simple-direction($dir: $global-left) {
163
+ $no-margin-dir: $dir;
164
+ $margin-dir: direction-opposite($dir);
165
+
166
+ li {
167
+ margin-#{$no-margin-dir}: 0;
168
+ margin-#{$margin-dir}: get-side($menu-item-padding, $margin-dir);
169
+ }
170
+ }
171
+
172
+ /// Adds styles for a nested Menu, by adding `margin-left` to the menu.
173
+ /// @param {Keyword|Number} $padding [auto] - Length of the margin.
174
+ @mixin menu-nested($margin: $menu-margin-nested) {
175
+ margin-#{$global-left}: $margin;
176
+ }
177
+
178
+ /// Adds support for icons to Menu items.
179
+ /// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
180
+ /// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
181
+ @mixin menu-icons($position: side, $base: true) {
182
+ @if $base {
183
+ @if $global-flexbox {
184
+ > li > a {
185
+ display: flex;
186
+ }
187
+ }
188
+ @else {
189
+ > li > a {
190
+ img,
191
+ i,
192
+ svg {
193
+ vertical-align: middle;
194
+
195
+ + span {
196
+ vertical-align: middle;
197
+ }
198
+ }
199
+ }
200
+ }
201
+ }
202
+
203
+ @if $position == side {
204
+ > li > a {
205
+ @if $global-flexbox {
206
+ flex-flow: row nowrap;
207
+ }
208
+
209
+ img,
210
+ i,
211
+ svg {
212
+ margin-#{$global-right}: $menu-icon-spacing;
213
+
214
+ @if not $global-flexbox {
215
+ display: inline-block;
216
+ }
217
+ }
218
+ }
219
+ }
220
+ @else if $position == top {
221
+ > li > a {
222
+ @if $global-flexbox {
223
+ flex-flow: column nowrap;
224
+ }
225
+ @else {
226
+ text-align: center;
227
+ }
228
+
229
+ img,
230
+ i,
231
+ svg {
232
+ @if not $global-flexbox {
233
+ display: block;
234
+ margin: 0 auto $menu-icon-spacing;
235
+ }
236
+ @else {
237
+ align-self: stretch;
238
+ margin-bottom: $menu-icon-spacing;
239
+ text-align: center;
240
+ }
241
+ }
242
+ }
243
+ }
244
+ }
245
+
246
+ @mixin menu-text {
247
+ padding-top: 0;
248
+ padding-bottom: 0;
249
+ padding: $menu-item-padding;
250
+
251
+ font-weight: bold;
252
+ line-height: 1;
253
+ color: inherit;
254
+ }
255
+
256
+ @mixin foundation-menu {
257
+ .menu {
258
+ @include menu-base;
259
+ @include menu-icons;
260
+
261
+ // Default orientation: horizontal
262
+ &, &.horizontal {
263
+ @include menu-direction(horizontal);
264
+ }
265
+
266
+ // Even-width modifier for horizontal orientation
267
+ &.expanded {
268
+ @include menu-expand;
269
+ }
270
+
271
+ // Vertical orientation modifier
272
+ &.vertical {
273
+ @include menu-direction(vertical);
274
+ }
275
+
276
+ @include -zf-each-breakpoint($small: false) {
277
+ &.#{$-zf-size}-horizontal {
278
+ @include menu-direction(horizontal);
279
+ }
280
+
281
+ &.#{$-zf-size}-expanded {
282
+ @include menu-expand;
283
+ }
284
+
285
+ &.#{$-zf-size}-vertical {
286
+ @include menu-direction(vertical);
287
+ }
288
+ }
289
+
290
+ // Simple
291
+ &.simple {
292
+ @include menu-simple;
293
+
294
+ &.align-#{$global-right} {
295
+ @include menu-simple-direction($global-right);
296
+ }
297
+ }
298
+
299
+ // Align right
300
+ &.align-#{$global-right} {
301
+ @if $global-flexbox {
302
+ justify-content: flex-end;
303
+ }
304
+ @else {
305
+ @include clearfix;
306
+
307
+ > li {
308
+ float: $global-right;
309
+ }
310
+ }
311
+ }
312
+
313
+ // Vertical icons
314
+ &.icon-top {
315
+ @include menu-icons(top, $base: false);
316
+ // Make vertical menu with icons on top work
317
+ &.vertical {
318
+ a > span {
319
+ margin: auto;
320
+ }
321
+ }
322
+ }
323
+
324
+ // Nesting
325
+ &.nested {
326
+ @include menu-nested;
327
+ }
328
+
329
+ // Active state
330
+ .active > a {
331
+ background: $menu-item-background-active;
332
+ color: $menu-item-color-active;
333
+ }
334
+
335
+ // Menu with border
336
+ &.menu-bordered {
337
+ li {
338
+ border: 1px solid $menu-border;
339
+ &:not(:first-child) {
340
+ border-top: 0;
341
+ }
342
+ }
343
+ }
344
+
345
+ // Menu with background hover
346
+ &.menu-hover {
347
+ li:hover {
348
+ background-color: $menu-item-background-hover;
349
+ }
350
+ }
351
+ }
352
+
353
+ .menu-text {
354
+ @include menu-text;
355
+ }
356
+
357
+ // Align center
358
+ .menu-centered {
359
+ text-align: center;
360
+
361
+ > .menu {
362
+ @if $global-flexbox {
363
+ @include flex-align($x: center, $y: top);
364
+ }
365
+ @else {
366
+ display: inline-block;
367
+ vertical-align: top;
368
+ }
369
+ }
370
+ }
371
+
372
+ // Prevent FOUC when using the Responsive Menu plugin
373
+ .no-js [data-responsive-menu] ul {
374
+ display: none;
375
+ }
376
+ }