foundation-rails 5.5.1.0 → 5.5.1.1

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