siwi-variables
Version:
siwiui siwi siwi-variables less
175 lines (146 loc) • 5.33 kB
Markdown
#siwi-variables
> 主色 辅色 基于 Semantic UI 的配色
# 基本变量
```
@css-prefix : sw-;
@font-size-base : 14px;
@font-size-sm : 12px;
@font-size-lg : 16px;
@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@code-family : Consolas,Menlo,Courier,monospace;
@line-height-base : 1.5;
@line-height-computed : floor((@font-size-base * @line-height-base));
```
# 栅格
```
@grid-columns : 24;
@grid-gutter-width : 0;
@grid-row-prefix : col-;
@grid-column-prefix : row-;
```
# 媒体查询
```
@screen-xs : 480px;
@screen-xs-min : @screen-xs;
@screen-xs-max : (@screen-xs-min - 1);
@screen-sm : 768px;
@screen-sm-min : @screen-sm;
@screen-sm-max : (@screen-sm-min - 1);
@screen-md : 992px;
@screen-md-min : @screen-md;
@screen-dm-max : (@screen-md-min - 1);
@screen-lg : 1200px;
@screen-lg-min : @screen-lg;
@screen-lg-max : (@screen-lg-min - 1);
@screen-2x : 1440px;
@screen-2x-min : @screen-2x;
@screen-2x-max : (@screen-2x-min - 1);
```
# 颜色
> 主色
```
@red : #DB2828;
@orange : #F2711C;
@yellow : #FBBD08;
@olive : #B5CC18;
@green : #21BA45;
@teal : #00B5AD;
@blue : #2185D0;
@violet : #6435C9;
@purple : #A333C8;
@pink : #E03997;
@brown : #A5673F;
@grey : #767676;
@black : #1B1C1D;
```
> 辅色
```
@light-red : #FF695E;
@light-orange : #FF851B;
@light-yellow : #FFE21F;
@light-olive : #D9E778;
@light-green : #2ECC40;
@light-teal : #6DFFFF;
@light-blue : #54C8FF;
@light-violet : #A291FB;
@light-purple : #DC73FF;
@light-pink : #FF8EDF;
@light-brown : #D67C1C;
@light-grey : #DCDDDE;
@light-black : #545454;
```
> 基色
```
@full-black : #000000;
@off-white : #F9FAFB;
@dark-white : #F3F4F5;
@mid-white : #DCDDDE;
@white : #FFFFFF;
```
> 背景色
```
@red-background : #FFE8E6;
@orange-ackground : #FFEDDE;
@yellow-ackground : #FFF8DB;
@olive-ackground : #FBFDEF;
@green-ackground : #E5F9E7;
@teal-ackground : #E1F7F7;
@blue-ackground : #DFF0FF;
@violet-ackground : #EAE7FF;
@purple-ackground : #F6E7FF;
@pink-ackground : #FFE3FB;
@brown-ackground : #F1E2D3;
```
# 边框
> 边框圆角
```
@border-radius-base : 6px;
@border-radius-small : 4px;
@border-radius : 1px;
```
# 按钮
> 按钮填充
```
@btn-font-weight : normal;
@btn-padding-base : 6px 15px;
@btn-padding-large : 6px 15px 7px 15px;
@btn-padding-small : 2px 7px;
```
# 输入框
> 输入框大小
```
@input-height-base : 32px;
@input-height-large : 36px;
@input-height-small : 24px;
@input-padding-horizontal : 7px;
@input-padding-vertical-base : 4px;
@input-padding-vertical-small : 1px;
@input-padding-vertical-large : 6px;
```
# 动画
```
@animation-time : .3s;
@transition-time : .2s;
@ease-in-out : ease-in-out;
```
# 阴影
```
@shadow-color : rgba(0, 0, 0, .2);
@shadow-base : @shadow-down;
@shadow-up : 0 -1px 6px @shadow-color;
@shadow-down : 0 1px 6px @shadow-color;
@shadow-left : -1px 0 6px @shadow-color;
@shadow-right : 1px 0 6px @shadow-color;
```
# 层级
```
@zindex-spin : 8;
@zindex-affix : 10;
@zindex-back-top : 10;
@zindex-select : 900;
@zindex-modal : 1000;
@zindex-message : 1010;
@zindex-notification : 1010;
@zindex-tooltip : 1060;
@zindex-loading-bar : 2000;
```