@penggy/element-ui 2.4.11

package/packages/theme-chalk/src/form.scss

@@ -0,0 +1,174 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+
+@include b(form) {
+  @include m(label-left) {
+    & .el-form-item__label {
+      text-align: left;
+    }
+  }
+  @include m(label-top) {
+    & .el-form-item__label {
+      float: none;
+      display: inline-block;
+      text-align: left;
+      padding: 0 0 10px 0;
+    }
+  }
+  @include m(inline) {
+    & .el-form-item {
+      display: inline-block;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+    & .el-form-item__label {
+      float: none;
+      display: inline-block;
+    }
+    & .el-form-item__content {
+      display: inline-block;
+      vertical-align: top;
+    }
+    &.el-form--label-top .el-form-item__content {
+      display: block;
+    }
+  }
+}
+@include b(form-item) {
+  margin-bottom: 22px;
+  @include utils-clearfix;
+
+  & .el-form-item {
+    margin-bottom: 0;
+  }
+
+  & .el-input__validateIcon {
+    display: none;
+  }
+
+  @include m(medium) {
+    .el-form-item__label {
+      line-height: 36px;
+    }
+    .el-form-item__content {
+      line-height: 36px;
+    }
+  }
+  @include m(small) {
+    .el-form-item__label {
+      line-height: 32px;
+    }
+    .el-form-item__content {
+      line-height: 32px;
+    }
+    &.el-form-item {
+      margin-bottom: 18px;
+    }
+    .el-form-item__error {
+      padding-top: 2px;
+    }
+  }
+  @include m(mini) {
+    .el-form-item__label {
+      line-height: 28px;
+    }
+    .el-form-item__content {
+      line-height: 28px;
+    }
+    &.el-form-item {
+      margin-bottom: 18px;
+    }
+    .el-form-item__error {
+      padding-top: 1px;
+    }
+  }
+
+  @include e(label) {
+    text-align: right;
+    vertical-align: middle;
+    float: left;
+    font-size: 14px;
+    color: $--color-text-regular;
+    line-height: 40px;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+  @include e(content) {
+    line-height: 40px;
+    position: relative;
+    font-size: 14px;
+    @include utils-clearfix;
+
+    .el-input-group {
+      vertical-align: middle;
+    }
+  }
+  @include e(error) {
+    color: $--color-danger;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 4px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    @include m(inline) {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: inline-block;
+      margin-left: 10px;
+    }
+  }
+
+  @include when(required) {
+    @include pseudo('not(.is-no-asterisk)') {
+      & > .el-form-item__label:before {
+        content: '*';
+        color: $--color-danger;
+        margin-right: 4px;
+      }
+    }
+  }
+
+  @include when(error) {
+    & .el-input__inner,
+    & .el-textarea__inner {
+      &, &:focus {
+        border-color: $--color-danger;
+      }
+    }
+    & .el-input-group__append,
+    & .el-input-group__prepend {
+      & .el-input__inner {
+        border-color: transparent;
+      }
+    }
+    .el-input__validateIcon {
+      color: $--color-danger;
+    }
+  }
+  @include when(success) {
+    & .el-input__inner,
+    & .el-textarea__inner {
+      &, &:focus {
+        border-color: $--color-success;
+      }
+    }
+    & .el-input-group__append,
+    & .el-input-group__prepend {
+      & .el-input__inner {
+        border-color: transparent;
+      }
+    }
+    .el-input__validateIcon {
+      color: $--color-success;
+    }
+  }
+  @include m(feedback) {
+    .el-input__validateIcon {
+      display: inline-block;
+    }
+  }
+}

package/packages/theme-chalk/src/header.scss

@@ -0,0 +1,8 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(header) {
+  padding: $--header-padding;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}

package/packages/theme-chalk/src/icon.scss

@@ -0,0 +1,186 @@
+@import "common/var";
+
+@font-face {
+  font-family: 'element-icons';
+  src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
+       url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  font-weight: normal;
+  font-style: normal
+}
+
+[class^="el-icon-"], [class*=" el-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'element-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: baseline;
+  display: inline-block;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.el-icon-info:before { content: "\e61a"; }
+
+.el-icon-error:before { content: "\e62c"; }
+
+.el-icon-success:before { content: "\e62d"; }
+
+.el-icon-warning:before { content: "\e62e"; }
+
+.el-icon-question:before { content: "\e634"; }
+
+.el-icon-back:before { content: "\e606"; }
+
+.el-icon-arrow-left:before { content: "\e600"; }
+
+.el-icon-arrow-down:before { content: "\e603"; }
+
+.el-icon-arrow-right:before { content: "\e604"; }
+
+.el-icon-arrow-up:before { content: "\e605"; }
+
+.el-icon-caret-left:before { content: "\e60a"; }
+
+.el-icon-caret-bottom:before { content: "\e60b"; }
+
+.el-icon-caret-top:before { content: "\e60c"; }
+
+.el-icon-caret-right:before { content: "\e60e"; }
+
+.el-icon-d-arrow-left:before { content: "\e610"; }
+
+.el-icon-d-arrow-right:before { content: "\e613"; }
+
+.el-icon-minus:before { content: "\e621"; }
+
+.el-icon-plus:before { content: "\e62b"; }
+
+.el-icon-remove:before { content: "\e635"; }
+
+.el-icon-circle-plus:before { content: "\e601"; }
+
+.el-icon-remove-outline:before { content: "\e63c"; }
+
+.el-icon-circle-plus-outline:before { content: "\e602"; }
+
+.el-icon-close:before { content: "\e60f"; }
+
+.el-icon-check:before { content: "\e611"; }
+
+.el-icon-circle-close:before { content: "\e607"; }
+
+.el-icon-circle-check:before { content: "\e639"; }
+
+.el-icon-circle-close-outline:before { content: "\e609"; }
+
+.el-icon-circle-check-outline:before { content: "\e63e"; }
+
+.el-icon-zoom-out:before { content: "\e645"; }
+
+.el-icon-zoom-in:before { content: "\e641"; }
+
+.el-icon-d-caret:before { content: "\e615"; }
+
+.el-icon-sort:before { content: "\e640"; }
+
+.el-icon-sort-down:before { content: "\e630"; }
+
+.el-icon-sort-up:before { content: "\e631"; }
+
+.el-icon-tickets:before { content: "\e63f"; }
+
+.el-icon-document:before { content: "\e614"; }
+
+.el-icon-goods:before { content: "\e618"; }
+
+.el-icon-sold-out:before { content: "\e63b"; }
+
+.el-icon-news:before { content: "\e625"; }
+
+.el-icon-message:before { content: "\e61b"; }
+
+.el-icon-date:before { content: "\e608"; }
+
+.el-icon-printer:before { content: "\e62f"; }
+
+.el-icon-time:before { content: "\e642"; }
+
+.el-icon-bell:before { content: "\e622"; }
+
+.el-icon-mobile-phone:before { content: "\e624"; }
+
+.el-icon-service:before { content: "\e63a"; }
+
+.el-icon-view:before { content: "\e643"; }
+
+.el-icon-menu:before { content: "\e620"; }
+
+.el-icon-more:before { content: "\e646"; }
+
+.el-icon-more-outline:before { content: "\e626"; }
+
+.el-icon-star-on:before { content: "\e637"; }
+
+.el-icon-star-off:before { content: "\e63d"; }
+
+.el-icon-location:before { content: "\e61d"; }
+
+.el-icon-location-outline:before { content: "\e61f"; }
+
+.el-icon-phone:before { content: "\e627"; }
+
+.el-icon-phone-outline:before { content: "\e628"; }
+
+.el-icon-picture:before { content: "\e629"; }
+
+.el-icon-picture-outline:before { content: "\e62a"; }
+
+.el-icon-delete:before { content: "\e612"; }
+
+.el-icon-search:before { content: "\e619"; }
+
+.el-icon-edit:before { content: "\e61c"; }
+
+.el-icon-edit-outline:before { content: "\e616"; }
+
+.el-icon-rank:before { content: "\e632"; }
+
+.el-icon-refresh:before { content: "\e633"; }
+
+.el-icon-share:before { content: "\e636"; }
+
+.el-icon-setting:before { content: "\e638"; }
+
+.el-icon-upload:before { content: "\e60d"; }
+
+.el-icon-upload2:before { content: "\e644"; }
+
+.el-icon-download:before { content: "\e617"; }
+
+.el-icon-loading:before { content: "\e61e"; }
+
+.el-icon-loading {
+  animation: rotating 2s linear infinite;
+}
+
+.el-icon--right {
+  margin-left: 5px;
+}
+.el-icon--left {
+  margin-right: 5px;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

package/packages/theme-chalk/src/index.scss

@@ -0,0 +1,67 @@
+@import "./base.scss";
+@import "./pagination.scss";
+@import "./dialog.scss";
+@import "./autocomplete.scss";
+@import "./dropdown.scss";
+@import "./dropdown-menu.scss";
+@import "./dropdown-item.scss";
+@import "./menu.scss";
+@import "./submenu.scss";
+@import "./menu-item.scss";
+@import "./menu-item-group.scss";
+@import "./input.scss";
+@import "./input-number.scss";
+@import "./radio.scss";
+@import "./radio-group.scss";
+@import "./radio-button.scss";
+@import "./checkbox.scss";
+@import "./checkbox-button.scss";
+@import "./checkbox-group.scss";
+@import "./switch.scss";
+@import "./select.scss";
+@import "./button.scss";
+@import "./button-group.scss";
+@import "./table.scss";
+@import "./table-column.scss";
+@import "./date-picker.scss";
+@import "./time-select.scss";
+@import "./time-picker.scss";
+@import "./popover.scss";
+@import "./tooltip.scss";
+@import "./message-box.scss";
+@import "./breadcrumb.scss";
+@import "./breadcrumb-item.scss";
+@import "./form.scss";
+@import "./form-item.scss";
+@import "./tabs.scss";
+@import "./tab-pane.scss";
+@import "./tag.scss";
+@import "./tree.scss";
+@import "./alert.scss";
+@import "./notification.scss";
+@import "./slider.scss";
+@import "./loading.scss";
+@import "./row.scss";
+@import "./col.scss";
+@import "./upload.scss";
+@import "./progress.scss";
+@import "./spinner.scss";
+@import "./message.scss";
+@import "./badge.scss";
+@import "./card.scss";
+@import "./rate.scss";
+@import "./steps.scss";
+@import "./step.scss";
+@import "./carousel.scss";
+@import "./scrollbar.scss";
+@import "./carousel-item.scss";
+@import "./collapse.scss";
+@import "./collapse-item.scss";
+@import "./cascader.scss";
+@import "./color-picker.scss";
+@import "./transfer.scss";
+@import "./container.scss";
+@import "./header.scss";
+@import "./aside.scss";
+@import "./main.scss";
+@import "./footer.scss";

package/packages/theme-chalk/src/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};
+      }
+    }
+  }
+}