/*******************************

Button

*******************************/

/*——————-

Element

——————–*/

@googleFontName : ‘Roboto’; @pageFont : ‘Roboto’, Arial, sans-serif;

@medium: 13px;

@verticalPadding : 0.8em; @horizontalPadding : 0.8em; @borderRadius : 0.153846153em; @color : #222222; @fontWeight : normal; @textTransform : none;

@backgroundColor : @white; @backgroundImage : linear-gradient(transparent, rgba(0, 0, 0, 0.02));

@solidBorderColor: DDDDDD;

@borderBoxShadowColor: @solidBorderColor; @borderBoxShadow: 0px 0px 0px 1px @solidBorderColor; @shadowBoxShadow: 0px 0px 0px 0px transparent;

@transition:

opacity 0.3s @transitionEasing,
background-color 0.3s @transitionEasing,
color 0.3s @transitionEasing,
box-shadow 0.3s @transitionEasing,
background 0.3s @transitionEasing

; /*——————-

State

——————–*/

@hoverBackgroundColor: @white; @hoverBoxShadow:

@borderBoxShadow,
0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important

;

@downBackgroundColor: @white; @downBackgroundImage: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)); @downTextColor: #222222; @downBoxShadow: @borderBoxShadow;

@activeBackgroundColor: F0F0F0; @activeBoxShadow: 0px 0px 0px 1px DDDDDD;

/*——————-

Variations

——————–*/

@basicBorderSize: 0px; @basicBorderRadius: 4px; @basicColoredBorderSize: 1px; @basicHoverBackground: @white; @basicHoverBoxShadow: @hoverBoxShadow; @basicDownBackground: @white; @basicDownBoxShadow: @downBoxShadow;

@basicActiveBackground: FFFFFF; @basicActiveBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);

@labeledIconBackgroundColor: transparent; @labeledIconWidth: 2em;

@coloredBackgroundImage : @subtleGradient; @coloredBoxShadow : 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;

@primaryColor : #4184F3; @primaryBoxShadow : 0px 0px 0px 1px #0157E4 inset;

@secondaryColor : EEEEEE; @secondaryBackgroundImage : @backgroundImage; @secondaryTextColor : @textColor; @secondaryBoxShadow : @borderBoxShadow;

@positiveColor: #3D9400; @negativeColor: D34836; @invertedBorderSize: 1px;