cloud-web-corejs 1.1.0-dev.29 → 1.1.0-dev.30

package/src/styles/sidebar.scss

@@ -0,0 +1,281 @@
+#app {
+
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: $sideBarWidth;
+    position: relative;
+    &.telescopMenu{
+      margin-left:$sideBarWidthMin;
+      .fixed-header{
+        width: calc(100% - #{$sideBarWidthMin} - 20px);
+      }
+      .designer-drawer{left:$sideBarWidthMin}
+    }
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth;
+    background-color: $menuBg;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    &.telescopMenu{
+      width:$sideBarWidthMin;
+      .hamburger-box{
+        .name{
+          i{width: 38px;text-align: center;display: inline-block;}
+          span{display:none}
+        }
+      }
+      .business-name{
+        p{display:none}
+      }
+      .fase-box{
+        white-space: nowrap;overflow: hidden;padding-left: 16px;position: relative;
+        &:before{content:"";position: absolute;top:0;bottom:0;right:0;width:22px;background:#225076}
+        &:after{content:"\e791";font-family: element-icons !important;position: absolute;top:0;bottom:0;right:0;width: 26px;text-align: center;z-index: 2;font-size: 12px;line-height: 48px;opacity: 0.8}
+        &:hover{
+          width:155.5px;padding-left:0;
+          &:after{display:none}
+        }
+        .lang-box{
+          border-right:none;margin-bottom: 4px;
+          .el-dropdown-link .el-icon-arrow-down{display: none;}
+        }
+      }
+      .sys-switch{padding:16px 14px;
+        .sys-name{
+           span{white-space: nowrap;overflow: hidden;display: inline-block;}
+        }
+      }
+      .menu-box {
+        .el-submenu__title {
+          i{float:none !important}
+          span,.el-submenu__icon-arrow {display:none !important}
+        }
+      }
+      .second-list{
+        left:215px
+      }
+    }
+    // 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% - 45px);
+      }
+    }
+
+    .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;
+      text-align: center;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+
+    .is-active>.el-submenu__title {
+      color: $subMenuActiveText !important;
+    }
+
+    & .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;
+      }
+    }
+  }
+
+  .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: 0px;
+        }
+
+        .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;
+    }
+  }
+}
+
+.el-menu--popup.el-menu{
+  background:#225076;padding:0;min-width: 142px;
+  .el-menu-item{
+    font-size:13px;height:36px;line-height: 36px;
+    .el-icon-caret-right{display:none}
+    &:before{margin-right:8px;}
+  }
+}

package/src/styles/split-handle.scss

@@ -0,0 +1,52 @@
+// Core split-pane drag handle extracted from the app stylesheet.
+@import "./variables.scss";
+
+#labBtn,
+.dilatory-box {
+  background-color: #f4f6fa;
+  position: relative;
+  width: 8px;
+  z-index: 8;
+  cursor: e-resize;
+  display: inline-block;
+  height: calc(100vh - 75px);
+  margin: -7px 0;
+  .icon {
+    position: absolute;
+    top: 50%;
+    left: -4.5px;
+    font-size: 17px;
+    margin-top: -16.8px;
+    color: $baseColor;
+    i {
+      display: block;
+      transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -webkit-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+    }
+  }
+  &.transverse {
+    height: 9px;
+    width: calc(100% + 20px);
+    background: #f0f5fb;
+    cursor: n-resize;
+    margin: 0 -10px 8px;
+    display: block;
+    .icon {
+      margin-top: 0;
+      top: -5px;
+      left: 50%;
+      margin-left: -17px;
+    }
+    i {
+      transform: rotate(0);
+      -ms-transform: rotate(0);
+      -moz-transform: rotate(0);
+      -webkit-transform: rotate(0);
+      -o-transform: rotate(0);
+      display: inline-block;
+    }
+  }
+}

package/src/styles/theme-variables.scss

@@ -0,0 +1,7 @@
+/**
+ * 可被 sass-loader additionalData 安全注入的主题变量。
+ *
+ * 这里只允许放变量、函数和 mixin，禁止添加选择器或其他会输出 CSS 的内容，
+ * 否则每个 Vue 组件都会重复生成同一份全局样式。
+ */
+$--color-primary: #409EFF !default;

package/src/styles/transition.scss

@@ -0,0 +1,48 @@
+// 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 .5s;
+}
+
+.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 .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

package/src/styles/utilities.scss

@@ -0,0 +1,137 @@
+// Core 通用状态色与提示辅助类。仅由 styles/index.scss 引入一次。
+@import "./variables.scss";
+
+.a-link > i {
+  vertical-align: middle;
+}
+
+.f-red {
+  color: $red;
+}
+.f-dred {
+  color: $dred;
+}
+.f-green {
+  color: $green;
+}
+.f-blue {
+  color: $baseColor;
+}
+.f-gray {
+  color: #999;
+}
+
+.underLine {
+  border-bottom: solid 1px;
+  &.f-red {
+    border-color: $red;
+    &:focus,
+    &:hover {
+      color: $red;
+    }
+  }
+}
+.txt-status {
+  border-radius: 22px;
+  display: inline-block;
+  height: 22px;
+  line-height: 22px;
+  padding: 0 14px;
+  background: transparentize($green, 0.88);
+  color: $green;
+  &:before {
+    content: "";
+    margin: -2px 6px 0 0;
+    width: 6px;
+    height: 6px;
+    vertical-align: middle;
+    display: inline-block;
+    background-color: $green;
+    text-align: center;
+    border-radius: 3px;
+  }
+  &.disable,
+  &.s-3 {
+    color: $red;
+    background: transparentize($red, 0.88);
+    &:before {
+      background-color: $red;
+    }
+  }
+  &.red {
+    color: $dred;
+    background: transparentize($dred, 0.88);
+    &:before {
+      background-color: $dred;
+    }
+  }
+  &.green {
+    color: $green;
+    background: transparentize($green, 0.88);
+    &:before {
+      background-color: $green;
+    }
+  }
+  span {
+    padding: 0 3px;
+  }
+}
+.tips {
+  font-size: $fontSizeBase;
+  color: $red;
+  line-height: 28px;
+}
+.tips_1 {
+  font-size: $fontSizeBase;
+  color: $dred;
+  line-height: 28px;
+  > span {
+    border-bottom: solid 1px $dred;
+    line-height: 18px;
+    display: inline-block;
+  }
+}
+.tips_2 {
+  font-size: $fontSizeBase;
+  line-height: 28px;
+  display: inline-block;
+  margin-left: 14px;
+  > span {
+    margin-right: 13px;
+  }
+}
+
+.is-error {
+  .ace-editor,
+  .el-checkbox__inner,
+  .el-radio__inner,
+  .el-textarea__inner {
+    border-color: $dred !important;
+  }
+  .el-input.is-disabled .el-input__inner {
+    border-color: $dred !important;
+  }
+  .avatar-uploader,
+  .el-button-tag {
+    border: solid 1px $dred !important;
+  }
+}
+
+.d-item {
+  position: relative;
+  .btn-tips {
+    display: inline-block;
+    position: absolute;
+    padding: 4px;
+    margin: -5px 0 0 10px;
+  }
+}
+
+.ellipsis-box {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  .a-link {
+    display: inline !important;
+  }
+}

package/src/styles/variables.scss

@@ -0,0 +1,44 @@
+// base color
+$blue:#324157 !default;
+$light-blue:#2a6494 !default;
+$red:#FF731C !default;
+$dred: #ea5353 !default;
+$pink: #E65D6E !default;
+$green: #30B08F !default;
+$tiffany: #4AB7BD !default;
+$yellow:#FEC171 !default;
+$panGreen: #30B08F !default;
+
+// sidebar
+$menuText:#ffffff !default;
+$menuActiveText:#409EFF !default;
+$subMenuActiveText:#f4f4f5 !default; // https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#2a6494 !default;
+$menuHover:rgba(0,0,0,0.29) !default;
+
+$subMenuBg:transparent !default;
+$subMenuHover:rgba(0,0,0,0.29) !default;
+
+$sideBarWidth: 140px !default;
+$sideBarWidthMin:66px !default;
+
+// customize
+//$baseColor:#3C70C4;
+$fontSizeBase:12px !default;
+$baseColor:#2a6494 !default;
+$borderColor:#e9e9e9 !default;
+$dialogheadHeight:42px !default;
+$dialogfooterHeight:52px !default;
+// 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: $baseColor;
+  menuHover: $menuHover;
+  subMenuBg: $baseColor;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}