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.
285 lines
6.0 KiB
285 lines
6.0 KiB
/*-------------------
|
|
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;
|
|
@secondaryItemBackground: 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;
|