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;