bin-ui/src/styles/common/variables.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

$font-path := './fonts'

/* Color
-------------------------- */
$color-white := #FFFFFF;
$color-white-light := rgba(255, 255, 255, 0.65);
$color-white-light2 := rgba(255, 255, 255, 0.35);

$color-primary := #1089ff;
$color-primary-light1 := mix(#FFFFFF, $color-primary, 20%);
$color-primary-light2 := mix(#FFFFFF, $color-primary, 40%);
$color-primary-light3 := mix(#FFFFFF, $color-primary, 60%);
$color-primary-light4 := mix(#FFFFFF, $color-primary, 80%);
$color-primary-light5 := mix(#FFFFFF, $color-primary, 90%);
$color-primary-light6 := mix(#FFFFFF, $color-primary, 95%);
$color-primary-active := mix(#000000, $color-primary, 10%);

$color-success = #52c41a;
$color-success-light1 := mix(#FFFFFF, $color-success, 20%);
$color-success-light2 := mix(#FFFFFF, $color-success, 40%);
$color-success-light3 := mix(#FFFFFF, $color-success, 60%);
$color-success-light4 := mix(#FFFFFF, $color-success, 80%);
$color-success-light5 := mix(#FFFFFF, $color-success, 90%);
$color-success-light6 := mix(#FFFFFF, $color-success, 95%);
$color-success-active := mix(#000000, $color-success, 10%);

$color-info := #35495E;
$color-info-light1 := mix(#FFFFFF, $color-info, 20%);
$color-info-light2 := mix(#FFFFFF, $color-info, 40%);
$color-info-light3 := mix(#FFFFFF, $color-info, 60%);
$color-info-light4 := mix(#FFFFFF, $color-info, 80%);
$color-info-light5 := mix(#FFFFFF, $color-info, 90%);
$color-info-light6 := mix(#FFFFFF, $color-info, 95%);
$color-info-active := mix(#000000, $color-info, 10%);

$color-warning := #fea638;
$color-warning-light1 := mix(#FFFFFF, $color-warning, 20%);
$color-warning-light2 := mix(#FFFFFF, $color-warning, 40%);
$color-warning-light3 := mix(#FFFFFF, $color-warning, 60%);
$color-warning-light4 := mix(#FFFFFF, $color-warning, 80%);
$color-warning-light5 := mix(#FFFFFF, $color-warning, 90%);
$color-warning-light6 := mix(#FFFFFF, $color-warning, 95%);
$color-warning-active := mix(#000000, $color-warning, 10%);

$color-danger := #ff4d4f;
$color-danger-light1 := mix(#FFFFFF, $color-danger, 20%);
$color-danger-light2 := mix(#FFFFFF, $color-danger, 40%);
$color-danger-light3 := mix(#FFFFFF, $color-danger, 60%);
$color-danger-light4 := mix(#FFFFFF, $color-danger, 80%);
$color-danger-light5 := mix(#FFFFFF, $color-danger, 90%);
$color-danger-light6 := mix(#FFFFFF, $color-danger, 95%);
$color-danger-active := mix(#000000, $color-danger, 10%);

/* text-color
-------------------------- */
$color-text-primary := rgba(0, 0, 0, .85);
$color-text-default := rgba(0, 0, 0, .65);
$color-text-secondary := rgba(0, 0, 0, .45);
$color-text-disabled := rgba(0, 0, 0, .25);
$color-text-placeholder := #C0C4CC;
$btn-disable-color := #c5c8ce;

/* bg-color
-------------------------- */
$color-bg-fa := #fafafa;
$color-select-hover := #f5f5f5;
$color-effect-shadow := alpha($color-primary, 0.08);
$color-input-shadow := alpha($color-primary, 0.2);
$color-input-error-shadow := alpha($color-danger, 0.2);

/* border
-------------------------- */
$border-color-base := #d9d9d9;
$border-color-light := #f0f0f0;
$border-base := 1px solid $border-color-base;
$border-base-light := 1px solid $border-color-light;
$border-table := 1px solid #e8eaec;
$border-table-color := #e8eaec;

/* radius font-size
-------------------------- */
$border-base-radius := 2px;
$base-font-size := 14px;
$header-font-size := 16px;

/* height
-------------------------- */
$large-height := 36px;
$default-height := 32px;
$small-height := 28px;
$mini-height := 24px;
$base-line-height := 1.5715;

$animation-duration-slow := 0.3s;
$animation-duration-base := 0.2s;
$animation-duration-fast := 0.1s;