Browse Source

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

pull/1191/head
jlukic 10 years ago
parent
commit
fa6ccc38ef
2 changed files with 195 additions and 104 deletions
  1. 298
      src/definitions/elements/list.less
  2. 1
      src/themes/default/elements/list.variables

298
src/definitions/elements/list.less

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

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

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

Loading…
Cancel
Save