@king-design/vue 3.1.4-beta.2 → 3.1.4

package/components/split/styles.js

@@ -11,37 +11,29 @@ var defaults = {
   dragLinesSize: '1px',
   dragLinesCount: 5,
   dragLiensGutter: 5,
-
   get bgColor() {
     return theme.color.bg;
   },
-
   get baseBorder() {
     return "1px solid " + theme.color.border;
   },
-
   get transition() {
     return theme.transition.middle;
   },
-
   get boderColor() {
     return theme.color.border;
   },
-
   get dragLineMargin() {
     return "-" + split.dragLinesCount * (split.dragLiensGutter + 1) / 2 + "px";
   },
-
   boxShadow: function boxShadow(direction) {
     var i = 1;
     var tmp = [];
-
     while (i <= split.dragLinesCount) {
       var shadowVal = direction === 'horizontal' ? "0 " + i * split.dragLiensGutter + "px 0 0" : i * split.dragLiensGutter + "px 0 0 0";
       tmp.push(shadowVal + " " + split.boderColor);
       i++;
     }
-
     return "" + tmp.join(',');
   }
 };
@@ -50,7 +42,7 @@ setDefault(function () {
   split = deepDefaults(theme, {
     split: defaults
   }).split;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:flex;height:100%;&>.", kls('first', k), ",&>.", kls('last', k), "{overflow:auto;position:relative;}&>.", kls('first', k), "{flex:0 0 auto;}&>.", kls('last', k), "{flex:auto;}&.", k, "-first-auto{&>.", kls('first', k), "{flex:auto;}&>.", kls('last', k), "{flex:0 0 auto;}}&:not(.", k, "-resizing){&>.", kls('first', k), ",&>.", kls('last', k), "{transition:all ", split.transition, ";}}&>.", kls('line-wrapper', k), "{flex:0 0 auto;text-align:center;overflow:hidden;.", kls('line', k), "{height:100%;background:", split.bgColor, ";position:relative;}.", kls('drag-lines', k), "{background:", split.boderColor, ";position:absolute;}}&.", k, "-horizontal{&>.", kls('line-wrapper', k), "{cursor:col-resize;width:", split.splitLineSize, ";.", kls('line', k), "{border-left:", split.baseBorder, ";border-right:", split.baseBorder, ";}.", kls('drag-lines', k), "{height:", split.dragLinesSize, ";width:100%;top:50%;margin-top:", split.dragLineMargin, ";box-shadow:", split.boxShadow('horizontal'), ";}}}&.", k, "-vertical{flex-direction:column;&>.", kls('line-wrapper', k), "{cursor:row-resize;height:", split.splitLineSize, ";.", kls('line', k), "{border-top:", split.baseBorder, ";border-bottom:", split.baseBorder, ";}.", kls('drag-lines', k), "{width:", split.dragLinesSize, ";height:100%;left:50%;margin-left:", split.dragLineMargin, ";box-shadow:", split.boxShadow('vertical'), ";}}}");

package/components/split/useDraggable.js

@@ -15,20 +15,17 @@ export function useDraggable(firstSize, lastSize) {
   var baseY = 0;
   var originalWidth = 0;
   var originalHeight = 0;
-
   var _useBaseDraggable = useBaseDraggable({
-    onStart: onStart,
-    onMove: onMove,
-    onEnd: onEnd
-  }),
-      start = _useBaseDraggable.start,
-      dragging = _useBaseDraggable.dragging;
-
+      onStart: onStart,
+      onMove: onMove,
+      onEnd: onEnd
+    }),
+    start = _useBaseDraggable.start,
+    dragging = _useBaseDraggable.dragging;
   function onStart(e) {
     // set mouse style
     setMouseStyle(true);
     calcMinMaxValue();
-
     if (lastSize.value === 'auto') {
       targetRef = firstRef;
       targetSize = firstSize;
@@ -36,7 +33,6 @@ export function useDraggable(firstSize, lastSize) {
       targetRef = lastRef;
       targetSize = lastSize;
     }
-
     var targetEl = targetRef.value;
     originalWidth = restrainValue(targetEl.offsetWidth);
     originalHeight = restrainValue(targetEl.offsetHeight);
@@ -44,11 +40,9 @@ export function useDraggable(firstSize, lastSize) {
     baseY = e.clientY;
     instance.trigger('moveStart', e);
   }
-
   function onMove(e) {
     var changed;
     var originalSize;
-
     if (instance.get('mode') === 'horizontal') {
       originalSize = originalWidth;
       changed = e.clientX - baseX;
@@ -56,30 +50,24 @@ export function useDraggable(firstSize, lastSize) {
       originalSize = originalHeight;
       changed = e.clientY - baseY;
     }
-
     if (targetRef === lastRef) {
       changed = -changed;
     }
-
     targetSize.set(restrainValue(originalSize + changed) + "px");
     instance.trigger('moving', e);
   }
-
   function onEnd(e) {
     // reset mouse style
     setMouseStyle();
     instance.trigger('moveEnd', e);
   }
-
   function calcMinMaxValue() {
     var _instance$get = instance.get(),
-        _min = _instance$get.min,
-        _max = _instance$get.max,
-        mode = _instance$get.mode;
-
+      _min = _instance$get.min,
+      _max = _instance$get.max,
+      mode = _instance$get.mode;
     var parsedMin = parseValue(_min);
     var parsedMax = parseValue(_max);
-
     if (parsedMin.percent || parsedMax.percent) {
       var totalSize = mode === 'horizontal' ? elementRef.value.offsetWidth : elementRef.value.offsetHeight;
       min = generateValue(parsedMin, totalSize);
@@ -89,19 +77,15 @@ export function useDraggable(firstSize, lastSize) {
       max = _max;
     }
   }
-
   function setMouseStyle(set) {
     if (set === void 0) {
       set = false;
     }
-
     document.body.style.cursor = set ? instance.get('mode') === 'vertical' ? 'row-resize' : 'col-resize' : '';
   }
-
   function restrainValue(value) {
     return Math.min(Math.max(value, min), max);
   }
-
   return {
     start: start,
     dragging: dragging,
@@ -110,13 +94,11 @@ export function useDraggable(firstSize, lastSize) {
     lastRef: lastRef
   };
 }
-
 function parseValue(v) {
   if (typeof v === 'undefined') return cache;
   if (typeof v === 'number') return {
     px: v
   };
-
   if (!cache[v]) {
     var matches = v.match(VALUE_REG) || [];
     cache[v] = {
@@ -125,25 +107,19 @@ function parseValue(v) {
       px: matches[3]
     };
   }
-
   return cache[v];
 }
-
 function generateValue(_ref, totalSize) {
   var percent = _ref.percent,
-      op = _ref.op,
-      px = _ref.px;
-
+    op = _ref.op,
+    px = _ref.px;
   if (percent) {
     var value = totalSize * Number(percent) / 100;
-
     if (px) {
       px = Number(px);
       value = op === '-' ? value - px : value + px;
     }
-
     return value;
   }
-
   return Number(px);
 }

package/components/split/useSize.js

@@ -7,12 +7,10 @@ export function useSize() {
   var lastSize = useState('auto');
   fixSize();
   useReceive(['firstSize', 'lastSize'], fixSize, true);
-
   function fixSize() {
     var _instance$get = instance.get(),
-        first = _instance$get.firstSize,
-        last = _instance$get.lastSize;
-
+      first = _instance$get.firstSize,
+      last = _instance$get.lastSize;
     if (first === 'auto' && last === 'auto') {
       firstSize.set('50%');
       lastSize.set(last);
@@ -24,7 +22,6 @@ export function useSize() {
       lastSize.set(last);
     }
   }
-
   ;
   return {
     firstSize: firstSize,

package/components/steps/index.js

@@ -13,7 +13,6 @@ var typeDefs = {
   clickable: Boolean,
   vertical: Boolean
 };
-
 var defaults = function defaults() {
   return {
     value: 0,
@@ -21,40 +20,30 @@ var defaults = function defaults() {
     type: 'default'
   };
 };
-
 export var Steps = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Steps, _Component);
-
   function Steps() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Steps.prototype;
-
   _proto.changeIndex = function changeIndex(index) {
     var _this$get = this.get(),
-        value = _this$get.value,
-        clickable = _this$get.clickable;
-
+      value = _this$get.value,
+      clickable = _this$get.clickable;
     if (clickable && value > index) {
       this.set('value', index);
     }
   };
-
   return Steps;
 }(Component);
 Steps.template = template;
 Steps.typeDefs = typeDefs;
 Steps.defaults = defaults;
-
 __decorate([bind], Steps.prototype, "changeIndex", null);

package/components/steps/index.spec.js

@@ -8,34 +8,28 @@ describe('Steps', function () {
   });
   it('change step', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, _element$querySelecto, next, _element$querySelecto2, step1, step2;
-
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _mount = mount(ClickableDemo), instance = _mount[0], element = _mount[1];
-            _element$querySelecto = element.querySelectorAll('.k-btn'), next = _element$querySelecto[1];
-            next.click();
-            _context.next = 5;
-            return wait();
-
-          case 5:
-            expect(element.innerHTML).to.matchSnapshot();
-            _element$querySelecto2 = element.querySelectorAll('.k-step-wrapper'), step1 = _element$querySelecto2[0], step2 = _element$querySelecto2[1];
-            step1.click();
-            _context.next = 10;
-            return wait();
-
-          case 10:
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(instance.get('index')).to.eql(0);
-            step2.click();
-            expect(instance.get('index')).to.eql(0);
-
-          case 14:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _mount = mount(ClickableDemo), instance = _mount[0], element = _mount[1];
+          _element$querySelecto = element.querySelectorAll('.k-btn'), next = _element$querySelecto[1];
+          next.click();
+          _context.next = 5;
+          return wait();
+        case 5:
+          expect(element.innerHTML).to.matchSnapshot();
+          _element$querySelecto2 = element.querySelectorAll('.k-step-wrapper'), step1 = _element$querySelecto2[0], step2 = _element$querySelecto2[1];
+          step1.click();
+          _context.next = 10;
+          return wait();
+        case 10:
+          expect(element.innerHTML).to.matchSnapshot();
+          expect(instance.get('index')).to.eql(0);
+          step2.click();
+          expect(instance.get('index')).to.eql(0);
+        case 14:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   })));

package/components/steps/index.vdt.js

@@ -6,20 +6,17 @@ import { makeStyles } from './styles';
 import { context as StepsContext } from './context';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      children = _this$get.children,
-      className = _this$get.className,
-      value = _this$get.value,
-      status = _this$get.status,
-      type = _this$get.type,
-      clickable = _this$get.clickable,
-      vertical = _this$get.vertical;
-
+    children = _this$get.children,
+    className = _this$get.className,
+    value = _this$get.value,
+    status = _this$get.status,
+    type = _this$get.type,
+    clickable = _this$get.clickable,
+    vertical = _this$get.vertical;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-steps"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + type] = true, _classNameObj[k + "-clickable"] = clickable, _classNameObj[k + "-vertical"] = vertical, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var stepIndex = 0;
@@ -32,15 +29,15 @@ export default function ($props, $blocks, $__proto__) {
       steps.push(vNode);
       stepIndex++;
     }
-  }); // add width
+  });
 
+  // add width
   /* const width = (100 / stepIndex) + '%';  */
 
   return _$cc(StepsContext.Provider, {
     'value': {
       value: value,
       status: status,
-
       /* width, */
       type: type,
       onChange: this.changeIndex

package/components/steps/step.js

@@ -9,21 +9,16 @@ var typeDefs = {
 };
 export var Step = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Step, _Component);
-
   function Step() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.config = useConfigContext();
     return _this;
   }
-
   return Step;
 }(Component);
 Step.template = template;

package/components/steps/step.vdt.js

@@ -6,27 +6,23 @@ import { context as StepsContext } from './context';
 import { Icon } from '../icon';
 export default function ($props, $blocks, $__proto__) {
   var _this = this;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      _children = _this$get.children,
-      title = _this$get.title,
-      index = _this$get.index,
-      className = _this$get.className,
-      style = _this$get.style;
-
+    _children = _this$get.children,
+    title = _this$get.title,
+    index = _this$get.index,
+    className = _this$get.className,
+    style = _this$get.style;
   var k = this.config.k;
   return _$cc(StepsContext.Consumer, {
     'children': function children(_ref) {
       var _classNameObj;
-
       var value = _ref.value,
-          status = _ref.status,
-          onChange = _ref.onChange,
-          type = _ref.type;
+        status = _ref.status,
+        onChange = _ref.onChange,
+        type = _ref.type;
       var selected = value === index;
       var error = selected && status === 'error';
       var done = value > index;

package/components/steps/styles.js

@@ -6,33 +6,26 @@ import '../../styles/global';
 import { cache } from '../utils';
 var defaults = {
   gap: '10px',
-
   get titleColor() {
     return theme.color.title;
   },
-
   get desColor() {
     return theme.color.lightBlack;
   },
-
   get markColor() {
     return theme.color.placeholder;
   },
-
   markBgColor: '#fff',
   default: {
     get height() {
       return theme.default.height;
     },
-
     get bgColor() {
       return theme.color.bg;
     },
-
     get markborder() {
       return "1px solid " + theme.color.placeholder;
     },
-
     markWidth: '16px',
     padding: '16px'
   },
@@ -41,69 +34,53 @@ var defaults = {
     get markColor() {
       return theme.color.primary;
     },
-
     get markBorderColor() {
       return theme.color.primary;
     },
-
     get markHoverBgColor() {
       return palette(theme.color.primary, -4);
     },
-
     markBgColor: '#fff',
-
     get mainColor() {
       return theme.color.primary;
     }
-
   },
   // active
   active: {
     markColor: '#fff',
-
     get markBorderColor() {
       return theme.color.primary;
     },
-
     get markBgColor() {
       return theme.color.primary;
     },
-
     get mainColor() {
       return theme.color.primary;
     }
-
   },
   // error
   error: {
     get markColor() {
       return theme.color.danger;
     },
-
     get markBorderColor() {
       return theme.color.danger;
     },
-
     markBgColor: '#fff',
-
     get mainColor() {
       return theme.color.danger;
     }
-
   },
   // line
   line: {
     get markborder() {
       return "2px solid " + theme.color.placeholder;
     },
-
     markWidth: '32px',
     markFontSize: '18px',
-
     get lineColor() {
       return theme.color.border;
     },
-
     lineWidth: '2px',
     titleGap: '16px',
     descGap: '4px',
@@ -112,19 +89,15 @@ var defaults = {
   // simple
   simple: {
     markWidth: '12px',
-
     get markBgColor() {
       return theme.color.placeholder;
     },
-
     get doneMarkBgColor() {
       return theme.color.primary;
     },
-
     get errorMarkBgColor() {
       return theme.color.danger;
     }
-
   },
   // vertical
   vertical: {
@@ -142,59 +115,49 @@ setDefault(function () {
   steps = deepDefaults(theme, {
     steps: defaults
   }).steps;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
 });
 var stepStatus = ['done', 'active', 'error'];
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:flex;", makeCommonStyles(k), ";&.", k, "-default{", makeDefaultStyles(k), ";}&.", k, "-line,&.", k, "-line-compact,&.", k, "-simple{", makeLineStyles(k), ";}&.", k, "-line-compact{", makeLineCompactStyles(k), ";}&.", k, "-simple{", makeSimpleStyles(k), ";}&.", k, "-clickable{.", k, "-done{cursor:pointer;.", k, "-step-wrapper:hover .", k, "-step-mark{background:", steps.done.markHoverBgColor, ";}}}", makeVerticalStyles(k), ";");
 });
-
 function makeDefaultStyles(k) {
   var defaults = steps.default;
   return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.", k, "-step-wrapper{", center(), ";height:100%;padding:0 ", defaults.padding, ";}.", k, "-step-mark{width:", defaults.markWidth, ";height:", defaults.markWidth, ";margin-right:", steps.gap, ";}.", k, "-step-main{display:flex;overflow:hidden;white-space:nowrap;}.", k, "-step-title{padding-right:", steps.gap, ";}.", k, "-step:last-of-type{.", k, "-step-tail{display:none;}}&:not(.", k, "-vertical){", makeArrow(false, k), ";}");
 }
-
 function makeArrow(isVertical, k) {
   var defaults = steps.default;
   var offset = "calc(-1 * (" + defaults.height + " / 2 + " + steps.gap + "))";
   var size = "calc(" + defaults.height + " / 2 + " + steps.gap + ")";
   return /*#__PURE__*/css(".", k, "-step-tail{position:absolute;", !isVertical ? /*#__PURE__*/css("top:0;right:", offset, ";width:", size, ";height:", defaults.height, ";") : /*#__PURE__*/css("left:0;bottom:", offset, ";height:", size, ";width:", defaults.height, ";"), " overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", defaults.height, " / 2 + ", steps.gap, ");border-style:solid;border-color:transparent;position:absolute;", isVertical ? 'left' : 'top', ":calc(-1 * ", steps.gap, ");}&:after{border-", isVertical ? 'top' : 'left', "-color:", defaults.bgColor, ";", isVertical ? 'top' : 'left', ":calc(-1 * ", steps.gap, ");}&:before{border-", isVertical ? 'top' : 'left', "-color:#fff;", isVertical ? 'top' : 'left', ":0;}}.", k, "-step:not(:first-of-type){padding-", isVertical ? 'top' : 'left', ":calc(", defaults.height, " / 2 + ", steps.gap, ");}");
 }
-
 function makeLineStyles(k) {
   var line = steps.line;
   var top = "calc(" + line.markWidth + " / 2 - " + line.lineWidth + " / 2)";
   return /*#__PURE__*/css(".", k, "-step{display:flex;}.", k, "-step-wrapper{display:inline-block;text-align:center;position:relative;width:", line.contentWidth, ";}.", k, "-step:last-of-type{flex:0 0 auto;}.", k, "-step-mark{border:", line.markborder, ";width:", line.markWidth, ";height:", line.markWidth, ";position:relative;z-index:1;&,.", k, "-icon{font-size:", line.markFontSize, ";}}.", k, "-step-main{padding-top:", line.titleGap, ";}.", k, "-step-title{font-size:14px;color:", theme.color.text, ";}.", k, "-step-content{margin-top:", line.descGap, ";color:", theme.color.placeholder, ";}.", k, "-step-wrapper{&:before,&:after{content:'';display:block;height:", line.lineWidth, ";background:", line.lineColor, ";width:50%;position:absolute;top:", top, ";}&:after{right:0;}}.", k, "-step{&:first-of-type .", k, "-step-wrapper:before,&:last-of-type .", k, "-step-wrapper:after{background:transparent;}}.", k, "-step-tail{flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-top:", top, ";}.", k, "-step{&.", k, "-done{.", k, "-step-tail,&:not(:last-of-type) .", k, "-step-wrapper:after,&:not(:first-of-type) .", k, "-step-wrapper:before{background:", theme.color.primary, ";}}&:not(:first-of-type).", k, "-active{.", k, "-step-wrapper:before{background:", theme.color.primary, ";}}&.", k, "-active .", k, "-step-title{color:", theme.color.primary, ";}&.", k, "-error .", k, "-step-title{color:", theme.color.danger, ";}}");
 }
-
 function makeLineCompactStyles(k) {
   var line = steps.line;
   return /*#__PURE__*/css(".", k, "-step-wrapper{display:inline-flex;text-align:left;width:auto;&:before,&:after{display:none;}}.", k, "-step-main{flex:1;padding:0 0 0 ", line.titleGap, ";}.", k, "-step-content{margin:0;}.", k, "-step-tail{margin-right:", line.titleGap, ";}.", k, "-step-title{display:flex;align-items:center;height:", line.markWidth, ";&:after{content:'';display:block;flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-left:", line.titleGap, ";}}.", k, "-step:last-of-type .", k, "-step-title:after{display:none;}.", k, "-step{&.", k, "-done{.", k, "-step-title:after{background:", theme.color.primary, ";}}}");
 }
-
 function makeSimpleStyles(k) {
   var simple = steps.simple;
   var top = "calc(" + simple.markWidth + " / 2 - " + steps.line.lineWidth + " / 2)";
   return /*#__PURE__*/css(".", k, "-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.", k, "-step-wrapper{font-size:0;&:before,&:after{top:", top, ";}}.", k, "-step-main{font-size:", theme.default.fontSize, ";}.", k, "-step-tail{margin-top:", top, ";}.", k, "-step{&.", k, "-done{.", k, "-step-mark{background:", simple.doneMarkBgColor, ";}}&.", k, "-error{.", k, "-step-mark{background:", simple.errorMarkBgColor, ";}}}");
 }
-
 ;
-
 function center(flex) {
   if (flex === void 0) {
     flex = 'flex';
   }
-
   return /*#__PURE__*/css("display:", flex, ";align-items:center;justify-content:center;");
 }
-
 function makeCommonStyles(k) {
   return /*#__PURE__*/css(".", k, "-step{position:relative;flex:1;", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
     var styles = steps[status];
     return /*#__PURE__*/css("&.", k, "-", status, "{.", k, "-step-mark{color:", styles.markColor, ";border-color:", styles.markBorderColor, ";background:", styles.markBgColor, ";}.", k, "-step-main{color:", styles.mainColor, ";}}");
   }), ";}.", k, "-step-mark{", center('inline-flex'), ";border:", steps.default.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
 }
-
 function makeVerticalStyles(k) {
   var verticalLine = steps.vertical.line;
   return /*#__PURE__*/css("&.", k, "-vertical{&.", k, "-default{height:auto;width:", steps.default.height, ";writing-mode:vertical-rl;letter-spacing:1px;", makeArrow(true, k), ";.", k, "-step-wrapper{width:100%;padding:", steps.default.padding, " 0;}.", k, "-step-mark{margin-right:0;margin-bottom:", steps.gap, ";}.", k, "-step-title{padding-right:0;padding-bottom:", steps.gap, ";}}&.", k, "-line,&.", k, "-line-compact,&.", k, "-simple{flex-direction:column;.", k, "-step{flex:none;min-height:", verticalLine.minHeight, ";}.", k, "-step-wrapper{display:flex;width:auto;text-align:left;}.", k, "-step-main{flex:1;padding:0 0 ", verticalLine.padding, " ", verticalLine.padding, ";}.", k, "-step-title{display:flex;align-items:center;height:", steps.line.markWidth, ";&:after{display:none;}}.", k, "-step-wrapper{&:before,&:after{display:none;}}.", k, "-step-tail{position:absolute;left:calc(", steps.line.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);height:100%;width:", steps.line.lineWidth, ";background:", steps.line.lineColor, ";}.", k, "-step:last-of-type{.", k, "-step-tail{display:none;}}}&.", k, "-simple{.", k, "-step-tail{left:calc(", steps.simple.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);}.", k, "-step-title{height:", steps.simple.markWidth, ";margin-bottom:", steps.vertical.simple.titleGap, ";}}}");