|
|
/*------------------- Globals Used --------------------*/
// @textColor // @borderColor // @invertedUnselectedTextColor
/*------------------- Collection --------------------*/
@margin: 1rem 0rem; @verticalPadding: 0.83em; @horizontalPadding: 0.95em;
@background: #FFFFFF; @itemBackground: none;
@fontWeight: normal; @boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@borderSize: 0em;
@transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease ; @borderRadius: 0.1875rem;
@dividerSize: 1px; @dividerBackground: linear-gradient( rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%) ;
@headerBackground: rgba(0, 0, 0, 0.04); @headerWeight: bold;
@textLineHeight: 1.3;
@transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease ;
@menuTextColor: @textColor;
/* Sub Menu */ @subMenuMargin: 0.5em; @subMenuFontSize: 0.875rem; @subMenuTextColor: @textColor;
@subMenuHorizontalPadding: 0.5rem; @subMenuVerticalPadding: 1.5rem;
/*-------------- Elements ---------------*/
/* Icon */ @iconMargin: 0.5em; @iconLabelMargin: 0.25em;
/* Header */ @headerBackground: rgba(0, 0, 0, 0.04); @headerWeight: bold; @headerTextTransform: normal; @headerFontSize: 1rem;
/*-------------- Couplings ---------------*/
/* Button */ @buttonOffset: -0.05em; @buttonVerticalPadding: 0.55em; @buttonSize: 0.875em; @actionButtonHorizontalPadding: 0.8em;
@labeledButtonPadding: 0.6em;
/* Input */ @inputSize: 0.875em; @inputVerticalMargin: -0.8em; @inputOffset: -0.05em; @inputVerticalPadding: 0.5em; @inputIconOffset: -0.3em;
@smallInputOffset: 0em; @smallInputVerticalPadding: 0.4em;
@largeInputOffset: -0.125em; @largeInputVerticalPadding: 0.6em;
/* Label */ @labelOffset: -0.15em; @labelBackground: rgba(0, 0, 0, 0.35); @labelTextColor: #FFFFFF;
@labelTextMargin: 0.5em; @labelVerticalPadding: 0.3em; @labelHorizontalPadding: 0.8em;
/* Dropdown */ @dropdownBackground: #FFFFFF; @dropdownMenuOffset: 1px; @dropdownPointingDistance: 0.75em; @dropdownTextColor: @textColor; @dropdownBoxShadow: 0 1px 1px 1px @solidBorderColor; @dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor;
/* Pointing Arrow */ @arrowSize: 0.6em; @arrowOffset: -(@arrowSize / 2); @arrowBorder: 1px solid rgba(0, 0, 0, 0.1);
@arrowHoverColor: #FAFAFA; @arrowActiveColor: #FCFCFC;
@arrowVerticalHoverColor: #FAFAFA; @arrowVerticalActiveColor: #FCFCFC;
/*-------------- States ---------------*/
@hoverBackground: @subtleTransparentBlack; @hoverColor: @textColor;
@downBackground: @subtleTransparentBlack;
@activeBackground: @subtleTransparentBlack; @activeColor: @darkTextColor; @activeBorderSize: 0.2em; @activeFontWeight: normal;
@activeHoverBackground: @hoverBackground; @subMenuActiveColor: rgba(0, 0, 0, 0.03);
@loadingBackgroundColor: rgba(255, 255, 255, 0.8); @loadingImage: "@{imagePath}/loader-large.gif"; @loadingPosition: 50% 50%;
/*-------------- Types ---------------*/
/* Vertical */ @verticalBackground: #FFFFFF; @verticalItemBackground: none; @verticalDividerBackground: linear-gradient(to right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%) ;
/* Secondary */ @secondaryBackground: none; @secondaryTransition: color 0.2s ease;
@secondaryBorderRadius: 0.3125em;
@secondaryMargin: 0.25em; @secondaryVerticalMargin: 0.3em; @secondaryVerticalPadding: 0.5em; @secondaryHorizontalPadding: 1em;
@secondaryLinkOpacity: 0.8;
@secondaryHeaderBackground: none transparent; @secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
@secondaryActiveBackground: @transparentBlack; @secondaryInvertedActiveBackground: @transparentWhite;
/* Pointing */ @secondaryPointingBorderWidth: 3px; @secondaryPointingVerticalPadding: 0.6em; @secondaryPointingHorizontalPadding: 0.95em;
@secondaryPointingBorderColor: rgba(0, 0, 0, 0.2); @secondaryPointingHoverTextColor: @textColor;
@secondaryPointingActiveBorderColor: rgba(0, 0, 0, 0.4); @secondaryPointingActiveTextColor: @selectedTextColor;
@secondaryPointingHeaderColor: @selectedTextColor;
/* Tiered */ @tieredActiveItemBackground: #FCFCFC; @tieredActiveMenuBackground: #FCFCFC;
@tieredSubMenuTextTransform: normal; @tieredSubMenuFontWeight: normal;
@tieredSubMenuColor: @lightTextColor;
@tieredSubMenuHoverBackground: none transparent; @tieredSubMenuHoverColor: @selectedTextColor;
@tieredSubMenuActiveBackground: none transparent; @tieredSubMenuActiveColor: @selectedTextColor;
@tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);
/* Tabular */ @tabularBorderColor: #DCDDDE; @tabularBackgroundColor: #FFFFFF; @tabularBorderWidth: 1px; @tabularHorizontalPadding: 1.4em; @tabularMenuTextColor: @menuTextColor;
@tabularActiveColor: @selectedTextColor;
@tabularMenuActiveBackground: #FFFFFF; @tabularActiveWeight: bold; @tabularBorderRadius: 5px;
/* Pagination */ @paginationMinWidth: 3em; @paginationActiveBackground: rgba(0, 0, 0, 0.03);
/* Labeled Icon */ @labeledIconSize: 1.5em; @labeledIconMinWidth: 6em; @labeledIconTextMargin: 0.3em;
/* Text */ @textMenuTransition: opacity 0.2s ease;
/*-------------- Variations ---------------*/
/* Inverted */ @invertedBackground: none #333333; @invertedBoxShadow: none;
@invertedHeaderBackground: rgba(0, 0, 0, 0.3); @invertedSubMenuColor: @invertedLightTextColor;
/* Inverted Secondary */ @secondaryInvertedColor: @invertedLightTextColor; @secondaryInvertedHoverColor: @invertedSelectedTextColor;
/* Inverted Menu Divider */ @invertedDividerBackground: linear-gradient( rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%) ; @invertedVerticalDividerBackground: linear-gradient(to right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%) ;
/* Fixed */ @fixedGridMargin: 2.75rem;
/* Attached */ @attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;
/* Sizes */ @small: 0.875rem; @smallSubMenu: 0.875rem; @smallWidth: 13rem;
@medium: 1rem; @mediumWidth: 15rem;
@large: 1.125rem; @largeSubMenu: 0.875rem; @largeDropdown: 1rem; @largeWidth: 18rem;
|