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