mirror of
https://github.com/ExactTarget/fuelux.git
synced 2026-01-10 15:08:02 -05:00
392 lines
12 KiB
Plaintext
392 lines
12 KiB
Plaintext
//
|
|
// Variables
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Global values
|
|
// --------------------------------------------------
|
|
|
|
@true-black: #000;
|
|
@true-white: #FFF;
|
|
|
|
// Grays
|
|
// -------------------------
|
|
@gray07: lighten(@true-black, 7%); // #111
|
|
@gray13: lighten(@true-black, 13.5%); // #222
|
|
@gray15: lighten(@true-black, 15%); // #252525
|
|
@gray20: lighten(@true-black, 20%); // #333
|
|
@gray27: lighten(@true-black, 27%); // #444
|
|
@gray33: lighten(@true-black, 33.5%); // #555
|
|
@gray40: lighten(@true-black, 40%); // #666
|
|
@gray46: lighten(@true-black, 46%); // #757575
|
|
//@gray47: lighten(@true-black, 46.7%); // #777
|
|
@gray53: lighten(@true-black, 53%); // #888
|
|
@gray60: lighten(@true-black, 60%); // #999
|
|
@gray67: lighten(@true-black, 66.5%); // #AAA
|
|
@gray74: lighten(@true-black, 73.5%); // #BBB
|
|
//@gray75: lighten(@true-black, 75%); // #4b4b4b
|
|
@gray80: lighten(@true-black, 80%); // #CCC
|
|
@gray87: lighten(@true-black, 86.5%); // #DDD
|
|
@gray90: lighten(@true-black, 90%); // #E5E5E5
|
|
@gray93: lighten(@true-black, 93.5%); // #EEE
|
|
@gray96: lighten(@true-black, 96%); // #F5F5F5
|
|
@gray98: lighten(@true-black, 98%); // #f9f9f9
|
|
@gray99: lighten(@true-black, 99%); // #FCFCFC
|
|
|
|
@black: @true-black;
|
|
@gray-darker: @gray13;
|
|
@gray-dark: @gray20;
|
|
@gray: @gray33;
|
|
@gray-light: @gray60;
|
|
@gray-lighter: @gray93;
|
|
@white: @true-white;
|
|
|
|
|
|
// Accent colors
|
|
// -------------------------
|
|
@blue: #049cdb;
|
|
@blue-dark: #0064cd;
|
|
@green: #46a546;
|
|
@red: #9d261d;
|
|
@yellow: #ffc40d;
|
|
@orange: #f89406;
|
|
@pink: #c3325f;
|
|
@purple: #7a43b6;
|
|
|
|
// Text Colors
|
|
// -------------------------
|
|
@text-primary: #428bca;
|
|
@text-success: #3c763d;
|
|
@text-info: #31708f;
|
|
@text-warning: #8a6d3b;
|
|
@text-danger: #a94442;
|
|
@text-dimmed: @gray40;
|
|
@text-muted: @gray60;
|
|
|
|
// Scaffolding
|
|
// -------------------------
|
|
@body-background: @white;
|
|
@text-color: @gray-dark;
|
|
@focus-color: #5B9DD9;
|
|
|
|
// Links
|
|
// -------------------------
|
|
@link-color: #0088cc;
|
|
@link-color-hover: darken(@link-color, 15%);
|
|
|
|
|
|
// Typography
|
|
// -------------------------
|
|
@sans-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
@serif-font-family: Georgia, "Times New Roman", Times, serif;
|
|
@mono-font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
|
|
|
@base-font-size: 14px;
|
|
@base-font-family: @sans-font-family;
|
|
@base-line-height: 20px;
|
|
@alt-font-family: @serif-font-family;
|
|
|
|
@headings-font-family: inherit; // empty to use BS default, @base-font-family
|
|
@headings-font-weight: bold; // instead of browser default, bold
|
|
@headings-color: inherit; // empty to use BS default, @text-color
|
|
|
|
|
|
// Component sizing
|
|
// -------------------------
|
|
// Based on 14px font-size and 20px line-height
|
|
|
|
@font-size-large: @base-font-size * 1.25; // ~18px
|
|
@font-size-small: @base-font-size * 0.85; // ~12px
|
|
@font-size-mini: @base-font-size * 0.75; // ~11px
|
|
|
|
@font-size-h1: floor((@base-font-size * 2.6)); // ~36px
|
|
@font-size-h2: floor((@base-font-size * 2.15)); // ~30px
|
|
@font-size-h3: ceil((@base-font-size * 1.7)); // ~24px
|
|
@font-size-h4: ceil((@base-font-size * 1.25)); // ~18px
|
|
@font-size-h5: @base-font-size;
|
|
@font-size-h6: ceil((@base-font-size * 0.85)); // ~12pxgr
|
|
|
|
@padding-large: 11px 19px; // 44px
|
|
@padding-small: 2px 10px; // 26px
|
|
@padding-mini: 0 6px; // 22px
|
|
|
|
@base-border-radius: 4px;
|
|
@border-radius-large: 6px;
|
|
@border-radius-small: 3px;
|
|
|
|
|
|
// Tables
|
|
// -------------------------
|
|
@table-background: transparent; // overall background-color
|
|
@table-background-accent: @gray98; // for striping
|
|
@table-background-hover: @gray96; // for hover
|
|
@table-border: @gray87; // table and cell border
|
|
|
|
// Buttons
|
|
// -------------------------
|
|
@btn-background: @white;
|
|
@btn-background-highlight: darken(@white, 10%);
|
|
@btn-border: @gray80;
|
|
|
|
@btn-primary-background: @link-color;
|
|
@btn-primary-background-highlight: spin(@btn-primary-background, 20%);
|
|
|
|
@btn-info-background: #5bc0de;
|
|
@btn-info-background-highlight: #2f96b4;
|
|
|
|
@btn-success-background: #62c462;
|
|
@btn-success-background-highlight: #51a351;
|
|
|
|
@btn-warning-background: lighten(@orange, 15%);
|
|
@btn-warning-background-highlight: @orange;
|
|
|
|
@btn-danger-background: #ee5f5b;
|
|
@btn-danger-background-highlight: #bd362f;
|
|
|
|
@btn-inverse-background: @gray27;
|
|
@btn-inverse-background-highlight: @gray-darker;
|
|
|
|
@btn-padding-vertical: 6px;
|
|
@btn-padding-horizontal: 12px;
|
|
|
|
|
|
// Forms
|
|
// -------------------------
|
|
@input-background: @white;
|
|
@input-border: @gray80;
|
|
@input-border-radius: @base-border-radius;
|
|
@input-disabled-background: @gray93;
|
|
@form-actions-background: @gray96;
|
|
@input-height: @base-line-height + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
|
|
|
|
|
// Dropdowns
|
|
// -------------------------
|
|
@dropdown-background: @white;
|
|
@dropdown-border: rgba(0,0,0,.2);
|
|
@dropdown-divider-top: @gray90;
|
|
@dropdown-divider-bottom: @white;
|
|
|
|
@dropdown-link-color: @gray-dark;
|
|
@dropdown-link-color-hover: @white;
|
|
@dropdown-link-color-active: @white;
|
|
|
|
@dropdown-link-background-active: @link-color;
|
|
@dropdown-link-background-hover: @dropdown-link-background-active;
|
|
|
|
|
|
|
|
// 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-dropdown: 1000;
|
|
@zindex-popover: 1010;
|
|
@zindex-tooltip: 1030;
|
|
@zindex-fixed-navbar: 1030;
|
|
@zindex-modal-backdrop: 1040;
|
|
@zindex-modal: 1050;
|
|
|
|
//Selectable Hover, Selected, Selected Hover
|
|
// -------------------------
|
|
@selectable-hover: @gray96;
|
|
@selected: @gray93;
|
|
@selected-hover: @gray87;
|
|
|
|
|
|
|
|
// Sprite icons path
|
|
// -------------------------
|
|
@icon-sprite-path: "../img/glyphicons-halflings.png";
|
|
@icon-white-sprite-path: "../img/glyphicons-halflings-white.png";
|
|
|
|
|
|
// Input placeholder text color
|
|
// -------------------------
|
|
@placeholder-text: @gray60;
|
|
|
|
|
|
// Hr border color
|
|
// -------------------------
|
|
@hr-border: @gray93;
|
|
|
|
|
|
// Horizontal forms & lists
|
|
// -------------------------
|
|
@horizontal-component-offset: 180px;
|
|
|
|
|
|
// Wells
|
|
// -------------------------
|
|
@well-background: @gray96;
|
|
|
|
|
|
// Navbar
|
|
// -------------------------
|
|
@navbar-collapse-width: 979px;
|
|
@navbar-collapse-desktop-width: @navbar-collapse-width + 1;
|
|
|
|
@navbar-height: 40px;
|
|
@navbar-background-highlight: @true-white;
|
|
@navbar-background: darken(@navbar-background-highlight, 5%);
|
|
@navbar-border: darken(@navbar-background, 12%);
|
|
|
|
@navbar-text: @gray40;;
|
|
@navbar-link-color: @gray40;;
|
|
@navbar-link-color-hover: @gray-dark;
|
|
@navbar-link-color-active: @gray;
|
|
@navbar-link-background-hover: transparent;
|
|
@navbar-link-background-active: darken(@navbar-background, 5%);
|
|
|
|
@navbar-brand-color: @navbar-link-color;
|
|
|
|
// Inverted navbar
|
|
@navbar-inverse-background: @gray07;
|
|
@navbar-inverse-background-highlight: @gray13;
|
|
@navbar-inverse-border: @gray15;
|
|
|
|
@navbar-inverse-text: @gray60;
|
|
@navbar-inverse-link-color: @gray60;
|
|
@navbar-inverse-link-color-hover: @white;
|
|
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
|
|
@navbar-inverse-link-background-hover: transparent;
|
|
@navbar-inverse-link-background-active: @navbar-inverse-background;
|
|
|
|
@navbar-inverse-search-background: lighten(@navbar-inverse-background, 25%);
|
|
@navbar-inverse-search-background-focus: @white;
|
|
@navbar-inverse-search-border: @navbar-inverse-background;
|
|
@navbar-inverse-search-placeholder-color: @gray80;
|
|
|
|
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
|
|
|
|
|
// Pagination
|
|
// -------------------------
|
|
@pagination-background: @true-white;
|
|
@pagination-border: @gray87;
|
|
@pagination-active-background: @gray96;
|
|
|
|
|
|
// Hero unit
|
|
// -------------------------
|
|
@hero-unit-background: @gray93;
|
|
@hero-unit-heading-color: inherit;
|
|
@hero-unit-lead-color: inherit;
|
|
|
|
|
|
// Form states and alerts
|
|
// -------------------------
|
|
@warning-text: #c09853;
|
|
@warning-background: #fcf8e3;
|
|
@warning-border: darken(spin(@warning-background, -10), 3%);
|
|
|
|
@error-text: #b94a48;
|
|
@error-background: #f2dede;
|
|
@error-border: darken(spin(@error-background, -10), 3%);
|
|
|
|
@success-text: #468847;
|
|
@success-background: #dff0d8;
|
|
@success-border: darken(spin(@success-background, -10), 5%);
|
|
|
|
@info-text: #3a87ad;
|
|
@info-background: #d9edf7;
|
|
@info-border: darken(spin(@info-background, -10), 7%);
|
|
|
|
|
|
// Tooltips and popovers
|
|
// -------------------------
|
|
@tooltip-color: @true-white;
|
|
@tooltip-background: @true-black;
|
|
@tooltip-arrow-width: 5px;
|
|
@tooltip-arrow-color: @tooltip-background;
|
|
|
|
@popover-background: @true-white;
|
|
@popover-arrow-width: 10px;
|
|
@popover-arrow-color: @true-white;
|
|
@popover-title-background: darken(@popover-background, 3%);
|
|
|
|
// Special enhancement for popovers
|
|
@popover-arrow-outer-width: @popover-arrow-width + 1;
|
|
@popover-arrow-outer-color: rgba(0,0,0,.25);
|
|
|
|
|
|
|
|
// GRID
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Default 940px grid
|
|
// -------------------------
|
|
@grid-columns: 12;
|
|
@grid-column-width: 60px;
|
|
@grid-gutter-width: 20px;
|
|
@grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
|
|
|
|
// 1200px min
|
|
@grid-column-width1200: 70px;
|
|
@grid-gutter-width1200: 30px;
|
|
@grid-row-width1200: (@grid-columns * @grid-column-width1200) + (@grid-gutter-width1200 * (@grid-columns - 1));
|
|
|
|
// 768px-979px
|
|
@grid-column-width768: 42px;
|
|
@grid-gutter-width768: 20px;
|
|
@grid-row-width768: (@grid-columns * @grid-column-width768) + (@grid-gutter-width768 * (@grid-columns - 1));
|
|
|
|
|
|
// Fluid grid
|
|
// -------------------------
|
|
@fluid-grid-column-width: (percentage(@grid-column-width/@grid-row-width));
|
|
@fluid-grid-gutter-width: (percentage(@grid-gutter-width/@grid-row-width));
|
|
|
|
// 1200px min
|
|
@fluid-grid-column-width1200: (percentage(@grid-column-width1200/@grid-row-width1200));
|
|
@fluid-grid-gutter-width1200: (percentage(@grid-gutter-width1200/@grid-row-width1200));
|
|
|
|
// 768px-979px
|
|
@fluid-grid-column-width768: (percentage(@grid-column-width768/@grid-row-width768));
|
|
@fluid-grid-gutter-width768: (percentage(@grid-gutter-width768/@grid-row-width768));
|
|
|
|
|
|
// Controls
|
|
// --------------------------------------------------
|
|
|
|
// Checkbox
|
|
// -------------------------
|
|
@checkbox-primary-color: #39b3d7;
|
|
|
|
// Datepicker
|
|
// -------------------------
|
|
@datepicker-hover: #0f5f9f;
|
|
@datepicker-hover-alt: #1b75bb;
|
|
|
|
// Tree
|
|
// -------------------------
|
|
@tree-hover-text: @gray60;
|
|
@tree-select-background: @selected;
|
|
|
|
|
|
// Icons
|
|
// -------------------------
|
|
@fuelux-font-path: "../fonts/";
|
|
|
|
|
|
|
|
// --------------------------------------------------
|
|
// Padding / Margin
|
|
// --------------------------------------------------
|
|
@padding-xs: 5px;
|
|
@padding-sm: 10px;
|
|
@padding-md: 15px;
|
|
@padding-lg: 20px;
|
|
|
|
@margin-xs: 5px;
|
|
@margin-sm: 10px;
|
|
@margin-md: 15px;
|
|
@margin-lg: 20px;
|
|
|
|
|