xianniu-ui 0.9.1 → 0.9.2

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;
+

package/lib/style/theme/transition.scss

@@ -0,0 +1,52 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .3s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .3s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .3s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+.el-list-enter-active,
+.el-list-leave-active {
+  transition: none !important;
+}

package/lib/style/theme/variables.scss

@@ -0,0 +1,41 @@
+// base color
+$light-blue:#3A71A8;
+
+$pink: #E65D6E;
+$panGreen: #30B08F;
+
+// sidebar
+$menuText:#4A4A53;
+$menuActiveText:#FF745C;
+$subMenuActiveText:#FF745C;
+$subMenuActiveBg:#FFEDEA;
+
+$menuBg:#fff;
+$menuHover:#FFEDEA;
+
+$subMenuBg:#fff;
+$subMenuHover:#FFEDEA;
+
+$sideBarWidth: 200px;
+
+
+
+$grey: #c1c1c9;
+$blue: #5e9dff;
+$red: #ff4d4f;
+$green: #52c41a;
+$yellow: #ffb500;
+$orange: #ff8c00;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}

package/lib/style/tip.css

@@ -0,0 +1 @@
+.xn-tip{padding:12px;font-weight:700;margin-bottom:10px}.xn-tip:last-child{margin-bottom:0}.xn-tip.xn-tip--primary{background:rgba(255,116,92,.1);border-left:5px solid #FF745C}.xn-tip.xn-tip--danger{background:rgba(255,77,79,.1);border-left:5px solid #FF4D4F}.xn-tip.xn-tip--warning{background:rgba(250,173,20,.1);border-left:5px solid #FAAD14}.xn-tip.xn-tip--info{background:rgba(144,147,153,.1);border-left:5px solid #909399}.xn-tip.xn-tip--success{background:rgba(82,196,26,.1);border-left:5px solid #52C41A}

package/lib/style/tree.css

@@ -0,0 +1 @@
+@charset "UTF-8";.xn-tree{width:100%}.xn-tree .el-tree-node{position:relative;z-index:9;padding-left:16px}.xn-tree .el-tree-node__expand-icon.is-leaf{display:none}.xn-tree .el-tree-node__children{padding-left:16px}.xn-tree .el-tree-node :last-child::before{height:38px}.xn-tree .el-tree>.el-tree-node::before{border-left:none}.xn-tree .el-tree>.el-tree-node:after{border-top:none}.xn-tree .el-tree-node::before,.xn-tree .el-tree-node:after{content:"";left:-4px;position:absolute;right:auto;border-width:1px}.xn-tree .el-tree-node::before{border-left:1px dashed #dcdfe6;bottom:0;height:100%;top:-26px;width:1px}.xn-tree .el-tree-node:after{border-top:1px dashed #dcdfe6;height:20px;top:12px;width:18px}.xn-tree .el-tree .el-tree-node__expand-icon.expanded{-webkit-transform:rotate(0);transform:rotate(0)}.xn-tree .el-tree .el-icon-caret-right::before{content:"";font-size:16px;color:#ff745c;position:absolute;left:-4px;top:-3px}.xn-tree .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right::before{content:"";font-size:16px;color:#ff745c;position:absolute;left:-4px;top:-3px}.xn-tree .el-tree-node__content{padding-left:8px!important}.xn-tree .el-tree-node__content:hover{background-color:#fff}

package/lib/style/upload.css

@@ -0,0 +1 @@
+.xn-idcard .tip,.xn-upload-list__item-file{-webkit-box-orient:vertical;-webkit-box-direction:normal}.xn-upload .el-upload-list__item.is-success:hover .el-upload-list__item-status-label{display:none!important}.xn-upload.is-hidden .el-upload.el-upload--picture-card{display:none}.xn-upload.is-idcard{overflow:hidden}.xn-upload.is-idcard .el-upload--picture-card{width:100%;height:100%;overflow:hidden}.xn-upload.is-idcard .el-upload-list--picture-card .el-upload-list__item{width:100%;height:100%;line-height:normal}.xn-upload:not(.is-idcard) .el-upload-list.el-upload-list--picture-card .el-upload-list__item,.xn-upload:not(.is-idcard) .el-upload.el-upload--picture-card .el-upload-list__item{width:80px;height:80px}.xn-upload-list__item-file{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px 0}.xn-upload-list__item-file .annex{color:#ccc;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;line-height:20px}.xn-upload-list__item-file .annex .el-icon{font-size:18px}.xn-upload-list__item-file .annex .label{padding-left:5px}.xn-upload-list__item-file .file-name{line-height:20px;font-size:12px;color:#ccc;padding:0 6px;text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.xn-upload.is-disabled .el-upload.el-upload--picture-card{cursor:not-allowed;background-color:#f4f4f5}.xn-upload.is-disabled .el-upload.el-upload--picture-card:hover{border-color:#c0ccda;color:#c0ccda}.xn-upload.is-disabled .el-upload.el-upload--picture-card .upload-limit i,.xn-upload.is-disabled .el-upload.el-upload--picture-card .upload-limit span{color:#bcbec2}.xn-upload:not(.is-idcard) .el-upload-list.el-upload-list--picture-card .el-upload-list__item img.el-upload-list__item-thumbnail{-o-object-fit:cover;object-fit:cover}.xn-upload:not(.is-idcard) .el-upload.el-upload--picture-card{width:80px;height:80px;line-height:80px;font-size:14px;position:relative}.xn-upload:not(.is-idcard) .el-upload.el-upload--picture-card .el-upload-list__item img.el-upload-list__item-thumbnail{-o-object-fit:cover;object-fit:cover}.xn-upload:not(.is-idcard) .el-upload.el-upload--picture-card .upload-limit{width:inherit;height:inherit}.xn-upload:not(.is-idcard) .el-upload.el-upload--picture-card .upload-limit i{font-size:20px}.xn-upload--slot{height:100%}.xn-upload--slot .process{position:absolute;left:0;top:0;background:rgba(0,0,0,.4);width:100%;height:100%}.xn-upload--slot .process .el-progress .el-progress-circle{width:99%!important;height:99%!important}.xn-upload--slot .process .el-progress .el-progress__text{color:#fff!important;font-size:12px!important}.xn-upload--slot__ext{position:absolute;bottom:0;right:0;z-index:1000;background:rgba(0,0,0,.4);height:20px;line-height:20px;color:#fff;font-size:12px;padding:0 5px;border-radius:0}.xn-upload .el-upload-list__item .el-progress{width:50%}.xn-upload .el-upload--list{width:100%}.xn-upload .el-upload-dragger{width:100%;height:100%}.xn-idcard{position:relative;border-radius:10px;overflow:hidden}.xn-idcard img{display:block;width:calc(100% - 2px);height:100%;-o-object-fit:cover;object-fit:cover}.xn-idcard .tip{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:16px;color:#999;text-align:center}.xn-idcard .tip i{font-size:36px}.xn-idcard .tip span{line-height:1.5}.xn-idcard-rotate{width:100%;height:100%;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;overflow:hidden}