foundation-rails 5.5.3.2 → 6.1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (169) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +1 -1
  3. data/README.md +2 -8
  4. data/Rakefile +23 -0
  5. data/app/views/foundation/rails/styleguide/show.html.erb +2 -5
  6. data/bower.json +2 -2
  7. data/lib/foundation/rails/version.rb +1 -1
  8. data/lib/generators/foundation/install_generator.rb +6 -3
  9. data/lib/generators/foundation/templates/_settings.scss +546 -0
  10. data/lib/generators/foundation/templates/application.html.erb +0 -1
  11. data/lib/generators/foundation/templates/application.html.haml +0 -2
  12. data/lib/generators/foundation/templates/application.html.slim +0 -2
  13. data/lib/generators/foundation/templates/foundation_and_overrides.scss +51 -0
  14. data/vendor/assets/js/foundation.abide.js +418 -0
  15. data/vendor/assets/js/foundation.accordion.js +229 -0
  16. data/vendor/assets/js/foundation.accordionMenu.js +262 -0
  17. data/vendor/assets/js/foundation.core.js +378 -0
  18. data/vendor/assets/js/foundation.drilldown.js +321 -0
  19. data/vendor/assets/js/foundation.dropdown.js +390 -0
  20. data/vendor/assets/js/foundation.dropdownMenu.js +391 -0
  21. data/vendor/assets/js/foundation.equalizer.js +274 -0
  22. data/vendor/assets/js/foundation.interchange.js +184 -0
  23. data/vendor/assets/js/foundation.js +28 -0
  24. data/vendor/assets/js/foundation.magellan.js +212 -0
  25. data/vendor/assets/js/foundation.offcanvas.js +371 -0
  26. data/vendor/assets/js/foundation.orbit.js +419 -0
  27. data/vendor/assets/js/foundation.responsiveMenu.js +145 -0
  28. data/vendor/assets/js/foundation.responsiveToggle.js +106 -0
  29. data/vendor/assets/js/foundation.reveal.js +478 -0
  30. data/vendor/assets/js/foundation.slider.js +484 -0
  31. data/vendor/assets/js/foundation.sticky.js +436 -0
  32. data/vendor/assets/js/foundation.tabs.js +306 -0
  33. data/vendor/assets/js/foundation.toggler.js +147 -0
  34. data/vendor/assets/js/foundation.tooltip.js +429 -0
  35. data/vendor/assets/js/foundation.util.box.js +169 -0
  36. data/vendor/assets/js/foundation.util.keyboard.js +115 -0
  37. data/vendor/assets/js/foundation.util.mediaQuery.js +210 -0
  38. data/vendor/assets/js/foundation.util.motion.js +89 -0
  39. data/vendor/assets/js/foundation.util.nest.js +64 -0
  40. data/vendor/assets/js/foundation.util.timerAndImageLoader.js +78 -0
  41. data/vendor/assets/js/foundation.util.touch.js +339 -0
  42. data/vendor/assets/js/foundation.util.triggers.js +222 -0
  43. data/vendor/assets/scss/_global.scss +626 -0
  44. data/vendor/assets/scss/components/_accordion-menu.scss +32 -0
  45. data/vendor/assets/scss/components/_accordion.scss +113 -0
  46. data/vendor/assets/scss/components/_badge.scss +55 -0
  47. data/vendor/assets/scss/components/_breadcrumbs.scss +94 -0
  48. data/vendor/assets/scss/components/_button-group.scss +130 -0
  49. data/vendor/assets/scss/components/_button.scss +265 -0
  50. data/vendor/assets/scss/components/_callout.scss +105 -0
  51. data/vendor/assets/scss/components/_close-button.scss +61 -0
  52. data/vendor/assets/scss/components/_drilldown.scss +75 -0
  53. data/vendor/assets/scss/components/_dropdown-menu.scss +148 -0
  54. data/vendor/assets/scss/components/_dropdown.scss +64 -0
  55. data/vendor/assets/scss/components/_flex-video.scss +63 -0
  56. data/vendor/assets/scss/components/_float.scss +27 -0
  57. data/vendor/assets/scss/components/_label.scss +56 -0
  58. data/vendor/assets/scss/components/_media-object.scss +74 -0
  59. data/vendor/assets/scss/components/_menu.scss +209 -0
  60. data/vendor/assets/scss/components/_off-canvas.scss +180 -0
  61. data/vendor/assets/scss/components/_orbit.scss +193 -0
  62. data/vendor/assets/scss/components/_pagination.scss +158 -0
  63. data/vendor/assets/scss/components/_progress-bar.scss +83 -0
  64. data/vendor/assets/scss/components/_reveal.scss +156 -0
  65. data/vendor/assets/scss/components/_slider.scss +158 -0
  66. data/vendor/assets/scss/components/_sticky.scss +38 -0
  67. data/vendor/assets/scss/components/_switch.scss +232 -0
  68. data/vendor/assets/scss/components/_table.scss +213 -0
  69. data/vendor/assets/scss/components/_tabs.scss +170 -0
  70. data/vendor/assets/scss/components/_thumbnail.scss +54 -0
  71. data/vendor/assets/scss/components/_title-bar.scss +68 -0
  72. data/vendor/assets/scss/components/_tooltip.scss +100 -0
  73. data/vendor/assets/scss/components/_top-bar.scss +89 -0
  74. data/vendor/assets/scss/components/_visibility.scss +131 -0
  75. data/vendor/assets/scss/forms/_checkbox.scss +36 -0
  76. data/vendor/assets/scss/forms/_error.scss +82 -0
  77. data/vendor/assets/scss/forms/_fieldset.scss +53 -0
  78. data/vendor/assets/scss/forms/_forms.scss +32 -0
  79. data/vendor/assets/scss/forms/_help-text.scss +30 -0
  80. data/vendor/assets/scss/forms/_input-group.scss +91 -0
  81. data/vendor/assets/scss/forms/_label.scss +48 -0
  82. data/vendor/assets/scss/forms/_select.scss +63 -0
  83. data/vendor/assets/scss/forms/_text.scss +154 -0
  84. data/vendor/assets/scss/foundation.scss +91 -0
  85. data/vendor/assets/scss/grid/_classes.scss +153 -0
  86. data/vendor/assets/scss/grid/_column.scss +124 -0
  87. data/vendor/assets/scss/grid/_flex-grid.scss +281 -0
  88. data/vendor/assets/scss/grid/_grid.scss +48 -0
  89. data/vendor/assets/scss/grid/_gutter.scss +34 -0
  90. data/vendor/assets/scss/grid/_layout.scss +33 -0
  91. data/vendor/assets/scss/grid/_position.scss +72 -0
  92. data/vendor/assets/scss/grid/_row.scss +97 -0
  93. data/vendor/assets/scss/grid/_size.scss +24 -0
  94. data/vendor/assets/scss/settings/_settings.scss +547 -0
  95. data/vendor/assets/scss/typography/_alignment.scss +22 -0
  96. data/vendor/assets/scss/typography/_base.scss +439 -0
  97. data/vendor/assets/scss/typography/_helpers.scss +77 -0
  98. data/vendor/assets/scss/typography/_print.scss +73 -0
  99. data/vendor/assets/scss/typography/_typography.scss +28 -0
  100. data/vendor/assets/scss/util/_breakpoint.scss +266 -0
  101. data/vendor/assets/scss/util/_color.scss +41 -0
  102. data/vendor/assets/scss/util/_mixins.scss +223 -0
  103. data/vendor/assets/scss/util/_selector.scss +40 -0
  104. data/vendor/assets/scss/util/_unit.scss +90 -0
  105. data/vendor/assets/scss/util/_util.scss +15 -0
  106. data/vendor/assets/scss/util/_value.scss +126 -0
  107. metadata +97 -64
  108. data/update-gem.sh +0 -20
  109. data/vendor/assets/javascripts/foundation.js +0 -17
  110. data/vendor/assets/javascripts/foundation/foundation.abide.js +0 -426
  111. data/vendor/assets/javascripts/foundation/foundation.accordion.js +0 -125
  112. data/vendor/assets/javascripts/foundation/foundation.alert.js +0 -43
  113. data/vendor/assets/javascripts/foundation/foundation.clearing.js +0 -586
  114. data/vendor/assets/javascripts/foundation/foundation.dropdown.js +0 -468
  115. data/vendor/assets/javascripts/foundation/foundation.equalizer.js +0 -104
  116. data/vendor/assets/javascripts/foundation/foundation.interchange.js +0 -360
  117. data/vendor/assets/javascripts/foundation/foundation.joyride.js +0 -935
  118. data/vendor/assets/javascripts/foundation/foundation.js +0 -732
  119. data/vendor/assets/javascripts/foundation/foundation.magellan.js +0 -214
  120. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +0 -225
  121. data/vendor/assets/javascripts/foundation/foundation.orbit.js +0 -476
  122. data/vendor/assets/javascripts/foundation/foundation.reveal.js +0 -522
  123. data/vendor/assets/javascripts/foundation/foundation.slider.js +0 -296
  124. data/vendor/assets/javascripts/foundation/foundation.tab.js +0 -247
  125. data/vendor/assets/javascripts/foundation/foundation.tooltip.js +0 -348
  126. data/vendor/assets/javascripts/foundation/foundation.topbar.js +0 -458
  127. data/vendor/assets/javascripts/vendor/modernizr.js +0 -1406
  128. data/vendor/assets/stylesheets/foundation.scss +0 -42
  129. data/vendor/assets/stylesheets/foundation/_functions.scss +0 -156
  130. data/vendor/assets/stylesheets/foundation/_settings.scss +0 -1489
  131. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +0 -161
  132. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +0 -128
  133. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +0 -133
  134. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +0 -132
  135. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +0 -208
  136. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +0 -261
  137. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +0 -260
  138. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +0 -130
  139. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +0 -269
  140. data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +0 -51
  141. data/vendor/assets/stylesheets/foundation/components/_forms.scss +0 -607
  142. data/vendor/assets/stylesheets/foundation/components/_global.scss +0 -566
  143. data/vendor/assets/stylesheets/foundation/components/_grid.scss +0 -292
  144. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +0 -460
  145. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +0 -58
  146. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +0 -220
  147. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +0 -60
  148. data/vendor/assets/stylesheets/foundation/components/_labels.scss +0 -106
  149. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +0 -34
  150. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +0 -606
  151. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +0 -388
  152. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +0 -163
  153. data/vendor/assets/stylesheets/foundation/components/_panels.scss +0 -107
  154. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +0 -150
  155. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +0 -85
  156. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +0 -177
  157. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +0 -212
  158. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +0 -120
  159. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +0 -203
  160. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +0 -125
  161. data/vendor/assets/stylesheets/foundation/components/_switches.scss +0 -241
  162. data/vendor/assets/stylesheets/foundation/components/_tables.scss +0 -135
  163. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +0 -142
  164. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +0 -66
  165. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +0 -142
  166. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +0 -745
  167. data/vendor/assets/stylesheets/foundation/components/_type.scss +0 -525
  168. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +0 -425
  169. data/vendor/assets/stylesheets/normalize.scss +0 -424
@@ -1,42 +0,0 @@
1
- // Foundation by ZURB
2
- // foundation.zurb.com
3
- // Licensed under MIT Open Source
4
-
5
- // Behold, here are all the Foundation components.
6
- @import 'foundation/components/grid';
7
- @import 'foundation/components/accordion';
8
- @import 'foundation/components/alert-boxes';
9
- @import 'foundation/components/block-grid';
10
- @import 'foundation/components/breadcrumbs';
11
- @import 'foundation/components/button-groups';
12
- @import 'foundation/components/buttons';
13
- @import 'foundation/components/clearing';
14
- @import 'foundation/components/dropdown';
15
- @import 'foundation/components/dropdown-buttons';
16
- @import 'foundation/components/flex-video';
17
- @import 'foundation/components/forms';
18
- @import 'foundation/components/icon-bar';
19
- @import 'foundation/components/inline-lists';
20
- @import 'foundation/components/joyride';
21
- @import 'foundation/components/keystrokes';
22
- @import 'foundation/components/labels';
23
- @import 'foundation/components/magellan';
24
- @import 'foundation/components/orbit';
25
- @import 'foundation/components/pagination';
26
- @import 'foundation/components/panels';
27
- @import 'foundation/components/pricing-tables';
28
- @import 'foundation/components/progress-bars';
29
- @import 'foundation/components/range-slider';
30
- @import 'foundation/components/reveal';
31
- @import 'foundation/components/side-nav';
32
- @import 'foundation/components/split-buttons';
33
- @import 'foundation/components/sub-nav';
34
- @import 'foundation/components/switches';
35
- @import 'foundation/components/tables';
36
- @import 'foundation/components/tabs';
37
- @import 'foundation/components/thumbs';
38
- @import 'foundation/components/tooltips';
39
- @import 'foundation/components/top-bar';
40
- @import 'foundation/components/type';
41
- @import 'foundation/components/offcanvas';
42
- @import 'foundation/components/visibility';
@@ -1,156 +0,0 @@
1
- // Foundation by ZURB
2
- // foundation.zurb.com
3
- // Licensed under MIT Open Source
4
-
5
- // This is the default html and body font-size for the base rem value.
6
- $rem-base: 16px !default;
7
-
8
- // IMPORT ONCE
9
- // We use this to prevent styles from being loaded multiple times for components that rely on other components.
10
- $modules: () !default;
11
-
12
- @mixin exports($name) {
13
- // Import from global scope
14
- $modules: $modules !global;
15
- // Check if a module is already on the list
16
- $module_index: index($modules, $name);
17
- @if (($module_index == null) or ($module_index == false)) {
18
- $modules: append($modules, $name) !global;
19
- @content;
20
- }
21
- }
22
-
23
- //
24
- // @functions
25
- //
26
-
27
-
28
- // RANGES
29
- // We use these functions to define ranges for various things, like media queries.
30
- @function lower-bound($range) {
31
- @if length($range) <= 0 {
32
- @return 0;
33
- }
34
- @return nth($range, 1);
35
- }
36
-
37
- @function upper-bound($range) {
38
- @if length($range) < 2 {
39
- @return 999999999999;
40
- }
41
- @return nth($range, 2);
42
- }
43
-
44
- // STRIP UNIT
45
- // It strips the unit of measure and returns it
46
- @function strip-unit($num) {
47
- @return $num / ($num * 0 + 1);
48
- }
49
-
50
- // TEXT INPUT TYPES
51
-
52
- @function text-inputs( $types: all, $selector: input ) {
53
-
54
- $return: ();
55
-
56
- $all-text-input-types:
57
- text
58
- password
59
- date
60
- datetime
61
- datetime-local
62
- month
63
- week
64
- email
65
- number
66
- search
67
- tel
68
- time
69
- url
70
- color
71
- textarea;
72
-
73
- @if $types == all { $types: $all-text-input-types; }
74
-
75
- @each $type in $types {
76
- @if $type == textarea {
77
- @if $selector == input {
78
- $return: append($return, unquote('#{$type}'), comma)
79
- } @else {
80
- $return: append($return, unquote('#{$type}#{$selector}'), comma)
81
- }
82
- } @else {
83
- $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
84
- }
85
- }
86
-
87
- @return $return;
88
-
89
- }
90
-
91
- // CONVERT TO REM
92
- @function convert-to-rem($value, $base-value: $rem-base) {
93
- $value: strip-unit($value) / strip-unit($base-value) * 1rem;
94
- @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
95
- @return $value;
96
- }
97
-
98
- @function data($attr) {
99
- @if $namespace {
100
- @return '[data-' + $namespace + '-' + $attr + ']';
101
- }
102
-
103
- @return '[data-' + $attr + ']';
104
- }
105
-
106
- // REM CALC
107
-
108
- // New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
109
- // Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
110
- //
111
- // rem-calc(10 20 30px 40);
112
- //
113
- // Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
114
- //
115
- // rem-calc((10, 20, 30, 40px));
116
- //
117
- // Optionally call with a different base (eg: 8px) to calculate rem.
118
- //
119
- // rem-calc(16px 32px 48px, 8px);
120
- //
121
- // If you require to comma separate your list
122
- //
123
- // rem-calc((16px, 32px, 48), 8px);
124
-
125
- @function rem-calc($values, $base-value: $rem-base) {
126
- $max: length($values);
127
-
128
- @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
129
-
130
- $remValues: ();
131
- @for $i from 1 through $max {
132
- $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
133
- }
134
- @return $remValues;
135
- }
136
-
137
-
138
- @function em-calc($values, $base-value: $rem-base) {
139
- $remValues: rem-calc($values, $base-value: $rem-base);
140
-
141
- $max: length($remValues);
142
-
143
- @if $max == 1 { @return strip-unit(nth($remValues, 1)) * 1em; }
144
-
145
- $emValues: ();
146
- @for $i from 1 through $max {
147
- $emValues: append($emValues, strip-unit(nth($remValues, $i)) * 1em);
148
- }
149
- @return $emValues;
150
- }
151
-
152
-
153
- // Deprecated: OLD EM CALC
154
- @function emCalc($values) {
155
- @return em-calc($values);
156
- }
@@ -1,1489 +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;
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-active-font-color: $jet;
340
- // $accordion-navigation-font-color: $jet;
341
- // $accordion-navigation-font-size: rem-calc(16);
342
- // $accordion-navigation-font-family: $body-font-family;
343
-
344
- // $accordion-content-padding: ($column-gutter/2);
345
- // $accordion-content-active-bg-color: $white;
346
-
347
- // 02. Alert Boxes
348
- // - - - - - - - - - - - - - - - - - - - - - - - - -
349
-
350
- // $include-html-alert-classes: $include-html-classes;
351
-
352
- // We use this to control alert padding.
353
- // $alert-padding-top: rem-calc(14);
354
- // $alert-padding-default-float: $alert-padding-top;
355
- // $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
356
- // $alert-padding-bottom: $alert-padding-top;
357
-
358
- // We use these to control text style.
359
- // $alert-font-weight: $font-weight-normal;
360
- // $alert-font-size: rem-calc(13);
361
- // $alert-font-color: $white;
362
- // $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
363
-
364
- // We use this for close hover effect.
365
- // $alert-function-factor: -14%;
366
-
367
- // We use these to control border styles.
368
- // $alert-border-style: solid;
369
- // $alert-border-width: 1px;
370
- // $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
371
- // $alert-bottom-margin: rem-calc(20);
372
-
373
- // We use these to style the close buttons
374
- // $alert-close-color: $oil;
375
- // $alert-close-top: 50%;
376
- // $alert-close-position: rem-calc(4);
377
- // $alert-close-font-size: rem-calc(22);
378
- // $alert-close-opacity: .3;
379
- // $alert-close-opacity-hover: .5;
380
- // $alert-close-padding: 9px 6px 4px;
381
- // $alert-close-background: inherit;
382
-
383
- // We use this to control border radius
384
- // $alert-radius: $global-radius;
385
-
386
- // $alert-transition-speed: 300ms;
387
- // $alert-transition-ease: ease-out;
388
-
389
- // 03. Block Grid
390
- // - - - - - - - - - - - - - - - - - - - - - - - - -
391
-
392
- // $include-html-block-grid-classes: $include-html-classes;
393
- // $include-xl-html-block-grid-classes: false;
394
-
395
- // We use this to control the maximum number of block grid elements per row
396
- // $block-grid-elements: 12;
397
- // $block-grid-default-spacing: rem-calc(20);
398
-
399
- // $align-block-grid-to-grid: false;
400
- // @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
401
-
402
- // Enables media queries for block-grid classes. Set to false if writing semantic HTML.
403
- // $block-grid-media-queries: true;
404
-
405
- // 04. Breadcrumbs
406
- // - - - - - - - - - - - - - - - - - - - - - - - - -
407
-
408
- // $include-html-nav-classes: $include-html-classes;
409
-
410
- // We use this to set the background color for the breadcrumb container.
411
- // $crumb-bg: scale-color($secondary-color, $lightness: 55%);
412
-
413
- // We use these to set the padding around the breadcrumbs.
414
- // $crumb-padding: rem-calc(9 14 9);
415
- // $crumb-side-padding: rem-calc(12);
416
-
417
- // We use these to control border styles.
418
- // $crumb-function-factor: -10%;
419
- // $crumb-border-size: 1px;
420
- // $crumb-border-style: solid;
421
- // $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
422
- // $crumb-radius: $global-radius;
423
-
424
- // We use these to set various text styles for breadcrumbs.
425
- // $crumb-font-size: rem-calc(11);
426
- // $crumb-font-color: $primary-color;
427
- // $crumb-font-color-current: $oil;
428
- // $crumb-font-color-unavailable: $aluminum;
429
- // $crumb-font-transform: uppercase;
430
- // $crumb-link-decor: underline;
431
-
432
- // We use these to control the slash between breadcrumbs
433
- // $crumb-slash-color: $base;
434
- // $crumb-slash: "/";
435
- // $crumb-slash-position: 1px;
436
-
437
- // 05. Buttons
438
- // - - - - - - - - - - - - - - - - - - - - - - - - -
439
-
440
- // $include-html-button-classes: $include-html-classes;
441
-
442
- // We use these to build padding for buttons.
443
- // $button-tny: rem-calc(10);
444
- // $button-sml: rem-calc(14);
445
- // $button-med: rem-calc(16);
446
- // $button-lrg: rem-calc(18);
447
-
448
- // We use this to control the display property.
449
- // $button-display: inline-block;
450
- // $button-margin-bottom: rem-calc(20);
451
-
452
- // We use these to control button text styles.
453
- // $button-font-family: $body-font-family;
454
- // $button-font-color: $white;
455
- // $button-font-color-alt: $oil;
456
- // $button-font-tny: rem-calc(11);
457
- // $button-font-sml: rem-calc(13);
458
- // $button-font-med: rem-calc(16);
459
- // $button-font-lrg: rem-calc(20);
460
- // $button-font-weight: $font-weight-normal;
461
- // $button-font-align: center;
462
-
463
- // We use these to control various hover effects.
464
- // $button-function-factor: -20%;
465
-
466
- // We use these to control button border styles.
467
- // $button-border-width: 0;
468
- // $button-border-style: solid;
469
- // $button-bg-color: $primary-color;
470
- // $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor);
471
- // $button-border-color: $button-bg-hover;
472
- // $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor);
473
- // $secondary-button-border-color: $secondary-button-bg-hover;
474
- // $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor);
475
- // $success-button-border-color: $success-button-bg-hover;
476
- // $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
477
- // $alert-button-border-color: $alert-button-bg-hover;
478
- // $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor);
479
- // $warning-button-border-color: $warning-button-bg-hover;
480
- // $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor);
481
- // $info-button-border-color: $info-button-bg-hover;
482
-
483
- // We use this to set the default radius used throughout the core.
484
- // $button-radius: $global-radius;
485
- // $button-round: $global-rounded;
486
-
487
- // We use this to set default opacity and cursor for disabled buttons.
488
- // $button-disabled-opacity: .7;
489
- // $button-disabled-cursor: $cursor-default-value;
490
-
491
- // 06. Button Groups
492
- // - - - - - - - - - - - - - - - - - - - - - - - - -
493
-
494
- // $include-html-button-classes: $include-html-classes;
495
-
496
- // Sets the margin for the right side by default, and the left margin if right-to-left direction is used
497
- // $button-bar-margin-opposite: rem-calc(10);
498
- // $button-group-border-width: 1px;
499
-
500
- // 07. Clearing
501
- // - - - - - - - - - - - - - - - - - - - - - - - - -
502
-
503
- // $include-html-clearing-classes: $include-html-classes;
504
-
505
- // We use these to set the background colors for parts of Clearing.
506
- // $clearing-bg: $oil;
507
- // $clearing-caption-bg: $clearing-bg;
508
- // $clearing-carousel-bg: rgba(51,51,51,0.8);
509
- // $clearing-img-bg: $clearing-bg;
510
-
511
- // We use these to style the close button
512
- // $clearing-close-color: $iron;
513
- // $clearing-close-size: 30px;
514
-
515
- // We use these to style the arrows
516
- // $clearing-arrow-size: 12px;
517
- // $clearing-arrow-color: $clearing-close-color;
518
-
519
- // We use these to style captions
520
- // $clearing-caption-font-color: $iron;
521
- // $clearing-caption-font-size: .875em;
522
- // $clearing-caption-padding: 10px 30px 20px;
523
-
524
- // We use these to make the image and carousel height and style
525
- // $clearing-active-img-height: 85%;
526
- // $clearing-carousel-height: 120px;
527
- // $clearing-carousel-thumb-width: 120px;
528
- // $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
529
-
530
- // 08. Dropdown
531
- // - - - - - - - - - - - - - - - - - - - - - - - - -
532
-
533
- // $include-html-dropdown-classes: $include-html-classes;
534
-
535
- // We use these to controls height and width styles.
536
- // $f-dropdown-max-width: 200px;
537
- // $f-dropdown-height: auto;
538
- // $f-dropdown-max-height: none;
539
-
540
- // Used for bottom position
541
- // $f-dropdown-margin-top: 2px;
542
-
543
- // Used for right position
544
- // $f-dropdown-margin-left: $f-dropdown-margin-top;
545
-
546
- // Used for left position
547
- // $f-dropdown-margin-right: $f-dropdown-margin-top;
548
-
549
- // Used for top position
550
- // $f-dropdown-margin-bottom: $f-dropdown-margin-top;
551
-
552
- // We use this to control the background color
553
- // $f-dropdown-bg: $white;
554
-
555
- // We use this to set the border styles for dropdowns.
556
- // $f-dropdown-border-style: solid;
557
- // $f-dropdown-border-width: 1px;
558
- // $f-dropdown-border-color: scale-color($white, $lightness: -20%);
559
-
560
- // We use these to style the triangle pip.
561
- // $f-dropdown-triangle-size: 6px;
562
- // $f-dropdown-triangle-color: $white;
563
- // $f-dropdown-triangle-side-offset: 10px;
564
-
565
- // We use these to control styles for the list elements.
566
- // $f-dropdown-list-style: none;
567
- // $f-dropdown-font-color: $charcoal;
568
- // $f-dropdown-font-size: rem-calc(14);
569
- // $f-dropdown-list-padding: rem-calc(5, 10);
570
- // $f-dropdown-line-height: rem-calc(18);
571
- // $f-dropdown-list-hover-bg: $smoke;
572
- // $dropdown-mobile-default-float: 0;
573
-
574
- // We use this to control the styles for when the dropdown has custom content.
575
- // $f-dropdown-content-padding: rem-calc(20);
576
-
577
- // Default radius for dropdown.
578
- // $f-dropdown-radius: $global-radius;
579
-
580
-
581
- // 09. Dropdown Buttons
582
- // - - - - - - - - - - - - - - - - - - - - - - - - -
583
-
584
- // $include-html-button-classes: $include-html-classes;
585
-
586
- // We use these to set the color of the pip in dropdown buttons
587
- // $dropdown-button-pip-color: $white;
588
- // $dropdown-button-pip-color-alt: $oil;
589
-
590
- // We use these to set the size of the pip in dropdown buttons
591
- // $button-pip-tny: rem-calc(6);
592
- // $button-pip-sml: rem-calc(7);
593
- // $button-pip-med: rem-calc(9);
594
- // $button-pip-lrg: rem-calc(11);
595
-
596
- // We use these to style tiny dropdown buttons
597
- // $dropdown-button-padding-tny: $button-pip-tny * 7;
598
- // $dropdown-button-pip-size-tny: $button-pip-tny;
599
- // $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
600
- // $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1);
601
-
602
- // We use these to style small dropdown buttons
603
- // $dropdown-button-padding-sml: $button-pip-sml * 7;
604
- // $dropdown-button-pip-size-sml: $button-pip-sml;
605
- // $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
606
- // $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1);
607
-
608
- // We use these to style medium dropdown buttons
609
- // $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
610
- // $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
611
- // $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
612
- // $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2);
613
-
614
- // We use these to style large dropdown buttons
615
- // $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
616
- // $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
617
- // $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
618
- // $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3);
619
-
620
- // 10. Flex Video
621
- // - - - - - - - - - - - - - - - - - - - - - - - - -
622
-
623
- // $include-html-media-classes: $include-html-classes;
624
-
625
- // We use these to control video container padding and margins
626
- // $flex-video-padding-top: rem-calc(25);
627
- // $flex-video-padding-bottom: 67.5%;
628
- // $flex-video-margin-bottom: rem-calc(16);
629
-
630
- // We use this to control widescreen bottom padding
631
- // $flex-video-widescreen-padding-bottom: 56.34%;
632
-
633
- // 11. Forms
634
- // - - - - - - - - - - - - - - - - - - - - - - - - -
635
-
636
- // $include-html-form-classes: $include-html-classes;
637
-
638
- // We use this to set the base for lots of form spacing and positioning styles
639
- // $form-spacing: rem-calc(16);
640
-
641
- // We use these to style the labels in different ways
642
- // $form-label-pointer: pointer;
643
- // $form-label-font-size: rem-calc(14);
644
- // $form-label-font-weight: $font-weight-normal;
645
- // $form-label-line-height: 1.5;
646
- // $form-label-font-color: scale-color($black, $lightness: 30%);
647
- // $form-label-small-transform: capitalize;
648
- // $form-label-bottom-margin: 0;
649
- // $input-font-family: inherit;
650
- // $input-font-color: rgba(0,0,0,0.75);
651
- // $input-font-size: rem-calc(14);
652
- // $input-placeholder-font-color: #cccccc;
653
- // $input-bg-color: $white;
654
- // $input-focus-bg-color: scale-color($white, $lightness: -2%);
655
- // $input-border-color: scale-color($white, $lightness: -20%);
656
- // $input-focus-border-color: scale-color($white, $lightness: -40%);
657
- // $input-border-style: solid;
658
- // $input-border-width: 1px;
659
- // $input-border-radius: $global-radius;
660
- // $input-disabled-bg: $gainsboro;
661
- // $input-disabled-cursor: $cursor-default-value;
662
- // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
663
- // $input-include-glowing-effect: false;
664
-
665
- // We use these to style the fieldset border and spacing.
666
- // $fieldset-border-style: solid;
667
- // $fieldset-border-width: 1px;
668
- // $fieldset-border-color: $gainsboro;
669
- // $fieldset-padding: rem-calc(20);
670
- // $fieldset-margin: rem-calc(18 0);
671
-
672
- // We use these to style the legends when you use them
673
- // $legend-bg: $white;
674
- // $legend-font-weight: $font-weight-bold;
675
- // $legend-padding: rem-calc(0 3);
676
-
677
- // We use these to style the prefix and postfix input elements
678
- // $input-prefix-bg: scale-color($white, $lightness: -5%);
679
- // $input-prefix-border-color: scale-color($white, $lightness: -20%);
680
- // $input-prefix-border-size: 1px;
681
- // $input-prefix-border-type: solid;
682
- // $input-prefix-overflow: hidden;
683
- // $input-prefix-font-color: $oil;
684
- // $input-prefix-font-color-alt: $white;
685
-
686
- // We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
687
- // $input-number-spinners: true;
688
-
689
- // We use these to style the error states for inputs and labels
690
- // $input-error-message-padding: rem-calc(6 9 9);
691
- // $input-error-message-top: -1px;
692
- // $input-error-message-font-size: rem-calc(12);
693
- // $input-error-message-font-weight: $font-weight-normal;
694
- // $input-error-message-font-style: italic;
695
- // $input-error-message-font-color: $white;
696
- // $input-error-message-bg-color: $alert-color;
697
- // $input-error-message-font-color-alt: $oil;
698
-
699
- // We use this to style the glowing effect of inputs when focused
700
- // $glowing-effect-fade-time: .45s;
701
- // $glowing-effect-color: $input-focus-border-color;
702
-
703
- // We use this to style the transition when inputs are focused and when the glowing effect is disabled.
704
- // $input-transition-fade-time: 0.15s;
705
- // $input-transition-fade-timing-function: linear;
706
-
707
- // Select variables
708
- // $select-bg-color: $ghost;
709
- // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
710
-
711
-
712
- // 12. Icon Bar
713
- // - - - - - - - - - - - - - - - - - - - - - - - - -
714
-
715
- // We use these to style the icon-bar and items
716
- // $icon-bar-bg: $oil;
717
- // $icon-bar-font-color: $white;
718
- // $icon-bar-font-color-hover: $icon-bar-font-color;
719
- // $icon-bar-font-size: 1rem;
720
- // $icon-bar-hover-color: $primary-color;
721
- // $icon-bar-icon-color: $white;
722
- // $icon-bar-icon-color-hover: $icon-bar-icon-color;
723
- // $icon-bar-icon-size: 1.875rem;
724
- // $icon-bar-image-width: 1.875rem;
725
- // $icon-bar-image-height: 1.875rem;
726
- // $icon-bar-active-color: $primary-color;
727
- // $icon-bar-item-padding: 1.25rem;
728
-
729
- // We use this to set default opacity and cursor for disabled icons.
730
- // $icon-bar-disabled-opacity: .7;
731
-
732
- // 13. Inline Lists
733
- // - - - - - - - - - - - - - - - - - - - - - - - - -
734
-
735
- // $include-html-inline-list-classes: $include-html-classes;
736
-
737
- // We use this to control the margins and padding of the inline list.
738
- // $inline-list-top-margin: 0;
739
- // $inline-list-opposite-margin: 0;
740
- // $inline-list-bottom-margin: rem-calc(17);
741
- // $inline-list-default-float-margin: rem-calc(-22);
742
- // $inline-list-default-float-list-margin: rem-calc(22);
743
-
744
- // $inline-list-padding: 0;
745
-
746
- // We use this to control the overflow of the inline list.
747
- // $inline-list-overflow: hidden;
748
-
749
- // We use this to control the list items
750
- // $inline-list-display: block;
751
-
752
- // We use this to control any elements within list items
753
- // $inline-list-children-display: block;
754
-
755
- // 14. Joyride
756
- // - - - - - - - - - - - - - - - - - - - - - - - - -
757
-
758
- // $include-html-joyride-classes: $include-html-classes;
759
-
760
- // Controlling default Joyride styles
761
- // $joyride-tip-bg: $oil;
762
- // $joyride-tip-default-width: 300px;
763
- // $joyride-tip-padding: rem-calc(18 20 24);
764
- // $joyride-tip-border: solid 1px $charcoal;
765
- // $joyride-tip-radius: 4px;
766
- // $joyride-tip-position-offset: 22px;
767
-
768
- // Here, we're setting the tip font styles
769
- // $joyride-tip-font-color: $white;
770
- // $joyride-tip-font-size: rem-calc(14);
771
- // $joyride-tip-header-weight: $font-weight-bold;
772
-
773
- // This changes the nub size
774
- // $joyride-tip-nub-size: 10px;
775
-
776
- // This adjusts the styles for the timer when its enabled
777
- // $joyride-tip-timer-width: 50px;
778
- // $joyride-tip-timer-height: 3px;
779
- // $joyride-tip-timer-color: $steel;
780
-
781
- // This changes up the styles for the close button
782
- // $joyride-tip-close-color: $monsoon;
783
- // $joyride-tip-close-size: 24px;
784
- // $joyride-tip-close-weight: $font-weight-normal;
785
-
786
- // When Joyride is filling the screen, we use this style for the bg
787
- // $joyride-screenfill: rgba(0,0,0,0.5);
788
-
789
- // 15. Keystrokes
790
- // - - - - - - - - - - - - - - - - - - - - - - - - -
791
-
792
- // $include-html-keystroke-classes: $include-html-classes;
793
-
794
- // We use these to control text styles.
795
- // $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
796
- // $keystroke-font-size: inherit;
797
- // $keystroke-font-color: $jet;
798
- // $keystroke-font-color-alt: $white;
799
- // $keystroke-function-factor: -7%;
800
-
801
- // We use this to control keystroke padding.
802
- // $keystroke-padding: rem-calc(2 4 0);
803
-
804
- // We use these to control background and border styles.
805
- // $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);
806
- // $keystroke-border-style: solid;
807
- // $keystroke-border-width: 1px;
808
- // $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
809
- // $keystroke-radius: $global-radius;
810
-
811
- // 16. Labels
812
- // - - - - - - - - - - - - - - - - - - - - - - - - -
813
-
814
- // $include-html-label-classes: $include-html-classes;
815
-
816
- // We use these to style the labels
817
- // $label-padding: rem-calc(4 8 4);
818
- // $label-radius: $global-radius;
819
-
820
- // We use these to style the label text
821
- // $label-font-sizing: rem-calc(11);
822
- // $label-font-weight: $font-weight-normal;
823
- // $label-font-color: $oil;
824
- // $label-font-color-alt: $white;
825
- // $label-font-family: $body-font-family;
826
-
827
- // 17. Magellan
828
- // - - - - - - - - - - - - - - - - - - - - - - - - -
829
-
830
- // $include-html-magellan-classes: $include-html-classes;
831
-
832
- // $magellan-bg: $white;
833
- // $magellan-padding: 10px;
834
-
835
- // 18. Off-canvas
836
- // - - - - - - - - - - - - - - - - - - - - - - - - -
837
-
838
- // Off Canvas Tab Bar Variables
839
- // $include-html-off-canvas-classes: $include-html-classes;
840
-
841
- // $tabbar-bg: $oil;
842
- // $tabbar-height: rem-calc(45);
843
- // $tabbar-icon-width: $tabbar-height;
844
- // $tabbar-line-height: $tabbar-height;
845
- // $tabbar-color: $white;
846
- // $tabbar-middle-padding: 0 rem-calc(10);
847
-
848
- // Off Canvas Divider Styles
849
- // $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
850
- // $tabbar-right-section-border: $tabbar-left-section-border;
851
-
852
-
853
- // Off Canvas Tab Bar Headers
854
- // $tabbar-header-color: $white;
855
- // $tabbar-header-weight: $font-weight-bold;
856
- // $tabbar-header-line-height: $tabbar-height;
857
- // $tabbar-header-margin: 0;
858
-
859
- // Off Canvas Menu Variables
860
- // $off-canvas-width: rem-calc(250);
861
- // $off-canvas-bg: $oil;
862
- // $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
863
- // $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%);
864
-
865
- // Off Canvas Menu List Variables
866
- // $off-canvas-label-padding: .3rem rem-calc(15);
867
- // $off-canvas-label-color: $aluminum;
868
- // $off-canvas-label-text-transform: uppercase;
869
- // $off-canvas-label-font-size: rem-calc(12);
870
- // $off-canvas-label-font-weight: $font-weight-bold;
871
- // $off-canvas-label-bg: $tuatara;
872
- // $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
873
- // $off-canvas-label-border-bottom: none;
874
- // $off-canvas-label-margin:0;
875
- // $off-canvas-link-padding: rem-calc(10, 15);
876
- // $off-canvas-link-color: rgba($white, .7);
877
- // $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
878
- // $off-canvas-back-bg: #444;
879
- // $off-canvas-back-border-top: $off-canvas-label-border-top;
880
- // $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
881
- // $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
882
- // $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
883
- // $off-canvas-back-hover-border-bottom: none;
884
-
885
- // Off Canvas Menu Icon Variables
886
- // $tabbar-menu-icon-color: $white;
887
- // $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
888
-
889
- // $tabbar-menu-icon-text-indent: rem-calc(35);
890
- // $tabbar-menu-icon-width: $tabbar-icon-width;
891
- // $tabbar-menu-icon-height: $tabbar-height;
892
- // $tabbar-menu-icon-padding: 0;
893
-
894
- // $tabbar-hamburger-icon-width: rem-calc(16);
895
- // $tabbar-hamburger-icon-left: false;
896
- // $tabbar-hamburger-icon-top: false;
897
- // $tabbar-hamburger-icon-thickness: 1px;
898
- // $tabbar-hamburger-icon-gap: 6px;
899
-
900
- // Off Canvas Back-Link Overlay
901
- // $off-canvas-overlay-transition: background 300ms ease;
902
- // $off-canvas-overlay-cursor: pointer;
903
- // $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5);
904
- // $off-canvas-overlay-background: rgba($white, .2);
905
- // $off-canvas-overlay-background-hover: rgba($white, .05);
906
-
907
- // Transition Variables
908
- // $menu-slide: "transform 500ms ease";
909
-
910
- // 19. Orbit
911
- // - - - - - - - - - - - - - - - - - - - - - - - - -
912
-
913
- // $include-html-orbit-classes: $include-html-classes;
914
-
915
- // We use these to control the caption styles
916
- // $orbit-container-bg: none;
917
- // $orbit-caption-bg: rgba(51,51,51, .8);
918
- // $orbit-caption-font-color: $white;
919
- // $orbit-caption-font-size: rem-calc(14);
920
- // $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
921
- // $orbit-caption-padding: rem-calc(10 14);
922
- // $orbit-caption-height: auto;
923
-
924
- // We use these to control the left/right nav styles
925
- // $orbit-nav-bg: transparent;
926
- // $orbit-nav-bg-hover: rgba(0,0,0,0.3);
927
- // $orbit-nav-arrow-color: $white;
928
- // $orbit-nav-arrow-color-hover: $white;
929
-
930
- // We use these to control the timer styles
931
- // $orbit-timer-bg: rgba(255,255,255,0.3);
932
- // $orbit-timer-show-progress-bar: true;
933
-
934
- // We use these to control the bullet nav styles
935
- // $orbit-bullet-nav-color: $iron;
936
- // $orbit-bullet-nav-color-active: $aluminum;
937
- // $orbit-bullet-radius: rem-calc(9);
938
-
939
- // We use these to controls the style of slide numbers
940
- // $orbit-slide-number-bg: rgba(0,0,0,0);
941
- // $orbit-slide-number-font-color: $white;
942
- // $orbit-slide-number-padding: rem-calc(5);
943
-
944
- // Graceful Loading Wrapper and preloader
945
- // $wrapper-class: "slideshow-wrapper";
946
- // $preloader-class: "preloader";
947
-
948
- // Hide controls on small
949
- // $orbit-nav-hide-for-small: true;
950
- // $orbit-bullet-hide-for-small: true;
951
- // $orbit-timer-hide-for-small: true;
952
-
953
- // 20. Pagination
954
- // - - - - - - - - - - - - - - - - - - - - - - - - -
955
-
956
- // $include-pagination-classes: $include-html-classes;
957
-
958
- // We use these to control the pagination container
959
- // $pagination-height: rem-calc(24);
960
- // $pagination-margin: rem-calc(-5);
961
-
962
- // We use these to set the list-item properties
963
- // $pagination-li-float: $default-float;
964
- // $pagination-li-height: rem-calc(24);
965
- // $pagination-li-font-color: $jet;
966
- // $pagination-li-font-size: rem-calc(14);
967
- // $pagination-li-margin: rem-calc(5);
968
-
969
- // We use these for the pagination anchor links
970
- // $pagination-link-pad: rem-calc(1 10 1);
971
- // $pagination-link-font-color: $aluminum;
972
- // $pagination-link-active-bg: scale-color($white, $lightness: -10%);
973
-
974
- // We use these for disabled anchor links
975
- // $pagination-link-unavailable-cursor: default;
976
- // $pagination-link-unavailable-font-color: $aluminum;
977
- // $pagination-link-unavailable-bg-active: transparent;
978
-
979
- // We use these for currently selected anchor links
980
- // $pagination-link-current-background: $primary-color;
981
- // $pagination-link-current-font-color: $white;
982
- // $pagination-link-current-font-weight: $font-weight-bold;
983
- // $pagination-link-current-cursor: default;
984
- // $pagination-link-current-active-bg: $primary-color;
985
-
986
- // 21. Panels
987
- // - - - - - - - - - - - - - - - - - - - - - - - - -
988
-
989
- // $include-html-panel-classes: $include-html-classes;
990
-
991
- // We use these to control the background and border styles
992
- // $panel-bg: scale-color($white, $lightness: -5%);
993
- // $panel-border-style: solid;
994
- // $panel-border-size: 1px;
995
- // $callout-panel-bg: scale-color($primary-color, $lightness: 94%);
996
-
997
- // We use this % to control how much we darken things on hover
998
- // $panel-border-color: scale-color($panel-bg, $lightness: -11%);
999
-
1000
- // We use these to set default inner padding and bottom margin
1001
- // $panel-margin-bottom: rem-calc(20);
1002
- // $panel-padding: rem-calc(20);
1003
-
1004
- // We use these to set default font colors
1005
- // $panel-font-color: $oil;
1006
- // $panel-font-color-alt: $white;
1007
-
1008
- // $panel-header-adjust: true;
1009
- // $callout-panel-link-color: $primary-color;
1010
- // $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%);
1011
-
1012
- // 22. Pricing Tables
1013
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1014
-
1015
- // $include-html-pricing-classes: $include-html-classes;
1016
-
1017
- // We use this to control the border color
1018
- // $price-table-border: solid 1px $gainsboro;
1019
-
1020
- // We use this to control the bottom margin of the pricing table
1021
- // $price-table-margin-bottom: rem-calc(20);
1022
-
1023
- // We use these to control the title styles
1024
- // $price-title-bg: $oil;
1025
- // $price-title-padding: rem-calc(15 20);
1026
- // $price-title-align: center;
1027
- // $price-title-color: $smoke;
1028
- // $price-title-weight: $font-weight-normal;
1029
- // $price-title-size: rem-calc(16);
1030
- // $price-title-font-family: $body-font-family;
1031
-
1032
- // We use these to control the price styles
1033
- // $price-money-bg: $vapor;
1034
- // $price-money-padding: rem-calc(15 20);
1035
- // $price-money-align: center;
1036
- // $price-money-color: $oil;
1037
- // $price-money-weight: $font-weight-normal;
1038
- // $price-money-size: rem-calc(32);
1039
- // $price-money-font-family: $body-font-family;
1040
-
1041
-
1042
- // We use these to control the description styles
1043
- // $price-bg: $white;
1044
- // $price-desc-color: $monsoon;
1045
- // $price-desc-padding: rem-calc(15);
1046
- // $price-desc-align: center;
1047
- // $price-desc-font-size: rem-calc(12);
1048
- // $price-desc-weight: $font-weight-normal;
1049
- // $price-desc-line-height: 1.4;
1050
- // $price-desc-bottom-border: dotted 1px $gainsboro;
1051
-
1052
- // We use these to control the list item styles
1053
- // $price-item-color: $oil;
1054
- // $price-item-padding: rem-calc(15);
1055
- // $price-item-align: center;
1056
- // $price-item-font-size: rem-calc(14);
1057
- // $price-item-weight: $font-weight-normal;
1058
- // $price-item-bottom-border: dotted 1px $gainsboro;
1059
-
1060
- // We use these to control the CTA area styles
1061
- // $price-cta-bg: $white;
1062
- // $price-cta-align: center;
1063
- // $price-cta-padding: rem-calc(20 20 0);
1064
-
1065
- // 23. Progress Bar
1066
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1067
-
1068
- // $include-html-media-classes: $include-html-classes;
1069
-
1070
- // We use this to set the progress bar height
1071
- // $progress-bar-height: rem-calc(25);
1072
- // $progress-bar-color: $vapor;
1073
-
1074
- // We use these to control the border styles
1075
- // $progress-bar-border-color: scale-color($white, $lightness: 20%);
1076
- // $progress-bar-border-size: 1px;
1077
- // $progress-bar-border-style: solid;
1078
- // $progress-bar-border-radius: $global-radius;
1079
-
1080
- // We use these to control the margin & padding
1081
- // $progress-bar-margin-bottom: rem-calc(10);
1082
-
1083
- // We use these to set the meter colors
1084
- // $progress-meter-color: $primary-color;
1085
- // $progress-meter-secondary-color: $secondary-color;
1086
- // $progress-meter-success-color: $success-color;
1087
- // $progress-meter-alert-color: $alert-color;
1088
-
1089
- // 24. Range Slider
1090
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1091
-
1092
- // $include-html-range-slider-classes: $include-html-classes;
1093
-
1094
- // These variables define the slider bar styles
1095
- // $range-slider-bar-width: 100%;
1096
- // $range-slider-bar-height: rem-calc(16);
1097
-
1098
- // $range-slider-bar-border-width: 1px;
1099
- // $range-slider-bar-border-style: solid;
1100
- // $range-slider-bar-border-color: $gainsboro;
1101
- // $range-slider-radius: $global-radius;
1102
- // $range-slider-round: $global-rounded;
1103
- // $range-slider-bar-bg-color: $ghost;
1104
- // $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
1105
-
1106
- // Vertical bar styles
1107
- // $range-slider-vertical-bar-width: rem-calc(16);
1108
- // $range-slider-vertical-bar-height: rem-calc(200);
1109
-
1110
- // These variables define the slider handle styles
1111
- // $range-slider-handle-width: rem-calc(32);
1112
- // $range-slider-handle-height: rem-calc(22);
1113
- // $range-slider-handle-position-top: rem-calc(-5);
1114
- // $range-slider-handle-bg-color: $primary-color;
1115
- // $range-slider-handle-border-width: 1px;
1116
- // $range-slider-handle-border-style: solid;
1117
- // $range-slider-handle-border-color: none;
1118
- // $range-slider-handle-radius: $global-radius;
1119
- // $range-slider-handle-round: $global-rounded;
1120
- // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
1121
- // $range-slider-handle-cursor: pointer;
1122
-
1123
- // $range-slider-disabled-opacity: .7;
1124
- // $range-slider-disabled-cursor: $cursor-disabled-value;
1125
-
1126
- // 25. Reveal
1127
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1128
-
1129
- // $include-html-reveal-classes: $include-html-classes;
1130
-
1131
- // We use these to control the style of the reveal overlay.
1132
- // $reveal-overlay-bg: rgba($black, .45);
1133
- // $reveal-overlay-bg-old: $black;
1134
-
1135
- // We use these to control the style of the modal itself.
1136
- // $reveal-modal-bg: $white;
1137
- // $reveal-position-top: rem-calc(100);
1138
- // $reveal-default-width: 80%;
1139
- // $reveal-max-width: $row-width;
1140
- // $reveal-modal-padding: rem-calc(20);
1141
- // $reveal-box-shadow: 0 0 10px rgba($black,.4);
1142
-
1143
- // We use these to style the reveal close button
1144
- // $reveal-close-font-size: rem-calc(40);
1145
- // $reveal-close-top: rem-calc(10);
1146
- // $reveal-close-side: rem-calc(22);
1147
- // $reveal-close-color: $base;
1148
- // $reveal-close-weight: $font-weight-bold;
1149
-
1150
- // We use this to set the default radius used throughout the core.
1151
- // $reveal-radius: $global-radius;
1152
- // $reveal-round: $global-rounded;
1153
-
1154
- // We use these to control the modal border
1155
- // $reveal-border-style: solid;
1156
- // $reveal-border-width: 1px;
1157
- // $reveal-border-color: $steel;
1158
-
1159
- // $reveal-modal-class: "reveal-modal";
1160
- // $close-reveal-modal-class: "close-reveal-modal";
1161
-
1162
- // 26. Side Nav
1163
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1164
-
1165
- // $include-html-nav-classes: $include-html-classes;
1166
-
1167
- // We use this to control padding.
1168
- // $side-nav-padding: rem-calc(14 0);
1169
-
1170
- // We use these to control list styles.
1171
- // $side-nav-list-type: none;
1172
- // $side-nav-list-position: outside;
1173
- // $side-nav-list-margin: rem-calc(0 0 7 0);
1174
-
1175
- // We use these to control link styles.
1176
- // $side-nav-link-color: $primary-color;
1177
- // $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
1178
- // $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
1179
- // $side-nav-link-bg-hover: hsla(0, 0, 0, .025);
1180
- // $side-nav-link-margin: 0;
1181
- // $side-nav-link-padding: rem-calc(7 14);
1182
- // $side-nav-font-size: rem-calc(14);
1183
- // $side-nav-font-weight: $font-weight-normal;
1184
- // $side-nav-font-weight-active: $side-nav-font-weight;
1185
- // $side-nav-font-family: $body-font-family;
1186
- // $side-nav-font-family-active: $side-nav-font-family;
1187
-
1188
- // We use these to control heading styles.
1189
- // $side-nav-heading-color: $side-nav-link-color;
1190
- // $side-nav-heading-font-size: $side-nav-font-size;
1191
- // $side-nav-heading-font-weight: bold;
1192
- // $side-nav-heading-text-transform: uppercase;
1193
-
1194
- // We use these to control border styles
1195
- // $side-nav-divider-size: 1px;
1196
- // $side-nav-divider-style: solid;
1197
- // $side-nav-divider-color: scale-color($white, $lightness: 10%);
1198
-
1199
- // 27. Split Buttons
1200
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1201
-
1202
- // $include-html-button-classes: $include-html-classes;
1203
-
1204
- // We use these to control different shared styles for Split Buttons
1205
- // $split-button-function-factor: 10%;
1206
- // $split-button-pip-color: $white;
1207
- // $split-button-span-border-color: rgba(255,255,255,0.5);
1208
- // $split-button-pip-color-alt: $oil;
1209
- // $split-button-active-bg-tint: rgba(0,0,0,0.1);
1210
-
1211
- // We use these to control tiny split buttons
1212
- // $split-button-padding-tny: $button-pip-tny * 10;
1213
- // $split-button-span-width-tny: $button-pip-tny * 6;
1214
- // $split-button-pip-size-tny: $button-pip-tny;
1215
- // $split-button-pip-top-tny: $button-pip-tny * 2;
1216
- // $split-button-pip-default-float-tny: rem-calc(-6);
1217
-
1218
- // We use these to control small split buttons
1219
- // $split-button-padding-sml: $button-pip-sml * 10;
1220
- // $split-button-span-width-sml: $button-pip-sml * 6;
1221
- // $split-button-pip-size-sml: $button-pip-sml;
1222
- // $split-button-pip-top-sml: $button-pip-sml * 1.5;
1223
- // $split-button-pip-default-float-sml: rem-calc(-6);
1224
-
1225
- // We use these to control medium split buttons
1226
- // $split-button-padding-med: $button-pip-med * 9;
1227
- // $split-button-span-width-med: $button-pip-med * 5.5;
1228
- // $split-button-pip-size-med: $button-pip-med - rem-calc(3);
1229
- // $split-button-pip-top-med: $button-pip-med * 1.5;
1230
- // $split-button-pip-default-float-med: rem-calc(-6);
1231
-
1232
- // We use these to control large split buttons
1233
- // $split-button-padding-lrg: $button-pip-lrg * 8;
1234
- // $split-button-span-width-lrg: $button-pip-lrg * 5;
1235
- // $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
1236
- // $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
1237
- // $split-button-pip-default-float-lrg: rem-calc(-6);
1238
-
1239
- // 28. Sub Nav
1240
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1241
-
1242
- // $include-html-nav-classes: $include-html-classes;
1243
-
1244
- // We use these to control margin and padding
1245
- // $sub-nav-list-margin: rem-calc(-4 0 18);
1246
- // $sub-nav-list-padding-top: rem-calc(4);
1247
-
1248
- // We use this to control the definition
1249
- // $sub-nav-font-family: $body-font-family;
1250
- // $sub-nav-font-size: rem-calc(14);
1251
- // $sub-nav-font-color: $aluminum;
1252
- // $sub-nav-font-weight: $font-weight-normal;
1253
- // $sub-nav-text-decoration: none;
1254
- // $sub-nav-padding: rem-calc(3 16);
1255
- // $sub-nav-border-radius: 3px;
1256
- // $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
1257
-
1258
-
1259
- // We use these to control the active item styles
1260
-
1261
- // $sub-nav-active-font-weight: $font-weight-normal;
1262
- // $sub-nav-active-bg: $primary-color;
1263
- // $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
1264
- // $sub-nav-active-color: $white;
1265
- // $sub-nav-active-padding: $sub-nav-padding;
1266
- // $sub-nav-active-cursor: default;
1267
-
1268
- // $sub-nav-item-divider: "";
1269
- // $sub-nav-item-divider-margin: rem-calc(12);
1270
-
1271
- // 29. Switch
1272
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1273
-
1274
- // $include-html-form-classes: $include-html-classes;
1275
-
1276
- // Controlling background color for the switch container
1277
- // $switch-bg: $gainsboro;
1278
-
1279
- // We use these to control the switch heights for our default classes
1280
- // $switch-height-tny: 1.5rem;
1281
- // $switch-height-sml: 1.75rem;
1282
- // $switch-height-med: 2rem;
1283
- // $switch-height-lrg: 2.5rem;
1284
- // $switch-bottom-margin: 1.5rem;
1285
-
1286
- // We use these to style the switch-paddle
1287
- // $switch-paddle-bg: $white;
1288
- // $switch-paddle-transition-speed: .15s;
1289
- // $switch-paddle-transition-ease: ease-out;
1290
- // $switch-active-color: $primary-color;
1291
-
1292
- // 30. Tables
1293
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1294
-
1295
- // $include-html-table-classes: $include-html-classes;
1296
-
1297
- // These control the background color for the table and even rows
1298
- // $table-bg: $white;
1299
- // $table-even-row-bg: $snow;
1300
-
1301
- // These control the table cell border style
1302
- // $table-border-style: solid;
1303
- // $table-border-size: 1px;
1304
- // $table-border-color: $gainsboro;
1305
-
1306
- // These control the table head styles
1307
- // $table-head-bg: $white-smoke;
1308
- // $table-head-font-size: rem-calc(14);
1309
- // $table-head-font-color: $jet;
1310
- // $table-head-font-weight: $font-weight-bold;
1311
- // $table-head-padding: rem-calc(8 10 10);
1312
-
1313
- // These control the table foot styles
1314
- // $table-foot-bg: $table-head-bg;
1315
- // $table-foot-font-size: $table-head-font-size;
1316
- // $table-foot-font-color: $table-head-font-color;
1317
- // $table-foot-font-weight: $table-head-font-weight;
1318
- // $table-foot-padding: $table-head-padding;
1319
-
1320
- // These control the caption
1321
- // $table-caption-bg: transparent;
1322
- // $table-caption-font-color: $table-head-font-color;
1323
- // $table-caption-font-size: rem-calc(16);
1324
- // $table-caption-font-weight: bold;
1325
-
1326
- // These control the row padding and font styles
1327
- // $table-row-padding: rem-calc(9 10);
1328
- // $table-row-font-size: rem-calc(14);
1329
- // $table-row-font-color: $jet;
1330
- // $table-line-height: rem-calc(18);
1331
-
1332
- // These are for controlling the layout, display and margin of tables
1333
- // $table-layout: auto;
1334
- // $table-display: table-cell;
1335
- // $table-margin-bottom: rem-calc(20);
1336
-
1337
-
1338
- // 31. Tabs
1339
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1340
-
1341
- // $include-html-tabs-classes: $include-html-classes;
1342
-
1343
- // $tabs-navigation-padding: rem-calc(16);
1344
- // $tabs-navigation-bg-color: $silver;
1345
- // $tabs-navigation-active-bg-color: $white;
1346
- // $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
1347
- // $tabs-navigation-font-color: $jet;
1348
- // $tabs-navigation-active-font-color: $tabs-navigation-font-color;
1349
- // $tabs-navigation-font-size: rem-calc(16);
1350
- // $tabs-navigation-font-family: $body-font-family;
1351
-
1352
- // $tabs-content-margin-bottom: rem-calc(24);
1353
- // $tabs-content-padding: ($column-gutter/2);
1354
-
1355
- // $tabs-vertical-navigation-margin-bottom: 1.25rem;
1356
-
1357
- // 32. Thumbnails
1358
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1359
-
1360
- // $include-html-media-classes: $include-html-classes;
1361
-
1362
- // We use these to control border styles
1363
- // $thumb-border-style: solid;
1364
- // $thumb-border-width: 4px;
1365
- // $thumb-border-color: $white;
1366
- // $thumb-box-shadow: 0 0 0 1px rgba($black,.2);
1367
- // $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
1368
-
1369
- // Radius and transition speed for thumbs
1370
- // $thumb-radius: $global-radius;
1371
- // $thumb-transition-speed: 200ms;
1372
-
1373
- // 33. Tooltips
1374
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1375
-
1376
- // $include-html-tooltip-classes: $include-html-classes;
1377
-
1378
- // $has-tip-border-bottom: dotted 1px $iron;
1379
- // $has-tip-font-weight: $font-weight-bold;
1380
- // $has-tip-font-color: $oil;
1381
- // $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
1382
- // $has-tip-font-color-hover: $primary-color;
1383
- // $has-tip-cursor-type: help;
1384
-
1385
- // $tooltip-padding: rem-calc(12);
1386
- // $tooltip-bg: $oil;
1387
- // $tooltip-font-size: rem-calc(14);
1388
- // $tooltip-font-weight: $font-weight-normal;
1389
- // $tooltip-font-color: $white;
1390
- // $tooltip-line-height: 1.3;
1391
- // $tooltip-close-font-size: rem-calc(10);
1392
- // $tooltip-close-font-weight: $font-weight-normal;
1393
- // $tooltip-close-font-color: $monsoon;
1394
- // $tooltip-font-size-sml: rem-calc(14);
1395
- // $tooltip-radius: $global-radius;
1396
- // $tooltip-rounded: $global-rounded;
1397
- // $tooltip-pip-size: 5px;
1398
- // $tooltip-max-width: 300px;
1399
-
1400
- // 34. Top Bar
1401
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1402
-
1403
- // $include-html-top-bar-classes: $include-html-classes;
1404
-
1405
- // Background color for the top bar
1406
- // $topbar-bg-color: $oil;
1407
- // $topbar-bg: $topbar-bg-color;
1408
-
1409
- // Height and margin
1410
- // $topbar-height: rem-calc(45);
1411
- // $topbar-margin-bottom: 0;
1412
-
1413
- // Controlling the styles for the title in the top bar
1414
- // $topbar-title-weight: $font-weight-normal;
1415
- // $topbar-title-font-size: rem-calc(17);
1416
-
1417
- // Set the link colors and styles for top-level nav
1418
- // $topbar-link-color: $white;
1419
- // $topbar-link-color-hover: $white;
1420
- // $topbar-link-color-active: $white;
1421
- // $topbar-link-color-active-hover: $white;
1422
- // $topbar-link-weight: $font-weight-normal;
1423
- // $topbar-link-font-size: rem-calc(13);
1424
- // $topbar-link-hover-lightness: -10%; // Darken by 10%
1425
- // $topbar-link-bg: $topbar-bg;
1426
- // $topbar-link-bg-hover: $jet;
1427
- // $topbar-link-bg-color-hover: $charcoal;
1428
- // $topbar-link-bg-active: $primary-color;
1429
- // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
1430
- // $topbar-link-font-family: $body-font-family;
1431
- // $topbar-link-text-transform: none;
1432
- // $topbar-link-padding: ($topbar-height / 3);
1433
- // $topbar-back-link-size: rem-calc(18);
1434
- // $topbar-link-dropdown-padding: rem-calc(20);
1435
- // $topbar-button-font-size: .75rem;
1436
- // $topbar-button-top: 7px;
1437
-
1438
- // Style the top bar dropdown elements
1439
- // $topbar-dropdown-bg: $oil;
1440
- // $topbar-dropdown-link-color: $white;
1441
- // $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
1442
- // $topbar-dropdown-link-bg: $oil;
1443
- // $topbar-dropdown-link-bg-hover: $jet;
1444
- // $topbar-dropdown-link-weight: $font-weight-normal;
1445
- // $topbar-dropdown-toggle-size: 5px;
1446
- // $topbar-dropdown-toggle-color: $white;
1447
- // $topbar-dropdown-toggle-alpha: .4;
1448
-
1449
- // $topbar-dropdown-label-color: $monsoon;
1450
- // $topbar-dropdown-label-text-transform: uppercase;
1451
- // $topbar-dropdown-label-font-weight: $font-weight-bold;
1452
- // $topbar-dropdown-label-font-size: rem-calc(10);
1453
- // $topbar-dropdown-label-bg: $oil;
1454
-
1455
- // Top menu icon styles
1456
- // $topbar-menu-link-transform: uppercase;
1457
- // $topbar-menu-link-font-size: rem-calc(13);
1458
- // $topbar-menu-link-weight: $font-weight-bold;
1459
- // $topbar-menu-link-color: $white;
1460
- // $topbar-menu-icon-color: $white;
1461
- // $topbar-menu-link-color-toggled: $jumbo;
1462
- // $topbar-menu-icon-color-toggled: $jumbo;
1463
- // $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
1464
-
1465
- // Transitions and breakpoint styles
1466
- // $topbar-transition-speed: 300ms;
1467
- // Using rem-calc for the below breakpoint causes issues with top bar
1468
- // $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
1469
- // $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
1470
-
1471
- // Top-bar input styles
1472
- // $topbar-input-height: rem-calc(28);
1473
-
1474
- // Divider Styles
1475
- // $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
1476
- // $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
1477
-
1478
- // Sticky Class
1479
- // $topbar-sticky-class: ".sticky";
1480
- // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
1481
- // $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
1482
-
1483
- // 36. Visibility Classes
1484
- // - - - - - - - - - - - - - - - - - - - - - - - - -
1485
-
1486
- // $include-html-visibility-classes: $include-html-classes;
1487
- // $include-accessibility-classes: true;
1488
- // $include-table-visibility-classes: true;
1489
- // $include-legacy-visibility-classes: true;