plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/packages/components/Input/index.scss

@@ -1,400 +1,400 @@
-@include prefix(input) {
-  display: inline-flex;
-  width: 100%;
-  align-items: stretch;
-  box-sizing: border-box;
-  transition: all .1s cubic-bezier(0, 0, 1, 1);
-  border: solid 1px transparent;
-  position: relative;
-
-  /*重置input，textarea的默认样式*/
-  input, textarea {
-    padding: 0;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    color: inherit;
-
-    &::placeholder {
-      color: plv(text-placeholder);
-    }
-
-    &::-ms-clear {
-      display: none;
-    }
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none !important;
-      margin: 0;
-    }
-
-    &:-webkit-autofill {
-      background-color: transparent !important;
-      -webkit-transition: background-color 10000s cubic-bezier(1, -100, 1, -100) 0s !important;
-    }
-  }
-
-  /*input-box负责撑开高度*/
-  .input-box {
-    min-width: 0;
-    border: none;
-    background-color: transparent;
-    box-sizing: border-box;
-    line-height: 1.5715;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    color: plv(text-2);
-  }
-
-  /*input-fill负责撑开宽度*/
-  .input-fill {
-    flex: 1;
-  }
-
-  /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
-  & > div, & > span, & > input, & > textarea {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    padding-right: plv(input-padding-x);
-    padding-left: plv(input-padding-x);
-
-    &:not(:first-child) {
-      border-left: solid 1px plv(border-color);
-    }
-  }
-
-  /*prefix icon and suffix icon*/
-
-  /*prefix icon右侧的input-box不需要左边框以及左边距*/
-  .input-prefix-icon {
-    & + .input-box {
-      padding-left: 0;
-      border-left: none;
-    }
-  }
-
-  .input-suffix-icon-wrapper {
-    position: relative;
-    box-sizing: content-box;
-    cursor: pointer;
-    user-select: none;
-    padding: 0;
-
-    /*suffix icon wrapper不需要左边框，左边距有冗余的宽度实现*/
-    &:not(:first-child) {
-      border-left: none;
-    }
-
-    &, & .input-suffix-icon, & .input-suffix-clear {
-      transition: all ease 300ms;
-    }
-
-    &:active {
-      opacity: 0.5;
-      transition: none;
-    }
-
-    /*suffix icon wrapper里边的icon，clear以及loading 覆盖显示*/
-    .input-suffix-icon, .input-suffix-clear, .#{componentName(loading)} {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: auto;
-      width: auto;
-    }
-  }
-
-  /*suffix clear默认不显示，hover的时候才显示*/
-  .input-suffix-icon-wrapper {
-    .input-suffix-clear {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
-  &.input-has-suffix-clear:hover {
-    .input-suffix-icon-wrapper {
-      .input-suffix-clear {
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      .input-suffix-icon {
-        opacity: 0;
-        pointer-events: none;
-      }
-    }
-
-    &.input-has-suffix-icon {
-      &.input-empty {
-        .input-suffix-icon-wrapper {
-          .input-suffix-clear {
-            opacity: 0;
-            pointer-events: none;
-          }
-
-          .input-suffix-icon {
-            opacity: 1;
-            pointer-events: auto;
-          }
-        }
-      }
-    }
-  }
-
-  /*有clear，suffix icon或者loading的时候，input-box不需要右边距*/
-  &.input-has-suffix-clear, &.input-has-suffix-icon, &.input-loading {
-    .input-box {
-      padding-right: 0;
-    }
-  }
-
-  &.input-loading {
-    .input-suffix-icon, .input-suffix-clear {
-      display: none;
-    }
-  }
-
-  /*input size*/
-
-  @include sizeMixin(input, ()) {
-    &.input-shape-square {
-      border-radius: $border-radius;
-    }
-    &.input-shape-round {
-      border-radius: calc(#{$height} - 2px);
-    }
-    font-size: $font-size;
-    .input-box {
-      font-size: $font-size;
-      height: calc(#{$height} - 2px);
-    }
-
-    /*prefix icon以及suffix icon的宽度与高度相同，显示为正方形*/
-    .input-prefix-icon {
-      width: $height;
-    }
-    .input-suffix-icon-wrapper {
-      width: 18px;
-    }
-
-    &.input-size-mini {
-      .input-box {
-        line-height: 1.667;
-      }
-    }
-  }
-
-  /*input status*/
-
-  @include statusMixin(input) {
-
-    &.input-mode-flat {
-      background-color: $color-light-1;
-      border-color: $color-light-3;
-    }
-    &.input-mode-stroke {
-      background-color: plv(background-color);
-      border-color: $color-3;
-    }
-    @include hover(input) {
-      background-color: $color-light-3;
-      border-color: $color-light-4;
-    }
-    @include focus(input) {
-      border-color: $color-5;
-      /*background-color: $color-light-1;
-      box-shadow: 0 0 0 2px $color-2;*/
-      background-color: plv(background-color);
-      box-shadow: 0 0 0 2px $color-2;
-      z-index: 2;
-    }
-    .input-suffix-icon-wrapper {
-      color: $color-6;
-    }
-  }
-
-  /*input align*/
-  /*@formatter:off*/
-  &.input-align-left { .input-box{text-align: left} }
-  &.input-align-center { .input-box{text-align: center} }
-  &.input-align-right { .input-box{text-align: right} }
-  /*@formatter:on*/
-
-  .input-suffix-max-length {
-    font-size: 12px;
-  }
-
-  &.input-disabled {
-    background-color: plv(secondary-light-1) !important;
-    border-color: plv(secondary-light-2) !important;
-
-    .input-prefix-icon, .input-suffix-icon {
-      color: plv(text-3);
-    }
-
-    &, & * {
-      cursor: not-allowed !important;
-    }
-  }
-
-  /*---------------------------------------multiple-------------------------------------------*/
-
-  &.input-multiple {
-    vertical-align: 0.05em;
-
-    .input-box.input-tag-container {
-      height: auto;
-      cursor: text;
-      padding-bottom: 0;
-
-      .input-tag {
-        font-size: 12px;
-        //max-width: 100%;
-        margin-right: 3px;
-        background-color: plv(secondary-1);
-        padding: 0 4px;
-        border-radius: plv(box-size-normal-border-radius);
-        border: solid 1px plv(border-color);
-        box-sizing: border-box;
-        white-space: nowrap;
-        line-height: 1.5;
-
-        @include prefix(icon) {
-          cursor: pointer;
-        }
-
-        &.input-tag-takeover {
-          width: 0;
-          white-space: nowrap;
-          overflow: hidden;
-          padding-left: 0;
-          padding-right: 0;
-          margin-right: 0;
-          border: none;
-        }
-      }
-
-      & > * {
-        margin-bottom: 3px;
-      }
-
-      &:not(.input-tag-container-wrap) {
-        flex-wrap: nowrap;
-        overflow: hidden;
-        background-color: inherit;
-
-        & > * {
-          flex-grow: 0;
-          flex-shrink: 0;
-        }
-
-        .custom-auto-width-input {
-          position: sticky;
-          right: 0;
-          background-color: inherit;
-        }
-      }
-    }
-
-    @include sizeMixin(input, ()) {
-      .input-tag-container {
-        display: inline-flex;
-        flex-wrap: wrap;
-        border-radius: plv(box-size-#{$name}-border-radius);
-
-        & > * {
-          padding: 0;
-          height: calc(#{$height} - 8px);
-        }
-
-        .input-tag {
-          border-radius: $border-radius;
-          height: calc(#{$height} - 8px);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-
-    &:not(.input-empty) {
-      .input-box.input-tag-container {
-        padding-left: 3px;
-      }
-    }
-
-    &.input-empty {
-      .input-tag-container {
-        .custom-auto-width-input {
-          flex: 1;
-        }
-      }
-    }
-  }
-
-  /*---------------------------------------textarea-------------------------------------------*/
-
-  &.input-textarea {
-    vertical-align: 0.05em;
-
-    .input-textarea-container {
-      padding: 0;
-      height: auto;
-
-      span, textarea {
-        display: inline-block;
-        padding: 3px 12px;
-        box-sizing: border-box;
-        line-height: 1.5715;
-        word-break: break-all;
-      }
-
-      span {
-        opacity: 0;
-        pointer-events: none;
-        min-height: calc(30px + 2em);
-        //height: 30px;
-      }
-
-      textarea {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        box-sizing: border-box;
-        resize: vertical;
-        max-height: 100%;
-        min-height: 100%;
-      }
-
-      &:not(.input-textarea-has-height) {
-        textarea {
-          overflow: hidden;
-        }
-      }
-
-      &.input-textarea-has-height {
-        span, textarea {
-          overflow: auto;
-        }
-      }
-    }
-
-    .input-suffix-max-length {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      padding-bottom: 4px;
-      border: none;
-      pointer-events: none;
-    }
-  }
-}
+@include prefix(input) {
+  display: inline-flex;
+  width: 100%;
+  align-items: stretch;
+  box-sizing: border-box;
+  transition: all .1s cubic-bezier(0, 0, 1, 1);
+  border: solid 1px transparent;
+  position: relative;
+
+  /*重置input，textarea的默认样式*/
+  input, textarea {
+    padding: 0;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: inherit;
+
+    &::placeholder {
+      color: plv(text-placeholder);
+    }
+
+    &::-ms-clear {
+      display: none;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none !important;
+      margin: 0;
+    }
+
+    &:-webkit-autofill {
+      background-color: transparent !important;
+      -webkit-transition: background-color 10000s cubic-bezier(1, -100, 1, -100) 0s !important;
+    }
+  }
+
+  /*input-box负责撑开高度*/
+  .input-box {
+    min-width: 0;
+    border: none;
+    background-color: transparent;
+    box-sizing: border-box;
+    line-height: 1.5715;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    color: plv(text-2);
+  }
+
+  /*input-fill负责撑开宽度*/
+  .input-fill {
+    flex: 1;
+  }
+
+  /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
+  & > div, & > span, & > input, & > textarea {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding-right: plv(input-padding-x);
+    padding-left: plv(input-padding-x);
+
+    &:not(:first-child) {
+      border-left: solid 1px plv(border-color);
+    }
+  }
+
+  /*prefix icon and suffix icon*/
+
+  /*prefix icon右侧的input-box不需要左边框以及左边距*/
+  .input-prefix-icon {
+    & + .input-box {
+      padding-left: 0;
+      border-left: none;
+    }
+  }
+
+  .input-suffix-icon-wrapper {
+    position: relative;
+    box-sizing: content-box;
+    cursor: pointer;
+    user-select: none;
+    padding: 0;
+
+    /*suffix icon wrapper不需要左边框，左边距有冗余的宽度实现*/
+    &:not(:first-child) {
+      border-left: none;
+    }
+
+    &, & .input-suffix-icon, & .input-suffix-clear {
+      transition: all ease 300ms;
+    }
+
+    &:active {
+      opacity: 0.5;
+      transition: none;
+    }
+
+    /*suffix icon wrapper里边的icon，clear以及loading 覆盖显示*/
+    .input-suffix-icon, .input-suffix-clear, .#{componentName(loading)} {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: auto;
+      width: auto;
+    }
+  }
+
+  /*suffix clear默认不显示，hover的时候才显示*/
+  .input-suffix-icon-wrapper {
+    .input-suffix-clear {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &.input-has-suffix-clear:hover {
+    .input-suffix-icon-wrapper {
+      .input-suffix-clear {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .input-suffix-icon {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    &.input-has-suffix-icon {
+      &.input-empty {
+        .input-suffix-icon-wrapper {
+          .input-suffix-clear {
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          .input-suffix-icon {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+      }
+    }
+  }
+
+  /*有clear，suffix icon或者loading的时候，input-box不需要右边距*/
+  &.input-has-suffix-clear, &.input-has-suffix-icon, &.input-loading {
+    .input-box {
+      padding-right: 0;
+    }
+  }
+
+  &.input-loading {
+    .input-suffix-icon, .input-suffix-clear {
+      display: none;
+    }
+  }
+
+  /*input size*/
+
+  @include sizeMixin(input, ()) {
+    &.input-shape-square {
+      border-radius: $border-radius;
+    }
+    &.input-shape-round {
+      border-radius: calc(#{$height} - 2px);
+    }
+    font-size: $font-size;
+    .input-box {
+      font-size: $font-size;
+      height: calc(#{$height} - 2px);
+    }
+
+    /*prefix icon以及suffix icon的宽度与高度相同，显示为正方形*/
+    .input-prefix-icon {
+      width: $height;
+    }
+    .input-suffix-icon-wrapper {
+      width: 18px;
+    }
+
+    &.input-size-mini {
+      .input-box {
+        line-height: 1.667;
+      }
+    }
+  }
+
+  /*input status*/
+
+  @include statusMixin(input) {
+
+    &.input-mode-flat {
+      background-color: $color-light-1;
+      border-color: $color-light-3;
+    }
+    &.input-mode-stroke {
+      background-color: plv(background-color);
+      border-color: $color-3;
+    }
+    @include hover(input) {
+      background-color: $color-light-3;
+      border-color: $color-light-4;
+    }
+    @include focus(input) {
+      border-color: $color-5;
+      /*background-color: $color-light-1;
+      box-shadow: 0 0 0 2px $color-2;*/
+      background-color: plv(background-color);
+      box-shadow: 0 0 0 2px $color-2;
+      z-index: 2;
+    }
+    .input-suffix-icon-wrapper {
+      color: $color-6;
+    }
+  }
+
+  /*input align*/
+  /*@formatter:off*/
+  &.input-align-left { .input-box{text-align: left} }
+  &.input-align-center { .input-box{text-align: center} }
+  &.input-align-right { .input-box{text-align: right} }
+  /*@formatter:on*/
+
+  .input-suffix-max-length {
+    font-size: 12px;
+  }
+
+  &.input-disabled {
+    background-color: plv(secondary-light-1) !important;
+    border-color: plv(secondary-light-2) !important;
+
+    .input-prefix-icon, .input-suffix-icon {
+      color: plv(text-3);
+    }
+
+    &, & * {
+      cursor: not-allowed !important;
+    }
+  }
+
+  /*---------------------------------------multiple-------------------------------------------*/
+
+  &.input-multiple {
+    vertical-align: 0.05em;
+
+    .input-box.input-tag-container {
+      height: auto;
+      cursor: text;
+      padding-bottom: 0;
+
+      .input-tag {
+        font-size: 12px;
+        //max-width: 100%;
+        margin-right: 3px;
+        background-color: plv(secondary-1);
+        padding: 0 4px;
+        border-radius: plv(box-size-normal-border-radius);
+        border: solid 1px plv(border-color);
+        box-sizing: border-box;
+        white-space: nowrap;
+        line-height: 1.5;
+
+        @include prefix(icon) {
+          cursor: pointer;
+        }
+
+        &.input-tag-takeover {
+          width: 0;
+          white-space: nowrap;
+          overflow: hidden;
+          padding-left: 0;
+          padding-right: 0;
+          margin-right: 0;
+          border: none;
+        }
+      }
+
+      & > * {
+        margin-bottom: 3px;
+      }
+
+      &:not(.input-tag-container-wrap) {
+        flex-wrap: nowrap;
+        overflow: hidden;
+        background-color: inherit;
+
+        & > * {
+          flex-grow: 0;
+          flex-shrink: 0;
+        }
+
+        .custom-auto-width-input {
+          position: sticky;
+          right: 0;
+          background-color: inherit;
+        }
+      }
+    }
+
+    @include sizeMixin(input, ()) {
+      .input-tag-container {
+        display: inline-flex;
+        flex-wrap: wrap;
+        border-radius: plv(box-size-#{$name}-border-radius);
+
+        & > * {
+          padding: 0;
+          height: calc(#{$height} - 8px);
+        }
+
+        .input-tag {
+          border-radius: $border-radius;
+          height: calc(#{$height} - 8px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+
+    &:not(.input-empty) {
+      .input-box.input-tag-container {
+        padding-left: 3px;
+      }
+    }
+
+    &.input-empty {
+      .input-tag-container {
+        .custom-auto-width-input {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  /*---------------------------------------textarea-------------------------------------------*/
+
+  &.input-textarea {
+    vertical-align: 0.05em;
+
+    .input-textarea-container {
+      padding: 0;
+      height: auto;
+
+      span, textarea {
+        display: inline-block;
+        padding: 3px 12px;
+        box-sizing: border-box;
+        line-height: 1.5715;
+        word-break: break-all;
+      }
+
+      span {
+        opacity: 0;
+        pointer-events: none;
+        min-height: calc(30px + 2em);
+        //height: 30px;
+      }
+
+      textarea {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        resize: vertical;
+        max-height: 100%;
+        min-height: 100%;
+      }
+
+      &:not(.input-textarea-has-height) {
+        textarea {
+          overflow: hidden;
+        }
+      }
+
+      &.input-textarea-has-height {
+        span, textarea {
+          overflow: auto;
+        }
+      }
+    }
+
+    .input-suffix-max-length {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      padding-bottom: 4px;
+      border: none;
+      pointer-events: none;
+    }
+  }
+}