jlukic
11 years ago
26 changed files with 1008 additions and 254 deletions
Split View
Diff Options
-
16build/uncompressed/collections/grid.css
-
2build/uncompressed/collections/menu.css
-
1build/uncompressed/collections/message.css
-
218build/uncompressed/elements/list.css
-
2node/package.json
-
32node/src/documents/collections/grid.html
-
9node/src/documents/collections/menu.html
-
4node/src/documents/elements/button.html
-
156node/src/documents/elements/list.html
-
18node/src/documents/index.html
-
2node/src/documents/index_old.html
-
85node/src/documents/introduction/definitions.html
-
6node/src/documents/introduction/types.html
-
2node/src/documents/module.html
-
182node/src/documents/modules/sidebar.html
-
3node/src/documents/modules/transition.html
-
16node/src/files/components/semantic/collections/grid.css
-
2node/src/files/components/semantic/collections/menu.css
-
1node/src/files/components/semantic/collections/message.css
-
218node/src/files/components/semantic/elements/list.css
-
9node/src/files/stylesheets/semantic.css
-
1node/src/layouts/default.html.eco
-
16src/collections/grid.less
-
2src/collections/menu.less
-
1src/collections/message.less
-
258src/elements/list.less
@ -0,0 +1,218 @@ |
|||
/* |
|||
* # Semantic List - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 26 2013 |
|||
*/ |
|||
/******************************* |
|||
List |
|||
*******************************/ |
|||
ul.ui.list, |
|||
.ui.list { |
|||
margin: 1em 0em; |
|||
} |
|||
ul.ui.list:first-child, |
|||
.ui.list:first-child { |
|||
margin-top: 1em; |
|||
} |
|||
ul.ui.list:last-child, |
|||
.ui.list:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
ul.ui.list, |
|||
li:first-child, |
|||
.ui.list .item:first-child { |
|||
border-top: none; |
|||
} |
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
/* List Item */ |
|||
ul.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; |
|||
} |
|||
/* Icon */ |
|||
.ui.list .icon { |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
/* Link */ |
|||
ul.ui.list a, |
|||
.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; |
|||
} |
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
.ui.list a:hover .icon { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
/*------------------- |
|||
Bulleted |
|||
--------------------*/ |
|||
ul.ui.bulleted.list, |
|||
.ui.bulleted.list { |
|||
margin-left: 1.5em; |
|||
} |
|||
ul.ui.bulleted.list li, |
|||
.ui.bulleted.list .item { |
|||
position: relative; |
|||
} |
|||
ul.ui.bulleted.list li:before, |
|||
.ui.bulleted.list .item:before { |
|||
position: absolute; |
|||
top: 0.4em; |
|||
left: -1.5em; |
|||
content: '\25CF'; |
|||
font-size: 0.8em; |
|||
line-height: 1.2rem; |
|||
vertical-align: top; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
/*------------------- |
|||
Ordered |
|||
--------------------*/ |
|||
ol.ui.list, |
|||
ul.ui.ordered.list, |
|||
.ui.ordered.list { |
|||
counter-reset: ordered; |
|||
margin-left: 2em; |
|||
} |
|||
ol.ui.list li, |
|||
ul.ui.ordered.list li, |
|||
.ui.ordered.list .item { |
|||
counter-increment: ordered; |
|||
position: relative; |
|||
} |
|||
ol.ui.list li:before, |
|||
ul.ui.ordered.list li:before, |
|||
.ui.ordered.list .item:before { |
|||
position: absolute; |
|||
top: 0.4em; |
|||
left: -2em; |
|||
content: counter(ordered); |
|||
width: 0.8em; |
|||
margin-right: 0.5rem; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-right: 0.5em; |
|||
text-align: right; |
|||
line-height: 1.2rem; |
|||
vertical-align: top; |
|||
opacity: 0.8; |
|||
} |
|||
/*------------------- |
|||
Divided |
|||
--------------------*/ |
|||
ul.ui.divided.list li, |
|||
.ui.divided.list .item { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
ul.ui.divided.list, |
|||
li:first-child, |
|||
.ui.divided.list .item:first-child { |
|||
border-top: none; |
|||
} |
|||
/* Divided bulleted */ |
|||
ul.ui.divided.bulleted.list, |
|||
.ui.divided.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.divided.bulleted.list li, |
|||
.ui.divided.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
ul.ui.divided.bulleted.list li:before, |
|||
.ui.divided.bulleted.list .item:before { |
|||
left: 0em; |
|||
} |
|||
/* Divided ordered */ |
|||
ol.ui.divided.list, |
|||
ul.ui.divided.ordered.list, |
|||
.ui.divided.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.divided.list li, |
|||
ul.ui.divided.ordered.list li, |
|||
.ui.divided.ordered.list .item { |
|||
padding-left: 2em; |
|||
} |
|||
ol.ui.divided.list li:before, |
|||
ul.ui.divided.ordered.list li:before, |
|||
.ui.divided.ordered.list .item:before { |
|||
left: 0em; |
|||
} |
|||
/*------------------- |
|||
Celled |
|||
--------------------*/ |
|||
ul.ui.celled.list li, |
|||
.ui.celled.list .item { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
ul.ui.celled.list, |
|||
li:last-child, |
|||
.ui.celled.list .item:last-child { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
/* Celled Bulleted */ |
|||
ul.ui.celled.bulleted.list, |
|||
.ui.celled.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.celled.bulleted.list li, |
|||
.ui.celled.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
ul.ui.celled.bulleted.list li:before, |
|||
.ui.celled.bulleted.list .item:before { |
|||
left: 0em; |
|||
} |
|||
/* Celled Ordered */ |
|||
ol.ui.celled.list, |
|||
ul.ui.celled.ordered.list, |
|||
.ui.celled.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.celled.list li, |
|||
ul.ui.celled.ordered.list li, |
|||
.ui.celled.ordered.list .item { |
|||
padding-left: 2em; |
|||
} |
|||
ol.ui.celled.list li:before, |
|||
ul.ui.celled.ordered.list li:before, |
|||
.ui.celled.ordered.list .item:before { |
|||
left: 0em; |
|||
} |
|||
@ -0,0 +1,156 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'list' |
|||
title : 'List' |
|||
type : 'UI Collection' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header"> |
|||
List |
|||
</h1> |
|||
<p>A list is a group of related items ordered consecutively.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">Content</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">List</h4> |
|||
<p>A standard list</p> |
|||
<div class="ui list"> |
|||
<div class="item">New York City</div> |
|||
<div class="item">Chicago</div> |
|||
<div class="item">Los Angeles</div> |
|||
<div class="item">San Francisco</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Icon List</h4> |
|||
<p>An icon list</p> |
|||
<div class="ui list"> |
|||
<a class="item"> |
|||
<i class="right doc icon"></i> |
|||
What is a FAQ? |
|||
</a> |
|||
<a class="item"> |
|||
<i class="right doc icon"></i> |
|||
How does one go about reading answers to questions in a FAQ |
|||
</a> |
|||
<a class="item"> |
|||
<i class="right docs icon"></i> |
|||
How do you close a web browser? |
|||
</a> |
|||
<a class="item"> |
|||
<i class="right doc icon"></i> |
|||
What is the most popular FAQ question? |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Content</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Link</h4> |
|||
<p>A list can contain a link</p> |
|||
<div class="ui list"> |
|||
<a class="item">What is a FAQ?</a> |
|||
<a class="item">How does one go about reading answers to questions in a FAQ</a> |
|||
<a class="item">How do you close a web browser?</a> |
|||
<a class="item">What is the most popular FAQ question?</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Header</h4> |
|||
<p>A list can contain a header</p> |
|||
<div class="ui ordered list"> |
|||
<div class="item"> |
|||
<div class="header">New York City</div> |
|||
A lovely city |
|||
</div> |
|||
<div class="item"> |
|||
<div class="header">Chicago</div> |
|||
Also quite a lovely city |
|||
</div> |
|||
<div class="item"> |
|||
<div class="header">Los Angeles</div> |
|||
Sometimes can be a lovely city |
|||
</div> |
|||
<div class="item"> |
|||
<div class="header">San Francisco</div> |
|||
What a lovely city |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Bulleted</h4> |
|||
<p>A list can mark items with a bullet</p> |
|||
<div class="ui bulleted list"> |
|||
<div class="item">New York City</div> |
|||
<div class="item">Chicago</div> |
|||
<div class="item">Los Angeles</div> |
|||
<div class="item">San Francisco</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Ordered</h4> |
|||
<p>A list can be ordered numerically</p> |
|||
<div class="ui ordered list"> |
|||
<div class="item">New York City</div> |
|||
<div class="item">Chicago</div> |
|||
<div class="item">Los Angeles</div> |
|||
<div class="item">San Francisco</div> |
|||
<div class="item">Detroit</div> |
|||
<div class="item">Richmond</div> |
|||
<div class="item">Nashville</div> |
|||
<div class="item">St Louis</div> |
|||
<div class="item">Kansas City</div> |
|||
<div class="item">Oakland</div> |
|||
<div class="item">Virginia Beach</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Divided</h4> |
|||
<p>A list can show divisions between content</p> |
|||
<div class="ui divided list"> |
|||
<div class="item">New York City</div> |
|||
<div class="item">Chicago</div> |
|||
<div class="item">Los Angeles</div> |
|||
<div class="item">San Francisco</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Celled</h4> |
|||
<p>A list can divide its items into cells</p> |
|||
<div class="ui celled list"> |
|||
<div class="item">New York City</div> |
|||
<div class="item">Chicago</div> |
|||
<div class="item">Los Angeles</div> |
|||
<div class="item">San Francisco</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,218 @@ |
|||
/* |
|||
* # Semantic List - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 26 2013 |
|||
*/ |
|||
/******************************* |
|||
List |
|||
*******************************/ |
|||
ul.ui.list, |
|||
.ui.list { |
|||
margin: 1em 0em; |
|||
} |
|||
ul.ui.list:first-child, |
|||
.ui.list:first-child { |
|||
margin-top: 1em; |
|||
} |
|||
ul.ui.list:last-child, |
|||
.ui.list:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
ul.ui.list, |
|||
li:first-child, |
|||
.ui.list .item:first-child { |
|||
border-top: none; |
|||
} |
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
/* List Item */ |
|||
ul.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; |
|||
} |
|||
/* Icon */ |
|||
.ui.list .icon { |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
/* Link */ |
|||
ul.ui.list a, |
|||
.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; |
|||
} |
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
.ui.list a:hover .icon { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
/*------------------- |
|||
Bulleted |
|||
--------------------*/ |
|||
ul.ui.bulleted.list, |
|||
.ui.bulleted.list { |
|||
margin-left: 1.5em; |
|||
} |
|||
ul.ui.bulleted.list li, |
|||
.ui.bulleted.list .item { |
|||
position: relative; |
|||
} |
|||
ul.ui.bulleted.list li:before, |
|||
.ui.bulleted.list .item:before { |
|||
position: absolute; |
|||
top: 0.4em; |
|||
left: -1.5em; |
|||
content: '\25CF'; |
|||
font-size: 0.8em; |
|||
line-height: 1.2rem; |
|||
vertical-align: top; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
/*------------------- |
|||
Ordered |
|||
--------------------*/ |
|||
ol.ui.list, |
|||
ul.ui.ordered.list, |
|||
.ui.ordered.list { |
|||
counter-reset: ordered; |
|||
margin-left: 2em; |
|||
} |
|||
ol.ui.list li, |
|||
ul.ui.ordered.list li, |
|||
.ui.ordered.list .item { |
|||
counter-increment: ordered; |
|||
position: relative; |
|||
} |
|||
ol.ui.list li:before, |
|||
ul.ui.ordered.list li:before, |
|||
.ui.ordered.list .item:before { |
|||
position: absolute; |
|||
top: 0.4em; |
|||
left: -2em; |
|||
content: counter(ordered); |
|||
width: 0.8em; |
|||
margin-right: 0.5rem; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-right: 0.5em; |
|||
text-align: right; |
|||
line-height: 1.2rem; |
|||
vertical-align: top; |
|||
opacity: 0.8; |
|||
} |
|||
/*------------------- |
|||
Divided |
|||
--------------------*/ |
|||
ul.ui.divided.list li, |
|||
.ui.divided.list .item { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
ul.ui.divided.list, |
|||
li:first-child, |
|||
.ui.divided.list .item:first-child { |
|||
border-top: none; |
|||
} |
|||
/* Divided bulleted */ |
|||
ul.ui.divided.bulleted.list, |
|||
.ui.divided.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.divided.bulleted.list li, |
|||
.ui.divided.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
ul.ui.divided.bulleted.list li:before, |
|||
.ui.divided.bulleted.list .item:before { |
|||
left: 0em; |
|||
} |
|||
/* Divided ordered */ |
|||
ol.ui.divided.list, |
|||
ul.ui.divided.ordered.list, |
|||
.ui.divided.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.divided.list li, |
|||
ul.ui.divided.ordered.list li, |
|||
.ui.divided.ordered.list .item { |
|||
padding-left: 2em; |
|||
} |
|||
ol.ui.divided.list li:before, |
|||
ul.ui.divided.ordered.list li:before, |
|||
.ui.divided.ordered.list .item:before { |
|||
left: 0em; |
|||
} |
|||
/*------------------- |
|||
Celled |
|||
--------------------*/ |
|||
ul.ui.celled.list li, |
|||
.ui.celled.list .item { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
ul.ui.celled.list, |
|||
li:last-child, |
|||
.ui.celled.list .item:last-child { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
/* Celled Bulleted */ |
|||
ul.ui.celled.bulleted.list, |
|||
.ui.celled.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.celled.bulleted.list li, |
|||
.ui.celled.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
ul.ui.celled.bulleted.list li:before, |
|||
.ui.celled.bulleted.list .item:before { |
|||
left: 0em; |
|||
} |
|||
/* Celled Ordered */ |
|||
ol.ui.celled.list, |
|||
ul.ui.celled.ordered.list, |
|||
.ui.celled.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.celled.list li, |
|||
ul.ui.celled.ordered.list li, |
|||
.ui.celled.ordered.list .item { |
|||
padding-left: 2em; |
|||
} |
|||
ol.ui.celled.list li:before, |
|||
ul.ui.celled.ordered.list li:before, |
|||
.ui.celled.ordered.list .item:before { |
|||
left: 0em; |
|||
} |
|||
@ -0,0 +1,258 @@ |
|||
/* |
|||
* # Semantic List - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 26 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
List |
|||
*******************************/ |
|||
|
|||
ul.ui.list, |
|||
.ui.list { |
|||
margin: 1em 0em; |
|||
} |
|||
|
|||
ul.ui.list:first-child, |
|||
.ui.list:first-child { |
|||
margin-top: 1em; |
|||
} |
|||
|
|||
ul.ui.list:last-child, |
|||
.ui.list:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
ul.ui.list, li:first-child, |
|||
.ui.list .item:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/* List Item */ |
|||
ul.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; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.list .icon { |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
/* Link */ |
|||
ul.ui.list a, |
|||
.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; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
.ui.list a:hover .icon { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Bulleted |
|||
--------------------*/ |
|||
ul.ui.bulleted.list, |
|||
.ui.bulleted.list { |
|||
margin-left: 1.5em; |
|||
} |
|||
ul.ui.bulleted.list li, |
|||
.ui.bulleted.list .item { |
|||
position: relative; |
|||
} |
|||
ul.ui.bulleted.list li:before, |
|||
.ui.bulleted.list .item:before { |
|||
position: absolute; |
|||
top: 0.4em; |
|||
left: -1.5em; |
|||
content: '\25CF'; |
|||
|
|||
font-size: 0.8em; |
|||
line-height: 1.2rem; |
|||
vertical-align: top; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
/*------------------- |
|||
Ordered |
|||
--------------------*/ |
|||
|
|||
ol.ui.list, |
|||
ul.ui.ordered.list, |
|||
.ui.ordered.list { |
|||
counter-reset: ordered; |
|||
margin-left: 2em; |
|||
} |
|||
ol.ui.list li, |
|||
ul.ui.ordered.list li, |
|||
.ui.ordered.list .item { |
|||
counter-increment: ordered; |
|||
position: relative; |
|||
} |
|||
ol.ui.list li:before, |
|||
ul.ui.ordered.list li:before, |
|||
.ui.ordered.list .item:before { |
|||
position: absolute; |
|||
top: 0.4em; |
|||
left: -2em; |
|||
content: counter(ordered); |
|||
|
|||
width: 0.8em; |
|||
|
|||
margin-right: 0.5rem; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-right: 0.5em; |
|||
|
|||
text-align: right; |
|||
line-height: 1.2rem; |
|||
vertical-align: top; |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Divided |
|||
--------------------*/ |
|||
|
|||
ul.ui.divided.list li, |
|||
.ui.divided.list .item { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
ul.ui.divided.list, li:first-child, |
|||
.ui.divided.list .item:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
/* Divided bulleted */ |
|||
ul.ui.divided.bulleted.list, |
|||
.ui.divided.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.divided.bulleted.list li, |
|||
.ui.divided.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
ul.ui.divided.bulleted.list li:before, |
|||
.ui.divided.bulleted.list .item:before { |
|||
left: 0em; |
|||
} |
|||
|
|||
/* Divided ordered */ |
|||
ol.ui.divided.list, |
|||
ul.ui.divided.ordered.list, |
|||
.ui.divided.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.divided.list li, |
|||
ul.ui.divided.ordered.list li, |
|||
.ui.divided.ordered.list .item { |
|||
padding-left: 2em; |
|||
} |
|||
ol.ui.divided.list li:before, |
|||
ul.ui.divided.ordered.list li:before, |
|||
.ui.divided.ordered.list .item:before { |
|||
left: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Celled |
|||
--------------------*/ |
|||
|
|||
ul.ui.celled.list li, |
|||
.ui.celled.list .item { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
ul.ui.celled.list, li:last-child, |
|||
.ui.celled.list .item:last-child { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Celled Bulleted */ |
|||
ul.ui.celled.bulleted.list, |
|||
.ui.celled.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.celled.bulleted.list li, |
|||
.ui.celled.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
ul.ui.celled.bulleted.list li:before, |
|||
.ui.celled.bulleted.list .item:before { |
|||
left: 0em; |
|||
} |
|||
|
|||
/* Celled Ordered */ |
|||
ol.ui.celled.list, |
|||
ul.ui.celled.ordered.list, |
|||
.ui.celled.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.celled.list li, |
|||
ul.ui.celled.ordered.list li, |
|||
.ui.celled.ordered.list .item { |
|||
padding-left: 2em; |
|||
} |
|||
ol.ui.celled.list li:before, |
|||
ul.ui.celled.ordered.list li:before, |
|||
.ui.celled.ordered.list .item:before { |
|||
left: 0em; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save