ama_layout 2.9.2 → 3.0.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 (32) hide show
  1. checksums.yaml +4 -4
  2. data/ama_layout.gemspec +1 -1
  3. data/app/assets/images/ama-logo-small.svg +44 -0
  4. data/app/assets/javascripts/ama_layout/desktop/header_menu.coffee +7 -3
  5. data/app/assets/stylesheets/ama_layout/_settings.scss +566 -0
  6. data/app/assets/stylesheets/ama_layout/foundation_and_overrides.scss +48 -1483
  7. data/app/assets/stylesheets/ama_layout/layout/base-styles.scss +7 -1
  8. data/app/assets/stylesheets/ama_layout/layout/helper-classes.scss +18 -3
  9. data/app/assets/stylesheets/ama_layout/layout_components/accordions.scss +44 -12
  10. data/app/assets/stylesheets/ama_layout/layout_components/cart.scss +1 -21
  11. data/app/assets/stylesheets/ama_layout/layout_components/forms.scss +55 -1
  12. data/app/assets/stylesheets/ama_layout/layout_components/index.scss +1 -0
  13. data/app/assets/stylesheets/ama_layout/layout_components/responsive-table.scss +42 -13
  14. data/app/assets/stylesheets/ama_layout/layout_components/reveal-modal.scss +11 -0
  15. data/app/assets/stylesheets/ama_layout/layout_components/sidebar.scss +7 -59
  16. data/app/assets/stylesheets/ama_layout/layout_components/siteheader.scss +108 -11
  17. data/app/assets/stylesheets/ama_layout/media_queries/desktop.scss +2 -2
  18. data/app/assets/stylesheets/ama_layout/media_queries/mobile-and-tablet.scss +2 -2
  19. data/app/assets/stylesheets/ama_layout/media_queries/mobile.scss +1 -15
  20. data/app/assets/stylesheets/ama_layout/media_queries/tablet.scss +2 -2
  21. data/app/views/ama_layout/_footer.html.erb +1 -1
  22. data/app/views/ama_layout/_main_top_nav_item.html.erb +2 -3
  23. data/app/views/ama_layout/_notice.html.erb +2 -2
  24. data/app/views/ama_layout/_sidebar.html.erb +1 -1
  25. data/app/views/ama_layout/_siteheader.html.erb +31 -31
  26. data/app/views/ama_layout/_top_nav.html.erb +3 -7
  27. data/app/views/ama_layout/_top_sub_nav.html.erb +1 -1
  28. data/app/views/ama_layout/_top_sub_nav_item.html.erb +0 -1
  29. data/lib/ama_layout/decorators/navigation_decorator.rb +1 -1
  30. data/lib/ama_layout/version.rb +1 -1
  31. metadata +10 -8
  32. data/app/assets/images/AMA-Logo.svg +0 -44
@@ -1,1486 +1,51 @@
1
- // Foundation by ZURB
2
- // foundation.zurb.com
3
- // Licensed under MIT Open Source
1
+ @charset 'utf-8';
4
2
 
5
- //
3
+ @import 'settings';
4
+ @import 'foundation';
6
5
 
7
- // Table of Contents
8
- // Foundation Settings
6
+ // If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
9
7
  //
10
- // a. Base
11
- // b. Grid
12
- // c. Global
13
- // d. Media Query Ranges
14
- // e. Typography
15
- // 01. Accordion
16
- // 02. Alert Boxes
17
- // 03. Block Grid
18
- // 04. Breadcrumbs
19
- // 05. Buttons
20
- // 06. Button Groups
21
- // 07. Clearing
22
- // 08. Dropdown
23
- // 09. Dropdown Buttons
24
- // 10. Flex Video
25
- // 11. Forms
26
- // 12. Icon Bar
27
- // 13. Inline Lists
28
- // 14. Joyride
29
- // 15. Keystrokes
30
- // 16. Labels
31
- // 17. Magellan
32
- // 18. Off-canvas
33
- // 19. Orbit
34
- // 20. Pagination
35
- // 21. Panels
36
- // 22. Pricing Tables
37
- // 23. Progress Bar
38
- // 24. Range Slider
39
- // 25. Reveal
40
- // 26. Side Nav
41
- // 27. Split Buttons
42
- // 28. Sub Nav
43
- // 29. Switch
44
- // 30. Tables
45
- // 31. Tabs
46
- // 32. Thumbnails
47
- // 33. Tooltips
48
- // 34. Top Bar
49
- // 36. Visibility Classes
50
-
51
- // a. Base
52
- // - - - - - - - - - - - - - - - - - - - - - - - - -
53
-
54
- // This is the default html and body font-size for the base rem value.
55
- // $rem-base: 16px;
56
-
57
- // Allows the use of rem-calc() or lower-bound() in your settings
58
- @import 'foundation/functions';
59
-
60
- // The default font-size is set to 100% of the browser style sheet (usually 16px)
61
- // for compatibility with browser-based text zoom or user-set defaults.
62
-
63
- // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
64
- // If you want your base font-size to be different and not have it affect the grid breakpoints,
65
- // set $rem-base to $base-font-size and make sure $base-font-size is a px value.
66
- // $base-font-size: 100%;
67
-
68
- // The $base-font-size is 100% while $base-line-height is 150%
69
- // $base-line-height: 150%;
70
-
71
- // We use this to control whether or not CSS classes come through in the gem files.
72
- $include-html-classes: true;
73
- // $include-print-styles: true;
74
- $include-html-global-classes: $include-html-classes;
75
-
76
- // b. Grid
77
- // - - - - - - - - - - - - - - - - - - - - - - - - -
78
-
79
- // $include-html-grid-classes: $include-html-classes;
80
- // $include-xl-html-grid-classes: false;
81
-
82
- $row-width: rem-calc(1184);
83
- // $total-columns: 12;
84
- // $column-gutter: rem-calc(30);
85
-
86
- // c. Global
87
- // - - - - - - - - - - - - - - - - - - - - - - - - -
88
-
89
- // We use these to define default font stacks
90
- // $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
91
- // $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
92
- // $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
93
-
94
- // We use these to define default font weights
95
- // $font-weight-normal: normal;
96
- // $font-weight-bold: bold;
97
-
98
- // $white : #FFFFFF;
99
- // $ghost : #FAFAFA;
100
- // $snow : #F9F9F9;
101
- // $vapor : #F6F6F6;
102
- // $white-smoke : #F5F5F5;
103
- // $silver : #EFEFEF;
104
- // $smoke : #EEEEEE;
105
- // $gainsboro : #DDDDDD;
106
- // $iron : #CCCCCC;
107
- // $base : #AAAAAA;
108
- // $aluminum : #999999;
109
- // $jumbo : #888888;
110
- // $monsoon : #777777;
111
- // $steel : #666666;
112
- // $charcoal : #555555;
113
- // $tuatara : #444444;
114
- // $oil : #333333;
115
- // $jet : #222222;
116
- // $black : #000000;
117
-
118
- // We use these as default colors throughout
119
- // $primary-color: #008CBA;
120
- // $secondary-color: #e7e7e7;
121
- // $alert-color: #f04124;
122
- // $success-color: #43AC6A;
123
- // $warning-color: #f08a24;
124
- // $info-color: #a0d3e8;
125
-
126
- // We use these to control various global styles
127
- // $body-bg: $white;
128
- // $body-font-color: $jet;
129
- // $body-font-family: $font-family-sans-serif;
130
- // $body-font-weight: $font-weight-normal;
131
- // $body-font-style: normal;
132
-
133
- // We use this to control font-smoothing
134
- // $font-smoothing: antialiased;
135
-
136
- // We use these to control text direction settings
137
- // $text-direction: ltr;
138
- // $opposite-direction: right;
139
- // $default-float: left;
140
- // $last-child-float: $opposite-direction;
141
-
142
- // We use these to make sure border radius matches unless we want it different.
143
- // $global-radius: 3px;
144
- // $global-rounded: 1000px;
145
-
146
- // We use these to control inset shadow shiny edges and depressions.
147
- // $shiny-edge-size: 0 1px 0;
148
- // $shiny-edge-color: rgba($white, .5);
149
- // $shiny-edge-active-color: rgba($black, .2);
150
-
151
- // d. Media Query Ranges
152
- // - - - - - - - - - - - - - - - - - - - - - - - - -
153
-
154
- $small-breakpoint: em-calc(640);
155
- $medium-breakpoint: em-calc(1024);
156
- $large-breakpoint: em-calc(1440);
157
- $xlarge-breakpoint: em-calc(1920);
158
-
159
- // $small-range: (0, $small-breakpoint);
160
- // $medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint);
161
- // $large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint);
162
- // $xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint);
163
- // $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
164
-
165
- // $screen: "only screen";
166
-
167
- // $landscape: "#{$screen} and (orientation: landscape)";
168
- // $portrait: "#{$screen} and (orientation: portrait)";
169
-
170
- // $small-up: $screen;
171
- // $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
172
-
173
- // $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
174
- // $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
175
-
176
- // $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
177
- // $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
178
-
179
- // $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
180
- // $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
181
-
182
- // $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
183
- // $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
184
-
185
- // $retina: (
186
- // "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
187
- // "#{$screen} and (min--moz-device-pixel-ratio: 2)",
188
- // "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
189
- // "#{$screen} and (min-device-pixel-ratio: 2)",
190
- // "#{$screen} and (min-resolution: 192dpi)",
191
- // "#{$screen} and (min-resolution: 2dppx)"
192
- // );
193
-
194
- // Legacy
195
- // $small: $medium-up;
196
- // $medium: $medium-up;
197
- // $large: $large-up;
198
-
199
- // We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
200
- // $cursor-crosshair-value: crosshair;
201
- // $cursor-default-value: default;
202
- // $cursor-disabled-value: not-allowed;
203
- // $cursor-pointer-value: pointer;
204
- // $cursor-help-value: help;
205
- // $cursor-text-value: text;
206
-
207
- // e. Typography
208
- // - - - - - - - - - - - - - - - - - - - - - - - - -
209
-
210
- // $include-html-type-classes: $include-html-classes;
211
-
212
- // We use these to control header font styles
213
- // $header-font-family: $body-font-family;
214
- // $header-font-weight: $font-weight-normal;
215
- // $header-font-style: normal;
216
- // $header-font-color: $jet;
217
- // $header-line-height: 1.4;
218
- // $header-top-margin: .2rem;
219
- // $header-bottom-margin: .5rem;
220
- // $header-text-rendering: optimizeLegibility;
221
-
222
- // We use these to control header font sizes
223
- // $h1-font-size: rem-calc(44);
224
- // $h2-font-size: rem-calc(37);
225
- // $h3-font-size: rem-calc(27);
226
- // $h4-font-size: rem-calc(23);
227
- // $h5-font-size: rem-calc(18);
228
- // $h6-font-size: 1rem;
229
-
230
- // We use these to control header size reduction on small screens
231
- // $h1-font-reduction: rem-calc(10);
232
- // $h2-font-reduction: rem-calc(10);
233
- // $h3-font-reduction: rem-calc(5);
234
- // $h4-font-reduction: rem-calc(5);
235
- // $h5-font-reduction: 0;
236
- // $h6-font-reduction: 0;
237
-
238
- // These control how subheaders are styled.
239
- // $subheader-line-height: 1.4;
240
- // $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
241
- // $subheader-font-weight: $font-weight-normal;
242
- // $subheader-top-margin: .2rem;
243
- // $subheader-bottom-margin: .5rem;
244
-
245
- // A general <small> styling
246
- // $small-font-size: 60%;
247
- // $small-font-color: scale-color($header-font-color, $lightness: 35%);
248
-
249
- // We use these to style paragraphs
250
- // $paragraph-font-family: inherit;
251
- // $paragraph-font-weight: $font-weight-normal;
252
- // $paragraph-font-size: 1rem;
253
- // $paragraph-line-height: 1.6;
254
- // $paragraph-margin-bottom: rem-calc(20);
255
- // $paragraph-aside-font-size: rem-calc(14);
256
- // $paragraph-aside-line-height: 1.35;
257
- // $paragraph-aside-font-style: italic;
258
- // $paragraph-text-rendering: optimizeLegibility;
259
-
260
- // We use these to style <code> tags
261
- // $code-color: $oil;
262
- // $code-font-family: $font-family-monospace;
263
- // $code-font-weight: $font-weight-normal;
264
- // $code-background-color: scale-color($secondary-color, $lightness: 70%);
265
- // $code-border-size: 1px;
266
- // $code-border-style: solid;
267
- // $code-border-color: scale-color($code-background-color, $lightness: -10%);
268
- // $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
269
-
270
- // We use these to style anchors
271
- // $anchor-text-decoration: none;
272
- // $anchor-text-decoration-hover: none;
273
- // $anchor-font-color: $primary-color;
274
- // $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
275
-
276
- // We use these to style the <hr> element
277
- // $hr-border-width: 1px;
278
- // $hr-border-style: solid;
279
- // $hr-border-color: $gainsboro;
280
- // $hr-margin: rem-calc(20);
281
-
282
- // We use these to style lists
283
- // $list-font-family: $paragraph-font-family;
284
- // $list-font-size: $paragraph-font-size;
285
- // $list-line-height: $paragraph-line-height;
286
- // $list-margin-bottom: $paragraph-margin-bottom;
287
- // $list-style-position: outside;
288
- // $list-side-margin: 1.1rem;
289
- // $list-ordered-side-margin: 1.4rem;
290
- // $list-side-margin-no-bullet: 0;
291
- // $list-nested-margin: rem-calc(20);
292
- // $definition-list-header-weight: $font-weight-bold;
293
- // $definition-list-header-margin-bottom: .3rem;
294
- // $definition-list-margin-bottom: rem-calc(12);
295
-
296
- // We use these to style blockquotes
297
- // $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
298
- // $blockquote-padding: rem-calc(9 20 0 19);
299
- // $blockquote-border: 1px solid $gainsboro;
300
- // $blockquote-cite-font-size: rem-calc(13);
301
- // $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
302
- // $blockquote-cite-link-color: $blockquote-cite-font-color;
303
-
304
- // Acronym styles
305
- // $acronym-underline: 1px dotted $gainsboro;
306
-
307
- // We use these to control padding and margin
308
- // $microformat-padding: rem-calc(10 12);
309
- // $microformat-margin: rem-calc(0 0 20 0);
310
-
311
- // We use these to control the border styles
312
- // $microformat-border-width: 1px;
313
- // $microformat-border-style: solid;
314
- // $microformat-border-color: $gainsboro;
315
-
316
- // We use these to control full name font styles
317
- // $microformat-fullname-font-weight: $font-weight-bold;
318
- // $microformat-fullname-font-size: rem-calc(15);
319
-
320
- // We use this to control the summary font styles
321
- // $microformat-summary-font-weight: $font-weight-bold;
322
-
323
- // We use this to control abbr padding
324
- // $microformat-abbr-padding: rem-calc(0 1);
325
-
326
- // We use this to control abbr font styles
327
- // $microformat-abbr-font-weight: $font-weight-bold;
328
- // $microformat-abbr-font-decoration: none;
329
-
330
- // 01. Accordion
331
- // - - - - - - - - - - - - - - - - - - - - - - - - -
332
-
333
- // $include-html-accordion-classes: $include-html-classes;
334
-
335
- // $accordion-navigation-padding: rem-calc(16);
336
- // $accordion-navigation-bg-color: $silver;
337
- // $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
338
- // $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
339
- // $accordion-navigation-font-color: $jet;
340
- // $accordion-navigation-font-size: rem-calc(16);
341
- // $accordion-navigation-font-family: $body-font-family;
342
-
343
- // $accordion-content-padding: ($column-gutter/2);
344
- // $accordion-content-active-bg-color: $white;
345
-
346
- // 02. Alert Boxes
347
- // - - - - - - - - - - - - - - - - - - - - - - - - -
348
-
349
- // $include-html-alert-classes: $include-html-classes;
350
-
351
- // We use this to control alert padding.
352
- // $alert-padding-top: rem-calc(14);
353
- // $alert-padding-default-float: $alert-padding-top;
354
- // $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
355
- // $alert-padding-bottom: $alert-padding-top;
356
-
357
- // We use these to control text style.
358
- // $alert-font-weight: $font-weight-normal;
359
- // $alert-font-size: rem-calc(13);
360
- // $alert-font-color: $white;
361
- // $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
362
-
363
- // We use this for close hover effect.
364
- // $alert-function-factor: -14%;
365
-
366
- // We use these to control border styles.
367
- // $alert-border-style: solid;
368
- // $alert-border-width: 1px;
369
- // $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
370
- // $alert-bottom-margin: rem-calc(20);
371
-
372
- // We use these to style the close buttons
373
- // $alert-close-color: $oil;
374
- // $alert-close-top: 50%;
375
- // $alert-close-position: rem-calc(4);
376
- // $alert-close-font-size: rem-calc(22);
377
- // $alert-close-opacity: .3;
378
- // $alert-close-opacity-hover: .5;
379
- // $alert-close-padding: 9px 6px 4px;
380
- // $alert-close-background: inherit;
381
-
382
- // We use this to control border radius
383
- // $alert-radius: $global-radius;
384
-
385
- // $alert-transition-speed: 300ms;
386
- // $alert-transition-ease: ease-out;
387
-
388
- // 03. Block Grid
389
- // - - - - - - - - - - - - - - - - - - - - - - - - -
390
-
391
- // $include-html-block-grid-classes: $include-html-classes;
392
- // $include-xl-html-block-grid-classes: false;
393
-
394
- // We use this to control the maximum number of block grid elements per row
395
- // $block-grid-elements: 12;
396
- // $block-grid-default-spacing: rem-calc(20);
397
-
398
- // $align-block-grid-to-grid: false;
399
- // @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
400
-
401
- // Enables media queries for block-grid classes. Set to false if writing semantic HTML.
402
- // $block-grid-media-queries: true;
403
-
404
- // 04. Breadcrumbs
405
- // - - - - - - - - - - - - - - - - - - - - - - - - -
406
-
407
- // $include-html-nav-classes: $include-html-classes;
408
-
409
- // We use this to set the background color for the breadcrumb container.
410
- // $crumb-bg: scale-color($secondary-color, $lightness: 55%);
411
-
412
- // We use these to set the padding around the breadcrumbs.
413
- // $crumb-padding: rem-calc(9 14 9);
414
- // $crumb-side-padding: rem-calc(12);
415
-
416
- // We use these to control border styles.
417
- // $crumb-function-factor: -10%;
418
- // $crumb-border-size: 1px;
419
- // $crumb-border-style: solid;
420
- // $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
421
- // $crumb-radius: $global-radius;
422
-
423
- // We use these to set various text styles for breadcrumbs.
424
- // $crumb-font-size: rem-calc(11);
425
- // $crumb-font-color: $primary-color;
426
- // $crumb-font-color-current: $oil;
427
- // $crumb-font-color-unavailable: $aluminum;
428
- // $crumb-font-transform: uppercase;
429
- // $crumb-link-decor: underline;
430
-
431
- // We use these to control the slash between breadcrumbs
432
- // $crumb-slash-color: $base;
433
- // $crumb-slash: "/";
434
-
435
- // 05. Buttons
436
- // - - - - - - - - - - - - - - - - - - - - - - - - -
437
-
438
- // $include-html-button-classes: $include-html-classes;
439
-
440
- // We use these to build padding for buttons.
441
- // $button-tny: rem-calc(10);
442
- // $button-sml: rem-calc(14);
443
- // $button-med: rem-calc(16);
444
- // $button-lrg: rem-calc(18);
445
-
446
- // We use this to control the display property.
447
- // $button-display: inline-block;
448
- // $button-margin-bottom: rem-calc(20);
449
-
450
- // We use these to control button text styles.
451
- // $button-font-family: $body-font-family;
452
- // $button-font-color: $white;
453
- // $button-font-color-alt: $oil;
454
- // $button-font-tny: rem-calc(11);
455
- // $button-font-sml: rem-calc(13);
456
- // $button-font-med: rem-calc(16);
457
- // $button-font-lrg: rem-calc(20);
458
- // $button-font-weight: $font-weight-normal;
459
- // $button-font-align: center;
460
-
461
- // We use these to control various hover effects.
462
- // $button-function-factor: -20%;
463
-
464
- // We use these to control button border styles.
465
- // $button-border-width: 0;
466
- // $button-border-style: solid;
467
- // $button-bg-color: $primary-color;
468
- // $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor);
469
- // $button-border-color: $button-bg-hover;
470
- // $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor);
471
- // $secondary-button-border-color: $secondary-button-bg-hover;
472
- // $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor);
473
- // $success-button-border-color: $success-button-bg-hover;
474
- // $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
475
- // $alert-button-border-color: $alert-button-bg-hover;
476
- // $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor);
477
- // $warning-button-border-color: $warning-button-bg-hover;
478
- // $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor);
479
- // $info-button-border-color: $info-button-bg-hover;
480
-
481
- // We use this to set the default radius used throughout the core.
482
- // $button-radius: $global-radius;
483
- // $button-round: $global-rounded;
484
-
485
- // We use this to set default opacity and cursor for disabled buttons.
486
- // $button-disabled-opacity: .7;
487
- // $button-disabled-cursor: $cursor-default-value;
488
-
489
- // 06. Button Groups
490
- // - - - - - - - - - - - - - - - - - - - - - - - - -
491
-
492
- // $include-html-button-classes: $include-html-classes;
493
-
494
- // Sets the margin for the right side by default, and the left margin if right-to-left direction is used
495
- // $button-bar-margin-opposite: rem-calc(10);
496
- // $button-group-border-width: 1px;
497
-
498
- // 07. Clearing
499
- // - - - - - - - - - - - - - - - - - - - - - - - - -
500
-
501
- // $include-html-clearing-classes: $include-html-classes;
502
-
503
- // We use these to set the background colors for parts of Clearing.
504
- // $clearing-bg: $oil;
505
- // $clearing-caption-bg: $clearing-bg;
506
- // $clearing-carousel-bg: rgba(51,51,51,0.8);
507
- // $clearing-img-bg: $clearing-bg;
508
-
509
- // We use these to style the close button
510
- // $clearing-close-color: $iron;
511
- // $clearing-close-size: 30px;
512
-
513
- // We use these to style the arrows
514
- // $clearing-arrow-size: 12px;
515
- // $clearing-arrow-color: $clearing-close-color;
516
-
517
- // We use these to style captions
518
- // $clearing-caption-font-color: $iron;
519
- // $clearing-caption-font-size: .875em;
520
- // $clearing-caption-padding: 10px 30px 20px;
521
-
522
- // We use these to make the image and carousel height and style
523
- // $clearing-active-img-height: 85%;
524
- // $clearing-carousel-height: 120px;
525
- // $clearing-carousel-thumb-width: 120px;
526
- // $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
527
-
528
- // 08. Dropdown
529
- // - - - - - - - - - - - - - - - - - - - - - - - - -
530
-
531
- // $include-html-dropdown-classes: $include-html-classes;
532
-
533
- // We use these to controls height and width styles.
534
- // $f-dropdown-max-width: 200px;
535
- // $f-dropdown-height: auto;
536
- // $f-dropdown-max-height: none;
537
-
538
- // Used for bottom position
539
- // $f-dropdown-margin-top: 2px;
540
-
541
- // Used for right position
542
- // $f-dropdown-margin-left: $f-dropdown-margin-top;
543
-
544
- // Used for left position
545
- // $f-dropdown-margin-right: $f-dropdown-margin-top;
546
-
547
- // Used for top position
548
- // $f-dropdown-margin-bottom: $f-dropdown-margin-top;
549
-
550
- // We use this to control the background color
551
- // $f-dropdown-bg: $white;
552
-
553
- // We use this to set the border styles for dropdowns.
554
- // $f-dropdown-border-style: solid;
555
- // $f-dropdown-border-width: 1px;
556
- // $f-dropdown-border-color: scale-color($white, $lightness: -20%);
557
-
558
- // We use these to style the triangle pip.
559
- // $f-dropdown-triangle-size: 6px;
560
- // $f-dropdown-triangle-color: $white;
561
- // $f-dropdown-triangle-side-offset: 10px;
562
-
563
- // We use these to control styles for the list elements.
564
- // $f-dropdown-list-style: none;
565
- // $f-dropdown-font-color: $charcoal;
566
- // $f-dropdown-font-size: rem-calc(14);
567
- // $f-dropdown-list-padding: rem-calc(5, 10);
568
- // $f-dropdown-line-height: rem-calc(18);
569
- // $f-dropdown-list-hover-bg: $smoke;
570
- // $dropdown-mobile-default-float: 0;
571
-
572
- // We use this to control the styles for when the dropdown has custom content.
573
- // $f-dropdown-content-padding: rem-calc(20);
574
-
575
- // Default radius for dropdown.
576
- // $f-dropdown-radius: $global-radius;
577
-
578
-
579
- // 09. Dropdown Buttons
580
- // - - - - - - - - - - - - - - - - - - - - - - - - -
581
-
582
- // $include-html-button-classes: $include-html-classes;
583
-
584
- // We use these to set the color of the pip in dropdown buttons
585
- // $dropdown-button-pip-color: $white;
586
- // $dropdown-button-pip-color-alt: $oil;
587
-
588
- // We use these to set the size of the pip in dropdown buttons
589
- // $button-pip-tny: rem-calc(6);
590
- // $button-pip-sml: rem-calc(7);
591
- // $button-pip-med: rem-calc(9);
592
- // $button-pip-lrg: rem-calc(11);
593
-
594
- // We use these to style tiny dropdown buttons
595
- // $dropdown-button-padding-tny: $button-pip-tny * 7;
596
- // $dropdown-button-pip-size-tny: $button-pip-tny;
597
- // $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
598
- // $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1);
599
-
600
- // We use these to style small dropdown buttons
601
- // $dropdown-button-padding-sml: $button-pip-sml * 7;
602
- // $dropdown-button-pip-size-sml: $button-pip-sml;
603
- // $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
604
- // $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1);
605
-
606
- // We use these to style medium dropdown buttons
607
- // $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
608
- // $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
609
- // $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
610
- // $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2);
611
-
612
- // We use these to style large dropdown buttons
613
- // $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
614
- // $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
615
- // $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
616
- // $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3);
617
-
618
- // 10. Flex Video
619
- // - - - - - - - - - - - - - - - - - - - - - - - - -
620
-
621
- // $include-html-media-classes: $include-html-classes;
622
-
623
- // We use these to control video container padding and margins
624
- // $flex-video-padding-top: rem-calc(25);
625
- // $flex-video-padding-bottom: 67.5%;
626
- // $flex-video-margin-bottom: rem-calc(16);
627
-
628
- // We use this to control widescreen bottom padding
629
- // $flex-video-widescreen-padding-bottom: 56.34%;
630
-
631
- // 11. Forms
632
- // - - - - - - - - - - - - - - - - - - - - - - - - -
633
-
634
- // $include-html-form-classes: $include-html-classes;
635
-
636
- // We use this to set the base for lots of form spacing and positioning styles
637
- // $form-spacing: rem-calc(16);
638
-
639
- // We use these to style the labels in different ways
640
- // $form-label-pointer: pointer;
641
- // $form-label-font-size: rem-calc(14);
642
- // $form-label-font-weight: $font-weight-normal;
643
- // $form-label-line-height: 1.5;
644
- // $form-label-font-color: scale-color($black, $lightness: 30%);
645
- // $form-label-small-transform: capitalize;
646
- // $form-label-bottom-margin: 0;
647
- // $input-font-family: inherit;
648
- // $input-font-color: rgba(0,0,0,0.75);
649
- // $input-font-size: rem-calc(14);
650
- // $input-bg-color: $white;
651
- // $input-focus-bg-color: scale-color($white, $lightness: -2%);
652
- // $input-border-color: scale-color($white, $lightness: -20%);
653
- // $input-focus-border-color: scale-color($white, $lightness: -40%);
654
- // $input-border-style: solid;
655
- // $input-border-width: 1px;
656
- // $input-border-radius: $global-radius;
657
- // $input-disabled-bg: $gainsboro;
658
- // $input-disabled-cursor: $cursor-default-value;
659
- // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
660
- // $input-include-glowing-effect: false;
661
-
662
- // We use these to style the fieldset border and spacing.
663
- // $fieldset-border-style: solid;
664
- // $fieldset-border-width: 1px;
665
- // $fieldset-border-color: $gainsboro;
666
- // $fieldset-padding: rem-calc(20);
667
- // $fieldset-margin: rem-calc(18 0);
668
-
669
- // We use these to style the legends when you use them
670
- // $legend-bg: $white;
671
- // $legend-font-weight: $font-weight-bold;
672
- // $legend-padding: rem-calc(0 3);
673
-
674
- // We use these to style the prefix and postfix input elements
675
- // $input-prefix-bg: scale-color($white, $lightness: -5%);
676
- // $input-prefix-border-color: scale-color($white, $lightness: -20%);
677
- // $input-prefix-border-size: 1px;
678
- // $input-prefix-border-type: solid;
679
- // $input-prefix-overflow: hidden;
680
- // $input-prefix-font-color: $oil;
681
- // $input-prefix-font-color-alt: $white;
682
-
683
- // We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
684
- // $input-number-spinners: true;
685
-
686
- // We use these to style the error states for inputs and labels
687
- // $input-error-message-padding: rem-calc(6 9 9);
688
- // $input-error-message-top: -1px;
689
- // $input-error-message-font-size: rem-calc(12);
690
- // $input-error-message-font-weight: $font-weight-normal;
691
- // $input-error-message-font-style: italic;
692
- // $input-error-message-font-color: $white;
693
- // $input-error-message-bg-color: $alert-color;
694
- // $input-error-message-font-color-alt: $oil;
695
-
696
- // We use this to style the glowing effect of inputs when focused
697
- // $glowing-effect-fade-time: .45s;
698
- // $glowing-effect-color: $input-focus-border-color;
699
-
700
- // We use this to style the transition when inputs are focused and when the glowing effect is disabled.
701
- // $input-transition-fade-time: 0.15s;
702
- // $input-transition-fade-timing-function: linear;
703
-
704
- // Select variables
705
- // $select-bg-color: $ghost;
706
- // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
707
-
708
-
709
- // 12. Icon Bar
710
- // - - - - - - - - - - - - - - - - - - - - - - - - -
711
-
712
- // We use these to style the icon-bar and items
713
- // $icon-bar-bg: $oil;
714
- // $icon-bar-font-color: $white;
715
- // $icon-bar-font-color-hover: $icon-bar-font-color;
716
- // $icon-bar-font-size: 1rem;
717
- // $icon-bar-hover-color: $primary-color;
718
- // $icon-bar-icon-color: $white;
719
- // $icon-bar-icon-color-hover: $icon-bar-icon-color;
720
- // $icon-bar-icon-size: 1.875rem;
721
- // $icon-bar-image-width: 1.875rem;
722
- // $icon-bar-image-height: 1.875rem;
723
- // $icon-bar-active-color: $primary-color;
724
- // $icon-bar-item-padding: 1.25rem;
725
-
726
- // We use this to set default opacity and cursor for disabled icons.
727
- // $icon-bar-disabled-opacity: .7;
728
-
729
- // 13. Inline Lists
730
- // - - - - - - - - - - - - - - - - - - - - - - - - -
731
-
732
- // $include-html-inline-list-classes: $include-html-classes;
733
-
734
- // We use this to control the margins and padding of the inline list.
735
- // $inline-list-top-margin: 0;
736
- // $inline-list-opposite-margin: 0;
737
- // $inline-list-bottom-margin: rem-calc(17);
738
- // $inline-list-default-float-margin: rem-calc(-22);
739
- // $inline-list-default-float-list-margin: rem-calc(22);
740
-
741
- // $inline-list-padding: 0;
742
-
743
- // We use this to control the overflow of the inline list.
744
- // $inline-list-overflow: hidden;
745
-
746
- // We use this to control the list items
747
- // $inline-list-display: block;
748
-
749
- // We use this to control any elements within list items
750
- // $inline-list-children-display: block;
751
-
752
- // 14. Joyride
753
- // - - - - - - - - - - - - - - - - - - - - - - - - -
754
-
755
- // $include-html-joyride-classes: $include-html-classes;
756
-
757
- // Controlling default Joyride styles
758
- // $joyride-tip-bg: $oil;
759
- // $joyride-tip-default-width: 300px;
760
- // $joyride-tip-padding: rem-calc(18 20 24);
761
- // $joyride-tip-border: solid 1px $charcoal;
762
- // $joyride-tip-radius: 4px;
763
- // $joyride-tip-position-offset: 22px;
764
-
765
- // Here, we're setting the tip font styles
766
- // $joyride-tip-font-color: $white;
767
- // $joyride-tip-font-size: rem-calc(14);
768
- // $joyride-tip-header-weight: $font-weight-bold;
769
-
770
- // This changes the nub size
771
- // $joyride-tip-nub-size: 10px;
772
-
773
- // This adjusts the styles for the timer when its enabled
774
- // $joyride-tip-timer-width: 50px;
775
- // $joyride-tip-timer-height: 3px;
776
- // $joyride-tip-timer-color: $steel;
777
-
778
- // This changes up the styles for the close button
779
- // $joyride-tip-close-color: $monsoon;
780
- // $joyride-tip-close-size: 24px;
781
- // $joyride-tip-close-weight: $font-weight-normal;
782
-
783
- // When Joyride is filling the screen, we use this style for the bg
784
- // $joyride-screenfill: rgba(0,0,0,0.5);
785
-
786
- // 15. Keystrokes
787
- // - - - - - - - - - - - - - - - - - - - - - - - - -
788
-
789
- // $include-html-keystroke-classes: $include-html-classes;
790
-
791
- // We use these to control text styles.
792
- // $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
793
- // $keystroke-font-size: inherit;
794
- // $keystroke-font-color: $jet;
795
- // $keystroke-font-color-alt: $white;
796
- // $keystroke-function-factor: -7%;
797
-
798
- // We use this to control keystroke padding.
799
- // $keystroke-padding: rem-calc(2 4 0);
800
-
801
- // We use these to control background and border styles.
802
- // $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);
803
- // $keystroke-border-style: solid;
804
- // $keystroke-border-width: 1px;
805
- // $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
806
- // $keystroke-radius: $global-radius;
807
-
808
- // 16. Labels
809
- // - - - - - - - - - - - - - - - - - - - - - - - - -
810
-
811
- // $include-html-label-classes: $include-html-classes;
812
-
813
- // We use these to style the labels
814
- // $label-padding: rem-calc(4 8 4);
815
- // $label-radius: $global-radius;
816
-
817
- // We use these to style the label text
818
- // $label-font-sizing: rem-calc(11);
819
- // $label-font-weight: $font-weight-normal;
820
- // $label-font-color: $oil;
821
- // $label-font-color-alt: $white;
822
- // $label-font-family: $body-font-family;
823
-
824
- // 17. Magellan
825
- // - - - - - - - - - - - - - - - - - - - - - - - - -
826
-
827
- // $include-html-magellan-classes: $include-html-classes;
828
-
829
- // $magellan-bg: $white;
830
- // $magellan-padding: 10px;
831
-
832
- // 18. Off-canvas
833
- // - - - - - - - - - - - - - - - - - - - - - - - - -
834
-
835
- // Off Canvas Tab Bar Variables
836
- // $include-html-off-canvas-classes: $include-html-classes;
837
-
838
- // $tabbar-bg: $oil;
839
- // $tabbar-height: rem-calc(45);
840
- // $tabbar-icon-width: $tabbar-height;
841
- // $tabbar-line-height: $tabbar-height;
842
- // $tabbar-color: $white;
843
- // $tabbar-middle-padding: 0 rem-calc(10);
844
-
845
- // Off Canvas Divider Styles
846
- // $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
847
- // $tabbar-right-section-border: $tabbar-left-section-border;
848
-
849
-
850
- // Off Canvas Tab Bar Headers
851
- // $tabbar-header-color: $white;
852
- // $tabbar-header-weight: $font-weight-bold;
853
- // $tabbar-header-line-height: $tabbar-height;
854
- // $tabbar-header-margin: 0;
855
-
856
- // Off Canvas Menu Variables
857
- // $off-canvas-width: rem-calc(250);
858
- // $off-canvas-bg: $oil;
859
- // $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
860
- // $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%);
861
-
862
- // Off Canvas Menu List Variables
863
- // $off-canvas-label-padding: .3rem rem-calc(15);
864
- // $off-canvas-label-color: $aluminum;
865
- // $off-canvas-label-text-transform: uppercase;
866
- // $off-canvas-label-font-size: rem-calc(12);
867
- // $off-canvas-label-font-weight: $font-weight-bold;
868
- // $off-canvas-label-bg: $tuatara;
869
- // $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
870
- // $off-canvas-label-border-bottom: none;
871
- // $off-canvas-label-margin:0;
872
- // $off-canvas-link-padding: rem-calc(10, 15);
873
- // $off-canvas-link-color: rgba($white, .7);
874
- // $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
875
- // $off-canvas-back-bg: #444;
876
- // $off-canvas-back-border-top: $off-canvas-label-border-top;
877
- // $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
878
- // $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
879
- // $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
880
- // $off-canvas-back-hover-border-bottom: none;
881
-
882
- // Off Canvas Menu Icon Variables
883
- // $tabbar-menu-icon-color: $white;
884
- // $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
885
-
886
- // $tabbar-menu-icon-text-indent: rem-calc(35);
887
- // $tabbar-menu-icon-width: $tabbar-icon-width;
888
- // $tabbar-menu-icon-height: $tabbar-height;
889
- // $tabbar-menu-icon-padding: 0;
890
-
891
- // $tabbar-hamburger-icon-width: rem-calc(16);
892
- // $tabbar-hamburger-icon-left: false;
893
- // $tabbar-hamburger-icon-top: false;
894
- // $tabbar-hamburger-icon-thickness: 1px;
895
- // $tabbar-hamburger-icon-gap: 6px;
896
-
897
- // Off Canvas Back-Link Overlay
898
- // $off-canvas-overlay-transition: background 300ms ease;
899
- // $off-canvas-overlay-cursor: pointer;
900
- // $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5);
901
- // $off-canvas-overlay-background: rgba($white, .2);
902
- // $off-canvas-overlay-background-hover: rgba($white, .05);
903
-
904
- // Transition Variables
905
- // $menu-slide: "transform 500ms ease";
906
-
907
- // 19. Orbit
908
- // - - - - - - - - - - - - - - - - - - - - - - - - -
909
-
910
- // $include-html-orbit-classes: $include-html-classes;
911
-
912
- // We use these to control the caption styles
913
- // $orbit-container-bg: none;
914
- // $orbit-caption-bg: rgba(51,51,51, .8);
915
- // $orbit-caption-font-color: $white;
916
- // $orbit-caption-font-size: rem-calc(14);
917
- // $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
918
- // $orbit-caption-padding: rem-calc(10 14);
919
- // $orbit-caption-height: auto;
920
-
921
- // We use these to control the left/right nav styles
922
- // $orbit-nav-bg: transparent;
923
- // $orbit-nav-bg-hover: rgba(0,0,0,0.3);
924
- // $orbit-nav-arrow-color: $white;
925
- // $orbit-nav-arrow-color-hover: $white;
926
-
927
- // We use these to control the timer styles
928
- // $orbit-timer-bg: rgba(255,255,255,0.3);
929
- // $orbit-timer-show-progress-bar: true;
930
-
931
- // We use these to control the bullet nav styles
932
- // $orbit-bullet-nav-color: $iron;
933
- // $orbit-bullet-nav-color-active: $aluminum;
934
- // $orbit-bullet-radius: rem-calc(9);
935
-
936
- // We use these to controls the style of slide numbers
937
- // $orbit-slide-number-bg: rgba(0,0,0,0);
938
- // $orbit-slide-number-font-color: $white;
939
- // $orbit-slide-number-padding: rem-calc(5);
940
-
941
- // Graceful Loading Wrapper and preloader
942
- // $wrapper-class: "slideshow-wrapper";
943
- // $preloader-class: "preloader";
944
-
945
- // Hide controls on small
946
- // $orbit-nav-hide-for-small: true;
947
- // $orbit-bullet-hide-for-small: true;
948
- // $orbit-timer-hide-for-small: true;
949
-
950
- // 20. Pagination
951
- // - - - - - - - - - - - - - - - - - - - - - - - - -
952
-
953
- // $include-pagination-classes: $include-html-classes;
954
-
955
- // We use these to control the pagination container
956
- // $pagination-height: rem-calc(24);
957
- // $pagination-margin: rem-calc(-5);
958
-
959
- // We use these to set the list-item properties
960
- // $pagination-li-float: $default-float;
961
- // $pagination-li-height: rem-calc(24);
962
- // $pagination-li-font-color: $jet;
963
- // $pagination-li-font-size: rem-calc(14);
964
- // $pagination-li-margin: rem-calc(5);
965
-
966
- // We use these for the pagination anchor links
967
- // $pagination-link-pad: rem-calc(1 10 1);
968
- // $pagination-link-font-color: $aluminum;
969
- // $pagination-link-active-bg: scale-color($white, $lightness: -10%);
970
-
971
- // We use these for disabled anchor links
972
- // $pagination-link-unavailable-cursor: default;
973
- // $pagination-link-unavailable-font-color: $aluminum;
974
- // $pagination-link-unavailable-bg-active: transparent;
975
-
976
- // We use these for currently selected anchor links
977
- // $pagination-link-current-background: $primary-color;
978
- // $pagination-link-current-font-color: $white;
979
- // $pagination-link-current-font-weight: $font-weight-bold;
980
- // $pagination-link-current-cursor: default;
981
- // $pagination-link-current-active-bg: $primary-color;
982
-
983
- // 21. Panels
984
- // - - - - - - - - - - - - - - - - - - - - - - - - -
985
-
986
- // $include-html-panel-classes: $include-html-classes;
987
-
988
- // We use these to control the background and border styles
989
- // $panel-bg: scale-color($white, $lightness: -5%);
990
- // $panel-border-style: solid;
991
- // $panel-border-size: 1px;
992
- // $callout-panel-bg: scale-color($primary-color, $lightness: 94%);
993
-
994
- // We use this % to control how much we darken things on hover
995
- // $panel-border-color: scale-color($panel-bg, $lightness: -11%);
996
-
997
- // We use these to set default inner padding and bottom margin
998
- // $panel-margin-bottom: rem-calc(20);
999
- // $panel-padding: rem-calc(20);
1000
-
1001
- // We use these to set default font colors
1002
- // $panel-font-color: $oil;
1003
- // $panel-font-color-alt: $white;
1004
-
1005
- // $panel-header-adjust: true;
1006
- // $callout-panel-link-color: $primary-color;
1007
- // $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%);
1008
-
1009
- // 22. Pricing Tables
1010
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1011
-
1012
- // $include-html-pricing-classes: $include-html-classes;
1013
-
1014
- // We use this to control the border color
1015
- // $price-table-border: solid 1px $gainsboro;
1016
-
1017
- // We use this to control the bottom margin of the pricing table
1018
- // $price-table-margin-bottom: rem-calc(20);
1019
-
1020
- // We use these to control the title styles
1021
- // $price-title-bg: $oil;
1022
- // $price-title-padding: rem-calc(15 20);
1023
- // $price-title-align: center;
1024
- // $price-title-color: $smoke;
1025
- // $price-title-weight: $font-weight-normal;
1026
- // $price-title-size: rem-calc(16);
1027
- // $price-title-font-family: $body-font-family;
1028
-
1029
- // We use these to control the price styles
1030
- // $price-money-bg: $vapor;
1031
- // $price-money-padding: rem-calc(15 20);
1032
- // $price-money-align: center;
1033
- // $price-money-color: $oil;
1034
- // $price-money-weight: $font-weight-normal;
1035
- // $price-money-size: rem-calc(32);
1036
- // $price-money-font-family: $body-font-family;
1037
-
1038
-
1039
- // We use these to control the description styles
1040
- // $price-bg: $white;
1041
- // $price-desc-color: $monsoon;
1042
- // $price-desc-padding: rem-calc(15);
1043
- // $price-desc-align: center;
1044
- // $price-desc-font-size: rem-calc(12);
1045
- // $price-desc-weight: $font-weight-normal;
1046
- // $price-desc-line-height: 1.4;
1047
- // $price-desc-bottom-border: dotted 1px $gainsboro;
1048
-
1049
- // We use these to control the list item styles
1050
- // $price-item-color: $oil;
1051
- // $price-item-padding: rem-calc(15);
1052
- // $price-item-align: center;
1053
- // $price-item-font-size: rem-calc(14);
1054
- // $price-item-weight: $font-weight-normal;
1055
- // $price-item-bottom-border: dotted 1px $gainsboro;
1056
-
1057
- // We use these to control the CTA area styles
1058
- // $price-cta-bg: $white;
1059
- // $price-cta-align: center;
1060
- // $price-cta-padding: rem-calc(20 20 0);
1061
-
1062
- // 23. Progress Bar
1063
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1064
-
1065
- // $include-html-media-classes: $include-html-classes;
1066
-
1067
- // We use this to set the progress bar height
1068
- // $progress-bar-height: rem-calc(25);
1069
- // $progress-bar-color: $vapor;
1070
-
1071
- // We use these to control the border styles
1072
- // $progress-bar-border-color: scale-color($white, $lightness: 20%);
1073
- // $progress-bar-border-size: 1px;
1074
- // $progress-bar-border-style: solid;
1075
- // $progress-bar-border-radius: $global-radius;
1076
-
1077
- // We use these to control the margin & padding
1078
- // $progress-bar-margin-bottom: rem-calc(10);
1079
-
1080
- // We use these to set the meter colors
1081
- // $progress-meter-color: $primary-color;
1082
- // $progress-meter-secondary-color: $secondary-color;
1083
- // $progress-meter-success-color: $success-color;
1084
- // $progress-meter-alert-color: $alert-color;
1085
-
1086
- // 24. Range Slider
1087
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1088
-
1089
- // $include-html-range-slider-classes: $include-html-classes;
1090
-
1091
- // These variables define the slider bar styles
1092
- // $range-slider-bar-width: 100%;
1093
- // $range-slider-bar-height: rem-calc(16);
1094
-
1095
- // $range-slider-bar-border-width: 1px;
1096
- // $range-slider-bar-border-style: solid;
1097
- // $range-slider-bar-border-color: $gainsboro;
1098
- // $range-slider-radius: $global-radius;
1099
- // $range-slider-round: $global-rounded;
1100
- // $range-slider-bar-bg-color: $ghost;
1101
- // $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
1102
-
1103
- // Vertical bar styles
1104
- // $range-slider-vertical-bar-width: rem-calc(16);
1105
- // $range-slider-vertical-bar-height: rem-calc(200);
1106
-
1107
- // These variabels define the slider handle styles
1108
- // $range-slider-handle-width: rem-calc(32);
1109
- // $range-slider-handle-height: rem-calc(22);
1110
- // $range-slider-handle-position-top: rem-calc(-5);
1111
- // $range-slider-handle-bg-color: $primary-color;
1112
- // $range-slider-handle-border-width: 1px;
1113
- // $range-slider-handle-border-style: solid;
1114
- // $range-slider-handle-border-color: none;
1115
- // $range-slider-handle-radius: $global-radius;
1116
- // $range-slider-handle-round: $global-rounded;
1117
- // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
1118
- // $range-slider-handle-cursor: pointer;
1119
-
1120
- // $range-slider-disabled-opacity: .7;
1121
- // $range-slider-disabled-cursor: $cursor-disabled-value;
1122
-
1123
- // 25. Reveal
1124
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1125
-
1126
- // $include-html-reveal-classes: $include-html-classes;
1127
-
1128
- // We use these to control the style of the reveal overlay.
1129
- // $reveal-overlay-bg: rgba($black, .45);
1130
- // $reveal-overlay-bg-old: $black;
1131
-
1132
- // We use these to control the style of the modal itself.
1133
- // $reveal-modal-bg: $white;
1134
- // $reveal-position-top: rem-calc(100);
1135
- // $reveal-default-width: 80%;
1136
- // $reveal-max-width: $row-width;
1137
- // $reveal-modal-padding: rem-calc(20);
1138
- // $reveal-box-shadow: 0 0 10px rgba($black,.4);
1139
-
1140
- // We use these to style the reveal close button
1141
- // $reveal-close-font-size: rem-calc(40);
1142
- // $reveal-close-top: rem-calc(10);
1143
- // $reveal-close-side: rem-calc(22);
1144
- // $reveal-close-color: $base;
1145
- // $reveal-close-weight: $font-weight-bold;
1146
-
1147
- // We use this to set the default radius used throughout the core.
1148
- // $reveal-radius: $global-radius;
1149
- // $reveal-round: $global-rounded;
1150
-
1151
- // We use these to control the modal border
1152
- // $reveal-border-style: solid;
1153
- // $reveal-border-width: 1px;
1154
- // $reveal-border-color: $steel;
1155
-
1156
- // $reveal-modal-class: "reveal-modal";
1157
- // $close-reveal-modal-class: "close-reveal-modal";
1158
-
1159
- // 26. Side Nav
1160
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1161
-
1162
- // $include-html-nav-classes: $include-html-classes;
1163
-
1164
- // We use this to control padding.
1165
- // $side-nav-padding: rem-calc(14 0);
1166
-
1167
- // We use these to control list styles.
1168
- // $side-nav-list-type: none;
1169
- // $side-nav-list-position: outside;
1170
- // $side-nav-list-margin: rem-calc(0 0 7 0);
1171
-
1172
- // We use these to control link styles.
1173
- // $side-nav-link-color: $primary-color;
1174
- // $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
1175
- // $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
1176
- // $side-nav-link-bg-hover: hsla(0, 0, 0, .025);
1177
- // $side-nav-link-margin: 0;
1178
- // $side-nav-link-padding: rem-calc(7 14);
1179
- // $side-nav-font-size: rem-calc(14);
1180
- // $side-nav-font-weight: $font-weight-normal;
1181
- // $side-nav-font-weight-active: $side-nav-font-weight;
1182
- // $side-nav-font-family: $body-font-family;
1183
- // $side-nav-font-family-active: $side-nav-font-family;
1184
-
1185
- // We use these to control heading styles.
1186
- // $side-nav-heading-color: $side-nav-link-color;
1187
- // $side-nav-heading-font-size: $side-nav-font-size;
1188
- // $side-nav-heading-font-weight: bold;
1189
- // $side-nav-heading-text-transform: uppercase;
1190
-
1191
- // We use these to control border styles
1192
- // $side-nav-divider-size: 1px;
1193
- // $side-nav-divider-style: solid;
1194
- // $side-nav-divider-color: scale-color($white, $lightness: 10%);
1195
-
1196
- // 27. Split Buttons
1197
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1198
-
1199
- // $include-html-button-classes: $include-html-classes;
1200
-
1201
- // We use these to control different shared styles for Split Buttons
1202
- // $split-button-function-factor: 10%;
1203
- // $split-button-pip-color: $white;
1204
- // $split-button-span-border-color: rgba(255,255,255,0.5);
1205
- // $split-button-pip-color-alt: $oil;
1206
- // $split-button-active-bg-tint: rgba(0,0,0,0.1);
1207
-
1208
- // We use these to control tiny split buttons
1209
- // $split-button-padding-tny: $button-pip-tny * 10;
1210
- // $split-button-span-width-tny: $button-pip-tny * 6;
1211
- // $split-button-pip-size-tny: $button-pip-tny;
1212
- // $split-button-pip-top-tny: $button-pip-tny * 2;
1213
- // $split-button-pip-default-float-tny: rem-calc(-6);
1214
-
1215
- // We use these to control small split buttons
1216
- // $split-button-padding-sml: $button-pip-sml * 10;
1217
- // $split-button-span-width-sml: $button-pip-sml * 6;
1218
- // $split-button-pip-size-sml: $button-pip-sml;
1219
- // $split-button-pip-top-sml: $button-pip-sml * 1.5;
1220
- // $split-button-pip-default-float-sml: rem-calc(-6);
1221
-
1222
- // We use these to control medium split buttons
1223
- // $split-button-padding-med: $button-pip-med * 9;
1224
- // $split-button-span-width-med: $button-pip-med * 5.5;
1225
- // $split-button-pip-size-med: $button-pip-med - rem-calc(3);
1226
- // $split-button-pip-top-med: $button-pip-med * 1.5;
1227
- // $split-button-pip-default-float-med: rem-calc(-6);
1228
-
1229
- // We use these to control large split buttons
1230
- // $split-button-padding-lrg: $button-pip-lrg * 8;
1231
- // $split-button-span-width-lrg: $button-pip-lrg * 5;
1232
- // $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
1233
- // $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
1234
- // $split-button-pip-default-float-lrg: rem-calc(-6);
1235
-
1236
- // 28. Sub Nav
1237
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1238
-
1239
- // $include-html-nav-classes: $include-html-classes;
1240
-
1241
- // We use these to control margin and padding
1242
- // $sub-nav-list-margin: rem-calc(-4 0 18);
1243
- // $sub-nav-list-padding-top: rem-calc(4);
1244
-
1245
- // We use this to control the definition
1246
- // $sub-nav-font-family: $body-font-family;
1247
- // $sub-nav-font-size: rem-calc(14);
1248
- // $sub-nav-font-color: $aluminum;
1249
- // $sub-nav-font-weight: $font-weight-normal;
1250
- // $sub-nav-text-decoration: none;
1251
- // $sub-nav-padding: rem-calc(3 16);
1252
- // $sub-nav-border-radius: 3px;
1253
- // $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
1254
-
1255
-
1256
- // We use these to control the active item styles
1257
-
1258
- // $sub-nav-active-font-weight: $font-weight-normal;
1259
- // $sub-nav-active-bg: $primary-color;
1260
- // $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
1261
- // $sub-nav-active-color: $white;
1262
- // $sub-nav-active-padding: $sub-nav-padding;
1263
- // $sub-nav-active-cursor: default;
1264
-
1265
- // $sub-nav-item-divider: "";
1266
- // $sub-nav-item-divider-margin: rem-calc(12);
1267
-
1268
- // 29. Switch
1269
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1270
-
1271
- // $include-html-form-classes: $include-html-classes;
1272
-
1273
- // Controlling background color for the switch container
1274
- // $switch-bg: $gainsboro;
1275
-
1276
- // We use these to control the switch heights for our default classes
1277
- // $switch-height-tny: 1.5rem;
1278
- // $switch-height-sml: 1.75rem;
1279
- // $switch-height-med: 2rem;
1280
- // $switch-height-lrg: 2.5rem;
1281
- // $switch-bottom-margin: 1.5rem;
1282
-
1283
- // We use these to style the switch-paddle
1284
- // $switch-paddle-bg: $white;
1285
- // $switch-paddle-transition-speed: .15s;
1286
- // $switch-paddle-transition-ease: ease-out;
1287
- // $switch-active-color: $primary-color;
1288
-
1289
- // 30. Tables
1290
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1291
-
1292
- // $include-html-table-classes: $include-html-classes;
1293
-
1294
- // These control the background color for the table and even rows
1295
- // $table-bg: $white;
1296
- // $table-even-row-bg: $snow;
1297
-
1298
- // These control the table cell border style
1299
- // $table-border-style: solid;
1300
- // $table-border-size: 1px;
1301
- // $table-border-color: $gainsboro;
1302
-
1303
- // These control the table head styles
1304
- // $table-head-bg: $white-smoke;
1305
- // $table-head-font-size: rem-calc(14);
1306
- // $table-head-font-color: $jet;
1307
- // $table-head-font-weight: $font-weight-bold;
1308
- // $table-head-padding: rem-calc(8 10 10);
1309
-
1310
- // These control the table foot styles
1311
- // $table-foot-bg: $table-head-bg;
1312
- // $table-foot-font-size: $table-head-font-size;
1313
- // $table-foot-font-color: $table-head-font-color;
1314
- // $table-foot-font-weight: $table-head-font-weight;
1315
- // $table-foot-padding: $table-head-padding;
1316
-
1317
- // These control the caption
1318
- // table-caption-bg: transparent;
1319
- // $table-caption-font-color: $table-head-font-color;
1320
- // $table-caption-font-size: rem-calc(16);
1321
- // $table-caption-font-weight: bold;
1322
-
1323
- // These control the row padding and font styles
1324
- // $table-row-padding: rem-calc(9 10);
1325
- // $table-row-font-size: rem-calc(14);
1326
- // $table-row-font-color: $jet;
1327
- // $table-line-height: rem-calc(18);
1328
-
1329
- // These are for controlling the layout, display and margin of tables
1330
- // $table-layout: auto;
1331
- // $table-display: table-cell;
1332
- // $table-margin-bottom: rem-calc(20);
1333
-
1334
-
1335
- // 31. Tabs
1336
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1337
-
1338
- // $include-html-tabs-classes: $include-html-classes;
1339
-
1340
- // $tabs-navigation-padding: rem-calc(16);
1341
- // $tabs-navigation-bg-color: $silver;
1342
- // $tabs-navigation-active-bg-color: $white;
1343
- // $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
1344
- // $tabs-navigation-font-color: $jet;
1345
- // $tabs-navigation-active-font-color: $tabs-navigation-font-color;
1346
- // $tabs-navigation-font-size: rem-calc(16);
1347
- // $tabs-navigation-font-family: $body-font-family;
1348
-
1349
- // $tabs-content-margin-bottom: rem-calc(24);
1350
- // $tabs-content-padding: ($column-gutter/2);
1351
-
1352
- // $tabs-vertical-navigation-margin-bottom: 1.25rem;
1353
-
1354
- // 32. Thumbnails
1355
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1356
-
1357
- // $include-html-media-classes: $include-html-classes;
1358
-
1359
- // We use these to control border styles
1360
- // $thumb-border-style: solid;
1361
- // $thumb-border-width: 4px;
1362
- // $thumb-border-color: $white;
1363
- // $thumb-box-shadow: 0 0 0 1px rgba($black,.2);
1364
- // $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
1365
-
1366
- // Radius and transition speed for thumbs
1367
- // $thumb-radius: $global-radius;
1368
- // $thumb-transition-speed: 200ms;
1369
-
1370
- // 33. Tooltips
1371
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1372
-
1373
- // $include-html-tooltip-classes: $include-html-classes;
1374
-
1375
- // $has-tip-border-bottom: dotted 1px $iron;
1376
- // $has-tip-font-weight: $font-weight-bold;
1377
- $has-tip-font-color: $charcoal;
1378
- // $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
1379
- // $has-tip-font-color-hover: $primary-color;
1380
- // $has-tip-cursor-type: help;
1381
-
1382
- // $tooltip-padding: rem-calc(12);
1383
- $tooltip-bg: $slate;
1384
- // $tooltip-font-size: rem-calc(14);
1385
- // $tooltip-font-weight: $font-weight-normal;
1386
- // $tooltip-font-color: $white;
1387
- // $tooltip-line-height: 1.3;
1388
- // $tooltip-close-font-size: rem-calc(10);
1389
- // $tooltip-close-font-weight: $font-weight-normal;
1390
- // $tooltip-close-font-color: $monsoon;
1391
- // $tooltip-font-size-sml: rem-calc(14);
1392
- // $tooltip-radius: $global-radius;
1393
- // $tooltip-rounded: $global-rounded;
1394
- // $tooltip-pip-size: 5px;
1395
- // $tooltip-max-width: 300px;
1396
-
1397
- // 34. Top Bar
1398
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1399
-
1400
- $include-html-top-bar-classes: $include-html-classes;
1401
-
1402
- // Background color for the top bar
1403
- $topbar-bg-color: $brand-blue-dark;
1404
- $topbar-bg: $topbar-bg-color;
1405
-
1406
- // Height and margin
1407
- $topbar-height: 50px;
1408
- $topbar-margin-bottom: 30px;
1409
-
1410
- // Controlling the styles for the title in the top bar
1411
- // $topbar-title-weight: $font-weight-normal;
1412
- // $topbar-title-font-size: rem-calc(17);
1413
-
1414
- // Set the link colors and styles for top-level nav
1415
- // $topbar-link-color: $white;
1416
- // $topbar-link-color-hover: $white;
1417
- // $topbar-link-color-active: $white;
1418
- // $topbar-link-color-active-hover: $white;
1419
- // $topbar-link-weight: $font-weight-normal;
1420
- // $topbar-link-font-size: rem-calc(13);
1421
- $topbar-link-hover-lightness: -10%; // Darken by 10%
1422
- $topbar-link-bg: $topbar-bg;
1423
- $topbar-link-bg-hover: lighten($brand-blue-light, 3%);
1424
- // $topbar-link-bg-color-hover: $charcoal;
1425
- // $topbar-link-bg-active: $primary-color;
1426
- // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
1427
- // $topbar-link-font-family: $body-font-family;
1428
- // $topbar-link-text-transform: none;
1429
- // $topbar-link-padding: ($topbar-height / 3);
1430
- // $topbar-back-link-size: rem-calc(18);
1431
- // $topbar-link-dropdown-padding: rem-calc(20);
1432
- // $topbar-button-font-size: .75rem;
1433
- // $topbar-button-top: 7px;
1434
-
1435
- // Style the top bar dropdown elements
1436
- $topbar-dropdown-bg: $brand-blue-light;
1437
- // $topbar-dropdown-link-color: $white;
1438
- // $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
1439
- $topbar-dropdown-link-bg: none;
1440
- $topbar-dropdown-link-bg-hover: $brand-blue-dark;
1441
- // $topbar-dropdown-link-weight: $font-weight-normal;
1442
- // $topbar-dropdown-toggle-size: 5px;
1443
- // $topbar-dropdown-toggle-color: $white;
1444
- // $topbar-dropdown-toggle-alpha: .4;
1445
-
1446
- // $topbar-dropdown-label-color: $monsoon;
1447
- // $topbar-dropdown-label-text-transform: uppercase;
1448
- // $topbar-dropdown-label-font-weight: $font-weight-bold;
1449
- // $topbar-dropdown-label-font-size: rem-calc(10);
1450
- // $topbar-dropdown-label-bg: $oil;
1451
-
1452
- // Top menu icon styles
1453
- // $topbar-menu-link-transform: uppercase;
1454
- // $topbar-menu-link-font-size: rem-calc(13);
1455
- // $topbar-menu-link-weight: $font-weight-bold;
1456
- // $topbar-menu-link-color: $white;
1457
- // $topbar-menu-icon-color: $white;
1458
- // $topbar-menu-link-color-toggled: $jumbo;
1459
- // $topbar-menu-icon-color-toggled: $jumbo;#999
1460
- // $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
1461
-
1462
- // Transitions and breakpoint styles
1463
- // $topbar-transition-speed: 300ms;
1464
- // Using rem-calc for the below breakpoint causes issues with top bar
1465
- // $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
1466
- // $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
1467
-
1468
- // Top-bar input styles
1469
- // $topbar-input-height: rem-calc(28);
1470
-
1471
- // Divider Styles
1472
- // $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
1473
- $topbar-divider-border-top: solid 1px darken($brand-blue-light, 5%);
1474
-
1475
- // Sticky Class
1476
- // $topbar-sticky-class: ".sticky";
1477
- // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
1478
- // $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
1479
-
1480
- // 36. Visibility Classes
1481
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1482
-
1483
- // $include-html-visibility-classes: $include-html-classes;
1484
- // $include-accessibility-classes: true;
1485
- // $include-table-visibility-classes: true;
1486
- // $include-legacy-visibility-classes: true;
8
+ // @import 'motion-ui/motion-ui';
9
+
10
+ // We include everything by default. To slim your CSS, remove components you don't use.
11
+
12
+ @include foundation-global-styles;
13
+ @include foundation-grid;
14
+ @include foundation-typography;
15
+ @include foundation-button;
16
+ @include foundation-forms;
17
+ @include foundation-visibility-classes;
18
+ @include foundation-float-classes;
19
+ @include foundation-accordion;
20
+ @include foundation-accordion-menu;
21
+ @include foundation-badge;
22
+ @include foundation-breadcrumbs;
23
+ @include foundation-button-group;
24
+ @include foundation-callout;
25
+ @include foundation-close-button;
26
+ @include foundation-drilldown-menu;
27
+ @include foundation-dropdown;
28
+ @include foundation-dropdown-menu;
29
+ @include foundation-flex-video;
30
+ @include foundation-label;
31
+ @include foundation-media-object;
32
+ @include foundation-menu;
33
+ @include foundation-off-canvas;
34
+ @include foundation-orbit;
35
+ @include foundation-pagination;
36
+ @include foundation-progress-bar;
37
+ @include foundation-slider;
38
+ @include foundation-sticky;
39
+ @include foundation-reveal;
40
+ @include foundation-switch;
41
+ @include foundation-table;
42
+ @include foundation-tabs;
43
+ @include foundation-thumbnail;
44
+ @include foundation-title-bar;
45
+ @include foundation-tooltip;
46
+ @include foundation-top-bar;
47
+
48
+ // If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
49
+ //
50
+ // @include motion-ui-transitions;
51
+ // @include motion-ui-animations;