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

package/src/styles/element-ui.scss

@@ -0,0 +1,155 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    min-width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+//xk
+form.el-form.disabled {
+  i.el-icon-delete, i.el-icon-search {
+    display: none;
+  }
+
+  form.el-form {
+    i.el-icon-delete, i.el-icon-search {
+      display: block;
+    }
+  }
+
+  form.el-form.disabled {
+    i.el-icon-delete, i.el-icon-search {
+      display: none;
+    }
+  }
+}
+
+.el-link {
+  font-size: $fontSizeBase;
+}
+
+.el-input--small .el-input__inner {
+  height: 30px;
+}
+
+.el-dialog__wrapper {
+  overflow: hidden !important;
+}
+
+.el-button--primary.is-plain {
+  background: #fff !important;
+  color: $baseColor !important;
+  &:hover,
+  &:focus {
+    color: $baseColor;
+  }
+}
+
+.el-tag--medium {
+  margin: 3px 10px 3px 0 !important;
+  + .el-tag {
+    margin: 3px 10px 3px 0 !important;
+  }
+  + .el-button {
+    margin-left: 0 !important;
+  }
+  > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+  }
+  > i {
+    vertical-align: middle;
+  }
+}
+
+.el-cascader__tags {
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.el-loading-parent--relative {
+  overflow: hidden;
+}

package/src/styles/element-variables.scss

@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #2a6494;
+$--color-success: #30B08F;
+$--color-warning: #e6a23c;
+$--color-danger: #ea5353;
+$--color-info: #94979d;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}

package/src/styles/global.scss

@@ -0,0 +1,115 @@
+@import './theme-variables.scss';
+
+/* 全局基础规则：仅由 styles/index.scss 引入一次。 */
+
+.primary-color {
+  color: $--color-primary;
+}
+
+.background-opacity {
+  background: rgba(64, 158, 255, 0.6);
+}
+
+.form-widget-list {
+
+  .ghost{
+    content: '';
+    font-size: 0;
+    height: 3px;
+    box-sizing: border-box;
+    background: $--color-primary;
+    border: 2px solid $--color-primary;
+    outline-width: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+}
+
+.el-form-item--medium {
+  .el-radio {
+    line-height: 36px !important;
+  }
+
+  .el-rate{
+    margin-top: 8px;
+  }
+}
+
+.el-form-item--small {
+  .el-radio {
+    line-height: 32px !important;
+  }
+
+  .el-rate{
+    margin-top: 6px;
+  }
+}
+
+.el-form-item--mini {
+  .el-radio {
+    line-height: 28px !important;
+  }
+
+  .el-rate{
+    margin-top: 4px;
+  }
+}
+
+.el-card {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+
+input[type="password"]::-ms-reveal {  /* 隐藏IE/Edge原生的密码查看按钮 */
+  display: none;
+}
+
+/* 滚动条样式 begin */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  width: 8px;
+  background: rgba(#101F1C, 0.1);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(#101F1C, 0.35);
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(#101F1C, 0.85);
+}
+
+* {//Firefox浏览器滚动条样式
+  scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色
+  scrollbar-width: thin;     //thin模式下滚动条两端的三角按钮会消失
+}
+
+
+/*
+body {//IE浏览器滚动条样式
+  scrollbar-shadow-color: #e5e5e5;
+  scrollbar-face-color: #e5e5e5;
+  scrollbar-base-color: #ffffff;
+  scrollbar-arrow-color: #444040;
+}
+*/
+
+/* 滚动条样式 end */
+
+.label-tooltip-pre-line {
+  white-space: pre-line;
+  line-height: 1.4;
+  max-width: 320px;
+}

package/src/styles/index.scss

@@ -0,0 +1,200 @@
+@import './variables.scss';
+@import './global.scss';
+@import './utilities.scss';
+@import './split-handle.scss';
+@import './nprogress.scss';
+@import './menu-icons.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+@import './btn.scss';
+// 功能性图标字体随 npm 包发布。
+@import '~@base/core-resources/css/iconfont.css';
+
+// 历史业务样式聚合文件属于 App 层，不随 npm 包发布。
+// 消费应用继续从 @/resources/css/style.scss 引入。
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  a {
+    color: #337ab7;
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+//main-container全局样式
+.app-container {
+  padding: 20px;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.text-center {
+  text-align: center
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &.draft {
+    background: #d0d0d0;
+  }
+
+  &.deleted {
+    background: #d0d0d0;
+  }
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}
+
+//refine vue-multiselect plugin
+.multiselect {
+  line-height: 16px;
+}
+
+.multiselect--active {
+  z-index: 1000 !important;
+}

package/src/styles/menu-icons.scss

@@ -0,0 +1,75 @@
+// Menu icon picker styles extracted from the app stylesheet.
+@import "./variables.scss";
+.icon-style1 {
+  position: absolute;
+  right: 10px;
+  margin-top: 20px;
+  .tips-icon {
+    font-size: 42px !important;
+  }
+}
+
+.icons-box {
+  max-height: 400px;
+  overflow: auto;
+  .item {
+    display: inline-block;
+    border: solid 1px #dcdcdc;
+    width: 33px;
+    height: 33px;
+    font-size: 18px;
+    text-align: center;
+    margin: 5px 8px;
+    line-height: 31px;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover,
+    &.on {
+      color: $baseColor;
+      border-color: $baseColor;
+      background: transparentize($baseColor, 0.8);
+    }
+  }
+}
+
+.icons-box_select {
+  border: 1px solid #e7e7e7;
+  background: #fff;
+  height: 24px;
+  line-height: 22px;
+  padding: 0 5px;
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: 0;
+  border-radius: 2px;
+  cursor: pointer;
+  width: 100%;
+  font-weight: 400;
+  position: relative;
+  i {
+    vertical-align: middle;
+    &.el-icon-arrow-down {
+      position: absolute;
+      right: 4px;
+      top: 50%;
+      margin-top: -12px;
+      line-height: 24px;
+      color: #c0c4cc;
+    }
+  }
+}
+
+.icon-box_del {
+  font-size: 16px;
+  vertical-align: middle;
+  color: #c0c4cc;
+  cursor: pointer;
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  margin-top: -12px;
+  line-height: 24px;
+  &:hover {
+    color: $baseColor;
+  }
+}

package/src/styles/mixin.scss

@@ -0,0 +1,72 @@
+@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 ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@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;
+  }
+}

package/src/styles/nprogress.scss

@@ -0,0 +1,14 @@
+// Core NProgress overlay extracted from the app stylesheet.
+#nprogress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  pointer-events: initial !important;
+}
+
+#nprogress .bar {
+  height: 8px !important;
+}