variables.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. // 颜色
  2. $colors: (
  3. "primary": #1A5CD7,
  4. "info-1": #4394e4,
  5. "info": #4b67af,
  6. "white": #ffffff,
  7. "light": #f9f9f9,
  8. "grey-1": #999999,
  9. "grey": #666666,
  10. "dark-1": #5f5f5f,
  11. "dark": #222222,
  12. "black-1": #171823,
  13. "black": #000000,
  14. "icon": #5cd9e8
  15. );
  16. // 字体大小
  17. $base-font-size: 0.2rem;
  18. $font-sizes: (
  19. xxs: 0.1,
  20. //8px
  21. xs: 0.125,
  22. //10px
  23. sm: 0.2875,
  24. //12px
  25. md: 0.1625,
  26. //13px
  27. lg: 0.175,
  28. //14px
  29. xl: 0.2,
  30. //16px
  31. xxl: 0.225,
  32. //18px
  33. xxxl: 0.25 //20px,,,,
  34. );
  35. // 宽高
  36. .w-100 {
  37. width: 100%;
  38. }
  39. .h-100 {
  40. height: 100%;
  41. }
  42. //flex
  43. .flex {
  44. display: flex;
  45. }
  46. .flex-column {
  47. flex-direction: column;
  48. }
  49. .flex-wrap {
  50. flex-wrap: wrap;
  51. }
  52. .flex-nowrap {
  53. flex-wrap: nowrap;
  54. }
  55. $flex-jc: (
  56. start: flex-start,
  57. end: flex-end,
  58. center: center,
  59. between: space-between,
  60. around: space-around,
  61. evenly: space-evenly,
  62. );
  63. $flex-ai: (
  64. start: flex-start,
  65. end: flex-end,
  66. center: center,
  67. stretch: stretch,
  68. );
  69. .flex-1 {
  70. flex: 1;
  71. }
  72. //.mt-1 => margin top
  73. //spacing
  74. $spacing-types: (
  75. m: margin,
  76. p: padding,
  77. );
  78. $spacing-directions: (
  79. t: top,
  80. r: right,
  81. b: bottom,
  82. l: left,
  83. );
  84. $spacing-base-size: 0.5rem;
  85. $spacing-sizes: (
  86. 0: 0,
  87. 1: 0.5,
  88. 2: 1,
  89. 3: 1.5,
  90. 4: 2,
  91. 5: 2.5,
  92. );