diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less index a26b4507c..20d9bb432 100755 --- a/src/definitions/elements/list.less +++ b/src/definitions/elements/list.less @@ -51,7 +51,8 @@ ol.ui.list:last-child, /* List Item */ ul.ui.list li, ol.ui.list li, -.ui.list .item { +.ui.list > .item, +.ui.list .list > .item { display: list-item; table-layout: fixed; list-style-type: @listStyleType; @@ -63,7 +64,8 @@ ol.ui.list li, ul.ui.list > li:first-child:after, ol.ui.list > li:first-child:after, -.ui.list .item:after { +.ui.list > .list > .item, +.ui.list > .item:after { content: ''; display: block; height: 0; @@ -73,12 +75,14 @@ ol.ui.list > li:first-child:after, ul.ui.list li:first-child, ol.ui.list li:first-child, -.ui.list .item:first-child { +.ui.list .list > .item:first-child, +.ui.list > .item:first-child { padding-top: 0em; } ul.ui.list li:last-child, ol.ui.list li:last-child, -.ui.list .item:last-child { +.ui.list .list > .item:last-child, +.ui.list > .item:last-child { padding-bottom: 0em; } @@ -92,7 +96,8 @@ ol.ui.list ol, } /* Icon */ -.ui.list .item > .icon { +.ui.list .list > .item > .icon, +.ui.list > .item > .icon { display: table-cell; margin: 0em; padding-top: @iconOffset; @@ -100,90 +105,124 @@ ol.ui.list ol, vertical-align: @iconContentVerticalAlign; transition: @iconTransition; } -.ui.list .item > [class*="top aligned"].icon { +.ui.list .list > .item [class*="top aligned"].icon, +.ui.list > .item > [class*="top aligned"].icon { vertical-align: top; } -.ui.list .item > .icon:only-child { +.ui.list .list > .item > .icon:only-child, +.ui.list > .item > .icon:only-child { display: inline-block; vertical-align: @iconVerticalAlign; } /* Image */ -.ui.list .item > .image { +.ui.list .list > .item > .image, +.ui.list > .item > .image { display: table-cell; background-color: transparent; margin: 0em; padding-right: @imageDistance; vertical-align: @imageAlign; } -.ui.list .item > [class*="top aligned"].image { +.ui.list .list > .item > [class*="top aligned"].image, +.ui.list > .item > [class*="top aligned"].image { vertical-align: top; } -.ui.list .item > .image img { +.ui.list .list > .item > .image img, +.ui.list > .item > .image img { vertical-align: @imageAlign; } -.ui.list .item > img.image, -.ui.list .item > .image:only-child { + +.ui.list .list > .item > img.image, +.ui.list .list > .item > .image:only-child, +.ui.list > .item > img.image, +.ui.list > .item > .image:only-child { display: inline-block; padding-right: 0em; } /* Content */ -.ui.list .item > .content { +.ui.list .list > .item > .content, +.ui.list > .item > .content { line-height: @contentLineHeight; } -.ui.list .item > .image + .content, -.ui.list .item > .icon + .content { +.ui.list .list > .item > .image + .content, +.ui.list .list > .item > .icon + .content +.ui.list > .item > .image + .content, +.ui.list > .item > .icon + .content { display: table-cell; padding-left: @contentDistance; vertical-align: @contentVerticalAlign; } -.ui.list .item > .image + .content, -.ui.list .item > .icon + .content { +.ui.list .list > .item > .image + .content, +.ui.list .list > .item > .icon + .content, +.ui.list > .item > .image + .content, +.ui.list > .item > .icon + .content { display: table-cell; padding-left: @contentDistance; vertical-align: @contentVerticalAlign; } -.ui.list .item > img.image + .content { +.ui.list .list > .item > img.image + .content, +.ui.list > .item > img.image + .content { display: inline-block; } -.ui.list .item > .content > .list { +.ui.list .list > .item > .content > .list, +.ui.list > .item > .content > .list { margin-left: 0em; padding-left: 0em; } -/* Link */ -.ui.list a { +/* Item Link */ +.ui.list .list > a.item, +.ui.list > a.item { cursor: pointer; - color: @itemLinkColor; + color: @itemLinkColor !important; } -.ui.list a:hover { - color: @itemLinkHoverColor; +.ui.list .list > a.item:hover, +.ui.list > a.item:hover { + color: @itemLinkHoverColor !important; } -.ui.list a .icon { + +/* Linked Item Icons */ +.ui.list .list > a.item .icon, +.ui.list > a.item .icon { color: @itemLinkIconColor; } +/* Linking Content */ +.ui.list .item a { + cursor: pointer; + color: @itemLinkColor !important; +} +.ui.list .item a:hover { + color: @itemLinkHoverColor !important; +} + + /* Header */ -.ui.list .header { +.ui.list .list > .item .header, +.ui.list > .item .header { display: block; margin: 0em; font-family: @itemHeaderFontFamily; font-weight: @itemHeaderFontWeight; color: @itemHeaderColor; } -.ui.list .description { +.ui.list .list > .item .description, +.ui.list > .item .description { display: block; color: @itemDescriptionColor; } /* Floated Content */ -.ui.list .item > .left.floated { +.ui.list .list > .item > .left.floated +.ui.list > .item > .left.floated { float: left; margin-right: @floatMargin; } -.ui.list .item > .right.floated { +.ui.list .list > .item > .right.floated +.ui.list > .item > .right.floated { float: right; margin-left: @floatMargin; } @@ -192,7 +231,8 @@ ol.ui.list ol, Coupling *******************************/ -.ui.menu .ui.list .item:before { +.ui.menu .ui.list .list > .item:before, +.ui.menu .ui.list > .item:before { border: none; background: none; } @@ -232,12 +272,12 @@ ol.ui.list ol, } /* Horizontal List */ -.ui.horizontal.list .item > .icon { +.ui.horizontal.list > .item > .icon { margin: 0em; padding: 0em @horizontalIconDistance 0em 0em; } -.ui.horizontal.list .item > .icon, -.ui.horizontal.list .item > .icon + .content { +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list > .item > .icon + .content { float: none; display: inline-block; } @@ -251,11 +291,13 @@ ol.ui.list ol, Disabled --------------------*/ -.ui.list .disabled.item { +.ui.list .list > .disabled.item, +.ui.list > .disabled.item { pointer-events: none; color: @disabledColor !important; } -.ui.inverted.list .disabled.item { +.ui.inverted.list .list > .disabled.item, +.ui.inverted.list > .disabled.item { color: @invertedDisabledColor !important; } @@ -263,7 +305,8 @@ ol.ui.list ol, Hover --------------------*/ -.ui.list a:hover .icon { +.ui.list .list > a.item:hover .icon, +.ui.list > a.item:hover .icon { color: @itemLinkIconHoverColor; } @@ -276,13 +319,16 @@ ol.ui.list ol, Inverted --------------------*/ -.ui.inverted.list a .icon { +.ui.inverted.list .list > a.item > .icon, +.ui.inverted.list > a.item > .icon { color: @invertedIconLinkColor; } -.ui.inverted.list .header { +.ui.inverted.list .list > .item .header, +.ui.inverted.list > .item .header { color: @invertedHeaderColor; } -.ui.inverted.list .description { +.ui.inverted.list .list > .item .description, +.ui.inverted.list > .item .description { color: @invertedDescriptionColor; } @@ -332,7 +378,8 @@ ol.ui.list ol, Selection --------------------*/ -.ui.selection.list .item { +.ui.selection.list .list > .item, +.ui.selection.list > .item { cursor: pointer; background: @selectionListBackground; padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding; @@ -341,43 +388,53 @@ ol.ui.list ol, border-radius: @selectionListItemBorderRadius; transition: @selectionListTransition; } -.ui.selection.list .item:last-child { +.ui.selection.list .list > .item:last-child, +.ui.selection.list > .item:last-child { margin-bottom: 0em; } -.ui.selection.list .item:hover { +.ui.selection.list.list > .item:hover, +.ui.selection.list > .item:hover { background: @selectionListHoverBackground; color: @selectionListHoverColor; } -.ui.selection.list .item:active { +.ui.selection.list .list > .item:active, +.ui.selection.list > .item:active { background: @selectionListDownBackground; color: @selectionListDownColor; } -.ui.selection.list .item.active { +.ui.selection.list .list > .item.active, +.ui.selection.list > .item.active { background: @selectionListActiveBackground; color: @selectionListActiveColor; } /* Inverted */ -.ui.inverted.selection.list .item { +.ui.inverted.selection.list > .item, +.ui.inverted.selection.list > .item { background: @invertedSelectionListBackground; color: @invertedSelectionListColor; } -.ui.inverted.selection.list .item:hover { +.ui.inverted.selection.list > .item:hover, +.ui.inverted.selection.list > .item:hover { background: @invertedSelectionListHoverBackground; color: @invertedSelectionListHoverColor; } -.ui.inverted.selection.list .item:active { +.ui.inverted.selection.list > .item:active, +.ui.inverted.selection.list > .item:active { background: @invertedSelectionListDownBackground; color: @invertedSelectionListDownColor; } -.ui.inverted.selection.list .item.active { +.ui.inverted.selection.list > .item.active, +.ui.inverted.selection.list > .item.active { background: @invertedSelectionListActiveBackground; color: @invertedSelectionListActiveColor; } /* Celled / Divided Selection List */ -.ui.celled.selection.list .item, -.ui.divided.selection.list .item { +.ui.celled.selection.list .list > .item, +.ui.divided.selection.list .list > .item, +.ui.celled.selection.list > .item, +.ui.divided.selection.list > .item { border-radius: 0em; } @@ -385,13 +442,15 @@ ol.ui.list ol, Animated --------------------*/ -.ui.animated.list .item { +.ui.animated.list .list > .item, +.ui.animated.list > .item { transition: @animatedListTransition; } -.ui.animated.list:not(.horizontal) .item:hover { +.ui.animated.list:not(.horizontal) .list > .item:hover, +.ui.animated.list:not(.horizontal) > .item:hover { padding-left: @animatedListIndent; } -.ui.animated.list:not(.horizontal) .item:hover .item:hover { +.ui.animated.list:not(.horizontal) .item:hover .list > .item:hover { padding-left: @animatedListChildIndent; } @@ -399,13 +458,13 @@ ol.ui.list ol, /*------------------- Fitted --------------------*/ - -.ui.fitted.list:not(.selection) .item { +.ui.fitted.list:not(.selection) .list > .item, +.ui.fitted.list:not(.selection) > .item { padding-left: 0em; padding-right: 0em; } - -.ui.fitted.selection.list .item { +.ui.fitted.selection.list .list > .item, +.ui.fitted.selection.list > .item { margin-left: -@selectionListItemHorizontalPadding; margin-right: -@selectionListItemHorizontalPadding; } @@ -419,11 +478,13 @@ ul.ui.list, margin-left: @bulletDistance; } ul.ui.list li, -.ui.bulleted.list .item { +.ui.bulleted.list .list > .item, +.ui.bulleted.list > .item { position: relative; } ul.ui.list li:before, -.ui.bulleted.list .item:before { +.ui.bulleted.list .list > .item:before, +.ui.bulleted.list > .item:before { position: absolute; left: @bulletOffset; content: @bulletCharacter; @@ -443,19 +504,19 @@ ul.ui.horizontal.bulleted.list, margin-left: 0em; } ul.ui.horizontal.bulleted.list li, -.ui.horizontal.bulleted.list .item { +.ui.horizontal.bulleted.list > .item { margin-left: @horizontalBulletSpacing; } ul.ui.horizontal.bulleted.list li:before, -.ui.horizontal.bulleted.list .item:before { +.ui.horizontal.bulleted.list > .item:before { left: @horizontalBulletOffset; } ul.ui.horizontal.bulleted.list li:first-child, -.ui.horizontal.bulleted.list .item:first-child { +.ui.horizontal.bulleted.list > .item:first-child { margin-left: 0em; } ul.ui.horizontal.bulleted.list li:first-child::before, -.ui.horizontal.bulleted.list .item:first-child::before { +.ui.horizontal.bulleted.list > .item:first-child::before { display: none; } @@ -472,12 +533,14 @@ ol.ui.list ol { list-style-type: none; } ol.ui.list li, -.ui.ordered.list .item { +.ui.ordered.list .list > .item, +.ui.ordered.list > .item { list-style-type: none; position: relative; } ol.ui.list li:before, -.ui.ordered.list .item:before { +.ui.ordered.list .list > .item:before, +.ui.ordered.list > .item:before { position: absolute; left: -(@orderedCountDistance); counter-increment: @orderedCountName; @@ -495,7 +558,7 @@ ol.ui.list ol, margin-left: @orderedChildCountDistance; } ol.ui.list ol li:before, -.ui.ordered.list .list .item:before { +.ui.ordered.list .list > .item:before { left: @orderedChildCountOffset; } @@ -505,7 +568,8 @@ ol.ui.horizontal.list, margin-left: 0em; } ol.ui.horizontal.list li:before, -.ui.ordered.horizontal.list .item:before { +.ui.ordered.horizontal.list .list > .item:before, +.ui.ordered.horizontal.list > .item:before { position: static; margin: 0em @horizontalOrderedCountDistance 0em 0em; } @@ -515,21 +579,22 @@ ol.ui.horizontal.list li:before, Divided --------------------*/ -.ui.divided.list .item { +.ui.divided.list > .item { border-top: @dividedBorder; } -.ui.divided.list .list .item { +.ui.divided.list .list > .item { border-top: @dividedChildListBorder; } -.ui.divided.list .item .menu .item { +.ui.divided.list .item .list > .item { border-top: @dividedChildItemBorder; } -.ui.divided.list .item:first-child { +.ui.divided.list .list > .item:first-child, +.ui.divided.list > .item:first-child { border-top: none; } /* Sub Menu */ -.ui.divided.list:not(.horizontal) .list .item:first-child { +.ui.divided.list:not(.horizontal) .list > .item:first-child { border-top-width: @dividedBorderWidth; } @@ -539,10 +604,12 @@ ol.ui.horizontal.list li:before, margin-left: 0em; padding-left: 0em; } -.ui.divided.bulleted.list .item:not(.horizontal) { +.ui.divided.bulleted.list .list > .item:not(.horizontal), +.ui.divided.bulleted.list > .item:not(.horizontal) { padding-left: @bulletDistance; } -.ui.divided.bulleted.list .item:before { +.ui.divided.bulleted.list .list > .item:before, +.ui.divided.bulleted.list > .item:before { left: 0em; } @@ -550,10 +617,12 @@ ol.ui.horizontal.list li:before, .ui.divided.ordered.list { margin-left: 0em; } -.ui.divided.ordered.list .item { +.ui.divided.ordered.list .list > .item, +.ui.divided.ordered.list > .item { padding-left: @orderedCountDistance; } -.ui.divided.ordered.list .item:before { +.ui.divided.ordered.list .list > .item:before, +.ui.divided.ordered.list > .item:before { left: 0em; } .ui.divided.ordered.list .item .list { @@ -561,12 +630,13 @@ ol.ui.horizontal.list li:before, margin-right: 0em; padding-bottom: @itemVerticalPadding; } -.ui.divided.ordered.list .item .list .item { +.ui.divided.ordered.list .item .list > .item { padding-left: @orderedChildCountDistance; } /* Divided Selection */ -.ui.divided.selection.list .item { +.ui.divided.selection.list .list > .item, +.ui.divided.selection.list > .item { margin: 0em; border-radius: 0em; } @@ -589,7 +659,7 @@ ol.ui.horizontal.list li:before, /* Inverted */ .ui.divided.inverted.list > .item, .ui.divided.inverted.list > .list, -.ui.divided.inverted.horizontal.list .item { +.ui.divided.inverted.horizontal.list > .item { border-color: @dividedInvertedBorderColor; } @@ -616,10 +686,10 @@ ol.ui.horizontal.list li:before, } /* Sub Menu */ -.ui.celled.list .item .list .item { +.ui.celled.list .item .list > .item { border-width: 0px; } -.ui.celled.list .list .item:first-child { +.ui.celled.list .list > .item:first-child { border-top-width: 0px; } @@ -627,10 +697,12 @@ ol.ui.horizontal.list li:before, .ui.celled.bulleted.list { margin-left: 0em; } -.ui.celled.bulleted.list .item { +.ui.celled.bulleted.list .list > .item, +.ui.celled.bulleted.list > .item { padding-left: (@bulletDistance); } -.ui.celled.bulleted.list .item:before { +.ui.celled.bulleted.list .list > .item:before, +.ui.celled.bulleted.list > .item:before { left: 0em; } .ui.celled.bulleted.list .item .list { @@ -643,10 +715,12 @@ ol.ui.horizontal.list li:before, .ui.celled.ordered.list { margin-left: 0em; } -.ui.celled.ordered.list .item { +.ui.celled.ordered.list .list > .item, +.ui.celled.ordered.list > .item { padding-left: @orderedCountDistance; } -.ui.celled.ordered.list .item:before { +.ui.celled.ordered.list .list > .item:before, +.ui.celled.ordered.list > .item:before { left: 0em; } .ui.celled.ordered.list .item .list { @@ -654,7 +728,7 @@ ol.ui.horizontal.list li:before, margin-right: 0em; padding-bottom: @itemVerticalPadding; } -.ui.celled.ordered.list .item .list .item { +.ui.celled.ordered.list .list > .item { padding-left: @orderedChildCountDistance; } @@ -662,7 +736,8 @@ ol.ui.horizontal.list li:before, .ui.horizontal.celled.list { margin-left: 0em; } -.ui.horizontal.celled.list .item { +.ui.horizontal.celled.list .list > .item, +.ui.horizontal.celled.list > .item { border-top: none; border-left: @celledBorder; margin: 0em; @@ -671,7 +746,8 @@ ol.ui.horizontal.list li:before, line-height: @horizontalCelledLineHeight; } -.ui.horizontal.celled.list .item:last-child { +.ui.horizontal.celled.list .list > .item:last-child, +.ui.horizontal.celled.list > .item:last-child { border-bottom: none; border-right: @celledBorder; } @@ -681,7 +757,8 @@ ol.ui.horizontal.list li:before, .ui.celled.inverted.list > .list { border-color: @celledInvertedBorder; } -.ui.celled.inverted.horizontal.list .item { +.ui.celled.inverted.horizontal.list .list > .item, +.ui.celled.inverted.horizontal.list > .item { border-color: @celledInvertedBorder; } @@ -689,25 +766,32 @@ ol.ui.horizontal.list li:before, Relaxed --------------------*/ -.ui.relaxed.list:not(.horizontal) .item { +.ui.relaxed.list:not(.horizontal) .list > .item, +.ui.relaxed.list:not(.horizontal) > .item { padding-top: @relaxedVerticalPadding; padding-bottom: @relaxedVerticalPadding; } -.ui.relaxed.list .header { +.ui.relaxed.list .list > .item .header, +.ui.relaxed.list > .item .header { /*margin-bottom: @relaxedHeaderMargin;*/ } -.ui.horizontal.relaxed.list .item { +.ui.horizontal.relaxed.list > .item { padding-left: @relaxedHorizontalPadding; padding-right: @relaxedHorizontalPadding; } -.ui[class*="very relaxed"].list:not(.horizontal) .item { + +/* Very Relaxed */ +.ui[class*="very relaxed"].list:not(.horizontal) .list > .item, +.ui[class*="very relaxed"].list:not(.horizontal) > .item { padding-top: @veryRelaxedVerticalPadding; padding-bottom: @veryRelaxedVerticalPadding; } -.ui[class*="very relaxed"].list .header { +.ui[class*="very relaxed"].list .list > .item .header, +.ui[class*="very relaxed"].list > .item .header { /*margin-bottom: @veryRelaxedHeaderMargin;*/ } -.ui.horizontal[class*="very relaxed"].list .item { +.ui.horizontal[class*="very relaxed"].list .list > .item, +.ui.horizontal[class*="very relaxed"].list > .item { padding-left: @veryRelaxedHorizontalPadding; padding-right: @veryRelaxedHorizontalPadding; } @@ -716,28 +800,36 @@ ol.ui.horizontal.list li:before, Sizes --------------------*/ -.ui.mini.list .item { +.ui.mini.list .list > .item, +.ui.mini.list > .item { font-size: @mini; } -.ui.tiny.list .item { +.ui.tiny.list .list > .item, +.ui.tiny.list > .item { font-size: @tiny; } -.ui.small.list .item { +.ui.small.list .list > .item, +.ui.small.list > .item { font-size: @small; } -.ui.list .item { +.ui.list .list > .item, +.ui.list > .item { font-size: @medium; } -.ui.large.list .item { +.ui.large.list .list > .item, +.ui.large.list > .item { font-size: @large; } -.ui.big.list .item { +.ui.big.list .list > .item, +.ui.big.list > .item { font-size: @big; } -.ui.huge.list .item { +.ui.huge.list .list > .item, +.ui.huge.list > .item { font-size: @huge; } -.ui.massive.list .item { +.ui.massive.list .list > .item, +.ui.massive.list > .item { font-size: @massive; } diff --git a/src/themes/default/elements/list.variables b/src/themes/default/elements/list.variables index 793558ad7..f0ca247a4 100644 --- a/src/themes/default/elements/list.variables +++ b/src/themes/default/elements/list.variables @@ -23,7 +23,6 @@ @itemHorizontalPadding: 0em; @itemLineHeight: 1.2; - /*------------------- Elements --------------------*/