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

Alert Colors

Variable Default Value Note
@alertColor @hintColor
@alertSuccessColor @successColor
@alertWarnColor @warnColor
@alertErrorColor @failColor

Default Shaddow

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 alike
@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

Grid

Variable Default Value Note
@gridSpace 10px Space Between Columns
@gridColumns 12 Grid-Row-Size

Buttons

Variable Default Value Note
@btnBackgroundColor
#e7e5e5
@btnPrimaryBgColor @successColor
@btnDangerBgColor @failColor
@btnEditBgColor @hintColor
@btnShadow 0 1px 1px rgba(0,0,0,0.4)
@btnHoverShadow 0 3px 3px rgba(0,0,0,0.4)

Form / Inputs

Variable Default Value Note
@inputValidColor @successColor
@inputDangerColor @failColor
@inputHintColor @hintColor
@inputRequiredColor @mainColor
@inputColor
#ffffff
@inputShadow 0px 1px 1px rgba(0,0,0,0.4)
@inputHoverShadow 0 3px 3px rgba(0,0,0,0.4)

Other

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