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.
- data/bower.json +2 -2
- data/lib/foundation/rails/version.rb +1 -1
- data/vendor/assets/_settings.scss +363 -258
- data/vendor/assets/javascripts/foundation/foundation.joyride.js +55 -27
- data/vendor/assets/javascripts/foundation/foundation.js +14 -2
- data/vendor/assets/javascripts/foundation/foundation.magellan.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +37 -6
- data/vendor/assets/javascripts/foundation/foundation.orbit.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.slider.js +1 -1
- data/vendor/assets/javascripts/foundation/foundation.topbar.js +19 -16
- data/vendor/assets/stylesheets/foundation/_settings.scss +363 -258
- data/vendor/assets/stylesheets/foundation/components/_accordion.scss +3 -3
- data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +8 -3
- data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +89 -5
- data/vendor/assets/stylesheets/foundation/components/_buttons.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_clearing.scss +5 -5
- data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +4 -4
- data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +7 -7
- data/vendor/assets/stylesheets/foundation/components/_forms.scss +18 -17
- data/vendor/assets/stylesheets/foundation/components/_global.scss +36 -9
- data/vendor/assets/stylesheets/foundation/components/_grid.scss +3 -1
- data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +96 -33
- data/vendor/assets/stylesheets/foundation/components/_joyride.scss +8 -8
- data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +4 -4
- data/vendor/assets/stylesheets/foundation/components/_labels.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_magellan.scss +1 -1
- data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +164 -12
- data/vendor/assets/stylesheets/foundation/components/_orbit.scss +10 -10
- data/vendor/assets/stylesheets/foundation/components/_pagination.scss +5 -5
- data/vendor/assets/stylesheets/foundation/components/_panels.scss +4 -4
- data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +11 -11
- data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_reveal.scss +44 -38
- data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +1 -1
- data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_switches.scss +6 -2
- data/vendor/assets/stylesheets/foundation/components/_tables.scss +8 -6
- data/vendor/assets/stylesheets/foundation/components/_tabs.scss +17 -6
- data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_toolbar.scss +4 -4
- data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +6 -5
- data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +29 -26
- data/vendor/assets/stylesheets/foundation/components/_type.scss +8 -8
- 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:
|
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:
|
24
|
-
$orbit-nav-arrow-color-hover:
|
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:
|
32
|
-
$orbit-bullet-nav-color-active:
|
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:
|
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:
|
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
|
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:
|
227
|
+
border-left-color: $white;
|
228
228
|
&.dark {
|
229
|
-
border-left-color:
|
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:
|
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:
|
26
|
-
$pagination-link-active-bg: scale-color(
|
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:
|
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:
|
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(
|
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:
|
27
|
-
$panel-font-color-alt:
|
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(
|
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
|
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:
|
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:
|
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:
|
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:
|
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:
|
39
|
-
$price-desc-color:
|
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
|
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:
|
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
|
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:
|
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:
|
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(
|
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:
|
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:
|
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(
|
16
|
-
$reveal-overlay-bg-old:
|
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:
|
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(
|
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:
|
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:
|
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
|
-
|
52
|
-
|
53
|
-
|
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 ||
|
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 ||
|
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
|
-
|
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} {
|
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(
|
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:
|
23
|
-
$split-button-pip-color-alt:
|
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:
|
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:
|
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:
|
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:
|
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 {
|