element-plus.var.less 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. // 可选代码变量
  2. :root {
  3. color-scheme:light;
  4. --@{elNamespace}-color-white:#ffffff;
  5. --@{elNamespace}-color-black:#000000;
  6. --@{elNamespace}-color-primary:#409eff;
  7. --@{elNamespace}-color-primary-light-3:#79bbff;
  8. --@{elNamespace}-color-primary-light-5:#a0cfff;
  9. --@{elNamespace}-color-primary-light-7:#c6e2ff;
  10. --@{elNamespace}-color-primary-light-8:#d9ecff;
  11. --@{elNamespace}-color-primary-light-9:#ecf5ff;
  12. --@{elNamespace}-color-primary-dark-2:#337ecc;
  13. --@{elNamespace}-color-success:#67c23a;
  14. --@{elNamespace}-color-success-light-3:#95d475;
  15. --@{elNamespace}-color-success-light-5:#b3e19d;
  16. --@{elNamespace}-color-success-light-7:#d1edc4;
  17. --@{elNamespace}-color-success-light-8:#e1f3d8;
  18. --@{elNamespace}-color-success-light-9:#f0f9eb;
  19. --@{elNamespace}-color-success-dark-2:#529b2e;
  20. --@{elNamespace}-color-warning:#e6a23c;
  21. --@{elNamespace}-color-warning-light-3:#eebe77;
  22. --@{elNamespace}-color-warning-light-5:#f3d19e;
  23. --@{elNamespace}-color-warning-light-7:#f8e3c5;
  24. --@{elNamespace}-color-warning-light-8:#faecd8;
  25. --@{elNamespace}-color-warning-light-9:#fdf6ec;
  26. --@{elNamespace}-color-warning-dark-2:#b88230;
  27. --@{elNamespace}-color-danger:#f56c6c;
  28. --@{elNamespace}-color-danger-light-3:#f89898;
  29. --@{elNamespace}-color-danger-light-5:#fab6b6;
  30. --@{elNamespace}-color-danger-light-7:#fcd3d3;
  31. --@{elNamespace}-color-danger-light-8:#fde2e2;
  32. --@{elNamespace}-color-danger-light-9:#fef0f0;
  33. --@{elNamespace}-color-danger-dark-2:#c45656;
  34. --@{elNamespace}-color-error:#f56c6c;
  35. --@{elNamespace}-color-error-light-3:#f89898;
  36. --@{elNamespace}-color-error-light-5:#fab6b6;
  37. --@{elNamespace}-color-error-light-7:#fcd3d3;
  38. --@{elNamespace}-color-error-light-8:#fde2e2;
  39. --@{elNamespace}-color-error-light-9:#fef0f0;
  40. --@{elNamespace}-color-error-dark-2:#c45656;
  41. --@{elNamespace}-color-info:#909399;
  42. --@{elNamespace}-color-info-light-3:#b1b3b8;
  43. --@{elNamespace}-color-info-light-5:#c8c9cc;
  44. --@{elNamespace}-color-info-light-7:#dedfe0;
  45. --@{elNamespace}-color-info-light-8:#e9e9eb;
  46. --@{elNamespace}-color-info-light-9:#f4f4f5;
  47. --@{elNamespace}-color-info-dark-2:#73767a;
  48. --@{elNamespace}-bg-color:#ffffff;
  49. --@{elNamespace}-bg-color-page:#f2f3f5;
  50. --@{elNamespace}-bg-color-overlay:#ffffff;
  51. --@{elNamespace}-text-color-primary:#303133;
  52. --@{elNamespace}-text-color-regular:#606266;
  53. --@{elNamespace}-text-color-secondary:#909399;
  54. --@{elNamespace}-text-color-placeholder:#a8abb2;
  55. --@{elNamespace}-text-color-disabled:#c0c4cc;
  56. --@{elNamespace}-border-color:#dcdfe6;
  57. --@{elNamespace}-border-color-light:#e4e7ed;
  58. --@{elNamespace}-border-color-lighter:#ebeef5;
  59. --@{elNamespace}-border-color-extra-light:#f2f6fc;
  60. --@{elNamespace}-border-color-dark:#d4d7de;
  61. --@{elNamespace}-border-color-darker:#cdd0d6;
  62. --@{elNamespace}-fill-color:#f0f2f5;
  63. --@{elNamespace}-fill-color-light:#f5f7fa;
  64. --@{elNamespace}-fill-color-lighter:#fafafa;
  65. --@{elNamespace}-fill-color-extra-light:#fafcff;
  66. --@{elNamespace}-fill-color-dark:#ebedf0;
  67. --@{elNamespace}-fill-color-darker:#e6e8eb;
  68. --@{elNamespace}-fill-color-blank:#ffffff;
  69. // dialog
  70. --@{elNamespace}-box-shadow:0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
  71. // select
  72. --@{elNamespace}-box-shadow-light:0px 0px 12px rgba(0, 0, 0, 0.12);
  73. // 仅el-backtop
  74. --@{elNamespace}-box-shadow-lighter:0px 0px 6px rgba(0, 0, 0, 0.12);
  75. // 仅抽屉组件使用
  76. --@{elNamespace}-box-shadow-dark:0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  77. --@{elNamespace}-disabled-bg-color:var(~'--@{elNamespace}-fill-color-light');
  78. --@{elNamespace}-disabled-text-color:var(~'--@{elNamespace}-text-color-placeholder');
  79. --@{elNamespace}-disabled-border-color:var(~'--@{elNamespace}-border-color-light');
  80. --@{elNamespace}-overlay-color:rgba(0, 0, 0, 0.8);
  81. --@{elNamespace}-overlay-color-light:rgba(0, 0, 0, 0.7);
  82. --@{elNamespace}-overlay-color-lighter:rgba(0, 0, 0, 0.5);
  83. --@{elNamespace}-mask-color:rgba(255, 255, 255, 0.9);
  84. --@{elNamespace}-mask-color-extra-light:rgba(255, 255, 255, 0.3);
  85. --@{elNamespace}-border-width:1px;
  86. --@{elNamespace}-border-style:solid;
  87. --@{elNamespace}-border-color-hover:var(~'--@{elNamespace}-text-color-disabled');
  88. --@{elNamespace}-border:var(~'--@{elNamespace}-border-width') var(~'--@{elNamespace}-border-style') var(~'--@{elNamespace}-border-color');
  89. --@{elNamespace}-svg-monochrome-grey:var(~'--@{elNamespace}-border-color')
  90. }
  91. :root {
  92. --@{elNamespace}-color-white:#ffffff;
  93. --@{elNamespace}-color-black:#000000;
  94. --@{elNamespace}-color-primary-rgb:64, 158, 255;
  95. --@{elNamespace}-color-success-rgb:103, 194, 58;
  96. --@{elNamespace}-color-warning-rgb:230, 162, 60;
  97. --@{elNamespace}-color-danger-rgb:245, 108, 108;
  98. --@{elNamespace}-color-error-rgb:245, 108, 108;
  99. --@{elNamespace}-color-info-rgb:144, 147, 153;
  100. --@{elNamespace}-font-size-extra-large:20px;
  101. --@{elNamespace}-font-size-large:18px;
  102. --@{elNamespace}-font-size-medium:16px;
  103. --@{elNamespace}-font-size-base:14px;
  104. --@{elNamespace}-font-size-small:13px;
  105. --@{elNamespace}-font-size-extra-small:12px;
  106. --@{elNamespace}-font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  107. --@{elNamespace}-font-weight-primary:500;
  108. --@{elNamespace}-font-line-height-primary:24px;
  109. --@{elNamespace}-index-normal:1;
  110. --@{elNamespace}-index-top:1000;
  111. --@{elNamespace}-index-popper:2000;
  112. --@{elNamespace}-border-radius-base:4px;
  113. --@{elNamespace}-border-radius-small:2px;
  114. --@{elNamespace}-border-radius-round:20px;
  115. --@{elNamespace}-border-radius-circle:100%;
  116. --@{elNamespace}-transition-duration:0.3s;
  117. --@{elNamespace}-transition-duration-fast:0.2s;
  118. --@{elNamespace}-transition-function-ease-in-out-bezier:cubic-bezier(0.645, 0.045, 0.355, 1);
  119. --@{elNamespace}-transition-function-fast-bezier:cubic-bezier(0.23, 1, 0.32, 1);
  120. --@{elNamespace}-transition-all:all var(~'--@{elNamespace}-transition-duration') var(~'--@{elNamespace}-transition-function-ease-in-out-bezier');
  121. --@{elNamespace}-transition-fade:opacity var(~'--@{elNamespace}-transition-duration') var(~'--@{elNamespace}-transition-function-fast-bezier');
  122. --@{elNamespace}-transition-md-fade:transform var(~'--@{elNamespace}-transition-duration') var(~'--@{elNamespace}-transition-function-fast-bezier'), opacity var(~'--@{elNamespace}-transition-duration') var(~'--@{elNamespace}-transition-function-fast-bezier');
  123. --@{elNamespace}-transition-fade-linear:opacity var(~'--@{elNamespace}-transition-duration-fast') linear;
  124. --@{elNamespace}-transition-border:border-color var(~'--@{elNamespace}-transition-duration-fast') var(~'--@{elNamespace}-transition-function-ease-in-out-bezier');
  125. --@{elNamespace}-transition-box-shadow:box-shadow var(~'--@{elNamespace}-transition-duration-fast') var(~'--@{elNamespace}-transition-function-ease-in-out-bezier');
  126. --@{elNamespace}-transition-color:color var(~'--@{elNamespace}-transition-duration-fast') var(~'--@{elNamespace}-transition-function-ease-in-out-bezier');
  127. --@{elNamespace}-component-size-large:40px;
  128. --@{elNamespace}-component-size:32px;
  129. --@{elNamespace}-component-size-small:24px
  130. }