git.roojs.org Git - bootswatch/blob - readable/variables.less

   1 // Variables.less
   2 // Variables to customize the look and feel of Bootstrap
   3 // -----------------------------------------------------
   4
   5
   6
   7 // GLOBAL VALUES
   8 // --------------------------------------------------
   9
  10 // Links
  11 @linkColor:             @red;
  12 @linkColorHover:        lighten(@linkColor, 8%);
  13
  14 // Grays
  15 @black:                 #000;
  16 @grayDarker:            #222;
  17 @grayDark:              #333;
  18 @gray:                  #777;
  19 @grayLight:             #999;
  20 @grayLighter:           #CDCDCD;
  21 @white:                 #fff;
  22
  23 // Accent colors
  24 @blue:                  #049cdb;
  25 @blueDark:              #0064cd;
  26 @green:                 #46a546;
  27 @red:                   #9C0001;
  28 @yellow:                #ffc40d;
  29 @orange:                #f89406;
  30 @pink:                  #c3325f;
  31 @purple:                #7a43b6;
  32
  33 // Typography
  34 @baseFontSize:          19px;
  35 @baseFontFamily:        Georgia, "Times New Roman", serif;
  36 @baseLineHeight:        1.6em;
  37 @textColor:             #090000;
  38
  39 // Buttons
  40 @primaryButtonBackground:    @linkColor;
  41
  42
  43
  44 // COMPONENT VARIABLES
  45 // --------------------------------------------------
  46
  47 // Z-index master list
  48 // Used for a bird's eye view of components dependent on the z-axis
  49 // Try to avoid customizing these :)
  50 @zindexDropdown:          1000;
  51 @zindexPopover:           1010;
  52 @zindexTooltip:           1020;
  53 @zindexFixedNavbar:       1030;
  54 @zindexModalBackdrop:     1040;
  55 @zindexModal:             1050;
  56
  57 // Sprite icons path
  58 @iconSpritePath:          "../img/glyphicons-halflings.png";
  59 @iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
  60
  61 // Input placeholder text color
  62 @placeholderText:         @gray;
  63
  64 // Hr border color
  65 @hrBorder:                @grayLighter;
  66
  67 // Navbar
  68 @navbarHeight:                    40px;
  69 @navbarBackground:                @bodyBackgroundColor;
  70 @navbarBackgroundHighlight:       @bodyBackgroundColor;
  71 @navbarLinkBackgroundHover:       @bodyBackgroundColor;
  72
  73 @navbarText:                      @textColor;
  74 @navbarLinkColor:                 @linkColor;
  75 @navbarLinkColorHover:            @linkColorHover;
  76
  77 // Form states and alerts
  78 @warningText:             #c09853;
  79 @warningBackground:       #fcf8e3;
  80 @warningBorder:           darken(spin(@warningBackground, -10), 3%);
  81
  82 @errorText:               #b94a48;
  83 @errorBackground:         #f2dede;
  84 @errorBorder:             darken(spin(@errorBackground, -10), 3%);
  85
  86 @successText:             #468847;
  87 @successBackground:       #dff0d8;
  88 @successBorder:           darken(spin(@successBackground, -10), 5%);
  89
  90 @infoText:                #3a87ad;
  91 @infoBackground:          #d9edf7;
  92 @infoBorder:              darken(spin(@infoBackground, -10), 7%);
  93
  94
  95
  96 // GRID
  97 // --------------------------------------------------
  98
  99 // Default 940px grid
 100 @gridColumns:             12;
 101 @gridColumnWidth:         60px;
 102 @gridGutterWidth:         20px;
 103 @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 104
 105 // Fluid grid
 106 @fluidGridColumnWidth:    6.382978723%;
 107 @fluidGridGutterWidth:    2.127659574%;