xt-element-ui 1.1.0 → 1.1.1

package/src/components/button/style/index copy.scss

@@ -1,221 +0,0 @@
-@import '../../../styles/variables.scss';
-
-// 颜色（使用主题变量）
-$button-color-map: (
-  default: $xt-color-text-regular,
-  primary: $xt-color-primary,
-  success: $xt-color-success,
-  warning: $xt-color-warning,
-  danger: $xt-color-danger
-);
-
-$button-bg-color-map: (
-  default: transparent,
-  primary: $xt-color-primary,
-  success: $xt-color-success,
-  warning: $xt-color-warning,
-  danger: $xt-color-danger
-);
-
-$button-hover-bg-map: (
-  default: lighten($xt-color-primary, 10%),
-  primary: lighten($xt-color-primary, 10%),
-  success: lighten($xt-color-success, 10%),
-  warning: lighten($xt-color-warning, 10%),
-  danger: lighten($xt-color-danger, 10%)
-);
-
-$button-active-bg-map: (
-  default: darken($xt-color-primary, 10%),
-  primary: darken($xt-color-primary, 10%),
-  success: darken($xt-color-success, 10%),
-  warning: darken($xt-color-warning, 10%),
-  danger: darken($xt-color-danger, 10%)
-);
-
-// 尺寸
-$button-size-map: (
-  large: 40px,
-  medium: 36px,
-  small: 32px,
-  mini: 28px
-);
-
-$button-font-size-map: (
-  large: 14px,
-  medium: 14px,
-  small: 12px,
-  mini: 12px
-);
-
-// 圆角
-$button-radius: 4px;
-
-// 基础按钮
-.xt-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
-  border: 1px solid $xt-color-border;
-  border-radius: $button-radius;
-  padding: 0 15px;
-  box-sizing: border-box;
-  outline: none;
-  transition: all 0.2s;
-
-  // 默认尺寸：medium
-  height: map-get($button-size-map, medium);
-  font-size: map-get($button-font-size-map, medium);
-
-  &:hover {
-    opacity: 0.9;
-  }
-
-  &:active {
-    opacity: 0.8;
-  }
-
-  // 禁用状态
-  &.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  // 圆角
-  &.is-round {
-    border-radius: 20px;
-    padding: 0 18px;
-  }
-}
-
-// ------------------------------
-// 循环生成所有类型按钮
-// ------------------------------
-@each $type, $color in $button-color-map {
-  $bg: map-get($button-bg-color-map, $type);
-  $hover-bg: map-get($button-hover-bg-map, $type);
-  $active-bg: map-get($button-active-bg-map, $type);
-
-  .xt-button--#{$type} {
-    @if $type == default {
-      color: $color;
-      border-color: $xt-color-border;
-    } @else {
-      color: #fff;
-      border-color: $bg;
-    }
-    background: $bg;
-
-    &:hover {
-      background: $hover-bg;
-      border-color: $hover-bg;
-    }
-
-    &:active {
-      background: $active-bg;
-      border-color: $active-bg;
-    }
-
-    // default 按钮 hover 特殊处理
-    @if $type == default {
-      &:hover {
-        color: $hover-bg;
-        background: #ffffff;
-        border-color: $hover-bg;
-      }
-       &:active {
-        background: #fff;
-        border-color: $active-bg;
-      }
-    }
-  }
-}
-
-// ------------------------------
-// 循环生成所有尺寸
-// ------------------------------
-@each $size, $height in $button-size-map {
-  $font: map-get($button-font-size-map, $size);
-
-  .xt-button--#{$size} {
-    height: $height;
-    font-size: $font;
-
-    @if $size == large {
-      padding: 0 20px;
-    }
-  }
-}
-
-// ------------------------------
-// Plain 模式
-// ------------------------------
-.xt-button--plain {
-  background-color: transparent;
-  border-color: inherit;
-}
-
-@each $type, $color in $button-color-map {
-  $bg: map-get($button-bg-color-map, $type);
-
-  .xt-button--#{$type}.xt-button--plain {
-    @if $type == default {
-      color: $xt-color-text-regular;
-      background: transparent;
-      border-color: $xt-color-border;
-      &:hover {
-        background: $xt-color-bg-hover;
-        border-color: $xt-color-border-light;
-      }
-    } @else {
-      color: $bg;
-      background: transparent;
-      border-color: $bg;
-      &:hover {
-        background: rgba($bg, 0.1);
-        color: $bg;
-        border-color: $bg;
-      }
-    }
-  }
-}
-
-// ------------------------------
-// 暗色主题
-// ------------------------------
-html.dark .xt-button {
-  border-color: $xt-dark-color-border;
-  background: $xt-dark-color-bg-primary;
-  color: $xt-dark-color-text-primary;
-}
-
-html.dark .xt-button:hover {
-  background: $xt-dark-color-bg-secondary;
-}
-
-html.dark .xt-button--primary {
-  background: $xt-color-primary;
-  border-color: $xt-color-primary;
-}
-
-html.dark .xt-button--success {
-  background: $xt-dark-color-success;
-  border-color: $xt-dark-color-success;
-}
-
-html.dark .xt-button--warning {
-  background: $xt-dark-color-warning;
-  border-color: $xt-dark-color-warning;
-}
-
-html.dark .xt-button--danger {
-  background: $xt-dark-color-danger;
-  border-color: $xt-dark-color-danger;
-}
-
-html.dark .xt-button--info {
-  background: $xt-dark-color-info;
-  border-color: $xt-dark-color-info;
-}