基本
UI 库的基本设置
通用
目录
字号
| 大的文字 | |
| 中等文字 | |
| 小的文字 | |
| 更小的字 |
文字的大小和使用场景如下所示：
| 文字大小 | class | Sass 变量 | 使用场景 | |
|---|---|---|---|---|
| 大的文字 | 18px | .Font--large | $youyu-font-size-lg | 用于大标题，如页面标题 |
| 中等文字 | 16px | .Font--medium | $youyu-font-size-md | 用于正文标题，如问答、任务的标题 |
| 小的文字 | 14px | .Font--small | $youyu-font-size-sm | 用于正文内容 |
| 更小的字 | 12px | .Font--exSmall | $youyu-font-size-xs | 用于附加信息，如时间、评论数 |
颜色
基本色
| 色值 | Sass 变量 | |
|---|---|---|
#ED6553 | $youyu-color-red | |
#7DC5FF | $youyu-color-blue | |
#F1942D | $youyu-color-orange | |
#49B39E | $youyu-color-green | |
#ECF4FB | $youyu-color-aqua | |
#4C4C4C | $youyu-color-gray-darker | |
#666666 | $youyu-color-gray-dark | |
#999999 | $youyu-color-gray | |
#B2B2B2 | $youyu-color-gray-light |
文本色
| 色值 | Sass 变量 | 使用场景 | |
|---|---|---|---|
#4C4C4C | $youyu-text-color-lg$youyu-text-color-md | 常用于大的文字和中等文字 | |
#666666 | $youyu-text-color-sm | 常用于小的文字 | |
#999999 | $youyu-text-color-xs | 常用于更小的字 |
按钮色
| 色值 | Sass 变量 | 使用场景 | |
|---|---|---|---|
#ED6553 | $youyu-btn-color-primary | 主要按钮 | |
#7DC5FF | $youyu-btn-color-minor | 次要按钮 | |
#ECF4FB | $youyu-btn-color-avoid$youyu-btn-color-disabled | 不建议点击的和失效状态的按钮 |
边框色
| 色值 | Sass 变量 | |
|---|---|---|
#ECF4FB | $youyu-border-color-base |