haiwei-ui 1.0.0

package/packages/styles/components/toolbar/_index.scss

@@ -0,0 +1,120 @@
+#{$prefix}toolbar {
+    height: 50px;
+    overflow: hidden;
+
+    &-item {
+        position: relative;
+        display: inline-block;
+        height: 100%;
+        @include toolbar-hover-border();
+
+        .el-dropdown {
+            height: 100%;
+        }
+    }
+
+    &-button {
+        margin-left: 0 !important;
+        height: 100%;
+        width: 40px;
+        font-size: 18px;
+        color: #fff !important;
+
+        #{$prefix}icon {
+            padding-right: 0;
+            font-size: 25px;
+            transform: scale(1) !important;
+        }
+    }
+
+    #{$prefix}skin-toggle {
+        .skin-list {
+            &-item {
+                position: relative;
+                display: inline-block;
+                margin: 0 5px;
+                width: 300px;
+                cursor: pointer;
+
+                .img {
+                    position: relative;
+                    height: 150px;
+                    overflow: hidden;
+                    transition: all 0.2s ease-in;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        width: 100%;
+                        height: 100%;
+                        background-color: rgba(51, 51, 51, 0.5);
+                    }
+
+                    &:hover {
+                        &::after {
+                            display: none;
+                        }
+                    }
+                }
+
+                .text {
+                    height: 30px;
+                    line-height: 30px;
+                    text-align: center;
+                }
+
+                &.active {
+                    .img {
+                        border: 1px solid #03a9f4;
+                        box-shadow: 0 0 9px #03a9f4;
+
+                        &::after {
+                            display: none;
+                        }
+
+                        &::before {
+                            content: '';
+                            position: absolute;
+                            bottom: -45px;
+                            right: -4px;
+                            width: 0;
+                            height: 0;
+                            border: 40px solid;
+                            border-left-color: transparent;
+                            border-right-color: #03a9f4;
+                            border-bottom-color: transparent;
+                            border-top-color: transparent;
+                        }
+                    }
+                }
+            }
+        }
+
+        .theme-list {
+            &-item {
+                margin: 0 5px;
+                position: relative;
+                display: inline-block;
+                width: 40px;
+                height: 40px;
+                border-radius: 20px;
+                cursor: pointer;
+                box-sizing: border-box;
+                transition: all 0.25s ease-in;
+
+                &:hover,
+                &.active {
+                    box-shadow: 0 0 9px #03a9f4;
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+}

package/packages/styles/components/tree/_index.scss

@@ -0,0 +1,7 @@
+#{$prefix}tree {
+  .el-tree-node__content {
+    font-size: 15px;
+    padding: 4px 0;
+    border-radius: 3px;
+  }
+}

package/packages/styles/components/tree-select/_index.scss

@@ -0,0 +1,47 @@
+$treePrefix: #{$prefix}tree-select;
+
+#{$treePrefix}-popover {
+  padding: 0;
+  box-sizing: border-box;
+
+  #{$treePrefix}-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    #{$treePrefix}-search-wrapper {
+      padding: 0 5px;
+      flex-shrink: 0;
+      height: 0;
+
+      #{$treePrefix}-search {
+        margin: 5px 0;
+      }
+    }
+
+    #{$treePrefix}-tree-wrapper {
+      position: relative;
+      flex-grow: 1;
+
+      #{$treePrefix}-tree-main {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  &.filterable {
+    #{$treePrefix}-search-wrapper {
+      height: auto;
+    }
+  }
+}
+
+#{$treePrefix}-input {
+  cursor: pointer;
+  .el-input__inner {
+    cursor: pointer;
+  }
+}

package/packages/styles/components/txt/_index.scss

@@ -0,0 +1,17 @@
+#{$prefix}txt {
+    padding: 2px 0;
+    position: relative;
+    line-height: 20px;
+    box-sizing: border-box;
+
+    &-icon {
+        padding-left: 21px;
+
+        #{$prefix}icon {
+            position: absolute;
+            top: 0;
+            left: 0;
+            font-size: 20px;
+        }
+    }
+}

package/packages/styles/components/upload-dialog/_index.scss

@@ -0,0 +1,54 @@
+#{$prefix}upload-dialog {
+    box-shadow: none;
+
+    #{$prefix}dialog-main {
+        padding: 0 !important;
+        @include flex-column();
+
+        .el-upload {
+            width: 100%;
+
+            .el-upload-dragger {
+                padding-bottom: 10px;
+                width: 100%;
+                height: auto;
+                border: 0;
+
+                .el-icon-upload {
+                    margin-top: 15px;
+                }
+
+                .el-upload__text {
+                    height: 32px;
+                    line-height: 32px;
+                }
+            }
+        }
+    }
+
+    &-top {
+        flex-shrink: 0;
+    }
+
+    &-bottom {
+        flex-grow: 1;
+    }
+
+    &-tip {
+        color: $color-warning;
+
+        >i {
+            margin-right: 5px;
+        }
+    }
+
+    .status-success {
+        color: $color-success;
+        font-size: 16px;
+    }
+
+    .status-error {
+        color: $color-danger;
+        font-size: 16px;
+    }
+}

package/packages/styles/components/upload-multiple/_index.scss

@@ -0,0 +1,29 @@
+#{$prefix}upload-multiple {
+    box-shadow: none;
+
+    #{$prefix}box-content {
+        padding: 0 !important;
+
+        .el-upload {
+            width: 100%;
+
+            .el-upload-dragger {
+                width: 100%;
+                height: auto;
+                border: none;
+
+                .el-icon-upload {
+                    margin-top: 15px;
+                }
+            }
+        }
+    }
+
+    &-tip {
+        color: $color-warning;
+
+        >i {
+            margin-right: 5px;
+        }
+    }
+}

package/packages/styles/components/upload-single/_index.scss

@@ -0,0 +1,23 @@
+#{$prefix}upload-single {
+    width: 100%;
+    @include flex-row();
+
+    >.input {
+        padding-right: 5px;
+        flex-grow: 1;
+    }
+
+    >.button {
+        flex-shrink: 0;
+    }
+}
+
+.is-error {
+    #{$prefix}upload-single {
+        >.input {
+            .el-input__inner {
+                border-color: #F56C6C;
+            }
+        }
+    }
+}

package/packages/styles/directive/drop/_index.scss

@@ -0,0 +1,3 @@
+.is-drop {
+  cursor: move;
+}

package/packages/styles/directive/resizable/_index.scss

@@ -0,0 +1,105 @@
+#{$prefix}resizable {
+  /**此光标指示矩形框的边缘可被向上（北）移动。**/
+  & {
+    position: absolute;
+    z-index: 99999;
+    float: left;
+  }
+  &-n {
+    cursor: n-resize;
+    bottom: 0;
+    left: 0;
+    height: 5px !important;
+    width: 100%;
+  }
+  /**此光标指示矩形框的边缘可被向下移动（南）**/
+  &-s {
+    cursor: s-resize;
+    top: 0;
+    left: 0;
+    height: 5px !important;
+    width: 100%;
+  }
+  /**此光标指示矩形框的边缘可被向右（东）移动。**/
+  &-e {
+    cursor: e-resize;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 5px !important;
+  }
+  /**	此光标指示矩形框的边缘可被向左移动（西）。**/
+  &-w {
+    cursor: w-resize;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 5px !important;
+  }
+  /**	此光标指示矩形框的边缘可被向上及向右移动（北/东）**/
+  &-ne {
+    cursor: ne-resize;
+    left: 0;
+    bottom: 0;
+    height: 12px !important;
+    width: 12px !important;
+  }
+  /**	此光标指示矩形框的边缘可被向上及向左移动（北/西）**/
+  &-nw {
+    cursor: nw-resize;
+    right: 0;
+    bottom: 0;
+    height: 12px !important;
+    width: 12px !important;
+  }
+  /**	此光标指示矩形框的边缘可被向下及向右移动（南/东）**/
+  &-se {
+    cursor: se-resize;
+    top: 0;
+    left: 0;
+    height: 12px !important;
+    width: 12px !important;
+  }
+  /**	此光标指示矩形框的边缘可被向下及向左移动（南/西）**/
+  &-sw {
+    cursor: sw-resize;
+    top: 0;
+    right: 0;
+    height: 12px !important;
+    width: 12px !important;
+  }
+}
+
+#{$prefix}resizable-move-trigger {
+  position: absolute;
+  top: 50%;
+  height: 100px;
+  width: 8px;
+  background: #f3f3f3;
+  transform: translate(-50%, -50%);
+  border-radius: 4px/6px;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+  line-height: 100px;
+  cursor: col-resize;
+  &-left {
+    right: -5px;
+  }
+  &-right {
+    left: -1px;
+  }
+}
+#{$prefix}drop-move,
+#{$prefix}resizable-move {
+  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
+}
+
+#{$prefix}resizable-move-point {
+  display: inline-block;
+  width: 50%;
+  transform: translateX(50%);
+  i {
+    display: block;
+    border-bottom: 1px solid silver;
+    padding-bottom: 2px;
+  }
+}

package/packages/styles/helper/_background.scss

@@ -0,0 +1,22 @@
+/*背景颜色*/
+#{$prefix}bg {
+  &-info {
+    background-color: $color-info !important;
+  }
+
+  &-primary {
+    background-color: $color-primary !important;
+  }
+
+  &-success {
+    background-color: $color-success !important;
+  }
+
+  &-warning {
+    background-color: $color-warning !important;
+  }
+
+  &-danger {
+    background-color: $color-danger !important;
+  }
+}

package/packages/styles/helper/_border.scss

@@ -0,0 +1,99 @@
+/*边框宽度*/
+@for $i from 0 through 30 {
+  /***********旧代码************/
+  #{$prefix}border-#{$i} {
+    border: #{$i}px !important;
+  }
+
+  #{$prefix}border-t-#{$i} {
+    border-top: #{$i}px !important;
+  }
+
+  #{$prefix}border-b-#{$i} {
+    border-bottom: #{$i}px !important;
+  }
+
+  #{$prefix}border-l-#{$i} {
+    border-left: #{$i}px !important;
+  }
+
+  #{$prefix}border-r-#{$i} {
+    border-right: #{$i}px !important;
+  }
+
+  /***********新代码************/
+  #{$prefix}b-#{$i} {
+    border: #{$i}px !important;
+  }
+
+  #{$prefix}b-t-#{$i} {
+    border-top: #{$i}px !important;
+  }
+
+  #{$prefix}b-b-#{$i} {
+    border-bottom: #{$i}px !important;
+  }
+
+  #{$prefix}b-l-#{$i} {
+    border-left: #{$i}px !important;
+  }
+
+  #{$prefix}b-r-#{$i} {
+    border-right: #{$i}px !important;
+  }
+}
+
+/*边框颜色*/
+#{$prefix}b {
+  &-info {
+    border-color: $color-info !important;
+  }
+
+  &-primary {
+    border-color: $color-primary !important;
+  }
+
+  &-success {
+    border-color: $color-success !important;
+  }
+
+  &-warning {
+    border-color: $color-warning !important;
+  }
+
+  &-danger {
+    border-color: $color-danger !important;
+  }
+}
+
+/*边框圆角*/
+@for $i from 0 through 50 {
+  #{$prefix}b-radius#{$i} {
+    border-radius: #{$i}px !important;
+  }
+  #{$prefix}b-t-radius#{$i} {
+    border-top-left-radius: #{$i}px !important;
+    border-top-right-radius: #{$i}px !important;
+  }
+  #{$prefix}b-b-radius#{$i} {
+    border-bottom-left-radius: #{$i}px !important;
+    border-bottom-right-radius: #{$i}px !important;
+  }
+  #{$prefix}b-l-radius#{$i} {
+    border-top-left-radius: #{$i}px !important;
+    border-bottom-left-radius: #{$i}px !important;
+  }
+  #{$prefix}b-r-radius#{$i} {
+    border-top-right-radius: #{$i}px !important;
+    border-bottom-right-radius: #{$i}px !important;
+  }
+}
+
+//边框样式
+#{$prefix}b-solid {
+  border-style: solid !important;
+}
+
+#{$prefix}b-dotted {
+  border-style: dotted !important;
+}

package/packages/styles/helper/_boxshadow.scss

@@ -0,0 +1,4 @@
+/*阴影*/
+#{$prefix}box-shadow {
+  box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
+}

package/packages/styles/helper/_fontsize.scss

@@ -0,0 +1,6 @@
+/*字体大小*/
+@for $i from 0 through 100 {
+  #{$prefix}size-#{$i} {
+    font-size: #{$i}px !important;
+  }
+}

package/packages/styles/helper/_index.scss

@@ -0,0 +1,19 @@
+/*页*/
+.page {
+  height: 100% !important;
+  box-sizing: border-box;
+}
+
+/*隐藏*/
+.hidden {
+  display: none;
+}
+
+@import './background';
+@import './border';
+@import './boxshadow';
+@import './fontsize';
+@import './margin';
+@import './padding';
+@import './pull';
+@import './text';

package/packages/styles/helper/_margin.scss

@@ -0,0 +1,22 @@
+/*外边距*/
+@for $i from 0 through 50 {
+  #{$prefix}m-#{$i} {
+    margin: #{$i}px !important;
+  }
+
+  #{$prefix}m-t-#{$i} {
+    margin-top: #{$i}px !important;
+  }
+
+  #{$prefix}m-b-#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+
+  #{$prefix}m-l-#{$i} {
+    margin-left: #{$i}px !important;
+  }
+
+  #{$prefix}m-r-#{$i} {
+    margin-right: #{$i}px !important;
+  }
+}

package/packages/styles/helper/_padding.scss

@@ -0,0 +1,22 @@
+/*内边距*/
+@for $i from 0 through 50 {
+  #{$prefix}p-#{$i} {
+    padding: #{$i}px !important;
+  }
+
+  #{$prefix}p-t-#{$i} {
+    padding-top: #{$i}px !important;
+  }
+
+  #{$prefix}p-b-#{$i} {
+    padding-bottom: #{$i}px !important;
+  }
+
+  #{$prefix}p-l-#{$i} {
+    padding-left: #{$i}px !important;
+  }
+
+  #{$prefix}p-r-#{$i} {
+    padding-right: #{$i}px !important;
+  }
+}

package/packages/styles/helper/_pull.scss

@@ -0,0 +1,9 @@
+/****浮动********/
+#{$prefix}pull {
+  &-left {
+    float: left !important;
+  }
+  &-right {
+    float: right !important;
+  }
+}

package/packages/styles/helper/_text.scss

@@ -0,0 +1,58 @@
+/*文本*/
+#{$prefix}text {
+  /***************颜色******************/
+  &-info {
+    color: $color-info !important;
+  }
+
+  &-primary {
+    color: $color-primary !important;
+  }
+
+  &-success {
+    color: $color-success !important;
+  }
+
+  &-warning {
+    color: $color-warning !important;
+  }
+
+  &-danger {
+    color: $color-danger !important;
+  }
+
+  &-white {
+    color: #fff !important;
+  }
+
+  /***************对齐******************/
+  &-center {
+    text-align: center !important;
+  }
+
+  &-left {
+    text-align: left !important;
+  }
+
+  &-right {
+    text-align: right !important;
+  }
+
+  /*加粗*/
+  &-bold {
+    font-weight: bold !important;
+  }
+
+  /*换行*/
+  &-wrap {
+    white-space: normal !important;
+  }
+
+  /*省略号*/
+  &-ellipsis {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+  }
+}