eoss-ui 0.7.14 → 0.7.16

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

@@ -1,499 +1,499 @@
-@import './common/var.scss';
-.hidden-input {
-  position: absolute;
-  z-index: -9999;
-  opacity: 0;
-  top: -9999px;
-}
-.es-input__inner {
-  display: block;
-  flex: 1;
-  height: 40px;
-  line-height: 38px;
-  padding: 0 10px;
-  border: $--input-border;
-  border-radius: $--input-border-radius;
-  color: $--input-font-color;
-  &.es-disabled-tips {
-    color: rgba(0, 0, 0, 0.25);
-    text-align: center;
-    background-color: rgba(0, 0, 0, 0.04);
-    border-color: rgba(0, 0, 0, 0.12);
-  }
-}
-div.es-input__inner {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.es-textarea__inner {
-  min-height: 40px;
-  padding: 5px 15px;
-  line-height: 1.5;
-  color: $--input-font-color;
-  border: $--input-border;
-  border-radius: $--input-border-radius;
-  word-wrap: break-word;
-  word-break: break-all;
-  display: flex;
-  align-items: center;
-}
-.es-input {
-  display: block;
-  line-height: 40px;
-}
-.es-textarea {
-  min-height: 40px;
-}
-.es-form {
-  background-color: #ffffff;
-  .es-form-content {
-    &::after {
-      content: '';
-      display: block;
-      height: 0;
-      clear: both;
-    }
-    .el-scrollbar__view {
-      padding: 12px 24px 0 12px;
-      &::after {
-        content: '';
-        display: block;
-        height: 0;
-        clear: both;
-      }
-    }
-    &.es-form-padding {
-      padding: 12px 24px 0 12px;
-    }
-  }
-  .es-form-item-caption {
-    display: inline-block;
-    width: 100%;
-    text-align: left;
-    font-size: 15px;
-    font-weight: bold;
-    height: 40px;
-    line-height: 42px;
-    padding: 0 8px;
-    margin-top: -22px;
-    margin-bottom: 22px;
-    border-bottom: 1px solid $--border-color-base;
-  }
-  .el-autocomplete,
-  .el-input-number,
-  .el-select,
-  .el-cascader {
-    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;
-    }
-  }
-  .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;
-      }
-
-      &:first-child {
-        &.es-toolbar-item-radio + .el-form-item .el-input__inner,
-        &.es-toolbar-item-checkbox + .el-form-item .el-input__inner,
-        &.es-toolbar-item-switch + .el-form-item .el-input__inner,
-        .el-input__inner {
-          border-top-left-radius: $--input-border-radius;
-          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 {
-        height: 45px;
-        line-height: 45px;
-        padding-left: 14px;
-        font-size: 16px;
-        font-weight: bold;
-        border-bottom-color: $--border-color-base;
-        &::before {
-          content: '';
-          width: 4px;
-          height: 18px;
-          background-color: $--color-primary;
-          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;
-        clear: both;
-      }
-    }
-  }
-  .es-plain {
-    border: 0;
-    .es-input__inner,
-    .es-textarea__inner {
-      border: 0;
-    }
-  }
-  .es-form-item-table {
-    .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;
-      .es-range {
-        padding: 0 8px;
-        color: #c0c4cc;
-        line-height: 40px;
-      }
-      & > div:not(.es-range):not(.es-flex-none):not(.fixed-width) {
-        flex: 1;
-      }
-    }
-    .el-form-item__error {
-      bottom: -16px;
-    }
-    & > .el-form-item:not(.fixed-width) {
-      flex: 1;
-    }
-    .es-button-inline {
-      margin-left: 12px;
-    }
-  }
-  .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;
-      font-weight: bold;
-      height: 40px;
-      line-height: 42px;
-      padding: 0 8px;
-    }
-    td {
-      &.es-table-form-item {
-        padding: 0;
-        position: relative;
-        vertical-align: top;
-        &.td-disabled {
-          background-color: #f5f5f5;
-        }
-        .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;
-          &.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;
-            }
-          }
-          .is-disabled .el-input__inner,
-          .is-disabled .el-textarea__inner {
-            background-color: #f5f5f5;
-          }
-        }
-        .el-form-item__error {
-          z-index: 1001;
-          background-color: #e4e7ed;
-        }
-        .es-upload {
-          padding: 48px 8px 8px;
-          position: relative;
-          &.es-avatar-uploader {
-            display: block;
-          }
-          &.es-upload-readonly {
-            padding-top: 8px;
-          }
-          .el-upload--handle {
-            position: absolute;
-            right: 8px;
-            top: 8px;
-          }
-          .el-upload {
-            line-height: normal;
-          }
-          .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;
-          top: 0;
-          right: -1px;
-          border-left: 1px solid #fff;
-          border-right: 1px solid #fff;
-        }
-      }
-    }
-    .es-table-form-label {
-      padding: 2px 10px;
-      line-height: 36px;
-      background-color: #fafafa;
-      position: relative;
-      &.is-required {
-        &::after {
-          content: '*';
-          color: #f5222d;
-          position: absolute;
-          left: 4px;
-        }
-        &.required-after::after {
-          left: auto;
-          right: 4px;
-        }
-      }
-    }
-    & ~ .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-row {
-    .es-form-padding {
-      padding: 12px 0 0;
-    }
-    .el-form-item {
-      padding: 0 12px;
-    }
-  }
-}
-.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;
-}
+@import './common/var.scss';
+.hidden-input {
+  position: absolute;
+  z-index: -9999;
+  opacity: 0;
+  top: -9999px;
+}
+.es-input__inner {
+  display: block;
+  flex: 1;
+  height: 40px;
+  line-height: 38px;
+  padding: 0 10px;
+  border: $--input-border;
+  border-radius: $--input-border-radius;
+  color: $--input-font-color;
+  &.es-disabled-tips {
+    color: rgba(0, 0, 0, 0.25);
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-color: rgba(0, 0, 0, 0.12);
+  }
+}
+div.es-input__inner {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.es-textarea__inner {
+  min-height: 40px;
+  padding: 5px 15px;
+  line-height: 1.5;
+  color: $--input-font-color;
+  border: $--input-border;
+  border-radius: $--input-border-radius;
+  word-wrap: break-word;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+}
+.es-input {
+  display: block;
+  line-height: 40px;
+}
+.es-textarea {
+  min-height: 40px;
+}
+.es-form {
+  background-color: #ffffff;
+  .es-form-content {
+    &::after {
+      content: '';
+      display: block;
+      height: 0;
+      clear: both;
+    }
+    .el-scrollbar__view {
+      padding: 12px 24px 0 12px;
+      &::after {
+        content: '';
+        display: block;
+        height: 0;
+        clear: both;
+      }
+    }
+    &.es-form-padding {
+      padding: 12px 24px 0 12px;
+    }
+  }
+  .es-form-item-caption {
+    display: inline-block;
+    width: 100%;
+    text-align: left;
+    font-size: 15px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 42px;
+    padding: 0 8px;
+    margin-top: -22px;
+    margin-bottom: 22px;
+    border-bottom: 1px solid $--border-color-base;
+  }
+  .el-autocomplete,
+  .el-input-number,
+  .el-select,
+  .el-cascader {
+    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;
+    }
+  }
+  .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;
+      }
+
+      &:first-child {
+        &.es-toolbar-item-radio + .el-form-item .el-input__inner,
+        &.es-toolbar-item-checkbox + .el-form-item .el-input__inner,
+        &.es-toolbar-item-switch + .el-form-item .el-input__inner,
+        .el-input__inner {
+          border-top-left-radius: $--input-border-radius;
+          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 {
+        height: 45px;
+        line-height: 45px;
+        padding-left: 14px;
+        font-size: 16px;
+        font-weight: bold;
+        border-bottom-color: $--border-color-base;
+        &::before {
+          content: '';
+          width: 4px;
+          height: 18px;
+          background-color: $--color-primary;
+          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;
+        clear: both;
+      }
+    }
+  }
+  .es-plain {
+    border: 0;
+    .es-input__inner,
+    .es-textarea__inner {
+      border: 0;
+    }
+  }
+  .es-form-item-table {
+    .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;
+      .es-range {
+        padding: 0 8px;
+        color: #c0c4cc;
+        line-height: 40px;
+      }
+      & > div:not(.es-range):not(.es-flex-none):not(.fixed-width) {
+        flex: 1;
+      }
+    }
+    .el-form-item__error {
+      bottom: -16px;
+    }
+    & > .el-form-item:not(.fixed-width) {
+      flex: 1;
+    }
+    .es-button-inline {
+      margin-left: 12px;
+    }
+  }
+  .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;
+      font-weight: bold;
+      height: 40px;
+      line-height: 42px;
+      padding: 0 8px;
+    }
+    td {
+      &.es-table-form-item {
+        padding: 0;
+        position: relative;
+        vertical-align: top;
+        &.td-disabled {
+          background-color: #f5f5f5;
+        }
+        .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;
+          &.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;
+            }
+          }
+          .is-disabled .el-input__inner,
+          .is-disabled .el-textarea__inner {
+            background-color: #f5f5f5;
+          }
+        }
+        .el-form-item__error {
+          z-index: 1001;
+          background-color: #e4e7ed;
+        }
+        .es-upload {
+          padding: 48px 8px 8px;
+          position: relative;
+          &.es-avatar-uploader {
+            display: block;
+          }
+          &.es-upload-readonly {
+            padding-top: 8px;
+          }
+          .el-upload--handle {
+            position: absolute;
+            right: 8px;
+            top: 8px;
+          }
+          .el-upload {
+            line-height: normal;
+          }
+          .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;
+          top: 0;
+          right: -1px;
+          border-left: 1px solid #fff;
+          border-right: 1px solid #fff;
+        }
+      }
+    }
+    .es-table-form-label {
+      padding: 2px 10px;
+      line-height: 36px;
+      background-color: #fafafa;
+      position: relative;
+      &.is-required {
+        &::after {
+          content: '*';
+          color: #f5222d;
+          position: absolute;
+          left: 4px;
+        }
+        &.required-after::after {
+          left: auto;
+          right: 4px;
+        }
+      }
+    }
+    & ~ .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-row {
+    .es-form-padding {
+      padding: 12px 0 0;
+    }
+    .el-form-item {
+      padding: 0 12px;
+    }
+  }
+}
+.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;
+}