yks-element 1.0.0 → 1.0.4

package/packages/styles/icons.scss

@@ -0,0 +1,69 @@
+@import './variables';
+@import './mixin';
+@import './element-variables';
+@font-face {
+  font-family: 'el-icons';
+  src: url('#{$--yks-font-path}/iconfont.woff') format('woff'),
+  url('#{$--yks-font-path}/iconfont.ttf') format('truetype');
+  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  font-weight: normal;
+  font-display: $--font-display;
+  font-style: normal;
+}
+
+[class^='el-icon-'],
+[class*='el-icon-'] {
+  font-family: 'el-icons', 'element-icons' !important;
+}
+
+
+// 中英文对照表
+/**
+  * 前缀引用: yks-icon-【download】
+  * logo：logo
+  * 相机: camera
+  * 下载: download
+  * 设置: setting
+  * 删除1: delete-solid
+  * 删除2: delete
+  * 关闭: close
+  * 添加: add
+  * 编辑: edit
+  * 上传: upload
+  * 下载: download
+  * 消息1: info
+  * 消息2: question
+  * 对号: check
+  * 导出: collection
+  * 发布: promotion
+  * 复选-已选: 
+  * 减去: remove
+  * 归档: ticket
+  * 日历: date
+  * 警告: warning
+  * 上箭头-箭头: arrow-up
+  * 下箭头-箭头: arrow-down
+  * 右箭头-双箭头: d-arrow-right
+  * 右箭头-单箭头: arrow-right
+  * 左箭头-双箭头: d-arrow-left
+  * 左箭头-单箭头: arrow-left
+  * 上箭头-三角形: caret-top
+  * 下箭头-三角形: caret-bottom
+  * 右箭头-三角形: caret-right
+  * 左箭头-三角形: caret-left
+  * 搜索: search
+  * 视频: video
+  * 收藏-实心: star-on
+  * 收藏-空心: star-off
+**/ 
+
+
+.yks-icon-camera:before {
+  content: "\e036";
+}
+
+
+.yks-icon-download:before {
+  content: "\e037";
+}
+

package/packages/styles/image.scss

@@ -0,0 +1,179 @@
+@import "mixins/mixins";
+@import "common/var";
+
+%size {
+  width: 100%;
+  height: 100%;
+}
+
+@include b(image) {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  @include e(inner) {
+    @extend %size;
+    vertical-align: top;
+
+    @include m(center) {
+      position: relative;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: block;
+    }
+  }
+
+  @include e(placeholder) {
+    @extend %size;
+    background: $--background-color-base;
+  }
+
+  @include e(error) {
+    @extend %size;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    background: $--background-color-base;
+    color: $--color-text-placeholder;
+    vertical-align: middle;
+  }
+
+  @include e(preview) {
+    cursor: pointer;
+  }
+}
+
+
+@include b(image-viewer) {
+
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  @include e(btn) {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    opacity: .8;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+  }
+
+  @include e(close) {
+    top: 40px;
+    right: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+  }
+
+  @include e(canvas) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(actions) {
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    border-color: #fff;
+    border-radius: 22px;
+
+    @include e(actions__inner) {
+      width: 100%;
+      height: 100%;
+      text-align: justify;
+      cursor: default;
+      font-size: 23px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+
+  @include e(prev){
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    border-color: #fff;
+    left: 40px;
+  }
+
+  @include e(next){
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    border-color: #fff;
+    right: 40px;
+    text-indent: 2px;
+  }
+
+  @include e(mask) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: .5;
+    background: #000;
+  }
+}
+
+.viewer-fade-enter-active {
+  animation: viewer-fade-in .3s;
+}
+
+.viewer-fade-leave-active {
+  animation: viewer-fade-out .3s;
+}
+
+@keyframes viewer-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes viewer-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}

package/packages/styles/index.scss

@@ -0,0 +1,18 @@
+@import './variables';
+@import './mixin';
+@import './element-variables';
+@import './element';
+@import './element-ui';
+@import './common';
+@import './icons';
+@import './selects';
+@import './tables';
+@import './topic';
+@import './video';
+@import './uploadfile';
+@import './scrollbars';
+@import './paginations';
+@import './multimedia';
+@import './buttons';
+@import './tinymce';
+

package/packages/styles/input-number.scss

@@ -0,0 +1,180 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "input";
+
+@include b(input-number) {
+  position: relative;
+  display: inline-block;
+  width: 180px;
+  line-height: #{$--input-height - 2};
+
+  .el-input {
+    display: block;
+
+    &__inner {
+      -webkit-appearance: none;
+      padding-left: #{$--input-height + 10};
+      padding-right: #{$--input-height + 10};
+      text-align: center;
+    }
+  }
+
+  @include e((increase, decrease)) {
+    position: absolute;
+    z-index: 1;
+    top: 1px;
+    width: $--input-height;
+    height: auto;
+    text-align: center;
+    background: $--background-color-base;
+    color: $--color-text-regular;
+    cursor: pointer;
+    font-size: 13px;
+
+    &:hover {
+      color: $--color-primary;
+
+      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
+        border-color: $--input-focus-border;
+      }
+    }
+
+    &.is-disabled {
+      color: $--disabled-color-base;
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(increase) {
+    right: 1px;
+    border-radius: 0 $--border-radius-base $--border-radius-base 0;
+    border-left: $--border-base;
+  }
+
+  @include e(decrease) {
+    left: 1px;
+    border-radius: $--border-radius-base 0 0 $--border-radius-base;
+    border-right: $--border-base;
+  }
+
+  @include when(disabled) {
+    @include e((increase, decrease)) {
+      border-color: $--disabled-border-base;
+      color: $--disabled-border-base;
+
+      &:hover {
+        color: $--disabled-border-base;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include m(medium) {
+    width: 200px;
+    line-height: #{$--input-medium-height - 2};
+
+    @include e((increase, decrease)) {
+      width: $--input-medium-height;
+      font-size: $--input-medium-font-size;
+    }
+
+    .el-input__inner {
+      padding-left: #{$--input-medium-height + 7};
+      padding-right: #{$--input-medium-height + 7};
+    }
+  }
+
+  @include m(small) {
+    width: 130px;
+    line-height: #{$--input-small-height - 2};
+
+    @include e((increase, decrease)) {
+      width: $--input-small-height;
+      font-size: $--input-small-font-size;
+
+      [class*=el-icon] {
+        transform: scale(.9);
+      }
+    }
+
+    .el-input__inner {
+      padding-left: #{$--input-small-height + 7};
+      padding-right: #{$--input-small-height + 7};
+    }
+  }
+
+  @include m(mini) {
+    width: 130px;
+    line-height: #{$--input-mini-height - 2};
+
+    @include e((increase, decrease)) {
+      width: $--input-mini-height;
+      font-size: $--input-mini-font-size;
+
+      [class*=el-icon] {
+        transform: scale(.8);
+      }
+    }
+
+    .el-input__inner {
+      padding-left: #{$--input-mini-height + 7};
+      padding-right: #{$--input-mini-height + 7};
+    }
+  }
+
+  @include when(without-controls) {
+    .el-input__inner {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+
+  @include when(controls-right) {
+    .el-input__inner {
+      padding-left: 15px;
+      padding-right: #{$--input-height + 10};
+    }
+
+    @include e((increase, decrease)) {
+      height: auto;
+      line-height: #{($--input-height - 2) / 2};
+
+      [class*=el-icon] {
+        transform: scale(.8);
+      }
+    }
+
+    @include e(increase) {
+      border-radius: 0 $--border-radius-base 0 0;
+      border-bottom: $--border-base;
+    }
+
+    @include e(decrease) {
+      right: 1px;
+      bottom: 1px;
+      top: auto;
+      left: auto;
+      border-right: none;
+      border-left: $--border-base;
+      border-radius: 0 0 $--border-radius-base 0;
+    }
+
+    &[class*=medium] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-medium-height - 2) / 2};
+      }
+    }
+
+    &[class*=small] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-small-height - 2) / 2};
+      }
+    }
+
+    &[class*=mini] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-mini-height - 2) / 2};
+      }
+    }
+  }
+}