lists like a baller

Former-commit-id: 25aae19dbc
Former-commit-id: 1cbb386ed7

build/uncompressed/elements/button.css

@@ -20,8 +20,8 @@
   min-height: 1em;
   outline: none;
   border: none;
-  background-color: #999999;
-  color: #FFFFFF;
+  background-color: #EBEBEB;
+  color: #999999;
   padding: 0.8em 1.5em;
   font-size: 1rem;
   text-transform: uppercase;
@@ -118,14 +118,14 @@
 .ui.active.button {
   opacity: 1 !important;
   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 a,
@@ -140,6 +140,7 @@
 .ui.button.hover {
   opacity: 1 !important;
   background-color: #A4A4A4;
+  color: #FFFFFF;
 }
 .ui.button:hover .icon,
 .ui.button.hover .icon {
@@ -150,9 +151,10 @@
 ---------------*/
 /* Down */
 .ui.button:active,
-.ui.button.pressed {
+.ui.button.down {
   opacity: 1 !important;
   background-color: #8C8C8C;
+  color: #FFFFFF;
   -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;
   box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
@@ -510,17 +512,17 @@
 }
 .ui.buttons.mini .button,
 .ui.mini.button {
-  font-size: 0.8rem;
+  font-size: 0.8125rem;
   padding: 0.6em 0.8em;
 }
 .ui.tiny.buttons .button,
 .ui.tiny.button {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
   padding: 0.6em 0.8em;
 }
 .ui.small.buttons .button,
 .ui.small.button {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
 }
 .ui.large.buttons .button,
 .ui.large.button {

build/uncompressed/elements/list.css

@@ -13,27 +13,33 @@
             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 {
+  padding: 0.5em 0em 0.5em 1.2em;
+}
 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;
 }
-ul.ui.list li:first-child,
-.ui.list .item:first-child {
-  border-top: none;
-}
 /*******************************
             Content
 *******************************/
 /* List Item */
 ul.ui.list li,
+ol.ui.list li,
 .ui.list .item {
   display: list-item;
   list-style-type: none;
@@ -42,11 +48,26 @@ ul.ui.list li,
   line-height: 1.2;
 }
 /* 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 */
-ul.ui.list a,
 .ui.list a {
   cursor: pointer;
 }
@@ -68,18 +89,15 @@ ul.ui.list a,
 /*-------------------
       Horizontal
 --------------------*/
-ul.ui.horizontal.list,
 .ui.horizontal.list {
   display: inline-block;
   font-size: 0em;
 }
-ul.ui.horizontal.list li,
 .ui.horizontal.list .item {
   display: inline-block;
   margin-left: 1em;
   font-size: 1rem;
 }
-ul.ui.horizontal.list li:first-child,
 .ui.horizontal.list .item:first-child {
   margin-left: 0em;
 }
@@ -95,6 +113,32 @@ ul.ui.horizontal.list li:first-child,
 /*******************************
            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
 --------------------*/
@@ -139,92 +183,99 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
        Ordered
 --------------------*/
 ol.ui.list,
-ul.ui.ordered.list,
 .ui.ordered.list {
   counter-reset: ordered;
   margin-left: 2em;
+  list-style-type: none;
 }
 ol.ui.list li,
-ul.ui.ordered.list li,
 .ui.ordered.list .item {
-  counter-increment: ordered;
+  list-style-type: none;
   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;
-  padding-right: 0.5em;
+  counter-increment: ordered;
+  content: counters(ordered, ".");
   text-align: right;
-  line-height: 1.2rem;
   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 */
 ol.ui.horizontal.list,
-ul.ui.ordered.horizontal.list,
 .ui.ordered.horizontal.list {
   margin-left: 0em;
 }
 ol.ui.horizontal.list li:before,
-ul.ui.ordered.horizontal.list li:before,
 .ui.ordered.horizontal.list .item:before {
   position: static;
-  margin: 0em;
+  margin: 0em 0.5em 0em 0em;
 }
 /*-------------------
        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);
   padding-left: 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 {
-  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 */
-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 {
+.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 {
+.ui.divided.ordered.list > .item:before {
   left: 0em;
 }
+.ui.divided.ordered.list .item .list {
+  margin-left: -2em;
+}
 /* Divided horizontal */
-ul.ui.divided.horizontal.list,
 .ui.divided.horizontal.list {
   margin-left: 0em;
 }
-ul.ui.divided.horizontal.list li,
 .ui.divided.horizontal.list .item {
   border-top: none;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
@@ -233,7 +284,6 @@ ul.ui.divided.horizontal.list li,
   padding-right: 0.75em;
   line-height: 0.6;
 }
-ul.ui.horizontal.divided.list li:first-child,
 .ui.horizontal.divided.list .item:first-child {
   border-left: none;
   padding-left: 0em;
@@ -241,51 +291,53 @@ ul.ui.horizontal.divided.list li:first-child,
 /*-------------------
         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);
   padding-left: 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);
 }
+/* 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 */
-ul.ui.celled.bulleted.list,
 .ui.celled.bulleted.list {
   margin-left: 0em;
 }
-ul.ui.celled.bulleted.list li,
-.ui.celled.bulleted.list .item {
+.ui.celled.bulleted.list > .item {
   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;
 }
 /* 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;
 }
+.ui.celled.ordered.list .item .list {
+  margin-left: -2em;
+}
 /* Celled Horizontal */
-ul.ui.horizontal.celled.list,
 .ui.horizontal.celled.list {
   margin-left: 0em;
 }
-ul.ui.horizontal.celled.list li,
 .ui.horizontal.celled.list .item {
   border-top: none;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
@@ -294,8 +346,31 @@ ul.ui.horizontal.celled.list li,
   padding-right: 0.75em;
   line-height: 0.6;
 }
-ul.ui.horizontal.celled.list li:last-child,
 .ui.horizontal.celled.list .item:last-child {
   border-bottom: none;
   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;
+}

node/src/documents/elements/list.html

@@ -24,49 +24,112 @@ type       : 'UI Collection'
     </div>
   </div>
 
-  <h2 class="ui dividing header">Standard</h2>
+  <h2 class="ui dividing header">Types</h2>
   <div class="example">
     <h4 class="ui header">List</h4>
     <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">Chicago</div>
       <div class="item">Los Angeles</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 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">
       <li>New York City</li>
       <li>Chicago</li>
       <li>Los Angeles</li>
-      <li>San Francisco</li>
     </ul>
   </div>
 
   <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 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">
-    <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">
       <a class="item">
         <i class="right doc icon"></i>
@@ -87,8 +150,6 @@ type       : 'UI Collection'
     </div>
   </div>
 
-  <h2 class="ui dividing header">Content</h2>
-
   <div class="example">
     <h4 class="ui header">Link</h4>
     <p>A list can contain items that link</p>
@@ -103,7 +164,7 @@ type       : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Header</h4>
     <p>A list item can contain a header</p>
-    <div class="ui ordered list">
+    <div class="ui list">
       <div class="item">
         <div class="header">New York City</div>
         A lovely city
@@ -128,10 +189,37 @@ type       : 'UI Collection'
 
   <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">
+    <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">Chicago</div>
       <div class="item">Los Angeles</div>
@@ -156,28 +244,30 @@ type       : 'UI Collection'
   </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="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>
 
@@ -189,6 +279,11 @@ type       : 'UI Collection'
       <div class="item">Chicago</div>
       <div class="item">Los Angeles</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 class="another example">
@@ -207,6 +302,11 @@ type       : 'UI Collection'
       <div class="item">Chicago</div>
       <div class="item">Los Angeles</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 class="another example">
@@ -217,6 +317,46 @@ type       : 'UI Collection'
     </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>

node/src/files/components/semantic/elements/button.css

@@ -20,8 +20,8 @@
   min-height: 1em;
   outline: none;
   border: none;
-  background-color: #999999;
-  color: #FFFFFF;
+  background-color: #EBEBEB;
+  color: #999999;
   padding: 0.8em 1.5em;
   font-size: 1rem;
   text-transform: uppercase;
@@ -118,14 +118,14 @@
 .ui.active.button {
   opacity: 1 !important;
   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 a,
@@ -140,6 +140,7 @@
 .ui.button.hover {
   opacity: 1 !important;
   background-color: #A4A4A4;
+  color: #FFFFFF;
 }
 .ui.button:hover .icon,
 .ui.button.hover .icon {
@@ -150,9 +151,10 @@
 ---------------*/
 /* Down */
 .ui.button:active,
-.ui.button.pressed {
+.ui.button.down {
   opacity: 1 !important;
   background-color: #8C8C8C;
+  color: #FFFFFF;
   -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;
   box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
@@ -510,17 +512,17 @@
 }
 .ui.buttons.mini .button,
 .ui.mini.button {
-  font-size: 0.8rem;
+  font-size: 0.8125rem;
   padding: 0.6em 0.8em;
 }
 .ui.tiny.buttons .button,
 .ui.tiny.button {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
   padding: 0.6em 0.8em;
 }
 .ui.small.buttons .button,
 .ui.small.button {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
 }
 .ui.large.buttons .button,
 .ui.large.button {

node/src/files/components/semantic/elements/list.css

@@ -13,27 +13,33 @@
             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 {
+  padding: 0.5em 0em 0.5em 1.2em;
+}
 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;
 }
-ul.ui.list li:first-child,
-.ui.list .item:first-child {
-  border-top: none;
-}
 /*******************************
             Content
 *******************************/
 /* List Item */
 ul.ui.list li,
+ol.ui.list li,
 .ui.list .item {
   display: list-item;
   list-style-type: none;
@@ -42,11 +48,26 @@ ul.ui.list li,
   line-height: 1.2;
 }
 /* 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 */
-ul.ui.list a,
 .ui.list a {
   cursor: pointer;
 }
@@ -68,18 +89,15 @@ ul.ui.list a,
 /*-------------------
       Horizontal
 --------------------*/
-ul.ui.horizontal.list,
 .ui.horizontal.list {
   display: inline-block;
   font-size: 0em;
 }
-ul.ui.horizontal.list li,
 .ui.horizontal.list .item {
   display: inline-block;
   margin-left: 1em;
   font-size: 1rem;
 }
-ul.ui.horizontal.list li:first-child,
 .ui.horizontal.list .item:first-child {
   margin-left: 0em;
 }
@@ -95,6 +113,32 @@ ul.ui.horizontal.list li:first-child,
 /*******************************
            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
 --------------------*/
@@ -139,92 +183,99 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
        Ordered
 --------------------*/
 ol.ui.list,
-ul.ui.ordered.list,
 .ui.ordered.list {
   counter-reset: ordered;
   margin-left: 2em;
+  list-style-type: none;
 }
 ol.ui.list li,
-ul.ui.ordered.list li,
 .ui.ordered.list .item {
-  counter-increment: ordered;
+  list-style-type: none;
   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;
-  padding-right: 0.5em;
+  counter-increment: ordered;
+  content: counters(ordered, ".");
   text-align: right;
-  line-height: 1.2rem;
   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 */
 ol.ui.horizontal.list,
-ul.ui.ordered.horizontal.list,
 .ui.ordered.horizontal.list {
   margin-left: 0em;
 }
 ol.ui.horizontal.list li:before,
-ul.ui.ordered.horizontal.list li:before,
 .ui.ordered.horizontal.list .item:before {
   position: static;
-  margin: 0em;
+  margin: 0em 0.5em 0em 0em;
 }
 /*-------------------
        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);
   padding-left: 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 {
-  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 */
-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 {
+.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 {
+.ui.divided.ordered.list > .item:before {
   left: 0em;
 }
+.ui.divided.ordered.list .item .list {
+  margin-left: -2em;
+}
 /* Divided horizontal */
-ul.ui.divided.horizontal.list,
 .ui.divided.horizontal.list {
   margin-left: 0em;
 }
-ul.ui.divided.horizontal.list li,
 .ui.divided.horizontal.list .item {
   border-top: none;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
@@ -233,7 +284,6 @@ ul.ui.divided.horizontal.list li,
   padding-right: 0.75em;
   line-height: 0.6;
 }
-ul.ui.horizontal.divided.list li:first-child,
 .ui.horizontal.divided.list .item:first-child {
   border-left: none;
   padding-left: 0em;
@@ -241,51 +291,53 @@ ul.ui.horizontal.divided.list li:first-child,
 /*-------------------
         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);
   padding-left: 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);
 }
+/* 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 */
-ul.ui.celled.bulleted.list,
 .ui.celled.bulleted.list {
   margin-left: 0em;
 }
-ul.ui.celled.bulleted.list li,
-.ui.celled.bulleted.list .item {
+.ui.celled.bulleted.list > .item {
   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;
 }
 /* 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;
 }
+.ui.celled.ordered.list .item .list {
+  margin-left: -2em;
+}
 /* Celled Horizontal */
-ul.ui.horizontal.celled.list,
 .ui.horizontal.celled.list {
   margin-left: 0em;
 }
-ul.ui.horizontal.celled.list li,
 .ui.horizontal.celled.list .item {
   border-top: none;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
@@ -294,8 +346,31 @@ ul.ui.horizontal.celled.list li,
   padding-right: 0.75em;
   line-height: 0.6;
 }
-ul.ui.horizontal.celled.list li:last-child,
 .ui.horizontal.celled.list .item:last-child {
   border-bottom: none;
   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;
+}

node/src/files/stylesheets/semantic.css

@@ -272,18 +272,6 @@ a:hover {
 }
 
 /* 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 {
   list-style-position: inside;
   margin: 10px 0px 0px;

src/elements/button.less

@@ -25,8 +25,8 @@
 
   outline: none;
   border: none;
-  background-color: #999999;
-  color: #FFFFFF;
+  background-color: #EBEBEB;
+  color: #999999;
 
   padding: 0.8em 1.5em;
 
@@ -186,20 +186,20 @@
   opacity: 1 !important;
   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:
-    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:
-    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:
-    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,
@@ -217,6 +217,7 @@
 .ui.button.hover {
   opacity: 1 !important;
   background-color: #A4A4A4;
+  color: #FFFFFF;
 }
 .ui.button:hover .icon,
 .ui.button.hover .icon {
@@ -229,9 +230,10 @@
 
 /* Down */
 .ui.button:active,
-.ui.button.pressed {
+.ui.button.down {
   opacity: 1 !important;
   background-color: #8C8C8C;
+  color: #FFFFFF;
 
   -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;
@@ -634,17 +636,17 @@
 
 .ui.buttons.mini .button,
 .ui.mini.button {
-  font-size: 0.8rem;
+  font-size: 0.8125rem;
   padding: 0.6em 0.8em;
 }
 .ui.tiny.buttons .button,
 .ui.tiny.button {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
   padding: 0.6em 0.8em;
 }
 .ui.small.buttons .button,
 .ui.small.button {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
 }
 .ui.large.buttons .button,
 .ui.large.button {

src/elements/list.less

@@ -15,34 +15,38 @@
 *******************************/
 
 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 {
+  padding: 0.5em 0em 0.5em 1.2em;
+}
 
 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;
 }
 
 
-ul.ui.list li:first-child,
-.ui.list .item:first-child {
-  border-top: none;
-}
-
-
 /*******************************
             Content
 *******************************/
 
 /* List Item */
 ul.ui.list li,
+ol.ui.list li,
 .ui.list .item {
   display: list-item;
   list-style-type: none;
@@ -53,12 +57,30 @@ ul.ui.list li,
 }
 
 /* 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 */
-ul.ui.list a,
 .ui.list a {
   cursor: pointer;
 }
@@ -86,19 +108,17 @@ ul.ui.list a,
 /*-------------------
       Horizontal
 --------------------*/
-ul.ui.horizontal.list,
+
 .ui.horizontal.list {
   display: inline-block;
   font-size: 0em;
 }
-ul.ui.horizontal.list li,
 .ui.horizontal.list .item {
   display: inline-block;
   margin-left: 1em;
   font-size: 1rem;
 }
 
-ul.ui.horizontal.list li:first-child,
 .ui.horizontal.list .item:first-child {
   margin-left: 0em;
 }
@@ -123,10 +143,61 @@ ul.ui.horizontal.list li:first-child,
            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
 --------------------*/
+
 ul.ui.bulleted.list,
 .ui.bulleted.list {
   margin-left: 1em;
@@ -146,7 +217,6 @@ ul.ui.bulleted.list li:before,
 }
 
 /* Horizontal Bulleted */
-
 ul.ui.horizontal.bulleted.list,
 .ui.horizontal.bulleted.list {
   margin-left: 0em;
@@ -173,47 +243,49 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
 --------------------*/
 
 ol.ui.list,
-ul.ui.ordered.list,
 .ui.ordered.list {
   counter-reset: ordered;
   margin-left: 2em;
+  list-style-type: none;
 }
 ol.ui.list li,
-ul.ui.ordered.list li,
 .ui.ordered.list .item {
-  counter-increment: ordered;
+  list-style-type: none;
   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;
-  padding-right: 0.5em;
+  counter-increment: ordered;
+  content: counters(ordered, ".");
 
   text-align: right;
-  line-height: 1.2rem;
   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 */
 ol.ui.horizontal.list,
-ul.ui.ordered.horizontal.list,
 .ui.ordered.horizontal.list {
   margin-left: 0em;
 }
 ol.ui.horizontal.list li:before,
-ul.ui.ordered.horizontal.list li:before,
 .ui.ordered.horizontal.list .item:before {
   position: static;
-  margin: 0em;
+  margin: 0em 0.5em 0em 0em;
 }
 
 
@@ -221,55 +293,62 @@ ul.ui.ordered.horizontal.list li:before,
        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);
   padding-left: 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 {
-  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 */
-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 {
+.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 {
+.ui.divided.ordered.list > .item:before {
   left: 0em;
 }
+.ui.divided.ordered.list .item .list {
+  margin-left: -2em;
+}
 
 
 /* Divided horizontal */
-ul.ui.divided.horizontal.list,
 .ui.divided.horizontal.list {
   margin-left: 0em;
 }
-ul.ui.divided.horizontal.list li,
 .ui.divided.horizontal.list .item {
   border-top: none;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
@@ -279,7 +358,6 @@ ul.ui.divided.horizontal.list li,
 
   line-height: 0.6;
 }
-ul.ui.horizontal.divided.list li:first-child,
 .ui.horizontal.divided.list .item:first-child {
   border-left: none;
   padding-left: 0em;
@@ -292,54 +370,57 @@ ul.ui.horizontal.divided.list li:first-child,
         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);
   padding-left: 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);
 }
 
+/* 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 */
-ul.ui.celled.bulleted.list,
 .ui.celled.bulleted.list {
   margin-left: 0em;
 }
-ul.ui.celled.bulleted.list li,
-.ui.celled.bulleted.list .item {
+.ui.celled.bulleted.list > .item {
   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;
 }
 
 /* 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;
 }
+.ui.celled.ordered.list .item .list {
+  margin-left: -2em;
+}
 
 /* Celled Horizontal */
-ul.ui.horizontal.celled.list,
 .ui.horizontal.celled.list {
   margin-left: 0em;
 }
-ul.ui.horizontal.celled.list li,
 .ui.horizontal.celled.list .item {
   border-top: none;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
@@ -349,8 +430,34 @@ ul.ui.horizontal.celled.list li,
 
   line-height: 0.6;
 }
-ul.ui.horizontal.celled.list li:last-child,
 .ui.horizontal.celled.list .item:last-child {
   border-bottom: none;
   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;
 }