xianniu-ui 0.9.6 → 0.9.8

package/lib/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>xianniu-ui demo</title>
+<script src="./xianniu-ui.umd.js"></script>
+
+<link rel="stylesheet" href="./xianniu-ui.css">
+
+
+<script>
+console.log(xianniu-ui)
+</script>

package/lib/style/amount.css

@@ -0,0 +1 @@
+.xn-amount,.xn-amount-prefix,.xn-amount-suffix{font-style:normal;font-size:inherit}.xn-amount{line-height:inherit;color:inherit;text-decoration:inherit}

package/lib/style/basic.css

@@ -0,0 +1 @@
+.text-ell-1,.text-ell-2{overflow:hidden;text-overflow:ellipsis}:export{menuText:#4A4A53;menuActiveText:#FF745C;subMenuActiveText:#FF745C;menuBg:#fff;menuHover:#FFEDEA;subMenuBg:#fff;subMenuHover:#FFEDEA;sideBarWidth:200px}.text-primary{color:#ff745c!important}.text-success{color:#52c41a!important}.text-danger{color:#ff4d4f!important}.text-warning{color:#faad14!important}.text-blue{color:#5e9dff!important}.text-red{color:#ff4d4f!important}.text-yellow{color:#ffb500!important}.text-green{color:#52c41a!important}.text-grey{color:#c1c1c9!important}.text-orange{color:#ff8c00!important}.fw-1{font-weight:100!important}.fw-2{font-weight:200!important}.fw-3{font-weight:300!important}.fw-4{font-weight:400!important}.fw-5{font-weight:500!important}.fw-6{font-weight:600!important}.fw-7{font-weight:700!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.fz-0{font-size:0!important}.m-1{margin:1px!important}.mt-1{margin-top:1px!important}.mb-1{margin-bottom:1px!important}.ml-1{margin-left:1px!important}.mr-1{margin-right:1px!important}.p-1{padding:1px!important}.pt-1{padding-top:1px!important}.pb-1{padding-bottom:1px!important}.pl-1{padding-left:1px!important}.pr-1{padding-right:1px!important}.fz-1{font-size:1px!important}.m-2{margin:2px!important}.mt-2{margin-top:2px!important}.mb-2{margin-bottom:2px!important}.ml-2{margin-left:2px!important}.mr-2{margin-right:2px!important}.p-2{padding:2px!important}.pt-2{padding-top:2px!important}.pb-2{padding-bottom:2px!important}.pl-2{padding-left:2px!important}.pr-2{padding-right:2px!important}.fz-2{font-size:2px!important}.m-3{margin:3px!important}.mt-3{margin-top:3px!important}.mb-3{margin-bottom:3px!important}.ml-3{margin-left:3px!important}.mr-3{margin-right:3px!important}.p-3{padding:3px!important}.pt-3{padding-top:3px!important}.pb-3{padding-bottom:3px!important}.pl-3{padding-left:3px!important}.pr-3{padding-right:3px!important}.fz-3{font-size:3px!important}.m-4{margin:4px!important}.mt-4{margin-top:4px!important}.mb-4{margin-bottom:4px!important}.ml-4{margin-left:4px!important}.mr-4{margin-right:4px!important}.p-4{padding:4px!important}.pt-4{padding-top:4px!important}.pb-4{padding-bottom:4px!important}.pl-4{padding-left:4px!important}.pr-4{padding-right:4px!important}.fz-4{font-size:4px!important}.m-5{margin:5px!important}.mt-5{margin-top:5px!important}.mb-5{margin-bottom:5px!important}.ml-5{margin-left:5px!important}.mr-5{margin-right:5px!important}.p-5{padding:5px!important}.pt-5{padding-top:5px!important}.pb-5{padding-bottom:5px!important}.pl-5{padding-left:5px!important}.pr-5{padding-right:5px!important}.fz-5{font-size:5px!important}.m-6{margin:6px!important}.mt-6{margin-top:6px!important}.mb-6{margin-bottom:6px!important}.ml-6{margin-left:6px!important}.mr-6{margin-right:6px!important}.p-6{padding:6px!important}.pt-6{padding-top:6px!important}.pb-6{padding-bottom:6px!important}.pl-6{padding-left:6px!important}.pr-6{padding-right:6px!important}.fz-6{font-size:6px!important}.m-7{margin:7px!important}.mt-7{margin-top:7px!important}.mb-7{margin-bottom:7px!important}.ml-7{margin-left:7px!important}.mr-7{margin-right:7px!important}.p-7{padding:7px!important}.pt-7{padding-top:7px!important}.pb-7{padding-bottom:7px!important}.pl-7{padding-left:7px!important}.pr-7{padding-right:7px!important}.fz-7{font-size:7px!important}.m-8{margin:8px!important}.mt-8{margin-top:8px!important}.mb-8{margin-bottom:8px!important}.ml-8{margin-left:8px!important}.mr-8{margin-right:8px!important}.p-8{padding:8px!important}.pt-8{padding-top:8px!important}.pb-8{padding-bottom:8px!important}.pl-8{padding-left:8px!important}.pr-8{padding-right:8px!important}.fz-8{font-size:8px!important}.m-9{margin:9px!important}.mt-9{margin-top:9px!important}.mb-9{margin-bottom:9px!important}.ml-9{margin-left:9px!important}.mr-9{margin-right:9px!important}.p-9{padding:9px!important}.pt-9{padding-top:9px!important}.pb-9{padding-bottom:9px!important}.pl-9{padding-left:9px!important}.pr-9{padding-right:9px!important}.fz-9{font-size:9px!important}.m-10{margin:10px!important}.mt-10{margin-top:10px!important}.mb-10{margin-bottom:10px!important}.ml-10{margin-left:10px!important}.mr-10{margin-right:10px!important}.p-10{padding:10px!important}.pt-10{padding-top:10px!important}.pb-10{padding-bottom:10px!important}.pl-10{padding-left:10px!important}.pr-10{padding-right:10px!important}.fz-10{font-size:10px!important}.m-11{margin:11px!important}.mt-11{margin-top:11px!important}.mb-11{margin-bottom:11px!important}.ml-11{margin-left:11px!important}.mr-11{margin-right:11px!important}.p-11{padding:11px!important}.pt-11{padding-top:11px!important}.pb-11{padding-bottom:11px!important}.pl-11{padding-left:11px!important}.pr-11{padding-right:11px!important}.fz-11{font-size:11px!important}.m-12{margin:12px!important}.mt-12{margin-top:12px!important}.mb-12{margin-bottom:12px!important}.ml-12{margin-left:12px!important}.mr-12{margin-right:12px!important}.p-12{padding:12px!important}.pt-12{padding-top:12px!important}.pb-12{padding-bottom:12px!important}.pl-12{padding-left:12px!important}.pr-12{padding-right:12px!important}.fz-12{font-size:12px!important}.m-13{margin:13px!important}.mt-13{margin-top:13px!important}.mb-13{margin-bottom:13px!important}.ml-13{margin-left:13px!important}.mr-13{margin-right:13px!important}.p-13{padding:13px!important}.pt-13{padding-top:13px!important}.pb-13{padding-bottom:13px!important}.pl-13{padding-left:13px!important}.pr-13{padding-right:13px!important}.fz-13{font-size:13px!important}.m-14{margin:14px!important}.mt-14{margin-top:14px!important}.mb-14{margin-bottom:14px!important}.ml-14{margin-left:14px!important}.mr-14{margin-right:14px!important}.p-14{padding:14px!important}.pt-14{padding-top:14px!important}.pb-14{padding-bottom:14px!important}.pl-14{padding-left:14px!important}.pr-14{padding-right:14px!important}.fz-14{font-size:14px!important}.m-15{margin:15px!important}.mt-15{margin-top:15px!important}.mb-15{margin-bottom:15px!important}.ml-15{margin-left:15px!important}.mr-15{margin-right:15px!important}.p-15{padding:15px!important}.pt-15{padding-top:15px!important}.pb-15{padding-bottom:15px!important}.pl-15{padding-left:15px!important}.pr-15{padding-right:15px!important}.fz-15{font-size:15px!important}.m-16{margin:16px!important}.mt-16{margin-top:16px!important}.mb-16{margin-bottom:16px!important}.ml-16{margin-left:16px!important}.mr-16{margin-right:16px!important}.p-16{padding:16px!important}.pt-16{padding-top:16px!important}.pb-16{padding-bottom:16px!important}.pl-16{padding-left:16px!important}.pr-16{padding-right:16px!important}.fz-16{font-size:16px!important}.m-17{margin:17px!important}.mt-17{margin-top:17px!important}.mb-17{margin-bottom:17px!important}.ml-17{margin-left:17px!important}.mr-17{margin-right:17px!important}.p-17{padding:17px!important}.pt-17{padding-top:17px!important}.pb-17{padding-bottom:17px!important}.pl-17{padding-left:17px!important}.pr-17{padding-right:17px!important}.fz-17{font-size:17px!important}.m-18{margin:18px!important}.mt-18{margin-top:18px!important}.mb-18{margin-bottom:18px!important}.ml-18{margin-left:18px!important}.mr-18{margin-right:18px!important}.p-18{padding:18px!important}.pt-18{padding-top:18px!important}.pb-18{padding-bottom:18px!important}.pl-18{padding-left:18px!important}.pr-18{padding-right:18px!important}.fz-18{font-size:18px!important}.m-19{margin:19px!important}.mt-19{margin-top:19px!important}.mb-19{margin-bottom:19px!important}.ml-19{margin-left:19px!important}.mr-19{margin-right:19px!important}.p-19{padding:19px!important}.pt-19{padding-top:19px!important}.pb-19{padding-bottom:19px!important}.pl-19{padding-left:19px!important}.pr-19{padding-right:19px!important}.fz-19{font-size:19px!important}.m-20{margin:20px!important}.mt-20{margin-top:20px!important}.mb-20{margin-bottom:20px!important}.ml-20{margin-left:20px!important}.mr-20{margin-right:20px!important}.p-20{padding:20px!important}.pt-20{padding-top:20px!important}.pb-20{padding-bottom:20px!important}.pl-20{padding-left:20px!important}.pr-20{padding-right:20px!important}.fz-20{font-size:20px!important}.m-21{margin:21px!important}.mt-21{margin-top:21px!important}.mb-21{margin-bottom:21px!important}.ml-21{margin-left:21px!important}.mr-21{margin-right:21px!important}.p-21{padding:21px!important}.pt-21{padding-top:21px!important}.pb-21{padding-bottom:21px!important}.pl-21{padding-left:21px!important}.pr-21{padding-right:21px!important}.fz-21{font-size:21px!important}.m-22{margin:22px!important}.mt-22{margin-top:22px!important}.mb-22{margin-bottom:22px!important}.ml-22{margin-left:22px!important}.mr-22{margin-right:22px!important}.p-22{padding:22px!important}.pt-22{padding-top:22px!important}.pb-22{padding-bottom:22px!important}.pl-22{padding-left:22px!important}.pr-22{padding-right:22px!important}.fz-22{font-size:22px!important}.m-23{margin:23px!important}.mt-23{margin-top:23px!important}.mb-23{margin-bottom:23px!important}.ml-23{margin-left:23px!important}.mr-23{margin-right:23px!important}.p-23{padding:23px!important}.pt-23{padding-top:23px!important}.pb-23{padding-bottom:23px!important}.pl-23{padding-left:23px!important}.pr-23{padding-right:23px!important}.fz-23{font-size:23px!important}.m-24{margin:24px!important}.mt-24{margin-top:24px!important}.mb-24{margin-bottom:24px!important}.ml-24{margin-left:24px!important}.mr-24{margin-right:24px!important}.p-24{padding:24px!important}.pt-24{padding-top:24px!important}.pb-24{padding-bottom:24px!important}.pl-24{padding-left:24px!important}.pr-24{padding-right:24px!important}.fz-24{font-size:24px!important}.m-25{margin:25px!important}.mt-25{margin-top:25px!important}.mb-25{margin-bottom:25px!important}.ml-25{margin-left:25px!important}.mr-25{margin-right:25px!important}.p-25{padding:25px!important}.pt-25{padding-top:25px!important}.pb-25{padding-bottom:25px!important}.pl-25{padding-left:25px!important}.pr-25{padding-right:25px!important}.fz-25{font-size:25px!important}.m-26{margin:26px!important}.mt-26{margin-top:26px!important}.mb-26{margin-bottom:26px!important}.ml-26{margin-left:26px!important}.mr-26{margin-right:26px!important}.p-26{padding:26px!important}.pt-26{padding-top:26px!important}.pb-26{padding-bottom:26px!important}.pl-26{padding-left:26px!important}.pr-26{padding-right:26px!important}.fz-26{font-size:26px!important}.m-27{margin:27px!important}.mt-27{margin-top:27px!important}.mb-27{margin-bottom:27px!important}.ml-27{margin-left:27px!important}.mr-27{margin-right:27px!important}.p-27{padding:27px!important}.pt-27{padding-top:27px!important}.pb-27{padding-bottom:27px!important}.pl-27{padding-left:27px!important}.pr-27{padding-right:27px!important}.fz-27{font-size:27px!important}.m-28{margin:28px!important}.mt-28{margin-top:28px!important}.mb-28{margin-bottom:28px!important}.ml-28{margin-left:28px!important}.mr-28{margin-right:28px!important}.p-28{padding:28px!important}.pt-28{padding-top:28px!important}.pb-28{padding-bottom:28px!important}.pl-28{padding-left:28px!important}.pr-28{padding-right:28px!important}.fz-28{font-size:28px!important}.m-29{margin:29px!important}.mt-29{margin-top:29px!important}.mb-29{margin-bottom:29px!important}.ml-29{margin-left:29px!important}.mr-29{margin-right:29px!important}.p-29{padding:29px!important}.pt-29{padding-top:29px!important}.pb-29{padding-bottom:29px!important}.pl-29{padding-left:29px!important}.pr-29{padding-right:29px!important}.fz-29{font-size:29px!important}.m-30{margin:30px!important}.mt-30{margin-top:30px!important}.mb-30{margin-bottom:30px!important}.ml-30{margin-left:30px!important}.mr-30{margin-right:30px!important}.p-30{padding:30px!important}.pt-30{padding-top:30px!important}.pb-30{padding-bottom:30px!important}.pl-30{padding-left:30px!important}.pr-30{padding-right:30px!important}.fz-30{font-size:30px!important}.text-ell-1{white-space:nowrap}.text-ell-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-left{text-align:left!important}

package/lib/style/card.css

@@ -0,0 +1 @@
+.xn-card{background-color:#fff;padding:0 30px}.xn-card-header{padding:20px 0 13px;border-bottom:1px solid #f2f2f2}.xn-card-header h3{margin:0;padding:0;font-size:18px;font-weight:500;color:#202131;line-height:25px}

package/lib/style/city.css

@@ -0,0 +1 @@
+.xn-city{width:100%}

package/lib/style/date.css

@@ -0,0 +1 @@
+.xn-date .el-range-editor.el-input__inner{padding:4px 10px}

package/lib/style/description.css

@@ -0,0 +1 @@
+.xn-desc{width:100%;background-color:#fff}.xn-desc+.xn-desc{margin-top:20px}.xn-desc-header{padding:10px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;border-bottom:1px solid #e8eaec}.xn-desc-border{border:1px solid #e6ebf5;border-radius:4px}.xn-desc-title{margin:0;color:#ff745c;font-weight:700;font-size:15px;line-height:1.5715}.xn-desc__row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;border-radius:2px;width:100%}.xn-desc__row>:not([class*=xn-desc-item]){width:100%}.xn-desc-item{margin:10px 0}.xn-desc-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:rgba(0,0,0,.65);font-size:14px;line-height:1.5;width:100%;height:100%}.xn-desc-item__content.small .xn-desc-item__label,.xn-desc-item__content.small .xn-desc-item__value{padding:10px 14px}.xn-desc-item__label{text-align:right;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;color:#909097;font-weight:400;font-size:14px;line-height:1.5;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:0 10px 0 0}.xn-desc-item__label.has-colon::after{content:":";position:relative;top:-1.5px}.xn-desc-item__value{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;word-break:break-all;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;color:#202131}.xn-desc-item__value span{color:#aaa}

package/lib/style/ellipsis.css

@@ -0,0 +1 @@
+.xn-ellipsis{white-space:pre-wrap;word-break:break-word;line-height:1.6;font-size:14px;color:inherit}.xn-ellipsis__action{color:#ff745c;cursor:pointer}.xn-ellipsis__tooltip{max-width:300px!important}

package/lib/style/flex.css

@@ -0,0 +1 @@
+.flex{display:-webkit-box;display:-webkit-flexbox;display:-ms-flexbox;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flex-direction-default,.flex-direction-row{-webkit-box-orient:horizontal;-webkit-box-direction:inherit;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-direction-col{-webkit-box-orient:vertical;-webkit-box-direction:inherit;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-direction-row-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-moz-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex-direction-col-reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-wrap-no{-ms-flex-wrap:none;flex-wrap:nowrap}.flex-wrap-yes{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-basis-1{-ms-flex-preferred-size:1;flex-basis:1}.flex-grow-1{-webkit-box-flex:1;-moz-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flex-shrink-1{-ms-flex-negative:1;flex-shrink:1}.flex-order-1{-webkit-box-ordinal-group:2;-moz-order:1;-ms-flex-order:1;order:1}.justify-content-center{-webkit-box-pack:center;-ms-flex-pack:center;-moz-justify-content:center;justify-content:center}.justify-content-between{-webkit-box-pack:justify;-ms-flex-pack:justify;-moz-justify-content:space-between;justify-content:space-between}.justify-content-end{-webkit-box-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;justify-content:flex-end}.align-items-center{-webkit-box-align:center;-ms-flex-align:center;-moz-align-items:center;align-items:center}.align-self-center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.align-content-center{-ms-flex-line-pack:center;align-content:center}

package/lib/style/footer.css

@@ -0,0 +1 @@
+.xn-footer{position:relative;height:60px}.xn-footer-main{position:fixed;bottom:0;right:0;height:60px;width:calc(100% - 200px);background-color:#fff;line-height:60px;padding:0 15px;z-index:1000}

package/lib/style/import.css

@@ -0,0 +1 @@
+.xn-import .xn-import-upload .el-upload,.xn-import .xn-import-upload .el-upload .el-upload-dragger{width:100%}.xn-import .xn-import-upload .el-upload .el-upload-dragger .xn-import-trigger{width:100%;height:100%;border-radius:5px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}.xn-import .xn-import-upload .el-upload .el-upload-dragger .xn-import-trigger.is-disabled{background-color:#e9e9eb;color:#bcbec2;cursor:not-allowed}.xn-import .xn-import-upload .el-upload .el-upload-dragger .xn-import-trigger__icon{margin-top:0;font-size:60px;color:#c0c4cc}.xn-import .xn-import-upload .el-upload .el-upload-dragger .xn-import-trigger__text{color:#606266;font-size:14px}.xn-import .xn-import-upload .el-upload .el-upload-dragger .xn-import-trigger__text em{color:#ff745c;font-style:normal}.xn-import .xn-import-upload-desc{color:#909399}

package/lib/style/theme/element-ui.scss

@@ -0,0 +1,18 @@
+.el-descriptions {
+    .el-descriptions-item__label:not(.is-bordered-label) {
+        color: #909097;
+    }
+    &--small {
+        font-size: 14px;
+    }
+}
+.el-table {
+    tr.cus-table-header {
+        th {
+            background-color: #fafafa;
+            padding: 5px 0;
+            font-weight: 400;
+            color: #202131;
+        }
+    }
+}

package/lib/style/theme/element-variables.scss

@@ -0,0 +1,26 @@
+
+/* theme color */
+@import './theme.scss';
+
+$--button-font-weight: 400;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+$--box-shadow-light: none;
+$--fade-linear-transition:none;
+$--fade-transition:none;
+// $--table-border-color:#f00;
+$--table-border:1px solid #f0f0f0;
+// $--table-header-background-color: #fafafa;
+
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "element-ui/packages/theme-chalk/src/index";
+
+
+:export {
+  theme: $--color-primary;
+}

package/lib/style/theme/index.scss

@@ -0,0 +1,6 @@
+@import './element-variables.scss';
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './sidebar.scss';
+@import './element-ui.scss';

package/lib/style/theme/mixin.scss

@@ -0,0 +1,270 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+
+  @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}
+
+
+
+// flex
+// @ref http://w3.org/tr/css3-flexbox/#flex-containers
+@mixin flex($display: block) {
+  @if ($display == block) {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flexbox;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+  } @else {
+    display: -webkit-inline-flex;
+    display: inline-flex;
+  }
+}
+
+//----------------------------------------------------------------------
+
+// flex 方向
+// 取值: row | row-reverse | column | column-reverse
+// 默认：row
+@mixin flex-direction($flex-direction: row) {
+  $box-orient: horizontal;
+  $box-direction: inherit;
+
+  @if ($flex-direction == column) {
+    $box-orient: vertical;
+    $box-direction: inherit;
+  } @else if ($flex-direction == column-reverse) {
+    $box-orient: vertical;
+    $box-direction: reverse;
+  } @else if ($flex-direction == row-reverse) {
+    $box-orient: horizontal;
+    $box-direction: reverse;
+  } @else {
+    $direction: row;
+  }
+
+  -webkit-box-orient: $box-orient;
+  -moz-box-orient: $box-orient;
+  -webkit-box-direction: $box-direction;
+  -moz-box-direction: $box-direction;
+  -webkit-flex-direction: $flex-direction;
+  -moz-flex-direction: $flex-direction;
+  -ms-flex-direction: $flex-direction;
+  flex-direction: $flex-direction;
+}
+
+//----------------------------------------------------------------------
+
+// flex 换行
+// 取值: nowrap | wrap | wrap-reverse
+// 默认: nowrap
+@mixin flex-wrap($value: nowrap) {
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+
+  @if ($value == nowrap) {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+
+  flex-wrap: $value;
+}
+
+//----------------------------------------------------------------------
+
+// 扩展收缩基准值
+// 默认: auto，数值
+@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  -moz-flex-basis: $value;
+  -ms-flex-preferred-size: $value;
+  flex-basis: $value;
+}
+
+//----------------------------------------------------------------------
+
+// flex 扩展值
+// 默认: 0
+@mixin flex-grow($int: 0) {
+  -webkit-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -moz-flex-grow: $int;
+  -ms-flex-positive: $int;
+  flex-grow: $int;
+}
+
+//----------------------------------------------------------------------
+
+// flex 收缩值
+// 默认: 1
+@mixin flex-shrink($int: 1) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex-negative: $int;
+  flex-shrink: $int;
+}
+
+//----------------------------------------------------------------------
+
+// flex 排序
+// 默认: 0
+@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -moz-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+//----------------------------------------------------------------------
+
+// flex 主轴对齐
+// 取值: flex-start | flex-end | center | space-between | space-around
+// 默认: flex-start
+@mixin justify-content($value: flex-start) {
+  @if ($value == flex-start) {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if ($value == flex-end) {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if ($value == space-between) {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if ($value == space-around) {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
+
+//----------------------------------------------------------------------
+
+// flex 交叉轴对齐方式
+// 取值：flex-start | flex-end | center | baseline | stretch
+// 默认：stretch
+@mixin align-items($value: stretch) {
+  @if ($value == flex-start) {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if ($value == flex-end) {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+  }
+
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+}
+
+//----------------------------------------------------------------------
+
+// flex 自身在交叉轴对齐方式
+//
+// 取值：auto | flex-start | flex-end | center | baseline | stretch
+// 默认：auto
+@mixin align-self($value: auto) {
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+
+  @if ($value == flex-start) {
+    -ms-flex-item-align: start;
+  } @else if ($value == flex-end) {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+
+  align-self: $value;
+}
+
+//----------------------------------------------------------------------
+
+// flex 内容在交叉轴上的对齐方式
+// 取值：flex-start | flex-end | center | space-between | space-around | stretch
+// 默认：stretch
+@mixin align-content($value: stretch) {
+  -webkit-align-content: $value;
+  -moz-align-content: $value;
+
+  @if ($value == flex-start) {
+    -ms-flex-line-pack: start;
+  } @else if $value == (flex-end) {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+
+  align-content: $value;
+}

package/lib/style/theme/sidebar.scss

@@ -0,0 +1,271 @@
+#app {
+
+    .main-container {
+      min-height: 100%;
+      transition: margin-left .28s;
+      margin-left: $sideBarWidth;
+      position: relative;
+      background-color: #f3f3f3;
+    }
+  
+    .sidebar-container {
+      transition: width 0.28s;
+      width: $sideBarWidth !important;
+      background-color: $menuBg;
+      height: 100%;
+      position: fixed;
+      font-size: 0px;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1001;
+      overflow: hidden;
+  
+      // reset element-ui css
+      .horizontal-collapse-transition {
+        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+      }
+  
+      .scrollbar-wrapper {
+        overflow-x: hidden !important;
+      }
+  
+      .el-scrollbar__bar.is-vertical {
+        right: 0px;
+      }
+  
+      .el-scrollbar {
+        height: 100%
+      }
+  
+      &.has-logo {
+        .el-scrollbar {
+          // height: calc(100% - 100px);
+          height: 100%;
+        }
+      }
+  
+      .is-horizontal {
+        display: none;
+      }
+  
+      a {
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+      }
+  
+      .svg-icon {
+        margin-right: 16px;
+      }
+  
+      .sub-el-icon {
+        margin-right: 12px;
+        margin-left: -2px;
+      }
+  
+      .el-menu {
+        border: none;
+        height: 100%;
+        width: 100% !important;
+        &-item{
+          position: relative;
+          &::before{
+            content:"";
+            position: absolute;
+            left: 0;
+            height: 100%;
+            width: 3px;
+            background-color: transparent;
+            transition: all .3s ease-in-out;
+          }
+          &.is-active.submenu-title-noDropdown{
+            background-color: $subMenuActiveBg !important;
+            &::before{
+              background-color:  $menuActiveText !important;
+              z-index: 1;
+            }
+          }
+        }
+      }
+  
+      // menu hover
+      .submenu-title-noDropdown,
+      .el-submenu__title {
+        &:hover {
+          background-color: $menuHover !important;
+          color: $menuActiveText !important;
+        }
+      }
+  
+      .is-active>.el-submenu__title {
+        color: $subMenuActiveText !important;
+        background-color: $subMenuActiveBg !important;
+      }
+      .el-submenu{
+        // border-left: 3px solid transparent;
+        position: relative;
+        &::before{
+          content:"";
+          position: absolute;
+          left: 0;
+          height: 100%;
+          width: 3px;
+          background-color: transparent;
+          transition: all .3s ease-in-out;
+        }
+        &.is-active.is-opened{
+          // border-left-color: $menuActiveText;
+          &::before{
+            background-color:  $menuActiveText !important;
+            z-index: 1;
+          }
+          // border-left: 3px solid $menuActiveText;
+        }
+      }
+      & .nest-menu .el-submenu>.el-submenu__title,
+      & .el-submenu .el-menu-item {
+        min-width: $sideBarWidth !important;
+        background-color: $subMenuBg !important;
+        &:hover {
+          background-color: $subMenuHover !important;
+          color: $menuActiveText !important;
+        }
+  
+      }
+    }
+  
+    .hideSidebar {
+      .sidebar-container {
+        width: 54px !important;
+      }
+  
+      .main-container {
+        margin-left: 54px;
+      }
+  
+      .submenu-title-noDropdown {
+        padding: 0 !important;
+        position: relative;
+  
+        .el-tooltip {
+          padding: 0 !important;
+  
+          .svg-icon {
+            margin-left: 20px;
+          }
+  
+          .sub-el-icon {
+            margin-left: 19px;
+          }
+        }
+      }
+  
+      .el-submenu {
+        overflow: hidden;
+        
+        &>.el-submenu__title {
+          padding: 0 !important;
+  
+          .svg-icon {
+            margin-left: 20px;
+          }
+  
+          .sub-el-icon {
+            margin-left: 19px;
+          }
+  
+          .el-submenu__icon-arrow {
+            display: none;
+          }
+        }
+      }
+  
+      .el-menu--collapse {
+        .el-submenu {
+          &>.el-submenu__title {
+            &>span {
+              height: 0;
+              width: 0;
+              overflow: hidden;
+              visibility: hidden;
+              display: inline-block;
+            }
+          }
+        }
+      }
+    }
+    
+    .el-menu--collapse .el-menu .el-submenu {
+      min-width: $sideBarWidth !important;
+    }
+  
+    // mobile responsive
+    .mobile {
+      .main-container {
+        margin-left: 0px;
+      }
+  
+      .sidebar-container {
+        transition: transform .28s;
+        width: $sideBarWidth !important;
+      }
+  
+      &.hideSidebar {
+        .sidebar-container {
+          pointer-events: none;
+          transition-duration: 0.3s;
+          transform: translate3d(-$sideBarWidth, 0, 0);
+        }
+      }
+    }
+  
+    .withoutAnimation {
+  
+      .main-container,
+      .sidebar-container {
+        transition: none;
+      }
+    }
+  }
+  
+  // when menu collapsed
+  .el-menu--vertical {
+    &>.el-menu {
+      .svg-icon {
+        margin-right: 16px;
+      }
+      .sub-el-icon {
+        margin-right: 12px;
+        margin-left: -2px;
+      }
+    }
+  
+    .nest-menu .el-submenu>.el-submenu__title,
+    .el-menu-item {
+      &:hover {
+        // you can use $subMenuHover
+        background-color: $menuHover !important;
+      }
+    }
+  
+    // the scroll bar appears when the subMenu is too long
+    >.el-menu--popup {
+      max-height: 100vh;
+      overflow-y: auto;
+  
+      &::-webkit-scrollbar-track-piece {
+        background: #d3dce6;
+      }
+  
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+  
+      &::-webkit-scrollbar-thumb {
+        background: #99a9bf;
+        border-radius: 20px;
+      }
+    }
+  }
+  

package/lib/style/theme/theme.scss

@@ -0,0 +1,5 @@
+$--color-primary: #ff745c;
+$--color-success: #52c41a;
+$--color-warning: #faad14;
+$--color-danger: #ff4d4f;
+