Adds inverted list styles, fixes styling of lists inside horizontal lists

src/views/list.less

@@ -65,31 +65,34 @@ ol.ui.list li,
   visibility: hidden;
 }
 
+/* Sub-List */
+.ui.list .list {
+  clear: both;
+}
 
 /* Icon */
 .ui.list .item > .icon {
-  display: table-cell;
-  margin: 0em;
-  padding: 0.1em 0.5em 0em 0em;
-  vertical-align: top;
+  display: block;
+  float: left;
+  margin: 0em 1em 0em 0em;
+  padding: 0.1em 0em 0em 0em;
 }
 .ui.list .item > .icon:only-child {
   display: inline-block;
 }
 .ui.horizontal.list .item > .icon {
+  float: none;
+  display: inline-block;
+  margin: 0em;
   padding: 0em 0.25em 0em 0em;
 }
 
 /* Image */
 .ui.list .item > img {
-  display: inline-block;
-  width: 2em;
-  margin-right: 0.5em;
-
+  display: block;
+  float: left;
+  margin-right: 1em;
   vertical-align: middle;
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
 }
 
 /* Content */
@@ -99,9 +102,8 @@ ol.ui.list li,
   line-height: 1.2;
 }
 .ui.list .item > .icon + .content {
-  display: table-cell;
+  float: left;
   vertical-align: top;
-  padding-left: 0.5em;
 }
 
 /* Link */
@@ -120,7 +122,6 @@ ol.ui.list li,
 
 /* Header */
 .ui.list .header {
-  margin-bottom: 0.25em;
   font-weight: bold;
 }
 .ui.list .description {
@@ -151,15 +152,19 @@ ol.ui.list li,
   display: inline-block;
   font-size: 0em;
 }
-.ui.horizontal.list .item {
+.ui.horizontal.list > .item {
   display: inline-block;
   margin-left: 1em;
   font-size: 1rem;
 }
-
-.ui.horizontal.list .item:first-child {
+.ui.horizontal.list > .item:first-child {
   margin-left: 0em;
 }
+.ui.horizontal.list .list {
+  padding-left: 0em;
+  padding-bottom: 0em;
+}
+
 
 /*******************************
              States
@@ -179,16 +184,30 @@ ol.ui.list li,
            Variations
 *******************************/
 
+/*-------------------
+       Inverted
+--------------------*/
+
+.ui.inverted.list a .icon {
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.inverted.list .description {
+  color: rgba(255, 255, 255, 0.8);
+}
+.ui.inverted.link.list .item {
+  color: rgba(255, 255, 255, 0.4);
+}
+
 /*-------------------
        Link
 --------------------*/
 
 .ui.link.list .item {
-  color: rgba(0, 0, 0, 0.4);
+  color: rgba(0, 0, 0, 0.3);
 }
 .ui.link.list a.item,
 .ui.link.list .item a {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(0, 0, 0, 0.5);
 }
 .ui.link.list a.item:hover,
 .ui.link.list .item a:hover {
@@ -196,13 +215,31 @@ ol.ui.list li,
 }
 .ui.link.list a.item:active,
 .ui.link.list .item a:active {
-  color: rgba(0, 0, 0, 0.9);
+  color: rgba(0, 0, 0, 0.8);
 }
 .ui.link.list a.active.item,
 .ui.link.list .active.item a {
   color: rgba(0, 0, 0, 0.8);
 }
 
+/* Inverted */
+.ui.inverted.link.list a.item,
+.ui.inverted.link.list .item a {
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.inverted.link.list a.item:hover,
+.ui.inverted.link.list .item a:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+.ui.inverted.link.list a.item:active,
+.ui.inverted.link.list .item a:active {
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.link.list a.active.item,
+.ui.inverted.link.list .active.item a {
+  color: rgba(255, 255, 255, 0.8);
+}
+
 /*-------------------
       Selection
 --------------------*/
@@ -212,26 +249,6 @@ ol.ui.list li,
   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,
@@ -242,13 +259,6 @@ ol.ui.list li,
   background-color: rgba(0, 0, 0, 0.02);
   color: rgba(0, 0, 0, 0.7);
 }
-.ui.selection.list:not(.horizontal):not(.ordered) .item:hover {
-  padding-left: 1em;
-}
-.ui.selection.list:not(.horizontal):not(.ordered) .item:hover .item:hover {
-  padding-left: 0.5em;
-}
-
 .ui.selection.list .item:active {
   background-color: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.7);
@@ -258,6 +268,38 @@ ol.ui.list li,
   color: rgba(0, 0, 0, 0.7);
 }
 
+.ui.animated.list .item {
+  transition:
+    0.2s color ease,
+    0.2s padding-left ease,
+    0.2s background-color ease
+  ;
+}
+.ui.animated.list:not(.horizontal) .item:hover {
+  padding-left: 1em;
+}
+.ui.animated.list:not(.horizontal) .item:hover .item:hover {
+  padding-left: 0.5em;
+}
+
+
+/* Inverted */
+.ui.inverted.selection.list .item {
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.inverted.selection.list .item:hover {
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.8);
+}
+.ui.inverted.selection.list .item:active {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.7);
+}
+.ui.inverted.selection.list .item.active {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #FFFFFF;
+}
+
 
 
 /*-------------------
@@ -365,7 +407,7 @@ ol.ui.horizontal.list li:before,
 --------------------*/
 
 .ui.divided.list > .item,
-.ui.divided.list > .list {
+.ui.divided.list:not(.horizontal) > .list {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-left: 0.5em;
   padding-right: 0.5em;
@@ -378,15 +420,15 @@ ol.ui.horizontal.list li:before,
 }
 
 /* Sub Menu */
-.ui.divided.list .list {
+.ui.divided.list:not(.horizontal) .list {
   margin-left: -0.5em;
   margin-right: -0.5em;
 }
-.ui.divided.list .list .item {
+.ui.divided.list:not(.horizontal) .list .item {
   padding-left: 1em;
   padding-right: 1em;
 }
-.ui.divided.list .list .item:first-child {
+.ui.divided.list:not(.horizontal) .list .item:first-child {
   border-top-width: 1px;
 }
 
@@ -422,7 +464,7 @@ ol.ui.horizontal.list li:before,
 .ui.divided.horizontal.list {
   margin-left: 0em;
 }
-.ui.divided.horizontal.list .item {
+.ui.divided.horizontal.list > .item {
   border-top: none;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
   margin: 0em;
@@ -431,11 +473,19 @@ ol.ui.horizontal.list li:before,
 
   line-height: 0.6;
 }
-.ui.horizontal.divided.list .item:first-child {
+.ui.horizontal.divided.list > .item:first-child {
   border-left: none;
   padding-left: 0em;
 }
 
+/* Inverted */
+.ui.divided.inverted.list > .item,
+.ui.divided.inverted.list > .list {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.ui.divided.inverted.horizontal.list .item {
+  border-color: rgba(255, 255, 255, 0.2);
+}
 
 
 
@@ -510,6 +560,17 @@ ol.ui.horizontal.list li:before,
   border-right: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+/* Inverted */
+.ui.celled.inverted.list > .item,
+.ui.celled.inverted.list > .list {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.ui.celled.inverted.horizontal.list .item {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+
+
 /*-------------------
        Relaxed
 --------------------*/
@@ -518,6 +579,9 @@ ol.ui.horizontal.list li:before,
   padding-top: 0.5em;
   padding-bottom: 0.5em;
 }
+.ui.relaxed.list .header {
+  margin-bottom: 0.25em;
+}
 .ui.horizontal.relaxed.list .item {
   padding-left: 1.25em;
   padding-right: 1.25em;
@@ -527,6 +591,9 @@ ol.ui.horizontal.list li:before,
   padding-top: 1em;
   padding-bottom: 1em;
 }
+.ui.very.relaxed.list .header {
+  margin-bottom: 0.5em;
+}
 .ui.horizontal.very.relaxed.list .item {
   padding-left: 2em;
   padding-right: 2em;