mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
149 lines
6.6 KiB
SCSS
149 lines
6.6 KiB
SCSS
@mixin setup-dark-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": $--primary-6,
|
|
"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: .2;
|
|
$button-ghost-active-alpha: .3;
|
|
$button-ghost-focus-alpha: .2;
|
|
$button-background-color: (
|
|
"default": change-color($--primary-6, $alpha: $button-ghost-alpha),
|
|
"default-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
|
|
"default-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
|
|
"default-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
|
|
"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($--primary-6, $alpha: $button-ghost-alpha),
|
|
"default-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
|
|
"default-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
|
|
"default-active": change-color($--primary-6, $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": $--primary-6,
|
|
"primary": $--primary-6,
|
|
"info": $--info-6,
|
|
"success": $--success-6,
|
|
"warning": $--warning-6,
|
|
"error": $--error-6
|
|
)!global;
|
|
$button-color: (
|
|
"default": $--primary-6,
|
|
"primary": black,
|
|
"info": black,
|
|
"success": black,
|
|
"warning": black,
|
|
"error": black
|
|
) !global;
|
|
} |