siwi-variables
Version:
siwiui siwi siwi-variables less
180 lines (152 loc) • 7.26 kB
text/less
/**
* @author [siwi]
* @email [siwi@siwi.me]
* @create date 2017-04-28 05:24:08
* @modify date 2017-04-28 05:26:26
* @desc [variables for Siwi UI]
*/
/*--------------------------------------------------------
Base font-size
---------------------------------------------------------*/
@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));
/*--------------------------------------------------------
Layout And Grid
---------------------------------------------------------*/
@grid-columns : 24;
@grid-gutter-width : 0;
@grid-row-prefix : row-;
@grid-column-prefix : col-;
/*--------------------------------------------------------
Media queries breakpoints
---------------------------------------------------------*/
@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);
/*--------------------------------------------------------
Site Colors
---------------------------------------------------------*/
/*--------------------- Colors ------------------------*/
@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 Colors -------------------*/
@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;
/*------------------- Neutrals ---------------------*/
@full-black : #000000;
@off-white : #F9FAFB;
@dark-white : #F3F4F5;
@mid-white : #DCDDDE;
@white : #FFFFFF;
/*--------------- Colored Backgrounds ----------------*/
@red-background : #FFE8E6;
@orange-background : #FFEDDE;
@yellow-background : #FFF8DB;
@olive-background : #FBFDEF;
@green-background : #E5F9E7;
@teal-background : #E1F7F7;
@blue-background : #DFF0FF;
@violet-background : #EAE7FF;
@purple-background : #F6E7FF;
@pink-background : #FFE3FB;
@brown-background : #F1E2D3;
/*--------------------------------------------------------
Border
---------------------------------------------------------*/
@border-radius-base : 6px;
@border-radius-small : 4px;
@border-radius : 1px;
@border-color : rgba(34, 36, 38, 0.15);
@strong-border-color : rgba(34, 36, 38, 0.22);
@internal-border-color : rgba(34, 36, 38, 0.1);
@disabled-border-color : rgba(34, 36, 38, 0.5);
/*--------------------------------------------------------
Button
---------------------------------------------------------*/
@btn-font-weight : normal;
@btn-padding-base : 6px 15px;
@btn-padding-large : 6px 15px 7px 15px;
@btn-padding-small : 2px 7px;
/*--------------------------------------------------------
Input
---------------------------------------------------------*/
@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;
@input-background : @white;
@input-color : @light-black;
@input-border-color : @border-color;
@input-hover-border-color : lighten(@light-blue, 20%);
@input-placeholder-color : @light-grey;
@input-disabled-bg : @mid-white;
/*--------------------------------------------------------
Animate
---------------------------------------------------------*/
@animation-time : .3s;
@transition-time : .2s;
@ease-in-out : ease-in-out;
/*--------------------------------------------------------
Shadow
---------------------------------------------------------*/
@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;
/*--------------------------------------------------------
Z-index
---------------------------------------------------------*/
@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;