var.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. // 颜色
  2. $--color-red: #fc625d;
  3. $--color-warn: #fcbc40;
  4. $--color-success: #34c749;
  5. // 文字
  6. $--color-text: #1d2129;
  7. $--color-text-1: #4e5969;
  8. $--color-text-2: #86909c;
  9. $--color-text-3: #c9cdd4;
  10. $--color-text-4: #f2f3f5;
  11. //.mt-1 => margin top
  12. //spacing
  13. $spacing-base-size: 1em;
  14. $spacing-types: (
  15. m: margin,
  16. p: padding,
  17. );
  18. $spacing-directions: (
  19. t: top,
  20. r: right,
  21. b: bottom,
  22. l: left,
  23. );
  24. $spacing-sizes: (
  25. 0: 0,
  26. 1: 0.25,
  27. 2: 0.5,
  28. 3: 1,
  29. 4: 1.5,
  30. 5: 2.5,
  31. );
  32. // 变亮值
  33. $--light-shalow: 2%;
  34. // 白色
  35. $--color-light-bg: #fff;
  36. $--color-light-bg-1: #fafafc;
  37. $--color-light-bg-1-shallow: lighten($--color-light-bg-1, $--light-shalow);
  38. $--color-light-bg-2: #f2f3f5;
  39. $--color-light-bg-2-shallow: lighten($--color-light-bg-2, $--light-shalow);
  40. $--color-light-bg-3: #e5e6eb;
  41. $--color-light-bg-3-shallow: lighten($--color-light-bg-3, $--light-shalow);
  42. $--color-light-bg-4: #e3e3e4;
  43. $--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
  44. $--color-light-bg-5: #bebebe;
  45. $--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
  46. // 变暗值
  47. $--dark-shalow: 2%;
  48. // 黑色
  49. $--color-dark-black: #000;
  50. $--color-dark-bg-1: #18181c;
  51. $--color-dark-bg-1-shallow: darken($--color-dark-bg-1, $--dark-shalow);
  52. $--color-dark-bg-2: #232324;
  53. $--color-dark-bg-2-shallow: darken($--color-dark-bg-2, $--dark-shalow);
  54. $--color-dark-bg-3: #2a2a2b;
  55. $--color-dark-bg-3-shallow: darken($--color-dark-bg-3, $--dark-shalow);
  56. $--color-dark-bg-4: #313132;
  57. $--color-dark-bg-4-shallow: darken($--color-dark-bg-4, $--dark-shalow);
  58. $--color-dark-bg-5: #373739;
  59. $--color-dark-bg-5-shallow: darken($--color-dark-bg-5, $--dark-shalow);
  60. // 最大宽度
  61. $--max-width: 1920px;
  62. // 顶部距离
  63. $--header-height: 60px;
  64. // 底部距离
  65. $--footer-height: 50px;
  66. // 模糊
  67. $--filter-blur-base: blur(20px);
  68. // 毛玻璃
  69. $--filter-color-login-dark: rgba(35,35,36, 0.7);
  70. $--filter-color-login-dark-shallow: rgba(35,35,36, 0.3);
  71. $--filter-color-login-light: rgba(240, 240, 240, 0.7);
  72. $--filter-color-login-light-shallow: rgba(240, 240, 240, 0.3);
  73. // 边框
  74. $--border-radius-base: 8px;
  75. // 阴影
  76. $--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);