| 1 | // 颜色变量 |
| 2 | $primary-color: #409eff; |
| 3 | $success-color: #67c23a; |
| 4 | $warning-color: #e6a23c; |
| 5 | $danger-color: #f56c6c; |
| 6 | $info-color: #909399; |
| 7 | |
| 8 | // 文字颜色 |
| 9 | $text-primary: #303133; |
| 10 | $text-regular: #606266; |
| 11 | $text-secondary: #909399; |
| 12 | $text-placeholder: #c0c4cc; |
| 13 | |
| 14 | // 边框颜色 |
| 15 | $border-base: #dcdfe6; |
| 16 | $border-light: #e4e7ed; |
| 17 | $border-lighter: #ebeef5; |
| 18 | $border-extra-light: #f2f6fc; |
| 19 | |
| 20 | // 背景颜色 |
| 21 | $bg-color: #ffffff; |
| 22 | $bg-color-page: #f2f3f5; |
| 23 | $bg-color-overlay: #ffffff; |
| 24 | |
| 25 | // 字体大小 |
| 26 | $font-size-extra-large: 20px; |
| 27 | $font-size-large: 18px; |
| 28 | $font-size-medium: 16px; |
| 29 | $font-size-base: 14px; |
| 30 | $font-size-small: 13px; |
| 31 | $font-size-extra-small: 12px; |
| 32 | |
| 33 | // 间距 |
| 34 | $spacing-xs: 4px; |
| 35 | $spacing-sm: 8px; |
| 36 | $spacing-md: 16px; |
| 37 | $spacing-lg: 24px; |
| 38 | $spacing-xl: 32px; |
| 39 | |
| 40 | // 圆角 |
| 41 | $border-radius-base: 4px; |
| 42 | $border-radius-small: 2px; |
| 43 | $border-radius-round: 20px; |
| 44 | $border-radius-circle: 50%; |
| 45 | |
| 46 | // 阴影 |
| 47 | $box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); |
| 48 | $box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12); |
| 49 | $box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| 50 | |
| 51 | // 层级 |
| 52 | $z-index-normal: 1; |
| 53 | $z-index-top: 1000; |
| 54 | $z-index-popper: 2000; |