oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-09-03 17:31:30 +08:00
1 parent de2351e1b2
commit ab0489f692
22 files changed
+1100 -300
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-vue/packages/ao-design/src/button/index.scss
+45 -116
View File
@@ -1,17 +1,9 @@
@use 'sass:color';
@use '../_styles/variables' as *;
@use '../_styles/theme/index' as *;
$btn-prefix: #{$prefix}-btn;
$btn-hover-bgcolor: #f4f5f5;
$btn-active-bgcolor: #eceded;
@function color-hover($color, $amount: 8%) {
@return color.scale($color, $lightness: -$amount);
}
@function color-active($color, $amount: 12%) {
@return color.scale($color, $lightness: -$amount);
}
.#{$btn-prefix} {
display: inline-flex;
@@ -22,7 +14,7 @@ $btn-active-bgcolor: #eceded;
vertical-align: middle;
user-select: none;
vertical-align: middle;
border-radius: 2px;
border-radius: $border-radius;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
@@ -73,121 +65,58 @@ $btn-active-bgcolor: #eceded;
opacity: 0.6;
}
/* ===== Solid 按钮 ===== */
&-solid {
@each $status,
$color
in (
normal: #d9d9d9,
primary: $primary-color,
danger: $danger-color,
warning: $warning-color,
success: $success-color
)
{
&.#{$btn-prefix}-status-#{$status} {
@if $status == normal {
background: #f4f5f5;
color: #000;
&:hover:enabled {
background: #eceded;
}
&:active:enabled {
background: #e4e4e5;
}
} @else {
background: $color;
color: #fff;
border: 1px solid transparent;
&:hover:enabled {
background: color-hover($color, 5%);
}
&:active:enabled {
background: color-active($color, -5%);
}
}
&.#{$btn-prefix}-status-normal {
background: $bg-color-component;
color: $text-color-primary;
&:hover:enabled {
background: $bg-color-component-hover;
}
&:active:enabled {
background: $bg-color-component-active;
}
}
}
/* ===== Outline 按钮 ===== */
&-outline {
background: transparent;
@each $status,
$color
in (
normal: $primary-color,
primary: $primary-color,
danger: $danger-color,
warning: $warning-color,
success: $success-color
)
{
&.#{$btn-prefix}-status-#{$status} {
color: if($status == normal, #000, $color);
border-color: if($status == normal, #d9d9d9, $color);
&:hover:enabled {
background-color: $btn-hover-bgcolor;
}
&:active:enabled {
background-color: $btn-active-bgcolor;
}
&.#{$btn-prefix}-status-primary {
background: $brand-color;
color: $text-color-anti;
&:hover:enabled {
background: $brand-color-hover;
}
&:active:enabled {
background: $brand-color-active;
}
}
}
/* ===== Dashed 按钮 ===== */
&-dashed {
background: transparent;
border: 1px dashed currentColor;
@each $status,
$color
in (
normal: #000,
primary: $primary-color,
danger: $danger-color,
warning: $warning-color,
success: $success-color
)
{
&.#{$btn-prefix}-status-#{$status} {
color: $color;
border-color: if($status == normal, #d9d9d9, $color);
&:hover:enabled {
background-color: $btn-hover-bgcolor;
}
&:active:enabled {
background-color: $btn-active-bgcolor;
}
&.#{$btn-prefix}-status-danger {
background: $danger-color;
color: $text-color-anti;
&:hover:enabled {
background: $danger-color-hover;
}
&:active:enabled {
background: $danger-color-active;
}
}
}
/* ===== Text 按钮 ===== */
&-text {
background: transparent;
border: none;
@each $status,
$color
in (
normal: #000,
primary: $primary-color,
danger: $danger-color,
warning: $warning-color,
success: $success-color
)
{
&.#{$btn-prefix}-status-#{$status} {
color: $color;
&:hover:enabled {
background-color: $btn-hover-bgcolor;
}
&:active:enabled {
background-color: $btn-active-bgcolor;
}
&.#{$btn-prefix}-status-warning {
background: $warning-color;
color: $text-color-anti;
&:hover:enabled {
background: $warning-color-hover;
}
&:active:enabled {
background: $warning-color-active;
}
}
&.#{$btn-prefix}-status-success {
background: $success-color;
color: $text-color-anti;
&:hover:enabled {
background: $success-color-hover;
}
&:active:enabled {
background: $success-color-active;
}
}
}