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

   1 // Flatness by Jenil (www.jgog.in)
   2 // Bootswatch 2.3.2
   3 // --------------------------------------------------
   4
   5
   6 // Global values
   7 // --------------------------------------------------
   8
   9 // Grays
  10 // -------------------------
  11 @black:                 #000;
  12 @grayDarker:            #222;
  13 @grayDark:              #7b8a8b;
  14 @gray:                  #95A5A6;
  15 @grayLight:             #b4bcc2;
  16 @grayLighter:           #ECF0F1;
  17 @white:                 #fff;
  18
  19
  20 // Accent colors
  21 // -------------------------
  22 @blue:                  #3498DB;
  23 @blueDark:              #2C3E50;
  24 @green:                 #18BC9C;
  25 @red:                   #E74C3C;
  26 @yellow:                #e6bb0d;
  27 @orange:                #F39C12;
  28 @pink:                  #ff6699;
  29 @purple:                #8E44AD;
  30
  31
  32 // Scaffolding
  33 // -------------------------
  34 @bodyBackground:        @white;
  35 @textColor:             @blueDark;
  36
  37
  38 // Links
  39 // -------------------------
  40 @linkColor:             #1ABC9C;
  41 @linkColorHover:        lighten(@linkColor, 5%);
  42
  43
  44 // Typography
  45 // -------------------------
  46 @sansFontFamily:        "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  47 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
  48 @monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
  49
  50 @baseFontSize:          15px;
  51 @baseFontFamily:        @sansFontFamily;
  52 @baseLineHeight:        21px;
  53 @altFontFamily:         @serifFontFamily;
  54
  55 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
  56 @headingsFontWeight:    bold;    // instead of browser default, bold
  57 @headingsColor:         inherit; // empty to use BS default, @textColor
  58
  59
  60 // Component sizing
  61 // -------------------------
  62 // Based on 14px font-size and 20px line-height
  63
  64 @fontSizeLarge:         @baseFontSize * 1.25; // ~18px
  65 @fontSizeSmall:         @baseFontSize * 0.85; // ~12px
  66 @fontSizeMini:          @baseFontSize * 0.75; // ~11px
  67
  68 @paddingLarge:          18px 36px; // 44px
  69 @paddingSmall:          2px 12px;  // 26px
  70 @paddingMini:           1px 8px;   // 24px
  71
  72 @baseBorderRadius:      6px;
  73 @borderRadiusLarge:     10px;
  74 @borderRadiusSmall:     3px;
  75
  76
  77 // Tables
  78 // -------------------------
  79 @tableBackground:                   transparent; // overall background-color
  80 @tableBackgroundAccent:             #f9f9f9; // for striping
  81 @tableBackgroundHover:              #f5f5f5; // for hover
  82 @tableBorder:                       #ddd; // table and cell border
  83
  84 // Buttons
  85 // -------------------------
  86 @btnBackground:                     @grayLight;
  87 @btnBackgroundHighlight:            lighten(@btnBackground, 10%);
  88 @btnBorder:                         #ddd;
  89
  90 @btnPrimaryBackground:              @textColor;
  91 @btnPrimaryBackgroundHighlight:     lighten(@btnPrimaryBackground, 10%);
  92
  93 @btnInfoBackground:                 @blue;
  94 @btnInfoBackgroundHighlight:        lighten(@btnInfoBackground, 10%);
  95
  96 @btnSuccessBackground:              @green;
  97 @btnSuccessBackgroundHighlight:     lighten(@btnSuccessBackground, 10%);
  98
  99 @btnWarningBackground:              @orange;
 100 @btnWarningBackgroundHighlight:     lighten(@btnWarningBackground, 10%);
 101
 102 @btnDangerBackground:               @red;
 103 @btnDangerBackgroundHighlight:      lighten(@btnDangerBackground, 10%);
 104
 105 @btnInverseBackground:              @grayDarker;
 106 @btnInverseBackgroundHighlight:     lighten(@btnInverseBackground, 10%);
 107
 108
 109 // Forms
 110 // -------------------------
 111 @inputBackground:               @white;
 112 @inputBorder:                   #dce4ec;
 113 @inputBorderRadius:             @baseBorderRadius;
 114 @inputDisabledBackground:       #eaeded;
 115 @formActionsBackground:         #f5f5f5;
 116 @inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 117
 118
 119 // Dropdowns
 120 // -------------------------
 121 @dropdownBackground:            @blueDark;
 122 @dropdownBorder:                rgba(0,0,0,0);
 123 @dropdownDividerTop:            rgba(0,0,0,0.2);
 124 @dropdownDividerBottom:         rgba(0,0,0,0.2);
 125
 126 @dropdownLinkColor:             @white;
 127 @dropdownLinkColorHover:        @white;
 128 @dropdownLinkColorActive:       @dropdownLinkColor;
 129
 130 @dropdownLinkBackgroundActive:  @green;
 131 @dropdownLinkBackgroundHover:   @green;
 132
 133
 134
 135 // COMPONENT VARIABLES
 136 // --------------------------------------------------
 137
 138
 139 // Z-index master list
 140 // -------------------------
 141 // Used for a bird's eye view of components dependent on the z-axis
 142 // Try to avoid customizing these :)
 143 @zindexDropdown:          1000;
 144 @zindexPopover:           1010;
 145 @zindexTooltip:           1030;
 146 @zindexFixedNavbar:       1030;
 147 @zindexModalBackdrop:     1040;
 148 @zindexModal:             1050;
 149
 150
 151 // Sprite icons path
 152 // -------------------------
 153 @iconSpritePath:          "../img/glyphicons-halflings.png";
 154 @iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
 155
 156
 157 // Input placeholder text color
 158 // -------------------------
 159 @placeholderText:         @grayLight;
 160
 161
 162 // Hr border color
 163 // -------------------------
 164 @hrBorder:                @grayLighter;
 165
 166
 167 // Horizontal forms & lists
 168 // -------------------------
 169 @horizontalComponentOffset:       180px;
 170
 171
 172 // Wells
 173 // -------------------------
 174 @wellBackground:                  @grayLighter;
 175
 176
 177 // Navbar
 178 // -------------------------
 179 @navbarCollapseWidth:             979px;
 180 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 181
 182 @navbarHeight:                    50px;
 183 @navbarBackgroundHighlight:       @textColor;
 184 @navbarBackground:                @textColor;
 185 @navbarBorder:                    darken(@navbarBackground, 5%);
 186
 187 @navbarText:                      @white;
 188 @navbarLinkColor:                 @white;
 189 @navbarLinkColorHover:            @linkColor;
 190 @navbarLinkColorActive:           @linkColor;
 191 @navbarLinkBackgroundHover:       transparent;
 192 @navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
 193
 194 @navbarBrandColor:                @navbarLinkColor;
 195
 196 // Inverted navbar
 197 @navbarInverseBackground:                @green;
 198 @navbarInverseBackgroundHighlight:       @green;
 199 @navbarInverseBorder:                    darken(@green, 5%);
 200
 201 @navbarInverseText:                      @white;
 202 @navbarInverseLinkColor:                 @white;
 203 @navbarInverseLinkColorHover:            @blueDark;
 204 @navbarInverseLinkColorActive:           @blueDark;
 205 @navbarInverseLinkBackgroundHover:       transparent;
 206 @navbarInverseLinkBackgroundActive:      darken(@navbarInverseBackground, 5%);
 207
 208 @navbarInverseSearchBackground:          @white;
 209 @navbarInverseSearchBackgroundFocus:     @white;
 210 @navbarInverseSearchBorder:              @grayLight;
 211 @navbarInverseSearchPlaceholderColor:    @gray;
 212
 213 @navbarInverseBrandColor:                @navbarInverseLinkColor;
 214
 215
 216 // Pagination
 217 // -------------------------
 218 @paginationBackground:                #fff;
 219 @paginationBorder:                    #ddd;
 220 @paginationActiveBackground:          @grayLighter;
 221
 222
 223 // Hero unit
 224 // -------------------------
 225 @heroUnitBackground:              @grayLighter;
 226 @heroUnitHeadingColor:            inherit;
 227 @heroUnitLeadColor:               inherit;
 228
 229
 230 // Form states and alerts
 231 // -------------------------
 232 @warningText:             @yellow;
 233 @warningBackground:       desaturate(lighten(@yellow,45%),30%);
 234 @warningBorder:           transparent;
 235
 236 @errorText:               @red;
 237 @errorBackground:         desaturate(lighten(@red,45%),30%);
 238 @errorBorder:             transparent;
 239
 240 @successText:             @green;
 241 @successBackground:       desaturate(lighten(@green,45%),30%);
 242 @successBorder:           transparent;
 243
 244 @infoText:                @blue;
 245 @infoBackground:          desaturate(lighten(@blue,43%),30%);
 246 @infoBorder:              transparent;
 247
 248
 249 // Tooltips and popovers
 250 // -------------------------
 251 @tooltipColor:            #fff;
 252 @tooltipBackground:       @blueDark;
 253 @tooltipArrowWidth:       5px;
 254 @tooltipArrowColor:       @tooltipBackground;
 255
 256 @popoverBackground:       @blueDark;
 257 @popoverArrowWidth:       10px;
 258 @popoverArrowColor:       @blueDark;
 259 @popoverTitleBackground:  @blueDark;
 260
 261 // Special enhancement for popovers
 262 @popoverArrowOuterWidth:  @popoverArrowWidth + 1;
 263 @popoverArrowOuterColor:  rgba(0,0,0,.25);
 264
 265
 266
 267 // GRID
 268 // --------------------------------------------------
 269
 270
 271 // Default 940px grid
 272 // -------------------------
 273 @gridColumns:             12;
 274 @gridColumnWidth:         60px;
 275 @gridGutterWidth:         20px;
 276 @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 277
 278 // 1200px min
 279 @gridColumnWidth1200:     70px;
 280 @gridGutterWidth1200:     30px;
 281 @gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
 282
 283 // 768px-979px
 284 @gridColumnWidth768:      42px;
 285 @gridGutterWidth768:      20px;
 286 @gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
 287
 288
 289 // Fluid grid
 290 // -------------------------
 291 @fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
 292 @fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
 293
 294 // 1200px min
 295 @fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
 296 @fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
 297
 298 // 768px-979px
 299 @fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
 300 @fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);