naive-ui/styles/theme/default.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;
$default-font-family: 'Lato';
$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-font-family: $default-font-family;
$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: 2px;
$button-box-shadow-ripple-spread: 4px;
$button-box-shadow-spread-alpha: .3;
$button-box-shadow-ripple-spread-alpha: 0;
$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': (inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'), 0 0 0 0 change-color(map-get($map: $button-border-color, $key: 'default'), $alpha: $button-box-shadow-spread-alpha), 0 0 0 0 change-color(map-get($map: $button-border-color, $key: 'default'), $alpha: 1)),  
  'default-focus-ripple-end': (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), 0 0 0 $button-box-shadow-ripple-spread change-color(map-get($map: $button-border-color, $key: 'default'), $alpha: $button-box-shadow-ripple-spread-alpha)),
  '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 change-color(map-get($map: $button-border-color, $key: 'primary'), $alpha: $button-box-shadow-spread-alpha), 0 0 0 0 change-color(map-get($map: $button-border-color, $key: 'primary'), $alpha: 1)),  
  'primary-focus-ripple-end': (0 0 0 $button-box-shadow-spread change-color(map-get($map: $button-border-color, $key: 'primary'), $alpha: $button-box-shadow-spread-alpha), 0 0 0 $button-box-shadow-ripple-spread change-color(map-get($map: $button-border-color, $key: 'primary'), $alpha: $button-box-shadow-ripple-spread-alpha)),
);
$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%);

$default-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-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) {
  &.#{$namespace}-#{$block}--transition-leave-active {
    transform-origin: $origin;
    transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier;
  }
  &.#{$namespace}-#{$block}--transition-enter-active {
    transform-origin: $origin;
    transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
  }
  &.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
    opacity: 0;
    transform: scale(.9);
  }
  &.#{$namespace}-#{$block}--transition-leave, &.#{$namespace}-#{$block}--transition-enter-to {
    opacity: 1; 
    transform: scale(1);
  }
}

@mixin fade-in-transition($block: "fade-in", $enter-duration: .2s, $leave-duration: .2s) {
  &.#{$namespace}-#{$block}--transition-enter-active {
    transition: opacity $enter-duration $default-cubic-bezier;
  }
  &.#{$namespace}-#{$block}--transition-leave-active {
    transition: opacity $leave-duration $default-cubic-bezier;
  }
  &.#{$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 $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;
  }
}

@mixin slide-in-from-right-transition($duration: .3s) {
  &.#{$namespace}-slide-in-from-right-leave-active {
    transition: transform $duration cubic-bezier(.78, .14, .15, .86);
  }
  &.#{$namespace}-slide-in-from-right-enter-active {
    transition: transform $duration cubic-bezier(.7, .3, .1, 1);
  }
  &.#{$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 $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 {
    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 $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 {
    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 height-seamlessly-expand-transition($block: "height-seamlessly-expand", $duration: .3s, $delay: 0s) {
  &.#{$namespace}-#{$block}-leave, &.#{$namespace}-#{$block}-enter-to {
    opacity: 1;
  }
  &.#{$namespace}-#{$block}-leave-to, &.#{$namespace}-#{$block}-enter {
    opacity: 0;
  }
  &.#{$namespace}-#{$block}-leave-active {
    overflow: hidden;
    transition: max-height $duration $default-cubic-bezier, opacity $duration $slow-out-cubic-bezier;
  }
  &.#{$namespace}-#{$block}-enter-active {
    overflow: hidden;
    transition: max-height $duration $default-cubic-bezier, opacity $duration $fast-in-cubic-bezier;
  }
}

@mixin fade-in-width-expand-transition($block: "fade-in-width-expand", $duration: .2s, $delay: .1s) {
  &.#{$namespace}-#{$block}-leave-active {
    transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay, margin-right $duration $default-cubic-bezier, margin-left $duration $default-cubic-bezier;
  }
  &.#{$namespace}-#{$block}-enter-active {
    transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier, margin-right $duration $default-cubic-bezier, margin-left $duration $default-cubic-bezier;
  }
  &.#{$namespace}-#{$block}-enter-to {
    opacity: 1;
  }
  &.#{$namespace}-#{$block}-enter {
    max-width: 0!important;
    margin-left: 0!important;
    margin-right: 0!important;
    opacity: 0;
  }
  &.#{$namespace}-#{$block}-leave {
    opacity: 1;
  }
  &.#{$namespace}-#{$block}-leave-to {
    margin-left: 0!important;
    margin-right: 0!important;
    max-width: 0!important;
    opacity: 0!important;
  }
}