2019-07-05 19:57:05 +08:00
|
|
|
@import './mixins/config.scss';
|
|
|
|
|
2019-06-13 14:53:30 +08:00
|
|
|
$body-background-color: #1a2033;
|
|
|
|
|
2019-06-25 11:09:11 +08:00
|
|
|
/**
|
|
|
|
* genaral
|
|
|
|
*/
|
2019-07-05 19:57:05 +08:00
|
|
|
$tiny-height: 22px;
|
2019-06-25 11:09:11 +08:00
|
|
|
$small-height: 28px;
|
|
|
|
$default-height: 34px;
|
2019-07-14 14:34:14 +08:00
|
|
|
$medium-height: 34px;
|
2019-06-25 11:09:11 +08:00
|
|
|
$large-height: 40px;
|
|
|
|
|
|
|
|
$main-color: #63E2B7;
|
2019-06-18 18:09:42 +08:00
|
|
|
|
2019-06-25 14:59:26 +08:00
|
|
|
$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);
|
|
|
|
|
2019-06-25 11:09:11 +08:00
|
|
|
/**
|
|
|
|
* n-input
|
|
|
|
*/
|
2019-08-23 14:20:10 +08:00
|
|
|
$small-input-font-size: 13px;
|
2019-06-19 13:54:13 +08:00
|
|
|
$default-input-font-size: 14px;
|
2019-08-23 14:20:10 +08:00
|
|
|
$large-input-font-size: 15px;
|
2019-06-25 11:09:11 +08:00
|
|
|
$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);
|
2019-06-25 14:59:26 +08:00
|
|
|
$focus-input-background-color: rgba(99, 226, 183, 0.1);
|
2019-07-04 16:47:41 +08:00
|
|
|
$input-border-radius: 6px;
|
2019-06-25 11:09:11 +08:00
|
|
|
$input-icon-color: rgba(255,255,255,0.2);
|
|
|
|
|
2019-06-25 14:59:26 +08:00
|
|
|
/**
|
|
|
|
* n-button
|
|
|
|
*/
|
|
|
|
$button-margin: 0 12px 8px 0;
|
|
|
|
$button-border-radius: 6px;
|
2019-07-05 19:57:05 +08:00
|
|
|
$button-tiny-font-size: 12px;
|
2019-06-25 14:59:26 +08:00
|
|
|
$button-small-font-size: 14px;
|
|
|
|
$button-default-font-size: 16px;
|
|
|
|
$button-large-font-size: 16px;
|
|
|
|
$button-default-text-color: $main-color;
|
|
|
|
$button-default-border-color: $main-color;
|
|
|
|
$button-default-background-color: transparent;
|
|
|
|
$button-default-background-color--hover: rgba(99, 226, 183, .3);
|
|
|
|
$button-default-background-color--active: rgba(99, 226, 183, .2);
|
|
|
|
$button-primary-background-color: $main-color;
|
|
|
|
$button-primary-background-color--hover: rgb(103, 235, 190);
|
|
|
|
$button-primary-background-color--active: rgb(97, 218, 177);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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);
|
2019-08-01 15:15:25 +08:00
|
|
|
$select-item-background-color--active: rgba(96, 220, 178, 0.3);
|
2019-06-25 14:59:26 +08:00
|
|
|
$select-border-radius: 8px;
|
|
|
|
$select-border-color--active: $main-color;
|
2019-06-18 18:09:42 +08:00
|
|
|
|
2019-06-25 15:48:04 +08:00
|
|
|
/**
|
|
|
|
* 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-bagkround-color--active: rgba(99,226,183,0.3);
|
2019-06-18 18:09:42 +08:00
|
|
|
|
2019-06-25 16:54:51 +08:00
|
|
|
/**
|
|
|
|
* 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;
|
|
|
|
|
2019-07-14 14:34:14 +08:00
|
|
|
/**
|
|
|
|
* 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);
|
|
|
|
|
2019-06-13 14:53:30 +08:00
|
|
|
$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%);
|
2019-06-17 18:06:42 +08:00
|
|
|
$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%);
|
2019-06-25 14:59:26 +08:00
|
|
|
|
2019-06-14 17:39:56 +08:00
|
|
|
$default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
|
|
|
|
|
2019-07-03 17:52:13 +08:00
|
|
|
$default-font-family: 'Lato';
|
|
|
|
|
2019-07-31 17:35:37 +08:00
|
|
|
$scrollbar-color: rgba(255,255,255,0.2);
|
|
|
|
$scrollbar-color--hover: rgba(255,255,255,0.3);
|
|
|
|
|
2019-07-03 17:52:13 +08:00
|
|
|
@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);
|
|
|
|
}
|
2019-07-05 19:57:05 +08:00
|
|
|
}
|
|
|
|
|
2019-07-14 14:34:14 +08:00
|
|
|
@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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-07-05 19:57:05 +08:00
|
|
|
@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;
|
|
|
|
}
|
2019-07-22 15:15:55 +08:00
|
|
|
}
|
|
|
|
|
2019-08-16 16:48:36 +08:00
|
|
|
@mixin fade-in-scale-up-transition($block, $origin: inherit, $duration: .2s) {
|
2019-07-22 17:41:56 +08:00
|
|
|
&.#{$namespace}-#{$block}--transition-enter-active,
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
|
|
transform: scale(1);
|
2019-08-16 16:48:36 +08:00
|
|
|
opacity: $duration;
|
2019-07-22 17:41:56 +08:00
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
|
|
transform-origin: $origin;
|
2019-08-16 16:48:36 +08:00
|
|
|
transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
|
2019-07-22 17:41:56 +08:00
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
transform-origin: $origin;
|
|
|
|
transform: scale(.9);
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
2019-08-16 16:48:36 +08:00
|
|
|
transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier;
|
2019-07-22 17:41:56 +08:00
|
|
|
}
|
2019-07-31 17:35:37 +08:00
|
|
|
}
|
|
|
|
|
2019-08-01 18:19:03 +08:00
|
|
|
@mixin fade-in-transition($block, $duration: .2s) {
|
2019-07-31 17:35:37 +08:00
|
|
|
&.#{$namespace}-#{$block}--transition-enter-active,
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
2019-08-01 18:19:03 +08:00
|
|
|
transition: opacity $duration $fast-in-cubic-bezier;
|
2019-07-31 17:35:37 +08:00
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
2019-08-01 18:19:03 +08:00
|
|
|
transition: opacity $duration $slow-out-cubic-bezier;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@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 $default-cubic-bezier;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
|
|
|
transition: opacity $duration $default-cubic-bezier;
|
2019-07-31 17:35:37 +08:00
|
|
|
}
|
2019-09-03 19:18:16 +08:00
|
|
|
}
|
|
|
|
|
2019-09-03 23:41:01 +08:00
|
|
|
@mixin slide-right-transition($block, $duration: .3s, $delay: .3s) {
|
2019-09-03 19:18:16 +08:00
|
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
|
|
transition: transform $duration $slow-out-cubic-bezier, max-height $duration $default-cubic-bezier $delay;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
|
|
transition: transform $duration $fast-in-cubic-bezier $delay, max-height $duration $default-cubic-bezier;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter-to {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter {
|
2019-09-03 23:41:01 +08:00
|
|
|
transform: translateX(120%);
|
2019-09-03 19:18:16 +08:00
|
|
|
max-height: 0;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
2019-09-03 23:41:01 +08:00
|
|
|
transform: translateX(120%);
|
2019-09-03 19:18:16 +08:00
|
|
|
max-height: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-03 23:41:01 +08:00
|
|
|
@mixin slide-left-transition($block, $duration: .3s, $delay: .3s) {
|
2019-09-03 19:18:16 +08:00
|
|
|
&.#{$namespace}-#{$block}--transition-leave-active {
|
|
|
|
transition: transform $duration $slow-out-cubic-bezier, max-height $duration $default-cubic-bezier $delay;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter-active {
|
|
|
|
transition: transform $duration $fast-in-cubic-bezier $delay, max-height $duration $default-cubic-bezier;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter-to {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-enter {
|
2019-09-03 23:41:01 +08:00
|
|
|
transform: translateX(-120%);
|
2019-09-03 19:18:16 +08:00
|
|
|
max-height: 0;
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
&.#{$namespace}-#{$block}--transition-leave-to {
|
2019-09-03 23:41:01 +08:00
|
|
|
transform: translateX(-120%);
|
2019-09-03 19:18:16 +08:00
|
|
|
max-height: 0;
|
|
|
|
}
|
2019-07-03 17:52:13 +08:00
|
|
|
}
|