2019-09-18 22:01:34 +08:00
|
|
|
@import 'lightColors.scss';
|
|
|
|
|
|
2019-09-17 19:22:24 +08:00
|
|
|
@mixin setup-light-theme () {
|
2019-09-18 22:01:34 +08:00
|
|
|
@include setup-light-colors();
|
2019-09-17 19:22:24 +08:00
|
|
|
$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: (
|
2019-09-18 19:11:27 +08:00
|
|
|
"default": $primary-6,
|
|
|
|
|
"primary": $primary-6,
|
|
|
|
|
"info": $info-6,
|
|
|
|
|
"success": $success-6,
|
|
|
|
|
"warning": $warning-6,
|
|
|
|
|
"error": $error-6
|
2019-09-17 19:22:24 +08:00
|
|
|
) !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'),
|
2019-09-18 19:11:27 +08:00
|
|
|
'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'),
|
2019-09-17 19:22:24 +08:00
|
|
|
'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,
|
2019-09-18 19:11:27 +08:00
|
|
|
'primary-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'primary'),
|
|
|
|
|
'primary-focus': none,
|
2019-09-17 19:22:24 +08:00
|
|
|
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'primary')),
|
2019-09-18 19:11:27 +08:00
|
|
|
'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'))
|
2019-09-17 19:22:24 +08:00
|
|
|
) !global;
|
2019-09-18 19:11:27 +08:00
|
|
|
$button-ghost-weight: 0%;
|
|
|
|
|
$button-ghost-hover-weight: 10%;
|
|
|
|
|
$button-ghost-active-weight: 15%;
|
|
|
|
|
$button-ghost-focus-weight: 10%;
|
2019-09-17 19:22:24 +08:00
|
|
|
$button-background-color: (
|
2019-09-18 19:11:27 +08:00
|
|
|
"default": mix($primary-6, white, $button-ghost-weight),
|
|
|
|
|
"default-focus": mix($primary-6, white, $button-ghost-focus-weight),
|
|
|
|
|
"default-hover": mix($primary-6, white, $button-ghost-hover-weight),
|
|
|
|
|
"default-active": mix($primary-6, 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,
|
2019-09-17 19:22:24 +08:00
|
|
|
) !global;
|
2019-09-18 19:11:27 +08:00
|
|
|
$button-ghost-alpha: 0;
|
|
|
|
|
$button-ghost-hover-alpha: .1;
|
|
|
|
|
$button-ghost-active-alpha: .15;
|
|
|
|
|
$button-ghost-focus-alpha: .1;
|
|
|
|
|
$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;
|
2019-09-17 19:22:24 +08:00
|
|
|
$button-color: (
|
2019-09-18 19:11:27 +08:00
|
|
|
"default": $primary-6,
|
|
|
|
|
"primary": white,
|
|
|
|
|
"info": white,
|
|
|
|
|
"success": white,
|
|
|
|
|
"warning": white,
|
|
|
|
|
"error": white
|
2019-09-17 19:22:24 +08:00
|
|
|
) !global;
|
|
|
|
|
}
|
