@tendaui/components 1.2.3 → 1.3.0

package/styles/components/tag/_index.scss

@@ -1,316 +1,317 @@
-@import './_var.scss';
-
-@import '../../mixins/reset.scss';
-
-.#{$prefix}-tag {
-  @include reset;
-
-  display: inline-flex;
-  align-items: center;
-  flex-direction: row;
-  padding: $tag-medium-padding;
-  height: $tag-height-medium;
-  font: $tag-medium-font;
-  color: $tag-text-color;
-  border-radius: $tag-border-radius-square;
-  border: $tag-default-border-width solid $tag-default-border-color;
-  white-space: nowrap;
-
-  .t-icon {
-    margin-right: $tag-icon-margin-right;
-    width: $tag-icon-size;
-    height: $tag-icon-size;
-    flex-shrink: 0;
-  }
-
-  .#{$prefix}-tag__icon-close {
-    margin-right: 0;
-    margin-left: $tag-close-icon-margin-right;
-    font: $tag-large-font;
-    cursor: pointer;
-    transition: color $anim-duration-base $anim-time-fn-easing;
-  }
-
-  &--default {
-    color: $tag-default-text-color;
-    background-color: $tag-default-background-color;
-
-    .#{$prefix}-tag__icon-close {
-      color: $tag-close-icon-color;
-
-      &:hover {
-        color: $tag-close-icon-hover-color;
-      }
-    }
-
-    &:active {
-      cursor: default;
-    }
-
-    // 失效标签
-    &.#{$prefix}-tag--disabled {
-      color: $tag-disabled-color;
-      background-color: $tag-disabled-bg;
-      border-color: $component-border;
-      cursor: not-allowed;
-
-      &:hover {
-        cursor: not-allowed;
-      }
-
-      .t-icon {
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-
-    &.#{$prefix}-tag--outline {
-      border-color: $tag-outline-default-border-color;
-    }
-
-    &.#{$prefix}-tag--light {
-      background-color: $tag-default-color-light;
-    }
-
-    &.#{$prefix}-tag--light-outline {
-      border-color: $tag-outline-default-border-color;
-      background-color: $tag-default-color-light;
-    }
-  }
-
-  &--primary {
-    background-color: $tag-primary-color;
-
-    &.#{$prefix}-tag--outline {
-      border-color: $tag-outline-primary-border-color;
-    }
-
-    &.#{$prefix}-tag--light {
-      background-color: $tag-primary-color-light;
-    }
-
-    &.#{$prefix}-tag--light-outline {
-      border-color: $tag-outline-primary-border-color;
-      background-color: $tag-primary-color-light;
-    }
-
-    &.#{$prefix}-tag--light,
-    &.#{$prefix}-tag--outline,
-    &.#{$prefix}-tag--light-outline {
-      color: $tag-primary-color;
-
-      .#{$prefix}-tag__icon-close {
-        &:hover {
-          color: $brand-color-hover;
-        }
-      }
-    }
-  }
-
-  &--success {
-    background-color: $tag-success-color;
-
-    &.#{$prefix}-tag--outline {
-      border-color: $tag-outline-success-border-color;
-    }
-
-    &.#{$prefix}-tag--light {
-      background-color: $tag-success-color-light;
-    }
-
-    &.#{$prefix}-tag--light-outline {
-      border-color: $tag-outline-success-border-color;
-      background-color: $tag-success-color-light;
-    }
-
-    &.#{$prefix}-tag--light,
-    &.#{$prefix}-tag--outline,
-    &.#{$prefix}-tag--light-outline {
-      color: $tag-success-color;
-
-      .#{$prefix}-tag__icon-close {
-        &:hover {
-          color: $success-color-hover;
-        }
-      }
-    }
-  }
-
-  &--warning {
-    background-color: $tag-warning-color;
-
-    &.#{$prefix}-tag--outline {
-      border-color: $tag-outline-warning-border-color;
-    }
-
-    &.#{$prefix}-tag--light {
-      background-color: $tag-warning-color-light;
-    }
-
-    &.#{$prefix}-tag--light-outline {
-      border-color: $tag-outline-warning-border-color;
-      background-color: $tag-warning-color-light;
-    }
-
-    &.#{$prefix}-tag--light,
-    &.#{$prefix}-tag--outline,
-    &.#{$prefix}-tag--light-outline {
-      color: $tag-warning-color;
-
-      .#{$prefix}-tag__icon-close {
-        &:hover {
-          color: $warning-color-hover;
-        }
-      }
-    }
-  }
-
-  &--danger {
-    background-color: $tag-danger-color;
-
-    &.#{$prefix}-tag--outline {
-      border-color: $tag-outline-danger-border-color;
-    }
-
-    &.#{$prefix}-tag--light {
-      background-color: $tag-error-color-light;
-    }
-
-    &.#{$prefix}-tag--light-outline {
-      border-color: $tag-outline-danger-border-color;
-      background-color: $tag-error-color-light;
-    }
-
-    .#{$prefix}-tag__icon-close {
-      fill: $error-color;
-
-      &:hover {
-        fill: $error-color-hover;
-      }
-    }
-
-    &.#{$prefix}-tag--light,
-    &.#{$prefix}-tag--outline,
-    &.#{$prefix}-tag--light-outline {
-      color: $tag-danger-color;
-
-      .#{$prefix}-tag__icon-close {
-        &:hover {
-          color: $error-color-hover;
-        }
-      }
-    }
-  }
-
-  &--dark:not(.#{$prefix}-tag--default) {
-    .#{$prefix}-tag__icon-close {
-      color: $tag-close-icon-color--dark;
-
-      &:hover {
-        color: $tag-close-icon-hover-color--dark;
-      }
-    }
-  }
-
-  &.#{$prefix}-tag--outline {
-    background: transparent;
-  }
-
-  &.#{$prefix}-size-s {
-    padding: $tag-small-padding;
-    height: $tag-height-small;
-    font: $tag-small-font;
-
-    .t-icon {
-      font-size: $tag-small-font;
-    }
-  }
-
-  &.#{$prefix}-size-l {
-    padding: $tag-large-padding;
-    height: $tag-height-large;
-    font: $tag-large-font;
-
-    .t-icon {
-      font: $tag-large-font;
-    }
-  }
-
-  &.#{$prefix}-tag--round {
-    border-radius: $tag-border-radius-round;
-  }
-
-  &.#{$prefix}-tag--mark {
-    border-radius: 0 $tag-border-radius-round $tag-border-radius-round 0;
-  }
-
-  &.#{$prefix}-tag--ellipsis {
-    .#{$prefix}-tag--text {
-      display: inline-block;
-      // @include text-ellipsis();
-    }
-  }
-}
-
-.#{$prefix}-tag.#{$prefix}-tag--check:not(.#{$prefix}-tag--disabled) {
-  transition: background-color $anim-duration-base $anim-time-fn-easing;
-  cursor: pointer;
-
-  &.#{$prefix}-tag--default.#{$prefix}-tag--dark:not(.#{$prefix}-tag--checked) {
-    &:hover {
-      background-color: $tag-grey-hover-color;
-    }
-  }
-
-  &.#{$prefix}-tag--primary.#{$prefix}-tag--dark.#{$prefix}-tag--checked {
-    &:hover {
-      background-color: $tag-default-hover-color;
-    }
-  }
-
-  &.#{$prefix}-tag--default.#{$prefix}-tag--outline:not(
-      .#{$prefix}-tag--checked
-    ) {
-    &:hover {
-      color: $tag-grey-outline-hover-color;
-    }
-  }
-}
-
-.#{$prefix}-tag--check.#{$prefix}-tag--disabled.#{$prefix}-tag--primary {
-  &.#{$prefix}-tag--dark {
-    background-color: $tag-default-disabled-color;
-    cursor: not-allowed;
-  }
-
-  &.#{$prefix}-tag--outline {
-    color: $tag-disabled-color;
-    background-color: $tag-grey-outline-disabled-color;
-    border-color: $tag-disabled-color;
-    cursor: not-allowed;
-  }
-}
-
-.#{$prefix}-check-tag-group {
-  .#{$prefix}-tag:not(:last-child) {
-    margin-right: $check-tag-margin-left;
-  }
-}
-
-a {
-  .#{$prefix}-tag {
-    cursor: pointer;
-    transition: all $anim-duration-base linear;
-
-    &:hover {
-      color: $link-tag-hover-color;
-      background-color: $link-tag-hover-bg;
-    }
-
-    &:active {
-      color: $link-tag-active-color;
-      background-color: $link-tag-active-bg;
-    }
-  }
-}
+@use "../../_vars.scss" as *;
+@use './_var.scss' as *;
+
+@use '../../mixins/reset.scss' as *;
+
+.#{$prefix}-tag {
+  @include reset;
+
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+  padding: $tag-medium-padding;
+  height: $tag-height-medium;
+  font: $tag-medium-font;
+  color: $tag-text-color;
+  border-radius: $tag-border-radius-square;
+  border: $tag-default-border-width solid $tag-default-border-color;
+  white-space: nowrap;
+
+  .t-icon {
+    margin-right: $tag-icon-margin-right;
+    width: $tag-icon-size;
+    height: $tag-icon-size;
+    flex-shrink: 0;
+  }
+
+  .#{$prefix}-tag__icon-close {
+    margin-right: 0;
+    margin-left: $tag-close-icon-margin-right;
+    font: $tag-large-font;
+    cursor: pointer;
+    transition: color $anim-duration-base $anim-time-fn-easing;
+  }
+
+  &--default {
+    color: $tag-default-text-color;
+    background-color: $tag-default-background-color;
+
+    .#{$prefix}-tag__icon-close {
+      color: $tag-close-icon-color;
+
+      &:hover {
+        color: $tag-close-icon-hover-color;
+      }
+    }
+
+    &:active {
+      cursor: default;
+    }
+
+    // 失效标签
+    &.#{$prefix}-tag--disabled {
+      color: $tag-disabled-color;
+      background-color: $tag-disabled-bg;
+      border-color: $component-border;
+      cursor: not-allowed;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+
+      .t-icon {
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-default-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-default-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-default-border-color;
+      background-color: $tag-default-color-light;
+    }
+  }
+
+  &--primary {
+    background-color: $tag-primary-color;
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-primary-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-primary-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-primary-border-color;
+      background-color: $tag-primary-color-light;
+    }
+
+    &.#{$prefix}-tag--light,
+    &.#{$prefix}-tag--outline,
+    &.#{$prefix}-tag--light-outline {
+      color: $tag-primary-color;
+
+      .#{$prefix}-tag__icon-close {
+        &:hover {
+          color: $brand-color-hover;
+        }
+      }
+    }
+  }
+
+  &--success {
+    background-color: $tag-success-color;
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-success-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-success-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-success-border-color;
+      background-color: $tag-success-color-light;
+    }
+
+    &.#{$prefix}-tag--light,
+    &.#{$prefix}-tag--outline,
+    &.#{$prefix}-tag--light-outline {
+      color: $tag-success-color;
+
+      .#{$prefix}-tag__icon-close {
+        &:hover {
+          color: $success-color-hover;
+        }
+      }
+    }
+  }
+
+  &--warning {
+    background-color: $tag-warning-color;
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-warning-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-warning-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-warning-border-color;
+      background-color: $tag-warning-color-light;
+    }
+
+    &.#{$prefix}-tag--light,
+    &.#{$prefix}-tag--outline,
+    &.#{$prefix}-tag--light-outline {
+      color: $tag-warning-color;
+
+      .#{$prefix}-tag__icon-close {
+        &:hover {
+          color: $warning-color-hover;
+        }
+      }
+    }
+  }
+
+  &--danger {
+    background-color: $tag-danger-color;
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-danger-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-error-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-danger-border-color;
+      background-color: $tag-error-color-light;
+    }
+
+    .#{$prefix}-tag__icon-close {
+      fill: $error-color;
+
+      &:hover {
+        fill: $error-color-hover;
+      }
+    }
+
+    &.#{$prefix}-tag--light,
+    &.#{$prefix}-tag--outline,
+    &.#{$prefix}-tag--light-outline {
+      color: $tag-danger-color;
+
+      .#{$prefix}-tag__icon-close {
+        &:hover {
+          color: $error-color-hover;
+        }
+      }
+    }
+  }
+
+  &--dark:not(.#{$prefix}-tag--default) {
+    .#{$prefix}-tag__icon-close {
+      color: $tag-close-icon-color--dark;
+
+      &:hover {
+        color: $tag-close-icon-hover-color--dark;
+      }
+    }
+  }
+
+  &.#{$prefix}-tag--outline {
+    background: transparent;
+  }
+
+  &.#{$prefix}-size-s {
+    padding: $tag-small-padding;
+    height: $tag-height-small;
+    font: $tag-small-font;
+
+    .t-icon {
+      font-size: $tag-small-font;
+    }
+  }
+
+  &.#{$prefix}-size-l {
+    padding: $tag-large-padding;
+    height: $tag-height-large;
+    font: $tag-large-font;
+
+    .t-icon {
+      font: $tag-large-font;
+    }
+  }
+
+  &.#{$prefix}-tag--round {
+    border-radius: $tag-border-radius-round;
+  }
+
+  &.#{$prefix}-tag--mark {
+    border-radius: 0 $tag-border-radius-round $tag-border-radius-round 0;
+  }
+
+  &.#{$prefix}-tag--ellipsis {
+    .#{$prefix}-tag--text {
+      display: inline-block;
+      // @include text-ellipsis();
+    }
+  }
+}
+
+.#{$prefix}-tag.#{$prefix}-tag--check:not(.#{$prefix}-tag--disabled) {
+  transition: background-color $anim-duration-base $anim-time-fn-easing;
+  cursor: pointer;
+
+  &.#{$prefix}-tag--default.#{$prefix}-tag--dark:not(.#{$prefix}-tag--checked) {
+    &:hover {
+      background-color: $tag-grey-hover-color;
+    }
+  }
+
+  &.#{$prefix}-tag--primary.#{$prefix}-tag--dark.#{$prefix}-tag--checked {
+    &:hover {
+      background-color: $tag-default-hover-color;
+    }
+  }
+
+  &.#{$prefix}-tag--default.#{$prefix}-tag--outline:not(
+      .#{$prefix}-tag--checked
+    ) {
+    &:hover {
+      color: $tag-grey-outline-hover-color;
+    }
+  }
+}
+
+.#{$prefix}-tag--check.#{$prefix}-tag--disabled.#{$prefix}-tag--primary {
+  &.#{$prefix}-tag--dark {
+    background-color: $tag-default-disabled-color;
+    cursor: not-allowed;
+  }
+
+  &.#{$prefix}-tag--outline {
+    color: $tag-disabled-color;
+    background-color: $tag-grey-outline-disabled-color;
+    border-color: $tag-disabled-color;
+    cursor: not-allowed;
+  }
+}
+
+.#{$prefix}-check-tag-group {
+  .#{$prefix}-tag:not(:last-child) {
+    margin-right: $check-tag-margin-left;
+  }
+}
+
+a {
+  .#{$prefix}-tag {
+    cursor: pointer;
+    transition: all $anim-duration-base linear;
+
+    &:hover {
+      color: $link-tag-hover-color;
+      background-color: $link-tag-hover-bg;
+    }
+
+    &:active {
+      color: $link-tag-active-color;
+      background-color: $link-tag-active-bg;
+    }
+  }
+}