variables.scss 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /* Variables */
  2. $prefix: 'le-';
  3. $le-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
  4. // 主题类型
  5. //$le-color-primary: #4097fd;
  6. $le-color-primary: var(--el-color-primary);
  7. //$le-color-success: #03b497;
  8. $le-color-success: var(--el-color-success);
  9. //$le-color-warning: #f4a508;
  10. $le-color-warning: var(--el-color-warning);
  11. //$le-color-danger: #f47367;
  12. $le-color-danger: var(--el-color-danger);
  13. //$le-color-info: #67809f;
  14. $le-color-info: var(--el-color-info);
  15. // 文字
  16. //$le-color_1: #32363b;
  17. $le-color_1: var(--el-text-color-primary);
  18. //$le-color_2: #5c6570;
  19. //$le-color_3: #7c8794;
  20. //$le-color_3: var(--el-fill-color);
  21. $le-color_3: var(--el-text-color-primary);
  22. //$le-color_4: #a0aab7;
  23. $le-color_4: var(--el-text-color-regular);
  24. //$le-color_5: #bdc3c9;
  25. $le-color_5: var(--el-text-color-secondary);
  26. // 线条
  27. //$le-border-color_1: #c6cdd5;
  28. //$le-border-color_2: #d5dbe1;
  29. //$le-border-color_3: #eaedf0;
  30. //$le-border-color_4: #f5f7fa;
  31. $le-border-color_1: var(--el-border-color);
  32. $le-border-color_2: var(--el-border-color-light);
  33. $le-border-color_3: var(--el-border-color-lighter);
  34. $le-border-color_4: var(--el-border-color-extra-light);
  35. // 背景
  36. //$le-bg-color_1: #f5f6f7;
  37. $le-bg-color_1: var(--el-bg-color);
  38. $le-bg-color_2: #f5f7fa;
  39. //$le-bg-color_3: #fafafa;
  40. // hover
  41. //$le-hover-color_1: #f6f8fa;
  42. $le-hover-color_1: var(--el-fill-color-lighter);
  43. $le-hover-color_2: #f0f7ff;
  44. //$le-color-header: #7c8794;
  45. //$le-color-black: #32363b;
  46. //$le-bg-color-gray: $le-bg-color_1;
  47. //$le-link-background-gray: $le-color-primary;
  48. $primary-color: #4285f4;
  49. $secondary-color: #e6a23c;
  50. $disabled-color: #a8abb2;
  51. $element-separator: '__' !default;
  52. $state-prefix: 'is-' !default;
  53. $modifier-separator: '--' !default;
  54. $namespace: 'ER';
  55. @mixin b($block) {
  56. $B: $namespace + '-' + $block !global;
  57. .#{$B} {
  58. @content;
  59. }
  60. }
  61. @mixin e($element) {
  62. $E: $element !global;
  63. $selector: &;
  64. $currentSelector: '';
  65. @each $unit in $element {
  66. $currentSelector: #{$currentSelector +
  67. '.' +
  68. $B +
  69. $element-separator +
  70. $unit +
  71. ','};
  72. }
  73. @at-root {
  74. #{$currentSelector} {
  75. @content;
  76. }
  77. }
  78. }
  79. @mixin when($state) {
  80. @at-root {
  81. &.#{$state-prefix + $state} {
  82. @content;
  83. }
  84. }
  85. }
  86. @mixin theme($theme: DarkGray) {
  87. background: $theme;
  88. box-shadow: 0 0 1px rgba($theme, .25);
  89. color: #fff;
  90. }