foundation-rails 5.2.2.0 → 5.2.3.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.
- checksums.yaml +4 -4
- data/bower.json +2 -2
- data/lib/foundation/rails/version.rb +1 -1
- data/vendor/assets/javascripts/foundation/foundation.abide.js +5 -5
- data/vendor/assets/javascripts/foundation/foundation.accordion.js +13 -8
- data/vendor/assets/javascripts/foundation/foundation.alert.js +2 -2
- data/vendor/assets/javascripts/foundation/foundation.clearing.js +36 -33
- data/vendor/assets/javascripts/foundation/foundation.dropdown.js +15 -10
- data/vendor/assets/javascripts/foundation/foundation.equalizer.js +12 -6
- data/vendor/assets/javascripts/foundation/foundation.interchange.js +3 -3
- data/vendor/assets/javascripts/foundation/foundation.joyride.js +9 -15
- data/vendor/assets/javascripts/foundation/foundation.js +30 -28
- data/vendor/assets/javascripts/foundation/foundation.magellan.js +36 -31
- data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +72 -14
- data/vendor/assets/javascripts/foundation/foundation.orbit.js +19 -15
- data/vendor/assets/javascripts/foundation/foundation.reveal.js +26 -16
- data/vendor/assets/javascripts/foundation/foundation.slider.js +2 -3
- data/vendor/assets/javascripts/foundation/foundation.tab.js +8 -9
- data/vendor/assets/javascripts/foundation/foundation.tooltip.js +30 -4
- data/vendor/assets/javascripts/foundation/foundation.topbar.js +22 -19
- data/vendor/assets/stylesheets/foundation/_settings.scss +50 -40
- data/vendor/assets/stylesheets/foundation/components/_accordion.scss +8 -7
- data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +1 -1
- data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +1 -1
- data/vendor/assets/stylesheets/foundation/components/_buttons.scss +8 -8
- data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +6 -6
- data/vendor/assets/stylesheets/foundation/components/_forms.scss +7 -5
- data/vendor/assets/stylesheets/foundation/components/_global.scss +67 -3
- data/vendor/assets/stylesheets/foundation/components/_grid.scss +1 -2
- data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +2 -1
- data/vendor/assets/stylesheets/foundation/components/_joyride.scss +3 -3
- data/vendor/assets/stylesheets/foundation/components/_labels.scss +1 -1
- data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +32 -58
- data/vendor/assets/stylesheets/foundation/components/_orbit.scss +39 -31
- data/vendor/assets/stylesheets/foundation/components/_pagination.scss +5 -5
- data/vendor/assets/stylesheets/foundation/components/_panels.scss +4 -5
- data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +5 -5
- data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_reveal.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +26 -4
- data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +7 -7
- data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_switch.scss +2 -2
- data/vendor/assets/stylesheets/foundation/components/_tables.scss +44 -12
- data/vendor/assets/stylesheets/foundation/components/_tabs.scss +9 -5
- data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +4 -4
- data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +30 -26
- data/vendor/assets/stylesheets/foundation/components/_type.scss +39 -21
- data/vendor/assets/stylesheets/foundation/components/_visibility.scss +64 -1
- data/vendor/assets/stylesheets/normalize.scss +20 -18
- metadata +2 -2
@@ -59,7 +59,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
|
|
59
59
|
position: relative;
|
60
60
|
|
61
61
|
// This creates the base styles for the triangle pip
|
62
|
-
&:
|
62
|
+
&:after {
|
63
63
|
position: absolute;
|
64
64
|
content: "";
|
65
65
|
width: 0;
|
@@ -84,7 +84,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
|
|
84
84
|
// If we're dealing with small buttons, use these styles
|
85
85
|
@if $padding == small {
|
86
86
|
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
|
87
|
-
&:
|
87
|
+
&:after {
|
88
88
|
border-width: $dropdown-button-pip-size-sml;
|
89
89
|
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
|
90
90
|
margin-top: $dropdown-button-pip-top-sml;
|
@@ -94,7 +94,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
|
|
94
94
|
// If we're dealing with default (medium) buttons, use these styles
|
95
95
|
@if $padding == medium {
|
96
96
|
padding-#{$opposite-direction}: $dropdown-button-padding-med;
|
97
|
-
&:
|
97
|
+
&:after {
|
98
98
|
border-width: $dropdown-button-pip-size-med;
|
99
99
|
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
|
100
100
|
margin-top: $dropdown-button-pip-top-med;
|
@@ -104,7 +104,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
|
|
104
104
|
// If we're dealing with large buttons, use these styles
|
105
105
|
@if $padding == large {
|
106
106
|
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
|
107
|
-
&:
|
107
|
+
&:after {
|
108
108
|
border-width: $dropdown-button-pip-size-lrg;
|
109
109
|
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
|
110
110
|
margin-top: $dropdown-button-pip-top-lrg;
|
@@ -113,7 +113,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
|
|
113
113
|
|
114
114
|
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
|
115
115
|
@if $pip-color {
|
116
|
-
&:
|
116
|
+
&:after { border-color: $pip-color transparent transparent transparent; }
|
117
117
|
}
|
118
118
|
}
|
119
119
|
|
@@ -123,7 +123,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
|
|
123
123
|
&.tiny { @include dropdown-button(tiny,$base-style:false); }
|
124
124
|
&.small { @include dropdown-button(small,$base-style:false); }
|
125
125
|
&.large { @include dropdown-button(large,$base-style:false); }
|
126
|
-
&.secondary:
|
126
|
+
&.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
127
127
|
}
|
128
128
|
}
|
129
129
|
}
|
@@ -16,7 +16,7 @@ $form-spacing: rem-calc(16) !default;
|
|
16
16
|
// We use these to style the labels in different ways
|
17
17
|
$form-label-pointer: pointer !default;
|
18
18
|
$form-label-font-size: rem-calc(14) !default;
|
19
|
-
$form-label-font-weight: normal !default;
|
19
|
+
$form-label-font-weight: $font-weight-normal !default;
|
20
20
|
$form-label-line-height: 1.5 !default;
|
21
21
|
$form-label-font-color: scale-color(#000, $lightness: 30%) !default;
|
22
22
|
$form-label-small-transform: capitalize !default;
|
@@ -44,7 +44,7 @@ $fieldset-margin: rem-calc(18 0) !default;
|
|
44
44
|
|
45
45
|
// We use these to style the legends when you use them
|
46
46
|
$legend-bg: #fff !default;
|
47
|
-
$legend-font-weight: bold !default;
|
47
|
+
$legend-font-weight: $font-weight-bold !default;
|
48
48
|
$legend-padding: rem-calc(0 3) !default;
|
49
49
|
|
50
50
|
// We use these to style the prefix and postfix input elements
|
@@ -60,7 +60,7 @@ $input-prefix-font-color-alt: #fff !default;
|
|
60
60
|
$input-error-message-padding: rem-calc(6 9 9) !default;
|
61
61
|
$input-error-message-top: -1px !default;
|
62
62
|
$input-error-message-font-size: rem-calc(12) !default;
|
63
|
-
$input-error-message-font-weight: normal !default;
|
63
|
+
$input-error-message-font-weight: $font-weight-normal !default;
|
64
64
|
$input-error-message-font-style: italic !default;
|
65
65
|
$input-error-message-font-color: #fff !default;
|
66
66
|
$input-error-message-font-color-alt: #333 !default;
|
@@ -152,7 +152,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
|
|
152
152
|
|
153
153
|
// Alignment options
|
154
154
|
@if $alignment == right {
|
155
|
-
float: none;
|
155
|
+
float: none !important;
|
156
156
|
text-align: right;
|
157
157
|
}
|
158
158
|
@else if $alignment == inline {
|
@@ -306,12 +306,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
|
|
306
306
|
@mixin form-select {
|
307
307
|
-webkit-appearance: none !important;
|
308
308
|
background-color: $select-bg-color;
|
309
|
-
background-image: url('data:image/svg+xml;base64,
|
309
|
+
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
|
310
310
|
background-repeat: no-repeat;
|
311
311
|
background-position: if($text-direction == 'rtl', 3%, 97%) center;
|
312
312
|
border: $input-border-width $input-border-style $input-border-color;
|
313
313
|
padding: $form-spacing / 2;
|
314
314
|
font-size: $input-font-size;
|
315
|
+
color: $input-font-color;
|
316
|
+
line-height: normal;
|
315
317
|
@include radius(0);
|
316
318
|
&.radius { @include radius($global-radius); }
|
317
319
|
&:hover {
|
@@ -11,6 +11,9 @@
|
|
11
11
|
// styles get applied to [data-mysite-plugin], etc
|
12
12
|
$namespace: false !default;
|
13
13
|
|
14
|
+
// Control the inclusion of experimental properties
|
15
|
+
$experimental: true !default;
|
16
|
+
|
14
17
|
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
15
18
|
// for compatibility with browser-based text zoom or user-set defaults.
|
16
19
|
|
@@ -26,6 +29,16 @@ $base-line-height: 150% !default;
|
|
26
29
|
// Global Foundation Mixins
|
27
30
|
//
|
28
31
|
|
32
|
+
// @mixins
|
33
|
+
//
|
34
|
+
// We use this to optionally include experimental or
|
35
|
+
// explicitly vendor prefixed properties
|
36
|
+
@mixin experimental() {
|
37
|
+
@if $experimental {
|
38
|
+
@content;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
29
42
|
// @mixins
|
30
43
|
//
|
31
44
|
// We use this to control border radius.
|
@@ -110,9 +123,56 @@ $base-line-height: 150% !default;
|
|
110
123
|
}
|
111
124
|
}
|
112
125
|
|
126
|
+
// @mixins
|
127
|
+
//
|
128
|
+
// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
|
129
|
+
// $width - Width of hamburger icon in rem
|
130
|
+
// $left - If false, icon will be centered horizontally || explicitly set value in rem
|
131
|
+
// $top - If false, icon will be centered vertically || explicitly set value in rem
|
132
|
+
// $thickness - thickness of lines in hamburger icon, set value in px
|
133
|
+
// $gap - spacing between the lines in hamburger icon, set value in px
|
134
|
+
// $color - icon color
|
135
|
+
// $hover-color - icon color during hover
|
136
|
+
// $offcanvas - Set to true of @include in offcanvas
|
137
|
+
@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
|
138
|
+
span:after {
|
139
|
+
content: '';
|
140
|
+
position: absolute;
|
141
|
+
display: block;
|
142
|
+
height: 0;
|
143
|
+
|
144
|
+
@if $offcanvas {
|
145
|
+
@if $top {
|
146
|
+
top: $top;
|
147
|
+
}
|
148
|
+
@else {
|
149
|
+
top: 50%;
|
150
|
+
margin-top: -$width/2;
|
151
|
+
}
|
152
|
+
@if $left {
|
153
|
+
left: $left;
|
154
|
+
}
|
155
|
+
@else {
|
156
|
+
left: ($tabbar-menu-icon-width - $width)/2;
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
box-shadow:
|
161
|
+
0 0px 0 $thickness $color,
|
162
|
+
0 $gap + $thickness 0 $thickness $color,
|
163
|
+
0 (2 * $gap + 2*$thickness) 0 $thickness $color;
|
164
|
+
width: $width;
|
165
|
+
}
|
166
|
+
span:hover:after {
|
167
|
+
box-shadow:
|
168
|
+
0 0px 0 $thickness $hover-color,
|
169
|
+
0 $gap + $thickness 0 $thickness $hover-color,
|
170
|
+
0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
|
171
|
+
}
|
172
|
+
}
|
173
|
+
|
113
174
|
// We use this to do clear floats
|
114
175
|
@mixin clearfix {
|
115
|
-
*zoom:1;
|
116
176
|
&:before, &:after { content: " "; display: table; }
|
117
177
|
&:after { clear: both; }
|
118
178
|
}
|
@@ -164,11 +224,15 @@ $base-line-height: 150% !default;
|
|
164
224
|
clip: auto;
|
165
225
|
}
|
166
226
|
|
227
|
+
// We use these to define default font weights
|
228
|
+
$font-weight-normal: normal !default;
|
229
|
+
$font-weight-bold: bold !default;
|
230
|
+
|
167
231
|
// We use these to control various global styles
|
168
232
|
$body-bg: #fff !default;
|
169
233
|
$body-font-color: #222 !default;
|
170
234
|
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
171
|
-
$body-font-weight: normal !default;
|
235
|
+
$body-font-weight: $font-weight-normal !default;
|
172
236
|
$body-font-style: normal !default;
|
173
237
|
|
174
238
|
// We use this to control font-smoothing
|
@@ -258,7 +322,7 @@ $cursor-text-value: text !default;
|
|
258
322
|
// Forward slash placed around everything to convince PhantomJS to read the value.
|
259
323
|
|
260
324
|
meta.foundation-version {
|
261
|
-
font-family: "/5.2.
|
325
|
+
font-family: "/5.2.3/";
|
262
326
|
}
|
263
327
|
|
264
328
|
meta.foundation-mq-small {
|
@@ -140,7 +140,7 @@ $total-columns: 12 !default;
|
|
140
140
|
@if $center {
|
141
141
|
margin-#{$default-float}: auto;
|
142
142
|
margin-#{$opposite-direction}: auto;
|
143
|
-
float: none;
|
143
|
+
float: none !important;
|
144
144
|
}
|
145
145
|
|
146
146
|
// If offset, calculate appropriate margins
|
@@ -177,7 +177,6 @@ $total-columns: 12 !default;
|
|
177
177
|
@for $i from 0 through $total-columns - 1 {
|
178
178
|
.#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
179
179
|
}
|
180
|
-
.#{$size}-reset-order,
|
181
180
|
.#{$size}-reset-order {
|
182
181
|
margin-#{$default-float}: 0;
|
183
182
|
margin-#{$opposite-direction}: 0;
|
@@ -14,6 +14,7 @@ $inline-list-top-margin: 0 !default;
|
|
14
14
|
$inline-list-opposite-margin: 0 !default;
|
15
15
|
$inline-list-bottom-margin: rem-calc(17) !default;
|
16
16
|
$inline-list-default-float-margin: rem-calc(-22) !default;
|
17
|
+
$inline-list-default-float-list-margin: rem-calc(22) !default;
|
17
18
|
|
18
19
|
$inline-list-padding: 0 !default;
|
19
20
|
|
@@ -41,7 +42,7 @@ $inline-list-children-display: block !default;
|
|
41
42
|
& > li {
|
42
43
|
list-style: none;
|
43
44
|
float: $default-float;
|
44
|
-
margin-#{$default-float}:
|
45
|
+
margin-#{$default-float}: $inline-list-default-float-list-margin;
|
45
46
|
display: $inline-list-display;
|
46
47
|
&>* { display: $inline-list-children-display; }
|
47
48
|
}
|
@@ -20,7 +20,7 @@ $joyride-tip-position-offset: 22px !default;
|
|
20
20
|
// Here, we're setting the tip font styles
|
21
21
|
$joyride-tip-font-color: #fff !default;
|
22
22
|
$joyride-tip-font-size: rem-calc(14) !default;
|
23
|
-
$joyride-tip-header-weight: bold !default;
|
23
|
+
$joyride-tip-header-weight: $font-weight-bold !default;
|
24
24
|
|
25
25
|
// This changes the nub size
|
26
26
|
$joyride-tip-nub-size: 10px !default;
|
@@ -33,7 +33,7 @@ $joyride-tip-timer-color: #666 !default;
|
|
33
33
|
// This changes up the styles for the close button
|
34
34
|
$joyride-tip-close-color: #777 !default;
|
35
35
|
$joyride-tip-close-size: 24px !default;
|
36
|
-
$joyride-tip-close-weight: normal !default;
|
36
|
+
$joyride-tip-close-weight: $font-weight-normal !default;
|
37
37
|
|
38
38
|
// When Joyride is filling the screen, we use this style for the bg
|
39
39
|
$joyride-screenfill: rgba(0,0,0,0.5) !default;
|
@@ -57,7 +57,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
|
|
57
57
|
top: 0;
|
58
58
|
#{$default-float}: 2.5%;
|
59
59
|
font-family: inherit;
|
60
|
-
font-weight: normal;
|
60
|
+
font-weight: $font-weight-normal;
|
61
61
|
width: 95%;
|
62
62
|
}
|
63
63
|
|
@@ -15,7 +15,7 @@ $label-radius: $global-radius !default;
|
|
15
15
|
|
16
16
|
// We use these to style the label text
|
17
17
|
$label-font-sizing: rem-calc(11) !default;
|
18
|
-
$label-font-weight: normal !default;
|
18
|
+
$label-font-weight: $font-weight-normal !default;
|
19
19
|
$label-font-color: #333 !default;
|
20
20
|
$label-font-color-alt: #fff !default;
|
21
21
|
$label-font-family: $body-font-family !default;
|
@@ -4,7 +4,6 @@
|
|
4
4
|
|
5
5
|
@import "global";
|
6
6
|
@import "type";
|
7
|
-
@import "top-bar";
|
8
7
|
|
9
8
|
// Off Canvas Tab Bar Variables
|
10
9
|
$include-html-off-canvas-classes: $include-html-classes !default;
|
@@ -22,7 +21,7 @@ $tabbar-right-section-border: $tabbar-left-section-border;
|
|
22
21
|
|
23
22
|
// Off Canvas Tab Bar Headers
|
24
23
|
$tabbar-header-color: #fff !default;
|
25
|
-
$tabbar-header-weight: bold !default;
|
24
|
+
$tabbar-header-weight: $font-weight-bold !default;
|
26
25
|
$tabbar-header-line-height: $tabbar-height !default;
|
27
26
|
$tabbar-header-margin: 0 !default;
|
28
27
|
|
@@ -34,7 +33,7 @@ $off-canvas-bg: #333 !default;
|
|
34
33
|
$off-canvas-label-padding: 0.3rem rem-calc(15) !default;
|
35
34
|
$off-canvas-label-color: #999 !default;
|
36
35
|
$off-canvas-label-text-transform: uppercase !default;
|
37
|
-
$off-canvas-label-font-weight: bold !default;
|
36
|
+
$off-canvas-label-font-weight: $font-weight-bold !default;
|
38
37
|
$off-canvas-label-bg: #444 !default;
|
39
38
|
$off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
|
40
39
|
$off-canvas-label-border-bottom: none !default;
|
@@ -104,6 +103,7 @@ $menu-slide: "transform 500ms ease" !default;
|
|
104
103
|
background: $off-canvas-bg;
|
105
104
|
z-index: 1001;
|
106
105
|
box-sizing: content-box;
|
106
|
+
transition: transform 500ms ease 0s;
|
107
107
|
-webkit-overflow-scrolling: touch;
|
108
108
|
@if $position == left {
|
109
109
|
@include translate3d(-100%,0,0);
|
@@ -262,56 +262,6 @@ $menu-slide: "transform 500ms ease" !default;
|
|
262
262
|
}
|
263
263
|
}
|
264
264
|
|
265
|
-
// @MIXIN
|
266
|
-
//
|
267
|
-
// We use this mixin to generate hamburger icon
|
268
|
-
//
|
269
|
-
// $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width.
|
270
|
-
// $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False
|
271
|
-
// $top - If false, icon will be centered vertically || explicitly set value in rem Default: $tabbar-hamburger-icon-top= False
|
272
|
-
// $thickness - thickness of lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-thickness = 1px
|
273
|
-
// $gap - spacing between the lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-gap = 6px
|
274
|
-
// $color - icon color Default: $tabbar-menu-icon-color
|
275
|
-
// $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover
|
276
|
-
@mixin hamburger($width:$tabbar-hamburger-icon-width,
|
277
|
-
$left: $tabbar-hamburger-icon-left,
|
278
|
-
$top: $tabbar-hamburger-icon-top,
|
279
|
-
$thickness:$tapbar-hamburger-icon-thickness,
|
280
|
-
$gap:$tapbar-hamburger-icon-gap,
|
281
|
-
$color:$tabbar-menu-icon-color,
|
282
|
-
$hover-color:$tabbar-menu-icon-hover) {
|
283
|
-
span {
|
284
|
-
position: absolute;
|
285
|
-
display: block;
|
286
|
-
height: 0;
|
287
|
-
width: $width;
|
288
|
-
line-height: 1;
|
289
|
-
|
290
|
-
// disable height centering if $top is not false
|
291
|
-
@if $top {
|
292
|
-
top: $tabbar-hamburger-icon-top;
|
293
|
-
}
|
294
|
-
@else {
|
295
|
-
top: ($tabbar-menu-icon-height - rem-calc(3 * $thickness) - rem-calc(2 * $gap))/2;
|
296
|
-
}
|
297
|
-
// disable width centering if $top is not false
|
298
|
-
@if $left {
|
299
|
-
left: $tabbar-hamburger-icon-left;
|
300
|
-
}
|
301
|
-
@else {
|
302
|
-
left: ($tabbar-menu-icon-width - $width)/2;
|
303
|
-
}
|
304
|
-
box-shadow: 0 0px 0 $thickness $color,
|
305
|
-
0 $gap + $thickness 0 $thickness $color,
|
306
|
-
0 (2 * $gap + 2*$thickness) 0 $thickness $color;
|
307
|
-
}
|
308
|
-
&:hover span {
|
309
|
-
box-shadow: 0 0px 0 $thickness $hover-color,
|
310
|
-
0 $gap + $thickness 0 $thickness $hover-color,
|
311
|
-
0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
|
312
|
-
}
|
313
|
-
}
|
314
|
-
|
315
265
|
//
|
316
266
|
// DEFAULT CLASSES
|
317
267
|
//
|
@@ -337,12 +287,22 @@ $menu-slide: "transform 500ms ease" !default;
|
|
337
287
|
display: block;
|
338
288
|
line-height: $tabbar-menu-icon-line-height;
|
339
289
|
padding: $tabbar-menu-icon-padding;
|
340
|
-
color: $
|
290
|
+
color: $tabbar-menu-icon-color;
|
341
291
|
position: relative;
|
342
|
-
|
343
|
-
|
344
|
-
//
|
345
|
-
|
292
|
+
transform: translate3d(0,0,0);
|
293
|
+
|
294
|
+
// @include for the hamburger menu-icon
|
295
|
+
//
|
296
|
+
// Arguments as follows: ($width, $left, $top, $thickness, $gap, $color, $hover-color)
|
297
|
+
// $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width.
|
298
|
+
// $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False
|
299
|
+
// $top - If false, icon will be centered vertically || explicitly set value in rem Default: = False
|
300
|
+
// $thickness - thickness of lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-thickness = 1px
|
301
|
+
// $gap - spacing between the lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-gap = 6px
|
302
|
+
// $color - icon color Default: $tabbar-menu-icon-color
|
303
|
+
// $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover
|
304
|
+
// $offcanvas - Set to true
|
305
|
+
@include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tapbar-hamburger-icon-thickness, $tapbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true)
|
346
306
|
}
|
347
307
|
|
348
308
|
.left-off-canvas-menu { @include off-canvas-menu($position: left); }
|
@@ -367,6 +327,20 @@ $menu-slide: "transform 500ms ease" !default;
|
|
367
327
|
}
|
368
328
|
.exit-off-canvas { @include back-link; }
|
369
329
|
}
|
330
|
+
.offcanvas-overlap {
|
331
|
+
.left-off-canvas-menu, .right-off-canvas-menu {
|
332
|
+
-ms-transform: none;
|
333
|
+
-webkit-transform: none;
|
334
|
+
-moz-transform: none;
|
335
|
+
-o-transform: none;
|
336
|
+
transform: none;
|
337
|
+
z-index: 1003;
|
338
|
+
}
|
339
|
+
.exit-offcanvas-menu {
|
340
|
+
@include back-link;
|
341
|
+
z-index: 1002;
|
342
|
+
}
|
343
|
+
}
|
370
344
|
|
371
345
|
// Older browsers
|
372
346
|
.no-csstransforms {
|
@@ -50,25 +50,25 @@ $orbit-nav-hide-for-small: true !default;
|
|
50
50
|
$orbit-bullet-hide-for-small: true !default;
|
51
51
|
$orbit-timer-hide-for-small: true !default;
|
52
52
|
|
53
|
-
// CSS Transform
|
54
|
-
// This function is needed in order to put in all of the browser prefixes.
|
55
|
-
// The normal tranform attribute still does not work properly across all browsers.
|
53
|
+
// CSS Transform
|
54
|
+
// This function is needed in order to put in all of the browser prefixes.
|
55
|
+
// The normal tranform attribute still does not work properly across all browsers.
|
56
56
|
// In order to receive the transitionEnd events then you will still need to use the vendor prefixes
|
57
57
|
@mixin translate3d($x,$y,$z) {
|
58
58
|
-ms-transform:translate($x,$y);
|
59
|
-
|
60
|
-
-
|
61
|
-
|
62
|
-
|
63
|
-
|
59
|
+
|
60
|
+
-webkit-transform: translate3d($x,$y,$z);
|
61
|
+
-moz-transform: translate3d($x,$y,$z);
|
62
|
+
-o-transform: translate3d($x,$y,$z);
|
63
|
+
transform: translate3d($x,$y,$z);
|
64
64
|
}
|
65
65
|
|
66
66
|
@mixin rotate($d) {
|
67
67
|
-webkit-transform: rotate($d);
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
68
|
+
-moz-transform: rotate($d);
|
69
|
+
-ms-transform: rotate($d);
|
70
|
+
-o-transform: rotate($d);
|
71
|
+
transform: rotate($d);
|
72
72
|
}
|
73
73
|
|
74
74
|
@include exports("orbit") {
|
@@ -141,8 +141,8 @@ $orbit-timer-hide-for-small: true !default;
|
|
141
141
|
-webkit-transform: translateZ(0);
|
142
142
|
|
143
143
|
img { display: block; max-width: 100%; }
|
144
|
-
|
145
|
-
&.fade li {
|
144
|
+
|
145
|
+
&.fade > li {
|
146
146
|
opacity: 0;
|
147
147
|
transition: opacity $orbit-animation-speed $orbit-animation-ease;
|
148
148
|
@include translate3d(0,0,0);
|
@@ -156,8 +156,8 @@ $orbit-timer-hide-for-small: true !default;
|
|
156
156
|
transition: opacity $orbit-animation-speed $orbit-animation-ease;
|
157
157
|
}
|
158
158
|
}
|
159
|
-
|
160
|
-
&.swipe-next li {
|
159
|
+
|
160
|
+
&.swipe-next > li {
|
161
161
|
@include translate3d(100%,0,0);
|
162
162
|
&.animate-in {
|
163
163
|
@include translate3d(0,0,0);
|
@@ -169,7 +169,7 @@ $orbit-timer-hide-for-small: true !default;
|
|
169
169
|
}
|
170
170
|
}
|
171
171
|
|
172
|
-
&.swipe-prev li {
|
172
|
+
&.swipe-prev > li {
|
173
173
|
@include translate3d(-100%,0,0);
|
174
174
|
&.animate-in {
|
175
175
|
@include translate3d(0,0,0);
|
@@ -181,15 +181,19 @@ $orbit-timer-hide-for-small: true !default;
|
|
181
181
|
}
|
182
182
|
}
|
183
183
|
|
184
|
-
li {
|
184
|
+
> li {
|
185
185
|
position: absolute;
|
186
186
|
top: 0;
|
187
187
|
left: 0;
|
188
188
|
width: 100%;
|
189
189
|
@include translate3d(100%,0,0);
|
190
190
|
|
191
|
+
> a { display: block; }
|
192
|
+
|
191
193
|
&.active {
|
192
194
|
opacity: 1;
|
195
|
+
// "relative" positioning is required for variable height of children.
|
196
|
+
position:relative;
|
193
197
|
top: 0;
|
194
198
|
left: 0;
|
195
199
|
@include translate3d(0,0,0);
|
@@ -217,7 +221,7 @@ $orbit-timer-hide-for-small: true !default;
|
|
217
221
|
top: 10px;
|
218
222
|
#{$default-float}: 10px;
|
219
223
|
font-size: 12px;
|
220
|
-
span { font-weight:
|
224
|
+
span { font-weight: $font-weight-bold; padding: $orbit-slide-number-padding;}
|
221
225
|
color: $orbit-slide-number-font-color;
|
222
226
|
background: $orbit-slide-number-bg;
|
223
227
|
z-index: 10;
|
@@ -256,7 +260,7 @@ $orbit-timer-hide-for-small: true !default;
|
|
256
260
|
border-top: none;
|
257
261
|
border-bottom: none;
|
258
262
|
}
|
259
|
-
|
263
|
+
|
260
264
|
// Pause button
|
261
265
|
&.paused {
|
262
266
|
& > span {
|
@@ -268,14 +272,14 @@ $orbit-timer-hide-for-small: true !default;
|
|
268
272
|
border-left-style: solid;
|
269
273
|
@include rotate(180deg);
|
270
274
|
border-color: transparent #fff transparent transparent;
|
271
|
-
&.dark {
|
275
|
+
&.dark {
|
272
276
|
border-color: transparent #333 transparent transparent;
|
273
277
|
}
|
274
278
|
}
|
275
279
|
}
|
276
280
|
}
|
277
|
-
|
278
|
-
|
281
|
+
|
282
|
+
|
279
283
|
|
280
284
|
&:hover .orbit-timer > span { display: block; }
|
281
285
|
|
@@ -388,15 +392,15 @@ $orbit-timer-hide-for-small: true !default;
|
|
388
392
|
|
389
393
|
.orbit-slides-container {height: auto !important;}
|
390
394
|
.orbit-slides-container > * {
|
391
|
-
position: relative;
|
395
|
+
position: relative !important;
|
392
396
|
margin-left: 0% !important;
|
393
|
-
opacity:1 !important;
|
394
|
-
-webkit-transform:none !important;
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
transition:none !important;
|
397
|
+
opacity: 1 !important;
|
398
|
+
-webkit-transform: none !important;
|
399
|
+
-moz-transform: none !important;
|
400
|
+
-ms-transform: none !important;
|
401
|
+
-o-transform: none !important;
|
402
|
+
transform: none !important;
|
403
|
+
transition: none !important;
|
400
404
|
}
|
401
405
|
|
402
406
|
@if $orbit-timer-hide-for-small {
|
@@ -408,6 +412,10 @@ $orbit-timer-hide-for-small: true !default;
|
|
408
412
|
@if $orbit-bullet-hide-for-small {
|
409
413
|
.orbit-bullets{display: none;}
|
410
414
|
}
|
415
|
+
|
416
|
+
.orbit-slide-number {
|
417
|
+
display: none;
|
418
|
+
}
|
411
419
|
}
|
412
420
|
}
|
413
421
|
|