gg-y-ui/src/styles/var.less

An enterprise-class UI design language and Vue-based implementation for web

// y-ui standard style library (LESS)

@y-ui-prefix: y;

// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// Color
@skyblue: #3cbaff;

@blue1: #4598f0;
@blue2: #418cdb;
@blue1-10: fade(@blue1, 10%);
@blue1-20: fade(@blue1, 20%);

@red1: #ea5e56;
@red2: #dd4e45;
@red1-10: fade(@red1, 10%);
@red1-20: fade(@red1, 20%);

@yellow1: #f59c25;
@yellow2: #eb8e12;
@yellow1-10: fade(@yellow1, 10%);
@yellow1-20: fade(@yellow1, 20%);

@orange1: #e26735;
@orange2: #d85925;
@orange1-10: fade(@orange1, 10%);
@orange1-20: fade(@orange1, 20%);

@green1: #32aa70;
@green2: #17a05e;
@green1-10: fade(@green1, 10%);
@green1-20: fade(@green1, 20%);

@teal1: #13bbad;
@teal2: #14ab9f;
@teal1-10: fade(@teal1, 10%);
@teal1-20: fade(@teal1, 20%);

@cyan1: #3fb7df;
@cyan2: #2ca8d1;
@cyan1-10: fade(@cyan1, 10%);
@cyan1-20: fade(@cyan1, 20%);

@indigo1: #4570d3;
@indigo2: #4168c1;
@indigo1-10: fade(@indigo1, 10%);
@indigo1-20: fade(@indigo1, 20%);

@purple1: #655dd4;
@purple2: #5e57c2;
@purple1-10: fade(@purple1, 10%);
@purple1-20: fade(@purple1, 20%);

@pink1: #de4873;
@pink2: #d23c67;
@pink1-10: fade(@pink1, 10%);
@pink1-20: fade(@pink1, 20%);

@gray1: #484b51;
@gray2: #44464c;
@gray1-10: fade(@gray1, 10%);
@gray1-20: fade(@gray1, 20%);

@brown1: #bd784d;
@brown2: #b06a3e;
@brown1-10: fade(@brown1, 10%);
@brown1-20: fade(@brown1, 20%);

@nc1: #1d1d1d;
@nc2: #272f32;
@nc3: #3d464a;
@nc4: #465459;
@nc5: #768893;
@nc6: #adb8be;
@nc7: #c2ccd0;
@nc8: #d7dee3;
@nc9: #e6ebee;
@nc10: #f1f4f9;
@nc11: #f4f6fa;
@nc12: #f8f9fb;

@white: #ffffff;
@white-20: fade(@white, 20%);
@white-80: fade(@white, 80%);

@shadow: #0c213f;
@shadow1: 0px 3px 6px fade(@shadow, 12%);
@shadow2: 0px 6px 16px fade(@shadow, 18%);
@shadow3: 0px 9px 30px fade(@shadow, 20%);

@mask1: #0c213f;
@mask2: fade(@mask1, 30%);
@mask3: fade(@mask1, 80%);

@grad1: linear-gradient(270deg, @blue1 0%, #3f70ff 100%);


// Border
@border-solid-thin: 1px solid;
@border-dashed-thin: 1px dashed;
@border-radius: 0px;
@border-radius-2: 2px;
@border-radius-4: 4px;
@border-radius-8: 8px;
@border-radius-30: 30px;

// Font
@fontFamily: Helvetica, sans-serif, '-apple-system', Arial, Microsoft YaHei, Microsoft JhengHei, Helvetica Neue, sans-serif;
.font12 () {
  font-size: 12px;
  line-height: 16px;
}
.font13 () {
  font-size: 13px;
  line-height: 18px;
}
.font14 () {
  font-size: 14px;
  line-height: 20px;
}
.font16 () {
  font-size: 16px;
  line-height: 22px;
}
.font18 () {
  font-size: 18px;
  line-height: 26px;
}
.font20 () {
  font-size: 20px;
  line-height: 28px;
}
.font24 () {
  font-size: 24px;
  line-height: 24px;
}
.font30 () {
  font-size: 30px;
  line-height: 42px;
}

// Space
@space4: 4px;
@space8: @space4 * 2;
@space12: @space4 * 3;
@space16: @space4 * 4;
@space24: @space4 * 6;
@space32: @space4 * 8;