|
|
/* * # Semantic List - Flat * http://github.com/jlukic/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * * Released: April 26 2013 */
/******************************* List*******************************/
ul.ui.list,ol.ui.list,.ui.list { list-style-type: none; margin: 1em 0em; padding: 0em;}ul.ui.list ul,ol.ui.list ol,.ui.list .list { margin: 0em; padding: 0.5em 1em 0.5em 0em;}
ul.ui.list:first-child,ol.ui.list:first-child,.ui.list:first-child { margin-top: 0em;}
ul.ui.list:last-child,ol.ui.list:last-child,.ui.list:last-child { margin-bottom: 0em;}
/******************************* Content*******************************/
/* List Item */ul.ui.list li,ol.ui.list li,.ui.list .item { display: list-item; list-style-type: none; list-style-position: inside;
padding: 0.3em 0em; line-height: 1.2;}
.ui.list .item:after { content: ''; display: block; height: 0; clear: both; visibility: hidden;}
/* Sub-List */.ui.list .list { clear: both;}
/* Icon */.ui.list .item > .icon { display: block; float: right; margin: 0em 0em 0em 1em; padding: 0.1em 0em 0em 0em;}.ui.list .item > .icon:only-child { display: inline-block;}.ui.horizontal.list .item > .icon { margin: 0em; padding: 0em 0em 0em 0.25em;}.ui.horizontal.list .item > .icon,.ui.horizontal.list .item > .icon + .content { float: none; display: inline-block;}
/* Image */.ui.list .item > img { display: block; float: right; margin-left: 1em; vertical-align: middle;}
/* Content */.ui.list .item > .content { display: inline-block; vertical-align: middle; line-height: 1.2;}.ui.list .item > .icon + .content { display: table-cell; vertical-align: top;}
/* Link */.ui.list a { cursor: pointer;}.ui.list a .icon { color: rgba(0, 0, 0, 0.6);
-webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -o-transition: color 0.2s ease; -ms-transition: color 0.2s ease; transition: color 0.2s ease;}
/* Header */.ui.list .header { font-weight: bold;}.ui.list .description { color: rgba(0, 0, 0, 0.5);}
/* Floated Content */.ui.list .item > .left.floated { margin-left: 1em; float: right;}.ui.list .item > .right.floated { margin-right: 1em; float: left;}
/******************************* Types*******************************/
/*------------------- Horizontal--------------------*/
.ui.horizontal.list { display: inline-block; font-size: 0em;}.ui.horizontal.list > .item { display: inline-block; margin-right: 1em; font-size: 1rem;}.ui.horizontal.list > .item:first-child { margin-right: 0em;}.ui.horizontal.list .list { padding-right: 0em; padding-bottom: 0em;}
/******************************* States*******************************/
/*------------------- Hover--------------------*/
.ui.list a:hover .icon { color: rgba(0, 0, 0, 0.8);}
/******************************* Variations*******************************/
/*------------------- Inverted--------------------*/
.ui.inverted.list a .icon { color: rgba(255, 255, 255, 0.6);}.ui.inverted.list .description { color: rgba(255, 255, 255, 0.8);}.ui.inverted.link.list .item { color: rgba(255, 255, 255, 0.4);}
/*------------------- Link--------------------*/
.ui.link.list .item { color: rgba(0, 0, 0, 0.3);}.ui.link.list a.item,.ui.link.list .item a { color: rgba(0, 0, 0, 0.5);}.ui.link.list a.item:hover,.ui.link.list .item a:hover { color: rgba(0, 0, 0, 0.8);}.ui.link.list a.item:active,.ui.link.list .item a:active { color: rgba(0, 0, 0, 0.8);}.ui.link.list a.active.item,.ui.link.list .active.item a { color: rgba(0, 0, 0, 0.8);}
/* Inverted */.ui.inverted.link.list a.item,.ui.inverted.link.list .item a { color: rgba(255, 255, 255, 0.6);}.ui.inverted.link.list a.item:hover,.ui.inverted.link.list .item a:hover { color: rgba(255, 255, 255, 0.8);}.ui.inverted.link.list a.item:active,.ui.inverted.link.list .item a:active { color: rgba(255, 255, 255, 0.9);}.ui.inverted.link.list a.active.item,.ui.inverted.link.list .active.item a { color: rgba(255, 255, 255, 0.8);}
/*------------------- Selection--------------------*/
.ui.selection.list .item { cursor: pointer; color: rgba(0, 0, 0, 0.4); padding: 0.5em;
transition: 0.2s color ease, 0.2s padding-right ease, 0.2s background-color ease ;}.ui.selection.list .item:hover { background-color: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.7);}.ui.selection.list .item:active { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.7);}.ui.selection.list .item.active { background-color: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.7);}
.ui.animated.list .item { transition: 0.2s color ease, 0.2s padding-right ease, 0.2s background-color ease ;}.ui.animated.list:not(.horizontal) .item:hover { padding-right: 1em;}.ui.animated.list:not(.horizontal) .item:hover .item:hover { padding-right: 0.5em;}
/* Inverted */.ui.inverted.selection.list .item { color: rgba(255, 255, 255, 0.6);}.ui.inverted.selection.list .item:hover { background-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.8);}.ui.inverted.selection.list .item:active { background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7);}.ui.inverted.selection.list .item.active { background-color: rgba(255, 255, 255, 0.08); color: #FFFFFF;}
/*------------------- Bulleted--------------------*/
ul.ui.list,.ui.bulleted.list { margin-right: 1.5em;}ul.ui.list li,.ui.bulleted.list .item { position: relative;}ul.ui.list li:before,.ui.bulleted.list .item:before { position: absolute; right: -1.5em; content: '•';
line-height: 1.2rem; vertical-align: top;}
ul.ui.list ul,.ui.bulleted.list .list { padding-right: 1.5em;}
/* Horizontal Bulleted */ul.ui.horizontal.bulleted.list,.ui.horizontal.bulleted.list { margin-right: 0em;}ul.ui.horizontal.bulleted.list li,.ui.horizontal.bulleted.list .item { margin-right: 1.5em;}ul.ui.horizontal.bulleted.list li:before,.ui.horizontal.bulleted.list .item:before { right: -0.9em;}ul.ui.horizontal.bulleted.list li:first-child,.ui.horizontal.bulleted.list .item:first-child { margin-right: 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 { counter-reset: ordered; margin-right: 2em; list-style-type: none;}ol.ui.list li,.ui.ordered.list .item { list-style-type: none; position: relative;}ol.ui.list li:before,.ui.ordered.list .item:before { position: absolute; right: -2em;
counter-increment: ordered; content: counters(ordered, ".");
text-align: left; vertical-align: top; opacity: 0.75;}
ol.ui.list ol,.ui.ordered.list .list { counter-reset: ordered; padding-right: 2.5em;}
ol.ui.list ol li:before,.ui.ordered.list .list .item:before { right: -2.5em;}
/* Horizontal Ordered */ol.ui.horizontal.list,.ui.ordered.horizontal.list { margin-right: 0em;}ol.ui.horizontal.list li:before,.ui.ordered.horizontal.list .item:before { position: static; margin: 0em 0em 0em 0.5em;}
/*------------------- Divided--------------------*/
.ui.divided.list > .item,.ui.divided.list:not(.horizontal) > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-right: 0.5em; padding-left: 0.5em;}.ui.divided.list .item .menu .item { border-width: 0px;}.ui.divided.list .item:first-child { border-top-width: 0px;}
/* Sub Menu */.ui.divided.list:not(.horizontal) .list { margin-right: -0.5em; margin-left: -0.5em;}.ui.divided.list:not(.horizontal) .list .item { padding-right: 1em; padding-left: 1em;}.ui.divided.list:not(.horizontal) .list .item:first-child { border-top-width: 1px;}
/* Divided bulleted */.ui.divided.bulleted.list { margin-right: 0em;}.ui.divided.bulleted.list .item { padding-right: 1.5em;}.ui.divided.bulleted.list .item:before { right: 0.5em;}
/* Divided ordered */.ui.divided.ordered.list { margin-right: 0em;}.ui.divided.ordered.list > .item { padding-right: 2em; padding-left: 2em;}.ui.divided.ordered.list > .item:before { right: 0.5em;}.ui.divided.ordered.list .item .list { margin-right: -2em; margin-left: -2em;}
/* Divided horizontal */.ui.divided.horizontal.list { margin-right: 0em;}.ui.divided.horizontal.list > .item { border-top: none; border-right: 1px solid rgba(0, 0, 0, 0.1); margin: 0em; padding-right: 0.75em; padding-left: 0.75em;
line-height: 0.6;}.ui.horizontal.divided.list > .item:first-child { border-right: none; padding-right: 0em;}
/* Inverted */.ui.divided.inverted.list > .item,.ui.divided.inverted.list > .list { border-color: rgba(255, 255, 255, 0.2);}.ui.divided.inverted.horizontal.list .item { border-color: rgba(255, 255, 255, 0.2);}
/*------------------- Celled--------------------*/
.ui.celled.list > .item,.ui.celled.list > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-right: 0.5em; padding-left: 0.5em;}.ui.celled.list > .item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
/* Sub Menu */.ui.celled.list .item .list { margin-right: -0.5em; margin-left: -0.5em;}.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-right: 0em;}.ui.celled.bulleted.list > .item { padding-right: 1.5em;}.ui.celled.bulleted.list > .item:before { right: 0.5em;}
/* Celled Ordered */.ui.celled.ordered.list { margin-right: 0em;}.ui.celled.ordered.list .item { padding-right: 2em; padding-left: 2em;}.ui.celled.ordered.list .item:before { right: 0.5em;}.ui.celled.ordered.list .item .list { margin-right: -2em; margin-left: -2em;}
/* Celled Horizontal */.ui.horizontal.celled.list { margin-right: 0em;}.ui.horizontal.celled.list .item { border-top: none; border-right: 1px solid rgba(0, 0, 0, 0.1); margin: 0em; padding-right: 0.75em; padding-left: 0.75em;
line-height: 0.6;}.ui.horizontal.celled.list .item:last-child { border-bottom: none; border-left: 1px solid rgba(0, 0, 0, 0.1);}
/* Inverted */.ui.celled.inverted.list > .item,.ui.celled.inverted.list > .list { border-color: rgba(255, 255, 255, 0.2);}.ui.celled.inverted.horizontal.list .item { border-color: rgba(255, 255, 255, 0.2);}
/*------------------- Relaxed--------------------*/
.ui.relaxed.list:not(.horizontal) .item { padding-top: 0.5em; padding-bottom: 0.5em;}.ui.relaxed.list .header { margin-bottom: 0.25em;}.ui.horizontal.relaxed.list .item { padding-right: 1.25em; padding-left: 1.25em;}
.ui.very.relaxed.list:not(.horizontal) .item { padding-top: 1em; padding-bottom: 1em;}.ui.very.relaxed.list .header { margin-bottom: 0.5em;}.ui.horizontal.very.relaxed.list .item { padding-right: 2em; padding-left: 2em;}
/*------------------- Sizes--------------------*/
.ui.mini.list .item { font-size: 0.7rem;}.ui.tiny.list .item { font-size: 0.8125rem;}.ui.small.list .item { font-size: 0.875rem;}.ui.list .item { font-size: 1em;}.ui.large.list .item { font-size: 1.125rem;}.ui.big.list .item { font-size: 1.25rem;}.ui.huge.list .item { font-size: 1.375rem;}.ui.massive.list .item { font-size: 1.5rem;}
|
