zartui 2.1.22 → 2.1.24

package/lib/index.js

@@ -161,7 +161,7 @@ var _toast = _interopRequireDefault(require("./toast"));
 exports.Toast = _toast.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 exports.Uploader = _uploader.default;
-var version = exports.version = '2.1.22';
+var version = exports.version = '2.1.24';
 function install(Vue) {
   var components = [_actionSheet.default, _area.default, _avatar.default, _backTop.default, _badge.default, _button.default, _calendar.default, _cascader.default, _cell.default, _cellGroup.default, _checkbox.default, _checkboxGroup.default, _col.default, _collapse.default, _collapseItem.default, _countDown.default, _datetimePicker.default, _dialog.default, _divider.default, _dropdownItem.default, _dropdownMenu.default, _empty.default, _field.default, _foldDialog.default, _form.default, _grid.default, _gridItem.default, _hierarchySelect.default, _icon.default, _image.default, _imagePreview.default, _indexAnchor.default, _indexBar.default, _info.default, _lazyload.default, _list.default, _loading.default, _locale.default, _mediaPicker.default, _mediaPlayer.default, _multiplePicker.default, _navBar.default, _noticeBar.default, _numberKeyboard.default, _overlay.default, _passwordInput.default, _picker.default, _popover.default, _popup.default, _pullRefresh.default, _radio.default, _radioGroup.default, _rate.default, _row.default, _search.default, _signature.default, _skeleton.default, _slider.default, _speechRecognizer.default, _step.default, _stepper.default, _steps.default, _sticky.default, _swipe.default, _swipeCell.default, _swipeItem.default, _switch.default, _switchCell.default, _tab.default, _tabbar.default, _tabbarItem.default, _table.default, _tabs.default, _tag.default, _textEllipsis.default, _timeline.default, _toast.default, _uploader.default];
   components.forEach(function (item) {

package/lib/media-picker/index.js

@@ -1097,8 +1097,8 @@ var _default2 = exports.default = createComponent({
      */
     renderMediaThumbnail: function renderMediaThumbnail(media) {
       var h = this.$createElement;
-      if (this.$scopedSlots['preview-media']) {
-        return this.slots('preview-media', {
+      if (this.$scopedSlots.thumbnail) {
+        return this.slots('thumbnail', {
           file: media
         });
       }

package/lib/mixins/checkbox.js

@@ -35,6 +35,10 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
       bindGroup: {
         type: Boolean,
         default: true
+      },
+      indeterminate: {
+        type: Boolean,
+        default: false
       }
     },
     computed: {
@@ -52,7 +56,7 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
         var boxShadow = this.boxShadow || this.parent && this.parent.boxShadow;
         var border = this.border || this.parent && this.parent.border;
         var iconColor = this.iconColor || this.parent && this.parent.iconColor;
-        if ((boxShadow || checkedColor) && this.checked && !this.isDisabled) {
+        if ((boxShadow || checkedColor) && (this.checked || this.indeterminate) && !this.isDisabled) {
           return {
             color: iconColor,
             boxShadow: boxShadow,
@@ -88,24 +92,31 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
       },
       genIcon: function genIcon() {
         var h = this.$createElement;
-        var checked = this.checked;
+        var checked = this.checked,
+          indeterminate = this.indeterminate;
         var iconSize = this.iconSize || this.parent && this.parent.iconSize;
         return h("div", {
           "ref": "icon",
           "class": bem('icon', [this.shape, {
             disabled: this.isDisabled,
-            checked: checked
+            checked: checked || indeterminate
           }]),
           "style": {
             fontSize: (0, _utils.addUnit)(iconSize)
           }
         }, [this.slots('icon', {
-          checked: checked
+          checked: checked,
+          indeterminate: indeterminate
         }) || (role === 'radio' ? h(_icon.default, {
           "style": this.iconStyle
         }, [checked ? h("div", {
           "class": bem('dot')
-        }) : '']) : h(_icon.default, {
+        }) : '']) : indeterminate ? h(_icon.default, {
+          "attrs": {
+            "name": "minus"
+          },
+          "style": this.iconStyle
+        }) : h(_icon.default, {
           "attrs": {
             "name": "checkBox-select"
           },
@@ -132,7 +143,8 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
       } else {
         Children.push(this.genLabel());
       }
-      var checked = this.checked;
+      var checked = this.checked,
+        indeterminate = this.indeterminate;
       return h("div", {
         "attrs": {
           "role": role,
@@ -142,7 +154,7 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
         "class": [bem([{
           disabled: this.isDisabled,
           'label-disabled': this.labelDisabled
-        }, this.direction]), checked ? '' : bem('disable-icon')],
+        }, this.direction]), checked || indeterminate ? '' : bem('disable-icon')],
         "on": {
           "click": this.onClick
         }

package/lib/multiple-picker/index.css

@@ -1 +1 @@
-[class*=zt2-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt2-hairline,.zt2-hairline--bottom,.zt2-hairline--left,.zt2-hairline--right,.zt2-hairline--surround,.zt2-hairline--top,.zt2-hairline--top-bottom{position:relative}.zt2-hairline--top::after{border-top-width:1px}.zt2-hairline--left::after{border-left-width:1px}.zt2-hairline--right::after{border-right-width:1px}.zt2-hairline--bottom::after{border-bottom-width:1px}.zt2-hairline--top-bottom::after,.zt2-hairline-unset--top-bottom::after{border-width:1px 0}.zt2-hairline--surround::after{border-width:1px}.zt2-multiple-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt2-multiple-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;box-sizing:content-box;height:44px;padding:8px 16px;border-top:1px solid rgba(45,75,115,.1)}.zt2-multiple-picker__border{position:relative}.zt2-multiple-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt2-multiple-picker__cancel,.zt2-multiple-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt2-multiple-picker__cancel:active,.zt2-multiple-picker__confirm:active{opacity:.7}.zt2-multiple-picker__confirm{color:#0091fa;font-weight:700}.zt2-multiple-picker__cancel{color:#000;font-weight:400}.zt2-multiple-picker__title{font-weight:400;font-size:14px;line-height:20px;text-align:center;color:#2d4b73;opacity:.4;padding:12px 0;border-bottom:1px solid rgba(45,75,115,.1)}.zt2-multiple-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt2-multiple-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt2-multiple-picker__options{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt2-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt2-multiple-picker-options{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll;font-size:14px}.zt2-multiple-picker-options__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;background-color:#fff;padding:12px 16px 4px 16px}.zt2-multiple-picker-options__item{color:#2d4b73;padding:0 4px 8px 0;box-sizing:border-box;text-align:center;font-size:14px}.zt2-multiple-picker-options__item .zt2-ellipsis{line-height:20px;border-radius:18px;border:1px solid rgba(45,75,115,.2);padding:7px 16px;opacity:.6}.zt2-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:.3}.zt2-multiple-picker-options__item--last{padding-right:0}.zt2-multiple-picker-options__item--selected .zt2-ellipsis{background:rgba(0,145,250,.1);border:1px solid rgba(0,145,250,.6);border-radius:18px;color:#0091fa;opacity:1}
+[class*=zt2-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt2-hairline,.zt2-hairline--bottom,.zt2-hairline--left,.zt2-hairline--right,.zt2-hairline--surround,.zt2-hairline--top,.zt2-hairline--top-bottom{position:relative}.zt2-hairline--top::after{border-top-width:1px}.zt2-hairline--left::after{border-left-width:1px}.zt2-hairline--right::after{border-right-width:1px}.zt2-hairline--bottom::after{border-bottom-width:1px}.zt2-hairline--top-bottom::after,.zt2-hairline-unset--top-bottom::after{border-width:1px 0}.zt2-hairline--surround::after{border-width:1px}.zt2-multiple-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt2-multiple-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;box-sizing:content-box;height:44px;padding:8px 16px;border-top:1px solid rgba(45,75,115,.1)}.zt2-multiple-picker__toolbar-select-all{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;flex:1;max-width:45%}.zt2-multiple-picker__toolbar-divider{width:1px;height:14px;background-color:#e9ecf2;margin-left:7px;margin-right:7px}.zt2-multiple-picker__toolbar-checkbox{-webkit-flex-shrink:0;flex-shrink:0}.zt2-multiple-picker__toolbar-checkbox .zt2-checkbox__icon{font-size:var(--zt-font-size-xl)}.zt2-multiple-picker__toolbar-checkbox .zt2-checkbox__label{font-size:16px;margin-left:4px}.zt2-multiple-picker__toolbar-checkbox-text{font-size:16px;color:#2d4b73;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (max-width:375px){.zt2-multiple-picker__toolbar .zt2-multiple-picker__in-select-all{padding:0 14px}}@media (min-width:376px){.zt2-multiple-picker__toolbar .zt2-multiple-picker__in-select-all{padding:0 22px}}.zt2-multiple-picker__toolbar .zt2-multiple-picker__in-select-all .zt2-button__text{font-size:16px}@media (max-width:375px){.zt2-multiple-picker__toolbar .zt2-multiple-picker__select-other{padding:0 10px}}@media (min-width:376px){.zt2-multiple-picker__toolbar .zt2-multiple-picker__select-other{padding:0 14px}}.zt2-multiple-picker__toolbar .zt2-multiple-picker__select-other .zt2-button__text{font-size:16px}.zt2-multiple-picker__border{position:relative}.zt2-multiple-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt2-multiple-picker__cancel,.zt2-multiple-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt2-multiple-picker__cancel:active,.zt2-multiple-picker__confirm:active{opacity:.7}.zt2-multiple-picker__confirm{color:#0091fa;font-weight:700}.zt2-multiple-picker__cancel{color:#000;font-weight:400}.zt2-multiple-picker__title{font-weight:400;font-size:14px;line-height:20px;text-align:center;color:#2d4b73;opacity:.4;padding:12px 0;border-bottom:1px solid rgba(45,75,115,.1)}.zt2-multiple-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt2-multiple-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt2-multiple-picker__options{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt2-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt2-multiple-picker-options{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll;font-size:14px}.zt2-multiple-picker-options__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;background-color:#fff;padding:12px 16px 4px 16px}.zt2-multiple-picker-options__item{color:#2d4b73;padding:0 4px 8px 0;box-sizing:border-box;text-align:center;font-size:14px}.zt2-multiple-picker-options__item .zt2-ellipsis{line-height:20px;border-radius:18px;border:1px solid rgba(45,75,115,.2);padding:7px 16px;opacity:.6}.zt2-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:.3}.zt2-multiple-picker-options__item--last{padding-right:0}.zt2-multiple-picker-options__item--selected .zt2-ellipsis{background:rgba(0,145,250,.1);border:1px solid rgba(0,145,250,.6);border-radius:18px;color:#0091fa;opacity:1}

package/lib/multiple-picker/index.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
+var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _utils = require("../utils");
 var _shared = require("./shared");
@@ -12,6 +13,7 @@ var _MultiplePickerOptions = _interopRequireDefault(require("./MultiplePickerOpt
 var _popup = _interopRequireDefault(require("../popup"));
 var _popup2 = require("../mixins/popup");
 var _button = _interopRequireDefault(require("../button"));
+var _checkbox = _interopRequireDefault(require("../checkbox"));
 // Utils
 
 // Components
@@ -54,10 +56,15 @@ var _default2 = exports.default = createComponent({
     safeAreaInsetBottom: {
       type: Boolean,
       default: false
+    },
+    showSelectAll: {
+      type: Boolean,
+      default: false
     }
   }),
   data: function data() {
     return {
+      currentIndexs: [],
       confirmIndexs: null
     };
   },
@@ -79,6 +86,12 @@ var _default2 = exports.default = createComponent({
     }
   },
   computed: {
+    isAllSelected: function isAllSelected() {
+      return this.currentIndexs.length > 0 && this.currentIndexs.length === this.options.length;
+    },
+    isIndeterminate: function isIndeterminate() {
+      return this.currentIndexs.length > 0 && this.currentIndexs.length < this.options.length;
+    },
     itemPxHeight: function itemPxHeight() {
       return this.itemHeight ? (0, _unit.unitToPx)(this.itemHeight) : _shared.DEFAULT_ITEM_HEIGHT;
     }
@@ -104,6 +117,10 @@ var _default2 = exports.default = createComponent({
       return result;
     },
     onChange: function onChange() {
+      // 同步 currentIndexs 以触发计算属性更新
+      if (this.$refs.pickerOptions) {
+        this.currentIndexs = [].concat(this.$refs.pickerOptions.currentIndexs);
+      }
       this.$emit('change', this.getOptions());
     },
     cancel: function cancel() {
@@ -117,6 +134,28 @@ var _default2 = exports.default = createComponent({
       });
       this.emit('confirm', options);
     },
+    handleSelectAll: function handleSelectAll() {
+      var newIndexs = !this.isAllSelected ? this.options && this.options.map(function (_, index) {
+        return index;
+      }) : [];
+      this.currentIndexs = newIndexs;
+      if (this.$refs.pickerOptions) {
+        this.$refs.pickerOptions.setConfirmIndex(newIndexs);
+      }
+    },
+    onSelectOther: function onSelectOther() {
+      var _this3 = this;
+      var newIndexs = [];
+      this.options && this.options.forEach(function (_, index) {
+        if (!_this3.currentIndexs.includes(index)) {
+          newIndexs.push(index);
+        }
+      });
+      this.currentIndexs = newIndexs;
+      if (this.$refs.pickerOptions) {
+        this.$refs.pickerOptions.setConfirmIndex(newIndexs);
+      }
+    },
     genTitle: function genTitle() {
       var h = this.$createElement;
       var titleSlot = this.slots('title');
@@ -129,13 +168,32 @@ var _default2 = exports.default = createComponent({
         }, [this.title]);
       }
     },
-    genCancel: function genCancel() {
+    genOther: function genOther() {
       var h = this.$createElement;
       return h(_button.default, {
+        "class": bem('select-other'),
         "attrs": {
-          "size": "normal",
-          "block": true
+          "size": "medium"
+        },
+        "style": {
+          marginLeft: '12px',
+          marginRight: '8px'
         },
+        "on": {
+          "click": this.onSelectOther
+        }
+      }, [this.slots('selectOther') || '其他']);
+    },
+    genCancel: function genCancel() {
+      var h = this.$createElement;
+      return h(_button.default, (0, _babelHelperVueJsxMergeProps.default)([{
+        "class": [this.showSelectAll ? bem('in-select-all') : ''],
+        "attrs": {
+          "size": this.showSelectAll ? "medium" : "normal"
+        }
+      }, this.showSelectAll ? {
+        block: true
+      } : {}, {
         "style": {
           marginRigth: "4px",
           backgroundColor: "white"
@@ -143,30 +201,54 @@ var _default2 = exports.default = createComponent({
         "on": {
           "click": this.cancel
         }
-      }, [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
+      }]), [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
     },
     genConfirm: function genConfirm() {
       var h = this.$createElement;
-      return h(_button.default, {
+      return h(_button.default, (0, _babelHelperVueJsxMergeProps.default)([{
         "attrs": {
           "type": "primary",
-          "size": "normal",
-          "block": true
+          "size": this.showSelectAll ? "medium" : "normal"
         },
+        "class": [this.showSelectAll ? bem('in-select-all') : '']
+      }, this.showSelectAll ? {
+        block: true
+      } : {}, {
         "style": {
           marginLeft: "8px"
         },
         "on": {
           "click": this.confirm
         }
-      }, [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
+      }]), [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
+    },
+    genSelectAll: function genSelectAll() {
+      var h = this.$createElement;
+      return h("div", {
+        "class": bem('toolbar-select-all')
+      }, [h(_checkbox.default, {
+        "class": bem('toolbar-checkbox'),
+        "attrs": {
+          "shape": 'square',
+          "value": this.isAllSelected,
+          "indeterminate": this.isIndeterminate
+        },
+        "on": {
+          "click": this.handleSelectAll
+        }
+      }, ["\u5168\u9009"]), h("div", {
+        "class": bem('toolbar-divider')
+      }), h("span", {
+        "class": bem('toolbar-checkbox-text')
+      }, ["\u5DF2\u9009 ", this.currentIndexs && this.currentIndexs.length || 0])]);
     },
     genToolbar: function genToolbar() {
       var h = this.$createElement;
       if (this.showToolbar) {
+        var toolbar = this.showSelectAll ? [this.genSelectAll(), this.genOther(), this.genCancel(), this.genConfirm()] : [this.genCancel(), this.genConfirm()];
         return h("div", {
           "class": bem('toolbar')
-        }, [this.slots() || [this.genCancel(), this.genConfirm()]]);
+        }, [this.slots() || toolbar]);
       }
     },
     genOptions: function genOptions() {
@@ -185,7 +267,7 @@ var _default2 = exports.default = createComponent({
       }, [this.genOptionItems()]);
     },
     genOptionItems: function genOptionItems() {
-      var _this3 = this;
+      var _this4 = this;
       var h = this.$createElement;
       var formatOptions = [];
       if (this.options && this.options[0] && typeof this.options[0] !== 'object') {
@@ -214,7 +296,7 @@ var _default2 = exports.default = createComponent({
         },
         "on": {
           "change": function change() {
-            _this3.onChange();
+            _this4.onChange();
           }
         }
       });

package/lib/multiple-picker/index.less

@@ -14,6 +14,64 @@
     height: @picker-toolbar-height;
     padding: 8px 16px;
     border-top: 1px solid rgba(45,75,115,0.10);
+
+     &-select-all {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      max-width: 45%;
+    }
+
+    &-divider {
+      width: 1px;
+      height: 14px; 
+      background-color: #E9ECF2;
+      margin-left: 7px;
+      margin-right: 7px;
+    }
+
+    &-checkbox {
+      flex-shrink: 0;
+      .zt2-checkbox__icon {
+        font-size: var(--zt-font-size-xl);
+      }
+
+      .zt2-checkbox__label {
+        font-size: 16px;
+        margin-left: 4px;
+      }
+    }
+
+    &-checkbox-text {
+      font-size: 16px;
+      color: #2d4b73;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .zt2-multiple-picker__in-select-all {
+      @media (max-width: 375px) {
+        padding: 0 14px;
+      }
+      @media (min-width: 376px) {
+        padding: 0 22px;
+      }
+      .zt2-button__text {
+        font-size: 16px;
+      }
+    }
+    .zt2-multiple-picker__select-other {
+      @media (max-width: 375px) {
+        padding: 0 10px;
+      }
+      @media (min-width: 376px) {
+        padding: 0 14px;
+      }
+      .zt2-button__text {
+        font-size: 16px;
+      }
+    }
   }
 
   &__border {

package/lib/multiple-picker/style/index.js

@@ -2,6 +2,7 @@ require('../../style/base.css');
 require('../../overlay/index.css');
 require('../../info/index.css');
 require('../../icon/index.css');
+require('../../checkbox/index.css');
 require('../../popup/index.css');
 require('../../loading/index.css');
 require('../../button/index.css');

package/lib/multiple-picker/style/less.js

@@ -2,6 +2,7 @@ require('../../style/base.less');
 require('../../overlay/index.less');
 require('../../info/index.less');
 require('../../icon/index.less');
+require('../../checkbox/index.less');
 require('../../popup/index.less');
 require('../../loading/index.less');
 require('../../button/index.less');

package/lib/style/var.less

@@ -176,7 +176,7 @@
 @button-large-height: 50px;
 @button-default-height: 44px;
 @button-default-line-height: calc(
-        var(@button-normal-font-size) * 2 - 8px
+        @button-normal-font-size * 2 - 8px
 );
 @button-default-font-size: @font-size-lg;
 @button-default-color: @text-color-3;