/*******************************
Button
*******************************/
/*——————-
Element
——————–*/ @borderRadius: @circularRadius; @textTransform: uppercase; @backgroundColor: FFFFFF; @backgroundImage: none; @fontWeight: bold; @textColor: rgba(0, 0, 0, 0.6); @boxShadow:
0px 0px 0px 2px rgba(0, 0, 0, 0.2) inset
;
/* Padding */ @verticalPadding: 1.25em; @horizontalPadding: 3em;
/* Icon */ @iconOpacity: 0.8; @iconDistance: 0.4em; @iconTransition: opacity @transitionDuration @transitionEasing; @iconMargin: 0em @iconDistance 0em -(@iconDistance / 2); @iconVerticalAlign: top;
/*——————-
Group
——————–*/
@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
/*——————-
States
——————–*/
@hoverBackgroundColor: FAFAFA; @hoverBackgroundImage: none; @hoverBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
@downBackgroundColor: F0F0F0; @downBackgroundImage: none; @downBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.35) inset !important;
@activeBackgroundColor: DDDDDD; @activeBackgroundImage: none; @activeBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset !important;
@loadingBackgroundColor: FFFFFF;
/*——————-
Types
——————–*/
/* Labeled Icon */ @labeledIconWidth: 1em + (@verticalPadding * 2); @labeledIconBackgroundColor: transparent; @labeledIconPadding: (@horizontalPadding + 1em); @labeledIconBorder: rgba(0, 0, 0, 0.05); @labeledIconColor: ”;
@labeledIconLeftShadow: none; @labeledIconRightShadow: none;
/* Basic */ @basicBoxShadow: 0px 0px 0px 1px @borderColor; @iconOffset: 0.05em; @basicLoadingColor: FFFFFF;
@basicHoverBackground: FAFAFA; @basicHoverBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
@basicDownBackground: rgba(0, 0, 0, 0.02); @basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
@basicActiveBackground: @transparentBlack; @basicActiveColor: @selectedTextColor;
/* Basic Inverted */ @basicInvertedBackground: transparent; @basicInvertedHoverBackground: transparent; @basicInvertedDownBackground: @transparentWhite; @basicInvertedActiveBackground: @transparentWhite;
@basicInvertedBoxShadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5); @basicInvertedHoverBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor; @basicInvertedDownBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor; @basicInvertedActiveBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
@basicInvertedColor: @darkWhite; @basicInvertedHoverColor: @darkWhiteHover; @basicInvertedDownColor: @darkWhiteActive; @basicInvertedActiveColor: @invertedTextColor;
/* Basic Group */ @basicGroupBorder: 1px solid @borderColor; @basicGroupBoxShadow: 0px 0px 0px 1px @borderColor;
/*——————-
Variations
——————–*/
/* Colors */ @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1)); @coloredBoxShadow: @shadowBoxShadow;
/* Compact */ @compactVerticalPadding: (@verticalPadding * 0.75); @compactHorizontalPadding: (@horizontalPadding * 0.75);
/* Attached */ @attachedOffset: -1px; @attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); @attachedHorizontalPadding: 0.75em;
/* Floated */ @floatedMargin: 0.25em;
/* Animated */ @animationDuration: 0.3s; @animationEasing: ease; @fadeScaleHigh: 1.5; @fadeScaleLow: 0.75;
/* Sizing */ @mini: 0.7rem; @tiny: 0.8rem; @small: 0.875rem; @medium: 1rem; @large: 1.125rem; @big: 1.25rem; @huge: 1.375rem; @massive: 1.5rem;