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.
213 lines
5.2 KiB
213 lines
5.2 KiB
/*******************************
|
|
List
|
|
*******************************/
|
|
|
|
|
|
/*-------------------
|
|
View
|
|
--------------------*/
|
|
|
|
/* List */
|
|
@listStyleType: none;
|
|
@listStylePosition: outside;
|
|
@margin: 0em;
|
|
@verticalPadding: 0em;
|
|
@horizontalPadding: 0em;
|
|
|
|
/* Sub List */
|
|
@childListPadding: 0.75em 0em 0.25em 0.5em;
|
|
@childListIndent: 1em;
|
|
|
|
/* List Item */
|
|
@itemVerticalPadding: 0.3em;
|
|
@itemHorizontalPadding: 0em;
|
|
@itemLineHeight: 1.2;
|
|
|
|
|
|
/*-------------------
|
|
Elements
|
|
--------------------*/
|
|
|
|
/* Icon */
|
|
@iconDistance: 0.3em;
|
|
@iconOffset: ((@itemLineHeight - 1rem) / 2);
|
|
@iconTransition: color 0.2s ease;
|
|
@iconVerticalAlign: top;
|
|
@iconContentVerticalAlign: middle;
|
|
|
|
/* Image */
|
|
@imageDistance: 0.5em;
|
|
@imageAlign: middle;
|
|
|
|
/* Content */
|
|
@contentDistance: 0.5em;
|
|
@contentLineHeight: 1.2em;
|
|
@contentVerticalAlign: middle;
|
|
|
|
/* Link */
|
|
@itemLinkColor: @textColor;
|
|
@itemLinkHoverColor: @linkHoverColor;
|
|
|
|
/* Linked Icon */
|
|
@itemLinkIconColor: @lightTextColor;
|
|
@itemLinkIconHoverColor: @textColor;
|
|
@invertedIconLinkColor: @invertedLightTextColor;
|
|
|
|
/* Header */
|
|
@itemHeaderFontFamily: @headerFont;
|
|
@itemHeaderFontWeight: bold;
|
|
@itemHeaderColor: @textColor;
|
|
|
|
/* Description */
|
|
@itemDescriptionColor: @textColor;
|
|
|
|
/*-------------------
|
|
States
|
|
--------------------*/
|
|
|
|
@disabledColor: @disabledTextColor;
|
|
@invertedDisabledColor: @invertedDisabledTextColor;
|
|
|
|
/*-------------------
|
|
Variations
|
|
--------------------*/
|
|
|
|
/* Float */
|
|
@floatMargin: 1em;
|
|
|
|
/* Horizontal */
|
|
@horizontalSpacing: 1em;
|
|
@horizontalIconDistance: 0.25em;
|
|
|
|
/* Inverted */
|
|
@invertedListIconColor: @invertedLightTextColor;
|
|
@invertedHeaderColor: @invertedTextColor;
|
|
@invertedDescriptionColor: @invertedLightTextColor;
|
|
|
|
/* Link List */
|
|
@linkListItemColor: @unselectedTextColor;
|
|
@linkListItemHoverColor: @hoveredTextColor;
|
|
@linkListItemDownColor: @pressedTextColor;
|
|
@linkListItemActiveColor: @selectedTextColor;
|
|
@linkListTransition:
|
|
0.2s color @defaultEasing
|
|
;
|
|
|
|
/* Inverted Link List */
|
|
@invertedLinkListItemColor: @invertedUnselectedTextColor;
|
|
@invertedLinkListItemHoverColor: @invertedHoveredTextColor;
|
|
@invertedLinkListItemDownColor: @invertedPressedTextColor;
|
|
@invertedLinkListItemActiveColor: @invertedSelectedTextColor;
|
|
|
|
/* Selection List */
|
|
@selectionListItemMargin: 0em;
|
|
@selectionListItemBorderRadius: 0.5em;
|
|
@selectionListItemVerticalPadding: 0.5em;
|
|
@selectionListItemHorizontalPadding: 0.5em;
|
|
@selectionListTransition:
|
|
0.2s color @defaultEasing,
|
|
0.2s padding-left @defaultEasing,
|
|
0.2s background-color @defaultEasing
|
|
;
|
|
|
|
/* Selection List States */
|
|
@selectionListBackground: transparent;
|
|
@selectionListColor: @unselectedTextColor;
|
|
@selectionListHoverBackground: @subtleTransparentBlack;
|
|
@selectionListHoverColor: @hoveredTextColor;
|
|
@selectionListDownBackground: @transparentBlack;
|
|
@selectionListDownColor: @pressedTextColor;
|
|
@selectionListActiveBackground: @transparentBlack;
|
|
@selectionListActiveColor: @selectedTextColor;
|
|
|
|
/* Inverted Selection List */
|
|
@invertedSelectionListBackground: transparent;
|
|
@invertedSelectionListColor: @invertedUnselectedTextColor;
|
|
@invertedSelectionListHoverBackground: @subtleTransparentWhite;
|
|
@invertedSelectionListHoverColor: @invertedHoveredTextColor;
|
|
@invertedSelectionListDownBackground: @transparentWhite;
|
|
@invertedSelectionListDownColor: @invertedPressedTextColor;
|
|
@invertedSelectionListActiveBackground: @transparentWhite;
|
|
@invertedSelectionListActiveColor: @invertedSelectedTextColor;
|
|
|
|
/* Animated List */
|
|
@animatedListTransition:
|
|
0.2s color ease,
|
|
0.2s padding-left ease,
|
|
0.2s background-color ease
|
|
;
|
|
@animatedListIndent: 1em;
|
|
@animatedListChildIndent: 0.5em;
|
|
|
|
/* Bulleted */
|
|
@bulletDistance: 1rem;
|
|
@bulletOffset: -1rem;
|
|
|
|
@bulletOpacity: 1;
|
|
@bulletCharacter: '•';
|
|
@bulletColor: @textColor;
|
|
@bulletVerticalAlign: top;
|
|
@bulletChildDistance: @bulletDistance;
|
|
|
|
/* Horizontal Bullets */
|
|
@horizontalBulletSpacing: 1.5rem;
|
|
@horizontalBulletOffset: -1.1rem;
|
|
|
|
/* Ordered List */
|
|
@orderedCountName: ordered;
|
|
@orderedCountContent: counters(ordered, ".") " ";
|
|
@orderedCountColor: @textColor;
|
|
@orderedCountDistance: 1.25rem;
|
|
@orderedCountOpacity: 0.8;
|
|
@orderedCountTextAlign: right;
|
|
@orderedCountVerticalAlign: middle;
|
|
|
|
@orderedChildCountDistance: 2em;
|
|
@orderedChildCountOffset: -2em;
|
|
|
|
/* Horizontal Ordereded */
|
|
@horizontalOrderedCountDistance: 0.5em;
|
|
|
|
/* Divided */
|
|
@dividedBorderWidth: 1px;
|
|
@dividedBorder: @dividedBorderWidth solid @borderColor;
|
|
@dividedInvertedBorderColor: @whiteBorderColor;
|
|
@dividedChildListBorder: none;
|
|
@dividedChildItemBorder: none;
|
|
|
|
/* Divided Horizontal */
|
|
@horizontalDividedSpacing: (@horizontalSpacing / 2);
|
|
@horizontalDividedLineHeight: 0.6;
|
|
|
|
/* Divided */
|
|
@celledBorderWidth: 1px;
|
|
@celledBorder: @celledBorderWidth solid @borderColor;
|
|
@celledInvertedBorder: @dividedBorderWidth solid @whiteBorderColor;
|
|
@celledHorizontalPadding: 0.5em;
|
|
@celledChildListBorder: none;
|
|
@celledChildItemBorder: none;
|
|
|
|
/* Divided Horizontal */
|
|
@horizontalCelledSpacing: (@horizontalSpacing / 2);
|
|
@horizontalCelledLineHeight: 0.6;
|
|
|
|
/* Relaxed */
|
|
@relaxedVerticalPadding: 0.5rem;
|
|
@relaxedHeaderMargin: 0.25rem;
|
|
@relaxedHorizontalPadding: 1.25rem;
|
|
|
|
/* Very Relaxed */
|
|
@veryRelaxedVerticalPadding: 1rem;
|
|
@veryRelaxedHeaderMargin: 0.5rem;
|
|
@veryRelaxedHorizontalPadding: 2rem;
|
|
|
|
|
|
/* Sizes */
|
|
@mini: 0.7rem;
|
|
@tiny: 0.8rem;
|
|
@small: 0.9rem;
|
|
@medium: 1rem;
|
|
@large: 1.1rem;
|
|
@big: 1.2rem;
|
|
@huge: 1.3rem;
|
|
@massive: 1.5rem;
|