mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
79 lines
2.7 KiB
SCSS
79 lines
2.7 KiB
SCSS
|
@mixin setup-light-theme () {
|
||
|
|
$main-color: rgba(68, 180, 100, 1) !global;
|
||
|
|
$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": $main-color,
|
||
|
|
"primary": $main-color,
|
||
|
|
"info": $main-color,
|
||
|
|
"success": $main-color,
|
||
|
|
"warning": $main-color,
|
||
|
|
"error": $main-color
|
||
|
|
) !global;
|
||
|
|
$button-box-shadow-spread: 0px !global;
|
||
|
|
$button-box-shadow-ripple-spread: 4px !global;
|
||
|
|
$button-box-shadow-ripple-spread-alpha: 0 !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-focus': (inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'), 0 0 0 $button-box-shadow-spread change-color(map-get($map: $button-border-color, $key: 'default'), $alpha: $button-box-shadow-spread-alpha)),
|
||
|
|
'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-focus': 0 0 0 $button-box-shadow-spread change-color(map-get($map: $button-border-color, $key: 'primary'), $alpha: $button-box-shadow-spread-alpha),
|
||
|
|
'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'))
|
||
|
|
) !global;
|
||
|
|
$button-background-color: (
|
||
|
|
"default": transparent,
|
||
|
|
"default-focus": rgba(232, 246, 236, 1),
|
||
|
|
"default-hover": rgba(232, 246, 236, 1),
|
||
|
|
"default-active": rgba(241, 250, 244, 1),
|
||
|
|
"primary": $main-color,
|
||
|
|
"primary-focus": rgba(84, 185, 113, 1),
|
||
|
|
"primary-hover": rgba(84, 185, 113, 1),
|
||
|
|
"primary-active": rgba(62, 171, 93, 1),
|
||
|
|
"info": $main-color,
|
||
|
|
"success": $main-color,
|
||
|
|
"warning": $main-color,
|
||
|
|
"error": $main-color
|
||
|
|
) !global;
|
||
|
|
$button-color: (
|
||
|
|
"default": $main-color,
|
||
|
|
"primary": black,
|
||
|
|
"info": $main-color,
|
||
|
|
"success": $main-color,
|
||
|
|
"warning": $main-color,
|
||
|
|
"error": $main-color
|
||
|
|
) !global;
|
||
|
|
}
|