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

Button

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

/*——————-

Element

——————–*/

@verticalMargin: 0em; @horizontalMargin: 0.25em;

/* Style */ @backgroundColor: E0E0E0; @backgroundImage: none; @verticalPadding: 0.78571em; @horizontalPadding: 1.5em;

/* Text */ @textTransform: none; @tapColor: transparent; @fontFamily: @pageFont; @fontWeight: bold; @textColor: rgba(0, 0, 0, 0.6); @textShadow: none; @invertedTextShadow: none; @borderRadius: @defaultBorderRadius; @verticalAlign: baseline;

/* Internal Shadow */ @shadowDistance: 0em; @shadowOffset: (@shadowDistance / 2); @shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset;

/* Box Shadow */ @borderBoxShadowColor: transparent; @borderBoxShadowWidth: 1px; @borderBoxShadow: 0px 0px 0px @borderBoxShadowWidth @borderBoxShadowColor inset; @boxShadow:

@borderBoxShadow,
@shadowBoxShadow

;

/* Icon */ @iconOpacity: 0.8; @iconDistance: 0.4em; @iconColor: ”; @iconTransition: opacity @transitionDuration @transitionEasing; @iconVerticalAlign: baseline;

@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2); @rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance;

/* Loader */ @loaderSize: 1.2857em; @loaderOffset: -(@loaderSize / 2); @loaderMargin: @loaderOffset 0em 0em @loaderOffset; @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);

@transition:

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

; /* @willChange: box-shadow, transform, opacity, color, background; */ @willChange: ”;

/*——————-

Group

——————–*/

@groupBoxShadow: none; @groupButtonBoxShadow: @boxShadow; @verticalBoxShadow: none; @groupButtonOffset: 0px 0px 0px 0px; @verticalGroupOffset: 0px 0px 0px 0px;

/*——————-

States

——————–*/

/* Hovered */ @hoverBackgroundColor: E8E8E8; @hoverBackgroundImage: none; @hoverBoxShadow: ”; @hoverColor: @hoveredTextColor; @iconHoverOpacity: 0.85;

/* Focused */ @focusBackgroundColor: ”; @focusBackgroundImage: ”; @focusBoxShadow:

@borderBoxShadow,
0px 0px 1px rgba(81, 167, 232, 0.8) inset,
0px 0px 3px 2px rgba(81, 167, 232, 0.8)

; @focusColor: @hoveredTextColor; @iconFocusOpacity: 0.85;

/* Pressed Down */ @downBackgroundColor: CCCCCC; @downBackgroundImage: ”; @downPressedShadow: 0px 1px 4px 0px @borderColor inset !important; @downBoxShadow:

@borderBoxShadow,
@downPressedShadow

; @downColor: @pressedTextColor;

/* Active */ @activeBackgroundColor: D0D0D0; @activeBackgroundImage: none; @activeColor: @selectedTextColor; @activeBoxShadow: @borderBoxShadow;

/* Active + Hovered */ @activeHoverBackgroundColor: @activeBackgroundColor; @activeHoverBackgroundImage: none; @activeHoverColor: @activeColor; @activeHoverBoxShadow: @activeBoxShadow;

/* Loading */ @loadingBackground: @offWhite;

/*——————-

Types

——————–*/

/* Or */ @orText: ‘or’;

@orGap: 0.3em; @orHeight: (@verticalPadding * 2) + 1em;

@orCircleDistanceToEdge: (@verticalPadding); @orCircleSize: @orHeight - @orCircleDistanceToEdge; @orLineHeight: (@orCircleSize); @orBoxShadow: @borderBoxShadow;

@orVerticalOffset: -(@orCircleSize / 2); @orHorizontalOffset: -(@orCircleSize / 2);

@orBackgroundColor: @white; @orTextShadow: @invertedTextShadow; @orTextStyle: normal; @orTextWeight: bold; @orTextColor: @lightTextColor;

@orSpacerHeight: @verticalPadding; @orSpacerColor: transparent;

/* Icon */ @iconButtonOpacity: 0.9;

/* Labeled Icon */ @labeledIconWidth: 1em + (@verticalPadding * 2); @labeledIconBackgroundColor: rgba(0, 0, 0, 0.05); @labeledIconPadding: (@horizontalPadding + @labeledIconWidth); @labeledIconBorder: transparent; @labeledIconColor: ”;

@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset; @labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;

/* Inverted */ @invertedBorderSize: 2px; @invertedTextColor: @white; @invertedTextHoverColor: @hoverColor; @invertedGroupButtonOffset: 0px 0px 0px -(@invertedBorderSize); @invertedVerticalGroupButtonOffset: 0px 0px -(@invertedBorderSize) 0px;

/* Basic */ @basicBorderRadius: @borderRadius; @basicBorderSize: 1px; @basicTextColor: @textColor; @basicColoredBorderSize: 2px;

@basicBackground: transparent; @basicFontWeight: normal; @basicBoxShadow: 0px 0px 0px @basicBorderSize @borderColor inset; @iconOffset: 0.05em; @basicLoadingColor: @offWhite; @basicTextTransform: none;

/* Basic Hover */ @basicHoverBackground: FAFAFA; @basicHoverTextColor: @hoveredTextColor; @basicHoverBoxShadow:

0px 0px 0px @basicBorderSize @borderColor inset,
0px 0px 0px 0px @borderColor inset

; /* Basic Down */ @basicDownBackground: F8F8F8; @basicDownTextColor: @pressedTextColor; @basicDownBoxShadow:

0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.15) inset,
0px 1px 4px 0px @borderColor inset

; /* Basic Active */ @basicActiveBackground: @transparentBlack; @basicActiveBoxShadow: ”; @basicActiveTextColor: @selectedTextColor;

/* Basic Inverted */ @basicInvertedBackground: transparent; @basicInvertedHoverBackground: transparent; @basicInvertedDownBackground: @transparentWhite; @basicInvertedActiveBackground: @transparentWhite;

@basicInvertedBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.5) inset; @basicInvertedHoverBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset; @basicInvertedDownBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.9) inset; @basicInvertedActiveBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.7) inset;

@basicInvertedColor: @darkWhite; @basicInvertedHoverColor: @darkWhiteHover; @basicInvertedDownColor: @darkWhiteActive; @basicInvertedActiveColor: @invertedTextColor;

/* Basic Group */ @basicGroupBorder: 1px solid @borderColor; @basicGroupBoxShadow: 0px 0px 0px 1px @borderColor;

/*——————-

Variations

——————–*/

/* Colors */ @coloredBackgroundImage: none; @coloredBoxShadow: @shadowBoxShadow;

/* Ordinality */ @primaryBackgroundImage: @coloredBackgroundImage; @primaryTextColor: @invertedTextColor; @primaryTextShadow: @invertedTextShadow; @primaryBoxShadow: @coloredBoxShadow;

@secondaryBackgroundImage: @coloredBackgroundImage; @secondaryTextColor: @invertedTextColor; @secondaryTextShadow: @invertedTextShadow; @secondaryBoxShadow: @coloredBoxShadow;

/* Compact */ @compactVerticalPadding: (@verticalPadding * 0.75); @compactHorizontalPadding: (@horizontalPadding * 0.75);

/* Attached */ @attachedOffset: -1px; @attachedBoxShadow: 0px 0px 0px 1px @borderColor; @attachedHorizontalPadding: 0.75em;

/* Floated */ @floatedMargin: 0.25em;

/* Animated */ @animatedVerticalAlign: middle; @animationDuration: 0.3s; @animationEasing: ease; @fadeScaleHigh: 1.5; @fadeScaleLow: 0.75;