/* * # Semantic List - Flat * http://github.com/jlukic/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * * Released: April 26 2014 */ /******************************* 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 0em 0.5em 1em; } 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.2em; } .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: left; margin: 0em 1em 0em 0em; padding: 0.1em 0em 0em 0em; } .ui.list .item > .icon:only-child { display: inline-block; } .ui.horizontal.list .item > .icon { margin: 0em; padding: 0em 0.25em 0em 0em; } .ui.horizontal.list .item > .icon, .ui.horizontal.list .item > .icon + .content { float: none; display: inline-block; } /* Image */ .ui.list .item > img { display: block; float: left; margin-right: 1em; vertical-align: middle; } /* Content */ .ui.list .item > .content { display: inline-block; vertical-align: middle; line-height: 1.2em; } .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; 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-right: 1em; float: left; } .ui.list .item > .right.floated { margin-left: 1em; float: right; } /******************************* Types *******************************/ /*------------------- Horizontal --------------------*/ .ui.horizontal.list { display: inline-block; font-size: 0em; } .ui.horizontal.list > .item { display: inline-block; margin-left: 1em; font-size: 1rem; } .ui.horizontal.list > .item:first-child { margin-left: 0em; } .ui.horizontal.list .list { padding-left: 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; -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; transition: 0.2s color ease, 0.2s padding-left 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 { -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; } .ui.animated.list:not(.horizontal) .item:hover { padding-left: 1em; } .ui.animated.list:not(.horizontal) .item:hover .item:hover { padding-left: 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-left: 1.5em; } ul.ui.list li, .ui.bulleted.list .item { position: relative; } ul.ui.list li:before, .ui.bulleted.list .item:before { position: absolute; left: -1.5em; content: '•'; } ul.ui.list ul, .ui.bulleted.list .list { padding-left: 1.5em; } /* 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: 1.5em; } ul.ui.horizontal.bulleted.list li:before, .ui.horizontal.bulleted.list .item:before { left: -0.9em; } 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 { counter-reset: ordered; margin-left: 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; left: -2em; counter-increment: ordered; content: counters(ordered, "."); text-align: right; vertical-align: top; opacity: 0.75; } ol.ui.list ol, .ui.ordered.list .list { counter-reset: ordered; padding-left: 2.5em; } ol.ui.list ol li:before, .ui.ordered.list .list .item:before { left: -2.5em; } /* Horizontal Ordered */ ol.ui.horizontal.list, .ui.ordered.horizontal.list { margin-left: 0em; } ol.ui.horizontal.list li:before, .ui.ordered.horizontal.list .item:before { position: static; left: 0em; margin: 0em 0.5em 0em 0em; } /*------------------- Divided --------------------*/ .ui.divided.list > .item, .ui.divided.list:not(.horizontal) > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-left: 0.5em; padding-right: 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:not(.icon) { margin-left: -0.5em; margin-right: -0.5em; } .ui.divided.list:not(.horizontal) .list .item { padding-left: 1em; padding-right: 1em; } .ui.divided.list:not(.horizontal) .list .item:first-child { border-top-width: 1px; } /* Divided bulleted */ .ui.divided.bulleted.list { margin-left: 0em; } .ui.divided.bulleted.list .item { padding-left: 1.5em; } .ui.divided.bulleted.list .item:before { left: 0.5em; } /* Divided ordered */ .ui.divided.ordered.list { margin-left: 0em; } .ui.divided.ordered.list > .item { padding-left: 2em; padding-right: 2em; } .ui.divided.ordered.list > .item:before { left: 0.5em; } .ui.divided.ordered.list .item .list { margin-left: -2em; margin-right: -2em; } /* Divided horizontal */ .ui.divided.horizontal.list { margin-left: 0em; } .ui.divided.horizontal.list > .item { border-top: none; border-left: 1px solid rgba(0, 0, 0, 0.1); margin: 0em; padding-left: 0.75em; padding-right: 0.75em; line-height: 0.6em; } .ui.horizontal.divided.list > .item:first-child { border-left: none; padding-left: 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-left: 0.5em; padding-right: 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-left: -0.5em; margin-right: -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-left: 0em; } .ui.celled.bulleted.list > .item { padding-left: 1.5em; } .ui.celled.bulleted.list > .item:before { left: 0.5em; } /* Celled Ordered */ .ui.celled.ordered.list { margin-left: 0em; } .ui.celled.ordered.list .item { padding-left: 2em; padding-right: 2em; } .ui.celled.ordered.list .item:before { left: 0.5em; } .ui.celled.ordered.list .item .list { margin-left: -2em; margin-right: -2em; } /* Celled Horizontal */ .ui.horizontal.celled.list { margin-left: 0em; } .ui.horizontal.celled.list .item { border-top: none; border-left: 1px solid rgba(0, 0, 0, 0.1); margin: 0em; padding-left: 0.75em; padding-right: 0.75em; line-height: 0.6em; } .ui.horizontal.celled.list .item:last-child { border-bottom: none; border-right: 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-left: 1.25em; padding-right: 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-left: 2em; padding-right: 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; }