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.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/bower.json +2 -2
  3. data/lib/foundation/rails/version.rb +1 -1
  4. data/vendor/assets/javascripts/foundation/foundation.abide.js +5 -5
  5. data/vendor/assets/javascripts/foundation/foundation.accordion.js +13 -8
  6. data/vendor/assets/javascripts/foundation/foundation.alert.js +2 -2
  7. data/vendor/assets/javascripts/foundation/foundation.clearing.js +36 -33
  8. data/vendor/assets/javascripts/foundation/foundation.dropdown.js +15 -10
  9. data/vendor/assets/javascripts/foundation/foundation.equalizer.js +12 -6
  10. data/vendor/assets/javascripts/foundation/foundation.interchange.js +3 -3
  11. data/vendor/assets/javascripts/foundation/foundation.joyride.js +9 -15
  12. data/vendor/assets/javascripts/foundation/foundation.js +30 -28
  13. data/vendor/assets/javascripts/foundation/foundation.magellan.js +36 -31
  14. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +72 -14
  15. data/vendor/assets/javascripts/foundation/foundation.orbit.js +19 -15
  16. data/vendor/assets/javascripts/foundation/foundation.reveal.js +26 -16
  17. data/vendor/assets/javascripts/foundation/foundation.slider.js +2 -3
  18. data/vendor/assets/javascripts/foundation/foundation.tab.js +8 -9
  19. data/vendor/assets/javascripts/foundation/foundation.tooltip.js +30 -4
  20. data/vendor/assets/javascripts/foundation/foundation.topbar.js +22 -19
  21. data/vendor/assets/stylesheets/foundation/_settings.scss +50 -40
  22. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +8 -7
  23. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +2 -2
  24. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +1 -1
  25. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +1 -1
  26. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +8 -8
  27. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +6 -6
  28. data/vendor/assets/stylesheets/foundation/components/_forms.scss +7 -5
  29. data/vendor/assets/stylesheets/foundation/components/_global.scss +67 -3
  30. data/vendor/assets/stylesheets/foundation/components/_grid.scss +1 -2
  31. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +2 -1
  32. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +3 -3
  33. data/vendor/assets/stylesheets/foundation/components/_labels.scss +1 -1
  34. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +32 -58
  35. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +39 -31
  36. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +5 -5
  37. data/vendor/assets/stylesheets/foundation/components/_panels.scss +4 -5
  38. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +5 -5
  39. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +2 -2
  40. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +2 -2
  41. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +26 -4
  42. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +7 -7
  43. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +2 -2
  44. data/vendor/assets/stylesheets/foundation/components/_switch.scss +2 -2
  45. data/vendor/assets/stylesheets/foundation/components/_tables.scss +44 -12
  46. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +9 -5
  47. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +4 -4
  48. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +30 -26
  49. data/vendor/assets/stylesheets/foundation/components/_type.scss +39 -21
  50. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +64 -1
  51. data/vendor/assets/stylesheets/normalize.scss +20 -18
  52. 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
- &:before {
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
- &:before {
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
- &:before {
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
- &:before {
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
- &:before { border-color: $pip-color transparent transparent transparent; }
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:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
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, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
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.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}: rem-calc(22);
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: $topbar-menu-link-color;
290
+ color: $tabbar-menu-icon-color;
341
291
  position: relative;
342
- @include translate3d(0,0,0);
343
-
344
- // this is the actual hamburger icon
345
- @include hamburger();
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
- -webkit-transform:translate3d($x,$y,$z);
60
- -moz-transform:translate3d($x,$y,$z);
61
- // -ms-transform:translate3d($x,$y,$z);
62
- -o-transform:translate3d($x,$y,$z);
63
- transform:translate3d($x,$y,$z);
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
- -moz-transform: rotate($d);
69
- -ms-transform: rotate($d);
70
- -o-transform: rotate($d);
71
- transform: rotate($d);
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: 700; padding: $orbit-slide-number-padding;}
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
- -moz-transform:none !important;
396
- -ms-transform:none !important;
397
- -o-transform:none !important;
398
- transform:none !important;
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