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: #FAFAFC;
  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 // Input placeholder text color
  65 @placeholderText:       @grayLight;
  66
  67 // Navbar
  68 @navbarHeight:                    40px;
  69 @navbarBackground:                @baseBackgroundColor;
  70 @navbarBackgroundHighlight:       @navbarBackground;
  71
  72 @navbarText:                      @textColor;
  73 @navbarLinkColor:                 @linkColor;
  74 @navbarLinkColorHover:            @linkColor;
  75
  76 // Form states and alerts
  77 @warningText:             #c09853;
  78 @warningBackground:       #fcf8e3;
  79 @warningBorder:           darken(spin(@warningBackground, -10), 3%);
  80
  81 @errorText:               #b94a48;
  82 @errorBackground:         #f2dede;
  83 @errorBorder:             darken(spin(@errorBackground, -10), 3%);
  84
  85 @successText:             #468847;
  86 @successBackground:       #dff0d8;
  87 @successBorder:           darken(spin(@successBackground, -10), 5%);
  88
  89 @infoText:                #3a87ad;
  90 @infoBackground:          #d9edf7;
  91 @infoBorder:              darken(spin(@infoBackground, -10), 7%);
  92
  93
  94
  95 // GRID
  96 // --------------------------------------------------
  97
  98 // Default 940px grid
  99 @gridColumns:             12;
 100 @gridColumnWidth:         60px;
 101 @gridGutterWidth:         20px;
 102 @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 103
 104 // Fluid grid
 105 @fluidGridColumnWidth:    6.382978723%;
 106 @fluidGridGutterWidth:    2.127659574%;