// Variables.less // Variables to customize the look and feel // ----------------------------------------------------- // GLOBAL VALUES // -------------------------------------------------- //== Colors // // Grays // ------------------------- @black: #000; @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @gray-light: lighten(#000, 60%); // #999 @gray-lighter: lighten(#000, 93.5%); // #eee // Accent colors // ------------------------- @white: #fff; @red: #cc0000; @purple: #4c3756; @golden: #996633; @pink: #ff428a; // Scaffolding // ------------------------- //** Background color for ``. @body-bg: @white; //** Global text color on ``. @text-color: @gray-dark; //** Global textual link color. @link-color: @black; //** Link hover color set via `darken()` function. @link-hover-color: lighten(@link-color, 15%); // Typography // ------------------------- // @font-family-sans-serif: "Hiragino Sans GB","Microsoft YaHei", "SimSun", Arial, sans-serif; @font-family-serif: "SimSun", Arial, serif; @font-family-base: @font-family-sans-serif; @font-size-base: 14px; @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px //** Unit-less `line-height` for use in components like buttons. @line-height-base: 1.428571429; // 20/14 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px // COMPONENT VARIABLES // -------------------------------------------------- // Z-index master list // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) @zindex-navbar: 1000; @zindex-dropdown: 1000; @zindex-popover: 1010; @zindex-tooltip: 1030; @zindex-navbar-fixed: 1030; @zindex-modal-background: 1040; @zindex-modal: 1050; // Input placeholder text color // ------------------------- @input-color-placeholder: @gray-light; //== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 480px; @screen-xs-min: @screen-xs; @screen-phone: @screen-xs-min; // Small screen / tablet // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 @screen-sm: 768px; @screen-sm-min: @screen-sm; @screen-tablet: @screen-sm-min; // Medium screen / desktop // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 @screen-md: 992px; @screen-md-min: @screen-md; @screen-desktop: @screen-md-min; // Large screen / wide desktop // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 @screen-lg: 1200px; @screen-lg-min: @screen-lg; @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum @screen-xs-max: (@screen-sm-min - 1); @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 20px; // Navbar collapse //** Point at which the navbar becomes uncollapsed. @grid-float-breakpoint: @screen-sm-min; //** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); //== Container sizes // //## Define the maximum width of `.container` for different screen sizes. // Small screen / tablet @container-tablet: ((720px + @grid-gutter-width)); //** For `@screen-sm-min` and up. @container-sm: @container-tablet; // Medium screen / desktop @container-desktop: ((940px + @grid-gutter-width)); //** For `@screen-md-min` and up. @container-md: @container-desktop; // Large screen / wide desktop @container-large-desktop: ((1180px + @grid-gutter-width)); //** For `@screen-lg-min` and up. @container-lg: @container-large-desktop;