You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
232 lines
5.8 KiB
232 lines
5.8 KiB
/*******************************
|
|
Button
|
|
*******************************/
|
|
|
|
/*-------------------
|
|
Element
|
|
--------------------*/
|
|
|
|
@verticalMargin: 0em;
|
|
@horizontalMargin: 0.25em;
|
|
@textTransform: none;
|
|
@tapColor: transparent;
|
|
|
|
@fontWeight: bold;
|
|
@textColor: rgba(0, 0, 0, 0.6);
|
|
@textShadow: none;
|
|
@invertedTextShadow: none;
|
|
@borderRadius: 0.25em;
|
|
|
|
/* Shadow */
|
|
@shadowDistance: 0em;
|
|
@shadowOffset: (@shadowDistance / 2);
|
|
@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset;
|
|
|
|
@backgroundColor: #FAFAFA;
|
|
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
|
|
@boxShadow:
|
|
@subtleShadow,
|
|
0px 0px 0px 1px @borderColor inset,
|
|
@shadowBoxShadow
|
|
;
|
|
|
|
/* transitions */
|
|
@transition:
|
|
opacity @transitionDuration @transitionEasing,
|
|
background-color @transitionDuration @transitionEasing,
|
|
color @transitionDuration @transitionEasing,
|
|
background @transitionDuration @transitionEasing
|
|
;
|
|
|
|
/* Padding */
|
|
@verticalPadding: 0.8em;
|
|
@horizontalPadding: 1.5em;
|
|
|
|
/* Icon */
|
|
@iconOpacity: 0.8;
|
|
@iconDistance: 0.4em;
|
|
@iconTransition: opacity @transitionDuration @transitionEasing;
|
|
@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
|
|
@rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance;
|
|
@iconVerticalAlign: baseline;
|
|
|
|
/* Loader */
|
|
@loaderPath: "@{imagePath}/loader-mini.gif";
|
|
@hugeLoaderPath: "@{imagePath}/loader-small.gif";
|
|
@massiveLoaderPath: "@{imagePath}/loader-medium.gif";
|
|
|
|
/*-------------------
|
|
Group
|
|
--------------------*/
|
|
|
|
@groupBoxShadow: @subtleShadow;
|
|
@groupButtonBoxShadow:
|
|
0px 0px 0px 1px @borderColor inset,
|
|
@shadowBoxShadow
|
|
;
|
|
@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
|
|
@groupButtonOffset: 0px 0px 0px -1px;
|
|
@verticalGroupOffset: 0px 0px -1px 0px;
|
|
|
|
/*-------------------
|
|
States
|
|
--------------------*/
|
|
|
|
/* Hovered */
|
|
@hoverBackgroundColor: '';
|
|
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13));
|
|
@hoverBoxShadow: '';
|
|
@hoverColor: @selectedTextColor;
|
|
@iconHoverOpacity: 0.85;
|
|
|
|
/* Focused */
|
|
@focusBackgroundColor: '';
|
|
@focusBackgroundImage: '';
|
|
@focusBoxShadow:
|
|
0px 0px 1px rgba(81, 167, 232, 0.8) inset,
|
|
0px 0px 3px 2px rgba(81, 167, 232, 0.8)
|
|
;
|
|
@focusColor: @selectedTextColor;
|
|
@iconFocusOpacity: 0.85;
|
|
|
|
/* Pressed Down */
|
|
@downBackgroundColor: #F1F1F1;
|
|
@downBackgroundImage: '';
|
|
@downBoxShadow:
|
|
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
|
|
0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
|
|
;
|
|
@downColor: @selectedTextColor;
|
|
|
|
/* Active */
|
|
@activeBackgroundColor: #DADADA;
|
|
@activeBackgroundImage: none;
|
|
@activeColor: rgba(0, 0, 0, 0.6);
|
|
@activeBoxShadow:
|
|
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
|
|
0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
|
|
;
|
|
|
|
/* Active + Hovered */
|
|
@activeHoverBackgroundColor: #DADADA;
|
|
@activeHoverBackgroundImage: none;
|
|
@activeHoverBoxShadow:
|
|
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
|
|
0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
|
|
;
|
|
@activeHoverColor: @selectedTextColor;
|
|
|
|
/* Loading */
|
|
@loadingBackgroundColor: #FFFFFF;
|
|
|
|
/*-------------------
|
|
Types
|
|
--------------------*/
|
|
|
|
/* Or */
|
|
@orWidth: 0.3em;
|
|
@orHeight: 1.1em;
|
|
|
|
@orVerticalOffset: -0.1em;
|
|
@orHorizontalOffset: -0.9em;
|
|
|
|
@orTextStyle: normal;
|
|
@orTextWeight: bold;
|
|
|
|
@orCircleSize: 1.8em;
|
|
@orLineHeight: 1.6;
|
|
@orBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
|
|
|
@orSpacerHeight: 0.5em;
|
|
@orSpacerColor: transparent;
|
|
|
|
/* Icon */
|
|
@iconButtonOpacity: 0.9;
|
|
|
|
/* Labeled Icon */
|
|
@labeledIconWidth: 1em + (@verticalPadding * 2);
|
|
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
|
|
@labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
|
|
@labeledIconBorder: rgba(0, 0, 0, 0.05);
|
|
@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 */
|
|
@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 @invertedBorderSize #999999 inset;
|
|
@basicInvertedHoverBoxShadow: 0px 0px 0px @invertedBorderSize #FFFFFF inset;
|
|
@basicInvertedDownBoxShadow: 0px 0px 0px @invertedBorderSize #CCCCCC inset;
|
|
@basicInvertedActiveBoxShadow: 0px 0px 0px @invertedBorderSize #DADADA inset;
|
|
|
|
@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;
|
|
|