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.
- checksums.yaml +4 -4
- data/README.md +3 -2
- data/app/views/foundation/rails/styleguide/show.html.erb +8 -8
- data/bower.json +2 -2
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/install_generator.rb +1 -0
- data/lib/generators/foundation/templates/_settings.scss +9 -3
- data/lib/generators/foundation/templates/browserslist +4 -0
- data/vendor/assets/_vendor/sassy-lists/stylesheets/functions/_contain.scss +31 -0
- data/vendor/assets/js/foundation.abide.js +1 -1
- data/vendor/assets/js/foundation.accordionMenu.js +2 -2
- data/vendor/assets/js/foundation.core.js +1 -1
- data/vendor/assets/js/foundation.drilldown.js +3 -3
- data/vendor/assets/js/foundation.dropdown.js +41 -21
- data/vendor/assets/js/foundation.dropdownMenu.js +4 -5
- data/vendor/assets/js/foundation.js +1 -3
- data/vendor/assets/js/foundation.offcanvas.js +11 -9
- data/vendor/assets/js/foundation.orbit.js +1 -1
- data/vendor/assets/js/foundation.reveal.js +2 -3
- data/vendor/assets/js/foundation.slider.js +8 -9
- data/vendor/assets/js/foundation.sticky.js +2 -3
- data/vendor/assets/js/foundation.toggler.js +2 -3
- data/vendor/assets/js/foundation.tooltip.js +2 -3
- data/vendor/assets/js/foundation.util.box.js +12 -13
- data/vendor/assets/js/foundation.util.mediaQuery.js +1 -0
- data/vendor/assets/js/foundation.util.triggers.js +2 -3
- data/vendor/assets/scss/_global.scss +5 -3
- data/vendor/assets/scss/components/_button-group.scss +1 -1
- data/vendor/assets/scss/components/_button.scss +6 -0
- data/vendor/assets/scss/components/_dropdown-menu.scss +2 -0
- data/vendor/assets/scss/components/_menu.scss +15 -1
- data/vendor/assets/scss/components/_off-canvas.scss +106 -43
- data/vendor/assets/scss/forms/_input-group.scss +9 -2
- data/vendor/assets/scss/foundation.scss +2 -1
- data/vendor/assets/scss/grid/_flex-grid.scss +0 -4
- data/vendor/assets/scss/grid/_position.scss +1 -1
- data/vendor/assets/scss/prototype/_prototype.scss +0 -4
- data/vendor/assets/scss/prototype/_rounded.scss +1 -1
- data/vendor/assets/scss/settings/_settings.scss +9 -3
- data/vendor/assets/scss/typography/_base.scss +8 -8
- data/vendor/assets/scss/util/_breakpoint.scss +11 -3
- data/vendor/assets/scss/util/_mixins.scss +3 -6
- data/vendor/assets/scss/xy-grid/_cell.scss +2 -12
- data/vendor/assets/scss/xy-grid/_classes.scss +40 -19
- data/vendor/assets/scss/xy-grid/_collapse.scss +35 -15
- data/vendor/assets/scss/xy-grid/_frame.scss +40 -9
- data/vendor/assets/scss/xy-grid/_grid.scss +4 -25
- data/vendor/assets/scss/xy-grid/_gutters.scss +2 -2
- data/vendor/assets/scss/xy-grid/_layout.scss +1 -1
- data/vendor/assets/scss/xy-grid/_xy-grid.scss +3 -4
- metadata +5 -5
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js +0 -90
- 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
|
-
|
353
|
-
|
354
|
-
|
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
|
-
|
370
|
-
|
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
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
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
|
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
|
@@ -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
|
11
|
-
$offcanvas-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
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
|
-
$
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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-
|
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-
|
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
|
}
|