xianniu-ui 0.1.3 → 0.1.5

package/packages/style/src/basic.scss

@@ -0,0 +1,64 @@
+@import './theme/theme.scss';
+.text-primary{color: $--color-primary!important;}
+.text-success{color: $--color-success!important;}
+.text-danger{color: $--color-danger!important;}
+.text-warning{color: $--color-warning!important;}
+@for $i from 0 through 30 {
+    .m-#{$i} {
+        margin: ($i) + px;
+    }
+    .mt-#{$i} {
+        margin-top: ($i) + px;
+    }
+    .mb-#{$i} {
+        margin-bottom: ($i) + px;
+    }
+    .ml-#{$i} {
+        margin-left: ($i) + px;
+    }
+    .mr-#{$i} {
+        margin-right: ($i) + px;
+    }
+
+    .p-#{$i} {
+        padding: ($i) + px;
+    }
+    .pt-#{$i} {
+        padding-top: ($i) + px;
+    }
+    .pb-#{$i} {
+        padding-bottom: ($i) + px;
+    }
+    .pl-#{$i} {
+        padding-left: ($i) + px;
+    }
+    .pr-#{$i} {
+        padding-right: ($i) + px;
+    }
+    .fz-#{$i} {
+        font-size: $i + px;
+    }
+}
+.text-ell-1 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.text-ell-2 {
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.text-right {
+    text-align: right;
+}
+.text-center {
+    text-align: center;
+}
+.text-left {
+    text-align: left;
+}

package/packages/style/src/city.scss

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

package/packages/style/src/date.scss

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

package/packages/style/src/flex.scss

@@ -0,0 +1,74 @@
+@import './mixin/mixin.scss';
+
+.flex {
+  @include flex();
+}
+
+.inline-flex {
+  @include flex(inline);
+}
+
+.flex-direction-row {
+  @include flex-direction(row);
+}
+
+.flex-direction-default {
+  @include flex-direction();
+}
+
+.flex-direction-col {
+  @include flex-direction(column);
+}
+
+.flex-direction-row-reverse {
+  @include flex-direction(row-reverse);
+}
+
+.flex-direction-col-reverse {
+  @include flex-direction(column-reverse);
+}
+
+.flex-wrap-no {
+  @include flex-wrap();
+}
+
+.flex-wrap-yes {
+  @include flex-wrap(wrap);
+}
+
+.flex-basis-1 {
+  @include flex-basis(1);
+}
+
+.flex-grow-1 {
+  @include flex-grow(1);
+}
+
+.flex-shrink-1 {
+  @include flex-shrink(1);
+}
+
+.flex-order-1 {
+  @include order(1);
+}
+
+.justify-content-center {
+  @include justify-content(center);
+}
+.justify-content-between {
+    @include justify-content(space-between);
+  }
+.justify-content-end {
+  @include justify-content(flex-end);
+}
+.align-items-center {
+  @include align-items(center);
+}
+
+.align-self-center {
+  @include align-self(center);
+}
+
+.align-content-center {
+  @include align-content(center);
+}

package/packages/style/src/import.scss

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

package/packages/style/src/index.scss

@@ -1,2 +1,10 @@
+@import './basic.scss';
+@import './flex.scss';
 @import './table.scss';
-@import './page.scss';
+@import './page.scss';
+@import './upload.scss';
+@import './date.scss';
+@import './city.scss';
+@import './tip.scss';
+@import './tree.scss';
+@import './import.scss';

package/packages/style/src/mixin/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/packages/style/src/search.scss

@@ -0,0 +1,17 @@
+.xn-search {
+    &--row {
+        &_col {
+            display: flex;
+
+            ::v-deep .el-form-item__content {
+                width: 100%;
+                height: 32px;
+
+            }
+
+            ::v-deep .el-form-item__label {
+                flex: none;
+            }
+        }
+    }
+}

package/packages/style/src/table.scss

@@ -1,9 +1,41 @@
-.xn-table-box{
-    &-tools{
+.xn-table-box {
+    &-tools {
         text-align: right;
         padding-bottom: 10px;
-        &.is-border{
+        &.is-border {
             border-bottom: 1px solid #f0f0f0;
         }
+        &__pop{
+            min-width: 120px !important;
+            padding: 0 0 0 10px !important;
+        }
+        &__coll{
+            height: 200px;
+            overflow-y: auto;
+        }
+    }
+    .el-table {
+        .el-table__body-wrapper::-webkit-scrollbar {
+            width: 6px;
+            height: 8px;
+            background-color: #ebeef5;
+        }
+        /*定义滚动条轨道 内阴影+圆角*/
+        .el-table__body-wrapper::-webkit-scrollbar-track {
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            border-radius: 3px;
+            background: rgba(255, 255, 255, 1);
+        }
+        /*定义滑块 内阴影+圆角*/
+        .el-table__body-wrapper::-webkit-scrollbar-thumb {
+            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+            background-color: #ccc;
+        }
+        .el-table__fixed,
+        .el-table__fixed-right {
+            height: calc(100% - 7px) !important;
+            box-shadow: -7px 0px 7px -7px rgb(0 0 0 / 12%);
+        }
     }
-}
+}

package/packages/style/src/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/packages/style/src/theme/index.scss

@@ -0,0 +1 @@
+@import './element-variables.scss';