eoss-ui 0.4.46 → 0.4.48

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

@@ -1,6 +1,8 @@
 @import './common/var.scss';
+
 .es-form {
   background-color: #ffffff;
+
   .es-form-content {
     &::after {
       content: '';
@@ -8,8 +10,10 @@
       height: 0;
       clear: both;
     }
+
     .el-scrollbar__view {
       padding: 12px 24px 0 12px;
+
       &::after {
         content: '';
         display: block;
@@ -17,10 +21,12 @@
         clear: both;
       }
     }
+
     &.es-form-padding {
       padding: 12px 24px 0 12px;
     }
   }
+
   .es-form-item-caption {
     display: inline-block;
     width: 100%;
@@ -34,6 +40,7 @@
     margin-bottom: 22px;
     border-bottom: 1px solid $--border-color-base;
   }
+
   .el-autocomplete,
   .el-input-number,
   .el-select,
@@ -41,37 +48,46 @@
     width: 100%;
     display: block;
   }
+
   .is-without-controls {
     .el-input__inner {
       text-align: left;
     }
   }
+
   .el-form-item {
     .es-label-box {
       display: flex;
     }
+
     &.is-required:not(.is-no-asterisk) {
       .required-after {
         position: relative;
+
         &::before {
           content: none !important;
         }
+
         &::after {
           content: '*';
           color: $--color-danger;
         }
+
         &.required-position::after {
           position: absolute;
         }
+
         &.es-label-box::after {
           right: 4px;
         }
       }
     }
+
     .es-toolbar {
       border: 0;
     }
   }
+
   .es-input__inner {
     display: block;
     flex: 1;
@@ -82,11 +98,13 @@
     border-radius: $--input-border-radius;
     color: $--input-font-color;
   }
+
   div.es-input__inner {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
+
   .es-textarea__inner {
     min-height: 40px;
     padding: 5px 15px;
@@ -99,27 +117,34 @@
     display: flex;
     align-items: center;
   }
+
   .es-input {
     display: block;
     line-height: 40px;
   }
+
   .es-textarea {
     min-height: 40px;
   }
+
   .el-form-item__content {
     line-height: normal;
+
     .el-upload {
       line-height: 40px;
     }
   }
+
   .es-form-button {
     text-align: center;
     padding: 8px 12px;
   }
+
   &.es-form-group:not(.es-form-search-nobtn) {
     .el-form-item {
       margin-right: 0;
       float: left;
+
       .el-input__inner {
         border-radius: 0;
         border-right: 0;
@@ -134,34 +159,42 @@
           border-bottom-left-radius: $--input-border-radius;
         }
       }
+
       &:last-child {
         .el-input__inner {
           border-top-right-radius: $--input-border-radius;
           border-bottom-right-radius: $--input-border-radius;
         }
+
         .el-button:first-child {
           border-top-left-radius: 0;
           border-bottom-left-radius: 0;
         }
       }
+
       .el-form-item__label {
         display: none;
       }
     }
+
     .es-form-button {
       display: inline-block;
       text-align: center;
     }
   }
+
   .es-collapse {
     border: 0;
+
     .es-collapse-item {
       border-top: 0;
+
       .el-collapse-item__header {
         padding-left: 14px;
         font-size: 16px;
         font-weight: bold;
         border-bottom-color: $--border-color-base;
+
         &::before {
           content: '';
           width: 4px;
@@ -170,31 +203,38 @@
           margin-right: 2px;
         }
       }
+
       .el-collapse-item__wrap {
         padding-top: 16px;
         border-bottom: 0;
       }
+
       &.es-collapse-readonly {
         .el-collapse-item__header {
           cursor: default;
         }
       }
+
       &.is-active {
         &.es-collapse-readonly {
           border-top: 0;
         }
       }
+
       &:last-child {
         margin-bottom: 0;
       }
+
       &.es-collapse-caption {
         .el-collapse-item__wrap {
           padding-top: 0;
         }
       }
     }
+
     .el-collapse-item__content {
       padding: 0 12px;
+
       &::after {
         content: '';
         display: table;
@@ -202,51 +242,65 @@
       }
     }
   }
+
   .es-plain {
     border: 0;
+
     .es-input__inner,
     .es-textarea__inner {
       border: 0;
     }
   }
+
   .es-form-item-table {
     .el-form-item__content {
       margin-left: 0 !important;
     }
+
     .es-data-table-content,
     .el-scrollbar__view {
       padding: 0 !important;
     }
   }
+
   .es-form-table-data {
     .es-data-form {
       margin: -1px;
     }
   }
+
   .es-form-item-inline {
     .el-form-item__content {
       display: flex;
+      align-items: center;
+
       .es-range {
         padding: 0 8px;
         color: #c0c4cc;
         line-height: 40px;
       }
+
       & > div:not(.es-range):not(.es-flex-none) {
         flex: 1;
+        height: 100%;
       }
     }
+
     .el-form-item__error {
       bottom: -16px;
     }
   }
+
   .es-form-item-onrow {
     .el-form-item__content {
       margin-right: 50%;
     }
   }
+
   .es-table-form {
     margin-bottom: 24px;
     border: $--border-base;
+
     .es-table-caption {
       text-align: left;
       font-size: 15px;
@@ -255,111 +309,169 @@
       line-height: 42px;
       padding: 0 8px;
     }
+
     td {
       &.es-table-form-item {
         padding: 0;
         position: relative;
         vertical-align: top;
+        height: 40px;
+
         .el-input__inner,
         .el-textarea__inner {
           border-width: 0;
         }
+
         .el-input-number__decrease,
         .el-input-number__increase {
           top: 0;
           bottom: 0;
           border-radius: 0;
         }
+
         .el-input-number__decrease {
           left: 0;
         }
+
         .el-input-number__increase {
           right: 0;
         }
+
         .el-form-item {
           margin: 0;
+          height: 100%;
+
           &.is-error {
             .el-input__inner,
             .el-textarea__inner {
               border-width: 1px;
               border-radius: 4px;
             }
+
             .el-input-number__decrease,
             .el-input-number__increase {
               top: 1px;
               bottom: 1px;
             }
+
             .el-input-number__decrease {
               left: 1px;
               border-radius: 4px 0 0 4px;
             }
+
             .el-input-number__increase {
               border-radius: 0 4px 4px 0;
               right: 1px;
             }
           }
+
+          &:not(.es-form-item-inline) {
+            .el-form-item__content {
+              height: 100%;
+
+              .el-select {
+                height: 100%;
+              }
+            }
+          }
+
+          .el-form-item__content {
+            height: 100%;
+
+            & > div:not(.el-select):not(.es-range) {
+              transform: translateY(-50%);
+              top: 50%;
+              position: relative;
+              height: 100%;
+            }
+
+            .is-disabled {
+              height: 100%;
+
+              input,
+              textarea {
+                height: 100%;
+              }
+            }
+          }
         }
+
         .el-form-item__error {
           z-index: 1001;
           background-color: #e4e7ed;
         }
+
         .es-upload {
           padding: 40px 8px 8px;
           position: relative;
+
           &.es-upload-readonly {
             padding-top: 8px;
           }
+
           .el-upload {
             line-height: normal;
             position: absolute;
             right: 8px;
             top: 8px;
           }
+
           .el-upload-list--text {
             margin-top: 0;
           }
         }
+
         .el-checkbox-group,
         .el-radio-group,
         .es-switch-content {
           padding: 0 8px;
         }
+
         .es-input__inner,
         .es-textarea__inner {
           border: 0;
         }
+
         .es-select-ganged {
           .el-select {
             margin-left: 0;
           }
         }
+
         .el-input-group__append,
         .el-input-group__prepend {
           border: 0;
           border-radius: 0;
         }
       }
+
       &.es-align-middle {
         vertical-align: middle;
       }
+
       &.es-table-form-data {
         padding: 0;
+
         .es-data-table {
           .es-table {
             border: 0;
+
             &::before {
               height: 0;
             }
           }
         }
+
         .el-scrollbar__view {
           padding: 0;
         }
       }
+
       &.es-table-td-caption {
         padding: 0;
         position: relative;
         height: 40px;
+
         .es-table-caption {
           position: absolute;
           left: -1px;
@@ -370,82 +482,100 @@
         }
       }
     }
+
     .es-table-form-label {
       padding: 2px 10px;
       line-height: 36px;
       background-color: #fafafa;
     }
+
     & ~ .es-data-table {
       margin-bottom: 24px;
     }
   }
+
   .el-input__prefix,
   .el-input__suffix {
     line-height: 38px;
   }
+
   &.es-form-table {
     .el-scrollbar__view {
       padding: 12px 12px 0 12px;
     }
+
     .es-form-padding {
       padding: 12px 12px 0 12px;
     }
   }
+
   &.es-form-inside-dialog {
     .es-form-button {
       text-align: right;
     }
   }
 }
+
 .es-form-item-label-hide {
   .el-form-item__label {
     display: none;
   }
+
   .el-form-item__content {
     margin-left: 0 !important;
   }
 }
+
 .es-input-button-prefix {
   .el-input__inner {
     padding-left: 70px;
   }
 }
+
 .es-input-button-suffix {
   .el-input__inner {
     padding-right: 60px;
   }
 }
+
 .es-select-button-prefix {
   .el-input__inner {
     padding-left: 60px;
   }
 }
+
 .es-select-button-suffix {
   .el-input__inner {
     padding-right: 70px;
   }
 }
+
 .es-collapse-title,
 .es-collapse-title-handler {
   display: flex;
   align-items: center;
+
   .es-label {
     white-space: nowrap;
   }
+
   span ~ span,
   span ~ div,
   span ~ i {
     margin-left: 8px;
   }
+
   .es-icon-delete,
   .el-icon-delete {
     color: $--color-primary;
     cursor: pointer;
   }
 }
+
 .es-collapse-title-handler + .es-collapse-title-handler {
   margin-left: 8px;
 }
+
 .es-form-inline {
   display: flex;
 }

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

@@ -118,9 +118,6 @@
     color: #ffffff;
   }
 }
-.es-setting-title {
-  font-size: 16px;
-}
 .es-color-picker {
   padding-left: 24px;
   .el-color-picker-tip {

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

@@ -16,7 +16,7 @@
   }
 }
 .es-login {
-  width: 600px;
+  width: 540px;
   position: absolute;
   padding: 0 12px;
   .es-login-name {
@@ -150,6 +150,18 @@
       background-color: #f7f7f7;
       border-radius: 10px;
       padding-left: 52px;
+      &::-webkit-input-placeholder {
+        font-size: 16px;
+      }
+      &:-moz-placeholder {
+        font-size: 16px;
+      }
+      &::-moz-placeholder {
+        font-size: 16px;
+      }
+      &:-ms-input-placeholder {
+        font-size: 16px;
+      }
     }
 
     .el-input__prefix {
@@ -197,7 +209,6 @@
 
     .es-password-handle {
       height: 22px;
-      display: flex;
       justify-content: space-between;
       margin-top: -8px;
       margin-bottom: 40px;
@@ -228,11 +239,9 @@
       .es-password-forget {
         font-size: 16px;
         color: #999999;
-        flex: 1;
         text-align: right;
-        span {
-          cursor: pointer;
-        }
+        float: right;
+        cursor: pointer;
       }
     }
 
@@ -272,6 +281,38 @@
       border: $--border-base;
     }
   }
+  &.es-simple {
+    .es-login-form {
+      .el-input__inner {
+        border-width: 0 0 1px 0;
+        border-radius: 0;
+        background-color: #fff;
+        padding-left: 32px;
+        padding-right: 16px;
+        box-shadow: none;
+        &::-webkit-input-placeholder {
+          font-size: 16px;
+          color: #999999;
+        }
+        &:-moz-placeholder {
+          font-size: 16px;
+          color: #999999;
+        }
+        &::-moz-placeholder {
+          font-size: 16px;
+          color: #999999;
+        }
+        &:-ms-input-placeholder {
+          font-size: 16px;
+          color: #999999;
+        }
+      }
+    }
+
+    .el-input__prefix {
+      left: 0;
+    }
+  }
 
   @media screen and (max-width: 1600px) {
     & {

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

@@ -242,9 +242,61 @@
     padding: 16px 20px;
   }
 }
-
+.es-setting-item {
+  & + .es-setting-item {
+    border-top: $--border-base;
+    padding-top: 20px;
+    margin-top: 20px;
+  }
+  .es-setting-navs-box {
+    display: flex;
+  }
+  .es-setting-navs {
+    width: 44px;
+    height: 36px;
+    border-radius: 2px;
+    position: relative;
+    overflow: hidden;
+    background-color: $--color-primary;
+    margin-right: 12px;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 10px;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      background-color: #f0f2f5;
+    }
+    &.es-setting-side-nav {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        width: 6px;
+        top: 10px;
+        bottom: 0;
+        z-index: 2;
+        background-color: $--color-primary-light-8;
+      }
+      .es-setting-side-sub-nav {
+        width: 12px;
+        position: absolute;
+        left: 6px;
+        top: 10px;
+        bottom: 0;
+        z-index: 3;
+        background-color: $--color-primary-light-10;
+      }
+    }
+  }
+}
 .es-setting-title {
   margin-bottom: 12px;
+  font-size: 14px;
 }
 
 .es-setting-theme {
@@ -473,8 +525,11 @@
     .el-dialog__title {
       color: #fff;
     }
-    .el-dialog__headerbtn .el-dialog__close {
-      color: #fff;
+    .el-dialog__headerbtn .el-icon {
+      color: #fff !important;
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
   .el-dialog__body {