/*******************************
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;