/*
* # Semantic - List
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘element’; @element : ‘list’;

@import ‘../../theme.config’;

/*******************************

List

*******************************/

ul.ui.list, ol.ui.list, .ui.list {

list-style-type: @listStyleType;
margin: @margin;
padding: @verticalPadding @horizontalPadding;

}

ul.ui.list:first-child, ol.ui.list:first-child, .ui.list:first-child {

margin-top: 0em;
padding-top: 0em;

}

ul.ui.list:last-child, ol.ui.list:last-child, .ui.list:last-child {

margin-bottom: 0em;
padding-bottom: 0em;

}

/*******************************

Content

*******************************/

/* List Item */ ul.ui.list li, ol.ui.list li, .ui.list > .item, .ui.list .list > .item {

display: list-item;
table-layout: fixed;
list-style-type: @listStyleType;
list-style-position: @listStylePosition;

padding: @itemVerticalPadding @itemHorizontalPadding;
line-height: @itemLineHeight;

}

ul.ui.list > li:first-child:after, ol.ui.list > li:first-child:after, .ui.list > .list > .item, .ui.list > .item:after {

content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;

}

ul.ui.list li:first-child, ol.ui.list li: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 .list > .item:last-child, .ui.list > .item:last-child {

padding-bottom: 0em;

}

/* Child List */ ul.ui.list ul, ol.ui.list ol, .ui.list .list {

clear: both;
margin: 0em;
padding: @childListPadding;

}

/* Icon */ .ui.list .list > .item > i.icon, .ui.list > .item > i.icon {

display: table-cell;
margin: 0em;
padding-top: @iconOffset;
padding-right: @iconDistance;
vertical-align: @iconContentVerticalAlign;
transition: @iconTransition;

} .ui.list .list > .item [class*=“top aligned”]i.icon, .ui.list > .item > [class*=“top aligned”]i.icon {

vertical-align: top;

} .ui.list .list > .item > i.icon:only-child, .ui.list > .item > i.icon:only-child {

display: inline-block;
vertical-align: @iconVerticalAlign;

}

/* 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 .list > .item > [class*=“top aligned”].image, .ui.list > .item > [class*=“top aligned”].image {

vertical-align: top;

} .ui.list .list > .item > .image img, .ui.list > .item > .image img {

vertical-align: @imageAlign;

}

.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 .list > .item > .content, .ui.list > .item > .content {

line-height: @contentLineHeight;

} .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 .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 .list > .item > img.image + .content, .ui.list > .item > img.image + .content {

display: inline-block;

} .ui.list .list > .item [class*=“top aligned”].content, .ui.list > .item > [class*=“top aligned”].content {

vertical-align: top;

} .ui.list .list > .item > .content > .list, .ui.list > .item > .content > .list {

margin-left: 0em;
padding-left: 0em;

}

/* Item Link */ .ui.list .list > a.item, .ui.list > a.item {

cursor: pointer;
color: @itemLinkColor;

} .ui.list .list > a.item:hover, .ui.list > a.item:hover {

color: @itemLinkHoverColor;

}

/* Linked Item Icons */ .ui.list .list > a.item i.icon, .ui.list > a.item i.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 .list > .item .header, .ui.list > .item .header {

display: block;
margin: 0em;
font-family: @itemHeaderFontFamily;
font-weight: @itemHeaderFontWeight;
color: @itemHeaderColor;

} .ui.list .list > .item .description, .ui.list > .item .description {

display: block;
color: @itemDescriptionColor;

}

/* Floated Content */ .ui.list .list > .item [class*=“left floated”], .ui.list > .item [class*=“left floated”] {

float: left;
margin: @leftFloatMargin;

} .ui.list .list > .item [class*=“right floated”], .ui.list > .item [class*=“right floated”] {

float: right;
margin: @rightFloatMargin;

}

/*******************************

Coupling

*******************************/

.ui.menu .ui.list > .item, .ui.menu .ui.list .list > .item {

display: list-item;
table-layout: fixed;
list-style-type: @listStyleType;
list-style-position: @listStylePosition;

padding: @itemVerticalPadding @itemHorizontalPadding;
line-height: @itemLineHeight;

} .ui.menu .ui.list .list > .item:before, .ui.menu .ui.list > .item:before {

border: none;
background: none;

} .ui.menu .ui.list .list > .item:first-child, .ui.menu .ui.list > .item:first-child {

padding-top: 0em;

} .ui.menu .ui.list .list > .item:last-child, .ui.menu .ui.list > .item:last-child {

padding-bottom: 0em;

}

/*******************************

Types

*******************************/

/*——————-

Horizontal

——————–*/

.ui.horizontal.list {

display: inline-block;
font-size: 0em;

} .ui.horizontal.list > .item {

display: inline-block;
margin-left: @horizontalSpacing;
font-size: 1rem;

} .ui.horizontal.list > .item:first-child {

margin-left: 0em !important;
padding-left: 0em !important;

} .ui.horizontal.list .list {

padding-left: 0em;
padding-bottom: 0em;

}

/* Padding on all elements */ .ui.horizontal.list > .item:first-child, .ui.horizontal.list > .item:last-child {

padding-top: @itemVerticalPadding;
padding-bottom: @itemVerticalPadding;

}

/* Horizontal List */ .ui.horizontal.list > .item > i.icon {

margin: 0em;
padding: 0em @horizontalIconDistance 0em 0em;

} .ui.horizontal.list > .item > .icon, .ui.horizontal.list > .item > .icon + .content {

float: none;
display: inline-block;

}

/*******************************

States

*******************************/

/*——————-

Disabled

——————–*/

.ui.list .list > .disabled.item, .ui.list > .disabled.item {

pointer-events: none;
color: @disabledColor !important;

} .ui.inverted.list .list > .disabled.item, .ui.inverted.list > .disabled.item {

color: @invertedDisabledColor !important;

}

/*——————-

Hover

——————–*/

.ui.list .list > a.item:hover .icon, .ui.list > a.item:hover .icon {

color: @itemLinkIconHoverColor;

}

/*******************************

Variations

*******************************/

/*——————-

Inverted

——————–*/

.ui.inverted.list .list > a.item > .icon, .ui.inverted.list > a.item > .icon {

color: @invertedIconLinkColor;

} .ui.inverted.list .list > .item .header, .ui.inverted.list > .item .header {

color: @invertedHeaderColor;

} .ui.inverted.list .list > .item .description, .ui.inverted.list > .item .description {

color: @invertedDescriptionColor;

}

/* Item Link */ .ui.inverted.list .list > a.item, .ui.inverted.list > a.item {

cursor: pointer;
color: @invertedItemLinkColor;

} .ui.inverted.list .list > a.item:hover, .ui.inverted.list > a.item:hover {

color: @invertedItemLinkHoverColor;

}

/* Linking Content */ .ui.inverted.list .item a {

cursor: pointer;
color: @invertedItemLinkColor !important;

} .ui.inverted.list .item a:hover {

color: @invertedItemLinkHoverColor !important;

}

/*——————-

Link

——————–*/

.ui.link.list .item, .ui.link.list a.item, .ui.link.list .item a {

color: @linkListItemColor;
transition: @linkListTransition;

} .ui.link.list a.item:hover, .ui.link.list .item a:hover {

color: @linkListItemHoverColor;

} .ui.link.list a.item:active, .ui.link.list .item a:active {

color: @linkListItemDownColor;

} .ui.link.list .active.item, .ui.link.list .active.item a {

color: @linkListItemActiveColor;

}

/* Inverted */ .ui.inverted.link.list .item, .ui.inverted.link.list a.item, .ui.inverted.link.list .item a {

color: @invertedLinkListItemColor;

} .ui.inverted.link.list a.item:hover, .ui.inverted.link.list .item a:hover {

color: @invertedLinkListItemHoverColor;

} .ui.inverted.link.list a.item:active, .ui.inverted.link.list .item a:active {

color: @invertedLinkListItemDownColor;

} .ui.inverted.link.list a.active.item, .ui.inverted.link.list .active.item a {

color: @invertedLinkListItemActiveColor;

}

/*——————-

Selection

——————–*/

.ui.selection.list .list > .item, .ui.selection.list > .item {

cursor: pointer;
background: @selectionListBackground;
padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
margin: @selectionListItemMargin;
color: @selectionListColor;
border-radius: @selectionListItemBorderRadius;
transition: @selectionListTransition;

} .ui.selection.list .list > .item:last-child, .ui.selection.list > .item:last-child {

margin-bottom: 0em;

} .ui.selection.list.list > .item:hover, .ui.selection.list > .item:hover {

background: @selectionListHoverBackground;
color: @selectionListHoverColor;

} .ui.selection.list .list > .item:active, .ui.selection.list > .item:active {

background: @selectionListDownBackground;
color: @selectionListDownColor;

} .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 {

background: @invertedSelectionListBackground;
color: @invertedSelectionListColor;

} .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 {

background: @invertedSelectionListDownBackground;
color: @invertedSelectionListDownColor;

} .ui.inverted.selection.list > .item.active, .ui.inverted.selection.list > .item.active {

background: @invertedSelectionListActiveBackground;
color: @invertedSelectionListActiveColor;

}

/* Celled / Divided Selection List */ .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;

}

/*——————-

Animated

——————–*/

.ui.animated.list > .item {

transition: @animatedListTransition;

} .ui.animated.list:not(.horizontal) > .item:hover {

padding-left: @animatedListIndent;

}

/*——————-

Fitted

——————–*/ .ui.fitted.list:not(.selection) .list > .item, .ui.fitted.list:not(.selection) > .item {

padding-left: 0em;
padding-right: 0em;

} .ui.fitted.selection.list .list > .item, .ui.fitted.selection.list > .item {

margin-left: -@selectionListItemHorizontalPadding;
margin-right: -@selectionListItemHorizontalPadding;

}

/*——————-

Bulleted

——————–*/

ul.ui.list, .ui.bulleted.list {

margin-left: @bulletDistance;

} ul.ui.list li, .ui.bulleted.list .list > .item, .ui.bulleted.list > .item {

position: relative;

} ul.ui.list li:before, .ui.bulleted.list .list > .item:before, .ui.bulleted.list > .item:before {

position: absolute;
top: auto;
left: auto;
margin-left: @bulletOffset;
content: @bulletCharacter;
opacity: @bulletOpacity;
color: @bulletColor;
vertical-align: @bulletVerticalAlign;

}

ul.ui.list ul, .ui.bulleted.list .list {

padding-left: @bulletChildDistance;

}

/* Horizontal Bulleted */ ul.ui.horizontal.bulleted.list, .ui.horizontal.bulleted.list {

margin-left: 0em;

} ul.ui.horizontal.bulleted.list li, .ui.horizontal.bulleted.list > .item {

margin-left: @horizontalBulletSpacing;

} ul.ui.horizontal.bulleted.list li: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 {

display: none;

}

/*——————-

Ordered

——————–*/

ol.ui.list, .ui.ordered.list, .ui.ordered.list .list, ol.ui.list ol {

counter-reset: ordered;
margin-left: @orderedCountDistance;
list-style-type: none;

} ol.ui.list li, .ui.ordered.list .list > .item, .ui.ordered.list > .item {

list-style-type: none;
position: relative;

} ol.ui.list li:before, .ui.ordered.list .list > .item:before, .ui.ordered.list > .item:before {

position: absolute;
top: auto;
left: auto;
margin-left: -(@orderedCountDistance);
counter-increment: @orderedCountName;
content: @orderedCountContent;
text-align: @orderedCountTextAlign;
color: @orderedCountColor;
vertical-align: @orderedCountVerticalAlign;
opacity: @orderedCountOpacity;

}

/* Child Lists */ ol.ui.list ol, .ui.ordered.list .list {

margin-left: @orderedChildCountDistance;

} ol.ui.list ol li:before, .ui.ordered.list .list > .item:before {

margin-left: @orderedChildCountOffset;

}

/* Horizontal Ordered */ ol.ui.horizontal.list, .ui.ordered.horizontal.list {

margin-left: 0em;

} ol.ui.horizontal.list li:before, .ui.ordered.horizontal.list .list > .item:before, .ui.ordered.horizontal.list > .item:before {

position: static;
margin: 0em @horizontalOrderedCountDistance 0em 0em;

}

/*——————-

Divided

——————–*/

.ui.divided.list > .item {

border-top: @dividedBorder;

} .ui.divided.list .list > .item {

border-top: @dividedChildListBorder;

} .ui.divided.list .item .list > .item {

border-top: @dividedChildItemBorder;

} .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 {

border-top-width: @dividedBorderWidth;

}

/* Divided bulleted */ .ui.divided.bulleted.list:not(.horizontal), .ui.divided.bulleted.list .list {

margin-left: 0em;
padding-left: 0em;

} .ui.divided.bulleted.list .list > .item:not(.horizontal), .ui.divided.bulleted.list > .item:not(.horizontal) {

padding-left: @bulletDistance;

}

/* Divided Ordered */ .ui.divided.ordered.list {

margin-left: 0em;

} .ui.divided.ordered.list .list > .item, .ui.divided.ordered.list > .item {

padding-left: @orderedCountDistance;

} .ui.divided.ordered.list .item .list {

margin-left: 0em;
margin-right: 0em;
padding-bottom: @itemVerticalPadding;

} .ui.divided.ordered.list .item .list > .item {

padding-left: @orderedChildCountDistance;

}

/* Divided Selection */ .ui.divided.selection.list .list > .item, .ui.divided.selection.list > .item {

margin: 0em;
border-radius: 0em;

}

/* Divided horizontal */ .ui.divided.horizontal.list {

margin-left: 0em;

} .ui.divided.horizontal.list > .item {

border-top: none;
border-left: @dividedBorder;
margin: 0em;
padding-left: @horizontalDividedSpacing;
padding-right: @horizontalDividedSpacing;
line-height: @horizontalDividedLineHeight;

} .ui.horizontal.divided.list > .item:first-child {

border-left: none;

} /* Inverted */ .ui.divided.inverted.list > .item, .ui.divided.inverted.list > .list, .ui.divided.inverted.horizontal.list > .item {

border-color: @dividedInvertedBorderColor;

}

/*——————-

Celled

——————–*/

.ui.celled.list > .item, .ui.celled.list > .list {

border-top: @celledBorder;
padding-left: @celledHorizontalPadding;
padding-right: @celledHorizontalPadding;

} .ui.celled.list > .item:last-child {

border-bottom: @celledBorder;

}

/* Padding on all elements */ .ui.celled.list > .item:first-child, .ui.celled.list > .item:last-child {

padding-top: @itemVerticalPadding;
padding-bottom: @itemVerticalPadding;

}

/* Sub Menu */ .ui.celled.list .item .list > .item {

border-width: 0px;

} .ui.celled.list .list > .item:first-child {

border-top-width: 0px;

}

/* Celled Bulleted */ .ui.celled.bulleted.list {

margin-left: 0em;

} .ui.celled.bulleted.list .list > .item, .ui.celled.bulleted.list > .item {

padding-left: (@bulletDistance);

} .ui.celled.bulleted.list .item .list {

margin-left: -(@bulletDistance);
margin-right: -(@bulletDistance);
padding-bottom: @itemVerticalPadding;

}

/* Celled Ordered */ .ui.celled.ordered.list {

margin-left: 0em;

} .ui.celled.ordered.list .list > .item, .ui.celled.ordered.list > .item {

padding-left: @orderedCountDistance;

} .ui.celled.ordered.list .item .list {

margin-left: 0em;
margin-right: 0em;
padding-bottom: @itemVerticalPadding;

} .ui.celled.ordered.list .list > .item {

padding-left: @orderedChildCountDistance;

}

/* Celled Horizontal */ .ui.horizontal.celled.list {

margin-left: 0em;

} .ui.horizontal.celled.list .list > .item, .ui.horizontal.celled.list > .item {

border-top: none;
border-left: @celledBorder;
margin: 0em;
padding-left: @horizontalCelledSpacing;
padding-right: @horizontalCelledSpacing;

line-height: @horizontalCelledLineHeight;

} .ui.horizontal.celled.list .list > .item:last-child, .ui.horizontal.celled.list > .item:last-child {

border-bottom: none;
border-right: @celledBorder;

}

/* Inverted */ .ui.celled.inverted.list > .item, .ui.celled.inverted.list > .list {

border-color: @celledInvertedBorder;

} .ui.celled.inverted.horizontal.list .list > .item, .ui.celled.inverted.horizontal.list > .item {

border-color: @celledInvertedBorder;

}

/*——————-

Relaxed

——————–*/

.ui.relaxed.list:not(.horizontal) .list > .item, .ui.relaxed.list:not(.horizontal) > .item {

padding-top: @relaxedVerticalPadding;
padding-bottom: @relaxedVerticalPadding;

} .ui.relaxed.list .list > .item .header, .ui.relaxed.list > .item .header {

/*margin-bottom: @relaxedHeaderMargin;*/

} .ui.horizontal.relaxed.list > .item {

padding-left: @relaxedHorizontalPadding;
padding-right: @relaxedHorizontalPadding;

}

/* 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 .list > .item .header, .ui[class*=“very relaxed”].list > .item .header {

/*margin-bottom: @veryRelaxedHeaderMargin;*/

} .ui.horizontal[class*=“very relaxed”].list .list > .item, .ui.horizontal[class*=“very relaxed”].list > .item {

padding-left: @veryRelaxedHorizontalPadding;
padding-right: @veryRelaxedHorizontalPadding;

}

/*——————-

Sizes

——————–*/

.ui.mini.list .list > .item, .ui.mini.list > .item {

font-size: @relativeMini;

} .ui.tiny.list .list > .item, .ui.tiny.list > .item {

font-size: @relativeTiny;

} .ui.small.list .list > .item, .ui.small.list > .item {

font-size: @relativeSmall;

} .ui.list .list > .item, .ui.list > .item {

font-size: @relativeMedium;

} .ui.large.list .list > .item, .ui.large.list > .item {

font-size: @relativeLarge;

} .ui.big.list .list > .item, .ui.big.list > .item {

font-size: @relativeBig;

} .ui.huge.list .list > .item, .ui.huge.list > .item {

font-size: @relativeHuge;

} .ui.massive.list .list > .item, .ui.massive.list > .item {

font-size: @relativeMassive;

}

.ui.mini.horizontal.list .list > .item, .ui.mini.horizontal.list > .item {

font-size: @mini;

} .ui.tiny.horizontal.list .list > .item, .ui.tiny.horizontal.list > .item {

font-size: @tiny;

} .ui.small.horizontal.list .list > .item, .ui.small.horizontal.list > .item {

font-size: @small;

} .ui.horizontal.list .list > .item, .ui.horizontal.list > .item {

font-size: @medium;

} .ui.large.horizontal.list .list > .item, .ui.large.horizontal.list > .item {

font-size: @large;

} .ui.big.horizontal.list .list > .item, .ui.big.horizontal.list > .item {

font-size: @big;

} .ui.huge.horizontal.list .list > .item, .ui.huge.horizontal.list > .item {

font-size: @huge;

} .ui.massive.horizontal.list .list > .item, .ui.massive.horizontal.list > .item {

font-size: @massive;

}

.loadUIOverrides();