Skip to content

Instantly share code, notes, and snippets.

@margauxmcmillin

margauxmcmillin/gist:2512993

Created April 27, 2012 20:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save margauxmcmillin/2512993 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save margauxmcmillin/2512993 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. margauxmcmillin created this gist Apr 27, 2012.
    205 changes: 205 additions & 0 deletions gistfile1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,205 @@
    // Variables.less
    // Variables to customize the look and feel of Bootstrap
    // -----------------------------------------------------



    // GLOBAL VALUES
    // --------------------------------------------------


    // Grays
    // -------------------------
    @black: #000;
    @grayDarker: #222;
    @grayDark: #333;
    @gray: #555;
    @grayLight: #999;
    @grayLighter: #eee;
    @white: #fff;


    // Accent colors
    // -------------------------
    @blue: #049cdb;
    @blueDark: #0064cd;
    @green: #46a546;
    @red: #9d261d;
    @yellow: #ffc40d;
    @orange: #f89406;
    @pink: #c3325f;
    @purple: #7a43b6;


    // Scaffolding
    // -------------------------
    @bodyBackground: @white;
    @textColor: @grayDark;


    // Links
    // -------------------------
    @linkColor: #08c;
    @linkColorHover: darken(@linkColor, 15%);


    // Typography
    // -------------------------
    @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
    @serifFontFamily: Georgia, "Times New Roman", Times, serif;
    @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;

    @baseFontSize: 13px;
    @baseFontFamily: @sansFontFamily;
    @baseLineHeight: 18px;
    @altFontFamily: @serifFontFamily;

    @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
    @headingsFontWeight: bold; // instead of browser default, bold
    @headingsColor: inherit; // empty to use BS default, @textColor


    // Tables
    // -------------------------
    @tableBackground: transparent; // overall background-color
    @tableBackgroundAccent: #f9f9f9; // for striping
    @tableBackgroundHover: #f5f5f5; // for hover
    @tableBorder: #ddd; // table and cell border


    // Buttons
    // -------------------------
    @btnBackground: @white;
    @btnBackgroundHighlight: darken(@white, 10%);
    @btnBorder: #ccc;

    @btnPrimaryBackground: @linkColor;
    @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);

    @btnInfoBackground: #5bc0de;
    @btnInfoBackgroundHighlight: #2f96b4;

    @btnSuccessBackground: #62c462;
    @btnSuccessBackgroundHighlight: #51a351;

    @btnWarningBackground: lighten(@orange, 15%);
    @btnWarningBackgroundHighlight: @orange;

    @btnDangerBackground: #ee5f5b;
    @btnDangerBackgroundHighlight: #bd362f;

    @btnInverseBackground: @gray;
    @btnInverseBackgroundHighlight: @grayDarker;


    // Forms
    // -------------------------
    @inputBackground: @white;
    @inputBorder: #ccc;
    @inputBorderRadius: 3px;
    @inputDisabledBackground: @grayLighter;
    @formActionsBackground: #f5f5f5;

    // Dropdowns
    // -------------------------
    @dropdownBackground: @white;
    @dropdownBorder: rgba(0,0,0,.2);
    @dropdownLinkColor: @grayDark;
    @dropdownLinkColorHover: @white;
    @dropdownLinkBackgroundHover: @linkColor;




    // 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 :)
    @zindexDropdown: 1000;
    @zindexPopover: 1010;
    @zindexTooltip: 1020;
    @zindexFixedNavbar: 1030;
    @zindexModalBackdrop: 1040;
    @zindexModal: 1050;


    // Sprite icons path
    // -------------------------
    @iconSpritePath: "twitter/bootstrap/glyphicons-halflings.png";
    @iconWhiteSpritePath: "twitter/bootstrap/glyphicons-halflings-white.png";


    // Input placeholder text color
    // -------------------------
    @placeholderText: @grayLight;


    // Hr border color
    // -------------------------
    @hrBorder: @grayLighter;


    // Navbar
    // -------------------------
    @navbarHeight: 40px;
    @navbarBackground: @grayDarker;
    @navbarBackgroundHighlight: @grayDark;

    @navbarText: @grayLight;
    @navbarLinkColor: @grayLight;
    @navbarLinkColorHover: @white;
    @navbarLinkColorActive: @navbarLinkColorHover;
    @navbarLinkBackgroundHover: transparent;
    @navbarLinkBackgroundActive: @navbarBackground;

    @navbarSearchBackground: lighten(@navbarBackground, 25%);
    @navbarSearchBackgroundFocus: @white;
    @navbarSearchBorder: darken(@navbarSearchBackground, 30%);
    @navbarSearchPlaceholderColor: #ccc;
    @navbarBrandColor: @navbarLinkColor;


    // Hero unit
    // -------------------------
    @heroUnitBackground: @grayLighter;
    @heroUnitHeadingColor: inherit;
    @heroUnitLeadColor: inherit;


    // Form states and alerts
    // -------------------------
    @warningText: #c09853;
    @warningBackground: #fcf8e3;
    @warningBorder: darken(spin(@warningBackground, -10), 3%);

    @errorText: #b94a48;
    @errorBackground: #f2dede;
    @errorBorder: darken(spin(@errorBackground, -10), 3%);

    @successText: #468847;
    @successBackground: #dff0d8;
    @successBorder: darken(spin(@successBackground, -10), 5%);

    @infoText: #3a87ad;
    @infoBackground: #d9edf7;
    @infoBorder: darken(spin(@infoBackground, -10), 7%);



    // GRID
    // --------------------------------------------------

    // Default 940px grid
    // -------------------------
    @gridColumns: 12;
    @gridColumnWidth: 60px;
    @gridGutterWidth: 20px;
    @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

    // Fluid grid
    // -------------------------
    @fluidGridColumnWidth: 6.382978723%;
    @fluidGridGutterWidth: 2.127659574%;