mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
174 lines
8.0 KiB
SCSS
174 lines
8.0 KiB
SCSS
@mixin setup-light-button {
|
|
$--button-font-family: $--n-font-family !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": $--n-primary-color,
|
|
"info": $--n-info-color,
|
|
"success": $--n-success-color,
|
|
"warning": $--n-warning-color,
|
|
"error": $--n-error-color
|
|
) !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-background-color: (
|
|
"default": mix($--n-default-color, white, 0),
|
|
"default-focus": mix($--n-default-color, white, 8%),
|
|
"default-hover": mix($--n-default-color, white, 8%),
|
|
"default-active": mix($--n-default-color, white, 12%),
|
|
"primary": $--n-primary-color,
|
|
"primary-focus": $--n-primary-hover-color,
|
|
"primary-hover": $--n-primary-hover-color,
|
|
"primary-active": $--n-primary-active-color,
|
|
"info": $--n-info-color,
|
|
"info-focus": $--n-info-hover-color,
|
|
"info-hover": $--n-info-hover-color,
|
|
"info-active": $--n-info-active-color,
|
|
"success": $--n-success-color,
|
|
"success-focus": $--n-success-hover-color,
|
|
"success-hover": $--n-success-hover-color,
|
|
"success-active": $--n-success-active-color,
|
|
"warning": $--n-warning-color,
|
|
"warning-focus": $--n-warning-hover-color,
|
|
"warning-hover": $--n-warning-hover-color,
|
|
"warning-active": $--n-warning-active-color,
|
|
"error": $--n-error-color,
|
|
"error-focus": $--n-error-hover-color,
|
|
"error-hover": $--n-error-hover-color,
|
|
"error-active": $--n-error-active-color,
|
|
) !global;
|
|
$--ghost-button-background-color: (
|
|
"default": change-color($--n-secondary-text-color, $alpha: 0),
|
|
"default-focus": change-color($--n-secondary-text-color, $alpha: .08),
|
|
"default-hover": change-color($--n-secondary-text-color, $alpha: .08),
|
|
"default-active": change-color($--n-secondary-text-color, $alpha: .12),
|
|
"primary": change-color($--n-primary-color, $alpha: $button-ghost-alpha),
|
|
"primary-focus": change-color($--n-primary-color, $alpha: $button-ghost-focus-alpha),
|
|
"primary-hover": change-color($--n-primary-color, $alpha: $button-ghost-hover-alpha),
|
|
"primary-active": change-color($--n-primary-color, $alpha: $button-ghost-active-alpha),
|
|
"info": change-color($--n-info-color, $alpha: $button-ghost-alpha),
|
|
"info-focus": change-color($--n-info-color, $alpha: $button-ghost-focus-alpha),
|
|
"info-hover": change-color($--n-info-color, $alpha: $button-ghost-hover-alpha),
|
|
"info-active": change-color($--n-info-color, $alpha: $button-ghost-active-alpha),
|
|
"success": change-color($--n-success-color, $alpha: $button-ghost-alpha),
|
|
"success-focus": change-color($--n-success-color, $alpha: $button-ghost-focus-alpha),
|
|
"success-hover": change-color($--n-success-color, $alpha: $button-ghost-hover-alpha),
|
|
"success-active": change-color($--n-success-color, $alpha: $button-ghost-active-alpha),
|
|
"error": change-color($--n-error-color, $alpha: $button-ghost-alpha),
|
|
"error-focus": change-color($--n-error-color, $alpha: $button-ghost-focus-alpha),
|
|
"error-hover": change-color($--n-error-color, $alpha: $button-ghost-hover-alpha),
|
|
"error-active": change-color($--n-error-color, $alpha: $button-ghost-active-alpha),
|
|
"warning": change-color($--n-warning-color, $alpha: $button-ghost-alpha),
|
|
"warning-focus": change-color($--n-warning-color, $alpha: $button-ghost-focus-alpha),
|
|
"warning-hover": change-color($--n-warning-color, $alpha: $button-ghost-hover-alpha),
|
|
"warning-active": change-color($--n-warning-color, $alpha: $button-ghost-active-alpha),
|
|
) !global;
|
|
$--ghost-button-color: (
|
|
"default": $--n-secondary-text-color,
|
|
"primary": $--n-primary-color,
|
|
"info": $--n-info-color,
|
|
"success": $--n-success-color,
|
|
"warning": $--n-warning-color,
|
|
"error": $--n-error-color
|
|
)!global;
|
|
$--button-color: (
|
|
"default": $--n-secondary-text-color,
|
|
"primary": white,
|
|
"info": white,
|
|
"success": white,
|
|
"warning": white,
|
|
"error": white
|
|
) !global;
|
|
$--text-button-color: (
|
|
"default": $--n-secondary-text-color,
|
|
"default-hover": $--n-secondary-text-color,
|
|
"default-active": $--n-secondary-text-color,
|
|
"default-focus": $--n-secondary-text-color,
|
|
"primary": $--n-primary-color,
|
|
"primary-hover": $--n-primary-hover-color,
|
|
"primary-active": $--n-primary-active-color,
|
|
"primary-focus": $--n-primary-hover-color,
|
|
"info": $--n-info-color,
|
|
"info-hover": $--n-info-hover-color,
|
|
"info-active": $--n-info-active-color,
|
|
"info-focus": $--n-info-hover-color,
|
|
"success": $--n-success-color,
|
|
"success-hover": $--n-success-hover-color,
|
|
"success-active": $--n-success-active-color,
|
|
"success-focus": $--n-success-hover-color,
|
|
"warning": $--n-warning-color,
|
|
"warning-hover": $--n-warning-hover-color,
|
|
"warning-active": $--n-warning-active-color,
|
|
"warning-focus": $--n-warning-hover-color,
|
|
"error": $--n-error-color,
|
|
"error-hover": $--n-error-hover-color,
|
|
"error-active": $--n-error-active-color,
|
|
"error-focus": $--n-error-hover-color,
|
|
) !global;
|
|
} |