variables.less 19.06 KiB
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
@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
// Brand colors
// -------------------------
@brand-primary:         #428bca;
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
@brand-info:            #5bc0de;
// Scaffolding
// -------------------------
@body-bg:               #fff;
@text-color:            @gray-dark;
// Links
// -------------------------
@link-color:            @brand-primary;
@link-hover-color:      darken(@link-color, 15%);
// Typography
// -------------------------
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@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
@font-size-h1:            floor(@font-size-base * 2.60); // ~36px
@font-size-h2:            floor(@font-size-base * 2.15); // ~30px
@font-size-h3:            ceil(@font-size-base * 1.70); // ~24px
@font-size-h4:            ceil(@font-size-base * 1.25); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil(@font-size-base * 0.85); // ~12px
@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family:    @font-family-base;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;
// Iconography
// -------------------------
@icon-font-path:          "../fonts/";
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
@icon-font-name: "glyphicons-halflings-regular"; // Components // ------------------------- // Based on 14px font-size and 1.428 line-height (~20px to start) @padding-base-vertical: 6px; @padding-base-horizontal: 12px; @padding-large-vertical: 10px; @padding-large-horizontal: 16px; @padding-small-vertical: 5px; @padding-small-horizontal: 10px; @line-height-large: 1.33; @line-height-small: 1.5; @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; @component-active-color: #fff; @component-active-bg: @brand-primary; @caret-width-base: 4px; @caret-width-large: 5px; // Tables // ------------------------- @table-cell-padding: 8px; @table-condensed-cell-padding: 5px; @table-bg: transparent; // overall background-color @table-bg-accent: #f9f9f9; // for striping @table-bg-hover: #f5f5f5; @table-bg-active: @table-bg-hover; @table-border-color: #ddd; // table and cell border // Buttons // ------------------------- @btn-font-weight: normal; @btn-default-color: #333; @btn-default-bg: #fff; @btn-default-border: #ccc; @btn-primary-color: #fff; @btn-primary-bg: @brand-primary; @btn-primary-border: darken(@btn-primary-bg, 5%); @btn-success-color: #fff; @btn-success-bg: @brand-success; @btn-success-border: darken(@btn-success-bg, 5%); @btn-warning-color: #fff; @btn-warning-bg: @brand-warning; @btn-warning-border: darken(@btn-warning-bg, 5%); @btn-danger-color: #fff; @btn-danger-bg: @brand-danger; @btn-danger-border: darken(@btn-danger-bg, 5%); @btn-info-color: #fff; @btn-info-bg: @brand-info;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
@btn-info-border: darken(@btn-info-bg, 5%); @btn-link-disabled-color: @gray-light; // Forms // ------------------------- @input-bg: #fff; @input-bg-disabled: @gray-lighter; @input-color: @gray; @input-border: #ccc; @input-border-radius: @border-radius-base; @input-border-focus: #66afe9; @input-color-placeholder: @gray-light; @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); @input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @legend-color: @gray-dark; @legend-border-color: #e5e5e5; @input-group-addon-bg: @gray-lighter; @input-group-addon-border-color: @input-border; // Dropdowns // ------------------------- @dropdown-bg: #fff; @dropdown-border: rgba(0,0,0,.15); @dropdown-fallback-border: #ccc; @dropdown-divider-bg: #e5e5e5; @dropdown-link-color: @gray-dark; @dropdown-link-hover-color: darken(@gray-dark, 5%); @dropdown-link-hover-bg: #f5f5f5; @dropdown-link-active-color: @component-active-color; @dropdown-link-active-bg: @component-active-bg; @dropdown-link-disabled-color: @gray-light; @dropdown-header-color: @gray-light; @dropdown-caret-color: #000; // 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; // Media queries breakpoints // --------------------------------------------------