framework7 7.1.5 → 8.0.0-beta.2

package/components/stepper/stepper-class.js

@@ -1,7 +1,6 @@
 import $ from '../../shared/dom7.js';
 import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
-
 class Stepper extends Framework7Class {
   constructor(app, params) {
     super(params, [app]);
@@ -22,32 +21,28 @@ class Stepper extends Framework7Class {
       manualInputMode: false,
       decimalPoint: 4,
       buttonsEndInputMode: true
-    }; // Extend defaults with modules params
+    };
 
+    // Extend defaults with modules params
     stepper.useModulesParams(defaults);
     stepper.params = extend(defaults, params);
-
     if (stepper.params.value < stepper.params.min) {
       stepper.params.value = stepper.params.min;
     }
-
     if (stepper.params.value > stepper.params.max) {
       stepper.params.value = stepper.params.max;
     }
-
     const el = stepper.params.el;
     if (!el) return stepper;
     const $el = $(el);
     if ($el.length === 0) return stepper;
     if ($el[0].f7Stepper) return $el[0].f7Stepper;
     let $inputEl;
-
     if (stepper.params.inputEl) {
       $inputEl = $(stepper.params.inputEl);
     } else if ($el.find('.stepper-input-wrap').find('input, textarea').length) {
       $inputEl = $el.find('.stepper-input-wrap').find('input, textarea').eq(0);
     }
-
     if ($inputEl && $inputEl.length) {
       'step min max'.split(' ').forEach(paramName => {
         if (!params[paramName] && $inputEl.attr(paramName)) {
@@ -55,28 +50,22 @@ class Stepper extends Framework7Class {
         }
       });
       const decimalPoint = parseInt(stepper.params.decimalPoint, 10);
-
       if (Number.isNaN(decimalPoint)) {
         stepper.params.decimalPoint = 0;
       } else {
         stepper.params.decimalPoint = decimalPoint;
       }
-
       const inputValue = parseFloat($inputEl.val());
-
       if (typeof params.value === 'undefined' && !Number.isNaN(inputValue) && (inputValue || inputValue === 0)) {
         stepper.params.value = inputValue;
       }
     }
-
     let $valueEl;
-
     if (stepper.params.valueEl) {
       $valueEl = $(stepper.params.valueEl);
     } else if ($el.find('.stepper-value').length) {
       $valueEl = $el.find('.stepper-value').eq(0);
     }
-
     const $buttonPlusEl = $el.find('.stepper-button-plus');
     const $buttonMinusEl = $el.find('.stepper-button-minus');
     const {
@@ -105,8 +94,9 @@ class Stepper extends Framework7Class {
       decimalPoint,
       typeModeChanged: false
     });
-    $el[0].f7Stepper = stepper; // Handle Events
+    $el[0].f7Stepper = stepper;
 
+    // Handle Events
     const touchesStart = {};
     let isTouched;
     let isScrolling;
@@ -116,7 +106,6 @@ class Stepper extends Framework7Class {
     let autorepeatAction = null;
     let autorepeatInAction = false;
     let manualInput = false;
-
     function dynamicRepeat(current, progressions, startsIn, progressionStep, repeatEvery, action) {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
@@ -124,32 +113,26 @@ class Stepper extends Framework7Class {
           preventButtonClick = true;
           autorepeatInAction = true;
         }
-
         clearInterval(intervalId);
         action();
         intervalId = setInterval(() => {
           action();
         }, repeatEvery);
-
         if (current < progressions) {
           dynamicRepeat(current + 1, progressions, startsIn, progressionStep, repeatEvery / 2, action);
         }
       }, current === 1 ? startsIn : progressionStep);
     }
-
     function onTouchStart(e) {
       if (isTouched) return;
-
       if (manualInput) {
         return;
       }
-
       if ($(e.target).closest($buttonPlusEl).length) {
         autorepeatAction = 'increment';
       } else if ($(e.target).closest($buttonMinusEl).length) {
         autorepeatAction = 'decrement';
       }
-
       if (!autorepeatAction) return;
       touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
       touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
@@ -160,30 +143,23 @@ class Stepper extends Framework7Class {
         stepper[autorepeatAction]();
       });
     }
-
     function onTouchMove(e) {
       if (!isTouched) return;
-
       if (manualInput) {
         return;
       }
-
       const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
       const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
-
       if (typeof isScrolling === 'undefined' && !autorepeatInAction) {
         isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
       }
-
       const distance = ((pageX - touchesStart.x) ** 2 + (pageY - touchesStart.y) ** 2) ** 0.5;
-
       if (isScrolling || distance > 20) {
         isTouched = false;
         clearTimeout(timeoutId);
         clearInterval(intervalId);
       }
     }
-
     function onTouchEnd() {
       clearTimeout(timeoutId);
       clearInterval(intervalId);
@@ -191,54 +167,43 @@ class Stepper extends Framework7Class {
       autorepeatInAction = false;
       isTouched = false;
     }
-
     function onMinusClick() {
       if (manualInput) {
         if (stepper.params.buttonsEndInputMode) {
           manualInput = false;
           stepper.endTypeMode(true);
         }
-
         return;
       }
-
       if (preventButtonClick) {
         preventButtonClick = false;
         return;
       }
-
       stepper.decrement(true);
     }
-
     function onPlusClick() {
       if (manualInput) {
         if (stepper.params.buttonsEndInputMode) {
           manualInput = false;
           stepper.endTypeMode(true);
         }
-
         return;
       }
-
       if (preventButtonClick) {
         preventButtonClick = false;
         return;
       }
-
       stepper.increment(true);
     }
-
     function onInputClick(e) {
       if (!e.target.readOnly && stepper.params.manualInputMode) {
         manualInput = true;
-
         if (typeof e.target.selectionStart === 'number') {
           e.target.selectionStart = e.target.value.length;
           e.target.selectionEnd = e.target.value.length;
         }
       }
     }
-
     function onInputKey(e) {
       if (e.keyCode === 13 || e.which === 13) {
         e.preventDefault();
@@ -246,77 +211,65 @@ class Stepper extends Framework7Class {
         stepper.endTypeMode();
       }
     }
-
     function onInputBlur() {
       manualInput = false;
       stepper.endTypeMode(true);
     }
-
     function onInput(e) {
       if (manualInput) {
         stepper.typeValue(e.target.value);
         return;
       }
-
       if (e.detail && e.detail.sentByF7Stepper) return;
       stepper.setValue(e.target.value, true);
     }
-
     stepper.attachEvents = function attachEvents() {
       $buttonMinusEl.on('click', onMinusClick);
       $buttonPlusEl.on('click', onPlusClick);
-
       if (stepper.params.watchInput && $inputEl && $inputEl.length) {
         $inputEl.on('input', onInput);
         $inputEl.on('click', onInputClick);
         $inputEl.on('blur', onInputBlur);
         $inputEl.on('keyup', onInputKey);
       }
-
       if (stepper.params.autorepeat) {
         app.on('touchstart:passive', onTouchStart);
         app.on('touchmove:active', onTouchMove);
         app.on('touchend:passive', onTouchEnd);
       }
     };
-
     stepper.detachEvents = function detachEvents() {
       $buttonMinusEl.off('click', onMinusClick);
       $buttonPlusEl.off('click', onPlusClick);
-
       if (stepper.params.watchInput && $inputEl && $inputEl.length) {
         $inputEl.off('input', onInput);
         $inputEl.off('click', onInputClick);
         $inputEl.off('blur', onInputBlur);
         $inputEl.off('keyup', onInputKey);
       }
-    }; // Install Modules
-
+    };
 
-    stepper.useModules(); // Init
+    // Install Modules
+    stepper.useModules();
 
+    // Init
     stepper.init();
     return stepper;
   }
-
   minus() {
     return this.decrement();
   }
-
   plus() {
     return this.increment();
   }
-
   decrement() {
     const stepper = this;
     return stepper.setValue(stepper.value - stepper.step, false, true);
   }
-
   increment() {
     const stepper = this;
     return stepper.setValue(stepper.value + stepper.step, false, true);
   }
-
   setValue(newValue, forceUpdate, withWraps) {
     const stepper = this;
     const {
@@ -326,40 +279,34 @@ class Stepper extends Framework7Class {
     } = stepper;
     const oldValue = stepper.value;
     let value = Math.round(newValue / step) * step;
-
     if (stepper.params.wraps && withWraps) {
       if (value > max) value = min;
       if (value < min) value = max;
     } else {
       value = Math.max(Math.min(value, max), min);
     }
-
     if (Number.isNaN(value)) {
       value = oldValue;
     }
-
     stepper.value = value;
-    const valueChanged = oldValue !== value; // Events
+    const valueChanged = oldValue !== value;
 
+    // Events
     if (!valueChanged && !forceUpdate) return stepper;
     stepper.$el.trigger('stepper:change', stepper.value);
     const formattedValue = stepper.formatValue(stepper.value);
-
     if (stepper.$inputEl && stepper.$inputEl.length) {
       stepper.$inputEl.val(formattedValue);
       stepper.$inputEl.trigger('input change', {
         sentByF7Stepper: true
       });
     }
-
     if (stepper.$valueEl && stepper.$valueEl.length) {
       stepper.$valueEl.html(formattedValue);
     }
-
     stepper.emit('local::change stepperChange', stepper, stepper.value);
     return stepper;
   }
-
   endTypeMode(noBlur) {
     const stepper = this;
     const {
@@ -370,19 +317,15 @@ class Stepper extends Framework7Class {
     if (Number.isNaN(value)) value = 0;
     value = Math.max(Math.min(value, max), min);
     stepper.value = value;
-
     if (!stepper.typeModeChanged) {
       if (stepper.$inputEl && stepper.$inputEl.length && !noBlur) {
         stepper.$inputEl.blur();
       }
-
       return stepper;
     }
-
     stepper.typeModeChanged = false;
     stepper.$el.trigger('stepper:change', stepper.value);
     const formattedValue = stepper.formatValue(stepper.value);
-
     if (stepper.$inputEl && stepper.$inputEl.length) {
       stepper.$inputEl.val(formattedValue);
       stepper.$inputEl.trigger('input change', {
@@ -390,21 +333,17 @@ class Stepper extends Framework7Class {
       });
       if (!noBlur) stepper.$inputEl.blur();
     }
-
     if (stepper.$valueEl && stepper.$valueEl.length) {
       stepper.$valueEl.html(formattedValue);
     }
-
     stepper.emit('local::change stepperChange', stepper, stepper.value);
     return stepper;
   }
-
   typeValue(value) {
     const stepper = this;
     stepper.typeModeChanged = true;
     let inputTxt = String(value);
     if (inputTxt.length === 1 && inputTxt === '-') return stepper;
-
     if (inputTxt.lastIndexOf('.') + 1 === inputTxt.length || inputTxt.lastIndexOf(',') + 1 === inputTxt.length) {
       if (inputTxt.lastIndexOf('.') !== inputTxt.indexOf('.') || inputTxt.lastIndexOf(',') !== inputTxt.indexOf(',')) {
         inputTxt = inputTxt.slice(0, -1);
@@ -414,53 +353,43 @@ class Stepper extends Framework7Class {
       }
     } else {
       let newValue = parseFloat(inputTxt.replace(',', '.'));
-
       if (newValue === 0) {
         stepper.value = inputTxt.replace(',', '.');
         stepper.$inputEl.val(stepper.value);
         return stepper;
       }
-
       if (Number.isNaN(newValue)) {
         stepper.value = 0;
         stepper.$inputEl.val(stepper.value);
         return stepper;
       }
-
       const powVal = 10 ** stepper.params.decimalPoint;
       newValue = Math.round(newValue * powVal).toFixed(stepper.params.decimalPoint + 1) / powVal;
       stepper.value = parseFloat(String(newValue).replace(',', '.'));
       stepper.$inputEl.val(stepper.value);
       return stepper;
     }
-
     stepper.value = inputTxt;
     stepper.$inputEl.val(inputTxt);
     return stepper;
   }
-
   getValue() {
     return this.value;
   }
-
   formatValue(value) {
     const stepper = this;
     if (!stepper.params.formatValue) return value;
     return stepper.params.formatValue.call(stepper, value);
   }
-
   init() {
     const stepper = this;
     stepper.attachEvents();
-
     if (stepper.$valueEl && stepper.$valueEl.length) {
       const formattedValue = stepper.formatValue(stepper.value);
       stepper.$valueEl.html(formattedValue);
     }
-
     return stepper;
   }
-
   destroy() {
     let stepper = this;
     stepper.$el.trigger('stepper:beforedestroy');
@@ -470,7 +399,5 @@ class Stepper extends Framework7Class {
     deleteProps(stepper);
     stepper = null;
   }
-
 }
-
 export default Stepper;

package/components/stepper/stepper-rtl.css

@@ -1 +1 @@
-:root{--f7-stepper-fill-button-text-color:#fff;--f7-stepper-raised-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12),0 1px 2px rgba(0, 0, 0, 0.24);--f7-stepper-value-font-weight:500;--f7-stepper-border-width:2px;--f7-stepper-small-border-width:2px}.ios{--f7-stepper-height:28px;--f7-stepper-border-radius:5px;--f7-stepper-large-height:44px;--f7-stepper-small-height:26px;--f7-stepper-value-font-size:17px}.md{--f7-stepper-height:36px;--f7-stepper-border-radius:4px;--f7-stepper-large-height:48px;--f7-stepper-small-height:28px;--f7-stepper-value-font-size:14px}.aurora{--f7-stepper-height:36px;--f7-stepper-border-radius:8px;--f7-stepper-large-height:48px;--f7-stepper-small-height:28px;--f7-stepper-value-font-size:14px}.stepper{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);display:inline-flex;align-items:stretch;height:var(--f7-stepper-height);border-radius:var(--f7-stepper-border-radius);flex-direction:row-reverse}.stepper-button,.stepper-button-minus,.stepper-button-plus{background-color:var(--f7-stepper-button-bg-color);width:40px;border-radius:var(--f7-stepper-border-radius);border:var(--f7-stepper-border-width) solid var(--f7-theme-color);color:var(--f7-stepper-button-text-color,var(--f7-theme-color));line-height:calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));text-align:center;display:flex;justify-content:center;align-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;position:relative;cursor:pointer}.stepper-button-minus.active-state,.stepper-button-plus.active-state,.stepper-button.active-state{background-color:var(--f7-stepper-button-pressed-bg-color,rgba(var(--f7-theme-color-rgb),.15));color:var(--f7-stepper-button-pressed-text-color,var(--f7-stepper-button-text-color,var(--f7-theme-color)))}.stepper-button-minus:first-child,.stepper-button-plus:first-child,.stepper-button:first-child{border-radius:var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius)}.stepper-button-minus:last-child,.stepper-button-plus:last-child,.stepper-button:last-child{border-radius:0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0}.stepper-button .icon,.stepper-button-minus .icon,.stepper-button-plus .icon{pointer-events:none}.stepper-button+.stepper-button,.stepper-button+.stepper-button-minus,.stepper-button+.stepper-button-plus,.stepper-button-minus+.stepper-button,.stepper-button-minus+.stepper-button-minus,.stepper-button-minus+.stepper-button-plus,.stepper-button-plus+.stepper-button,.stepper-button-plus+.stepper-button-minus,.stepper-button-plus+.stepper-button-plus{border-left:none}.stepper-button-minus,.stepper-button-plus{-webkit-user-select:none;user-select:none}.stepper-button-minus:after,.stepper-button-minus:before,.stepper-button-plus:after,.stepper-button-plus:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--f7-stepper-button-text-color,var(--f7-theme-color));border-radius:2px}.stepper-button-minus:after,.stepper-button-plus:after{width:15px;height:2px}.stepper-button-plus:before{height:15px;width:2px}.stepper-value{display:flex;align-content:center;align-items:center;justify-content:center}.stepper-input-wrap,.stepper-value{flex-shrink:1;text-align:center;border-top:var(--f7-stepper-border-width) solid var(--f7-theme-color);border-bottom:var(--f7-stepper-border-width) solid var(--f7-theme-color)}.stepper .stepper-input-wrap input,.stepper-value{width:45px;color:var(--f7-stepper-value-text-color,var(--f7-theme-color));font-size:var(--f7-stepper-value-font-size);font-weight:var(--f7-stepper-value-font-weight);text-align:center}.stepper .stepper-input-wrap input{height:100%}.aurora .stepper-round-aurora,.ios .stepper-round-ios,.md .stepper-round-md,.stepper-round{--f7-stepper-border-radius:var(--f7-stepper-height)}.aurora .stepper-fill-aurora,.ios .stepper-fill-ios,.md .stepper-fill-md,.stepper-fill{--f7-stepper-button-bg-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-text-color:var(--f7-stepper-fill-button-text-color);--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.aurora .stepper-fill-aurora .stepper-button+.stepper-button,.aurora .stepper-fill-aurora .stepper-button-minus+.stepper-button-plus,.aurora .stepper-raised-aurora .stepper-button+.stepper-button,.aurora .stepper-raised-aurora .stepper-button-minus+.stepper-button-plus,.ios .stepper-fill-ios .stepper-button+.stepper-button,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus,.ios .stepper-raised-ios .stepper-button+.stepper-button,.ios .stepper-raised-ios .stepper-button-minus+.stepper-button-plus,.md .stepper-fill-md .stepper-button+.stepper-button,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus,.md .stepper-raised-md .stepper-button+.stepper-button,.md .stepper-raised-md .stepper-button-minus+.stepper-button-plus,.stepper-fill .stepper-button+.stepper-button,.stepper-fill .stepper-button-minus+.stepper-button-plus,.stepper-raised .stepper-button+.stepper-button,.stepper-raised .stepper-button-minus+.stepper-button-plus{border-left:1px solid rgba(0,0,0,.1)}.aurora .stepper-fill-aurora .stepper-button+.stepper-button.active-state,.aurora .stepper-fill-aurora .stepper-button-minus+.stepper-button-plus.active-state,.ios .stepper-fill-ios .stepper-button+.stepper-button.active-state,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus.active-state,.md .stepper-fill-md .stepper-button+.stepper-button.active-state,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus.active-state,.stepper-fill .stepper-button+.stepper-button.active-state,.stepper-fill .stepper-button-minus+.stepper-button-plus.active-state{border-left-color:var(--f7-stepper-button-pressed-bg-color)}.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,.stepper-raised:not(.stepper-fill) .stepper-input-wrap,.stepper-raised:not(.stepper-fill) .stepper-value{border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1)}.aurora .stepper-large-aurora,.ios .stepper-large-ios,.md .stepper-large-md,.stepper-large{--f7-stepper-height:var(--f7-stepper-large-height)}.aurora .stepper-small-aurora,.ios .stepper-small-ios,.md .stepper-small-md,.stepper-small{--f7-stepper-border-width:var(--f7-stepper-small-border-width);--f7-stepper-height:var(--f7-stepper-small-height)}.ios .stepper-fill.stepper-small,.ios .stepper-fill.stepper-small-ios{--f7-stepper-button-pressed-bg-color:transparent;--f7-stepper-button-pressed-text-color:var(--f7-theme-color)}.aurora .stepper-raised-aurora,.ios .stepper-raised-ios,.md .stepper-raised-md,.stepper-raised{--f7-stepper-border-width:0;box-shadow:var(--f7-stepper-raised-box-shadow)}.ios .stepper-button .f7-icons,.ios .stepper-button-minus .f7-icons,.ios .stepper-button-plus .f7-icons{font-size:22px}.ios .stepper-fill,.ios .stepper-fill-ios{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint))}.ios .stepper-small-ios.stepper-raised,.ios .stepper-small-ios.stepper-raised-ios,.ios .stepper-small.stepper-raised,.ios .stepper-small.stepper-raised-ios{--f7-stepper-border-width:0px}.ios .stepper-small .stepper-button,.ios .stepper-small .stepper-button-minus,.ios .stepper-small .stepper-button-plus,.ios .stepper-small-ios .stepper-button,.ios .stepper-small-ios .stepper-button-minus,.ios .stepper-small-ios .stepper-button-plus{transition-duration:.2s}.ios .stepper-small .stepper-button-minus.active-state:after,.ios .stepper-small .stepper-button-minus.active-state:before,.ios .stepper-small .stepper-button-plus.active-state:after,.ios .stepper-small .stepper-button-plus.active-state:before,.ios .stepper-small .stepper-button.active-state:after,.ios .stepper-small .stepper-button.active-state:before,.ios .stepper-small-ios .stepper-button-minus.active-state:after,.ios .stepper-small-ios .stepper-button-minus.active-state:before,.ios .stepper-small-ios .stepper-button-plus.active-state:after,.ios .stepper-small-ios .stepper-button-plus.active-state:before,.ios .stepper-small-ios .stepper-button.active-state:after,.ios .stepper-small-ios .stepper-button.active-state:before{transition-duration:.2s;background-color:var(--f7-theme-color)}.md .stepper-button,.md .stepper-button-minus,.md .stepper-button-plus{transition-duration:.3s;transform:translate3d(0,0,0);overflow:hidden}.md .stepper-fill,.md .stepper-fill-md{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade))}.aurora .stepper-button,.aurora .stepper-button-minus,.aurora .stepper-button-plus{transition-duration:.1s;transform:translate3d(0,0,0);overflow:hidden}.aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,.aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover,.aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover{background-color:var(--f7-stepper-button-hover-bg-color,rgba(var(--f7-theme-color-rgb),.07))}.aurora .stepper-fill,.aurora .stepper-fill-aurora{--f7-stepper-button-hover-bg-color:var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade))}
+:root{--f7-stepper-raised-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12),0 1px 2px rgba(0, 0, 0, 0.24);--f7-stepper-value-font-weight:500}.ios{--f7-stepper-height:28px;--f7-stepper-border-radius:5px;--f7-stepper-fill-button-text-color:#fff;--f7-stepper-large-height:44px;--f7-stepper-small-height:26px;--f7-stepper-value-font-size:17px;--f7-stepper-border-width:2px;--f7-stepper-border-color:var(--f7-theme-color);--f7-stepper-small-border-width:2px}.md{--f7-stepper-height:40px;--f7-stepper-border-radius:8px;--f7-stepper-large-height:48px;--f7-stepper-small-height:32px;--f7-stepper-value-font-size:14px;--f7-stepper-border-width:1px;--f7-stepper-small-border-width:1px}.md,.md .dark,.md [class*=color-]{--f7-stepper-fill-button-text-color:var(--f7-md-on-primary);--f7-stepper-fill-button-pressed-bg-color:var(--f7-theme-color-shade);--f7-stepper-border-color:var(--f7-md-outline)}.stepper{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);display:inline-flex;align-items:stretch;height:var(--f7-stepper-height);border-radius:var(--f7-stepper-border-radius);flex-direction:row-reverse}.stepper-button,.stepper-button-minus,.stepper-button-plus{background-color:var(--f7-stepper-button-bg-color);width:40px;border-radius:var(--f7-stepper-border-radius);border:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);color:var(--f7-stepper-button-text-color,var(--f7-theme-color));line-height:calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));text-align:center;display:flex;justify-content:center;align-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;position:relative;cursor:pointer}.stepper-button-minus.active-state,.stepper-button-plus.active-state,.stepper-button.active-state{background-color:var(--f7-stepper-button-pressed-bg-color,rgba(var(--f7-theme-color-rgb),.15));color:var(--f7-stepper-button-pressed-text-color,var(--f7-stepper-button-text-color,var(--f7-theme-color)))}.stepper-button-minus:first-child,.stepper-button-plus:first-child,.stepper-button:first-child{border-radius:var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius)}.stepper-button-minus:last-child,.stepper-button-plus:last-child,.stepper-button:last-child{border-radius:0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0}.stepper-button .icon,.stepper-button-minus .icon,.stepper-button-plus .icon{pointer-events:none}.stepper-button+.stepper-button,.stepper-button+.stepper-button-minus,.stepper-button+.stepper-button-plus,.stepper-button-minus+.stepper-button,.stepper-button-minus+.stepper-button-minus,.stepper-button-minus+.stepper-button-plus,.stepper-button-plus+.stepper-button,.stepper-button-plus+.stepper-button-minus,.stepper-button-plus+.stepper-button-plus{border-left:none}.stepper-button-minus,.stepper-button-plus{-webkit-user-select:none;user-select:none}.stepper-button-minus:after,.stepper-button-minus:before,.stepper-button-plus:after,.stepper-button-plus:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--f7-stepper-button-text-color,var(--f7-theme-color));border-radius:2px}.stepper-button-minus:after,.stepper-button-plus:after{width:15px;height:2px}.stepper-button-plus:before{height:15px;width:2px}.stepper-value{display:flex;align-content:center;align-items:center;justify-content:center}.stepper-input-wrap,.stepper-value{flex-shrink:1;text-align:center;border-top:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);border-bottom:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color)}.stepper .stepper-input-wrap input,.stepper-value{width:45px;color:var(--f7-stepper-value-text-color,var(--f7-theme-color));font-size:var(--f7-stepper-value-font-size);font-weight:var(--f7-stepper-value-font-weight);text-align:center}.stepper .stepper-input-wrap input{height:100%}.ios .stepper-round-ios,.md .stepper-round-md,.stepper-round{--f7-stepper-border-radius:var(--f7-stepper-height)}.ios .stepper-fill-ios,.md .stepper-fill-md,.stepper-fill{--f7-stepper-border-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-bg-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-text-color:var(--f7-stepper-fill-button-text-color);--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.ios .stepper-fill-ios .stepper-button+.stepper-button,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus,.ios .stepper-raised-ios .stepper-button+.stepper-button,.ios .stepper-raised-ios .stepper-button-minus+.stepper-button-plus,.md .stepper-fill-md .stepper-button+.stepper-button,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus,.md .stepper-raised-md .stepper-button+.stepper-button,.md .stepper-raised-md .stepper-button-minus+.stepper-button-plus,.stepper-fill .stepper-button+.stepper-button,.stepper-fill .stepper-button-minus+.stepper-button-plus,.stepper-raised .stepper-button+.stepper-button,.stepper-raised .stepper-button-minus+.stepper-button-plus{border-left:1px solid rgba(0,0,0,.1)}.ios .stepper-fill-ios .stepper-button+.stepper-button.active-state,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus.active-state,.md .stepper-fill-md .stepper-button+.stepper-button.active-state,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus.active-state,.stepper-fill .stepper-button+.stepper-button.active-state,.stepper-fill .stepper-button-minus+.stepper-button-plus.active-state{border-left-color:var(--f7-stepper-button-pressed-bg-color)}.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,.stepper-raised:not(.stepper-fill) .stepper-input-wrap,.stepper-raised:not(.stepper-fill) .stepper-value{border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1)}.ios .stepper-large-ios,.md .stepper-large-md,.stepper-large{--f7-stepper-height:var(--f7-stepper-large-height)}.ios .stepper-small-ios,.md .stepper-small-md,.stepper-small{--f7-stepper-border-width:var(--f7-stepper-small-border-width);--f7-stepper-height:var(--f7-stepper-small-height)}.ios .stepper-fill.stepper-small,.ios .stepper-fill.stepper-small-ios{--f7-stepper-button-pressed-bg-color:transparent;--f7-stepper-button-pressed-text-color:var(--f7-theme-color)}.ios .stepper-raised-ios,.md .stepper-raised-md,.stepper-raised{--f7-stepper-border-width:0;box-shadow:var(--f7-stepper-raised-box-shadow)}.ios .stepper-button .f7-icons,.ios .stepper-button-minus .f7-icons,.ios .stepper-button-plus .f7-icons{font-size:22px}.ios .stepper-fill,.ios .stepper-fill-ios{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint))}.ios .stepper-small-ios.stepper-raised,.ios .stepper-small-ios.stepper-raised-ios,.ios .stepper-small.stepper-raised,.ios .stepper-small.stepper-raised-ios{--f7-stepper-border-width:0px}.ios .stepper-small .stepper-button,.ios .stepper-small .stepper-button-minus,.ios .stepper-small .stepper-button-plus,.ios .stepper-small-ios .stepper-button,.ios .stepper-small-ios .stepper-button-minus,.ios .stepper-small-ios .stepper-button-plus{transition-duration:.2s}.ios .stepper-small .stepper-button-minus.active-state:after,.ios .stepper-small .stepper-button-minus.active-state:before,.ios .stepper-small .stepper-button-plus.active-state:after,.ios .stepper-small .stepper-button-plus.active-state:before,.ios .stepper-small .stepper-button.active-state:after,.ios .stepper-small .stepper-button.active-state:before,.ios .stepper-small-ios .stepper-button-minus.active-state:after,.ios .stepper-small-ios .stepper-button-minus.active-state:before,.ios .stepper-small-ios .stepper-button-plus.active-state:after,.ios .stepper-small-ios .stepper-button-plus.active-state:before,.ios .stepper-small-ios .stepper-button.active-state:after,.ios .stepper-small-ios .stepper-button.active-state:before{transition-duration:.2s;background-color:var(--f7-theme-color)}.md .stepper-button,.md .stepper-button-minus,.md .stepper-button-plus{transition-duration:.3s;transform:translate3d(0,0,0);overflow:hidden}.md .stepper-fill,.md .stepper-fill-md{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade))}

package/components/stepper/stepper-vars.less

@@ -3,19 +3,15 @@
   --f7-stepper-button-text-color: var(--f7-theme-color);
   --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
   --f7-stepper-value-text-color: var(--f7-theme-color);
-  */
-  --f7-stepper-fill-button-text-color: #fff;
-  /*
   --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
   */
   --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   --f7-stepper-value-font-weight: 500;
-  --f7-stepper-border-width: 2px;
-  --f7-stepper-small-border-width: 2px;
 }
 .ios-vars({
   --f7-stepper-height: 28px;
   --f7-stepper-border-radius: 5px;
+  --f7-stepper-fill-button-text-color: #fff;
   /*
   --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
@@ -23,29 +19,21 @@
   --f7-stepper-large-height: 44px;
   --f7-stepper-small-height: 26px;
   --f7-stepper-value-font-size: 17px;
+  --f7-stepper-border-width: 2px;
+  --f7-stepper-border-color: var(--f7-theme-color);
+  --f7-stepper-small-border-width: 2px;
 });
 .md-vars({
-  --f7-stepper-height: 36px;
-  --f7-stepper-border-radius: 4px;
-  /*
-  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
-  */
+  --f7-stepper-height: 40px;
+  --f7-stepper-border-radius: 8px;
   --f7-stepper-large-height: 48px;
-  --f7-stepper-small-height: 28px;
+  --f7-stepper-small-height: 32px;
   --f7-stepper-value-font-size: 14px;
+  --f7-stepper-border-width: 1px;
+  --f7-stepper-small-border-width: 1px;
 });
-.aurora-vars({
-  /*
-  --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
-  --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
-  */
-  --f7-stepper-height: 36px;
-  --f7-stepper-border-radius: 8px;
-  /*
-  --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
+.md-color-vars({
+  --f7-stepper-fill-button-text-color: var(--f7-md-on-primary);
   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
-  */
-  --f7-stepper-large-height: 48px;
-  --f7-stepper-small-height: 28px;
-  --f7-stepper-value-font-size: 14px;
+  --f7-stepper-border-color: var(--f7-md-outline);
 });

package/components/stepper/stepper.css

@@ -1 +1 @@
-:root{--f7-stepper-fill-button-text-color:#fff;--f7-stepper-raised-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12),0 1px 2px rgba(0, 0, 0, 0.24);--f7-stepper-value-font-weight:500;--f7-stepper-border-width:2px;--f7-stepper-small-border-width:2px}.ios{--f7-stepper-height:28px;--f7-stepper-border-radius:5px;--f7-stepper-large-height:44px;--f7-stepper-small-height:26px;--f7-stepper-value-font-size:17px}.md{--f7-stepper-height:36px;--f7-stepper-border-radius:4px;--f7-stepper-large-height:48px;--f7-stepper-small-height:28px;--f7-stepper-value-font-size:14px}.aurora{--f7-stepper-height:36px;--f7-stepper-border-radius:8px;--f7-stepper-large-height:48px;--f7-stepper-small-height:28px;--f7-stepper-value-font-size:14px}.stepper{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);display:inline-flex;align-items:stretch;height:var(--f7-stepper-height);border-radius:var(--f7-stepper-border-radius)}.stepper-button,.stepper-button-minus,.stepper-button-plus{background-color:var(--f7-stepper-button-bg-color);width:40px;border-radius:var(--f7-stepper-border-radius);border:var(--f7-stepper-border-width) solid var(--f7-theme-color);color:var(--f7-stepper-button-text-color,var(--f7-theme-color));line-height:calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));text-align:center;display:flex;justify-content:center;align-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;position:relative;cursor:pointer}.stepper-button-minus.active-state,.stepper-button-plus.active-state,.stepper-button.active-state{background-color:var(--f7-stepper-button-pressed-bg-color,rgba(var(--f7-theme-color-rgb),.15));color:var(--f7-stepper-button-pressed-text-color,var(--f7-stepper-button-text-color,var(--f7-theme-color)))}.stepper-button-minus:first-child,.stepper-button-plus:first-child,.stepper-button:first-child{border-radius:var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius)}.stepper-button-minus:last-child,.stepper-button-plus:last-child,.stepper-button:last-child{border-radius:0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0}.stepper-button .icon,.stepper-button-minus .icon,.stepper-button-plus .icon{pointer-events:none}.stepper-button+.stepper-button,.stepper-button+.stepper-button-minus,.stepper-button+.stepper-button-plus,.stepper-button-minus+.stepper-button,.stepper-button-minus+.stepper-button-minus,.stepper-button-minus+.stepper-button-plus,.stepper-button-plus+.stepper-button,.stepper-button-plus+.stepper-button-minus,.stepper-button-plus+.stepper-button-plus{border-left:none}.stepper-button-minus,.stepper-button-plus{-webkit-user-select:none;user-select:none}.stepper-button-minus:after,.stepper-button-minus:before,.stepper-button-plus:after,.stepper-button-plus:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--f7-stepper-button-text-color,var(--f7-theme-color));border-radius:2px}.stepper-button-minus:after,.stepper-button-plus:after{width:15px;height:2px}.stepper-button-plus:before{height:15px;width:2px}.stepper-value{display:flex;align-content:center;align-items:center;justify-content:center}.stepper-input-wrap,.stepper-value{flex-shrink:1;text-align:center;border-top:var(--f7-stepper-border-width) solid var(--f7-theme-color);border-bottom:var(--f7-stepper-border-width) solid var(--f7-theme-color)}.stepper .stepper-input-wrap input,.stepper-value{width:45px;color:var(--f7-stepper-value-text-color,var(--f7-theme-color));font-size:var(--f7-stepper-value-font-size);font-weight:var(--f7-stepper-value-font-weight);text-align:center}.stepper .stepper-input-wrap input{height:100%}.aurora .stepper-round-aurora,.ios .stepper-round-ios,.md .stepper-round-md,.stepper-round{--f7-stepper-border-radius:var(--f7-stepper-height)}.aurora .stepper-fill-aurora,.ios .stepper-fill-ios,.md .stepper-fill-md,.stepper-fill{--f7-stepper-button-bg-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-text-color:var(--f7-stepper-fill-button-text-color);--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.aurora .stepper-fill-aurora .stepper-button+.stepper-button,.aurora .stepper-fill-aurora .stepper-button-minus+.stepper-button-plus,.aurora .stepper-raised-aurora .stepper-button+.stepper-button,.aurora .stepper-raised-aurora .stepper-button-minus+.stepper-button-plus,.ios .stepper-fill-ios .stepper-button+.stepper-button,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus,.ios .stepper-raised-ios .stepper-button+.stepper-button,.ios .stepper-raised-ios .stepper-button-minus+.stepper-button-plus,.md .stepper-fill-md .stepper-button+.stepper-button,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus,.md .stepper-raised-md .stepper-button+.stepper-button,.md .stepper-raised-md .stepper-button-minus+.stepper-button-plus,.stepper-fill .stepper-button+.stepper-button,.stepper-fill .stepper-button-minus+.stepper-button-plus,.stepper-raised .stepper-button+.stepper-button,.stepper-raised .stepper-button-minus+.stepper-button-plus{border-left:1px solid rgba(0,0,0,.1)}.aurora .stepper-fill-aurora .stepper-button+.stepper-button.active-state,.aurora .stepper-fill-aurora .stepper-button-minus+.stepper-button-plus.active-state,.ios .stepper-fill-ios .stepper-button+.stepper-button.active-state,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus.active-state,.md .stepper-fill-md .stepper-button+.stepper-button.active-state,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus.active-state,.stepper-fill .stepper-button+.stepper-button.active-state,.stepper-fill .stepper-button-minus+.stepper-button-plus.active-state{border-left-color:var(--f7-stepper-button-pressed-bg-color)}.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,.stepper-raised:not(.stepper-fill) .stepper-input-wrap,.stepper-raised:not(.stepper-fill) .stepper-value{border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1)}.aurora .stepper-large-aurora,.ios .stepper-large-ios,.md .stepper-large-md,.stepper-large{--f7-stepper-height:var(--f7-stepper-large-height)}.aurora .stepper-small-aurora,.ios .stepper-small-ios,.md .stepper-small-md,.stepper-small{--f7-stepper-border-width:var(--f7-stepper-small-border-width);--f7-stepper-height:var(--f7-stepper-small-height)}.ios .stepper-fill.stepper-small,.ios .stepper-fill.stepper-small-ios{--f7-stepper-button-pressed-bg-color:transparent;--f7-stepper-button-pressed-text-color:var(--f7-theme-color)}.aurora .stepper-raised-aurora,.ios .stepper-raised-ios,.md .stepper-raised-md,.stepper-raised{--f7-stepper-border-width:0;box-shadow:var(--f7-stepper-raised-box-shadow)}.ios .stepper-button .f7-icons,.ios .stepper-button-minus .f7-icons,.ios .stepper-button-plus .f7-icons{font-size:22px}.ios .stepper-fill,.ios .stepper-fill-ios{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint))}.ios .stepper-small-ios.stepper-raised,.ios .stepper-small-ios.stepper-raised-ios,.ios .stepper-small.stepper-raised,.ios .stepper-small.stepper-raised-ios{--f7-stepper-border-width:0px}.ios .stepper-small .stepper-button,.ios .stepper-small .stepper-button-minus,.ios .stepper-small .stepper-button-plus,.ios .stepper-small-ios .stepper-button,.ios .stepper-small-ios .stepper-button-minus,.ios .stepper-small-ios .stepper-button-plus{transition-duration:.2s}.ios .stepper-small .stepper-button-minus.active-state:after,.ios .stepper-small .stepper-button-minus.active-state:before,.ios .stepper-small .stepper-button-plus.active-state:after,.ios .stepper-small .stepper-button-plus.active-state:before,.ios .stepper-small .stepper-button.active-state:after,.ios .stepper-small .stepper-button.active-state:before,.ios .stepper-small-ios .stepper-button-minus.active-state:after,.ios .stepper-small-ios .stepper-button-minus.active-state:before,.ios .stepper-small-ios .stepper-button-plus.active-state:after,.ios .stepper-small-ios .stepper-button-plus.active-state:before,.ios .stepper-small-ios .stepper-button.active-state:after,.ios .stepper-small-ios .stepper-button.active-state:before{transition-duration:.2s;background-color:var(--f7-theme-color)}.md .stepper-button,.md .stepper-button-minus,.md .stepper-button-plus{transition-duration:.3s;transform:translate3d(0,0,0);overflow:hidden}.md .stepper-fill,.md .stepper-fill-md{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade))}.aurora .stepper-button,.aurora .stepper-button-minus,.aurora .stepper-button-plus{transition-duration:.1s;transform:translate3d(0,0,0);overflow:hidden}.aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,.aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover,.aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover{background-color:var(--f7-stepper-button-hover-bg-color,rgba(var(--f7-theme-color-rgb),.07))}.aurora .stepper-fill,.aurora .stepper-fill-aurora{--f7-stepper-button-hover-bg-color:var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade))}
+:root{--f7-stepper-raised-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12),0 1px 2px rgba(0, 0, 0, 0.24);--f7-stepper-value-font-weight:500}.ios{--f7-stepper-height:28px;--f7-stepper-border-radius:5px;--f7-stepper-fill-button-text-color:#fff;--f7-stepper-large-height:44px;--f7-stepper-small-height:26px;--f7-stepper-value-font-size:17px;--f7-stepper-border-width:2px;--f7-stepper-border-color:var(--f7-theme-color);--f7-stepper-small-border-width:2px}.md{--f7-stepper-height:40px;--f7-stepper-border-radius:8px;--f7-stepper-large-height:48px;--f7-stepper-small-height:32px;--f7-stepper-value-font-size:14px;--f7-stepper-border-width:1px;--f7-stepper-small-border-width:1px}.md,.md .dark,.md [class*=color-]{--f7-stepper-fill-button-text-color:var(--f7-md-on-primary);--f7-stepper-fill-button-pressed-bg-color:var(--f7-theme-color-shade);--f7-stepper-border-color:var(--f7-md-outline)}.stepper{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);display:inline-flex;align-items:stretch;height:var(--f7-stepper-height);border-radius:var(--f7-stepper-border-radius)}.stepper-button,.stepper-button-minus,.stepper-button-plus{background-color:var(--f7-stepper-button-bg-color);width:40px;border-radius:var(--f7-stepper-border-radius);border:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);color:var(--f7-stepper-button-text-color,var(--f7-theme-color));line-height:calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));text-align:center;display:flex;justify-content:center;align-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;position:relative;cursor:pointer}.stepper-button-minus.active-state,.stepper-button-plus.active-state,.stepper-button.active-state{background-color:var(--f7-stepper-button-pressed-bg-color,rgba(var(--f7-theme-color-rgb),.15));color:var(--f7-stepper-button-pressed-text-color,var(--f7-stepper-button-text-color,var(--f7-theme-color)))}.stepper-button-minus:first-child,.stepper-button-plus:first-child,.stepper-button:first-child{border-radius:var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius)}.stepper-button-minus:last-child,.stepper-button-plus:last-child,.stepper-button:last-child{border-radius:0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0}.stepper-button .icon,.stepper-button-minus .icon,.stepper-button-plus .icon{pointer-events:none}.stepper-button+.stepper-button,.stepper-button+.stepper-button-minus,.stepper-button+.stepper-button-plus,.stepper-button-minus+.stepper-button,.stepper-button-minus+.stepper-button-minus,.stepper-button-minus+.stepper-button-plus,.stepper-button-plus+.stepper-button,.stepper-button-plus+.stepper-button-minus,.stepper-button-plus+.stepper-button-plus{border-left:none}.stepper-button-minus,.stepper-button-plus{-webkit-user-select:none;user-select:none}.stepper-button-minus:after,.stepper-button-minus:before,.stepper-button-plus:after,.stepper-button-plus:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--f7-stepper-button-text-color,var(--f7-theme-color));border-radius:2px}.stepper-button-minus:after,.stepper-button-plus:after{width:15px;height:2px}.stepper-button-plus:before{height:15px;width:2px}.stepper-value{display:flex;align-content:center;align-items:center;justify-content:center}.stepper-input-wrap,.stepper-value{flex-shrink:1;text-align:center;border-top:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);border-bottom:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color)}.stepper .stepper-input-wrap input,.stepper-value{width:45px;color:var(--f7-stepper-value-text-color,var(--f7-theme-color));font-size:var(--f7-stepper-value-font-size);font-weight:var(--f7-stepper-value-font-weight);text-align:center}.stepper .stepper-input-wrap input{height:100%}.ios .stepper-round-ios,.md .stepper-round-md,.stepper-round{--f7-stepper-border-radius:var(--f7-stepper-height)}.ios .stepper-fill-ios,.md .stepper-fill-md,.stepper-fill{--f7-stepper-border-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-bg-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-text-color:var(--f7-stepper-fill-button-text-color);--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.ios .stepper-fill-ios .stepper-button+.stepper-button,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus,.ios .stepper-raised-ios .stepper-button+.stepper-button,.ios .stepper-raised-ios .stepper-button-minus+.stepper-button-plus,.md .stepper-fill-md .stepper-button+.stepper-button,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus,.md .stepper-raised-md .stepper-button+.stepper-button,.md .stepper-raised-md .stepper-button-minus+.stepper-button-plus,.stepper-fill .stepper-button+.stepper-button,.stepper-fill .stepper-button-minus+.stepper-button-plus,.stepper-raised .stepper-button+.stepper-button,.stepper-raised .stepper-button-minus+.stepper-button-plus{border-left:1px solid rgba(0,0,0,.1)}.ios .stepper-fill-ios .stepper-button+.stepper-button.active-state,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus.active-state,.md .stepper-fill-md .stepper-button+.stepper-button.active-state,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus.active-state,.stepper-fill .stepper-button+.stepper-button.active-state,.stepper-fill .stepper-button-minus+.stepper-button-plus.active-state{border-left-color:var(--f7-stepper-button-pressed-bg-color)}.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,.stepper-raised:not(.stepper-fill) .stepper-input-wrap,.stepper-raised:not(.stepper-fill) .stepper-value{border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1)}.ios .stepper-large-ios,.md .stepper-large-md,.stepper-large{--f7-stepper-height:var(--f7-stepper-large-height)}.ios .stepper-small-ios,.md .stepper-small-md,.stepper-small{--f7-stepper-border-width:var(--f7-stepper-small-border-width);--f7-stepper-height:var(--f7-stepper-small-height)}.ios .stepper-fill.stepper-small,.ios .stepper-fill.stepper-small-ios{--f7-stepper-button-pressed-bg-color:transparent;--f7-stepper-button-pressed-text-color:var(--f7-theme-color)}.ios .stepper-raised-ios,.md .stepper-raised-md,.stepper-raised{--f7-stepper-border-width:0;box-shadow:var(--f7-stepper-raised-box-shadow)}.ios .stepper-button .f7-icons,.ios .stepper-button-minus .f7-icons,.ios .stepper-button-plus .f7-icons{font-size:22px}.ios .stepper-fill,.ios .stepper-fill-ios{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint))}.ios .stepper-small-ios.stepper-raised,.ios .stepper-small-ios.stepper-raised-ios,.ios .stepper-small.stepper-raised,.ios .stepper-small.stepper-raised-ios{--f7-stepper-border-width:0px}.ios .stepper-small .stepper-button,.ios .stepper-small .stepper-button-minus,.ios .stepper-small .stepper-button-plus,.ios .stepper-small-ios .stepper-button,.ios .stepper-small-ios .stepper-button-minus,.ios .stepper-small-ios .stepper-button-plus{transition-duration:.2s}.ios .stepper-small .stepper-button-minus.active-state:after,.ios .stepper-small .stepper-button-minus.active-state:before,.ios .stepper-small .stepper-button-plus.active-state:after,.ios .stepper-small .stepper-button-plus.active-state:before,.ios .stepper-small .stepper-button.active-state:after,.ios .stepper-small .stepper-button.active-state:before,.ios .stepper-small-ios .stepper-button-minus.active-state:after,.ios .stepper-small-ios .stepper-button-minus.active-state:before,.ios .stepper-small-ios .stepper-button-plus.active-state:after,.ios .stepper-small-ios .stepper-button-plus.active-state:before,.ios .stepper-small-ios .stepper-button.active-state:after,.ios .stepper-small-ios .stepper-button.active-state:before{transition-duration:.2s;background-color:var(--f7-theme-color)}.md .stepper-button,.md .stepper-button-minus,.md .stepper-button-plus{transition-duration:.3s;transform:translate3d(0,0,0);overflow:hidden}.md .stepper-fill,.md .stepper-fill-md{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade))}

package/components/stepper/stepper.js

@@ -4,7 +4,6 @@ import Stepper from './stepper-class.js';
 import ConstructorMethods from '../../shared/constructor-methods.js';
 export default {
   name: 'stepper',
-
   create() {
     const app = this;
     app.stepper = extend(ConstructorMethods({
@@ -17,25 +16,20 @@ export default {
         if (el === void 0) {
           el = '.stepper';
         }
-
         const stepper = app.stepper.get(el);
         if (stepper) return stepper.getValue();
         return undefined;
       },
-
       setValue(el, value) {
         if (el === void 0) {
           el = '.stepper';
         }
-
         const stepper = app.stepper.get(el);
         if (stepper) return stepper.setValue(value);
         return undefined;
       }
-
     });
   },
-
   static: {
     Stepper
   },
@@ -49,13 +43,11 @@ export default {
         }, dataset || {}));
       });
     },
-
     tabBeforeRemove(tabEl) {
       $(tabEl).find('.stepper-init').each(stepperEl => {
         if (stepperEl.f7Stepper) stepperEl.f7Stepper.destroy();
       });
     },
-
     pageInit(page) {
       const app = this;
       page.$el.find('.stepper-init').each(stepperEl => {
@@ -65,13 +57,11 @@ export default {
         }, dataset || {}));
       });
     },
-
     pageBeforeRemove(page) {
       page.$el.find('.stepper-init').each(stepperEl => {
         if (stepperEl.f7Stepper) stepperEl.f7Stepper.destroy();
       });
     }
-
   },
   vnode: {
     'stepper-init': {
@@ -83,12 +73,10 @@ export default {
           el: stepperEl
         }, dataset || {}));
       },
-
       destroy(vnode) {
         const stepperEl = vnode.elm;
         if (stepperEl.f7Stepper) stepperEl.f7Stepper.destroy();
       }
-
     }
   }
 };