foundation-rails 5.3.3.0 → 5.4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. data/bower.json +2 -2
  2. data/lib/foundation/rails/version.rb +1 -1
  3. data/vendor/assets/_settings.scss +363 -258
  4. data/vendor/assets/javascripts/foundation/foundation.joyride.js +55 -27
  5. data/vendor/assets/javascripts/foundation/foundation.js +14 -2
  6. data/vendor/assets/javascripts/foundation/foundation.magellan.js +1 -1
  7. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +37 -6
  8. data/vendor/assets/javascripts/foundation/foundation.orbit.js +1 -1
  9. data/vendor/assets/javascripts/foundation/foundation.slider.js +1 -1
  10. data/vendor/assets/javascripts/foundation/foundation.topbar.js +19 -16
  11. data/vendor/assets/stylesheets/foundation/_settings.scss +363 -258
  12. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +3 -3
  13. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +2 -2
  14. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +8 -3
  15. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +89 -5
  16. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +2 -2
  17. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +5 -5
  18. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +4 -4
  19. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +7 -7
  20. data/vendor/assets/stylesheets/foundation/components/_forms.scss +18 -17
  21. data/vendor/assets/stylesheets/foundation/components/_global.scss +36 -9
  22. data/vendor/assets/stylesheets/foundation/components/_grid.scss +3 -1
  23. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +96 -33
  24. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +8 -8
  25. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +4 -4
  26. data/vendor/assets/stylesheets/foundation/components/_labels.scss +2 -2
  27. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +1 -1
  28. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +164 -12
  29. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +10 -10
  30. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +5 -5
  31. data/vendor/assets/stylesheets/foundation/components/_panels.scss +4 -4
  32. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +11 -11
  33. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +2 -2
  34. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +2 -2
  35. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +44 -38
  36. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +1 -1
  37. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +2 -2
  38. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +2 -2
  39. data/vendor/assets/stylesheets/foundation/components/_switches.scss +6 -2
  40. data/vendor/assets/stylesheets/foundation/components/_tables.scss +8 -6
  41. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +17 -6
  42. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +2 -2
  43. data/vendor/assets/stylesheets/foundation/components/_toolbar.scss +4 -4
  44. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +6 -5
  45. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +29 -26
  46. data/vendor/assets/stylesheets/foundation/components/_type.scss +8 -8
  47. metadata +4 -4
@@ -11,7 +11,7 @@ $include-html-orbit-classes: $include-html-classes !default;
11
11
  // We use these to control the caption styles
12
12
  $orbit-container-bg: none !default;
13
13
  $orbit-caption-bg: rgba(51,51,51, 0.8) !default;
14
- $orbit-caption-font-color: #fff !default;
14
+ $orbit-caption-font-color: $white !default;
15
15
  $orbit-caption-font-size: rem-calc(14) !default;
16
16
  $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
17
17
  $orbit-caption-padding: rem-calc(10 14) !default;
@@ -20,21 +20,21 @@ $orbit-caption-height: auto !default;
20
20
  // We use these to control the left/right nav styles
21
21
  $orbit-nav-bg: transparent !default;
22
22
  $orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
23
- $orbit-nav-arrow-color: #fff !default;
24
- $orbit-nav-arrow-color-hover: #fff !default;
23
+ $orbit-nav-arrow-color: $white !default;
24
+ $orbit-nav-arrow-color-hover: $white !default;
25
25
 
26
26
  // We use these to control the timer styles
27
27
  $orbit-timer-bg: rgba(255,255,255,0.3) !default;
28
28
  $orbit-timer-show-progress-bar: true !default;
29
29
 
30
30
  // We use these to control the bullet nav styles
31
- $orbit-bullet-nav-color: #ccc !default;
32
- $orbit-bullet-nav-color-active: #999 !default;
31
+ $orbit-bullet-nav-color: $iron !default;
32
+ $orbit-bullet-nav-color-active: $aluminum !default;
33
33
  $orbit-bullet-radius: rem-calc(9) !default;
34
34
 
35
35
  // We use these to controls the style of slide numbers
36
36
  $orbit-slide-number-bg: rgba(0,0,0,0) !default;
37
- $orbit-slide-number-font-color: #fff !default;
37
+ $orbit-slide-number-font-color: $white !default;
38
38
  $orbit-slide-number-padding: rem-calc(5) !default;
39
39
 
40
40
  // Graceful Loading Wrapper and preloader
@@ -107,7 +107,7 @@ $orbit-timer-hide-for-small: true !default;
107
107
  margin-top: -20px;
108
108
  margin-left: -20px;
109
109
  border: solid 3px;
110
- border-color: #555 #fff;
110
+ border-color: $charcoal $white;
111
111
  @include radius(1000px);
112
112
  animation-name: rotate;
113
113
  animation-duration: 1.5s;
@@ -209,7 +209,7 @@ $orbit-timer-hide-for-small: true !default;
209
209
  #{$opposite-direction}: 0;
210
210
  width: 11px;
211
211
  height: 14px;
212
- border: solid 4px #fff;
212
+ border: solid 4px $white;
213
213
  border-top: none;
214
214
  border-bottom: none;
215
215
  }
@@ -224,9 +224,9 @@ $orbit-timer-hide-for-small: true !default;
224
224
  border: inset 8px;
225
225
  border-left-style: solid;
226
226
  border-color: transparent;
227
- border-left-color: #fff;
227
+ border-left-color: $white;
228
228
  &.dark {
229
- border-left-color: #333;
229
+ border-left-color: $oil;
230
230
  }
231
231
  }
232
232
  }
@@ -16,23 +16,23 @@ $pagination-margin: rem-calc(-5) !default;
16
16
  // We use these to set the list-item properties
17
17
  $pagination-li-float: $default-float !default;
18
18
  $pagination-li-height: rem-calc(24) !default;
19
- $pagination-li-font-color: #222 !default;
19
+ $pagination-li-font-color: $jet !default;
20
20
  $pagination-li-font-size: rem-calc(14) !default;
21
21
  $pagination-li-margin: rem-calc(5) !default;
22
22
 
23
23
  // We use these for the pagination anchor links
24
24
  $pagination-link-pad: rem-calc(1 10 1) !default;
25
- $pagination-link-font-color: #999 !default;
26
- $pagination-link-active-bg: scale-color(#fff, $lightness: -10%) !default;
25
+ $pagination-link-font-color: $aluminum !default;
26
+ $pagination-link-active-bg: scale-color($white, $lightness: -10%) !default;
27
27
 
28
28
  // We use these for disabled anchor links
29
29
  $pagination-link-unavailable-cursor: default !default;
30
- $pagination-link-unavailable-font-color: #999 !default;
30
+ $pagination-link-unavailable-font-color: $aluminum !default;
31
31
  $pagination-link-unavailable-bg-active: transparent !default;
32
32
 
33
33
  // We use these for currently selected anchor links
34
34
  $pagination-link-current-background: $primary-color !default;
35
- $pagination-link-current-font-color: #fff !default;
35
+ $pagination-link-current-font-color: $white !default;
36
36
  $pagination-link-current-font-weight: $font-weight-bold !default;
37
37
  $pagination-link-current-cursor: default !default;
38
38
  $pagination-link-current-active-bg: $primary-color !default;
@@ -10,7 +10,7 @@
10
10
  $include-html-panel-classes: $include-html-classes !default;
11
11
 
12
12
  // We use these to control the background and border styles
13
- $panel-bg: scale-color(#fff, $lightness: -5%) !default;
13
+ $panel-bg: scale-color($white, $lightness: -5%) !default;
14
14
  $panel-border-style: solid !default;
15
15
  $panel-border-size: 1px !default;
16
16
 
@@ -23,8 +23,8 @@ $panel-margin-bottom: rem-calc(20) !default;
23
23
  $panel-padding: rem-calc(20) !default;
24
24
 
25
25
  // We use these to set default font colors
26
- $panel-font-color: #333 !default;
27
- $panel-font-color-alt: #fff !default;
26
+ $panel-font-color: $oil !default;
27
+ $panel-font-color-alt: $white !default;
28
28
 
29
29
  $panel-header-adjust: true !default;
30
30
  $callout-panel-link-color: $primary-color !default;
@@ -32,7 +32,7 @@ $callout-panel-link-color: $primary-color !default;
32
32
  // @mixins
33
33
  //
34
34
  // We use this mixin to create panels.
35
- // $bg - Sets the panel background color. Default: $panel-pg || scale-color(#fff, $lightness: -5%) !default
35
+ // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
36
36
  // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
37
37
  // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
38
38
  @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
@@ -10,50 +10,50 @@
10
10
  $include-html-pricing-classes: $include-html-classes !default;
11
11
 
12
12
  // We use this to control the border color
13
- $price-table-border: solid 1px #ddd !default;
13
+ $price-table-border: solid 1px $gainsboro !default;
14
14
 
15
15
  // We use this to control the bottom margin of the pricing table
16
16
  $price-table-margin-bottom: rem-calc(20) !default;
17
17
 
18
18
  // We use these to control the title styles
19
- $price-title-bg: #333 !default;
19
+ $price-title-bg: $oil !default;
20
20
  $price-title-padding: rem-calc(15 20) !default;
21
21
  $price-title-align: center !default;
22
- $price-title-color: #eee !default;
22
+ $price-title-color: $smoke !default;
23
23
  $price-title-weight: $font-weight-normal !default;
24
24
  $price-title-size: rem-calc(16) !default;
25
25
  $price-title-font-family: $body-font-family !default;
26
26
 
27
27
  // We use these to control the price styles
28
- $price-money-bg: #f6f6f6 !default;
28
+ $price-money-bg: $vapor !default;
29
29
  $price-money-padding: rem-calc(15 20) !default;
30
30
  $price-money-align: center !default;
31
- $price-money-color: #333 !default;
31
+ $price-money-color: $oil !default;
32
32
  $price-money-weight: $font-weight-normal !default;
33
33
  $price-money-size: rem-calc(32) !default;
34
34
  $price-money-font-family: $body-font-family !default;
35
35
 
36
36
 
37
37
  // We use these to control the description styles
38
- $price-bg: #fff !default;
39
- $price-desc-color: #777 !default;
38
+ $price-bg: $white !default;
39
+ $price-desc-color: $monsoon !default;
40
40
  $price-desc-padding: rem-calc(15) !default;
41
41
  $price-desc-align: center !default;
42
42
  $price-desc-font-size: rem-calc(12) !default;
43
43
  $price-desc-weight: $font-weight-normal !default;
44
44
  $price-desc-line-height: 1.4 !default;
45
- $price-desc-bottom-border: dotted 1px #ddd !default;
45
+ $price-desc-bottom-border: dotted 1px $gainsboro !default;
46
46
 
47
47
  // We use these to control the list item styles
48
- $price-item-color: #333 !default;
48
+ $price-item-color: $oil !default;
49
49
  $price-item-padding: rem-calc(15) !default;
50
50
  $price-item-align: center !default;
51
51
  $price-item-font-size: rem-calc(14) !default;
52
52
  $price-item-weight: $font-weight-normal !default;
53
- $price-item-bottom-border: dotted 1px #ddd !default;
53
+ $price-item-bottom-border: dotted 1px $gainsboro !default;
54
54
 
55
55
  // We use these to control the CTA area styles
56
- $price-cta-bg: #fff !default;
56
+ $price-cta-bg: $white !default;
57
57
  $price-cta-align: center !default;
58
58
  $price-cta-padding: rem-calc(20 20 0) !default;
59
59
 
@@ -11,10 +11,10 @@ $include-html-media-classes: $include-html-classes !default;
11
11
 
12
12
  // We use this to set the progress bar height
13
13
  $progress-bar-height: rem-calc(25) !default;
14
- $progress-bar-color: #f6f6f6 !default;
14
+ $progress-bar-color: $vapor !default;
15
15
 
16
16
  // We use these to control the border styles
17
- $progress-bar-border-color: scale-color(#fff, $lightness: 20%) !default;
17
+ $progress-bar-border-color: scale-color($white, $lightness: 20%) !default;
18
18
  $progress-bar-border-size: 1px !default;
19
19
  $progress-bar-border-style: solid !default;
20
20
  $progress-bar-border-radius: $global-radius !default;
@@ -21,10 +21,10 @@ $range-slider-bar-height: rem-calc(16) !default;
21
21
 
22
22
  $range-slider-bar-border-width: 1px !default;
23
23
  $range-slider-bar-border-style: solid !default;
24
- $range-slider-bar-border-color: #ddd !default;
24
+ $range-slider-bar-border-color: $gainsboro !default;
25
25
  $range-slider-radius: $global-radius !default;
26
26
  $range-slider-round: $global-rounded !default;
27
- $range-slider-bar-bg-color: #fafafa !default;
27
+ $range-slider-bar-bg-color: $ghost !default;
28
28
 
29
29
  // Vertical bar styles
30
30
  $range-slider-vertical-bar-width: rem-calc(16) !default;
@@ -12,21 +12,22 @@
12
12
  $include-html-reveal-classes: $include-html-classes !default;
13
13
 
14
14
  // We use these to control the style of the reveal overlay.
15
- $reveal-overlay-bg: rgba(#000, .45) !default;
16
- $reveal-overlay-bg-old: #000 !default;
15
+ $reveal-overlay-bg: rgba($black, .45) !default;
16
+ $reveal-overlay-bg-old: $black !default;
17
17
 
18
18
  // We use these to control the style of the modal itself.
19
- $reveal-modal-bg: #fff !default;
19
+ $reveal-modal-bg: $white !default;
20
20
  $reveal-position-top: rem-calc(100) !default;
21
21
  $reveal-default-width: 80% !default;
22
+ $reveal-max-width: $row-width !default;
22
23
  $reveal-modal-padding: rem-calc(20) !default;
23
- $reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
24
+ $reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
24
25
 
25
26
  // We use these to style the reveal close button
26
27
  $reveal-close-font-size: rem-calc(40) !default;
27
28
  $reveal-close-top: rem-calc(8) !default;
28
29
  $reveal-close-side: rem-calc(11) !default;
29
- $reveal-close-color: #aaa !default;
30
+ $reveal-close-color: $base !default;
30
31
  $reveal-close-weight: $font-weight-bold !default;
31
32
 
32
33
  // We use this to set the default radius used throughout the core.
@@ -36,7 +37,7 @@ $reveal-round: $global-rounded !default;
36
37
  // We use these to control the modal border
37
38
  $reveal-border-style: solid !default;
38
39
  $reveal-border-width: 1px !default;
39
- $reveal-border-color: #666 !default;
40
+ $reveal-border-color: $steel !default;
40
41
 
41
42
  $reveal-modal-class: "reveal-modal" !default;
42
43
  $close-reveal-modal-class: "close-reveal-modal" !default;
@@ -46,15 +47,16 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
46
47
  //
47
48
 
48
49
  // We use this to create the reveal background overlay styles
49
- @mixin reveal-bg {
50
+ @mixin reveal-bg( $include-z-index-value: true ) {
50
51
  position: fixed;
51
- height: 100%;
52
- width: 100%;
53
- background: $reveal-overlay-bg-old;
52
+ top: 0;
53
+ bottom: 0;
54
+ left: 0;
55
+ right: 0;
56
+ background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
54
57
  background: $reveal-overlay-bg;
55
- z-index: 1004;
58
+ z-index: if( $include-z-index-value, 1004, null );
56
59
  display: none;
57
- top: 0;
58
60
  #{$default-float}: 0;
59
61
  }
60
62
 
@@ -65,7 +67,9 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
65
67
  //
66
68
  @mixin reveal-modal-base(
67
69
  $base-style:true,
68
- $width:$reveal-default-width) {
70
+ $width:$reveal-default-width,
71
+ $max-width:$reveal-max-width,
72
+ $border-radius: $reveal-radius) {
69
73
  @if $base-style {
70
74
  visibility: hidden;
71
75
  display: none;
@@ -73,13 +77,11 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
73
77
  z-index: 1005;
74
78
  width: 100vw;
75
79
  top:0;
80
+ border-radius: $border-radius;
76
81
  #{$default-float}: 0;
77
82
  @media #{$small-only} {
78
83
  min-height:100vh;
79
84
  }
80
- @media #{$medium-up} {
81
- #{$default-float}: 50%;
82
- }
83
85
 
84
86
  // Make sure rows don't have a min-width on them
85
87
  .column,
@@ -92,15 +94,18 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
92
94
 
93
95
  @if $width {
94
96
  @media #{$medium-up} {
95
- margin-#{$default-float}: -($width / 2);
96
97
  width: $width;
98
+ max-width: $max-width;
99
+ left: 0;
100
+ right: 0;
101
+ margin: 0 auto;
97
102
  }
98
103
  }
99
104
  }
100
105
 
101
106
  // We use this to style the reveal modal defaults
102
107
  //
103
- // $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || #fff
108
+ // $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white
104
109
  // $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
105
110
  // $border - Choose whether reveal uses a border. Default: true, Options: false
106
111
  // $border-style - Set reveal border style. Default: $reveal-border-style || solid
@@ -143,7 +148,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
143
148
 
144
149
  // We use this to create a close button for the reveal modal
145
150
  //
146
- // $color - Default: $reveal-close-color || #aaa
151
+ // $color - Default: $reveal-close-color || $base
147
152
  @mixin reveal-close($color:$reveal-close-color) {
148
153
  font-size: $reveal-close-font-size;
149
154
  line-height: 1;
@@ -161,7 +166,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
161
166
  // Reveal Modals
162
167
  .reveal-modal-bg { @include reveal-bg; }
163
168
 
164
- dialog, .#{$reveal-modal-class} {
169
+ .#{$reveal-modal-class} {
165
170
  @include reveal-modal-base;
166
171
  @include reveal-modal-style(
167
172
  $bg:$reveal-modal-bg,
@@ -169,32 +174,18 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
169
174
  $border:true,
170
175
  $box-shadow:true,
171
176
  $radius:false,
172
- $top-offset:$reveal-position-top);
173
-
174
- .#{$close-reveal-modal-class} { @include reveal-close; }
175
- }
176
-
177
- dialog[open] {
178
- display:block;
179
- visibility: visible;
180
- }
181
-
182
- dialog, .#{$reveal-modal-class} {
177
+ $top-offset:$reveal-position-top
178
+ );
183
179
  @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
184
180
 
185
181
  &.radius { @include reveal-modal-style($radius:true); }
186
182
  &.round { @include reveal-modal-style($radius:$reveal-round); }
187
-
188
183
  &.collapse { @include reveal-modal-style($padding:0); }
189
-
190
184
  &.tiny { @include reveal-modal-base(false, 30%); }
191
185
  &.small { @include reveal-modal-base(false, 40%); }
192
186
  &.medium { @include reveal-modal-base(false, 60%); }
193
187
  &.large { @include reveal-modal-base(false, 70%); }
194
188
  &.xlarge { @include reveal-modal-base(false, 95%); }
195
- }
196
-
197
- dialog, .#{$reveal-modal-class} {
198
189
  &.full {
199
190
  @include reveal-modal-base(false, 100vw);
200
191
  top:0;
@@ -204,11 +195,26 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
204
195
  min-height:100vh;
205
196
  margin-left: 0 !important;
206
197
  }
198
+
199
+ .#{$close-reveal-modal-class} { @include reveal-close; }
200
+ }
201
+
202
+ dialog {
203
+ @extend .#{$reveal-modal-class};
204
+
205
+ &::backdrop {
206
+ @include reveal-bg(false);
207
+ }
208
+
209
+ //&[open]{ display: block; } As far as I know, this is no longer needed; this is the expected behavior in all browsers that currently support dialog or plan to with their nightly builds.
207
210
  }
208
211
 
209
- // Reveal Print Styles
212
+ // Reveal Print Styles: It should be invislbe, adds no value being printed.
210
213
  @media print {
211
- dialog, .#{$reveal-modal-class} {background: #fff !important;}
214
+ dialog, .#{$reveal-modal-class} {
215
+ display: none;
216
+ background: $white !important;
217
+ }
212
218
  }
213
219
  }
214
220
  }
@@ -40,7 +40,7 @@ $side-nav-heading-text-transform: uppercase !default;
40
40
  // We use these to control border styles
41
41
  $side-nav-divider-size: 1px !default;
42
42
  $side-nav-divider-style: solid !default;
43
- $side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
43
+ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
44
44
 
45
45
 
46
46
  //
@@ -19,8 +19,8 @@ $include-html-button-classes: $include-html-classes !default;
19
19
 
20
20
  // We use these to control different shared styles for Split Buttons
21
21
  $split-button-function-factor: 10% !default;
22
- $split-button-pip-color: #fff !default;
23
- $split-button-pip-color-alt: #333 !default;
22
+ $split-button-pip-color: $white !default;
23
+ $split-button-pip-color-alt: $oil !default;
24
24
  $split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
25
25
 
26
26
  // We use these to control tiny split buttons
@@ -22,7 +22,7 @@ $sub-nav-list-padding-top: rem-calc(4) !default;
22
22
  // We use this to control the definition
23
23
  $sub-nav-font-family: $body-font-family !default;
24
24
  $sub-nav-font-size: rem-calc(14) !default;
25
- $sub-nav-font-color: #999 !default;
25
+ $sub-nav-font-color: $aluminum !default;
26
26
  $sub-nav-font-weight: $font-weight-normal !default;
27
27
  $sub-nav-text-decoration: none !default;
28
28
  $sub-nav-padding: rem-calc(3 16) !default;
@@ -35,7 +35,7 @@ $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !d
35
35
  $sub-nav-active-font-weight: $font-weight-normal !default;
36
36
  $sub-nav-active-bg: $primary-color !default;
37
37
  $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
38
- $sub-nav-active-color: #fff !default;
38
+ $sub-nav-active-color: $white !default;
39
39
  $sub-nav-active-padding: $sub-nav-padding !default;
40
40
  $sub-nav-active-cursor: default !default;
41
41
 
@@ -16,7 +16,7 @@
16
16
  $include-html-form-classes: $include-html-classes !default;
17
17
 
18
18
  // Controlling background color for the switch container
19
- $switch-bg: #ddd !default;
19
+ $switch-bg: $gainsboro !default;
20
20
 
21
21
  // We use these to control the switch heights for our default classes
22
22
  $switch-height-tny: 1.5rem !default;
@@ -26,7 +26,7 @@ $switch-height-lrg: 2.5rem !default;
26
26
  $switch-bottom-margin: 1.5rem !default;
27
27
 
28
28
  // We use these to style the switch-paddle
29
- $switch-paddle-bg: #fff !default;
29
+ $switch-paddle-bg: $white !default;
30
30
  $switch-paddle-transition-speed: .15s !default;
31
31
  $switch-paddle-transition-ease: ease-out !default;
32
32
  $switch-active-color: $primary-color;
@@ -82,6 +82,10 @@ $switch-active-color: $primary-color;
82
82
  -webkit-transition: left $transition-speed $transition-ease;
83
83
  -moz-transition: left $transition-speed $transition-ease;
84
84
  transition: left $transition-speed $transition-ease;
85
+
86
+ -webkit-transform: translate3d(0,0,0);
87
+ -moz-transform: translate3d(0,0,0);
88
+ transform: translate3d(0,0,0);
85
89
  }
86
90
 
87
91
  input:checked + label {