Fixes #1019 UI list does not allow for some nested content types

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;
 }
 

src/themes/default/elements/list.variables

@@ -23,7 +23,6 @@
 @itemHorizontalPadding: 0em;
 @itemLineHeight: 1.2;
 
-
 /*-------------------
       Elements
 --------------------*/