mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
153 lines
7.3 KiB
SCSS
153 lines
7.3 KiB
SCSS
@mixin setup-light-button {
|
|
$button-font-family: $default-font-family !global;
|
|
$button-border-radius: 6px !global;
|
|
$button-font-size: (
|
|
"tiny": 12px,
|
|
"small": 14px,
|
|
"medium": 14px,
|
|
"large": 16px
|
|
) !global;
|
|
$button-height: (
|
|
"tiny": 22px,
|
|
"small": 28px,
|
|
"medium": 34px,
|
|
"large": 40px
|
|
) !global;
|
|
$button-padding: (
|
|
"tiny": 0 6px,
|
|
"small": 0 10px,
|
|
"medium": 0 14px,
|
|
"large": 0 18px
|
|
) !global;
|
|
$round-button-padding: (
|
|
"tiny": 0 10px,
|
|
"small": 0 14px,
|
|
"medium": 0 18px,
|
|
"large": 0 22px
|
|
) !global;
|
|
$button-icon-size: (
|
|
"tiny": 14px,
|
|
"small": 16px,
|
|
"medium": 18px,
|
|
"large": 20px
|
|
) !global;
|
|
$button-border-color: (
|
|
"default": $--n-border-color,
|
|
"primary": $--primary-6,
|
|
"info": $--info-6,
|
|
"success": $--success-6,
|
|
"warning": $--warning-6,
|
|
"error": $--error-6
|
|
) !global;
|
|
$button-box-shadow-spread: 0px !global;
|
|
$button-box-shadow-ripple-spread: 4px !global;
|
|
$button-box-shadow-spread-alpha: .3 !global;
|
|
$button-box-shadow: (
|
|
'default': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
|
|
'default-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
|
|
'default-focus': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
|
|
'default-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'default')),
|
|
'default-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'default')),
|
|
'primary': none,
|
|
'primary-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'primary'),
|
|
'primary-focus': none,
|
|
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'primary')),
|
|
'primary-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'primary')),
|
|
'success': none,
|
|
'success-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'success'),
|
|
'success-focus': none,
|
|
'success-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'success')),
|
|
'success-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'success')),
|
|
'info': none,
|
|
'info-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'info'),
|
|
'info-focus': none,
|
|
'info-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'info')),
|
|
'info-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'info')),
|
|
'warning': none,
|
|
'warning-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'warning'),
|
|
'warning-focus': none,
|
|
'warning-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'warning')),
|
|
'warning-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'warning')),
|
|
'error': none,
|
|
'error-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'error'),
|
|
'error-focus': none,
|
|
'error-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'error')),
|
|
'error-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'error'))
|
|
) !global;
|
|
$button-ghost-alpha: 0;
|
|
$button-ghost-hover-alpha: .1;
|
|
$button-ghost-active-alpha: .15;
|
|
$button-ghost-focus-alpha: .1;
|
|
$button-ghost-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-alpha);
|
|
$button-ghost-hover-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-hover-alpha);
|
|
$button-ghost-active-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-active-alpha);
|
|
$button-ghost-focus-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-focus-alpha);
|
|
$button-background-color: (
|
|
"default": mix($--n-border-color, white, $button-ghost-weight),
|
|
"default-focus": mix($--n-border-color, white, $button-ghost-focus-weight),
|
|
"default-hover": mix($--n-border-color, white, $button-ghost-hover-weight),
|
|
"default-active": mix($--n-border-color, white, $button-ghost-active-weight),
|
|
"primary": $--primary-6,
|
|
"primary-focus": $--primary-5,
|
|
"primary-hover": $--primary-5,
|
|
"primary-active": $--primary-7,
|
|
"info": $--info-6,
|
|
"info-focus": $--info-5,
|
|
"info-hover": $--info-5,
|
|
"info-active": $--info-7,
|
|
"success": $--success-6,
|
|
"success-focus": $--success-5,
|
|
"success-hover": $--success-5,
|
|
"success-active": $--success-7,
|
|
"warning": $--warning-6,
|
|
"warning-focus": $--warning-5,
|
|
"warning-hover": $--warning-5,
|
|
"warning-active": $--warning-7,
|
|
"error": $--error-6,
|
|
"error-focus": $--error-5,
|
|
"error-hover": $--error-5,
|
|
"error-active": $--error-7,
|
|
) !global;
|
|
$ghost-button-background-color: (
|
|
"default": change-color($--n-secondary-text-color, $alpha: $button-ghost-alpha),
|
|
"default-focus": change-color($--n-secondary-text-color, $alpha: $button-ghost-focus-alpha),
|
|
"default-hover": change-color($--n-secondary-text-color, $alpha: $button-ghost-hover-alpha),
|
|
"default-active": change-color($--n-secondary-text-color, $alpha: $button-ghost-active-alpha),
|
|
"primary": change-color($--primary-6, $alpha: $button-ghost-alpha),
|
|
"primary-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
|
|
"primary-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
|
|
"primary-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
|
|
"info": change-color($--info-6, $alpha: $button-ghost-alpha),
|
|
"info-focus": change-color($--info-6, $alpha: $button-ghost-focus-alpha),
|
|
"info-hover": change-color($--info-6, $alpha: $button-ghost-hover-alpha),
|
|
"info-active": change-color($--info-6, $alpha: $button-ghost-active-alpha),
|
|
"success": change-color($--success-6, $alpha: $button-ghost-alpha),
|
|
"success-focus": change-color($--success-6, $alpha: $button-ghost-focus-alpha),
|
|
"success-hover": change-color($--success-6, $alpha: $button-ghost-hover-alpha),
|
|
"success-active": change-color($--success-6, $alpha: $button-ghost-active-alpha),
|
|
"error": change-color($--error-6, $alpha: $button-ghost-alpha),
|
|
"error-focus": change-color($--error-6, $alpha: $button-ghost-focus-alpha),
|
|
"error-hover": change-color($--error-6, $alpha: $button-ghost-hover-alpha),
|
|
"error-active": change-color($--error-6, $alpha: $button-ghost-active-alpha),
|
|
"warning": change-color($--warning-6, $alpha: $button-ghost-alpha),
|
|
"warning-focus": change-color($--warning-6, $alpha: $button-ghost-focus-alpha),
|
|
"warning-hover": change-color($--warning-6, $alpha: $button-ghost-hover-alpha),
|
|
"warning-active": change-color($--warning-6, $alpha: $button-ghost-active-alpha),
|
|
) !global;
|
|
$ghost-button-color: (
|
|
"default": $--n-secondary-text-color,
|
|
"primary": $--primary-6,
|
|
"info": $--info-6,
|
|
"success": $--success-6,
|
|
"warning": $--warning-6,
|
|
"error": $--error-6
|
|
)!global;
|
|
$button-color: (
|
|
"default": $--n-secondary-text-color,
|
|
"primary": $--n-secondary-text-color,
|
|
"info": $--n-secondary-text-color,
|
|
"success": $--n-secondary-text-color,
|
|
"warning": $--n-secondary-text-color,
|
|
"error": $--n-secondary-text-color
|
|
) !global;
|
|
} |