foundation-rails 6.4.1.3 → 6.4.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 (53) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -2
  3. data/app/views/foundation/rails/styleguide/show.html.erb +8 -8
  4. data/bower.json +2 -2
  5. data/lib/foundation/rails/version.rb +1 -1
  6. data/lib/generators/foundation/install_generator.rb +1 -0
  7. data/lib/generators/foundation/templates/_settings.scss +9 -3
  8. data/lib/generators/foundation/templates/browserslist +4 -0
  9. data/vendor/assets/_vendor/sassy-lists/stylesheets/functions/_contain.scss +31 -0
  10. data/vendor/assets/js/foundation.abide.js +1 -1
  11. data/vendor/assets/js/foundation.accordionMenu.js +2 -2
  12. data/vendor/assets/js/foundation.core.js +1 -1
  13. data/vendor/assets/js/foundation.drilldown.js +3 -3
  14. data/vendor/assets/js/foundation.dropdown.js +41 -21
  15. data/vendor/assets/js/foundation.dropdownMenu.js +4 -5
  16. data/vendor/assets/js/foundation.js +1 -3
  17. data/vendor/assets/js/foundation.offcanvas.js +11 -9
  18. data/vendor/assets/js/foundation.orbit.js +1 -1
  19. data/vendor/assets/js/foundation.reveal.js +2 -3
  20. data/vendor/assets/js/foundation.slider.js +8 -9
  21. data/vendor/assets/js/foundation.sticky.js +2 -3
  22. data/vendor/assets/js/foundation.toggler.js +2 -3
  23. data/vendor/assets/js/foundation.tooltip.js +2 -3
  24. data/vendor/assets/js/foundation.util.box.js +12 -13
  25. data/vendor/assets/js/foundation.util.mediaQuery.js +1 -0
  26. data/vendor/assets/js/foundation.util.triggers.js +2 -3
  27. data/vendor/assets/scss/_global.scss +5 -3
  28. data/vendor/assets/scss/components/_button-group.scss +1 -1
  29. data/vendor/assets/scss/components/_button.scss +6 -0
  30. data/vendor/assets/scss/components/_dropdown-menu.scss +2 -0
  31. data/vendor/assets/scss/components/_menu.scss +15 -1
  32. data/vendor/assets/scss/components/_off-canvas.scss +106 -43
  33. data/vendor/assets/scss/forms/_input-group.scss +9 -2
  34. data/vendor/assets/scss/foundation.scss +2 -1
  35. data/vendor/assets/scss/grid/_flex-grid.scss +0 -4
  36. data/vendor/assets/scss/grid/_position.scss +1 -1
  37. data/vendor/assets/scss/prototype/_prototype.scss +0 -4
  38. data/vendor/assets/scss/prototype/_rounded.scss +1 -1
  39. data/vendor/assets/scss/settings/_settings.scss +9 -3
  40. data/vendor/assets/scss/typography/_base.scss +8 -8
  41. data/vendor/assets/scss/util/_breakpoint.scss +11 -3
  42. data/vendor/assets/scss/util/_mixins.scss +3 -6
  43. data/vendor/assets/scss/xy-grid/_cell.scss +2 -12
  44. data/vendor/assets/scss/xy-grid/_classes.scss +40 -19
  45. data/vendor/assets/scss/xy-grid/_collapse.scss +35 -15
  46. data/vendor/assets/scss/xy-grid/_frame.scss +40 -9
  47. data/vendor/assets/scss/xy-grid/_grid.scss +4 -25
  48. data/vendor/assets/scss/xy-grid/_gutters.scss +2 -2
  49. data/vendor/assets/scss/xy-grid/_layout.scss +1 -1
  50. data/vendor/assets/scss/xy-grid/_xy-grid.scss +3 -4
  51. metadata +5 -5
  52. data/vendor/assets/js/foundation.util.timerAndImageLoader.js +0 -90
  53. data/vendor/assets/js/foundation.zf.responsiveAccordionTabs.js +0 -262
@@ -6,9 +6,9 @@
6
6
  //= require foundation.util.motion.js
7
7
  //= require foundation.util.nest.js
8
8
  //= require foundation.util.timer.js
9
- //= require foundation.util.timerAndImageLoader.js
10
9
  //= require foundation.util.touch.js
11
10
  //= require foundation.util.triggers.js
11
+ //= require foundation.smoothScroll.js
12
12
  //= require foundation.abide.js
13
13
  //= require foundation.accordion.js
14
14
  //= require foundation.accordionMenu.js
@@ -25,9 +25,7 @@
25
25
  //= require foundation.responsiveToggle.js
26
26
  //= require foundation.reveal.js
27
27
  //= require foundation.slider.js
28
- //= require foundation.smoothScroll.js
29
28
  //= require foundation.sticky.js
30
29
  //= require foundation.tabs.js
31
30
  //= require foundation.toggler.js
32
31
  //= require foundation.tooltip.js
33
- //= require foundation.zf.responsiveAccordionTabs.js
@@ -343,15 +343,17 @@ var OffCanvas = function (_Plugin) {
343
343
  /**
344
344
  * Removes the CSS transition/position classes of the off-canvas content container.
345
345
  * Removing the classes is important when another off-canvas gets opened that uses the same content container.
346
+ * @param {Boolean} hasReveal - true if related off-canvas element is revealed.
346
347
  * @private
347
348
  */
348
349
 
349
350
  }, {
350
351
  key: '_removeContentClasses',
351
352
  value: function _removeContentClasses(hasReveal) {
352
- this.$content.removeClass(this.contentClasses.base.join(' '));
353
- if (hasReveal === true) {
354
- this.$content.removeClass(this.contentClasses.reveal.join(' '));
353
+ if (typeof hasReveal !== 'boolean') {
354
+ this.$content.removeClass(this.contentClasses.base.join(' '));
355
+ } else if (hasReveal === false) {
356
+ this.$content.removeClass('has-reveal-' + this.position);
355
357
  }
356
358
  }
357
359
 
@@ -365,9 +367,10 @@ var OffCanvas = function (_Plugin) {
365
367
  }, {
366
368
  key: '_addContentClasses',
367
369
  value: function _addContentClasses(hasReveal) {
368
- this._removeContentClasses();
369
- this.$content.addClass('has-transition-' + this.options.transition + ' has-position-' + this.position);
370
- if (hasReveal === true) {
370
+ this._removeContentClasses(hasReveal);
371
+ if (typeof hasReveal !== 'boolean') {
372
+ this.$content.addClass('has-transition-' + this.options.transition + ' has-position-' + this.position);
373
+ } else if (hasReveal === true) {
371
374
  this.$content.addClass('has-reveal-' + this.position);
372
375
  }
373
376
  }
@@ -898,10 +901,9 @@ Triggers.Listeners.Global = {
898
901
  _this.triggerHandler('close.zf.trigger', [_this]);
899
902
  });
900
903
  }
901
- };
902
904
 
903
- // Global, parses whole document.
904
- Triggers.Initializers.addClosemeListener = function (pluginName) {
905
+ // Global, parses whole document.
906
+ };Triggers.Initializers.addClosemeListener = function (pluginName) {
905
907
  var yetiBoxes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-yeti-box]'),
906
908
  plugNames = ['dropdown', 'tooltip', 'reveal'];
907
909
 
@@ -346,7 +346,7 @@ var Orbit = function (_Plugin) {
346
346
  temp = this.getBoundingClientRect().height;
347
347
  __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).attr('data-slide', counter);
348
348
 
349
- if (_this.$slides.filter('.is-active')[0] !== _this.$slides.eq(counter)[0]) {
349
+ if (!/mui/g.test(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this)[0].className) && _this.$slides.filter('.is-active')[0] !== _this.$slides.eq(counter)[0]) {
350
350
  //if not the active slide, set css position and display property
351
351
  __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).css({ 'position': 'relative', 'display': 'none' });
352
352
  }
@@ -912,10 +912,9 @@ Triggers.Listeners.Global = {
912
912
  _this.triggerHandler('close.zf.trigger', [_this]);
913
913
  });
914
914
  }
915
- };
916
915
 
917
- // Global, parses whole document.
918
- Triggers.Initializers.addClosemeListener = function (pluginName) {
916
+ // Global, parses whole document.
917
+ };Triggers.Initializers.addClosemeListener = function (pluginName) {
919
918
  var yetiBoxes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-yeti-box]'),
920
919
  plugNames = ['dropdown', 'tooltip', 'reveal'];
921
920
 
@@ -396,6 +396,12 @@ var Slider = function (_Plugin) {
396
396
 
397
397
  var isDbl = this.options.doubleSided;
398
398
 
399
+ //this is for single-handled vertical sliders, it adjusts the value to account for the slider being "upside-down"
400
+ //for click and drag events, it's weird due to the scale(-1, 1) css property
401
+ if (this.options.vertical && !noInvert) {
402
+ location = this.options.end - location;
403
+ }
404
+
399
405
  if (isDbl) {
400
406
  //this block is to prevent 2 handles from crossing eachother. Could/should be improved.
401
407
  if (this.handles.index($hndl) === 0) {
@@ -407,12 +413,6 @@ var Slider = function (_Plugin) {
407
413
  }
408
414
  }
409
415
 
410
- //this is for single-handled vertical sliders, it adjusts the value to account for the slider being "upside-down"
411
- //for click and drag events, it's weird due to the scale(-1, 1) css property
412
- if (this.options.vertical && !noInvert) {
413
- location = this.options.end - location;
414
- }
415
-
416
416
  var _this = this,
417
417
  vert = this.options.vertical,
418
418
  hOrW = vert ? 'height' : 'width',
@@ -1082,10 +1082,9 @@ Triggers.Listeners.Global = {
1082
1082
  _this.triggerHandler('close.zf.trigger', [_this]);
1083
1083
  });
1084
1084
  }
1085
- };
1086
1085
 
1087
- // Global, parses whole document.
1088
- Triggers.Initializers.addClosemeListener = function (pluginName) {
1086
+ // Global, parses whole document.
1087
+ };Triggers.Initializers.addClosemeListener = function (pluginName) {
1089
1088
  var yetiBoxes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-yeti-box]'),
1090
1089
  plugNames = ['dropdown', 'tooltip', 'reveal'];
1091
1090
 
@@ -847,10 +847,9 @@ Triggers.Listeners.Global = {
847
847
  _this.triggerHandler('close.zf.trigger', [_this]);
848
848
  });
849
849
  }
850
- };
851
850
 
852
- // Global, parses whole document.
853
- Triggers.Initializers.addClosemeListener = function (pluginName) {
851
+ // Global, parses whole document.
852
+ };Triggers.Initializers.addClosemeListener = function (pluginName) {
854
853
  var yetiBoxes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-yeti-box]'),
855
854
  plugNames = ['dropdown', 'tooltip', 'reveal'];
856
855
 
@@ -448,10 +448,9 @@ Triggers.Listeners.Global = {
448
448
  _this.triggerHandler('close.zf.trigger', [_this]);
449
449
  });
450
450
  }
451
- };
452
451
 
453
- // Global, parses whole document.
454
- Triggers.Initializers.addClosemeListener = function (pluginName) {
452
+ // Global, parses whole document.
453
+ };Triggers.Initializers.addClosemeListener = function (pluginName) {
455
454
  var yetiBoxes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-yeti-box]'),
456
455
  plugNames = ['dropdown', 'tooltip', 'reveal'];
457
456
 
@@ -1034,10 +1034,9 @@ Triggers.Listeners.Global = {
1034
1034
  _this.triggerHandler('close.zf.trigger', [_this]);
1035
1035
  });
1036
1036
  }
1037
- };
1038
1037
 
1039
- // Global, parses whole document.
1040
- Triggers.Initializers.addClosemeListener = function (pluginName) {
1038
+ // Global, parses whole document.
1039
+ };Triggers.Initializers.addClosemeListener = function (pluginName) {
1041
1040
  var yetiBoxes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-yeti-box]'),
1042
1041
  plugNames = ['dropdown', 'tooltip', 'reveal'];
1043
1042
 
@@ -122,19 +122,18 @@ var Box = {
122
122
  GetDimensions: GetDimensions,
123
123
  GetOffsets: GetOffsets,
124
124
  GetExplicitOffsets: GetExplicitOffsets
125
- };
126
125
 
127
- /**
128
- * Compares the dimensions of an element to a container and determines collision events with container.
129
- * @function
130
- * @param {jQuery} element - jQuery object to test for collisions.
131
- * @param {jQuery} parent - jQuery object to use as bounding container.
132
- * @param {Boolean} lrOnly - set to true to check left and right values only.
133
- * @param {Boolean} tbOnly - set to true to check top and bottom values only.
134
- * @default if no parent object passed, detects collisions with `window`.
135
- * @returns {Boolean} - true if collision free, false if a collision in any direction.
136
- */
137
- function ImNotTouchingYou(element, parent, lrOnly, tbOnly, ignoreBottom) {
126
+ /**
127
+ * Compares the dimensions of an element to a container and determines collision events with container.
128
+ * @function
129
+ * @param {jQuery} element - jQuery object to test for collisions.
130
+ * @param {jQuery} parent - jQuery object to use as bounding container.
131
+ * @param {Boolean} lrOnly - set to true to check left and right values only.
132
+ * @param {Boolean} tbOnly - set to true to check top and bottom values only.
133
+ * @default if no parent object passed, detects collisions with `window`.
134
+ * @returns {Boolean} - true if collision free, false if a collision in any direction.
135
+ */
136
+ };function ImNotTouchingYou(element, parent, lrOnly, tbOnly, ignoreBottom) {
138
137
  return OverlapArea(element, parent, lrOnly, tbOnly, ignoreBottom) === 0;
139
138
  };
140
139
 
@@ -181,7 +180,7 @@ function OverlapArea(element, parent, lrOnly, tbOnly, ignoreBottom) {
181
180
  * @returns {Object} - nested object of integer pixel values
182
181
  * TODO - if element is window, return only those values.
183
182
  */
184
- function GetDimensions(elem, test) {
183
+ function GetDimensions(elem) {
185
184
  elem = elem.length ? elem[0] : elem;
186
185
 
187
186
  if (elem === window || elem === document) {
@@ -102,6 +102,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
102
102
 
103
103
 
104
104
  __WEBPACK_IMPORTED_MODULE_0__foundation_core__["Foundation"].MediaQuery = __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */];
105
+ __WEBPACK_IMPORTED_MODULE_0__foundation_core__["Foundation"].MediaQuery._init();
105
106
 
106
107
  /***/ }),
107
108
 
@@ -253,10 +253,9 @@ Triggers.Listeners.Global = {
253
253
  _this.triggerHandler('close.zf.trigger', [_this]);
254
254
  });
255
255
  }
256
- };
257
256
 
258
- // Global, parses whole document.
259
- Triggers.Initializers.addClosemeListener = function (pluginName) {
257
+ // Global, parses whole document.
258
+ };Triggers.Initializers.addClosemeListener = function (pluginName) {
260
259
  var yetiBoxes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-yeti-box]'),
261
260
  plugNames = ['dropdown', 'tooltip', 'reveal'];
262
261
 
@@ -109,6 +109,10 @@ $global-flexbox: true !default;
109
109
  /// @type Boolean
110
110
  $global-prototype-breakpoints: false !default;
111
111
 
112
+ /// Button cursor's value, `auto` by default
113
+ /// @type Keyword
114
+ $global-button-cursor: auto !default;
115
+
112
116
  @if not map-has-key($foundation-palette, primary) {
113
117
  @error 'In $foundation-palette, you must have a color named "primary".';
114
118
  }
@@ -205,15 +209,13 @@ $alert-color: get-color(alert);
205
209
  // Reset <button> styles created by most browsers
206
210
  button {
207
211
  @include disable-mouse-outline;
208
-
209
212
  padding: 0;
210
-
211
213
  appearance: none;
212
214
  border: 0;
213
215
  border-radius: $global-radius;
214
216
  background: transparent;
215
-
216
217
  line-height: 1;
218
+ cursor: $global-button-cursor;
217
219
  }
218
220
 
219
221
  // Prevent text overflow on pre
@@ -100,7 +100,7 @@ $buttongroup-radius-on-each: true !default;
100
100
  @else {
101
101
  // One child
102
102
  &:first-child:last-child {
103
- width: 100%
103
+ width: 100%;
104
104
  }
105
105
 
106
106
  // Two or more childreen
@@ -376,4 +376,10 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
376
376
  margin-#{$global-left}: 0;
377
377
  }
378
378
  }
379
+ a.button {
380
+ &:hover,
381
+ &:focus {
382
+ text-decoration: none;
383
+ }
384
+ }
379
385
  }
@@ -106,6 +106,7 @@ $dropdown-menu-item-background-active: transparent !default;
106
106
  > li.is-dropdown-submenu-parent > a::after {
107
107
  @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
108
108
  #{$global-right}: 5px;
109
+ #{$global-left}: auto;
109
110
  margin-top: -1 * ($dropdownmenu-arrow-size / 2);
110
111
  }
111
112
  }
@@ -206,6 +207,7 @@ $dropdown-menu-item-background-active: transparent !default;
206
207
  position: absolute;
207
208
  top: 50%;
208
209
  #{$global-right}: 5px;
210
+ #{$global-left}: auto;
209
211
  margin-top: -1 * $dropdownmenu-arrow-size;
210
212
  }
211
213
 
@@ -48,6 +48,11 @@ $menu-state-back-compat: true !default;
48
48
  /// @type Boolean
49
49
  $menu-centered-back-compat: true !default;
50
50
 
51
+ /// Backward compatibility for using `icon-*` classes without `.icons` classes
52
+ /// But please note that this backward compatibility will be removed in upcoming versions.
53
+ /// @type Boolean
54
+ $menu-icons-back-compat: true !default;
55
+
51
56
  /// Creates the base styles for a Menu.
52
57
  @mixin menu-base {
53
58
  padding: 0;
@@ -68,7 +73,6 @@ $menu-centered-back-compat: true !default;
68
73
  .button {
69
74
  line-height: 1;
70
75
  text-decoration: none;
71
- white-space: nowrap;
72
76
  display: block;
73
77
  padding: $menu-items-padding;
74
78
  }
@@ -406,6 +410,16 @@ $menu-centered-back-compat: true !default;
406
410
  @include menu-icons;
407
411
  }
408
412
 
413
+ // Backward Compatibility for active state
414
+ @if $menu-icons-back-compat {
415
+ &.icon-top,
416
+ &.icon-right,
417
+ &.icon-bottom,
418
+ &.icon-left {
419
+ @include menu-icons;
420
+ }
421
+ }
422
+
409
423
  // Icon Left
410
424
  &.icon-left {
411
425
  @include menu-icon-position(left);
@@ -6,13 +6,17 @@
6
6
  /// @group off-canvas
7
7
  ////
8
8
 
9
- /// Width of a left/right off-canvas panel.
10
- /// @type Number
11
- $offcanvas-size: 250px !default;
12
-
13
- /// Height of a top/bottom off-canvas panel.
14
- /// @type Number
15
- $offcanvas-vertical-size: 250px !default;
9
+ /// Width map of a left/right off-canvas panel.
10
+ /// @type Map
11
+ $offcanvas-sizes: (
12
+ small: 250px,
13
+ ) !default;
14
+
15
+ /// Height map of a top/bottom off-canvas panel.
16
+ /// @type Map
17
+ $offcanvas-vertical-sizes: (
18
+ small: 250px,
19
+ ) !default;
16
20
 
17
21
  /// Background color of an off-canvas panel.
18
22
  /// @type Color
@@ -68,6 +72,16 @@ $maincontent-class: 'off-canvas-content' !default;
68
72
  /// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
69
73
  @mixin off-canvas-basics {
70
74
 
75
+ /// Transform deprecated size settings into map & show warning
76
+ @if variable-exists(offcanvas-size) {
77
+ $offcanvas-sizes: (small: $offcanvas-size, medium: $offcanvas-size) !global;
78
+ @warn '$offcanvas-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-sizes instead';
79
+ }
80
+ @if variable-exists(offcanvas-vertical-size) {
81
+ $offcanvas-vertical-sizes: (small: $offcanvas-vertical-size, medium: $offcanvas-vertical-size) !global;
82
+ @warn '$offcanvas-vertical-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-vertical-sizes instead';
83
+ }
84
+
71
85
  // Checks the z-indexes and increase them due to backwards compatibility.
72
86
  // This is necessary because the overlay's z-index is new since v6.4 and may be identical to the user custom settings of the push z-index.
73
87
  @if $offcanvas-push-zindex <= $offcanvas-overlay-zindex { $offcanvas-push-zindex: $offcanvas-overlay-zindex + 1 !global; }
@@ -110,7 +124,7 @@ $maincontent-class: 'off-canvas-content' !default;
110
124
  &.is-overlay-absolute {
111
125
  position: absolute;
112
126
  }
113
-
127
+
114
128
  &.is-overlay-fixed {
115
129
  position: fixed;
116
130
  }
@@ -175,20 +189,29 @@ $maincontent-class: 'off-canvas-content' !default;
175
189
  @mixin off-canvas-position(
176
190
  $position: left,
177
191
  $orientation: horizontal,
178
- $size: if($orientation == horizontal, $offcanvas-size, $offcanvas-vertical-size)
192
+ $sizes: if($orientation == horizontal, $offcanvas-sizes, $offcanvas-vertical-sizes)
179
193
  ) {
180
194
  @if $position == left {
181
195
  top: 0;
182
196
  left: 0;
183
- width: $size;
184
197
  height: 100%;
185
-
186
- transform: translateX(-$size);
187
198
  overflow-y: auto;
188
-
199
+
200
+ @each $name, $size in $sizes {
201
+ @include breakpoint($name) {
202
+ width: $size;
203
+ transform: translateX(-$size);
204
+ }
205
+ }
206
+
189
207
  // Sets the position for nested off-canvas element
190
208
  @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
191
- transform: translateX(-$size);
209
+
210
+ @each $name, $size in $sizes {
211
+ @include breakpoint($name) {
212
+ transform: translateX(-$size);
213
+ }
214
+ }
192
215
  &.is-transition-overlap.is-open {
193
216
  transform: translate(0, 0);
194
217
  }
@@ -197,22 +220,35 @@ $maincontent-class: 'off-canvas-content' !default;
197
220
  // Sets the open position for the content
198
221
  @at-root .#{$maincontent-class}.is-open-#{$position} {
199
222
  &.has-transition-push {
200
- transform: translateX($size);
223
+ @each $name, $size in $sizes {
224
+ @include breakpoint($name) {
225
+ transform: translateX($size);
226
+ }
227
+ }
201
228
  }
202
229
  }
203
230
  }
204
231
  @else if $position == right {
205
232
  top: 0;
206
233
  right: 0;
207
- width: $size;
208
234
  height: 100%;
209
-
210
- transform: translateX($size);
211
235
  overflow-y: auto;
212
-
236
+
237
+ @each $name, $size in $sizes {
238
+ @include breakpoint($name) {
239
+ width: $size;
240
+ transform: translateX($size);
241
+ }
242
+ }
243
+
213
244
  // Sets the position for nested off-canvas element
214
245
  @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
215
- transform: translateX($size);
246
+
247
+ @each $name, $size in $sizes {
248
+ @include breakpoint($name) {
249
+ transform: translateX($size);
250
+ }
251
+ }
216
252
  &.is-transition-overlap.is-open {
217
253
  transform: translate(0, 0);
218
254
  }
@@ -221,23 +257,34 @@ $maincontent-class: 'off-canvas-content' !default;
221
257
  // Sets the open position for the content
222
258
  @at-root .#{$maincontent-class}.is-open-#{$position} {
223
259
  &.has-transition-push {
224
- transform: translateX(-$size);
260
+ @each $name, $size in $sizes {
261
+ @include breakpoint($name) {
262
+ transform: translateX(-$size);
263
+ }
264
+ }
225
265
  }
226
266
  }
227
267
  }
228
268
  @else if $position == top {
229
269
  top: 0;
230
270
  left: 0;
231
-
232
271
  width: 100%;
233
- height: $size;
234
-
235
- transform: translateY(-$size);
236
272
  overflow-x: auto;
237
-
273
+
274
+ @each $name, $size in $sizes {
275
+ @include breakpoint($name) {
276
+ height: $size;
277
+ transform: translateY(-$size);
278
+ }
279
+ }
280
+
238
281
  // Sets the position for nested off-canvas element
239
282
  @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
240
- transform: translateY(-$size);
283
+ @each $name, $size in $sizes {
284
+ @include breakpoint($name) {
285
+ transform: translateY(-$size);
286
+ }
287
+ }
241
288
  &.is-transition-overlap.is-open {
242
289
  transform: translate(0, 0);
243
290
  }
@@ -246,23 +293,34 @@ $maincontent-class: 'off-canvas-content' !default;
246
293
  // Sets the open position for the content
247
294
  @at-root .#{$maincontent-class}.is-open-#{$position} {
248
295
  &.has-transition-push {
249
- transform: translateY($size);
296
+ @each $name, $size in $sizes {
297
+ @include breakpoint($name) {
298
+ transform: translateY($size);
299
+ }
300
+ }
250
301
  }
251
302
  }
252
303
  }
253
304
  @else if $position == bottom {
254
305
  bottom: 0;
255
306
  left: 0;
256
-
257
307
  width: 100%;
258
- height: $size;
259
-
260
- transform: translateY($size);
261
308
  overflow-x: auto;
262
-
309
+
310
+ @each $name, $size in $sizes {
311
+ @include breakpoint($name) {
312
+ height: $size;
313
+ transform: translateY($size);
314
+ }
315
+ }
316
+
263
317
  // Sets the position for nested off-canvas element
264
318
  @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
265
- transform: translateY($size);
319
+ @each $name, $size in $sizes {
320
+ @include breakpoint($name) {
321
+ transform: translateY($size);
322
+ }
323
+ }
266
324
  &.is-transition-overlap.is-open {
267
325
  transform: translate(0, 0);
268
326
  }
@@ -271,7 +329,11 @@ $maincontent-class: 'off-canvas-content' !default;
271
329
  // Sets the open position for the content
272
330
  @at-root .#{$maincontent-class}.is-open-#{$position} {
273
331
  &.has-transition-push {
274
- transform: translateY(-$size);
332
+ @each $name, $size in $sizes {
333
+ @include breakpoint($name) {
334
+ transform: translateY(-$size);
335
+ }
336
+ }
275
337
  }
276
338
  }
277
339
  }
@@ -292,7 +354,7 @@ $maincontent-class: 'off-canvas-content' !default;
292
354
  @else if $position == bottom {
293
355
  @include inner-side-shadow(top, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
294
356
  }
295
- }
357
+ }
296
358
  }
297
359
 
298
360
  }
@@ -318,7 +380,8 @@ $maincontent-class: 'off-canvas-content' !default;
318
380
  @mixin off-canvas-reveal(
319
381
  $position: left,
320
382
  $zindex: $offcanvas-reveal-zindex,
321
- $content: $maincontent-class
383
+ $content: $maincontent-class,
384
+ $breakpoint: small
322
385
  ) {
323
386
  transform: none;
324
387
  z-index: $zindex;
@@ -339,12 +402,12 @@ $content: $maincontent-class
339
402
  }
340
403
 
341
404
  @at-root .#{$content}.has-reveal-#{$position} {
342
- margin-#{$position}: $offcanvas-size;
405
+ margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
343
406
  }
344
407
 
345
408
  // backwards compatibility (prior to v6.4)
346
409
  & ~ .#{$content} {
347
- margin-#{$position}: $offcanvas-size;
410
+ margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
348
411
  }
349
412
  }
350
413
 
@@ -411,19 +474,19 @@ $content: $maincontent-class
411
474
  @if $name != $-zf-zero-breakpoint {
412
475
  @include breakpoint($name) {
413
476
  .position-left.reveal-for-#{$name} {
414
- @include off-canvas-reveal(left);
477
+ @include off-canvas-reveal(left, $offcanvas-reveal-zindex, $maincontent-class, $name);
415
478
  }
416
479
 
417
480
  .position-right.reveal-for-#{$name} {
418
- @include off-canvas-reveal(right);
481
+ @include off-canvas-reveal(right, $offcanvas-reveal-zindex, $maincontent-class, $name);
419
482
  }
420
483
 
421
484
  .position-top.reveal-for-#{$name} {
422
- @include off-canvas-reveal(top);
485
+ @include off-canvas-reveal(top, $offcanvas-reveal-zindex, $maincontent-class, $name);
423
486
  }
424
487
 
425
488
  .position-bottom.reveal-for-#{$name} {
426
- @include off-canvas-reveal(bottom);
489
+ @include off-canvas-reveal(bottom, $offcanvas-reveal-zindex, $maincontent-class, $name);
427
490
  }
428
491
  }
429
492
  }