style

@oneline/style 是oneline的基础样式类库, 用于组装不同组件或者业务代码的基础.

使用

预处理或者js导入方式

import '@oneline/style/dist/index.css';
//or app css
import '@oneline/style/dist/index.app.css';

脚本引入方式

 <link href="http://cdn.jsdelivr.net/npm/@oneline/[email protected]/dist/index.css" rel="stylesheet"/>
 // or app
 <link href="http://cdn.jsdelivr.net/npm/@oneline/[email protected]/dist/index.app.css" rel="stylesheet" />

说明

样式库以 ol 作为class名称的前缀.

大小样式

类名|解释|描述 --|--|-- ol-fs| font-size | 文字大小 ol-w | width | 宽度 ol-h | height | 高度 ol-p | padding | 内间距 ol-m | margin | 外间距 ol-lh | line-height | 行高

布局样式

类名 | 解释 | 描述 --|--|-- ol-layout-h | 水平布局 | 水平方式布局 ol-layout-v | 垂直布局 | 垂直方式布局 ol-layout-g | 格子布局 | 格子方式布局 ol-ps-ab | 绝对定位 | 相对body定位 ol-ps-rt | 相对定位 | 相对父元素定位 ol-ps-fx | fixed定位 | 相对于可视窗口定位

外部样式

类名 | 解释 | 描述 --|--|-- ol-c | color | 文字颜色 ol-bg-c | background-color | 背景颜色 ol-b | border | 边框 ol-br | border-radius | 边框圆角 ol-block | display: block | 块元素 ol-inline | display: inline-block | 行内元素 ol-hover | ::hover && ::active | 鼠标悬停样式 ol-line | 伪类:after 高度为1px | 为某个box增加一个底部线