bedrock_sass 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (155) hide show
  1. checksums.yaml +4 -4
  2. data/assets/_vendor/foundation/_vendor/normalize-scss/sass/_normalize.scss +3 -0
  3. data/assets/_vendor/foundation/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
  4. data/assets/_vendor/foundation/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
  5. data/assets/_vendor/foundation/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
  6. data/assets/_vendor/foundation/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
  7. data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_contain.scss +31 -0
  8. data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
  9. data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
  10. data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
  11. data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
  12. data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
  13. data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
  14. data/assets/_vendor/foundation/scss/_global.scss +249 -0
  15. data/assets/_vendor/foundation/scss/components/_accordion-menu.scss +171 -0
  16. data/assets/_vendor/foundation/scss/components/_accordion.scss +155 -0
  17. data/assets/_vendor/foundation/scss/components/_badge.scss +63 -0
  18. data/assets/_vendor/foundation/scss/components/_breadcrumbs.scss +117 -0
  19. data/assets/_vendor/foundation/scss/components/_button-group.scss +253 -0
  20. data/assets/_vendor/foundation/scss/components/_button.scss +385 -0
  21. data/assets/_vendor/foundation/scss/components/_callout.scss +106 -0
  22. data/assets/_vendor/foundation/scss/components/_card.scss +129 -0
  23. data/assets/_vendor/foundation/scss/components/_close-button.scss +102 -0
  24. data/assets/_vendor/foundation/scss/components/_drilldown.scss +142 -0
  25. data/assets/_vendor/foundation/scss/components/_dropdown-menu.scss +274 -0
  26. data/assets/_vendor/foundation/scss/components/_dropdown.scss +79 -0
  27. data/assets/_vendor/foundation/scss/components/_flex-video.scss +1 -0
  28. data/assets/_vendor/foundation/scss/components/_flex.scss +117 -0
  29. data/assets/_vendor/foundation/scss/components/_float.scss +27 -0
  30. data/assets/_vendor/foundation/scss/components/_label.scss +64 -0
  31. data/assets/_vendor/foundation/scss/components/_media-object.scss +114 -0
  32. data/assets/_vendor/foundation/scss/components/_menu-icon.scss +9 -0
  33. data/assets/_vendor/foundation/scss/components/_menu.scss +495 -0
  34. data/assets/_vendor/foundation/scss/components/_off-canvas.scss +506 -0
  35. data/assets/_vendor/foundation/scss/components/_orbit.scss +196 -0
  36. data/assets/_vendor/foundation/scss/components/_pagination.scss +193 -0
  37. data/assets/_vendor/foundation/scss/components/_progress-bar.scss +64 -0
  38. data/assets/_vendor/foundation/scss/components/_responsive-embed.scss +70 -0
  39. data/assets/_vendor/foundation/scss/components/_reveal.scss +180 -0
  40. data/assets/_vendor/foundation/scss/components/_slider.scss +137 -0
  41. data/assets/_vendor/foundation/scss/components/_sticky.scss +39 -0
  42. data/assets/_vendor/foundation/scss/components/_switch.scss +247 -0
  43. data/assets/_vendor/foundation/scss/components/_table.scss +330 -0
  44. data/assets/_vendor/foundation/scss/components/_tabs.scss +196 -0
  45. data/assets/_vendor/foundation/scss/components/_thumbnail.scss +67 -0
  46. data/assets/_vendor/foundation/scss/components/_title-bar.scss +84 -0
  47. data/assets/_vendor/foundation/scss/components/_tooltip.scss +160 -0
  48. data/assets/_vendor/foundation/scss/components/_top-bar.scss +175 -0
  49. data/assets/_vendor/foundation/scss/components/_visibility.scss +132 -0
  50. data/assets/_vendor/foundation/scss/forms/_checkbox.scss +41 -0
  51. data/assets/_vendor/foundation/scss/forms/_error.scss +88 -0
  52. data/assets/_vendor/foundation/scss/forms/_fieldset.scss +53 -0
  53. data/assets/_vendor/foundation/scss/forms/_forms.scss +34 -0
  54. data/assets/_vendor/foundation/scss/forms/_help-text.scss +30 -0
  55. data/assets/_vendor/foundation/scss/forms/_input-group.scss +142 -0
  56. data/assets/_vendor/foundation/scss/forms/_label.scss +50 -0
  57. data/assets/_vendor/foundation/scss/forms/_meter.scss +116 -0
  58. data/assets/_vendor/foundation/scss/forms/_progress.scss +94 -0
  59. data/assets/_vendor/foundation/scss/forms/_range.scss +149 -0
  60. data/assets/_vendor/foundation/scss/forms/_select.scss +86 -0
  61. data/assets/_vendor/foundation/scss/forms/_text.scss +179 -0
  62. data/assets/_vendor/foundation/scss/foundation.scss +133 -0
  63. data/assets/_vendor/foundation/scss/grid/_classes.scss +176 -0
  64. data/assets/_vendor/foundation/scss/grid/_column.scss +112 -0
  65. data/assets/_vendor/foundation/scss/grid/_flex-grid.scss +259 -0
  66. data/assets/_vendor/foundation/scss/grid/_grid.scss +48 -0
  67. data/assets/_vendor/foundation/scss/grid/_gutter.scss +82 -0
  68. data/assets/_vendor/foundation/scss/grid/_layout.scss +76 -0
  69. data/assets/_vendor/foundation/scss/grid/_position.scss +76 -0
  70. data/assets/_vendor/foundation/scss/grid/_row.scss +99 -0
  71. data/assets/_vendor/foundation/scss/grid/_size.scss +24 -0
  72. data/assets/_vendor/foundation/scss/prototype/_arrow.scss +36 -0
  73. data/assets/_vendor/foundation/scss/prototype/_border-box.scss +35 -0
  74. data/assets/_vendor/foundation/scss/prototype/_border-none.scss +35 -0
  75. data/assets/_vendor/foundation/scss/prototype/_bordered.scss +54 -0
  76. data/assets/_vendor/foundation/scss/prototype/_box.scss +23 -0
  77. data/assets/_vendor/foundation/scss/prototype/_display.scss +50 -0
  78. data/assets/_vendor/foundation/scss/prototype/_font-styling.scss +95 -0
  79. data/assets/_vendor/foundation/scss/prototype/_list-style-type.scss +95 -0
  80. data/assets/_vendor/foundation/scss/prototype/_overflow.scss +72 -0
  81. data/assets/_vendor/foundation/scss/prototype/_position.scss +114 -0
  82. data/assets/_vendor/foundation/scss/prototype/_prototype.scss +87 -0
  83. data/assets/_vendor/foundation/scss/prototype/_relation.scss +157 -0
  84. data/assets/_vendor/foundation/scss/prototype/_rotate.scss +31 -0
  85. data/assets/_vendor/foundation/scss/prototype/_rounded.scss +54 -0
  86. data/assets/_vendor/foundation/scss/prototype/_separator.scss +96 -0
  87. data/assets/_vendor/foundation/scss/prototype/_shadow.scss +43 -0
  88. data/assets/_vendor/foundation/scss/prototype/_sizing.scss +73 -0
  89. data/assets/_vendor/foundation/scss/prototype/_spacing.scss +204 -0
  90. data/assets/_vendor/foundation/scss/prototype/_text-decoration.scss +48 -0
  91. data/assets/_vendor/foundation/scss/prototype/_text-transformation.scss +48 -0
  92. data/assets/_vendor/foundation/scss/prototype/_text-utilities.scss +88 -0
  93. data/assets/_vendor/foundation/scss/settings/_settings.scss +869 -0
  94. data/assets/_vendor/foundation/scss/typography/_alignment.scss +22 -0
  95. data/assets/_vendor/foundation/scss/typography/_base.scss +509 -0
  96. data/assets/_vendor/foundation/scss/typography/_helpers.scss +80 -0
  97. data/assets/_vendor/foundation/scss/typography/_print.scss +86 -0
  98. data/assets/_vendor/foundation/scss/typography/_typography.scss +26 -0
  99. data/assets/_vendor/foundation/scss/util/_breakpoint.scss +348 -0
  100. data/assets/_vendor/foundation/scss/util/_color.scss +129 -0
  101. data/assets/_vendor/foundation/scss/util/_direction.scss +31 -0
  102. data/assets/_vendor/foundation/scss/util/_flex.scss +85 -0
  103. data/assets/_vendor/foundation/scss/util/_math.scss +72 -0
  104. data/assets/_vendor/foundation/scss/util/_mixins.scss +313 -0
  105. data/assets/_vendor/foundation/scss/util/_selector.scss +41 -0
  106. data/assets/_vendor/foundation/scss/util/_typography.scss +26 -0
  107. data/assets/_vendor/foundation/scss/util/_unit.scss +152 -0
  108. data/assets/_vendor/foundation/scss/util/_util.scss +14 -0
  109. data/assets/_vendor/foundation/scss/util/_value.scss +160 -0
  110. data/assets/_vendor/foundation/scss/xy-grid/_cell.scss +169 -0
  111. data/assets/_vendor/foundation/scss/xy-grid/_classes.scss +476 -0
  112. data/assets/_vendor/foundation/scss/xy-grid/_collapse.scss +74 -0
  113. data/assets/_vendor/foundation/scss/xy-grid/_frame.scss +85 -0
  114. data/assets/_vendor/foundation/scss/xy-grid/_grid.scss +35 -0
  115. data/assets/_vendor/foundation/scss/xy-grid/_gutters.scss +45 -0
  116. data/assets/_vendor/foundation/scss/xy-grid/_layout.scss +33 -0
  117. data/assets/_vendor/foundation/scss/xy-grid/_position.scss +28 -0
  118. data/assets/_vendor/foundation/scss/xy-grid/_xy-grid.scss +51 -0
  119. data/assets/_vendor/motion-ui/_classes.scss +109 -0
  120. data/assets/_vendor/motion-ui/_settings.scss +61 -0
  121. data/assets/_vendor/motion-ui/effects/_fade.scss +32 -0
  122. data/assets/_vendor/motion-ui/effects/_hinge.scss +65 -0
  123. data/assets/_vendor/motion-ui/effects/_shake.scss +15 -0
  124. data/assets/_vendor/motion-ui/effects/_slide.scss +41 -0
  125. data/assets/_vendor/motion-ui/effects/_spin.scss +28 -0
  126. data/assets/_vendor/motion-ui/effects/_wiggle.scss +13 -0
  127. data/assets/_vendor/motion-ui/effects/_zoom.scss +15 -0
  128. data/assets/_vendor/motion-ui/motion-ui.scss +29 -0
  129. data/assets/_vendor/motion-ui/transitions/_fade.scss +28 -0
  130. data/assets/_vendor/motion-ui/transitions/_hinge.scss +43 -0
  131. data/assets/_vendor/motion-ui/transitions/_slide.scss +42 -0
  132. data/assets/_vendor/motion-ui/transitions/_spin.scss +39 -0
  133. data/assets/_vendor/motion-ui/transitions/_zoom.scss +39 -0
  134. data/assets/_vendor/motion-ui/util/_animation.scss +7 -0
  135. data/assets/_vendor/motion-ui/util/_args.scss +15 -0
  136. data/assets/_vendor/motion-ui/util/_keyframe.scss +136 -0
  137. data/assets/_vendor/motion-ui/util/_selector.scss +23 -0
  138. data/assets/_vendor/motion-ui/util/_series.scss +54 -0
  139. data/assets/_vendor/motion-ui/util/_transition.scss +45 -0
  140. data/assets/_vendor/motion-ui/util/_unit.scss +7 -0
  141. data/assets/bedrock/js/bedrock.js +22993 -0
  142. data/assets/bedrock/scss/_bedrock-components.scss +15 -0
  143. data/assets/bedrock/scss/_bedrock-settings.scss +45 -0
  144. data/assets/bedrock/scss/_foundation-components.scss +50 -0
  145. data/assets/bedrock/scss/_foundation-settings.scss +869 -0
  146. data/assets/bedrock/scss/bedrock.scss +7 -0
  147. data/assets/bedrock/scss/components/global.scss +55 -0
  148. data/assets/bedrock/scss/components/header.scss +60 -0
  149. data/assets/bedrock/scss/components/helper-classes.scss +53 -0
  150. data/assets/bedrock/scss/components/logo-bar.scss +45 -0
  151. data/assets/bedrock/scss/components/off-canvas-menu.scss +359 -0
  152. data/assets/bedrock/scss/components/panel.scss +121 -0
  153. data/assets/bedrock/scss/components/tiny-mce-editor.scss +74 -0
  154. data/lib/bedrock_sass/version.rb +1 -1
  155. metadata +153 -2
@@ -0,0 +1,869 @@
1
+ // Foundation for Sites Settings
2
+ // -----------------------------
3
+ //
4
+ // Table of Contents:
5
+ //
6
+ // 1. Global
7
+ // 2. Breakpoints
8
+ // 3. The Grid
9
+ // 4. Base Typography
10
+ // 5. Typography Helpers
11
+ // 6. Abide
12
+ // 7. Accordion
13
+ // 8. Accordion Menu
14
+ // 9. Badge
15
+ // 10. Breadcrumbs
16
+ // 11. Button
17
+ // 12. Button Group
18
+ // 13. Callout
19
+ // 14. Card
20
+ // 15. Close Button
21
+ // 16. Drilldown
22
+ // 17. Dropdown
23
+ // 18. Dropdown Menu
24
+ // 19. Flexbox Utilities
25
+ // 20. Forms
26
+ // 21. Label
27
+ // 22. Media Object
28
+ // 23. Menu
29
+ // 24. Meter
30
+ // 25. Off-canvas
31
+ // 26. Orbit
32
+ // 27. Pagination
33
+ // 28. Progress Bar
34
+ // 29. Prototype Arrow
35
+ // 30. Prototype Border-Box
36
+ // 31. Prototype Border-None
37
+ // 32. Prototype Bordered
38
+ // 33. Prototype Display
39
+ // 34. Prototype Font-Styling
40
+ // 35. Prototype List-Style-Type
41
+ // 36. Prototype Overflow
42
+ // 37. Prototype Position
43
+ // 38. Prototype Rounded
44
+ // 39. Prototype Separator
45
+ // 40. Prototype Shadow
46
+ // 41. Prototype Sizing
47
+ // 42. Prototype Spacing
48
+ // 43. Prototype Text-Decoration
49
+ // 44. Prototype Text-Transformation
50
+ // 45. Prototype Text-Utilities
51
+ // 46. Responsive Embed
52
+ // 47. Reveal
53
+ // 48. Slider
54
+ // 49. Switch
55
+ // 50. Table
56
+ // 51. Tabs
57
+ // 52. Thumbnail
58
+ // 53. Title Bar
59
+ // 54. Tooltip
60
+ // 55. Top Bar
61
+ // 56. Xy Grid
62
+
63
+ @import 'util/util';
64
+
65
+ // 1. Global
66
+ // ---------
67
+
68
+ $global-font-size: 100%;
69
+ $global-width: rem-calc(1200);
70
+ $global-lineheight: 1.5;
71
+ $foundation-palette: (
72
+ primary: #3c64bb,
73
+ secondary: #2f323a,
74
+ default: #8a8a8a,
75
+ success: #3adb76,
76
+ warning: #ffae00,
77
+ alert: #ec5840,
78
+ );
79
+ $light-gray: #e6e6e6;
80
+ $medium-gray: #cacaca;
81
+ $dark-gray: #8a8a8a;
82
+ $black: #0a0a0a;
83
+ $white: #ffffff;
84
+ $body-background: darken($white, 6);
85
+ $body-font-color: $black;
86
+ $body-font-family: 'Source Sans Pro', Arial, sans-serif;
87
+ $body-antialiased: true;
88
+ $global-margin: 1rem;
89
+ $global-padding: 1rem;
90
+ $global-position: 1rem;
91
+ $global-weight-normal: normal;
92
+ $global-weight-bold: bold;
93
+ $global-radius: 0;
94
+ $global-menu-padding: 0.7rem 1rem;
95
+ $global-menu-nested-margin: 1rem;
96
+ $global-text-direction: ltr;
97
+ $global-flexbox: true;
98
+ $global-prototype-breakpoints: false;
99
+ $global-button-cursor: auto;
100
+ $global-color-pick-contrast-tolerance: 0;
101
+ $print-transparent-backgrounds: true;
102
+
103
+ @include add-foundation-colors;
104
+
105
+ // 2. Breakpoints
106
+ // --------------
107
+
108
+ $breakpoints: (
109
+ small: 0,
110
+ medium: 640px,
111
+ large: 1024px,
112
+ xlarge: 1200px,
113
+ xxlarge: 1440px,
114
+ );
115
+ $print-breakpoint: large;
116
+ $breakpoint-classes: (small medium large xlarge xxlarge);
117
+
118
+ // 3. The Grid
119
+ // -----------
120
+
121
+ $grid-row-width: $global-width;
122
+ $grid-column-count: 12;
123
+ $grid-column-gutter: (
124
+ small: 20px,
125
+ medium: 30px,
126
+ );
127
+ $grid-column-align-edge: true;
128
+ $grid-column-alias: 'columns';
129
+ $block-grid-max: 8;
130
+
131
+ // 4. Base Typography
132
+ // ------------------
133
+
134
+ $header-font-family: $body-font-family;
135
+ $header-font-weight: $global-weight-normal;
136
+ $header-font-style: normal;
137
+ $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
138
+ $header-color: inherit;
139
+ $header-lineheight: 1.4;
140
+ $header-margin-bottom: 0.5rem;
141
+ $header-styles: (
142
+ small: (
143
+ 'h1': ('font-size': 31),
144
+ 'h2': ('font-size': 28),
145
+ 'h3': ('font-size': 25),
146
+ 'h4': ('font-size': 22),
147
+ 'h5': ('font-size': 19),
148
+ 'h6': ('font-size': 16),
149
+ ),
150
+ medium: (
151
+ 'h1': ('font-size': 36),
152
+ 'h2': ('font-size': 32),
153
+ 'h3': ('font-size': 28),
154
+ 'h4': ('font-size': 24),
155
+ 'h5': ('font-size': 20),
156
+ 'h6': ('font-size': 16),
157
+ ),
158
+ );
159
+ $header-text-rendering: optimizeLegibility;
160
+ $small-font-size: 80%;
161
+ $header-small-font-color: $medium-gray;
162
+ $paragraph-lineheight: 1.6;
163
+ $paragraph-margin-bottom: 1rem;
164
+ $paragraph-text-rendering: optimizeLegibility;
165
+ $code-color: $black;
166
+ $code-font-family: $font-family-monospace;
167
+ $code-font-weight: $global-weight-normal;
168
+ $code-background: $light-gray;
169
+ $code-border: 1px solid $medium-gray;
170
+ $code-padding: rem-calc(2 5 1);
171
+ $anchor-color: $primary-color;
172
+ $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
173
+ $anchor-text-decoration: none;
174
+ $anchor-text-decoration-hover: none;
175
+ $hr-width: $global-width;
176
+ $hr-border: 1px solid $medium-gray;
177
+ $hr-margin: rem-calc(20) auto;
178
+ $list-lineheight: $paragraph-lineheight;
179
+ $list-margin-bottom: $paragraph-margin-bottom;
180
+ $list-style-type: disc;
181
+ $list-style-position: outside;
182
+ $list-side-margin: 1.25rem;
183
+ $list-nested-side-margin: 1.25rem;
184
+ $defnlist-margin-bottom: 1rem;
185
+ $defnlist-term-weight: $global-weight-bold;
186
+ $defnlist-term-margin-bottom: 0.3rem;
187
+ $blockquote-color: $dark-gray;
188
+ $blockquote-padding: rem-calc(9 20 0 19);
189
+ $blockquote-border: 1px solid $medium-gray;
190
+ $cite-font-size: rem-calc(13);
191
+ $cite-color: $dark-gray;
192
+ $cite-pseudo-content: '\2014 \0020';
193
+ $keystroke-font: $font-family-monospace;
194
+ $keystroke-color: $black;
195
+ $keystroke-background: $light-gray;
196
+ $keystroke-padding: rem-calc(2 4 0);
197
+ $keystroke-radius: $global-radius;
198
+ $abbr-underline: 1px dotted $black;
199
+
200
+ // 5. Typography Helpers
201
+ // ---------------------
202
+
203
+ $lead-font-size: $global-font-size * 1.25;
204
+ $lead-lineheight: 1.6;
205
+ $subheader-lineheight: 1.4;
206
+ $subheader-color: $dark-gray;
207
+ $subheader-font-weight: $global-weight-normal;
208
+ $subheader-margin-top: 0.2rem;
209
+ $subheader-margin-bottom: 0.5rem;
210
+ $stat-font-size: 2.5rem;
211
+
212
+ // 6. Abide
213
+ // --------
214
+
215
+ $abide-inputs: true;
216
+ $abide-labels: true;
217
+ $input-background-invalid: get-color(alert);
218
+ $form-label-color-invalid: get-color(alert);
219
+ $input-error-color: get-color(alert);
220
+ $input-error-font-size: rem-calc(12);
221
+ $input-error-font-weight: $global-weight-bold;
222
+
223
+ // 7. Accordion
224
+ // ------------
225
+
226
+ $accordion-background: $white;
227
+ $accordion-plusminus: true;
228
+ $accordion-title-font-size: rem-calc(12);
229
+ $accordion-item-color: $primary-color;
230
+ $accordion-item-background-hover: $light-gray;
231
+ $accordion-item-padding: 1.25rem 1rem;
232
+ $accordion-content-background: $white;
233
+ $accordion-content-border: 1px solid $light-gray;
234
+ $accordion-content-color: $body-font-color;
235
+ $accordion-content-padding: 1rem;
236
+
237
+ // 8. Accordion Menu
238
+ // -----------------
239
+
240
+ $accordionmenu-padding: $global-menu-padding;
241
+ $accordionmenu-nested-margin: $global-menu-nested-margin;
242
+ $accordionmenu-submenu-padding: $accordionmenu-padding;
243
+ $accordionmenu-arrows: true;
244
+ $accordionmenu-arrow-color: $primary-color;
245
+ $accordionmenu-item-background: null;
246
+ $accordionmenu-border: null;
247
+ $accordionmenu-submenu-toggle-background: null;
248
+ $accordion-submenu-toggle-border: $accordionmenu-border;
249
+ $accordionmenu-submenu-toggle-width: 40px;
250
+ $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
251
+ $accordionmenu-arrow-size: 6px;
252
+
253
+ // 9. Badge
254
+ // --------
255
+
256
+ $badge-background: $primary-color;
257
+ $badge-color: $white;
258
+ $badge-color-alt: $black;
259
+ $badge-palette: $foundation-palette;
260
+ $badge-padding: 0.3em;
261
+ $badge-minwidth: 2.1em;
262
+ $badge-font-size: 0.6rem;
263
+
264
+ // 10. Breadcrumbs
265
+ // ---------------
266
+
267
+ $breadcrumbs-margin: 0 0 $global-margin 0;
268
+ $breadcrumbs-item-font-size: rem-calc(11);
269
+ $breadcrumbs-item-color: $primary-color;
270
+ $breadcrumbs-item-color-current: $black;
271
+ $breadcrumbs-item-color-disabled: $medium-gray;
272
+ $breadcrumbs-item-margin: 0.75rem;
273
+ $breadcrumbs-item-uppercase: true;
274
+ $breadcrumbs-item-separator: true;
275
+ $breadcrumbs-item-separator-item: '/';
276
+ $breadcrumbs-item-separator-item-rtl: '\\';
277
+ $breadcrumbs-item-separator-color: $medium-gray;
278
+
279
+ // 11. Button
280
+ // ----------
281
+
282
+ $button-font-family: inherit;
283
+ $button-padding: 0.6em .9em;
284
+ $button-margin: 0 0 $global-margin 0;
285
+ $button-fill: solid;
286
+ $button-background: $primary-color;
287
+ $button-background-hover: scale-color($button-background, $lightness: -15%);
288
+ $button-color: $white;
289
+ $button-color-alt: $black;
290
+ $button-radius: $global-radius;
291
+ $button-hollow-border-width: 1px;
292
+ $button-sizes: (
293
+ tiny: 0.6rem,
294
+ small: 0.75rem,
295
+ default: 0.9rem,
296
+ large: 1.25rem,
297
+ );
298
+ $button-palette: $foundation-palette;
299
+ $button-opacity-disabled: 0.25;
300
+ $button-background-hover-lightness: -20%;
301
+ $button-hollow-hover-lightness: -50%;
302
+ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
303
+
304
+ // 12. Button Group
305
+ // ----------------
306
+
307
+ $buttongroup-margin: 1rem;
308
+ $buttongroup-spacing: 1px;
309
+ $buttongroup-child-selector: '.button';
310
+ $buttongroup-expand-max: 6;
311
+ $buttongroup-radius-on-each: true;
312
+
313
+ // 13. Callout
314
+ // -----------
315
+
316
+ $callout-background: $white;
317
+ $callout-background-fade: 85%;
318
+ $callout-border: 1px solid rgba($black, 0.25);
319
+ $callout-margin: 0 0 1rem 0;
320
+ $callout-padding: 1rem;
321
+ $callout-font-color: $body-font-color;
322
+ $callout-font-color-alt: $body-background;
323
+ $callout-radius: $global-radius;
324
+ $callout-link-tint: 30%;
325
+
326
+ // 14. Card
327
+ // --------
328
+
329
+ $card-background: $white;
330
+ $card-font-color: $body-font-color;
331
+ $card-divider-background: $light-gray;
332
+ $card-border: 1px solid $light-gray;
333
+ $card-shadow: none;
334
+ $card-border-radius: $global-radius;
335
+ $card-padding: $global-padding;
336
+ $card-margin-bottom: $global-margin;
337
+
338
+ // 15. Close Button
339
+ // ----------------
340
+
341
+ $closebutton-position: right top;
342
+ $closebutton-offset-horizontal: (
343
+ small: 0.66rem,
344
+ medium: 1rem,
345
+ );
346
+ $closebutton-offset-vertical: (
347
+ small: 0.33em,
348
+ medium: 0.5rem,
349
+ );
350
+ $closebutton-size: (
351
+ small: 1.5em,
352
+ medium: 2em,
353
+ );
354
+ $closebutton-lineheight: 1;
355
+ $closebutton-color: $dark-gray;
356
+ $closebutton-color-hover: $black;
357
+
358
+ // 16. Drilldown
359
+ // -------------
360
+
361
+ $drilldown-transition: transform 0.15s linear;
362
+ $drilldown-arrows: true;
363
+ $drilldown-padding: $global-menu-padding;
364
+ $drilldown-nested-margin: 0;
365
+ $drilldown-background: $white;
366
+ $drilldown-submenu-padding: $drilldown-padding;
367
+ $drilldown-submenu-background: $white;
368
+ $drilldown-arrow-color: $primary-color;
369
+ $drilldown-arrow-size: 6px;
370
+
371
+ // 17. Dropdown
372
+ // ------------
373
+
374
+ $dropdown-padding: 1rem;
375
+ $dropdown-background: $body-background;
376
+ $dropdown-border: 1px solid $medium-gray;
377
+ $dropdown-font-size: 1rem;
378
+ $dropdown-width: 300px;
379
+ $dropdown-radius: $global-radius;
380
+ $dropdown-sizes: (
381
+ tiny: 100px,
382
+ small: 200px,
383
+ large: 400px,
384
+ );
385
+
386
+ // 18. Dropdown Menu
387
+ // -----------------
388
+
389
+ $dropdownmenu-arrows: true;
390
+ $dropdownmenu-arrow-color: $anchor-color;
391
+ $dropdownmenu-arrow-size: 6px;
392
+ $dropdownmenu-arrow-padding: 1.5rem;
393
+ $dropdownmenu-min-width: 200px;
394
+ $dropdownmenu-background: $white;
395
+ $dropdownmenu-submenu-background: $dropdownmenu-background;
396
+ $dropdownmenu-padding: $global-menu-padding;
397
+ $dropdownmenu-nested-margin: 0;
398
+ $dropdownmenu-submenu-padding: $dropdownmenu-padding;
399
+ $dropdownmenu-border: 1px solid $medium-gray;
400
+ $dropdown-menu-item-color-active: get-color(primary);
401
+ $dropdown-menu-item-background-active: transparent;
402
+
403
+ // 19. Flexbox Utilities
404
+ // ---------------------
405
+
406
+ $flex-source-ordering-count: 6;
407
+ $flexbox-responsive-breakpoints: true;
408
+
409
+ // 20. Forms
410
+ // ---------
411
+
412
+ $fieldset-border: 1px solid $medium-gray;
413
+ $fieldset-padding: rem-calc(20);
414
+ $fieldset-margin: rem-calc(18 0);
415
+ $legend-padding: rem-calc(0 3);
416
+ $form-spacing: rem-calc(16);
417
+ $helptext-color: $black;
418
+ $helptext-font-size: rem-calc(13);
419
+ $helptext-font-style: italic;
420
+ $input-prefix-color: $black;
421
+ $input-prefix-background: $light-gray;
422
+ $input-prefix-border: 1px solid $medium-gray;
423
+ $input-prefix-padding: 1rem;
424
+ $form-label-color: $black;
425
+ $form-label-font-size: rem-calc(14);
426
+ $form-label-font-weight: $global-weight-normal;
427
+ $form-label-line-height: 1.8;
428
+ $select-background: $white;
429
+ $select-triangle-color: $dark-gray;
430
+ $select-radius: $global-radius;
431
+ $input-color: $black;
432
+ $input-placeholder-color: $medium-gray;
433
+ $input-font-family: inherit;
434
+ $input-font-size: rem-calc(16);
435
+ $input-font-weight: $global-weight-normal;
436
+ $input-line-height: $global-lineheight;
437
+ $input-background: $white;
438
+ $input-background-focus: $white;
439
+ $input-background-disabled: $light-gray;
440
+ $input-border: 1px solid $medium-gray;
441
+ $input-border-focus: 1px solid $dark-gray;
442
+ $input-padding: $form-spacing / 2;
443
+ $input-shadow: inset 0 1px 2px rgba($black, 0.1);
444
+ $input-shadow-focus: 0 0 5px $medium-gray;
445
+ $input-cursor-disabled: not-allowed;
446
+ $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
447
+ $input-number-spinners: true;
448
+ $input-radius: $global-radius;
449
+ $form-button-radius: $global-radius;
450
+
451
+ // 21. Label
452
+ // ---------
453
+
454
+ $label-background: $primary-color;
455
+ $label-color: $white;
456
+ $label-color-alt: $black;
457
+ $label-palette: $foundation-palette;
458
+ $label-font-size: 0.8rem;
459
+ $label-padding: 0.33333rem 0.5rem;
460
+ $label-radius: $global-radius;
461
+
462
+ // 22. Media Object
463
+ // ----------------
464
+
465
+ $mediaobject-margin-bottom: $global-margin;
466
+ $mediaobject-section-padding: $global-padding;
467
+ $mediaobject-image-width-stacked: 100%;
468
+
469
+ // 23. Menu
470
+ // --------
471
+
472
+ $menu-margin: 0;
473
+ $menu-nested-margin: $global-menu-nested-margin;
474
+ $menu-items-padding: $global-menu-padding;
475
+ $menu-simple-margin: 1rem;
476
+ $menu-item-color-active: $white;
477
+ $menu-item-background-active: get-color(primary);
478
+ $menu-icon-spacing: 0.25rem;
479
+ $menu-item-background-hover: $light-gray;
480
+ $menu-state-back-compat: true;
481
+ $menu-centered-back-compat: true;
482
+ $menu-icons-back-compat: true;
483
+
484
+ // 24. Meter
485
+ // ---------
486
+
487
+ $meter-height: 1rem;
488
+ $meter-radius: $global-radius;
489
+ $meter-background: $medium-gray;
490
+ $meter-fill-good: $success-color;
491
+ $meter-fill-medium: $warning-color;
492
+ $meter-fill-bad: $alert-color;
493
+
494
+ // 25. Off-canvas
495
+ // --------------
496
+
497
+ $offcanvas-sizes: (
498
+ small: 240px,
499
+ );
500
+ $offcanvas-vertical-sizes: (
501
+ small: 240px,
502
+ );
503
+ $offcanvas-background: $white;
504
+ $offcanvas-shadow: none;
505
+ $offcanvas-inner-shadow-size: 1px;
506
+ $offcanvas-inner-shadow-color: rgba($black, 0.3);
507
+ $offcanvas-overlay-zindex: 11;
508
+ $offcanvas-push-zindex: 12;
509
+ $offcanvas-overlap-zindex: 13;
510
+ $offcanvas-reveal-zindex: 12;
511
+ $offcanvas-transition-length: 0.5s;
512
+ $offcanvas-transition-timing: ease;
513
+ $offcanvas-fixed-reveal: true;
514
+ $offcanvas-exit-background: transparent;
515
+ $maincontent-class: 'off-canvas-content';
516
+
517
+ // 26. Orbit
518
+ // ---------
519
+
520
+ $orbit-bullet-background: $medium-gray;
521
+ $orbit-bullet-background-active: $dark-gray;
522
+ $orbit-bullet-diameter: 1.2rem;
523
+ $orbit-bullet-margin: 0.1rem;
524
+ $orbit-bullet-margin-top: 0.8rem;
525
+ $orbit-bullet-margin-bottom: 0.8rem;
526
+ $orbit-caption-background: rgba($black, 0.5);
527
+ $orbit-caption-padding: 1rem;
528
+ $orbit-control-background-hover: rgba($black, 0.5);
529
+ $orbit-control-padding: 1rem;
530
+ $orbit-control-zindex: 10;
531
+
532
+ // 27. Pagination
533
+ // --------------
534
+
535
+ $pagination-font-size: rem-calc(14);
536
+ $pagination-margin-bottom: $global-margin;
537
+ $pagination-item-color: $black;
538
+ $pagination-item-padding: rem-calc(3 10);
539
+ $pagination-item-spacing: rem-calc(1);
540
+ $pagination-radius: $global-radius;
541
+ $pagination-item-background-hover: $light-gray;
542
+ $pagination-item-background-current: $primary-color;
543
+ $pagination-item-color-current: $white;
544
+ $pagination-item-color-disabled: $medium-gray;
545
+ $pagination-ellipsis-color: $black;
546
+ $pagination-mobile-items: false;
547
+ $pagination-mobile-current-item: false;
548
+ $pagination-arrows: false;
549
+
550
+ // 28. Progress Bar
551
+ // ----------------
552
+
553
+ $progress-height: 1rem;
554
+ $progress-background: $medium-gray;
555
+ $progress-margin-bottom: $global-margin;
556
+ $progress-meter-background: $primary-color;
557
+ $progress-radius: $global-radius;
558
+
559
+ // 29. Prototype Arrow
560
+ // -------------------
561
+
562
+ $prototype-arrow-directions: (
563
+ down,
564
+ up,
565
+ right,
566
+ left
567
+ );
568
+ $prototype-arrow-size: 0.4375rem;
569
+ $prototype-arrow-color: $black;
570
+
571
+ // 30. Prototype Border-Box
572
+ // ------------------------
573
+
574
+ $prototype-border-box-breakpoints: $global-prototype-breakpoints;
575
+
576
+ // 31. Prototype Border-None
577
+ // -------------------------
578
+
579
+ $prototype-border-none-breakpoints: $global-prototype-breakpoints;
580
+
581
+ // 32. Prototype Bordered
582
+ // ----------------------
583
+
584
+ $prototype-bordered-breakpoints: $global-prototype-breakpoints;
585
+ $prototype-border-width: rem-calc(1);
586
+ $prototype-border-type: solid;
587
+ $prototype-border-color: $medium-gray;
588
+
589
+ // 33. Prototype Display
590
+ // ---------------------
591
+
592
+ $prototype-display-breakpoints: $global-prototype-breakpoints;
593
+ $prototype-display: (
594
+ inline,
595
+ inline-block,
596
+ block,
597
+ table,
598
+ table-cell
599
+ );
600
+
601
+ // 34. Prototype Font-Styling
602
+ // --------------------------
603
+
604
+ $prototype-font-breakpoints: $global-prototype-breakpoints;
605
+ $prototype-wide-letter-spacing: rem-calc(4);
606
+ $prototype-font-normal: $global-weight-normal;
607
+ $prototype-font-bold: $global-weight-bold;
608
+
609
+ // 35. Prototype List-Style-Type
610
+ // -----------------------------
611
+
612
+ $prototype-list-breakpoints: $global-prototype-breakpoints;
613
+ $prototype-style-type-unordered: (
614
+ disc,
615
+ circle,
616
+ square
617
+ );
618
+ $prototype-style-type-ordered: (
619
+ decimal,
620
+ lower-alpha,
621
+ lower-latin,
622
+ lower-roman,
623
+ upper-alpha,
624
+ upper-latin,
625
+ upper-roman
626
+ );
627
+
628
+ // 36. Prototype Overflow
629
+ // ----------------------
630
+
631
+ $prototype-overflow-breakpoints: $global-prototype-breakpoints;
632
+ $prototype-overflow: (
633
+ visible,
634
+ hidden,
635
+ scroll
636
+ );
637
+
638
+ // 37. Prototype Position
639
+ // ----------------------
640
+
641
+ $prototype-position-breakpoints: $global-prototype-breakpoints;
642
+ $prototype-position: (
643
+ static,
644
+ relative,
645
+ absolute,
646
+ fixed
647
+ );
648
+ $prototype-position-z-index: 975;
649
+
650
+ // 38. Prototype Rounded
651
+ // ---------------------
652
+
653
+ $prototype-rounded-breakpoints: $global-prototype-breakpoints;
654
+ $prototype-border-radius: rem-calc(3);
655
+
656
+ // 39. Prototype Separator
657
+ // -----------------------
658
+
659
+ $prototype-separator-breakpoints: $global-prototype-breakpoints;
660
+ $prototype-separator-align: center;
661
+ $prototype-separator-height: rem-calc(2);
662
+ $prototype-separator-width: 3rem;
663
+ $prototype-separator-background: $primary-color;
664
+ $prototype-separator-margin-top: $global-margin;
665
+
666
+ // 40. Prototype Shadow
667
+ // --------------------
668
+
669
+ $prototype-shadow-breakpoints: $global-prototype-breakpoints;
670
+ $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
671
+ 0 2px 10px 0 rgba(0,0,0,.12);
672
+
673
+ // 41. Prototype Sizing
674
+ // --------------------
675
+
676
+ $prototype-sizing-breakpoints: $global-prototype-breakpoints;
677
+ $prototype-sizing: (
678
+ width,
679
+ height
680
+ );
681
+ $prototype-sizes: (
682
+ 25: 25%,
683
+ 50: 50%,
684
+ 75: 75%,
685
+ 100: 100%
686
+ );
687
+
688
+ // 42. Prototype Spacing
689
+ // ---------------------
690
+
691
+ $prototype-spacing-breakpoints: $global-prototype-breakpoints;
692
+ $prototype-spacers-count: 3;
693
+
694
+ // 43. Prototype Text-Decoration
695
+ // -----------------------------
696
+
697
+ $prototype-decoration-breakpoints: $global-prototype-breakpoints;
698
+ $prototype-text-decoration: (
699
+ overline,
700
+ underline,
701
+ line-through,
702
+ );
703
+
704
+ // 44. Prototype Text-Transformation
705
+ // ---------------------------------
706
+
707
+ $prototype-transformation-breakpoints: $global-prototype-breakpoints;
708
+ $prototype-text-transformation: (
709
+ lowercase,
710
+ uppercase,
711
+ capitalize
712
+ );
713
+
714
+ // 45. Prototype Text-Utilities
715
+ // ----------------------------
716
+
717
+ $prototype-utilities-breakpoints: $global-prototype-breakpoints;
718
+ $prototype-text-overflow: ellipsis;
719
+
720
+ // 46. Responsive Embed
721
+ // --------------------
722
+
723
+ $responsive-embed-margin-bottom: rem-calc(16);
724
+ $responsive-embed-ratios: (
725
+ default: 4 by 3,
726
+ widescreen: 16 by 9,
727
+ );
728
+
729
+ // 47. Reveal
730
+ // ----------
731
+
732
+ $reveal-background: $white;
733
+ $reveal-width: 600px;
734
+ $reveal-max-width: $global-width;
735
+ $reveal-padding: $global-padding;
736
+ $reveal-border: 1px solid $medium-gray;
737
+ $reveal-radius: $global-radius;
738
+ $reveal-zindex: 1005;
739
+ $reveal-overlay-background: rgba($black, 0.45);
740
+
741
+ // 48. Slider
742
+ // ----------
743
+
744
+ $slider-width-vertical: 0.5rem;
745
+ $slider-transition: all 0.2s ease-in-out;
746
+ $slider-height: 0.5rem;
747
+ $slider-background: $light-gray;
748
+ $slider-fill-background: $medium-gray;
749
+ $slider-handle-height: 1.4rem;
750
+ $slider-handle-width: 1.4rem;
751
+ $slider-handle-background: $primary-color;
752
+ $slider-opacity-disabled: 0.25;
753
+ $slider-radius: $global-radius;
754
+
755
+ // 49. Switch
756
+ // ----------
757
+
758
+ $switch-background: $medium-gray;
759
+ $switch-background-active: $primary-color;
760
+ $switch-height: 2rem;
761
+ $switch-height-tiny: 1.5rem;
762
+ $switch-height-small: 1.75rem;
763
+ $switch-height-large: 2.5rem;
764
+ $switch-radius: $global-radius;
765
+ $switch-margin: $global-margin;
766
+ $switch-paddle-background: $white;
767
+ $switch-paddle-offset: 0.25rem;
768
+ $switch-paddle-radius: $global-radius;
769
+ $switch-paddle-transition: all 0.25s ease-out;
770
+
771
+ // 50. Table
772
+ // ---------
773
+
774
+ $table-background: $white;
775
+ $table-color-scale: 10%;
776
+ $table-border: 1px solid smart-scale($table-background, $table-color-scale);
777
+ $table-padding: .5rem .95rem;
778
+ $table-hover-scale: 3;
779
+ $table-row-hover: darken($table-background, $table-hover-scale);
780
+ $table-row-stripe-hover: darken($table-background, $table-color-scale + 1);
781
+ $table-is-striped: true;
782
+ $table-striped-background: smart-scale($table-background, $table-color-scale / 3);
783
+ $table-stripe: even;
784
+ $table-head-background: smart-scale($table-background, $table-color-scale / 2);
785
+ $table-head-row-hover: darken($table-head-background, $table-hover-scale);
786
+ $table-foot-background: smart-scale($table-background, $table-color-scale);
787
+ $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
788
+ $table-head-font-color: $body-font-color;
789
+ $table-foot-font-color: $body-font-color;
790
+ $show-header-for-stacked: false;
791
+ $table-stack-breakpoint: medium;
792
+
793
+ // 51. Tabs
794
+ // --------
795
+
796
+ $tab-margin: 0;
797
+ $tab-background: $white;
798
+ $tab-color: $primary-color;
799
+ $tab-background-active: $light-gray;
800
+ $tab-active-color: $primary-color;
801
+ $tab-item-font-size: rem-calc(12);
802
+ $tab-item-background-hover: $white;
803
+ $tab-item-padding: 1.25rem 1.5rem;
804
+ $tab-expand-max: 6;
805
+ $tab-content-background: $white;
806
+ $tab-content-border: $light-gray;
807
+ $tab-content-color: $body-font-color;
808
+ $tab-content-padding: 1rem;
809
+
810
+ // 52. Thumbnail
811
+ // -------------
812
+
813
+ $thumbnail-border: solid 4px $white;
814
+ $thumbnail-margin-bottom: $global-margin;
815
+ $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
816
+ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
817
+ $thumbnail-transition: box-shadow 200ms ease-out;
818
+ $thumbnail-radius: $global-radius;
819
+
820
+ // 53. Title Bar
821
+ // -------------
822
+
823
+ $titlebar-background: $black;
824
+ $titlebar-color: $white;
825
+ $titlebar-padding: 0.5rem;
826
+ $titlebar-text-font-weight: bold;
827
+ $titlebar-icon-color: $white;
828
+ $titlebar-icon-color-hover: $medium-gray;
829
+ $titlebar-icon-spacing: 0.25rem;
830
+
831
+ // 54. Tooltip
832
+ // -----------
833
+
834
+ $has-tip-cursor: help;
835
+ $has-tip-font-weight: $global-weight-bold;
836
+ $has-tip-border-bottom: dotted 1px $dark-gray;
837
+ $tooltip-background-color: $black;
838
+ $tooltip-color: $white;
839
+ $tooltip-padding: 0.75rem;
840
+ $tooltip-max-width: 10rem;
841
+ $tooltip-font-size: $small-font-size;
842
+ $tooltip-pip-width: 0.75rem;
843
+ $tooltip-pip-height: $tooltip-pip-width * 0.866;
844
+ $tooltip-radius: $global-radius;
845
+
846
+ // 55. Top Bar
847
+ // -----------
848
+
849
+ $topbar-padding: 0.5rem;
850
+ $topbar-background: $white;
851
+ $topbar-submenu-background: $topbar-background;
852
+ $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
853
+ $topbar-input-width: 200px;
854
+ $topbar-unstack-breakpoint: medium;
855
+
856
+ // 56. Xy Grid
857
+ // -----------
858
+
859
+ $xy-grid: true;
860
+ $grid-container: $global-width;
861
+ $grid-columns: 12;
862
+ $grid-margin-gutters: (
863
+ small: 20px,
864
+ medium: 30px
865
+ );
866
+ $grid-padding-gutters: $grid-margin-gutters;
867
+ $grid-container-padding: $grid-padding-gutters;
868
+ $grid-container-max: $global-width;
869
+ $xy-block-grid-max: 8;