mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
470 lines
15 KiB
SCSS
470 lines
15 KiB
SCSS
@import '../mixins/config.scss';
|
|
|
|
$body-background-color: #1a2033;
|
|
|
|
/**
|
|
* genaral
|
|
*/
|
|
$tiny-height: 22px;
|
|
$small-height: 28px;
|
|
$default-height: 34px;
|
|
$medium-height: 34px;
|
|
$large-height: 40px;
|
|
$main-color: #63E2B7;
|
|
@function main-color-with-alpha($alpha) {
|
|
@return rgba(99, 226, 183, $alpha);
|
|
}
|
|
|
|
$fast-in-cubic-bezier: cubic-bezier(0.0, 0.0, 0.2, 1);
|
|
$slow-out-cubic-bezier: cubic-bezier(0.4, 0.0, 1, 1);
|
|
|
|
/**
|
|
* n-input
|
|
*/
|
|
$small-input-font-size: 13px;
|
|
$default-input-font-size: 14px;
|
|
$medium-input-font-size: 14px;
|
|
$large-input-font-size: 15px;
|
|
$input-background-color: rgba(255, 255, 255, 0.12);
|
|
$disabled-input-background-color:rgba(255,255,255,0.06);
|
|
$disabled-input-text-color: rgba(255, 255, 255, .2);
|
|
$disabled-input-placeholder-color: rgba(255, 255, 255, .2);
|
|
$input-caret-color: $main-color;
|
|
$input-placeholder-color: rgba(255, 255, 255, .4);
|
|
$focus-input-background-color: rgba(99, 226, 183, 0.1);
|
|
$input-border-radius: 6px;
|
|
$input-icon-color: rgba(255,255,255,0.2);
|
|
|
|
/**
|
|
* n-button
|
|
*/
|
|
$button-border-radius: 6px;
|
|
$button-font-size: (
|
|
"tiny": 12px,
|
|
"small": 14px,
|
|
"medium": 14px,
|
|
"large": 16px
|
|
);
|
|
$button-height: (
|
|
"tiny": 22px,
|
|
"small": 28px,
|
|
"medium": 34px,
|
|
"large": 40px
|
|
);
|
|
$button-padding: (
|
|
"tiny": 0 6px,
|
|
"small": 0 10px,
|
|
"medium": 0 14px,
|
|
"large": 0 18px
|
|
);
|
|
$round-button-padding: (
|
|
"tiny": 0 10px,
|
|
"small": 0 14px,
|
|
"medium": 0 18px,
|
|
"large": 0 22px
|
|
);
|
|
$button-icon-size: (
|
|
"tiny": 14px,
|
|
"small": 16px,
|
|
"medium": 18px,
|
|
"large": 20px
|
|
);
|
|
$button-border-color: (
|
|
"default": $main-color,
|
|
"primary": $main-color,
|
|
"info": $main-color,
|
|
"success": $main-color,
|
|
"warning": $main-color,
|
|
"error": $main-color
|
|
);
|
|
$button-box-shadow-spread: 0px;
|
|
$button-box-shadow-ripple-spread: 4px;
|
|
$button-box-shadow-ripple-spread-alpha: 0;
|
|
$button-box-shadow-spread-alpha: .3;
|
|
$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'))
|
|
);
|
|
$button-background-color: (
|
|
"default": transparent,
|
|
"default-focus": rgba(99, 226, 183, .3),
|
|
"default-hover": rgba(99, 226, 183, .3),
|
|
"default-active": rgba(99, 226, 183, .2),
|
|
"primary": $main-color,
|
|
"primary-focus": rgb(103, 235, 190),
|
|
"primary-hover": rgb(103, 235, 190),
|
|
"primary-active": rgb(97, 218, 177),
|
|
"info": $main-color,
|
|
"success": $main-color,
|
|
"warning": $main-color,
|
|
"error": $main-color
|
|
);
|
|
$button-color: (
|
|
"default": $main-color,
|
|
"primary": black,
|
|
"info": $main-color,
|
|
"success": $main-color,
|
|
"warning": $main-color,
|
|
"error": $main-color
|
|
);
|
|
|
|
/**
|
|
* n-select
|
|
*/
|
|
$select-text-color: #ffffff;
|
|
$select-font-size--small: 14px;
|
|
$select-font-size--medium: 14px;
|
|
$select-font-size--large: 14px;
|
|
$select-background-color: rgba(255, 255, 255, 0.12);
|
|
$select-background-color--disabled:rgba(255,255,255,0.06);
|
|
$select-text-color--disabled: rgba(255, 255, 255, .2);
|
|
$select-placeholder-color--disabled: rgba(255, 255, 255, .2);
|
|
$select-placeholder-color: rgba(255, 255, 255, .4);
|
|
$select-background-color--active: rgba(99, 226, 183, 0.1);
|
|
$select-item-background-color--active: rgba(96, 220, 178, 0.3);
|
|
$select-border-radius: 6px;
|
|
$select-border-color--active: $main-color;
|
|
|
|
/**
|
|
* n-pagination
|
|
*/
|
|
$pagination-color--disabled: rgba(255,255,255,.2);
|
|
$pagination-color: rgba(255,255,255,.6);
|
|
$pagination-border-radius: 4px;
|
|
$pagination-color--active: $main-color;
|
|
$pagination-background-color--active: rgba(99,226,183,0.3);
|
|
$pagination-background-color--disabled-active: rgba(255,255,255,0.15);
|
|
|
|
/**
|
|
* n-table
|
|
*/
|
|
$table-font-size: 13px;
|
|
|
|
/**
|
|
* n-checkbox
|
|
*/
|
|
$checkbox-background: transparent;
|
|
$checkbox-background--active: $main-color;
|
|
$checkbox-border-color: rgba(255, 255, 255, .4);
|
|
$checkbox-border-color--active: $main-color;
|
|
|
|
/**
|
|
* n-input-number
|
|
*/
|
|
$input-number-border-radius: $input-border-radius;
|
|
$input-number-background-color: rgba(238, 238, 238, .1);
|
|
$input-number-color: #e9e9ec;
|
|
$input-number-button-background-color: rgba(238, 238, 238, .1);
|
|
|
|
$amazing-font-size: 20px;
|
|
$huge-font-size: 18px;
|
|
$large-font-size: 16px;
|
|
$regular-font-size: 14px;
|
|
$small-font-size: 12px;
|
|
$normal-font-size: $regular-font-size;
|
|
$meta-font-size: $small-font-size;
|
|
|
|
$--primary-text-color: rgba(255, 255, 255, .8);
|
|
$regular-text-color: rgba(255, 255, 255, .6);
|
|
$secondary-text-color: rgba(255, 255, 255, .4);
|
|
|
|
$table-header-background-color: rgb(43,49,71);
|
|
$table-body-background-color: #1f263e;
|
|
$table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2);
|
|
|
|
$default-button-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
|
$default-text-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
|
$default-text-gradient-warning: linear-gradient(252deg, rgba(247,181,0,1) 0%, rgba(237,255,0,1) 100%);
|
|
$default-text-gradient-success: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
|
$default-text-gradient-danger: linear-gradient(214deg, rgba(224,32,32,1) 0%, rgba(250,100,0,1) 100%);
|
|
|
|
$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
|
|
|
|
// $scrollbar-color: rgba(255,255,255,0.2);
|
|
// $scrollbar-color--hover: rgba(255,255,255,0.3);
|
|
|
|
@mixin scrollbar {
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 2.5px;
|
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
}
|
|
|
|
@mixin input-border {
|
|
&:focus:hover {
|
|
box-shadow: inset 0 0 0px 1px $main-color, 0px 0px 10px 1px #366555;
|
|
}
|
|
&:hover {
|
|
box-shadow: inset 0 0 0px 1px $main-color;
|
|
}
|
|
&:focus {
|
|
box-shadow: inset 0 0 0px 1px $main-color;
|
|
background-color: $focus-input-background-color;
|
|
}
|
|
}
|
|
|
|
@mixin fade-down-transition ($name: 'fade-down', $from-offset: -4px) {
|
|
&.#{$namespace}-#{$name}-enter, &.#{$namespace}-#{$name}-leave-to {
|
|
opacity: 0;
|
|
transform: translateY($from-offset);
|
|
}
|
|
&.#{$namespace}-#{$name}-enter-to, &.#{$namespace}-#{$name}-leave {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-leave-active {
|
|
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-enter-active {
|
|
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
}
|
|
|
|
@mixin fade-up-transition($block) {
|
|
&.#{$namespace}-#{$block}--transition-enter, .#{$namespace}-#{$block}--transition-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
transition: opacity .3s $fast-in-cubic-bezier, transform .3s $fast-in-cubic-bezier;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: (), $original-transition: ()) {
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
transform-origin: $origin;
|
|
transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier, $original-transition;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
transform-origin: $origin;
|
|
transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier, $original-transition;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale($start-scale) $original-transform;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-leave, &.#{$namespace}-#{$block}--transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(0.99999) $original-transform;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-transition($block: "fade-in", $enter-duration: .2s, $leave-duration: .2s) {
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
transition: all $enter-duration $--n-ease-in-out-cubic-bezier !important;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
transition: all $leave-duration $--n-ease-in-out-cubic-bezier !important;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter,
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter-to,
|
|
&.#{$namespace}-#{$block}--transition-leave {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-transition-ease-in-out($block, $duration: .2s) {
|
|
&.#{$namespace}-#{$block}--transition-enter-active,
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
opacity: 1;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
transition: opacity $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
|
transition: opacity $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
}
|
|
|
|
@mixin slide-in-from-right-transition($duration: .3s) {
|
|
&.#{$namespace}-slide-in-from-right-leave-active {
|
|
transition: transform $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-slide-in-from-right-enter-active {
|
|
transition: transform $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-slide-in-from-right-enter-to {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-slide-in-from-right-enter {
|
|
transform: translateX(100%);
|
|
}
|
|
&.#{$namespace}-slide-in-from-right-leave {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-slide-in-from-right-leave-to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@mixin slide-right-transition($block, $duration: .3s, $delay: .3s) {
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
transition: transform $duration $slow-out-cubic-bezier, max-height $duration $--n-ease-in-out-cubic-bezier $delay;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
transition: transform $duration $fast-in-cubic-bezier $delay, max-height $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter-to {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter {
|
|
transform: translateX(120%);
|
|
max-height: 0;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-leave {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
|
transform: translateX(120%);
|
|
max-height: 0;
|
|
}
|
|
}
|
|
|
|
@mixin slide-left-transition($block, $duration: .3s, $delay: .3s) {
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
transition: transform $duration $slow-out-cubic-bezier, max-height $duration $--n-ease-in-out-cubic-bezier $delay;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
transition: transform $duration $fast-in-cubic-bezier $delay, max-height $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter-to {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-enter {
|
|
transform: translateX(-120%);
|
|
max-height: 0;
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-leave {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
|
transform: translateX(-120%);
|
|
max-height: 0;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-height-expand-transition($block: "fade-in-height-expand", $duration: .3s, $delay: 0s) {
|
|
&.#{$namespace}-#{$block}-leave, &.#{$namespace}-#{$block}-enter-to {
|
|
opacity: 1;
|
|
}
|
|
&.#{$namespace}-#{$block}-leave-to, &.#{$namespace}-#{$block}-enter {
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
&.#{$namespace}-#{$block}-leave-active {
|
|
overflow: hidden;
|
|
transition:
|
|
max-height $duration $--n-ease-in-out-cubic-bezier,
|
|
opacity $duration $fast-in-cubic-bezier,
|
|
margin-top $duration $--n-ease-in-out-cubic-bezier,
|
|
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$block}-enter-active {
|
|
overflow: hidden;
|
|
transition: max-height $duration $--n-ease-in-out-cubic-bezier,
|
|
opacity $duration $slow-out-cubic-bezier,
|
|
margin-top $duration $--n-ease-in-out-cubic-bezier,
|
|
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-width-expand-transition($block: "fade-in-width-expand", $duration: .2s, $delay: .1s) {
|
|
&.#{$namespace}-#{$block}-leave-active {
|
|
transition: opacity $duration $--n-ease-in-out-cubic-bezier, max-width $duration $--n-ease-in-out-cubic-bezier $delay,
|
|
margin-left $duration $--n-ease-in-out-cubic-bezier $delay,
|
|
margin-right $duration $--n-ease-in-out-cubic-bezier $delay;
|
|
}
|
|
&.#{$namespace}-#{$block}-enter-active {
|
|
transition: opacity $duration $--n-ease-in-out-cubic-bezier $delay, max-width $duration $--n-ease-in-out-cubic-bezier,
|
|
margin-left $duration $--n-ease-in-out-cubic-bezier,
|
|
margin-right $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$block}-enter-to {
|
|
opacity: 1;
|
|
}
|
|
&.#{$namespace}-#{$block}-enter {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
opacity: 0!important;
|
|
}
|
|
&.#{$namespace}-#{$block}-leave {
|
|
opacity: 1;
|
|
}
|
|
&.#{$namespace}-#{$block}-leave-to {
|
|
opacity: 0 !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
@mixin fade-up-width-expand-transition($block: "fade-up-width-expand", $duration: .2s) {
|
|
&.#{$namespace}-#{$block}-leave-active {
|
|
transition: opacity $duration $fast-in-cubic-bezier, max-width $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$block}-enter-active {
|
|
transition: opacity $duration $fast-in-cubic-bezier, max-width $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$block}-enter-to {
|
|
opacity: 1;
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$block}-enter {
|
|
max-width: 0!important;
|
|
opacity: 0;
|
|
transform: translateY(60%);
|
|
}
|
|
&.#{$namespace}-#{$block}-leave {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$block}-leave-to {
|
|
max-width: 0!important;
|
|
opacity: 0!important;
|
|
transform: translateY(60%);
|
|
}
|
|
}
|
|
|
|
@mixin icon-switch-transition ($original-transform: (), $left: 0, $top: 0) {
|
|
&.n-icon-switch-enter, &.n-icon-switch-leave-to {
|
|
/* make sure it apply to element */
|
|
transform: $original-transform scale(.75);
|
|
opacity: 0;
|
|
}
|
|
&.n-icon-switch-enter-to, &.n-icon-switch-leave {
|
|
transform: scale(0.9999) $original-transform;
|
|
opacity: 1;
|
|
}
|
|
&.n-icon-switch-leave-active, &.n-icon-switch-enter-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: $left;
|
|
top: $top;
|
|
transition:
|
|
all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
} |