Variables/Settings

To customize your project you can overwrite the default settings in your style.less

Colors

Variable Default Value Note
@mainColor
#d00f1c		 The corporate color - defining most of the looks.
@complementColor
#333		 A color used to sit next to the maincolor.
@textColor
#222
@invTextColor
#f4f4f4
@backgroundColor
#fafafa
@successColor
#4cad42
@warnColor
#f5b639
@failColor
#f44336
@hintColor
#1da7e0

Default Shadow

Variable Default Value Note
@defaultShadow 1px 2px 3px rgba(0,0,0,0.3)

Fonts

Variable Default Value Note
@bodyFonts 'Source Sans Pro', 'Open Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' Default font stack
@headFonts 'Source Sans Pro', 'Open Sans', sans-serif Fonts for headlines, blockquotes and the like
@monoFonts 'Source Code Pro', Courier, monospace Fonts for code pieces.

Page & Media Queries

Variable Default Value Note
@pageWidth 1300px max-width of the centered container
@breakSmall 900px smart phones
@breakMedium 1100px tablets
@breakLarge 1400px screens
@break2x 228dpi high-density displays
@breakPrint print make it printable

Buttons

Variable Default Value Note
@btn-backgroundColor
#e7e5e5
@btn-primaryBgColor @successColor
@btn-dangerBgColor @failColor
@btn-editBgColor @hintColor
@btn-shadow 0 1px 1px rgba(0,0,0,0.4)
@btn-hoverShadow 0 3px 3px rgba(0,0,0,0.4)

Form / Inputs

Variable Default Value Note
@input-validColor @successColor
@input-dangerColor @failColor
@input-hintColor @hintColor
@input-requiredColor @mainColor
@input-color
#ffffff
@input-shadow 0px 1px 1px rgba(0,0,0,0.4)
@input-hoverShadow 0 3px 3px rgba(0,0,0,0.4)

Other

Variable Default Value Note
@menuBackgroundColor #f4f4f4
@progressBackground lighten(@complementColor,60%)
@table-rowBackgroundColor #fefefe
@tipMultilineMaxwidth 250px