Browse Source

Revisits link colors inside lists

flex-list
jlukic 9 years ago
parent
commit
f16db3f70a
2 changed files with 81 additions and 48 deletions
  1. 82
      src/definitions/elements/list.less
  2. 47
      src/themes/default/elements/list.variables

82
src/definitions/elements/list.less

@ -58,7 +58,7 @@ ol.ui.list li,
list-style-type: @listStyleType; list-style-type: @listStyleType;
list-style-position: @listStylePosition; list-style-position: @listStylePosition;
padding: @itemVerticalPadding @itemHorizontalPadding;
padding: @itemPadding;
line-height: @itemLineHeight; line-height: @itemLineHeight;
} }
@ -95,6 +95,15 @@ ol.ui.list ol,
padding: @childListPadding; padding: @childListPadding;
} }
/* Child Item */
ul.ui.list ul li,
ol.ui.list ol li,
.ui.list .list > .item {
padding: @childItemPadding;
line-height: @childItemLineHeight;
}
/* Icon */ /* Icon */
.ui.list .list > .item > i.icon, .ui.list .list > .item > i.icon,
.ui.list > .item > i.icon { .ui.list > .item > i.icon {
@ -157,7 +166,30 @@ ol.ui.list ol,
padding-left: 0em; padding-left: 0em;
} }
/* Item Link */
/* Header */
.ui.list .list > .item .header,
.ui.list > .item .header {
display: block;
margin: 0em;
font-family: @itemHeaderFontFamily;
font-weight: @itemHeaderFontWeight;
color: @itemHeaderColor;
}
/* Description */
.ui.list .list > .item .description,
.ui.list > .item .description {
display: block;
color: @itemDescriptionColor;
}
/* Child Link */
.ui.list > .item a,
.ui.list .list > .item a {
cursor: pointer;
}
/* Linking Item */
.ui.list .list > a.item, .ui.list .list > a.item,
.ui.list > a.item { .ui.list > a.item {
cursor: pointer; cursor: pointer;
@ -174,29 +206,15 @@ ol.ui.list ol,
color: @itemLinkIconColor; color: @itemLinkIconColor;
} }
/* Linking Content */
.ui.list .item a:not(.ui) {
/* Header Link */
.ui.list .list > .item a.header,
.ui.list > .item a.header {
cursor: pointer; cursor: pointer;
color: @itemSubLinkColor !important;
}
.ui.list .item a:not(.ui):hover {
color: @itemSubLinkHoverColor !important;
}
/* Header */
.ui.list .list > .item .header,
.ui.list > .item .header {
display: block;
margin: 0em;
font-family: @itemHeaderFontFamily;
font-weight: @itemHeaderFontWeight;
color: @itemHeaderColor;
color: @itemHeaderLinkColor !important;
} }
.ui.list .list > .item .description,
.ui.list > .item .description {
display: block;
color: @itemDescriptionColor;
.ui.list .list > .item a.header:hover,
.ui.list > .item a.header:hover {
color: @itemHeaderLinkHoverColor !important;
} }
/* Floated Content */ /* Floated Content */
@ -359,7 +377,6 @@ ol.ui.list ol,
/* Linking Content */ /* Linking Content */
.ui.inverted.list .item a:not(.ui) { .ui.inverted.list .item a:not(.ui) {
cursor: pointer;
color: @invertedItemLinkColor !important; color: @invertedItemLinkColor !important;
} }
.ui.inverted.list .item a:not(.ui):hover { .ui.inverted.list .item a:not(.ui):hover {
@ -665,7 +682,6 @@ ol.ui.horizontal.list li:before,
margin-left: 0em; margin-left: 0em;
padding-left: 0em; padding-left: 0em;
} }
.ui.divided.bulleted.list .list > .item:not(.horizontal),
.ui.divided.bulleted.list > .item:not(.horizontal) { .ui.divided.bulleted.list > .item:not(.horizontal) {
padding-left: @bulletDistance; padding-left: @bulletDistance;
} }
@ -812,8 +828,12 @@ ol.ui.horizontal.list li:before,
--------------------*/ --------------------*/
.ui.relaxed.list:not(.horizontal) > .item { .ui.relaxed.list:not(.horizontal) > .item {
padding-top: @relaxedVerticalPadding;
padding-bottom: @relaxedVerticalPadding;
padding-top: @relaxedItemVerticalPadding;
padding-bottom: @relaxedItemVerticalPadding;
}
.ui.relaxed.list:not(.horizontal) .list > .item {
padding-top: @relaxedChildItemVerticalPadding;
padding-bottom: @relaxedChildItemVerticalPadding;
} }
.ui.horizontal.relaxed.list > .item { .ui.horizontal.relaxed.list > .item {
padding-left: @relaxedHorizontalPadding; padding-left: @relaxedHorizontalPadding;
@ -822,8 +842,12 @@ ol.ui.horizontal.list li:before,
/* Very Relaxed */ /* Very Relaxed */
.ui[class*="very relaxed"].list:not(.horizontal) > .item { .ui[class*="very relaxed"].list:not(.horizontal) > .item {
padding-top: @veryRelaxedVerticalPadding;
padding-bottom: @veryRelaxedVerticalPadding;
padding-top: @veryRelaxedItemVerticalPadding;
padding-bottom: @veryRelaxedItemVerticalPadding;
}
.ui[class*="very relaxed"].list:not(.horizontal) .list > .item {
padding-top: @veryRelaxedChildItemVerticalPadding;
padding-bottom: @veryRelaxedChildItemVerticalPadding;
} }
.ui.horizontal[class*="very relaxed"].list .list > .item, .ui.horizontal[class*="very relaxed"].list .list > .item,
.ui.horizontal[class*="very relaxed"].list > .item { .ui.horizontal[class*="very relaxed"].list > .item {

47
src/themes/default/elements/list.variables

@ -13,14 +13,21 @@
@verticalPadding: 0em; @verticalPadding: 0em;
@horizontalPadding: 0em; @horizontalPadding: 0em;
/* List Item */
@itemVerticalPadding: @relative3px;
@itemHorizontalPadding: 0em;
@itemPadding: @itemVerticalPadding @itemHorizontalPadding;
@itemLineHeight: @relativeLarge;
/* Sub List */ /* Sub List */
@childListPadding: 0.75em 0em 0.25em 0.5em; @childListPadding: 0.75em 0em 0.25em 0.5em;
@childListIndent: 1em; @childListIndent: 1em;
/* List Item */
@itemVerticalPadding: @relative4px;
@itemHorizontalPadding: 0em;
@itemLineHeight: @relativeLarge;
/* Sub List Item */
@childItemVerticalPadding: @relative2px;
@childItemHorizontalPadding: 0em;
@childItemPadding: @childItemVerticalPadding @childItemHorizontalPadding;
@childItemLineHeight: inherit;
/*------------------- /*-------------------
Elements Elements
@ -43,27 +50,27 @@
@contentLineHeightOffset: (@contentLineHeight - 1em) / 2; @contentLineHeightOffset: (@contentLineHeight - 1em) / 2;
@contentVerticalAlign: top; @contentVerticalAlign: top;
/* Header */
@itemHeaderFontFamily: @headerFont;
@itemHeaderFontWeight: bold;
@itemHeaderColor: @textColor;
/* Description */
@itemDescriptionColor: rgba(0, 0, 0, 0.7);
/* Link */ /* Link */
@itemLinkColor: @textColor;
@itemLinkColor: @linkColor;
@itemLinkHoverColor: @linkHoverColor; @itemLinkHoverColor: @linkHoverColor;
/* Link Inside */
@itemSubLinkColor: @linkColor;
@itemSubLinkHoverColor: @linkHoverColor;
/* Header Link */
@itemHeaderLinkColor: @itemLinkColor;
@itemHeaderLinkHoverColor: @itemLinkHoverColor;
/* Linked Icon */ /* Linked Icon */
@itemLinkIconColor: @lightTextColor; @itemLinkIconColor: @lightTextColor;
@itemLinkIconHoverColor: @textColor; @itemLinkIconHoverColor: @textColor;
@invertedIconLinkColor: @invertedLightTextColor; @invertedIconLinkColor: @invertedLightTextColor;
/* Header */
@itemHeaderFontFamily: @headerFont;
@itemHeaderFontWeight: bold;
@itemHeaderColor: @textColor;
/* Description */
@itemDescriptionColor: rgba(0, 0, 0, 0.7);
/*------------------- /*-------------------
States States
--------------------*/ --------------------*/
@ -160,7 +167,7 @@
/* Horizontal Bullets */ /* Horizontal Bullets */
@horizontalBulletColor: @textColor; @horizontalBulletColor: @textColor;
@horizontalBulletSpacing: 1.5rem;
@horizontalBulletSpacing: @bulletDistance + 0.5em;
/* Ordered List */ /* Ordered List */
@orderedCountName: ordered; @orderedCountName: ordered;
@ -203,12 +210,14 @@
@horizontalCelledLineHeight: 0.6; @horizontalCelledLineHeight: 0.6;
/* Relaxed */ /* Relaxed */
@relaxedVerticalPadding: (2 * @itemVerticalPadding);
@relaxedItemVerticalPadding: @relative6px;
@relaxedChildItemVerticalPadding: @relative3px;
@relaxedHeaderMargin: 0.25rem; @relaxedHeaderMargin: 0.25rem;
@relaxedHorizontalPadding: 1rem; @relaxedHorizontalPadding: 1rem;
/* Very Relaxed */ /* Very Relaxed */
@veryRelaxedVerticalPadding: (4 * @itemVerticalPadding);
@veryRelaxedItemVerticalPadding: @relative12px;
@veryRelaxedChildItemVerticalPadding: @relative4px;
@veryRelaxedHeaderMargin: 0.5rem; @veryRelaxedHeaderMargin: 0.5rem;
@veryRelaxedHorizontalPadding: 1.5rem; @veryRelaxedHorizontalPadding: 1.5rem;
Loading…
Cancel
Save