diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less index a86ee2e1f..a59f152f9 100755 --- a/src/definitions/elements/list.less +++ b/src/definitions/elements/list.less @@ -58,7 +58,7 @@ ol.ui.list li, list-style-type: @listStyleType; list-style-position: @listStylePosition; - padding: @itemVerticalPadding @itemHorizontalPadding; + padding: @itemPadding; line-height: @itemLineHeight; } @@ -95,6 +95,15 @@ ol.ui.list ol, padding: @childListPadding; } +/* Child Item */ +ul.ui.list ul li, +ol.ui.list ol li, +.ui.list .list > .item { + padding: @childItemPadding; + line-height: @childItemLineHeight; +} + + /* Icon */ .ui.list .list > .item > i.icon, .ui.list > .item > i.icon { @@ -157,7 +166,30 @@ ol.ui.list ol, 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 > a.item { cursor: pointer; @@ -174,29 +206,15 @@ ol.ui.list ol, 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; - 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 */ @@ -359,7 +377,6 @@ ol.ui.list ol, /* Linking Content */ .ui.inverted.list .item a:not(.ui) { - cursor: pointer; color: @invertedItemLinkColor !important; } .ui.inverted.list .item a:not(.ui):hover { @@ -665,7 +682,6 @@ ol.ui.horizontal.list li:before, margin-left: 0em; padding-left: 0em; } -.ui.divided.bulleted.list .list > .item:not(.horizontal), .ui.divided.bulleted.list > .item:not(.horizontal) { padding-left: @bulletDistance; } @@ -812,8 +828,12 @@ ol.ui.horizontal.list li:before, --------------------*/ .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 { padding-left: @relaxedHorizontalPadding; @@ -822,8 +842,12 @@ ol.ui.horizontal.list li:before, /* Very Relaxed */ .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 > .item { diff --git a/src/themes/default/elements/list.variables b/src/themes/default/elements/list.variables index 141a7efaa..fe1e827b4 100644 --- a/src/themes/default/elements/list.variables +++ b/src/themes/default/elements/list.variables @@ -13,14 +13,21 @@ @verticalPadding: 0em; @horizontalPadding: 0em; +/* List Item */ +@itemVerticalPadding: @relative3px; +@itemHorizontalPadding: 0em; +@itemPadding: @itemVerticalPadding @itemHorizontalPadding; +@itemLineHeight: @relativeLarge; + /* Sub List */ @childListPadding: 0.75em 0em 0.25em 0.5em; @childListIndent: 1em; -/* List Item */ -@itemVerticalPadding: @relative4px; -@itemHorizontalPadding: 0em; -@itemLineHeight: @relativeLarge; +/* Sub List Item */ +@childItemVerticalPadding: @relative2px; +@childItemHorizontalPadding: 0em; +@childItemPadding: @childItemVerticalPadding @childItemHorizontalPadding; +@childItemLineHeight: inherit; /*------------------- Elements @@ -43,27 +50,27 @@ @contentLineHeightOffset: (@contentLineHeight - 1em) / 2; @contentVerticalAlign: top; +/* Header */ +@itemHeaderFontFamily: @headerFont; +@itemHeaderFontWeight: bold; +@itemHeaderColor: @textColor; + +/* Description */ +@itemDescriptionColor: rgba(0, 0, 0, 0.7); + /* Link */ -@itemLinkColor: @textColor; +@itemLinkColor: @linkColor; @itemLinkHoverColor: @linkHoverColor; -/* Link Inside */ -@itemSubLinkColor: @linkColor; -@itemSubLinkHoverColor: @linkHoverColor; +/* Header Link */ +@itemHeaderLinkColor: @itemLinkColor; +@itemHeaderLinkHoverColor: @itemLinkHoverColor; /* Linked Icon */ @itemLinkIconColor: @lightTextColor; @itemLinkIconHoverColor: @textColor; @invertedIconLinkColor: @invertedLightTextColor; -/* Header */ -@itemHeaderFontFamily: @headerFont; -@itemHeaderFontWeight: bold; -@itemHeaderColor: @textColor; - -/* Description */ -@itemDescriptionColor: rgba(0, 0, 0, 0.7); - /*------------------- States --------------------*/ @@ -160,7 +167,7 @@ /* Horizontal Bullets */ @horizontalBulletColor: @textColor; -@horizontalBulletSpacing: 1.5rem; +@horizontalBulletSpacing: @bulletDistance + 0.5em; /* Ordered List */ @orderedCountName: ordered; @@ -203,12 +210,14 @@ @horizontalCelledLineHeight: 0.6; /* Relaxed */ -@relaxedVerticalPadding: (2 * @itemVerticalPadding); +@relaxedItemVerticalPadding: @relative6px; +@relaxedChildItemVerticalPadding: @relative3px; @relaxedHeaderMargin: 0.25rem; @relaxedHorizontalPadding: 1rem; /* Very Relaxed */ -@veryRelaxedVerticalPadding: (4 * @itemVerticalPadding); +@veryRelaxedItemVerticalPadding: @relative12px; +@veryRelaxedChildItemVerticalPadding: @relative4px; @veryRelaxedHeaderMargin: 0.5rem; @veryRelaxedHorizontalPadding: 1.5rem;