Adds more examples to groups

Former-commit-id: 552cca8f91f2674f96ade0813f5068272efaac3d Former-commit-id: 8ec643d447d84ab0fc9266d1d4e60822be678665
12 years ago · 8f74ceb2e5
5 changed files with 220 additions and 159 deletions
--- a/node/src/documents/collection.html
+++ b/node/src/documents/collection.html
@ -9,72 +9,87 @@ type   : 'Library'
 <div class="segment">
  <div class="container">
    <h1>UI Collection</h1>
-    <p>UI collections are heterogeneous groups of elements with related functions.</p>
+    <p>UI collections are heterogeneous groups of elements<p>
  </div>
 </div>
 <div class="main container">
-    
-  <div class="peek">
-    <div class="ui vertical pointing link menu">
-      <div class="active item">Definition</div>
-      <div class="item">Distinction</div>
-    </div>
-  </div>
-  <h2>Definition</h2>
-  
-  <p>UI collections are groupings that may or may not contain different types of elements inside. For example, some forms may have dropdown boxes, others may have only input fields.</p>
  
  <h2>Types of Collections</h2>
  
  <div class="ui horizontal items">
-    
    <div class="item">
      <div class="image">
-        <div class="ui teal fluid button">Follow</div>
+        <div class="ui fluid form">
+          <div class="field">
+            <label>Name</label>
+            <input class="ui input" placeholder="Name">
+          </div>
+          <div class="field">
+            <label>E-mail</label>
+            <input class="ui input" placeholder="E-mail">
+          </div>
+        </div>
      </div>
      <div class="content">
-        <div class="name">Button</div>
-        <p>A button indicates a possible user action.</p>
+        <a href="/collections/form.html" class="name">Form</a>
+        <p>A form is used to solicit a user response</p>
      </div>
    </div>
    <div class="item">
      <div class="image">
-        <div class="ui large teal label">New</div>
-        <div class="ui large red label">Popular</div><br><br>
-        <div class="ui large orange label">User Favorite</div>
+        <div class="ui three column grid">
+          <div class="column">One</div>
+          <div class="column">Two</div>
+          <div class="column">Three</div>
+        </div>
      </div>
      <div class="content">
-        <div class="name">Label</div>
-        <p>A button indicates a possible user action.</p>
+        <a href="/collections/grid.html" class="name">Grid</a>
+        <p>A grid helps harmonize negative space in a layout</p>
      </div>
    </div>
    <div class="item">
      <div class="image">
-        <div class="ui fluid form">
-          <div class="field">
-            <label>Name</label>
-            <input class="ui input" placeholder="Name">
-          </div>
-          <div class="field">
-            <label>E-mail</label>
-            <input class="ui input" placeholder="E-mail">
-          </div>
+        <div class="ui inverted compact menu">
+          <div class="item">Friends</div>
+          <div class="item">Messages</div>
        </div>
      </div>
      <div class="content">
-        <div class="name">Form</div>
-        <p>A form is used to solicit a user response</p>
+        <a href="/collections/menu.html" class="name">Menu</a>
+        <p>A menu organizes related links</p>
+      </div>
+    </div>
+    <div class="item">
+      <div class="image">
+        <table class="ui table">
+          <thead>
+            <th>Name</th>
+            <th>Status</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>John</td>
+              <td class="positive"><i class="icon check"></i> Approved</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="content">
+        <a href="/collections/table.html" class="name">Table</a>
+        <p>A table organizes data that is grouped into rows</p>
      </div>
    </div>
    <div class="item">
      <div class="image">
-        <div class="ui info block">
-          <p>You forgot to <b>do something</b></p>
+        <div class="ui warning block">
+          <div class="header">Alert</div>
+          <p>You forgot your name!</p>
        </div>
      </div>
      <div class="content">
-        <div class="name">Text Block</div>
-        <p>A text block is used to show a special message.</p>
+        <a href="collections/block.html" class="name">Text Block</a>
+        <p>A text block is used to alert a user.</p>
      </div>
    </div>
    
--- a/node/src/documents/element.html
+++ b/node/src/documents/element.html
@ -26,6 +26,30 @@ type   : 'Library'
  
  <h2>Distinction</h2>
  
+  <div class="ui horizontal items">
+    
+    <div class="item">
+      <div class="image">
+        <div class="ui teal fluid button">Follow</div>
+      </div>
+      <div class="content">
+        <div class="name">Button</div>
+        <p>A button indicates a possible user action.</p>
+      </div>
+    </div>
+    <div class="item">
+      <div class="image">
+        <div class="ui large teal label">New</div>
+        <div class="ui large red label">Popular</div><br><br>
+        <div class="ui large orange label">User Favorite</div>
+      </div>
+      <div class="content">
+        <div class="name">Label</div>
+        <p>A button indicates a possible user action.</p>
+      </div>
+    </div>
+  </div>
+  
 </div>
 </body>

--- a/node/src/files/components/semantic/src/collections/items.css
+++ b/node/src/files/components/semantic/src/collections/items.css
@ -6,7 +6,7 @@
     Sizing
 ---------------*/

-.ui.items .item {
+.ui.items > .item {
  float: left;
  display: block;

@ -34,12 +34,12 @@
  margin-left: -1%;
  margin-right: -1%;
 }
-.ui.two.items .item {
+.ui.two.items > .item {
  width: 48%;
  margin-left: 1%;
  margin-right: 1%;
 }
-.ui.two.items .item:nth-child(2n+1) {
+.ui.two.items > .item:nth-child(2n+1) {
  clear: left;
 }

@ -47,12 +47,12 @@
  margin-left: -1%;
  margin-right: -1%;
 }
-.ui.three.items .item {
+.ui.three.items > .item {
  width: 31.333%;
  margin-left: 1%;
  margin-right: 1%;
 }
-.ui.three.items .item:nth-child(3n+1) {
+.ui.three.items > .item:nth-child(3n+1) {
  clear: left;
 }

@ -60,12 +60,12 @@
  margin-left: -0.5%;
  margin-right: -0.5%;
 }
-.ui.four.items .item {
+.ui.four.items > .item {
  width: 24%;
  margin-left: 0.5%;
  margin-right: 0.5%;
 }
-.ui.four.items .item:nth-child(4n+1) {
+.ui.four.items > .item:nth-child(4n+1) {
  clear: left;
 }

@ -73,12 +73,12 @@
  margin-left: -0.5%;
  margin-right: -0.5%;
 }
-.ui.five.items .item {
+.ui.five.items > .item {
  width: 19%;
  margin-left: 0.5%;
  margin-right: 0.5%;
 }
-.ui.five.items .item:nth-child(5n+1) {
+.ui.five.items > .item:nth-child(5n+1) {
  clear: left;
 }

@ -86,12 +86,12 @@
  margin-left: -0.5%;
  margin-right: -0.5%;
 }
-.ui.six.items .item {
+.ui.six.items > .item {
  width: 15.66%;
  margin-left: 0.5%;
  margin-right: 0.5%;
 }
-.ui.six.items .item:nth-child(6n+1) {
+.ui.six.items > .item:nth-child(6n+1) {
  clear: left;
 }

@ -99,13 +99,13 @@
  margin-left: -0.5%;
  margin-right: -0.5%;
 }
-.ui.seven.items .item {
+.ui.seven.items > .item {
  width: 13.28%;
  margin-left: 0.5%;
  margin-right: 0.5%;
  font-size: 11px;
 }
-.ui.seven.items .item:nth-child(7n+1) {
+.ui.seven.items > .item:nth-child(7n+1) {
  clear: left;
 }

@ -113,13 +113,13 @@
  margin-left: -0.25%;
  margin-right: -0.25%;
 }
-.ui.eight.items .item {
+.ui.eight.items > .item {
  width: 12.0%;
  margin-left: 0.25%;
  margin-right: 0.25%;
  font-size: 11px;
 }
-.ui.eight.items .item:nth-child(8n+1) {
+.ui.eight.items > .item:nth-child(8n+1) {
  clear: left;
 }

@ -127,13 +127,13 @@
  margin-left: -0.25%;
  margin-right: -0.25%;
 }
-.ui.nine.items .item {
+.ui.nine.items > .item {
  width: 10.61%;
  margin-left: 0.25%;
  margin-right: 0.25%;
  font-size: 10px;
 }
-.ui.nine.items .item:nth-child(9n+1) {
+.ui.nine.items > .item:nth-child(9n+1) {
  clear: left;
 }

@ -141,13 +141,13 @@
  margin-left: -0.2%;
  margin-right: -0.2%;
 }
-.ui.ten.items .item {
+.ui.ten.items > .item {
  width: 9.6%;
  margin-left: 0.2%;
  margin-right: 0.2%;
  font-size: 10px;
 }
-.ui.ten.items .item:nth-child(10n+1) {
+.ui.ten.items > .item:nth-child(10n+1) {
  clear: left;
 }

@ -155,13 +155,13 @@
  margin-left: -0.2%;
  margin-right: -0.2%;
 }
-.ui.eleven.items .item {
+.ui.eleven.items > .item {
  width: 8.69%;
  margin-left: 0.2%;
  margin-right: 0.2%;
  font-size: 9px;
 }
-.ui.eleven.items .item:nth-child(11n+1) {
+.ui.eleven.items > .item:nth-child(11n+1) {
  clear: left;
 }

@ -169,13 +169,13 @@
  margin-left: -0.1%;
  margin-right: -0.1%;
 }
-.ui.twelve.items .item {
+.ui.twelve.items > .item {
  width: 8.1333%;
  margin-left: 0.1%;
  margin-right: 0.1%;
  font-size: 9px;
 }
-.ui.twelve.items .item:nth-child(12n+1) {
+.ui.twelve.items > .item:nth-child(12n+1) {
  clear: left;
 }

@ -203,25 +203,34 @@
 .ui.items > .item {
  display: block;
  position: relative;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin: 0.5em 0em;

-  min-height: 50px;
+  min-height: 3em;
  background-color: #FFFFFF;

-  -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+  -moz-border-radius: 0.33em;
+  -webkit-border-radius: 0.33em;
+  border-radius: 0.33em;

-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
+  padding: 0.5em;
+}
+
+.ui.items > .item > .image {
+  background-color: rgba(0, 0, 0, 0.05);
+  display: table-cell;

-  padding: 0.7%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
 }

-.ui.items .item > .image a,
-.ui.items .item > .image img {
+.ui.items > .item > .image a,
+.ui.items > .item > .image img {
  position: relative;
  display: block;
  width: 100%;
@ -230,7 +239,7 @@
  -moz-border-radius: 3px;
  border-radius: 3px;
 }
-.ui.items .item > .image a:after {
+.ui.items > .item > .image a:after {
  position: absolute;
  display: block;
  content: '';
@ -245,7 +254,7 @@
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset;
 }
-.ui.items .item > .image .overlay {
+.ui.items > .item > .image .overlay {
  position: absolute;
  bottom: 0px;
  left: 0px;
@ -264,44 +273,44 @@

  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
 }
-.ui.items .item > .image .overlay i {
+.ui.items > .item > .image .overlay i {
  font-size: 1.3em;
  font-weight: bold;
 }

 /* Content */
-.ui.items .item > .content {
+.ui.items > .item > .content {
  padding: 4% 1% 6%;
  color: #888888;
 }
-.ui.items .item > .content > .name,
-.ui.items .item > .content > .title {
+.ui.items > .item > .content > .name,
+.ui.items > .item > .content > .title {
  margin-bottom: 1%;

  font-size: 1.2em;
  font-weight: bold;
  color: #009FDA;
 }
-.ui.items .item > .content p {
+.ui.items > .item > .content p {
  line-height: 1.33;
  margin: 0% 0% 5%;
 }
-.ui.items .item > .content :last-child {
+.ui.items > .item > .content :last-child {
  margin-bottom: 0%;
 }


 /* Optional Content */
-.ui.items .item > .extra {
+.ui.items > .item > .extra {
  color: #C6C7C9;
  padding: 0% 1% 1%;
 }
-.ui.items .item > .extra img {
+.ui.items > .item > .extra img {
  display: inline-block;
  vertical-align: middle;
 }

-.ui.items .item .avatar {
+.ui.items > .item .avatar {
  display: inline-block;
  width: 5.5%;
  min-width: 15px;
@ -313,54 +322,54 @@
       Table Items
 *******************************/

-.ui.horizontal.items .item,
-.ui.items .horizontal.item {
+.ui.horizontal.items > .item,
+.ui.items > .horizontal.item {
  display: table;
 }
 /* prevents reflow bug in chrome by targeting webkit browser */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .ui.items .item {
+  .ui.items > .item {
    display: block;
  }
 }

-.ui.horizontal.items .item > .image
-.ui.items .horizontal.item > .image {
+.ui.horizontal.items > .item > .image
+.ui.items > .horizontal.item > .image {
  display: table-cell;
  width: 50%;
 }
-.ui.horizontal.items .item > .image + .content,
-.ui.items .horizontal.item > .image + .content {
+.ui.horizontal.items > .item > .image + .content,
+.ui.items > .horizontal.item > .image + .content {
  width: 50%;
  display: table-cell;
 }
-.ui.horizontal.items .item > .content,
-.ui.items .horizontal.item > .content {
+.ui.horizontal.items > .item > .content,
+.ui.items > .horizontal.item > .content {
  padding: 1% 1.7% 11% 3%;
  vertical-align: top;
 }

-.ui.horizontal.items .item > .extra,
-.ui.items .horizontal.item > .extra {
+.ui.horizontal.items > .item > .extra,
+.ui.items > .horizontal.item > .extra {
  position: absolute;
  padding: 0%;
  bottom: 7%;
  left: 3%;
  width: 94%;
 }
-.ui.horizontal.items .item > .image + .content + .extra,
-.ui.items .horizontal.item > .image + .content + .extra {
+.ui.horizontal.items > .item > .image + .content + .extra,
+.ui.items > .horizontal.item > .image + .content + .extra {
  bottom: 7%;
  left: 53%;
  width: 44%;
 }


-.ui.horizontal.items .item .avatar,
-.ui.items .horizontal.item .avatar {
+.ui.horizontal.items > .item .avatar,
+.ui.items > .horizontal.item .avatar {
  width: 11.5%;
 }

-.ui.items .item .avatar {
+.ui.items > .item .avatar {
  max-width: 25px;
 }
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@ -553,6 +553,10 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
  opacity: 1;
 }

+#example .ui.items > .item > .image {
+  padding: 1em;
+  vertical-align: middle;
+}

 /* some demo formatting */
 .ui.menu p:only-child {
--- a/src/collections/items.css
+++ b/src/collections/items.css
@ -6,7 +6,7 @@
     Sizing
 ---------------*/

-.ui.items .item {
+.ui.items > .item {
  float: left;
  display: block;

@ -34,12 +34,12 @@
  margin-left: -1%;
  margin-right: -1%;
 }
-.ui.two.items .item {
+.ui.two.items > .item {
  width: 48%;
  margin-left: 1%;
  margin-right: 1%;
 }
-.ui.two.items .item:nth-child(2n+1) {
+.ui.two.items > .item:nth-child(2n+1) {
  clear: left;
 }

@ -47,12 +47,12 @@
  margin-left: -1%;
  margin-right: -1%;
 }
-.ui.three.items .item {
+.ui.three.items > .item {
  width: 31.333%;
  margin-left: 1%;
  margin-right: 1%;
 }
-.ui.three.items .item:nth-child(3n+1) {
+.ui.three.items > .item:nth-child(3n+1) {
  clear: left;
 }

@ -60,12 +60,12 @@
  margin-left: -0.5%;
  margin-right: -0.5%;
 }
-.ui.four.items .item {
+.ui.four.items > .item {
  width: 24%;
  margin-left: 0.5%;
  margin-right: 0.5%;
 }
-.ui.four.items .item:nth-child(4n+1) {
+.ui.four.items > .item:nth-child(4n+1) {
  clear: left;
 }

@ -73,12 +73,12 @@
  margin-left: -0.5%;
  margin-right: -0.5%;
 }
-.ui.five.items .item {
+.ui.five.items > .item {
  width: 19%;
  margin-left: 0.5%;
  margin-right: 0.5%;
 }
-.ui.five.items .item:nth-child(5n+1) {
+.ui.five.items > .item:nth-child(5n+1) {
  clear: left;
 }

@ -86,12 +86,12 @@
  margin-left: -0.5%;
  margin-right: -0.5%;
 }
-.ui.six.items .item {
+.ui.six.items > .item {
  width: 15.66%;
  margin-left: 0.5%;
  margin-right: 0.5%;
 }
-.ui.six.items .item:nth-child(6n+1) {
+.ui.six.items > .item:nth-child(6n+1) {
  clear: left;
 }

@ -99,13 +99,13 @@
  margin-left: -0.5%;
  margin-right: -0.5%;
 }
-.ui.seven.items .item {
+.ui.seven.items > .item {
  width: 13.28%;
  margin-left: 0.5%;
  margin-right: 0.5%;
  font-size: 11px;
 }
-.ui.seven.items .item:nth-child(7n+1) {
+.ui.seven.items > .item:nth-child(7n+1) {
  clear: left;
 }

@ -113,13 +113,13 @@
  margin-left: -0.25%;
  margin-right: -0.25%;
 }
-.ui.eight.items .item {
+.ui.eight.items > .item {
  width: 12.0%;
  margin-left: 0.25%;
  margin-right: 0.25%;
  font-size: 11px;
 }
-.ui.eight.items .item:nth-child(8n+1) {
+.ui.eight.items > .item:nth-child(8n+1) {
  clear: left;
 }

@ -127,13 +127,13 @@
  margin-left: -0.25%;
  margin-right: -0.25%;
 }
-.ui.nine.items .item {
+.ui.nine.items > .item {
  width: 10.61%;
  margin-left: 0.25%;
  margin-right: 0.25%;
  font-size: 10px;
 }
-.ui.nine.items .item:nth-child(9n+1) {
+.ui.nine.items > .item:nth-child(9n+1) {
  clear: left;
 }

@ -141,13 +141,13 @@
  margin-left: -0.2%;
  margin-right: -0.2%;
 }
-.ui.ten.items .item {
+.ui.ten.items > .item {
  width: 9.6%;
  margin-left: 0.2%;
  margin-right: 0.2%;
  font-size: 10px;
 }
-.ui.ten.items .item:nth-child(10n+1) {
+.ui.ten.items > .item:nth-child(10n+1) {
  clear: left;
 }

@ -155,13 +155,13 @@
  margin-left: -0.2%;
  margin-right: -0.2%;
 }
-.ui.eleven.items .item {
+.ui.eleven.items > .item {
  width: 8.69%;
  margin-left: 0.2%;
  margin-right: 0.2%;
  font-size: 9px;
 }
-.ui.eleven.items .item:nth-child(11n+1) {
+.ui.eleven.items > .item:nth-child(11n+1) {
  clear: left;
 }

@ -169,13 +169,13 @@
  margin-left: -0.1%;
  margin-right: -0.1%;
 }
-.ui.twelve.items .item {
+.ui.twelve.items > .item {
  width: 8.1333%;
  margin-left: 0.1%;
  margin-right: 0.1%;
  font-size: 9px;
 }
-.ui.twelve.items .item:nth-child(12n+1) {
+.ui.twelve.items > .item:nth-child(12n+1) {
  clear: left;
 }

@ -203,25 +203,34 @@
 .ui.items > .item {
  display: block;
  position: relative;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin: 0.5em 0em;

-  min-height: 50px;
+  min-height: 3em;
  background-color: #FFFFFF;

-  -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+  -moz-border-radius: 0.33em;
+  -webkit-border-radius: 0.33em;
+  border-radius: 0.33em;

-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
+  padding: 0.5em;
+}
+
+.ui.items > .item > .image {
+  background-color: rgba(0, 0, 0, 0.05);
+  display: table-cell;

-  padding: 0.7%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
 }

-.ui.items .item > .image a,
-.ui.items .item > .image img {
+.ui.items > .item > .image a,
+.ui.items > .item > .image img {
  position: relative;
  display: block;
  width: 100%;
@ -230,7 +239,7 @@
  -moz-border-radius: 3px;
  border-radius: 3px;
 }
-.ui.items .item > .image a:after {
+.ui.items > .item > .image a:after {
  position: absolute;
  display: block;
  content: '';
@ -245,7 +254,7 @@
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset;
 }
-.ui.items .item > .image .overlay {
+.ui.items > .item > .image .overlay {
  position: absolute;
  bottom: 0px;
  left: 0px;
@ -264,44 +273,44 @@

  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
 }
-.ui.items .item > .image .overlay i {
+.ui.items > .item > .image .overlay i {
  font-size: 1.3em;
  font-weight: bold;
 }

 /* Content */
-.ui.items .item > .content {
+.ui.items > .item > .content {
  padding: 4% 1% 6%;
  color: #888888;
 }
-.ui.items .item > .content > .name,
-.ui.items .item > .content > .title {
+.ui.items > .item > .content > .name,
+.ui.items > .item > .content > .title {
  margin-bottom: 1%;

  font-size: 1.2em;
  font-weight: bold;
  color: #009FDA;
 }
-.ui.items .item > .content p {
+.ui.items > .item > .content p {
  line-height: 1.33;
  margin: 0% 0% 5%;
 }
-.ui.items .item > .content :last-child {
+.ui.items > .item > .content :last-child {
  margin-bottom: 0%;
 }


 /* Optional Content */
-.ui.items .item > .extra {
+.ui.items > .item > .extra {
  color: #C6C7C9;
  padding: 0% 1% 1%;
 }
-.ui.items .item > .extra img {
+.ui.items > .item > .extra img {
  display: inline-block;
  vertical-align: middle;
 }

-.ui.items .item .avatar {
+.ui.items > .item .avatar {
  display: inline-block;
  width: 5.5%;
  min-width: 15px;
@ -313,54 +322,54 @@
       Table Items
 *******************************/

-.ui.horizontal.items .item,
-.ui.items .horizontal.item {
+.ui.horizontal.items > .item,
+.ui.items > .horizontal.item {
  display: table;
 }
 /* prevents reflow bug in chrome by targeting webkit browser */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .ui.items .item {
+  .ui.items > .item {
    display: block;
  }
 }

-.ui.horizontal.items .item > .image
-.ui.items .horizontal.item > .image {
+.ui.horizontal.items > .item > .image
+.ui.items > .horizontal.item > .image {
  display: table-cell;
  width: 50%;
 }
-.ui.horizontal.items .item > .image + .content,
-.ui.items .horizontal.item > .image + .content {
+.ui.horizontal.items > .item > .image + .content,
+.ui.items > .horizontal.item > .image + .content {
  width: 50%;
  display: table-cell;
 }
-.ui.horizontal.items .item > .content,
-.ui.items .horizontal.item > .content {
+.ui.horizontal.items > .item > .content,
+.ui.items > .horizontal.item > .content {
  padding: 1% 1.7% 11% 3%;
  vertical-align: top;
 }

-.ui.horizontal.items .item > .extra,
-.ui.items .horizontal.item > .extra {
+.ui.horizontal.items > .item > .extra,
+.ui.items > .horizontal.item > .extra {
  position: absolute;
  padding: 0%;
  bottom: 7%;
  left: 3%;
  width: 94%;
 }
-.ui.horizontal.items .item > .image + .content + .extra,
-.ui.items .horizontal.item > .image + .content + .extra {
+.ui.horizontal.items > .item > .image + .content + .extra,
+.ui.items > .horizontal.item > .image + .content + .extra {
  bottom: 7%;
  left: 53%;
  width: 44%;
 }


-.ui.horizontal.items .item .avatar,
-.ui.items .horizontal.item .avatar {
+.ui.horizontal.items > .item .avatar,
+.ui.items > .horizontal.item .avatar {
  width: 11.5%;
 }

-.ui.items .item .avatar {
+.ui.items > .item .avatar {
  max-width: 25px;
 }