vsyswin-ui 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vsyswin-ui",
-    "version": "0.3.01",
+    "version": "0.3.02",
     "main": "lib/vsyswin-ui.umd.min.js",
     "private": false,
     "description": "Vue2.x的应用组件库.",

package/packages/button-ellipsis/src/button-container.vue

@@ -8,12 +8,12 @@ export default {
     }
   },
   computed: {
-      trigger() {
-        return this.$parent.trigger
-      },
-      num() {
-        return this.$parent.num
-      }
+    trigger() {
+      return this.$parent.trigger
+    },
+    num() {
+      return this.$parent.num
+    }
   },
   render(h) {
     let contents = []
@@ -64,9 +64,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.sy-buttons {
+  display: flex;
+  align-items: center;
+}
+
 .sy-button-dots {
-  width: 18px;
-  height: 18px;
+  width: 32px;
+  height: 32px;
   cursor: pointer;
+  background: #EFF5FB;
+  border-radius: 4px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover{
+    background: #E6EFF8;
+  }
 }
 </style>

package/packages/drag-set/src/dragSet.vue

@@ -2,13 +2,9 @@
   <div ref="dragSet" class="dragSetting">
     <el-popover trigger="click" v-model="dragVisible">
       <div class="content" style="height:300px;overflow: auto;">
-        <draggable
-          element="ul"
-          style="transition: all 0.3s;border-bottom: 1px solid #EBEEF5;"
-          :style="{ height: dragVisible ? 'calc(100% - 50px)' : '0', overflow: 'auto' }"
-          v-model="list"
-          :options="dragOptions"
-        >
+        <draggable element="ul" style="transition: all 0.3s;border-bottom: 1px solid #EBEEF5;"
+          :style="{ height: dragVisible ? 'calc(100% - 50px)' : '0', overflow: 'auto' }" v-model="list"
+          :options="dragOptions">
           <div class="dragItem" v-for="(item, index) in list" :domProp="item.prop" :key="index">
             <el-checkbox v-model="item.isShow" :disabled="item.isDragDisabled" />
             {{ item.label }}
@@ -23,7 +19,16 @@
         </draggable>
         <div class="confirmBtn" slot="footer" @click="save">确定</div>
       </div>
-      <i class="iconfont icon-yewushezhi" style="font-size: 14px;cursor: pointer;" slot="reference"></i>
+      <!-- <i class="iconfont icon-yewushezhi" style="font-size: 14px;cursor: pointer;" slot="reference"></i> -->
+      <svg t="1696937838297" slot="reference" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="4320" width="18" height="18">
+        <path
+          d="M510.37806 337.803609c-98.010221 0-177.748287 78.842673-177.748287 175.75284 0 96.91426 79.738066 175.763073 177.748287 175.763073 9.537214 0 19.620873-0.978281 31.797194-3.088338 18.196431-3.281743 30.290887-20.538779 26.963095-38.471197-2.924609-15.732309-16.693194-27.152407-32.747845-27.152407-2.071172 0-4.15974 0.196475-6.123464 0.563842-7.937786 1.402953-14.233166 2.056845-19.807115 2.056845-61.159942 0-110.915136-49.201585-110.915136-109.671819 0-60.467163 49.679469-109.661585 110.747313-109.661585 61.116963 0 110.832248 49.194422 110.832248 109.661585 0 5.892197-0.656963 12.0832-2.088568 19.531845-3.327792 17.928325 8.769734 35.189454 26.959002 38.464033 2.006703 0.360204 4.045129 0.546446 6.070252 0.546446 16.204054 0 30.019711-11.43033 32.832779-27.116591 2.13871-11.45182 3.13848-21.435195 3.13848-31.41857 0.042979-46.873564-18.435884-90.990341-52.033074-124.223233C602.407056 356.106464 557.790906 337.803609 510.37806 337.803609z"
+          fill="#000000" p-id="4321"></path>
+        <path
+          d="M938.476161 432.79917c-2.185782-11.426237-11.037381-20.499893-22.563902-23.12058-41.909505-9.508561-76.781734-34.929534-98.185206-71.550593-21.334911-36.560684-26.191522-79.099523-13.68979-119.709429 3.52836-11.123338 0.007163-23.235191-8.951883-30.840402-41.860387-35.721573-89.536222-62.938448-141.695163-80.885192-3.152806-1.088798-6.437619-1.639337-9.776667-1.639337-8.256034 0-16.182564 3.431146-21.724791 9.376555-29.236881 31.04404-68.840878 48.140417-111.5107 48.140417-42.673915 0-82.305541-17.125029-111.607914-48.230468-7.877411-8.333806-20.510126-11.512195-31.580253-7.726985-52.483328 18.171871-100.131535 45.416376-141.640927 80.988546-8.815783 7.591909-12.322653 19.620873-8.934486 30.67258 12.586666 40.645722 7.759731 83.180468-13.597693 119.78106-21.306258 36.5965-56.149834 62.006216-98.17395 71.561849-11.540847 2.709715-20.396539 11.812023-22.559808 23.166629-5.228071 27.169803-7.877411 54.346769-7.877411 80.770582 0 26.426883 2.64934 53.603849 7.873318 80.763418 2.174526 11.411911 11.023054 20.488637 22.552645 23.12058 41.913599 9.512654 76.785827 34.922371 98.19237 71.547523 21.349237 36.59343 26.177196 79.128175 13.583366 119.795387-3.363607 10.969842 0.121773 23.013133 8.973372 30.758538 41.84913 35.707246 89.494267 62.920028 141.662417 80.902588 11.466146 3.885494 23.738657 0.549515 31.454386-7.680936 29.29828-31.091112 68.925812-48.216141 111.593588-48.216141s82.302471 17.125029 111.560842 48.183396c5.556553 5.955642 13.494339 9.380648 21.782096 9.380648 3.27765 0 6.537903-0.520863 9.829879-1.599428 52.126194-17.968234 99.774401-45.184085 141.652184-80.912821 8.791224-7.577582 12.308327-19.628036 8.94165-30.758538-12.597923-40.678468-7.745405-83.20605 13.672394-119.773897 21.324678-36.625152 56.192813-62.030775 98.19237-71.547523 11.390421-2.592035 20.23588-11.633968 22.549575-23.106254 5.223978-27.184129 7.870248-54.358025 7.870248-80.770582C946.342316 487.171522 943.697069 459.965903 938.476161 432.79917zM728.572524 789.878798c-26.02677 20.157085-54.736649 36.553521-85.487 48.818869-36.682457-32.144094-83.60207-49.779753-132.792399-49.779753-48.926316 0-95.838765 17.635659-132.767839 49.786916-30.744211-12.262278-59.45716-28.655643-85.491093-48.812729 9.894348-47.441499 1.889023-96.449679-22.763446-138.627291-24.448832-41.966811-63.427588-73.339332-110.186542-88.840374-2.381234-16.343223-3.584642-32.758078-3.584642-48.869011 0-16.043395 1.203408-32.451086 3.584642-48.851615 46.612621-15.389502 85.584214-46.758953 110.186542-88.850607 24.523533-42.024116 32.525788-91.033319 22.74912-138.620128 26.0237-20.149922 54.735625-36.543288 85.494163-48.815799 36.821627 32.201399 83.73817 49.861618 132.778072 49.861618 49.194422 0 96.109941-17.635659 132.792399-49.779753 30.751375 12.269441 59.45716 28.662807 85.48086 48.812729-9.809413 47.63388-1.835811 96.634898 22.667256 138.620128 24.445762 41.966811 63.416332 73.343425 110.182448 88.850607 2.381234 16.386202 3.584642 32.801057 3.584642 48.940642 0.143263 15.443737-1.031493 31.797194-3.499707 48.701189-46.763047 15.504112-85.73771 46.873564-110.186542 88.836281C726.84416 693.189665 718.845998 742.190683 728.572524 789.878798z"
+          fill="#000000" p-id="4322"></path>
+      </svg>
     </el-popover>
   </div>
 </template>
@@ -98,6 +103,7 @@ export default {
 .content {
   width: 100%;
   box-sizing: border-box;
+
   .dragItem {
     width: 100%;
     height: 30px;
@@ -106,32 +112,39 @@ export default {
     padding: 0 10px;
     box-sizing: border-box;
     cursor: move;
+
     .itemLock {
       float: right;
       opacity: 0;
       cursor: pointer;
       transition: opacity 0.1s;
     }
+
     .itemIsLock {
       cursor: pointer;
       float: right;
     }
+
     .dragIcon {
       float: right;
       opacity: 0;
       transition: opacity 0.1s;
       margin-right: 8px;
     }
+
     &:hover {
       color: #027aff;
+
       .itemLock {
         opacity: 1;
       }
+
       .dragIcon {
         opacity: 1;
       }
     }
   }
+
   .confirmBtn {
     margin: 16px auto 0;
     width: 72px;
@@ -149,19 +162,22 @@ export default {
   position: absolute;
   right: 0;
   top: 0;
-  height: 40px;
-  line-height: 40px;
+  height: 52px;
+  line-height: 52px;
   padding: 0 2px;
-  background: #f2f5f9;
-  border: 1px solid #ebeef5;
-  border-left: 1px solid #d8d8d8;
+  background: linear-gradient(180deg, #EEF4FB 0%, #FFFFFF 100%);
+  border: none;
+  // border-left: 1px solid #d8d8d8;
   color: #606266;
   z-index: 20;
+   ::v-deep .el-popover__reference-wrapper{
+    line-height: 62px !important;
+  }
 }
+
 ul {
   margin: 0;
   padding: 0;
   border: 0;
   line-height: 100%;
-}
-</style>
+}</style>

package/packages/full-dialog/index.js

@@ -0,0 +1,10 @@
+// 导入组件
+import fullDialog from './src/full-dialog.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+fullDialog.install = function (Vue) {
+  Vue.component(fullDialog.name, fullDialog)
+}
+
+// 默认导出组件
+export default fullDialog

package/packages/full-dialog/src/full-dialog.vue

@@ -0,0 +1,166 @@
+<template>
+  <!-- 封装弹框 -->
+  <div>
+    <el-dialog title="" appendToBody custom-class="syswin-dialog-center-footer" :visible.sync="dialogVisible"
+      :class="className"
+      :fullscreen="fullscreen" :before-close="Cancel" :close-on-click-modal="closeOnClickModal" center class="popup">
+      <div class="sy-full-cont">
+        <div class="sy-full-headbox">
+          <p class="sy-full-active" @click="Cancel">{{ title }}</p>
+          <span> <i class="el-icon-arrow-right"></i></span>
+          <p>{{ subtitle }}</p>
+        </div>
+        <div class="sy-full-content">
+          <slot name="content"></slot>
+        </div>
+        <span v-if="!$slots.footer" slot="footer" class="sy-full-dialog-footer">
+          <el-button type="primary" class="sy-full-btn sy-full-save" @click="Save">保存</el-button>
+          <el-button @click="Cancel" class="sy-full-btn sy-full-cancel">取 消</el-button>
+        </span>
+        <div v-else class="sy-full-my-footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SyFullDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: '550px'
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    fullscreen: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    otherData: {
+      type: Object,
+      default: () => { }
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  methods: {
+    Cancel() {
+      this.$emit('close')
+    },
+    Save() {
+      this.$emit('confirm')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.popup {
+  ::v-deep .el-dialog {
+    background: #f2f5f9;
+  }
+
+  ::v-deep .el-dialog__header {
+    display: none;
+  }
+
+  ::v-deep .el-dialog--center .el-dialog__body {
+    padding: 24px;
+    height: 100%;
+  }
+
+  .sy-full-cont {
+    height: 100%;
+    background: #fff;
+    position: relative;
+    border-radius: 8px;
+
+    .sy-full-headbox {
+      height: 62px;
+      background: #fff;
+      border-bottom: 1px solid #eeeff3;
+      color: #888888;
+      line-height: 62px;
+      display: flex;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      box-sizing: border-box;
+
+      p {
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      span {
+        padding: 0px 10px;
+      }
+
+      .sy-full-active {
+        color: #027AFF;
+        margin-left: 20px;
+        cursor: pointer;
+      }
+    }
+
+    .sy-full-content {
+      height: calc(100% - 138px);
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  }
+
+  .el-button.el-button--default {
+    // width: 88px;
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+  }
+
+  .sy-full-dialog-footer,
+  .sy-full-my-footer {
+    height: 76px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    border-top: 1px solid #eeeff3;
+    border-radius: 0 0 8px 8px;
+    box-sizing: border-box;
+
+  }
+}
+</style>

package/packages/index.js

@@ -11,6 +11,7 @@ import simpleSearchBar from './simple-search-bar' // 简单搜索栏组件
 import inputMore from './input-more' // 简单搜索栏组件
 import paging from './paging'
 import baseDialog from './base-dialog'
+import fullDialog from './full-dialog' // 全屏弹窗组件
 import newSearchBar from './newSearchBar' // 高级筛选
 import table from './table' // 表格组件
 import dragSet from './drag-set'
@@ -20,7 +21,7 @@ export { default as Progress } from './progress';
 const { buttonList, buttonItem } = buttonEllipsis
 
 // 存储组件列表
-const components = [layout, searchTree, selectProject, selectTree, buttonItem, buttonList, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet, topTabs, baseDialog]
+const components = [layout, searchTree, selectProject, selectTree, buttonItem, buttonList, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet, topTabs, baseDialog, fullDialog]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue) {
@@ -53,5 +54,6 @@ export default {
   table,
   topTabs,
   dragSet,
-  baseDialog
+  baseDialog,
+  fullDialog
 }

package/packages/layout/src/layout.vue

@@ -1,26 +1,41 @@
 <template>
-  <div class="main-container" :class="{ 'no-head': !headVisiable }">
-    <div class="hd" v-if="headVisiable">
-      <slot name="headLeft">
-        <h2>{{ title }}</h2>
-      </slot>
-      <div class="hd-right">
-        <slot name="headRight"></slot>
-      </div>
-    </div>
-    <div class="bd west-east-wrap" v-if="$slots.left">
+  <div class="main-container">
+    <div class="container-left" v-if="$slots.left" :style="{ 'margin-right': showTree ? '16px' : '0px'}">
       <!-- 当有左侧树时使用这个布局 -->
       <div class="west-tree-box" :style="{ width: showTree ? '260px' : '0' }">
         <!-- 左侧树 -->
         <div class="west-tree-content">
           <slot name="left"></slot>
         </div>
-        <div class="pick-left" @click="pickLeft" v-show="showTree">
-          <img src="./pick-left.png" alt="" />
+        <div class="pick-left" @click="toggle" :style="{ 'right': showTree ? '-16px' : '0px'}">
+          <img src="./pick-left.png" alt="" v-show="showTree" />
+          <img src="./pick-right.png" alt="" v-show="!showTree" />
         </div>
       </div>
+    </div>
+    <div class="container-right">
+      <div class="container-page-hd">
+        <div class="hd" v-if="hasPageHeader">
+          <slot name="headLeft">
+            <h2>{{ title }}</h2>
+          </slot>
+          <div class="hd-right">
+            <slot name="headRight"></slot>
+          </div>
+        </div>
+        <div class="page-hd-others">
+          <slot name="headOthers"></slot>
+        </div>
+      </div>
+      <div class="bd">
+        <!-- 默认的布局 -->
+        <slot />
+      </div>
+    </div>
+
+    <!-- <div class="bd west-east-wrap" v-if="$slots.left">
+
       <div class="east-content" :class="{ 'no-padding': noPadding }" :style="{ width: showTree ? 'calc(100% - 261px)' : 'calc(100% - 1px)' }">
-        <!-- 右侧主区域 -->
         <slot />
         <div class="pick-right" @click="pickRight" v-show="!showTree">
           <img src="./pick-right.png" alt="" />
@@ -28,9 +43,8 @@
       </div>
     </div>
     <div class="bd" v-else>
-      <!-- 默认的布局 -->
-      <slot />
-    </div>
+
+    </div> -->
   </div>
 </template>
 
@@ -42,10 +56,6 @@ export default {
       // 标题
       type: String,
       default: ''
-    },
-    noPadding: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
@@ -54,14 +64,13 @@ export default {
     }
   },
   computed: {
-    headVisiable() {
-      // 不提供左侧头，右侧头和标题的视为没有头的布局
-      return this.$slots.headLeft || this.$slots.headRight || this.title
+    hasPageHeader() {
+      return this.title || this.$slots.headLeft || this.$slots.headRight
     }
   },
   methods: {
-    pickLeft() {
-      this.showTree = false
+    toggle() {
+      this.showTree = !this.showTree
     },
     pickRight() {
       this.showTree = true

package/packages/newSearchBar/src/newSearchBar.vue

@@ -135,10 +135,9 @@ export default {
 .syNewsearchbar {
   .search-wrap {
     position: relative;
-    height: 64px;
     box-sizing: border-box;
     overflow: hidden;
-    padding: 16px 0;
+    padding-bottom: 16px ;
     min-width: 850px;
     .search-input {
       width: 408px;

package/packages/search-bar/src/search-bar.scss

@@ -7,8 +7,9 @@
 
   @include b(searchbar-container) {
     box-sizing: border-box;
-    padding: 16px 0;
-    height: 64px;
+    // padding: 16px 0;
+    // height: 64px;
+    padding: 20px 0;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -28,9 +29,10 @@
       margin-left: 8px;
       color: $--color-primary;
       font-size: $--font-size-base;
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background: transparent !important;
-        color: #027aff !important;
+        color: $--color-primary !important;
         border-color: transparent !important;
       }
       .el-icon-caret-bottom {
@@ -47,32 +49,40 @@
       width: $--button-width-base;
       height: $--button-height-base;
       font-size: $--button-font-size;
-      border-radius: $--button-border-radius-small;
+      border-radius: $--button-border-radius;
       background-color: $--button-primary-background-color;
-
-      @include when(margin-left-16) {
+      -webkit-border-radius: $--button-border-radius;
+      -moz-border-radius: $--button-border-radius;
+      -ms-border-radius: $--button-border-radius;
+      -o-border-radius: $--button-border-radius;
+       @include when(margin-left-16) {
         margin-left: 16px;
       }
-    }
+}
 
-    @include e(reset) {      
+    @include e(reset) {
       padding: 0;
       width: $--button-width-base;
       height: $--button-height-base;
       font-size: $--button-font-size;
-      border-radius: $--button-border-radius-small;
+      border-radius: $--button-border-radius;
+      -webkit-border-radius: $--button-border-radius;
+      -moz-border-radius: $--button-border-radius;
+      -ms-border-radius: $--button-border-radius;
+      -o-border-radius: $--button-border-radius;
+      
       &:hover {
         color: #606266 !important;
-        border-color: #DCDFE6 !important;
+        border-color: #dcdfe6 !important;
         background: #fff !important;
       }
-    }
+}
 
     @include e(listBtns) {
       position: absolute;
-      right: 0;
+      right: 20px;
       .el-button--text {
-        color: #027aff;
+        color: $--color-primary;
       }
     }
   }
@@ -214,8 +224,12 @@
       width: $--button-width-base;
       height: $--button-height-base;
       font-size: $--button-font-size;
-      border-radius: $--button-border-radius-small;
-    }
+      border-radius: $--button-border-radius;
+      -webkit-border-radius: $--button-border-radius;
+      -moz-border-radius: $--button-border-radius;
+      -ms-border-radius: $--button-border-radius;
+      -o-border-radius: $--button-border-radius;
+}
 
     @include e(condition) {
       margin: 0 16px;

package/packages/search-tree/src/zTree.vue

@@ -263,8 +263,9 @@ export default {
   flex-direction: column;
 }
 .ztree-search {
-  height: 40px;
-  padding-top: 10px;
+  height: 30px;
+  padding-top: 4px;
+  margin-bottom: 12px;
 }
 .ztree-search-wrapper {
   height: 30px;
@@ -307,14 +308,16 @@ export default {
   overflow-y: auto;
 }
 .empty {
-  color: #999;
-  padding-left: 40px;
+    width: 200px;
+    color: #888;
+    text-align: center;
+    padding-top: 40px;
 }
 /* beauty ztree! */
 .ztree {
   text-align: left;
   font-size: 14px;
-  padding-left: 5px;
+  padding-left: 8px;
 }
 /* .ztree >>> .node-iconfont {
   font-size: 20px;

package/packages/select-project/src/select-project.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="sy-select-project">
-    <el-popover placement="bottom" trigger="click" v-model="visible" :disabled="disabled">
-      <div style="height: 60vh;">
+    <el-popover placement="bottom" trigger="click"  v-model="visible" :disabled="disabled">
+      <div style="height: 60vh;max-width:215px;">
         <sy-search-tree
           ref="ztreeRef"
           :setting="ztreeSetting"
@@ -13,8 +13,9 @@
           :beforeClickFn="beforeClickFn"
         />
       </div>
-      <a slot="reference" style="cursor: pointer;"
-        >{{ projectInfo[ztreeSetting.data.key.name] }}<i class="el-icon-caret-bottom el-icon--right drop-icon" :class="{ isOpen: visible }"></i
+      <a slot="reference" class="node-name">
+        <img src="../h.png" alt="">
+        {{ projectInfo[ztreeSetting.data.key.name] }}<i class="el-icon-caret-bottom drop-icon" :class="{ isOpen: visible }"></i
       ></a>
     </el-popover>
   </div>
@@ -144,9 +145,38 @@ export default {
   height: 100%;
   color: $header-color;
   font-weight: 700;
+  .node-name{
+    display: inline-block;
+    cursor: pointer;
+    min-width: 200px;
+    max-width: 215px;
+    height: 32px;
+    line-height: 30px;
+    background: #FFFFFF;
+    border-radius: 4px ;
+    color: #3A3F48;
+    font-weight: bold;
+    border: 1px solid #E5E5E5;
+    box-sizing: border-box;
+    padding:0 25px 0 40px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    img{
+      width: 17px;
+      height: 17px;
+      position: absolute;
+      top:7px;
+      left: 12px;
+    }
+  }
 
   .drop-icon {
     transition: all 0.3s linear;
+    position: absolute;
+    right: 12px;
+    top: 8px;
     &.isOpen {
       transform: rotateZ(180deg);
     }

package/packages/styles/common/variables.scss

@@ -67,6 +67,7 @@ $--button-font-weight                                           : normal !defaul
 $--button-font-size                                             : 12px !default;
 $--button-font-size-large                                       : 14px !default;
 $--button-border-radius                                         : 4px !default;
+$--button-border-radius8                                        : 8px !default;
 $--button-border-radius-small                                   : 2px !default;
 
 /* Input