_variables.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. // 自定义颜色
  2. $custom: #59a9f8;
  3. // 深红
  4. $red-darker: #bd4147;
  5. // 蓝色
  6. $blue: #3085d6;
  7. $blue-darker: #236bb0;
  8. $blue-20: #c3dcf3;
  9. $blue-30: #b3d2f0;
  10. $blue-40: #a3c9ed;
  11. $blue-50: #92bfe9;
  12. $blue-60: #82b5e6;
  13. $blue-70: #71ace3;
  14. $blue-80: #61a2e0;
  15. $blue-90: #5198dc;
  16. $blue-95: #408fd9;
  17. // 渐变蓝色
  18. $blue-linear-gradient: linear-gradient(118deg, rgba($blue, 1), rgba($blue, 0.7));
  19. // 深色
  20. $dark20: #f6fbff;
  21. $dark30: #f4f7fa;
  22. $dark40: #ebf0f3;
  23. $dark50: #d3dde5;
  24. $dark60: #bacad6;
  25. $dark65: #8aa5b9;
  26. $dark70: #b3b9bf;
  27. $dark80: #7c858e;
  28. $dark85: #5c7089;
  29. $dark90: #252d37;
  30. // 主色
  31. $primary-darker: #6355ee;
  32. $primary-20: #f7f6fe;
  33. $primary-30: #e6e4fc;
  34. $primary-40: #d6d2fb;
  35. $primary-50: #c5c0f9;
  36. $primary-60: #b5aef7;
  37. $primary-70: #a49df5;
  38. $primary-80: #948bf4;
  39. $primary-90: #8379f2;
  40. // 渐变主色
  41. $primary-linear-gradient: linear-gradient(118deg, rgba($primary, 1), rgba($primary, 0.7));
  42. // 字体颜色
  43. $font-color: #414750;
  44. // body背景颜色
  45. //$body-background: #f9fafc;
  46. $body-background: $dark30;
  47. // 常用阴影颜色
  48. $shadow: 0 2px 4px 0 rgba(0,0,0,.08);
  49. $shadow-100: 0 3px 1px -2px rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.05), 0 1px 5px 1px rgba(0,0,0,.05);
  50. $shadow-200: 0 3px 1px -2px rgba(0,0,0,.1), 0 2px 2px 0 rgba(0,0,0,.1), 0 1px 5px 1px rgba(0,0,0,.1);
  51. // 按钮阴影颜色
  52. $btn-shadow: $shadow-100;
  53. $btn-shadow-hover: $shadow-200;
  54. $btn-group-btn-shadow: 0 2px 0 0 rgba(0,0,0,.08);
  55. // 常用边框颜色
  56. $border-color: #eee;
  57. // 常用分割线颜色
  58. $divider-color: #f4f4f4;