# lib styles

## UI规范

 <img style="max-width: 100%" src="../../md-resources/images/lib-styles/ui.png">

## _color/颜色

- `$nec-primary-color`: 主题色

- `$nec-warning-color`: 警告色

- `$nec-error-color`: 错误色

- `$nec-info-color`: 通知颜色，也暂时用于input:focus后的边框颜色

- `$nec-disable-color:`: 默认置灰的颜色

- `$nec-second-nav-bg`: 次级导航背景色，也用于试卷部分标题的背景色

- `$nec-text-color`: 一级（默认）文字颜色

- `$nec-second-text-color`: 二级文字色

- `$nec-third-text-color`: 三级文字色

- `$nec-holder-text-color`: 默认placeholder颜色

- `$nec-content-bg`: 内容区默认底色

- `$nec-divide-line-color`: 间隔线颜色

- `$nec-divide-part-bg`: 分割模块底色

- `$nec-border-color`: 默认边框颜色

- `$white`: 白色

- `$black`: 黑色


## _default-path/默认引用文件路径

- `$nec-font-path`: 字体图标文件的路径，默认`assets/fonts`

- `$nec-image-path`: 图片文件的路径，默认`assetes/images`


## _font-size/字体大小

- `$nec-title-font-size`: 标题字体大小

- `$nec-sub-title-font-size`: 副标题字体大小

- `$nec-button-font-size`: 按钮字体大小

- `$nec-default-font-size`: 默认字体大小

- `$nec-sub-font-size`: 辅助性文字字体大小


## _font/字体

具体参考`nec-ui`仓库中的字体图标相关文件


## _button/按钮

根据UI规范中内容，提供矩形按钮和圆形按钮两种默认按钮样式

### 矩形按钮

- `.nec-btn-primary`: 绿底白字按钮，常用于确定

- `.nec-btn-primary-white`: 白底绿字按钮，常用于确定

- `.nec-btn-warning`: 黄底白字按钮，常用于警告

- `.nec-btn-warning-white`: 白底黄字按钮，常用于警告

- `.nec-btn-error`: 红色白字按钮，常用于错误提醒

- `.nec-btn-error-white`: 白底红字按钮，常用于错误提醒

- `.nec-btn-disable`: 灰底白字按钮，常用于置灰的按钮

- `.nec-btn-disable-white`: 白底灰字按钮，常用于置灰的按钮

- `.nec-btn-default`: 白底灰框黑字，默认按钮样式


以上按钮的class都可以通过在同一个元素中再添加`.large`, `.medium`, `.small`,
`.with-icon`来设置`button`的宽度

例子：

```html
<button class="nec-btn-primary large"></button>

<button class="nec-btn-warning medium"></button>

<button class="nec-btn-error small"></button>
```


### 圆形按钮

- `.nec-circle-btn-primary`: 绿底白字按钮，常用于确定

- `.nec-circle-btn-warning`: 黄底白字按钮，常用于警告

- `.nec-circle-btn-info`: 蓝底白字按钮，常用于通知信息

- `.nec-circle-btn-disable`: 灰底灰字按钮，失效按钮


## _class/常用样式总结

这个文件总结了部分常用的样式 & UI规范中的一些样式

- `.pointer`: 默认链接/导航等鼠标悬浮样式

- `.nec-content`: 内容区默认容器，按照UI规范，最大宽度1280px

- `.left-nav`: 左侧导航条相关样式

- `.right-content`: 右侧内容区容器，设置最大宽度为1024px

- `.no-data-container`: 无数据默认容器，配合无数据默认图片使用

- `overflow-ellipsis`: 默认单行文字溢出变为省略号样式

## _component/组件部分全局样式

这个文件主要是一些公共组件的样式，只有全局设置才能生效，所以统一放到了这个文件中

目前有`loading`, `alert`, `toast`几个组件的样式，一般无需改动


## _element/部分元素默认样式

这个文件主要针对一些特定元素(`input`, `p`等)，设置了一些默认的样式，
主要的改动如下：

- `a`: 设置了默认字体颜色和`hover`变色，删除`focus`, `active`, `visited`状态下的下划线

- `body`: 设置默认字体，默认背景色

- `img`: 设置`max-width: 100%`，避免溢出父元素边框

- `input`: 设置圆角、阴影、`focus`状态等，以符合UI规范中的输入框

- `ol/ul`: 设置默认`margin`和`padding`均为0

- `p`: 设置默认的`margin`和`padding`均为0

- `textarea`: 设置圆角、字体等，以符合UI规范