rc-switch
Version:
switch ui component for react
186 lines (157 loc) • 6.71 kB
text/less
/* ------ Base & Require ------ */
@fc-html-width: 100%;
@fc-html-height: 100%;
@fc-html-backgroud: @white;
@fc-body-width: 100%;
@fc-body-height: 100%;
@fc-body-background: @white;
// Screen
@fc-screen-lg: 1440px;
@fc-screen-md: 960px;
@fc-screen-sm: 768px;
// Layout & Grid
@fc-grid-cols: 12;
// Font
@fc-font-family: "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Arial, sans-serif;
@fc-code-family: "PT Mono", Menlo, "Courier New", monospace;
@fc-icon-url: "http://at.alicdn.com/t/font_1422951923_9487498";
@fc-icon-size-xs: 12px;
@fc-icon-size-sm: 18px;
@fc-icon-size-md: 28px;
@fc-icon-size-lg: 38px;
@fc-icon-size-sl: 48px;
@fc-icon-size-xl: 58px;
@fc-font-color: @dark-100;
@fc-font-size: 14px;
@fc-font-size-h1: 45px;
@fc-line-height-h1: 60px;
@fc-font-size-h2: 36px;
@fc-line-height-h2: 50px;
@fc-font-size-h3: 32px;
@fc-line-height-h3: 50px;
@fc-font-size-h4: 24px;
@fc-line-height-h4: 40px;
@fc-font-size-h5: 20px;
@fc-line-height-h5: 30px;
@fc-font-size-h6: 16px;
@fc-line-height-h6: 25px;
@fc-line-height: 20px;
// Link
@fc-link-color: @blue-400;
// Box
@fc-base-padding: 20px;
@fc-base-margin: 20px;
// Btn
@fc-btn-padding: 18px;
@fc-btn-line-height: 34px;
@fc-btn-padding-xs: 10px;
@fc-btn-line-height-xs: 24px;
@fc-btn-font-size-xs: 12px;
@fc-btn-padding-sm: 14px;
@fc-btn-line-height-sm: 28px;
@fc-btn-font-size-sm: 12px;
@fc-btn-padding-md: @fc-btn-padding;
@fc-btn-line-height-md: @fc-btn-line-height;
@fc-btn-font-size-md: @fc-font-size;
@fc-btn-padding-lg: 24px;
@fc-btn-line-height-lg: 40px;
@fc-btn-font-size-lg: 16px;
@fc-btn-padding-sl: 32px;
@fc-btn-line-height-sl: 48px;
@fc-btn-font-size-sl: 18px;
@fc-btn-rgba: rgba(255, 255, 255, 0.4);
// Shape
@fc-shape-border: 5px;
@fc-shape-border-lg: 6px;
// Z-index
@fc-zindex-0: 0;
@fc-zindex-1: 1;
@fc-zindex-10: 10;
@fc-zindex-20: 20;
@fc-zindex-30: 30;
@fc-zindex-40: 40;
@fc-zindex-50: 50;
@fc-zindex-100: 100;
@fc-zindex-200: 200;
@fc-zindex-300: 300;
@fc-zindex-400: 400;
@fc-zindex-500: 500;
@fc-zindex-1000: 1000;
// Box shadow
@fc-shadow-z1: 0px 2px 5px rgba(0,0,0,0.26);
@fc-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2);
@fc-shadow-z3: 0px 17px 50px rgba(0,0,0,0.19);
@fc-shadow-z4: 0px 16px 28px rgba(0,0,0,0.22);
@fc-shadow-z5: 0px 27px 24px rgba(0,0,0,0.2);
@fc-shadow-inset-z1: inset 0px 2px 5px rgba(0,0,0,0.16);
@fc-shadow-inset-z2: inset 0px 3px 8px rgba(0,0,0,0.2);
@fc-shadow-inset-z3: inset 0px 5px 15px rgba(0,0,0,0.19);
@fc-shadow-inset-z4: inset 0px 8px 25px rgba(0,0,0,0.22);
@fc-shadow-inset-z5: inset 0px 10px 12px rgba(0,0,0,0.2);
// Animation
@fc-duration-300: .3s;
@fc-duration-400: .4s;
@fc-duration-500: .5s;
@fc-duration-600: .6s;
@fc-duration-700: .7s;
@fc-duration-800: .8s;
@fc-duration-900: .9s;
@fc-duration-1000: 1.0s;
@fc-duration-1100: 1.1s;
@fc-duration-1200: 1.2s;
@fc-ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
@fc-ease-in: cubic-bezier(0.55, 0, 0.55, 0.2);
@fc-ease-in-out: cubic-bezier(0.35, 0, 0.25, 1);
// Loading type
@fc-loading-xl: 21px;
@fc-loading-sl: 19px;
@fc-loading-lg: 17px;
@fc-loading-md: 15px;
@fc-loading-sm: 13px;
@fc-loading-xs: 11px;
// Mark Element Defind
@fc-mark-background: @yellow-300;
@fc-mark-color: @grey-400;
// Custom Radio
@fc-radio-size: 16px;
@fc-radio-font-size: 14px;
@fc-radio-line-height: 20px;
// Custom Checkbox
@fc-checkbox-size: 16px;
@fc-checkbox-font-size: 14px;
@fc-checkbox-line-height: 20px;
// TODO: 以下变量是从ng-material中拷贝过来的，需调整。
//--------------start-------------------------
// Easing Curves
@swift-ease-out-duration: 0.4s;
@swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
@swift-ease-out: all @swift-ease-out-duration @swift-ease-out-timing-function;
@swift-ease-in-duration: 0.3s;
@swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
@swift-ease-in: all @swift-ease-in-duration @swift-ease-in-timing-function;
@swift-ease-in-out-duration: 0.5s;
@swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
@swift-ease-in-out: all @swift-ease-in-out-duration @swift-ease-in-out-timing-function;
// Custom Tabs
@fc-tabs-header-height: 36px;
@fc-tabs-paginator-width: 32px;
@fc-tabs-ink-bar-background: #3FC7FA;
//--------------end---------------------------
// Pre Element Defind
@fc-pre-border-color: @grey-200;
@fc-pre-background: @grey-100;
@border-color: @grey-200;
// Fc Layout
@fc-layout-header-height: 40px;
@fc-layout-header-background: @dark-400;
@fc-layout-contain-background: @white;
@fc-layout-footer-height: 30px;
@fc-layout-footer-background: @dark-100;
@fc-layout-nav-width: 200px;
@breadcrumb-padding-vertical: 0;
@breadcrumb-padding-horizontal: 13px;
@breadcrumb-bg: #fff;
@breadcrumb-color: #999;
@breadcrumb-split-color: #d9d9d9;
@breadcrumb-hover-color: #00abea;
@breadcrumb-active-color: #666;