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

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