richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

lists like a baller 

Former-commit-id: 25aae19dbc
Former-commit-id: 1cbb386ed7
pull/258/head
jlukic 11 years ago
parent
8bc437b09c
commit
82ba84308a
8 changed files with 677 additions and 286 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      build/uncompressed/elements/button.css
  2. 195
      build/uncompressed/elements/list.css
  3. 236
      node/src/documents/elements/list.html
  4. 30
      node/src/files/components/semantic/elements/button.css
  5. 195
      node/src/files/components/semantic/elements/list.css
  6. 12
      node/src/files/stylesheets/semantic.css
  7. 30
      src/elements/button.less
  8. 235
      src/elements/list.less

30
build/uncompressed/elements/button.css
View File

@ -20,8 +20,8 @@
min-height: 1em; min-height: 1em;
outline: none; outline: none;
border: none; border: none;
background-color: #999999;
color: #FFFFFF;
background-color: #EBEBEB;
color: #999999;
padding: 0.8em 1.5em; padding: 0.8em 1.5em;
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
@ -118,14 +118,14 @@
.ui.active.button { .ui.active.button {
opacity: 1 !important; opacity: 1 !important;
background-color: #B0B0B0; background-color: #B0B0B0;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
-webkit-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-webkit-box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset;
} }
.ui.buttons .active.button, .ui.buttons .active.button,
.ui.buttons .active.button a, .ui.buttons .active.button a,
@ -140,6 +140,7 @@
.ui.button.hover { .ui.button.hover {
opacity: 1 !important; opacity: 1 !important;
background-color: #A4A4A4; background-color: #A4A4A4;
color: #FFFFFF;
} }
.ui.button:hover .icon, .ui.button:hover .icon,
.ui.button.hover .icon { .ui.button.hover .icon {
@ -150,9 +151,10 @@
---------------*/ ---------------*/
/* Down */ /* Down */
.ui.button:active, .ui.button:active,
.ui.button.pressed {
.ui.button.down {
opacity: 1 !important; opacity: 1 !important;
background-color: #8C8C8C; background-color: #8C8C8C;
color: #FFFFFF;
-webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
@ -510,17 +512,17 @@
} }
.ui.buttons.mini .button, .ui.buttons.mini .button,
.ui.mini.button { .ui.mini.button {
font-size: 0.8rem;
font-size: 0.8125rem;
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
} }
.ui.tiny.buttons .button, .ui.tiny.buttons .button,
.ui.tiny.button { .ui.tiny.button {
font-size: 0.9rem;
font-size: 0.875rem;
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
} }
.ui.small.buttons .button, .ui.small.buttons .button,
.ui.small.button { .ui.small.button {
font-size: 0.9rem;
font-size: 0.875rem;
} }
.ui.large.buttons .button, .ui.large.buttons .button,
.ui.large.button { .ui.large.button {

195
build/uncompressed/elements/list.css
View File

@ -13,27 +13,33 @@
List List
*******************************/ *******************************/
ul.ui.list, ul.ui.list,
ol.ui.list,
.ui.list { .ui.list {
list-style-type: none;
margin: 1em 0em; margin: 1em 0em;
padding: 0em; padding: 0em;
} }
ul.ui.list ul,
ol.ui.list ol,
.ui.list .list {
padding: 0.5em 0em 0.5em 1.2em;
}
ul.ui.list:first-child, ul.ui.list:first-child,
ol.ui.list:first-child,
.ui.list:first-child { .ui.list:first-child {
margin-top: 0em; margin-top: 0em;
} }
ul.ui.list:last-child, ul.ui.list:last-child,
ol.ui.list:last-child,
.ui.list:last-child { .ui.list:last-child {
margin-bottom: 0em; margin-bottom: 0em;
} }
ul.ui.list li:first-child,
.ui.list .item:first-child {
border-top: none;
}
/******************************* /*******************************
Content Content
*******************************/ *******************************/
/* List Item */ /* List Item */
ul.ui.list li, ul.ui.list li,
ol.ui.list li,
.ui.list .item { .ui.list .item {
display: list-item; display: list-item;
list-style-type: none; list-style-type: none;
@ -42,11 +48,26 @@ ul.ui.list li,
line-height: 1.2; line-height: 1.2;
} }
/* Icon */ /* Icon */
.ui.list .icon {
margin: 0em 0.5em 0em 0em;
.ui.list .item > .icon {
margin-right: 0.5em;
}
/* Image */
.ui.list .item > img {
display: inline-block;
width: 2em;
margin-right: 0.5em;
vertical-align: middle;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
}
/* Content */
.ui.list .item > .content {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
} }
/* Link */ /* Link */
ul.ui.list a,
.ui.list a { .ui.list a {
cursor: pointer; cursor: pointer;
} }
@ -68,18 +89,15 @@ ul.ui.list a,
/*------------------- /*-------------------
Horizontal Horizontal
--------------------*/ --------------------*/
ul.ui.horizontal.list,
.ui.horizontal.list { .ui.horizontal.list {
display: inline-block; display: inline-block;
font-size: 0em; font-size: 0em;
} }
ul.ui.horizontal.list li,
.ui.horizontal.list .item { .ui.horizontal.list .item {
display: inline-block; display: inline-block;
margin-left: 1em; margin-left: 1em;
font-size: 1rem; font-size: 1rem;
} }
ul.ui.horizontal.list li:first-child,
.ui.horizontal.list .item:first-child { .ui.horizontal.list .item:first-child {
margin-left: 0em; margin-left: 0em;
} }
@ -95,6 +113,32 @@ ul.ui.horizontal.list li:first-child,
/******************************* /*******************************
Variations Variations
*******************************/ *******************************/
/*-------------------
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;
-o-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease;
-ms-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 {
padding-left: 1em;
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);
}
/*------------------- /*-------------------
Bulleted Bulleted
--------------------*/ --------------------*/
@ -139,92 +183,99 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
Ordered Ordered
--------------------*/ --------------------*/
ol.ui.list, ol.ui.list,
ul.ui.ordered.list,
.ui.ordered.list { .ui.ordered.list {
counter-reset: ordered; counter-reset: ordered;
margin-left: 2em; margin-left: 2em;
list-style-type: none;
} }
ol.ui.list li, ol.ui.list li,
ul.ui.ordered.list li,
.ui.ordered.list .item { .ui.ordered.list .item {
counter-increment: ordered;
list-style-type: none;
position: relative; position: relative;
} }
ol.ui.list li:before, ol.ui.list li:before,
ul.ui.ordered.list li:before,
.ui.ordered.list .item:before { .ui.ordered.list .item:before {
position: absolute; position: absolute;
top: 0.4em;
left: -2em; left: -2em;
content: counter(ordered);
width: 0.8em;
margin-right: 0.5rem;
padding-right: 0.5em;
counter-increment: ordered;
content: counters(ordered, ".");
text-align: right; text-align: right;
line-height: 1.2rem;
vertical-align: top; vertical-align: top;
opacity: 0.8;
opacity: 0.75;
}
ol.ui.list ol,
.ui.ordered.list .list {
counter-reset: ordered;
padding-left: 2em;
}
ol.ui.list ol ol li:before,
.ui.ordered.list .list .list .item:before {
left: -2.5em;
} }
/* Horizontal Ordered */ /* Horizontal Ordered */
ol.ui.horizontal.list, ol.ui.horizontal.list,
ul.ui.ordered.horizontal.list,
.ui.ordered.horizontal.list { .ui.ordered.horizontal.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.horizontal.list li:before, ol.ui.horizontal.list li:before,
ul.ui.ordered.horizontal.list li:before,
.ui.ordered.horizontal.list .item:before { .ui.ordered.horizontal.list .item:before {
position: static; position: static;
margin: 0em;
margin: 0em 0.5em 0em 0em;
} }
/*------------------- /*-------------------
Divided Divided
--------------------*/ --------------------*/
ul.ui.divided.list li,
.ui.divided.list .item {
.ui.divided.list > .item,
.ui.divided.list > .list {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
} }
ul.ui.divided.list li:first-child,
.ui.divided.list .item .menu .item {
border-width: 0px;
}
.ui.divided.list .item:first-child { .ui.divided.list .item:first-child {
border-top: none;
border-top-width: 0px;
}
/* Sub Menu */
.ui.divided.list .list {
margin-left: -1.2em;
margin-right: -1.2em;
}
.ui.divided.list .list .item {
padding-left: 1em;
padding-right: 1em;
}
.ui.divided.list .list .item:first-child {
border-top-width: 1px;
} }
/* Divided bulleted */ /* Divided bulleted */
ul.ui.divided.bulleted.list,
.ui.divided.bulleted.list { .ui.divided.bulleted.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.divided.bulleted.list li,
.ui.divided.bulleted.list .item { .ui.divided.bulleted.list .item {
padding-left: 1.5em; padding-left: 1.5em;
} }
ul.ui.divided.bulleted.list li:before,
.ui.divided.bulleted.list .item:before { .ui.divided.bulleted.list .item:before {
left: 0em; left: 0em;
} }
/* Divided ordered */ /* Divided ordered */
ol.ui.divided.list,
ul.ui.divided.ordered.list,
.ui.divided.ordered.list { .ui.divided.ordered.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.divided.list li,
ul.ui.divided.ordered.list li,
.ui.divided.ordered.list .item {
.ui.divided.ordered.list > .item {
padding-left: 2em; padding-left: 2em;
} }
ol.ui.divided.list li:before,
ul.ui.divided.ordered.list li:before,
.ui.divided.ordered.list .item:before {
.ui.divided.ordered.list > .item:before {
left: 0em; left: 0em;
} }
.ui.divided.ordered.list .item .list {
margin-left: -2em;
}
/* Divided horizontal */ /* Divided horizontal */
ul.ui.divided.horizontal.list,
.ui.divided.horizontal.list { .ui.divided.horizontal.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.divided.horizontal.list li,
.ui.divided.horizontal.list .item { .ui.divided.horizontal.list .item {
border-top: none; border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1);
@ -233,7 +284,6 @@ ul.ui.divided.horizontal.list li,
padding-right: 0.75em; padding-right: 0.75em;
line-height: 0.6; line-height: 0.6;
} }
ul.ui.horizontal.divided.list li:first-child,
.ui.horizontal.divided.list .item:first-child { .ui.horizontal.divided.list .item:first-child {
border-left: none; border-left: none;
padding-left: 0em; padding-left: 0em;
@ -241,51 +291,53 @@ ul.ui.horizontal.divided.list li:first-child,
/*------------------- /*-------------------
Celled Celled
--------------------*/ --------------------*/
ul.ui.celled.list li,
.ui.celled.list .item {
.ui.celled.list > .item,
.ui.celled.list > .list {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
} }
ul.ui.celled.list li:last-child,
.ui.celled.list .item:last-child {
.ui.celled.list > .item:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
/* Sub Menu */
.ui.celled.list .item .list {
margin-left: -1.2em;
margin-right: -1.2em;
}
.ui.celled.list .item .list .item {
border-width: 0px;
}
.ui.celled.list .list .item:first-child {
border-top-width: 0px;
}
/* Celled Bulleted */ /* Celled Bulleted */
ul.ui.celled.bulleted.list,
.ui.celled.bulleted.list { .ui.celled.bulleted.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.celled.bulleted.list li,
.ui.celled.bulleted.list .item {
.ui.celled.bulleted.list > .item {
padding-left: 1.5em; padding-left: 1.5em;
} }
ul.ui.celled.bulleted.list li:before,
.ui.celled.bulleted.list .item:before {
.ui.celled.bulleted.list > .item:before {
left: 0em; left: 0em;
} }
/* Celled Ordered */ /* Celled Ordered */
ol.ui.celled.list,
ul.ui.celled.ordered.list,
.ui.celled.ordered.list { .ui.celled.ordered.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.celled.list li,
ul.ui.celled.ordered.list li,
.ui.celled.ordered.list .item { .ui.celled.ordered.list .item {
padding-left: 2em; padding-left: 2em;
} }
ol.ui.celled.list li:before,
ul.ui.celled.ordered.list li:before,
.ui.celled.ordered.list .item:before { .ui.celled.ordered.list .item:before {
left: 0em; left: 0em;
} }
.ui.celled.ordered.list .item .list {
margin-left: -2em;
}
/* Celled Horizontal */ /* Celled Horizontal */
ul.ui.horizontal.celled.list,
.ui.horizontal.celled.list { .ui.horizontal.celled.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.horizontal.celled.list li,
.ui.horizontal.celled.list .item { .ui.horizontal.celled.list .item {
border-top: none; border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1);
@ -294,8 +346,31 @@ ul.ui.horizontal.celled.list li,
padding-right: 0.75em; padding-right: 0.75em;
line-height: 0.6; line-height: 0.6;
} }
ul.ui.horizontal.celled.list li:last-child,
.ui.horizontal.celled.list .item:last-child { .ui.horizontal.celled.list .item:last-child {
border-bottom: none; border-bottom: none;
border-right: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1);
} }
/*-------------------
Sizes
--------------------*/
.ui.mini.list .item {
font-size: 0.8125rem;
}
.ui.tiny.list .item {
font-size: 0.875rem;
}
.ui.small.list .item {
font-size: 0.875rem;
}
.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;
}

236
node/src/documents/elements/list.html
View File

@ -24,49 +24,112 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2 class="ui dividing header">Standard</h2>
<h2 class="ui dividing header">Types</h2>
<div class="example"> <div class="example">
<h4 class="ui header">List</h4> <h4 class="ui header">List</h4>
<p>A standard list</p> <p>A standard list</p>
<div class="ui list">
<div class="ui celled selection list">
<div class="item">
<img src="/images/demo/avatar.jpg">
<div class="content">
<div class="header">Snickerdoodle</div>
An excellent companion
</div>
</div>
<div class="item">
<img src="/images/demo/avatar2.jpg">
<div class="content">
<div class="header">Poodle</div>
A poodle, its pretty basic
</div>
<div class="list">
<div class="item">
<img src="/images/demo/avatar3.jpg">
<div class="content">
<div class="header">Paulo</div>
He's also a dog
</div>
</div>
<div class="item">
<img src="/images/demo/avatar3.jpg">
<div class="content">
<div class="header">Paulo</div>
He's also a dog
</div>
</div>
<div class="item">
<img src="/images/demo/avatar3.jpg">
<div class="content">
<div class="header">Paulo</div>
He's also a dog
</div>
</div>
</div>
</div>
</div>
</div>
<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">New York City</div>
<div class="item">Chicago</div> <div class="item">Chicago</div>
<div class="item">Los Angeles</div> <div class="item">Los Angeles</div>
<div class="item">San Francisco</div> <div class="item">San Francisco</div>
<div class="item">Others
<div class="list">
<div class="item">Paris</div>
<div class="item">Havana</div>
<div class="item">Lisbon</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="another example"> <div class="another example">
<div class="ignored ui info message">For convenience, a list can also use ul and li tags to specify lists and list items.</div>
<div class="ignored ui info message">For convenience, a simple bulleted list can also use <code>ul</code> tag.</div>
<ul class="ui list"> <ul class="ui list">
<li>New York City</li> <li>New York City</li>
<li>Chicago</li> <li>Chicago</li>
<li>Los Angeles</li> <li>Los Angeles</li>
<li>San Francisco</li>
</ul> </ul>
</div> </div>
<div class="example"> <div class="example">
<h4 class="ui header">Horizontal List</h4>
<p>A list can be formatted horizontally</p>
<div class="ui horizontal list">
<div class="item">
Apples
</div>
<div class="item">
Pears
</div>
<div class="item">
Oranges
</div>
<div class="item">
Soursop
<h4 class="ui header">Ordered</h4>
<p>A list can be ordered numerically</p>
<div class="ui ordered list">
<div class="item">Getting Started</div>
<div class="item">Introduction</div>
<div class="item">Languages
<div class="list">
<div class="item">HTML</div>
<div class="item">Javascript</div>
<div class="item">CSS</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="another example">
<div class="ignored ui info message">For convenience, a simple ordered list can also use the <code>ol</code> tag</div>
<ol class="ui list">
<li>New York City</li>
<li>Virginia Beach</li>
<li>Others</li>
<ol class="list">
<li>Paris</li>
<li>Havana</li>
<li>Lisbon</li>
</ol>
</li>
</ol>
</div>
<h2 class="ui dividing header">Content</h2>
<div class="example"> <div class="example">
<h4 class="ui header">Icon List</h4>
<p>A list can be formatted so that each item has an icon</p>
<h4 class="ui header">Icon</h4>
<p>A list item can have an icon</p>
<div class="ui list"> <div class="ui list">
<a class="item"> <a class="item">
<i class="right doc icon"></i> <i class="right doc icon"></i>
@ -87,8 +150,6 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2 class="ui dividing header">Content</h2>
<div class="example"> <div class="example">
<h4 class="ui header">Link</h4> <h4 class="ui header">Link</h4>
<p>A list can contain items that link</p> <p>A list can contain items that link</p>
@ -103,7 +164,7 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4 class="ui header">Header</h4> <h4 class="ui header">Header</h4>
<p>A list item can contain a header</p> <p>A list item can contain a header</p>
<div class="ui ordered list">
<div class="ui list">
<div class="item"> <div class="item">
<div class="header">New York City</div> <div class="header">New York City</div>
A lovely city A lovely city
@ -128,10 +189,37 @@ type : 'UI Collection'
<h2 class="ui dividing header">Variations</h2> <h2 class="ui dividing header">Variations</h2>
<div class="example"> <div class="example">
<h4 class="ui header">Bulleted</h4>
<p>A list can mark items with a bullet</p>
<div class="ui bulleted list">
<h4 class="ui header">Horizontal List</h4>
<p>A list can be formatted horizontally</p>
<div class="ui horizontal list">
<div class="item">
<img src="/images/demo/avatar.jpg">
<div class="content">
<div class="header">Snickerdoodle</div>
An excellent companion
</div>
</div>
<div class="item">
<img src="/images/demo/avatar2.jpg">
<div class="content">
<div class="header">Poodle</div>
A poodle, its pretty basic
</div>
</div>
<div class="item">
<img src="/images/demo/avatar3.jpg">
<div class="content">
<div class="header">Paulo</div>
He's also a dog
</div>
</div>
</div>
</div>
<div class="another example">
<div class="ui ordered horizontal list">
<div class="item">New York City</div> <div class="item">New York City</div>
<div class="item">Chicago</div> <div class="item">Chicago</div>
<div class="item">Los Angeles</div> <div class="item">Los Angeles</div>
@ -156,28 +244,30 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <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="another example">
<div class="ui ordered horizontal 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>
<h4 class="ui header">Selection</h4>
<p>A selection list formats list items as possible choices</p>
<div class="ui selection list">
<div class="item">
<img src="/images/demo/avatar.jpg">
<div class="content">
<div class="header">Snickerdoodle</div>
An excellent companion
</div>
</div>
<div class="item">
<img src="/images/demo/avatar2.jpg">
<div class="content">
<div class="header">Poodle</div>
A poodle, its pretty basic
</div>
</div>
<div class="item">
<img src="/images/demo/avatar3.jpg">
<div class="content">
<div class="header">Paulo</div>
He's also a dog
</div>
</div>
</div> </div>
</div> </div>
@ -189,6 +279,11 @@ type : 'UI Collection'
<div class="item">Chicago</div> <div class="item">Chicago</div>
<div class="item">Los Angeles</div> <div class="item">Los Angeles</div>
<div class="item">San Francisco</div> <div class="item">San Francisco</div>
<div class="list">
<div class="item">Paris</div>
<div class="item">Havana</div>
<div class="item">Lisbon</div>
</div>
</div> </div>
</div> </div>
<div class="another example"> <div class="another example">
@ -207,6 +302,11 @@ type : 'UI Collection'
<div class="item">Chicago</div> <div class="item">Chicago</div>
<div class="item">Los Angeles</div> <div class="item">Los Angeles</div>
<div class="item">San Francisco</div> <div class="item">San Francisco</div>
<div class="list">
<div class="item">Paris</div>
<div class="item">Havana</div>
<div class="item">Lisbon</div>
</div>
</div> </div>
</div> </div>
<div class="another example"> <div class="another example">
@ -217,6 +317,46 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="example">
<h4 class="ui header">Sizes</h4>
<p>A list can vary in size</p>
<div class="ui mini list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div>
<div class="ui tiny list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div>
<div class="ui small list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div>
<div class="ui large list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div>
<div class="ui big list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div>
<div class="ui huge list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div>
<div class="ui massive list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div>
</div>
</div> </div>

30
node/src/files/components/semantic/elements/button.css
View File

@ -20,8 +20,8 @@
min-height: 1em; min-height: 1em;
outline: none; outline: none;
border: none; border: none;
background-color: #999999;
color: #FFFFFF;
background-color: #EBEBEB;
color: #999999;
padding: 0.8em 1.5em; padding: 0.8em 1.5em;
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
@ -118,14 +118,14 @@
.ui.active.button { .ui.active.button {
opacity: 1 !important; opacity: 1 !important;
background-color: #B0B0B0; background-color: #B0B0B0;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
-webkit-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-webkit-box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset;
} }
.ui.buttons .active.button, .ui.buttons .active.button,
.ui.buttons .active.button a, .ui.buttons .active.button a,
@ -140,6 +140,7 @@
.ui.button.hover { .ui.button.hover {
opacity: 1 !important; opacity: 1 !important;
background-color: #A4A4A4; background-color: #A4A4A4;
color: #FFFFFF;
} }
.ui.button:hover .icon, .ui.button:hover .icon,
.ui.button.hover .icon { .ui.button.hover .icon {
@ -150,9 +151,10 @@
---------------*/ ---------------*/
/* Down */ /* Down */
.ui.button:active, .ui.button:active,
.ui.button.pressed {
.ui.button.down {
opacity: 1 !important; opacity: 1 !important;
background-color: #8C8C8C; background-color: #8C8C8C;
color: #FFFFFF;
-webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
@ -510,17 +512,17 @@
} }
.ui.buttons.mini .button, .ui.buttons.mini .button,
.ui.mini.button { .ui.mini.button {
font-size: 0.8rem;
font-size: 0.8125rem;
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
} }
.ui.tiny.buttons .button, .ui.tiny.buttons .button,
.ui.tiny.button { .ui.tiny.button {
font-size: 0.9rem;
font-size: 0.875rem;
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
} }
.ui.small.buttons .button, .ui.small.buttons .button,
.ui.small.button { .ui.small.button {
font-size: 0.9rem;
font-size: 0.875rem;
} }
.ui.large.buttons .button, .ui.large.buttons .button,
.ui.large.button { .ui.large.button {

195
node/src/files/components/semantic/elements/list.css
View File

@ -13,27 +13,33 @@
List List
*******************************/ *******************************/
ul.ui.list, ul.ui.list,
ol.ui.list,
.ui.list { .ui.list {
list-style-type: none;
margin: 1em 0em; margin: 1em 0em;
padding: 0em; padding: 0em;
} }
ul.ui.list ul,
ol.ui.list ol,
.ui.list .list {
padding: 0.5em 0em 0.5em 1.2em;
}
ul.ui.list:first-child, ul.ui.list:first-child,
ol.ui.list:first-child,
.ui.list:first-child { .ui.list:first-child {
margin-top: 0em; margin-top: 0em;
} }
ul.ui.list:last-child, ul.ui.list:last-child,
ol.ui.list:last-child,
.ui.list:last-child { .ui.list:last-child {
margin-bottom: 0em; margin-bottom: 0em;
} }
ul.ui.list li:first-child,
.ui.list .item:first-child {
border-top: none;
}
/******************************* /*******************************
Content Content
*******************************/ *******************************/
/* List Item */ /* List Item */
ul.ui.list li, ul.ui.list li,
ol.ui.list li,
.ui.list .item { .ui.list .item {
display: list-item; display: list-item;
list-style-type: none; list-style-type: none;
@ -42,11 +48,26 @@ ul.ui.list li,
line-height: 1.2; line-height: 1.2;
} }
/* Icon */ /* Icon */
.ui.list .icon {
margin: 0em 0.5em 0em 0em;
.ui.list .item > .icon {
margin-right: 0.5em;
}
/* Image */
.ui.list .item > img {
display: inline-block;
width: 2em;
margin-right: 0.5em;
vertical-align: middle;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
}
/* Content */
.ui.list .item > .content {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
} }
/* Link */ /* Link */
ul.ui.list a,
.ui.list a { .ui.list a {
cursor: pointer; cursor: pointer;
} }
@ -68,18 +89,15 @@ ul.ui.list a,
/*------------------- /*-------------------
Horizontal Horizontal
--------------------*/ --------------------*/
ul.ui.horizontal.list,
.ui.horizontal.list { .ui.horizontal.list {
display: inline-block; display: inline-block;
font-size: 0em; font-size: 0em;
} }
ul.ui.horizontal.list li,
.ui.horizontal.list .item { .ui.horizontal.list .item {
display: inline-block; display: inline-block;
margin-left: 1em; margin-left: 1em;
font-size: 1rem; font-size: 1rem;
} }
ul.ui.horizontal.list li:first-child,
.ui.horizontal.list .item:first-child { .ui.horizontal.list .item:first-child {
margin-left: 0em; margin-left: 0em;
} }
@ -95,6 +113,32 @@ ul.ui.horizontal.list li:first-child,
/******************************* /*******************************
Variations Variations
*******************************/ *******************************/
/*-------------------
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;
-o-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease;
-ms-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 {
padding-left: 1em;
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);
}
/*------------------- /*-------------------
Bulleted Bulleted
--------------------*/ --------------------*/
@ -139,92 +183,99 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
Ordered Ordered
--------------------*/ --------------------*/
ol.ui.list, ol.ui.list,
ul.ui.ordered.list,
.ui.ordered.list { .ui.ordered.list {
counter-reset: ordered; counter-reset: ordered;
margin-left: 2em; margin-left: 2em;
list-style-type: none;
} }
ol.ui.list li, ol.ui.list li,
ul.ui.ordered.list li,
.ui.ordered.list .item { .ui.ordered.list .item {
counter-increment: ordered;
list-style-type: none;
position: relative; position: relative;
} }
ol.ui.list li:before, ol.ui.list li:before,
ul.ui.ordered.list li:before,
.ui.ordered.list .item:before { .ui.ordered.list .item:before {
position: absolute; position: absolute;
top: 0.4em;
left: -2em; left: -2em;
content: counter(ordered);
width: 0.8em;
margin-right: 0.5rem;
padding-right: 0.5em;
counter-increment: ordered;
content: counters(ordered, ".");
text-align: right; text-align: right;
line-height: 1.2rem;
vertical-align: top; vertical-align: top;
opacity: 0.8;
opacity: 0.75;
}
ol.ui.list ol,
.ui.ordered.list .list {
counter-reset: ordered;
padding-left: 2em;
}
ol.ui.list ol ol li:before,
.ui.ordered.list .list .list .item:before {
left: -2.5em;
} }
/* Horizontal Ordered */ /* Horizontal Ordered */
ol.ui.horizontal.list, ol.ui.horizontal.list,
ul.ui.ordered.horizontal.list,
.ui.ordered.horizontal.list { .ui.ordered.horizontal.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.horizontal.list li:before, ol.ui.horizontal.list li:before,
ul.ui.ordered.horizontal.list li:before,
.ui.ordered.horizontal.list .item:before { .ui.ordered.horizontal.list .item:before {
position: static; position: static;
margin: 0em;
margin: 0em 0.5em 0em 0em;
} }
/*------------------- /*-------------------
Divided Divided
--------------------*/ --------------------*/
ul.ui.divided.list li,
.ui.divided.list .item {
.ui.divided.list > .item,
.ui.divided.list > .list {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
} }
ul.ui.divided.list li:first-child,
.ui.divided.list .item .menu .item {
border-width: 0px;
}
.ui.divided.list .item:first-child { .ui.divided.list .item:first-child {
border-top: none;
border-top-width: 0px;
}
/* Sub Menu */
.ui.divided.list .list {
margin-left: -1.2em;
margin-right: -1.2em;
}
.ui.divided.list .list .item {
padding-left: 1em;
padding-right: 1em;
}
.ui.divided.list .list .item:first-child {
border-top-width: 1px;
} }
/* Divided bulleted */ /* Divided bulleted */
ul.ui.divided.bulleted.list,
.ui.divided.bulleted.list { .ui.divided.bulleted.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.divided.bulleted.list li,
.ui.divided.bulleted.list .item { .ui.divided.bulleted.list .item {
padding-left: 1.5em; padding-left: 1.5em;
} }
ul.ui.divided.bulleted.list li:before,
.ui.divided.bulleted.list .item:before { .ui.divided.bulleted.list .item:before {
left: 0em; left: 0em;
} }
/* Divided ordered */ /* Divided ordered */
ol.ui.divided.list,
ul.ui.divided.ordered.list,
.ui.divided.ordered.list { .ui.divided.ordered.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.divided.list li,
ul.ui.divided.ordered.list li,
.ui.divided.ordered.list .item {
.ui.divided.ordered.list > .item {
padding-left: 2em; padding-left: 2em;
} }
ol.ui.divided.list li:before,
ul.ui.divided.ordered.list li:before,
.ui.divided.ordered.list .item:before {
.ui.divided.ordered.list > .item:before {
left: 0em; left: 0em;
} }
.ui.divided.ordered.list .item .list {
margin-left: -2em;
}
/* Divided horizontal */ /* Divided horizontal */
ul.ui.divided.horizontal.list,
.ui.divided.horizontal.list { .ui.divided.horizontal.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.divided.horizontal.list li,
.ui.divided.horizontal.list .item { .ui.divided.horizontal.list .item {
border-top: none; border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1);
@ -233,7 +284,6 @@ ul.ui.divided.horizontal.list li,
padding-right: 0.75em; padding-right: 0.75em;
line-height: 0.6; line-height: 0.6;
} }
ul.ui.horizontal.divided.list li:first-child,
.ui.horizontal.divided.list .item:first-child { .ui.horizontal.divided.list .item:first-child {
border-left: none; border-left: none;
padding-left: 0em; padding-left: 0em;
@ -241,51 +291,53 @@ ul.ui.horizontal.divided.list li:first-child,
/*------------------- /*-------------------
Celled Celled
--------------------*/ --------------------*/
ul.ui.celled.list li,
.ui.celled.list .item {
.ui.celled.list > .item,
.ui.celled.list > .list {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
} }
ul.ui.celled.list li:last-child,
.ui.celled.list .item:last-child {
.ui.celled.list > .item:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
/* Sub Menu */
.ui.celled.list .item .list {
margin-left: -1.2em;
margin-right: -1.2em;
}
.ui.celled.list .item .list .item {
border-width: 0px;
}
.ui.celled.list .list .item:first-child {
border-top-width: 0px;
}
/* Celled Bulleted */ /* Celled Bulleted */
ul.ui.celled.bulleted.list,
.ui.celled.bulleted.list { .ui.celled.bulleted.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.celled.bulleted.list li,
.ui.celled.bulleted.list .item {
.ui.celled.bulleted.list > .item {
padding-left: 1.5em; padding-left: 1.5em;
} }
ul.ui.celled.bulleted.list li:before,
.ui.celled.bulleted.list .item:before {
.ui.celled.bulleted.list > .item:before {
left: 0em; left: 0em;
} }
/* Celled Ordered */ /* Celled Ordered */
ol.ui.celled.list,
ul.ui.celled.ordered.list,
.ui.celled.ordered.list { .ui.celled.ordered.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.celled.list li,
ul.ui.celled.ordered.list li,
.ui.celled.ordered.list .item { .ui.celled.ordered.list .item {
padding-left: 2em; padding-left: 2em;
} }
ol.ui.celled.list li:before,
ul.ui.celled.ordered.list li:before,
.ui.celled.ordered.list .item:before { .ui.celled.ordered.list .item:before {
left: 0em; left: 0em;
} }
.ui.celled.ordered.list .item .list {
margin-left: -2em;
}
/* Celled Horizontal */ /* Celled Horizontal */
ul.ui.horizontal.celled.list,
.ui.horizontal.celled.list { .ui.horizontal.celled.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.horizontal.celled.list li,
.ui.horizontal.celled.list .item { .ui.horizontal.celled.list .item {
border-top: none; border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1);
@ -294,8 +346,31 @@ ul.ui.horizontal.celled.list li,
padding-right: 0.75em; padding-right: 0.75em;
line-height: 0.6; line-height: 0.6;
} }
ul.ui.horizontal.celled.list li:last-child,
.ui.horizontal.celled.list .item:last-child { .ui.horizontal.celled.list .item:last-child {
border-bottom: none; border-bottom: none;
border-right: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1);
} }
/*-------------------
Sizes
--------------------*/
.ui.mini.list .item {
font-size: 0.8125rem;
}
.ui.tiny.list .item {
font-size: 0.875rem;
}
.ui.small.list .item {
font-size: 0.875rem;
}
.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;
}

12
node/src/files/stylesheets/semantic.css
View File

@ -272,18 +272,6 @@ a:hover {
} }
/* lists */ /* lists */
#example ol {
list-style-position: inside;
margin: 10px 0px 40px;
padding: 0px;
}
#example ol li {
list-style-type: decimal;
margin: 0px 0px 10px;
}
#example ol li a {
font-weight: bold;
}
#example .features { #example .features {
list-style-position: inside; list-style-position: inside;
margin: 10px 0px 0px; margin: 10px 0px 0px;

30
src/elements/button.less
View File

@ -25,8 +25,8 @@
outline: none; outline: none;
border: none; border: none;
background-color: #999999;
color: #FFFFFF;
background-color: #EBEBEB;
color: #999999;
padding: 0.8em 1.5em; padding: 0.8em 1.5em;
@ -186,20 +186,20 @@
opacity: 1 !important; opacity: 1 !important;
background-color: #B0B0B0; background-color: #B0B0B0;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-webkit-box-shadow: -webkit-box-shadow:
0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset
0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset
; ;
-moz-box-shadow: -moz-box-shadow:
0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset
0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset
; ;
box-shadow: box-shadow:
0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset
0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset
; ;
} }
.ui.buttons .active.button, .ui.buttons .active.button,
@ -217,6 +217,7 @@
.ui.button.hover { .ui.button.hover {
opacity: 1 !important; opacity: 1 !important;
background-color: #A4A4A4; background-color: #A4A4A4;
color: #FFFFFF;
} }
.ui.button:hover .icon, .ui.button:hover .icon,
.ui.button.hover .icon { .ui.button.hover .icon {
@ -229,9 +230,10 @@
/* Down */ /* Down */
.ui.button:active, .ui.button:active,
.ui.button.pressed {
.ui.button.down {
opacity: 1 !important; opacity: 1 !important;
background-color: #8C8C8C; background-color: #8C8C8C;
color: #FFFFFF;
-webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
@ -634,17 +636,17 @@
.ui.buttons.mini .button, .ui.buttons.mini .button,
.ui.mini.button { .ui.mini.button {
font-size: 0.8rem;
font-size: 0.8125rem;
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
} }
.ui.tiny.buttons .button, .ui.tiny.buttons .button,
.ui.tiny.button { .ui.tiny.button {
font-size: 0.9rem;
font-size: 0.875rem;
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
} }
.ui.small.buttons .button, .ui.small.buttons .button,
.ui.small.button { .ui.small.button {
font-size: 0.9rem;
font-size: 0.875rem;
} }
.ui.large.buttons .button, .ui.large.buttons .button,
.ui.large.button { .ui.large.button {

235
src/elements/list.less
View File

@ -15,34 +15,38 @@
*******************************/ *******************************/
ul.ui.list, ul.ui.list,
ol.ui.list,
.ui.list { .ui.list {
list-style-type: none;
margin: 1em 0em; margin: 1em 0em;
padding: 0em; padding: 0em;
} }
ul.ui.list ul,
ol.ui.list ol,
.ui.list .list {
padding: 0.5em 0em 0.5em 1.2em;
}
ul.ui.list:first-child, ul.ui.list:first-child,
ol.ui.list:first-child,
.ui.list:first-child { .ui.list:first-child {
margin-top: 0em; margin-top: 0em;
} }
ul.ui.list:last-child, ul.ui.list:last-child,
ol.ui.list:last-child,
.ui.list:last-child { .ui.list:last-child {
margin-bottom: 0em; margin-bottom: 0em;
} }
ul.ui.list li:first-child,
.ui.list .item:first-child {
border-top: none;
}
/******************************* /*******************************
Content Content
*******************************/ *******************************/
/* List Item */ /* List Item */
ul.ui.list li, ul.ui.list li,
ol.ui.list li,
.ui.list .item { .ui.list .item {
display: list-item; display: list-item;
list-style-type: none; list-style-type: none;
@ -53,12 +57,30 @@ ul.ui.list li,
} }
/* Icon */ /* Icon */
.ui.list .icon {
margin: 0em 0.5em 0em 0em;
.ui.list .item > .icon {
margin-right: 0.5em;
}
/* Image */
.ui.list .item > img {
display: inline-block;
width: 2em;
margin-right: 0.5em;
vertical-align: middle;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
}
/* Content */
.ui.list .item > .content {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
} }
/* Link */ /* Link */
ul.ui.list a,
.ui.list a { .ui.list a {
cursor: pointer; cursor: pointer;
} }
@ -86,19 +108,17 @@ ul.ui.list a,
/*------------------- /*-------------------
Horizontal Horizontal
--------------------*/ --------------------*/
ul.ui.horizontal.list,
.ui.horizontal.list { .ui.horizontal.list {
display: inline-block; display: inline-block;
font-size: 0em; font-size: 0em;
} }
ul.ui.horizontal.list li,
.ui.horizontal.list .item { .ui.horizontal.list .item {
display: inline-block; display: inline-block;
margin-left: 1em; margin-left: 1em;
font-size: 1rem; font-size: 1rem;
} }
ul.ui.horizontal.list li:first-child,
.ui.horizontal.list .item:first-child { .ui.horizontal.list .item:first-child {
margin-left: 0em; margin-left: 0em;
} }
@ -123,10 +143,61 @@ ul.ui.horizontal.list li:first-child,
Variations Variations
*******************************/ *******************************/
/*-------------------
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
;
-o-transition:
0.2s color ease,
0.2s padding-left ease,
0.2s background-color ease
;
-ms-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 {
padding-left: 1em;
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);
}
/*------------------- /*-------------------
Bulleted Bulleted
--------------------*/ --------------------*/
ul.ui.bulleted.list, ul.ui.bulleted.list,
.ui.bulleted.list { .ui.bulleted.list {
margin-left: 1em; margin-left: 1em;
@ -146,7 +217,6 @@ ul.ui.bulleted.list li:before,
} }
/* Horizontal Bulleted */ /* Horizontal Bulleted */
ul.ui.horizontal.bulleted.list, ul.ui.horizontal.bulleted.list,
.ui.horizontal.bulleted.list { .ui.horizontal.bulleted.list {
margin-left: 0em; margin-left: 0em;
@ -173,47 +243,49 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
--------------------*/ --------------------*/
ol.ui.list, ol.ui.list,
ul.ui.ordered.list,
.ui.ordered.list { .ui.ordered.list {
counter-reset: ordered; counter-reset: ordered;
margin-left: 2em; margin-left: 2em;
list-style-type: none;
} }
ol.ui.list li, ol.ui.list li,
ul.ui.ordered.list li,
.ui.ordered.list .item { .ui.ordered.list .item {
counter-increment: ordered;
list-style-type: none;
position: relative; position: relative;
} }
ol.ui.list li:before, ol.ui.list li:before,
ul.ui.ordered.list li:before,
.ui.ordered.list .item:before { .ui.ordered.list .item:before {
position: absolute; position: absolute;
top: 0.4em;
left: -2em; left: -2em;
content: counter(ordered);
width: 0.8em;
margin-right: 0.5rem;
padding-right: 0.5em;
counter-increment: ordered;
content: counters(ordered, ".");
text-align: right; text-align: right;
line-height: 1.2rem;
vertical-align: top; vertical-align: top;
opacity: 0.8;
opacity: 0.75;
}
ol.ui.list ol,
.ui.ordered.list .list {
counter-reset: ordered;
padding-left: 2em;
}
ol.ui.list ol ol li:before,
.ui.ordered.list .list .list .item:before {
left: -2.5em;
} }
/* Horizontal Ordered */ /* Horizontal Ordered */
ol.ui.horizontal.list, ol.ui.horizontal.list,
ul.ui.ordered.horizontal.list,
.ui.ordered.horizontal.list { .ui.ordered.horizontal.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.horizontal.list li:before, ol.ui.horizontal.list li:before,
ul.ui.ordered.horizontal.list li:before,
.ui.ordered.horizontal.list .item:before { .ui.ordered.horizontal.list .item:before {
position: static; position: static;
margin: 0em;
margin: 0em 0.5em 0em 0em;
} }
@ -221,55 +293,62 @@ ul.ui.ordered.horizontal.list li:before,
Divided Divided
--------------------*/ --------------------*/
ul.ui.divided.list li,
.ui.divided.list .item {
.ui.divided.list > .item,
.ui.divided.list > .list {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
} }
ul.ui.divided.list li:first-child,
.ui.divided.list .item .menu .item {
border-width: 0px;
}
.ui.divided.list .item:first-child { .ui.divided.list .item:first-child {
border-top: none;
border-top-width: 0px;
}
/* Sub Menu */
.ui.divided.list .list {
margin-left: -1.2em;
margin-right: -1.2em;
}
.ui.divided.list .list .item {
padding-left: 1em;
padding-right: 1em;
}
.ui.divided.list .list .item:first-child {
border-top-width: 1px;
} }
/* Divided bulleted */ /* Divided bulleted */
ul.ui.divided.bulleted.list,
.ui.divided.bulleted.list { .ui.divided.bulleted.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.divided.bulleted.list li,
.ui.divided.bulleted.list .item { .ui.divided.bulleted.list .item {
padding-left: 1.5em; padding-left: 1.5em;
} }
ul.ui.divided.bulleted.list li:before,
.ui.divided.bulleted.list .item:before { .ui.divided.bulleted.list .item:before {
left: 0em; left: 0em;
} }
/* Divided ordered */ /* Divided ordered */
ol.ui.divided.list,
ul.ui.divided.ordered.list,
.ui.divided.ordered.list { .ui.divided.ordered.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.divided.list li,
ul.ui.divided.ordered.list li,
.ui.divided.ordered.list .item {
.ui.divided.ordered.list > .item {
padding-left: 2em; padding-left: 2em;
} }
ol.ui.divided.list li:before,
ul.ui.divided.ordered.list li:before,
.ui.divided.ordered.list .item:before {
.ui.divided.ordered.list > .item:before {
left: 0em; left: 0em;
} }
.ui.divided.ordered.list .item .list {
margin-left: -2em;
}
/* Divided horizontal */ /* Divided horizontal */
ul.ui.divided.horizontal.list,
.ui.divided.horizontal.list { .ui.divided.horizontal.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.divided.horizontal.list li,
.ui.divided.horizontal.list .item { .ui.divided.horizontal.list .item {
border-top: none; border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1);
@ -279,7 +358,6 @@ ul.ui.divided.horizontal.list li,
line-height: 0.6; line-height: 0.6;
} }
ul.ui.horizontal.divided.list li:first-child,
.ui.horizontal.divided.list .item:first-child { .ui.horizontal.divided.list .item:first-child {
border-left: none; border-left: none;
padding-left: 0em; padding-left: 0em;
@ -292,54 +370,57 @@ ul.ui.horizontal.divided.list li:first-child,
Celled Celled
--------------------*/ --------------------*/
ul.ui.celled.list li,
.ui.celled.list .item {
.ui.celled.list > .item,
.ui.celled.list > .list {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
} }
ul.ui.celled.list li:last-child,
.ui.celled.list .item:last-child {
.ui.celled.list > .item:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
/* Sub Menu */
.ui.celled.list .item .list {
margin-left: -1.2em;
margin-right: -1.2em;
}
.ui.celled.list .item .list .item {
border-width: 0px;
}
.ui.celled.list .list .item:first-child {
border-top-width: 0px;
}
/* Celled Bulleted */ /* Celled Bulleted */
ul.ui.celled.bulleted.list,
.ui.celled.bulleted.list { .ui.celled.bulleted.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.celled.bulleted.list li,
.ui.celled.bulleted.list .item {
.ui.celled.bulleted.list > .item {
padding-left: 1.5em; padding-left: 1.5em;
} }
ul.ui.celled.bulleted.list li:before,
.ui.celled.bulleted.list .item:before {
.ui.celled.bulleted.list > .item:before {
left: 0em; left: 0em;
} }
/* Celled Ordered */ /* Celled Ordered */
ol.ui.celled.list,
ul.ui.celled.ordered.list,
.ui.celled.ordered.list { .ui.celled.ordered.list {
margin-left: 0em; margin-left: 0em;
} }
ol.ui.celled.list li,
ul.ui.celled.ordered.list li,
.ui.celled.ordered.list .item { .ui.celled.ordered.list .item {
padding-left: 2em; padding-left: 2em;
} }
ol.ui.celled.list li:before,
ul.ui.celled.ordered.list li:before,
.ui.celled.ordered.list .item:before { .ui.celled.ordered.list .item:before {
left: 0em; left: 0em;
} }
.ui.celled.ordered.list .item .list {
margin-left: -2em;
}
/* Celled Horizontal */ /* Celled Horizontal */
ul.ui.horizontal.celled.list,
.ui.horizontal.celled.list { .ui.horizontal.celled.list {
margin-left: 0em; margin-left: 0em;
} }
ul.ui.horizontal.celled.list li,
.ui.horizontal.celled.list .item { .ui.horizontal.celled.list .item {
border-top: none; border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1);
@ -349,8 +430,34 @@ ul.ui.horizontal.celled.list li,
line-height: 0.6; line-height: 0.6;
} }
ul.ui.horizontal.celled.list li:last-child,
.ui.horizontal.celled.list .item:last-child { .ui.horizontal.celled.list .item:last-child {
border-bottom: none; border-bottom: none;
border-right: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1);
}
/*-------------------
Sizes
--------------------*/
.ui.mini.list .item {
font-size: 0.8125rem;
}
.ui.tiny.list .item {
font-size: 0.875rem;
}
.ui.small.list .item {
font-size: 0.875rem;
}
.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;
} }
Write Preview
Loading…
Cancel
Save