This repository has been archived on 2024-01-26. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
calcifer/web/semantic/src/themes/default/elements/list.variables
Tim Schumacher 2027b94179 Update Semantic
Fixes #40,#24
2015-03-29 19:33:23 +02:00

204 lines
5.3 KiB
Text

/*******************************
List
*******************************/
/*-------------------
View
--------------------*/
/* List */
@listStyleType: none;
@listStylePosition: outside;
@margin: 1em 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;
@contentLineHeightOffset: (@contentLineHeight - 1em) / 2;
@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 */
@floatDistance: 1em;
@leftFloatMargin: 0em @floatDistance 0em 0em;
@rightFloatMargin: 0em 0em 0em @floatDistance;
/* Horizontal */
@horizontalSpacing: 1em;
@horizontalIconDistance: 0.25em;
/* Inverted */
@invertedListIconColor: @invertedLightTextColor;
@invertedHeaderColor: @invertedTextColor;
@invertedDescriptionColor: @invertedLightTextColor;
@invertedItemLinkColor: @invertedTextColor;
@invertedItemLinkHoverColor: @linkHoverColor;
/* 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;
/* Bulleted */
@bulletDistance: 1rem;
@bulletOffset: -1rem;
@bulletOpacity: 1;
@bulletCharacter: '•';
@bulletColor: @textColor;
@bulletVerticalAlign: top;
@bulletChildDistance: @bulletDistance;
/* Horizontal Bullets */
@horizontalBulletSpacing: 1.5rem;
/* Ordered List */
@orderedCountName: ordered;
@orderedCountContent: counters(ordered, ".") " ";
@orderedCountColor: @textColor;
@orderedCountDistance: 1.25rem;
@orderedCountOpacity: 0.8;
@orderedCountTextAlign: right;
@orderedCountVerticalAlign: middle;
@orderedChildCountDistance: 1em;
@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;