ama_layout 2.9.2 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
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;