@tendaui/components 1.0.0 → 1.0.2

package/styles/components/form/_index.scss

@@ -1,174 +1,174 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
-
-@import '../../_vars.scss';
-
-@import './_vars.scss';
-
-@import './_mixins.scss';
-
-@import '../../mixins/_reset.scss';
-
-.#{$prefix}-form {
-  @include reset;
-
-  font: $form-font;
-
-  &:not(.#{$prefix}-form-inline) {
-    .#{$prefix}-form__item {
-      &:last-of-type {
-        margin: 0;
-      }
-    }
-  }
-
-  &__item {
-    margin-bottom: $form-item-margin-bottom;
-
-    // 文档流撑开内容补足剩余的 4px
-    &.#{$prefix}-form__item-with-help {
-      margin-bottom: $form-item-with-help-margin-bottom;
-    }
-
-    // 绝对定位布局需要重设底部间距
-    &.#{$prefix}-form__item-with-extra {
-      margin-bottom: $form-item-margin-bottom;
-    }
-  }
-
-  &__label {
-    float: left;
-    padding-right: $form-label-padding-right;
-    vertical-align: middle;
-    line-height: $form-item-control-height;
-    color: $form-color-label;
-    box-sizing: border-box;
-    white-space: nowrap;
-
-    &--top {
-      float: none;
-      min-height: $form-item-control-height;
-    }
-
-    &--left {
-      text-align: left;
-    }
-
-    &--right {
-      text-align: right;
-    }
-
-    &--required:not(.#{$prefix}-form__label--required-right) {
-      label::before {
-        display: inline-block;
-        margin-right: $form-label-margin-right-required;
-        color: $form-color-error;
-        line-height: $form-label-line-height;
-        content: '*';
-      }
-    }
-
-    &--required-right {
-      label::after {
-        display: inline-block;
-        margin-left: $form-label-margin-left-required;
-        color: $form-color-error;
-        line-height: $form-label-line-height;
-        content: '*';
-      }
-    }
-
-    &--colon {
-      label::after {
-        content: ':';
-        position: relative;
-        margin: $form-label-margin-colon;
-      }
-    }
-  }
-
-  &__controls {
-    min-height: $form-item-control-height;
-    display: flow-root;
-    position: relative;
-
-    &-content {
-      display: flex;
-      align-items: center;
-      min-height: $form-item-control-height;
-    }
-
-    // formItem 嵌套情况无间距
-    .#{$prefix}-form__item {
-      margin-bottom: 0;
-      margin-right: $form-item-margin-right-inline;
-    }
-  }
-
-  &__controls.#{$prefix}-is-success {
-    @include input-status-icon(success);
-    @include input-status-extra(success);
-  }
-
-  &__controls.#{$prefix}-form--success-border {
-    // 输入框状态
-    @include input-status(success);
-  }
-
-  &__status {
-    display: flex;
-    margin: $form-status-margin;
-
-    > .t-icon {
-      font-size: $form-status-icon-size;
-    }
-
-    &-without-icon {
-      width: 25px;
-      height: 25px;
-    }
-
-    button {
-      width: $form-status-button-width;
-    }
-
-    button + button {
-      margin-left: $form-status-button-margin;
-    }
-  }
-}
-
-.#{$prefix}-form-inline {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: $form-item-row-gap;
-
-  .#{$prefix}-form__item {
-    margin: 0;
-    min-width: 200px;
-    display: inline-block;
-    margin-right: $form-item-margin-right-inline;
-  }
-}
-
-.#{$prefix}-input__extra,
-.#{$prefix}-input__help {
-  margin: 0;
-  width: 100%;
-  height: auto;
-  min-height: $form-item-help-line-height;
-  font: $form-item-help-font;
-  color: $form-color-extra;
-}
-
-.#{$prefix}-input__extra {
-  position: absolute;
-  bottom: calc(0px - $form-item-help-line-height);
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// 输入框状态
-@include input-status(warning);
-@include input-status(error);
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import '../../_vars.scss';
+
+@import './_vars.scss';
+
+@import './_mixins.scss';
+
+@import '../../mixins/_reset.scss';
+
+.#{$prefix}-form {
+  @include reset;
+
+  font: $form-font;
+
+  &:not(.#{$prefix}-form-inline) {
+    .#{$prefix}-form__item {
+      &:last-of-type {
+        margin: 0;
+      }
+    }
+  }
+
+  &__item {
+    margin-bottom: $form-item-margin-bottom;
+
+    // 文档流撑开内容补足剩余的 4px
+    &.#{$prefix}-form__item-with-help {
+      margin-bottom: $form-item-with-help-margin-bottom;
+    }
+
+    // 绝对定位布局需要重设底部间距
+    &.#{$prefix}-form__item-with-extra {
+      margin-bottom: $form-item-margin-bottom;
+    }
+  }
+
+  &__label {
+    float: left;
+    padding-right: $form-label-padding-right;
+    vertical-align: middle;
+    line-height: $form-item-control-height;
+    color: $form-color-label;
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    &--top {
+      float: none;
+      min-height: $form-item-control-height;
+    }
+
+    &--left {
+      text-align: left;
+    }
+
+    &--right {
+      text-align: right;
+    }
+
+    &--required:not(.#{$prefix}-form__label--required-right) {
+      label::before {
+        display: inline-block;
+        margin-right: $form-label-margin-right-required;
+        color: $form-color-error;
+        line-height: $form-label-line-height;
+        content: '*';
+      }
+    }
+
+    &--required-right {
+      label::after {
+        display: inline-block;
+        margin-left: $form-label-margin-left-required;
+        color: $form-color-error;
+        line-height: $form-label-line-height;
+        content: '*';
+      }
+    }
+
+    &--colon {
+      label::after {
+        content: ':';
+        position: relative;
+        margin: $form-label-margin-colon;
+      }
+    }
+  }
+
+  &__controls {
+    min-height: $form-item-control-height;
+    display: flow-root;
+    position: relative;
+
+    &-content {
+      display: flex;
+      align-items: center;
+      min-height: $form-item-control-height;
+    }
+
+    // formItem 嵌套情况无间距
+    .#{$prefix}-form__item {
+      margin-bottom: 0;
+      margin-right: $form-item-margin-right-inline;
+    }
+  }
+
+  &__controls.#{$prefix}-is-success {
+    @include input-status-icon(success);
+    @include input-status-extra(success);
+  }
+
+  &__controls.#{$prefix}-form--success-border {
+    // 输入框状态
+    @include input-status(success);
+  }
+
+  &__status {
+    display: flex;
+    margin: $form-status-margin;
+
+    > .t-icon {
+      font-size: $form-status-icon-size;
+    }
+
+    &-without-icon {
+      width: 25px;
+      height: 25px;
+    }
+
+    button {
+      width: $form-status-button-width;
+    }
+
+    button + button {
+      margin-left: $form-status-button-margin;
+    }
+  }
+}
+
+.#{$prefix}-form-inline {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: $form-item-row-gap;
+
+  .#{$prefix}-form__item {
+    margin: 0;
+    min-width: 200px;
+    display: inline-block;
+    margin-right: $form-item-margin-right-inline;
+  }
+}
+
+.#{$prefix}-input__extra,
+.#{$prefix}-input__help {
+  margin: 0;
+  width: 100%;
+  height: auto;
+  min-height: $form-item-help-line-height;
+  font: $form-item-help-font;
+  color: $form-color-extra;
+}
+
+.#{$prefix}-input__extra {
+  position: absolute;
+  bottom: calc(0px - $form-item-help-line-height);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 输入框状态
+@include input-status(warning);
+@include input-status(error);

package/styles/components/form/_mixins.scss

@@ -1,76 +1,76 @@
-@use 'sass:map';
-
-@mixin input-status($status) {
-  .#{$prefix}-is-#{$status} {
-    // 辅助文字
-    @include input-status-extra($status);
-
-    .#{$prefix}-form__controls-content {
-      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变化
-      .#{$prefix}-input,
-      .#{$prefix}-select,
-      .#{$prefix}-radio-button,
-      .#{$prefix}-cascader,
-      .#{$prefix}-range-input,
-      .#{$prefix}-textarea__inner {
-        border-color: map.get(map.get($input-color, border), $status);
-
-        &--focused {
-          box-shadow: 0 0 0 2px
-            map.get(map.get($input-color, box-shadow), $status);
-        }
-
-        // 处理组件内icon颜色
-        .t-icon,
-        .#{$prefix}-fake-arrow {
-          color: map.get(map.get($input-color, border), $status);
-        }
-      }
-
-      .#{$prefix}-select {
-        > .#{$prefix}-select__right-icon:not(
-            .#{$prefix}-select__right-icon-clear
-          ) {
-          color: map.get(map.get($input-color, border), $status);
-        }
-      }
-
-      .#{$prefix}-radio-button {
-        &:last-child {
-          border-right-color: map.get(map.get($input-color, border), $status);
-        }
-      }
-
-      .#{$prefix}-textarea__inner {
-        &.#{$prefix}-is-focused {
-          box-shadow: 0 0 0 2px map.get(map.get($input-color, border), $status);
-        }
-      }
-
-      .#{$prefix}-cascader,
-      .#{$prefix}-select {
-        &.#{$prefix}-is-active {
-          box-shadow: 0 0 0 2px
-            map.get(map.get($input-color, box-shadow), $status);
-        }
-      }
-
-      // 右侧状态图标
-      @include input-status-icon($status);
-    }
-  }
-}
-
-@mixin input-status-icon($status) {
-  .#{$prefix}-form__status {
-    .t-icon {
-      color: map.get($form-color, $status);
-    }
-  }
-}
-
-@mixin input-status-extra($status) {
-  .#{$prefix}-input__extra {
-    color: map.get($form-color, $status);
-  }
-}
+@use 'sass:map';
+
+@mixin input-status($status) {
+  .#{$prefix}-is-#{$status} {
+    // 辅助文字
+    @include input-status-extra($status);
+
+    .#{$prefix}-form__controls-content {
+      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变化
+      .#{$prefix}-input,
+      .#{$prefix}-select,
+      .#{$prefix}-radio-button,
+      .#{$prefix}-cascader,
+      .#{$prefix}-range-input,
+      .#{$prefix}-textarea__inner {
+        border-color: map.get(map.get($input-color, border), $status);
+
+        &--focused {
+          box-shadow: 0 0 0 2px
+            map.get(map.get($input-color, box-shadow), $status);
+        }
+
+        // 处理组件内icon颜色
+        .t-icon,
+        .#{$prefix}-fake-arrow {
+          color: map.get(map.get($input-color, border), $status);
+        }
+      }
+
+      .#{$prefix}-select {
+        > .#{$prefix}-select__right-icon:not(
+            .#{$prefix}-select__right-icon-clear
+          ) {
+          color: map.get(map.get($input-color, border), $status);
+        }
+      }
+
+      .#{$prefix}-radio-button {
+        &:last-child {
+          border-right-color: map.get(map.get($input-color, border), $status);
+        }
+      }
+
+      .#{$prefix}-textarea__inner {
+        &.#{$prefix}-is-focused {
+          box-shadow: 0 0 0 2px map.get(map.get($input-color, border), $status);
+        }
+      }
+
+      .#{$prefix}-cascader,
+      .#{$prefix}-select {
+        &.#{$prefix}-is-active {
+          box-shadow: 0 0 0 2px
+            map.get(map.get($input-color, box-shadow), $status);
+        }
+      }
+
+      // 右侧状态图标
+      @include input-status-icon($status);
+    }
+  }
+}
+
+@mixin input-status-icon($status) {
+  .#{$prefix}-form__status {
+    .t-icon {
+      color: map.get($form-color, $status);
+    }
+  }
+}
+
+@mixin input-status-extra($status) {
+  .#{$prefix}-input__extra {
+    color: map.get($form-color, $status);
+  }
+}