changes to items

build/uncompressed/elements/button.css

@@ -40,11 +40,11 @@
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-  -moz-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-  -o-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  -o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-  -ms-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  -ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-  transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
 }
 /*******************************
              States
@@ -54,6 +54,7 @@
 ---------------*/
 .ui.button:hover,
 .ui.button.hover {
+  opacity: 1 !important;
   background-color: #EAEAEA;
   color: #777777;
 }
@@ -63,6 +64,7 @@
 /* Down */
 .ui.button:active,
 .ui.button.down {
+  opacity: 1 !important;
   background-color: #E6E6E6;
   color: #777777;
   -webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
@@ -74,6 +76,7 @@
 ---------------*/
 .ui.buttons .button.active,
 .ui.button.active {
+  opacity: 1 !important;
   background-color: #E6E6E6;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)));
   background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
@@ -137,42 +140,6 @@
   -webkit-border-radius: 0.2em;
   border-radius: 0.2em;
 }
-/* Opposite color loader */
-.ui.grey.button.loading,
-.ui.button.active.loading {
-  border-color: #bbbbbb;
-}
-.ui.grey.button.loading:after,
-.ui.button.active.loading:after {
-  background-color: #FAFAFA;
-  background: url(../images/throbber-tiny.gif) no-repeat 50% 50%;
-}
-/* resizes */
-/* blue */
-.ui.huge.button.loading:after {
-  background-image: url(../images/throbber-small.gif);
-}
-.ui.massive.buttons .button.loading:after,
-.ui.gigantic.buttons .button.loading:after,
-.ui.massive.button.loading:after,
-.ui.gigantic.button.loading:after {
-  background-image: url(../images/throbber-medium.gif);
-}
-/* grey */
-.ui.huge.grey.button.loading:after,
-.ui.huge.button.loading.active:after {
-  background-image: url(../images/throbber-small.gif);
-}
-.ui.massive.grey.buttons .button.loading:after,
-.ui.gigantic.grey.buttons .button.loading:after,
-.ui.massive.grey.button.loading:after,
-.ui.gigantic.grey.button.loading:after,
-.ui.massive.grey.buttons .button.loading.active:after,
-.ui.gigantic.grey.buttons .button.loading.active:after,
-.ui.massive.button.loading.active:after,
-.ui.gigantic.button.loading.active:after {
-  background-image: url(../images/throbber-medium.gif);
-}
 /*--------------
       Error
 ---------------*/
@@ -382,6 +349,21 @@
   background-color: #CD2D4D;
   color: #FFFFFF;
 }
+/*-------------------
+      Secondary
+--------------------*/
+.ui.buttons.secondary .button,
+.ui.secondary.button {
+  font-weight: normal;
+  box-shadow: none;
+  opacity: 0.7;
+}
+.ui.buttons.tertiary .button,
+.ui.tertiary.button {
+  font-weight: normal;
+  box-shadow: none;
+  opacity: 0.5;
+}
 /*-------------------
         Sizes
 --------------------*/
@@ -424,6 +406,30 @@
   padding-left: 2.5em;
   padding-right: 2.5em;
 }
+/* loading */
+.ui.huge.button.loading:after {
+  background-image: url(../images/throbber-small.gif);
+}
+.ui.massive.buttons .button.loading:after,
+.ui.gigantic.buttons .button.loading:after,
+.ui.massive.button.loading:after,
+.ui.gigantic.button.loading:after {
+  background-image: url(../images/throbber-medium.gif);
+}
+.ui.huge.grey.button.loading:after,
+.ui.huge.button.loading.active:after {
+  background-image: url(../images/throbber-small.gif);
+}
+.ui.massive.grey.buttons .button.loading:after,
+.ui.gigantic.grey.buttons .button.loading:after,
+.ui.massive.grey.button.loading:after,
+.ui.gigantic.grey.button.loading:after,
+.ui.massive.grey.buttons .button.loading.active:after,
+.ui.gigantic.grey.buttons .button.loading.active:after,
+.ui.massive.button.loading.active:after,
+.ui.gigantic.button.loading.active:after {
+  background-image: url(../images/throbber-medium.gif);
+}
 /*--------------
 Containing Icon
 ---------------*/

build/uncompressed/elements/icons.css

@@ -627,7 +627,7 @@ i.circular.icon {
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
   border-radius: 500px;
-  padding: 0.35em;
+  padding: 0.43em 0.35em 0.27em;
   border: 1px solid rgba(0, 0, 0, 0.1);
   width: 1.23em;
   height: 1.23em;

build/uncompressed/views/items.css

@@ -37,6 +37,7 @@
   display: block;
   float: left;
   position: relative;
+  top: 0px;
   width: 316px;
   min-height: 375px;
   margin: 1em 0.5em 2.5em;
@@ -51,8 +52,14 @@
   -moz-border-radius: 0.33em;
   -webkit-border-radius: 0.33em;
   border-radius: 0.33em;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  -ms-transition: all 0.2s ease;
+  transition: all 0.2s ease;
   padding: 0.5em;
 }
+.ui.items a.item,
 .ui.items .item a {
   cursor: pointer;
 }
@@ -210,6 +217,11 @@
   left: 0em;
   height: 1.5em;
   color: rgba(0, 0, 0, 0.25);
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -o-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
 }
 .ui.items .item .extra > img {
   display: inline-block;
@@ -224,6 +236,37 @@
 .ui.items .item .extra .right {
   float: right;
 }
+/*******************************
+           States
+*******************************/
+.ui.items .item:hover {
+  cursor: pointer;
+  z-index: 5;
+  top: -0.25em;
+  border-bottom-width: 0.3em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+}
+.ui.items .item:hover .extra {
+  color: rgba(0, 0, 0, 0.5);
+}
+.ui.items .item:nth-of-type(n+1):hover {
+  border-bottom-color: #6ECFF5 !important;
+}
+.ui.items .item:nth-of-type(n+2):hover {
+  border-bottom-color: #5C6166 !important;
+}
+.ui.items .item:nth-of-type(n+3):hover {
+  border-bottom-color: #A1CF64 !important;
+}
+.ui.items .item:nth-of-type(n+4):hover {
+  border-bottom-color: #EF4D6D !important;
+}
+.ui.items .item:nth-of-type(n+5):hover {
+  border-bottom-color: #564F8A !important;
+}
+.ui.items .item:nth-of-type(n+6):hover {
+  border-bottom-color: #00B5AD !important;
+}
 /*******************************
            Variations
 *******************************/
@@ -245,11 +288,15 @@
   border-radius: 0px;
   margin: 0em;
   width: 33.33%;
-  border-bottom: none;
 }
 .ui.connected.items > .row {
-  display: table-row;
+  display: table;
+  margin: 0.5em 0em;
 }
+.ui.connected.items > .row:first-child {
+  margin-top: 0em;
+}
+/* Borders */
 .ui.connected.items > .item,
 .ui.connected.items > .row:last-child > .item {
   border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
@@ -262,6 +309,11 @@
 .ui.connected.items > .item:last-child {
   border-radius: 0em 0em 0.33em 0em;
 }
+/* Hover */
+.ui.connected.items .item:hover {
+  border-bottom-width: 0.2em;
+}
+/* Item Count */
 .ui.two.connected.items > .row > .item,
 .ui.two.connected.items > .item {
   width: 50%;

node/src/documents/elements/button.html

@@ -17,12 +17,12 @@ type   : 'UI Element'
     <div class="ui vertical pointing menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
-      <a class="item">Variations</a> 
+      <a class="item">Variations</a>
       <a class="item">Groups</a>
     </div>
   </div>
   <h2 class="ui dividing header">Standard</h2>
-  
+
   <div class="example">
     <h4 class="ui header">Button:</h4>
     <p>A standard button</p>
@@ -30,51 +30,51 @@ type   : 'UI Element'
   </div>
 
   <h2 class="ui dividing header">States</h2>
-  
+
   <div class="example">
   <h4 class="ui header">Hover</h4>
   <p>Changes when a user moves their cursor over it</p>
   <div class="ui hover button">Hovered Button</div>
   </div>
-  
+
   <div class="example">
   <h4 class="ui header">Down</h4>
   <p>Changes when pressed using touch or mouse events</p>
   <div class="ui down button">Pressed Button</div>
   </div>
-  
+
   <div class="example">
   <h4 class="ui header">Active</h4>
   <p>Changes to show it is currently the selected user action</p>
   <div class="ui active button">Active Button</div>
   </div>
-  
+
   <div class="example">
   <h4 class="ui header">Disabled</h4>
   <p>Changes to show it is currently unable to be interacted with</p>
   <div class="ui disabled button">Disabled Button</div>
   </div>
-  
+
   <div class="example">
   <h4 class="ui header">Loading</h4>
   <p>Can show a loading indicator:</p>
   <div class="ui loading button">Loading Button</div>
   </div>
-  
+
   <div class="example">
   <h4 class="ui header">Success</h4>
   <p>Can alert to a succesful action:</p>
   <div class="ui success button">Successful Button</div>
   </div>
-  
+
   <div class="example">
   <h4 class="ui header">Error</h4>
   <p>Can alert user of an error:</p>
   <div class="ui error button">Error</div>
   </div>
-    
+
   <div class="example">
-    <h4 class="ui header">All together:</h4>  
+    <h4 class="ui header">All together:</h4>
     <div class="ui button">Normal</div>
     <div class="ui button hover">Hover</div>
     <div class="ui button down">Down</div>
@@ -89,7 +89,24 @@ type   : 'UI Element'
 
   <h2 class="ui dividing header">Variations</h2>
   <p>Button variations are used to explain relationships between user actions and other elements, or to show emphasis.</p>
-  
+  <div class="example">
+    <h4 class="ui header">Ordinality</h4>
+    <p>A button can be formatted to appear more or less noticable</p>
+    <div class="ui secondary button">Secondary</div>
+    <div class="ui secondary teal button">Secondary</div>
+    <div class="ui secondary purple button">Secondary</div>
+    <div class="ui secondary red button">Secondary</div>
+  </div>
+  <div class="another example">
+    <div class="ui tertiary button">Tertiary</div>
+    <div class="ui tertiary teal button">Tertiary</div>
+    <div class="ui tertiary purple button">Tertiary</div>
+    <div class="ui tertiary red button">Tertiary</div>
+  </div>
+
+
   <div class="example">
     <h4 class="ui header">Sizes</h4>
     <p>Can have different sizes:</p>
@@ -119,7 +136,7 @@ type   : 'UI Element'
     </div>
   </div>
 
-  
+
   <div class="example">
     <h4 class="ui header">Colors</h4>
     <p>Can have different colors:</p>
@@ -131,26 +148,26 @@ type   : 'UI Element'
     <a class="ui purple button">Purple Button</a>
     <a class="ui teal button">Teal Button</a>
   </div>
-  
+
   <h4 class="ui header">Feedback</h4>
   <div class="example">
     <p>Can be positive or negative:</p>
     <div class="positive ui button">Positive Button</div>
     <div class="negative ui button">Negative Button</div>
   </div>
-  
+
   <div class="example">
     <h4 class="ui header">Fluid</h4>
     <p>Can fit parent container:</p>
     <div class="fluid ui button">Fits container</div>
   </div>
-    
+
   <div class="example">
     <h4 class="ui header">Bubbly</h4>
     <p>Can be bubbly:</p>
     <div class="bubbly ui button">More bubbly</div>
   </div>
-    
+
   <div class="example">
     <h4 class="ui header">Icon</h4>
     <p>Can be formatted as an icon toolbar:</p>
@@ -158,14 +175,14 @@ type   : 'UI Element'
       <i class="icon cloud"></i>
     </div>
   </div>
-  
+
   <div class="example">
     <h4 class="ui header">Labeled Icon</h4>
     <p>can be formatted as labeled icons</p>
     <div class="ui labeled icon button"><i class="icon pause"></i> Pause</div>
   </div>
-    
+
-  
   <div class="example">
     <h4 class="ui header">Vertically Attached</h4>
     <p>Can be attached to the top or bottom of other content</p>
@@ -173,7 +190,7 @@ type   : 'UI Element'
     <div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background-color:#FFFFFF;height:200px;"></div>
     <div class="ui bottom attached button">Bottom</div>
   </div>
-  
+
   <div class="example">
     <h4 class="ui header">Horizontally Attached</h4>
     <p>Can be attached to the left or right of other content</p>
@@ -182,17 +199,9 @@ type   : 'UI Element'
     <div class="ui right attached button">Right</div>
   </div>
 
-  <div class="example">
-    <h4 class="ui header">Form Attached</h4>
-    <p>Can be attached to an input field</p>
-    <div class="ui form">
-      <input type="text" class="attached">
-      <div class="ui attached button">Search</div>
-    </div> 
-  </div> 
 
   <h2 class="ui dividing header">Group</h2>
-  
+
   <div class="example">
     <h4 class="ui header">Buttons</h4>
     <p>Can exist together as groups</p>
@@ -202,7 +211,7 @@ type   : 'UI Element'
       <div class="ui button">Three</div>
     </div>
   </div>
-    
+
   <div class="example">
     <h4 class="ui header">Conditionals</h4>
     <p>Groups can be separated by conditionals</p>
@@ -212,10 +221,10 @@ type   : 'UI Element'
       <div class="ui positive button">Save</div>
     </div>
   </div>
-  
+
   <h3 class="ui header">Plural Variations</h3>
   <p>Singular variations can be applied to groups to infer all elements share the same quality</p>
-    
+
 
 
   <div class="example">
@@ -227,7 +236,7 @@ type   : 'UI Element'
       <div class="ui button">Bottom</div>
     </div>
   </div>
-  
+
   <div class="example">
     <h4 class="ui header">Icon</h4>
     <p>Groups can be formatted as icon toolbars</p>
@@ -237,7 +246,7 @@ type   : 'UI Element'
       <div class="ui button"><i class="icon shuffle"></i></div>
     </div>
   </div>
-  
+
   <div class="example">
     <h4 class="ui header">Labeled Icon</h4>
     <p>Groups can be formatted as labeled icons</p>
@@ -247,8 +256,8 @@ type   : 'UI Element'
       <div class="ui button"><i class="icon shuffle"></i> Shuffle</div>
     </div>
   </div>
-    
+
-    
   <div class="example">
     <h4 class="ui header">Fluid</h4>
     <p>Groups can be divided evenly to fit parent</p>
@@ -260,7 +269,7 @@ type   : 'UI Element'
       <div class="ui button">Five</div>
     </div>
   </div>
-  
+
   <div class="example">
     <h4 class="ui header">Colors</h4>
     <p>Groups can have a shared color</p>
@@ -271,8 +280,8 @@ type   : 'UI Element'
     </div>
     <div class="blue large icon ui buttons">
   </div>
-    
+
-    
   <div class="example"></div>
     <h4 class="ui header">Sizes</h4>
     <p>Groups can have a shared size</p>

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

@@ -40,11 +40,11 @@
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-  -moz-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-  -o-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  -o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-  -ms-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  -ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-  transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
+  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
 }
 /*******************************
              States
@@ -54,6 +54,7 @@
 ---------------*/
 .ui.button:hover,
 .ui.button.hover {
+  opacity: 1 !important;
   background-color: #EAEAEA;
   color: #777777;
 }
@@ -63,6 +64,7 @@
 /* Down */
 .ui.button:active,
 .ui.button.down {
+  opacity: 1 !important;
   background-color: #E6E6E6;
   color: #777777;
   -webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
@@ -74,6 +76,7 @@
 ---------------*/
 .ui.buttons .button.active,
 .ui.button.active {
+  opacity: 1 !important;
   background-color: #E6E6E6;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)));
   background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
@@ -137,42 +140,6 @@
   -webkit-border-radius: 0.2em;
   border-radius: 0.2em;
 }
-/* Opposite color loader */
-.ui.grey.button.loading,
-.ui.button.active.loading {
-  border-color: #bbbbbb;
-}
-.ui.grey.button.loading:after,
-.ui.button.active.loading:after {
-  background-color: #FAFAFA;
-  background: url(../images/throbber-tiny.gif) no-repeat 50% 50%;
-}
-/* resizes */
-/* blue */
-.ui.huge.button.loading:after {
-  background-image: url(../images/throbber-small.gif);
-}
-.ui.massive.buttons .button.loading:after,
-.ui.gigantic.buttons .button.loading:after,
-.ui.massive.button.loading:after,
-.ui.gigantic.button.loading:after {
-  background-image: url(../images/throbber-medium.gif);
-}
-/* grey */
-.ui.huge.grey.button.loading:after,
-.ui.huge.button.loading.active:after {
-  background-image: url(../images/throbber-small.gif);
-}
-.ui.massive.grey.buttons .button.loading:after,
-.ui.gigantic.grey.buttons .button.loading:after,
-.ui.massive.grey.button.loading:after,
-.ui.gigantic.grey.button.loading:after,
-.ui.massive.grey.buttons .button.loading.active:after,
-.ui.gigantic.grey.buttons .button.loading.active:after,
-.ui.massive.button.loading.active:after,
-.ui.gigantic.button.loading.active:after {
-  background-image: url(../images/throbber-medium.gif);
-}
 /*--------------
       Error
 ---------------*/
@@ -382,6 +349,21 @@
   background-color: #CD2D4D;
   color: #FFFFFF;
 }
+/*-------------------
+      Secondary
+--------------------*/
+.ui.buttons.secondary .button,
+.ui.secondary.button {
+  font-weight: normal;
+  box-shadow: none;
+  opacity: 0.7;
+}
+.ui.buttons.tertiary .button,
+.ui.tertiary.button {
+  font-weight: normal;
+  box-shadow: none;
+  opacity: 0.5;
+}
 /*-------------------
         Sizes
 --------------------*/
@@ -424,6 +406,30 @@
   padding-left: 2.5em;
   padding-right: 2.5em;
 }
+/* loading */
+.ui.huge.button.loading:after {
+  background-image: url(../images/throbber-small.gif);
+}
+.ui.massive.buttons .button.loading:after,
+.ui.gigantic.buttons .button.loading:after,
+.ui.massive.button.loading:after,
+.ui.gigantic.button.loading:after {
+  background-image: url(../images/throbber-medium.gif);
+}
+.ui.huge.grey.button.loading:after,
+.ui.huge.button.loading.active:after {
+  background-image: url(../images/throbber-small.gif);
+}
+.ui.massive.grey.buttons .button.loading:after,
+.ui.gigantic.grey.buttons .button.loading:after,
+.ui.massive.grey.button.loading:after,
+.ui.gigantic.grey.button.loading:after,
+.ui.massive.grey.buttons .button.loading.active:after,
+.ui.gigantic.grey.buttons .button.loading.active:after,
+.ui.massive.button.loading.active:after,
+.ui.gigantic.button.loading.active:after {
+  background-image: url(../images/throbber-medium.gif);
+}
 /*--------------
 Containing Icon
 ---------------*/

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

@@ -627,7 +627,7 @@ i.circular.icon {
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
   border-radius: 500px;
-  padding: 0.35em;
+  padding: 0.43em 0.35em 0.27em;
   border: 1px solid rgba(0, 0, 0, 0.1);
   width: 1.23em;
   height: 1.23em;

node/src/files/components/semantic/views/items.css

@@ -37,6 +37,7 @@
   display: block;
   float: left;
   position: relative;
+  top: 0px;
   width: 316px;
   min-height: 375px;
   margin: 1em 0.5em 2.5em;
@@ -51,8 +52,14 @@
   -moz-border-radius: 0.33em;
   -webkit-border-radius: 0.33em;
   border-radius: 0.33em;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  -ms-transition: all 0.2s ease;
+  transition: all 0.2s ease;
   padding: 0.5em;
 }
+.ui.items a.item,
 .ui.items .item a {
   cursor: pointer;
 }
@@ -210,6 +217,11 @@
   left: 0em;
   height: 1.5em;
   color: rgba(0, 0, 0, 0.25);
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -o-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
 }
 .ui.items .item .extra > img {
   display: inline-block;
@@ -224,6 +236,37 @@
 .ui.items .item .extra .right {
   float: right;
 }
+/*******************************
+           States
+*******************************/
+.ui.items .item:hover {
+  cursor: pointer;
+  z-index: 5;
+  top: -0.25em;
+  border-bottom-width: 0.3em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+}
+.ui.items .item:hover .extra {
+  color: rgba(0, 0, 0, 0.5);
+}
+.ui.items .item:nth-of-type(n+1):hover {
+  border-bottom-color: #6ECFF5 !important;
+}
+.ui.items .item:nth-of-type(n+2):hover {
+  border-bottom-color: #5C6166 !important;
+}
+.ui.items .item:nth-of-type(n+3):hover {
+  border-bottom-color: #A1CF64 !important;
+}
+.ui.items .item:nth-of-type(n+4):hover {
+  border-bottom-color: #EF4D6D !important;
+}
+.ui.items .item:nth-of-type(n+5):hover {
+  border-bottom-color: #564F8A !important;
+}
+.ui.items .item:nth-of-type(n+6):hover {
+  border-bottom-color: #00B5AD !important;
+}
 /*******************************
            Variations
 *******************************/
@@ -245,11 +288,15 @@
   border-radius: 0px;
   margin: 0em;
   width: 33.33%;
-  border-bottom: none;
 }
 .ui.connected.items > .row {
-  display: table-row;
+  display: table;
+  margin: 0.5em 0em;
 }
+.ui.connected.items > .row:first-child {
+  margin-top: 0em;
+}
+/* Borders */
 .ui.connected.items > .item,
 .ui.connected.items > .row:last-child > .item {
   border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
@@ -262,6 +309,11 @@
 .ui.connected.items > .item:last-child {
   border-radius: 0em 0em 0.33em 0em;
 }
+/* Hover */
+.ui.connected.items .item:hover {
+  border-bottom-width: 0.2em;
+}
+/* Item Count */
 .ui.two.connected.items > .row > .item,
 .ui.two.connected.items > .item {
   width: 50%;

src/elements/button.less

@@ -60,34 +60,34 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   -webkit-transition:
-    opacity 0.1s linear,
+    opacity 0.1s ease,
-    color 0.1s linear,
+    color 0.1s ease,
-    background 0.1s linear,
+    background 0.1s ease,
-    box-shadow 0.1s linear
+    box-shadow 0.1s ease
   ;
   -moz-transition:
-    opacity 0.1s linear,
+    opacity 0.1s ease,
-    color 0.1s linear,
+    color 0.1s ease,
-    background 0.1s linear,
+    background 0.1s ease,
-    box-shadow 0.1s linear
+    box-shadow 0.1s ease
   ;
   -o-transition:
-    opacity 0.1s linear,
+    opacity 0.1s ease,
-    color 0.1s linear,
+    color 0.1s ease,
-    background 0.1s linear,
+    background 0.1s ease,
-    box-shadow 0.1s linear
+    box-shadow 0.1s ease
   ;
   -ms-transition:
-    opacity 0.1s linear,
+    opacity 0.1s ease,
-    color 0.1s linear,
+    color 0.1s ease,
-    background 0.1s linear,
+    background 0.1s ease,
-    box-shadow 0.1s linear
+    box-shadow 0.1s ease
   ;
   transition:
-    opacity 0.1s linear,
+    opacity 0.1s ease,
-    color 0.1s linear,
+    color 0.1s ease,
-    background 0.1s linear,
+    background 0.1s ease,
-    box-shadow 0.1s linear
+    box-shadow 0.1s ease
   ;
 }
 
@@ -102,6 +102,7 @@
 
 .ui.button:hover,
 .ui.button.hover {
+  opacity: 1 !important;
   background-color: #EAEAEA;
   color: #777777;
 }
@@ -113,6 +114,7 @@
 /* Down */
 .ui.button:active,
 .ui.button.down {
+  opacity: 1 !important;
   background-color: #E6E6E6;
   color: #777777;
   -webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
@@ -127,6 +129,7 @@
 
 .ui.buttons .button.active,
 .ui.button.active {
+  opacity: 1 !important;
   background-color: #E6E6E6;
 
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)));
@@ -204,45 +207,6 @@
   -webkit-border-radius: 0.2em;
   border-radius: 0.2em;
 }
-/* Opposite color loader */
-.ui.grey.button.loading,
-.ui.button.active.loading {
-  border-color: #BBBBBB
-}
-.ui.grey.button.loading:after,
-.ui.button.active.loading:after {
-  background-color: #FAFAFA;
-  background: url(../images/throbber-tiny.gif) no-repeat 50% 50%;
-}
-
-/* resizes */
-
-/* blue */
-.ui.huge.button.loading:after {
-  background-image: url(../images/throbber-small.gif);
-}
-.ui.massive.buttons .button.loading:after,
-.ui.gigantic.buttons .button.loading:after,
-.ui.massive.button.loading:after,
-.ui.gigantic.button.loading:after {
-  background-image: url(../images/throbber-medium.gif);
-}
-
-/* grey */
-.ui.huge.grey.button.loading:after,
-.ui.huge.button.loading.active:after {
-  background-image: url(../images/throbber-small.gif);
-}
-.ui.massive.grey.buttons .button.loading:after,
-.ui.gigantic.grey.buttons .button.loading:after,
-.ui.massive.grey.button.loading:after,
-.ui.gigantic.grey.button.loading:after,
-.ui.massive.grey.buttons .button.loading.active:after,
-.ui.gigantic.grey.buttons .button.loading.active:after,
-.ui.massive.button.loading.active:after,
-.ui.gigantic.button.loading.active:after {
-  background-image: url(../images/throbber-medium.gif);
-}
 
 
 /*--------------
@@ -475,6 +439,24 @@
   color: #FFFFFF;
 }
 
+/*-------------------
+      Secondary
+--------------------*/
+
+.ui.buttons.secondary .button,
+.ui.secondary.button {
+  font-weight: normal;
+  box-shadow: none;
+  opacity: 0.7;
+}
+.ui.buttons.tertiary .button,
+.ui.tertiary.button {
+  font-weight: normal;
+  box-shadow: none;
+  opacity: 0.5;
+}
+
+
 /*-------------------
         Sizes
 --------------------*/
@@ -519,6 +501,32 @@
   padding-right: 2.5em;
 }
 
+/* loading */
+.ui.huge.button.loading:after {
+  background-image: url(../images/throbber-small.gif);
+}
+.ui.massive.buttons .button.loading:after,
+.ui.gigantic.buttons .button.loading:after,
+.ui.massive.button.loading:after,
+.ui.gigantic.button.loading:after {
+  background-image: url(../images/throbber-medium.gif);
+}
+
+.ui.huge.grey.button.loading:after,
+.ui.huge.button.loading.active:after {
+  background-image: url(../images/throbber-small.gif);
+}
+.ui.massive.grey.buttons .button.loading:after,
+.ui.gigantic.grey.buttons .button.loading:after,
+.ui.massive.grey.button.loading:after,
+.ui.gigantic.grey.button.loading:after,
+.ui.massive.grey.buttons .button.loading.active:after,
+.ui.gigantic.grey.buttons .button.loading.active:after,
+.ui.massive.button.loading.active:after,
+.ui.gigantic.button.loading.active:after {
+  background-image: url(../images/throbber-medium.gif);
+}
+
 /*--------------
 Containing Icon
 ---------------*/

src/elements/icons.less

@@ -283,7 +283,7 @@ i.circular.icon {
   -moz-border-radius: 500px;
   border-radius: 500px;
 
-  padding: 0.35em;
+  padding: 0.43em 0.35em 0.27em;
   border: 1px solid rgba(0, 0, 0, 0.1);
 
   width: 1.23em;

src/views/items.less

@@ -46,6 +46,7 @@
   display: block;
   float: left;
   position: relative;
+  top: 0px;
 
   width: 316px;
   min-height: 375px;
@@ -66,8 +67,16 @@
   -webkit-border-radius: 0.33em;
   border-radius: 0.33em;
 
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  -ms-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+
   padding: 0.5em;
 }
+
+.ui.items a.item,
 .ui.items .item a {
   cursor: pointer;
 }
@@ -253,6 +262,12 @@
   left: 0em;
   height: 1.5em;
   color: rgba(0, 0, 0, 0.25);
+
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -o-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
 }
 .ui.items .item .extra > img {
   display: inline-block;
@@ -269,6 +284,42 @@
 }
 
 
+/*******************************
+           States
+*******************************/
+
+.ui.items .item:hover {
+  cursor: pointer;
+  z-index: 5;
+  top: -0.25em;
+
+  border-bottom-width: 0.3em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+}
+.ui.items .item:hover .extra {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.ui.items .item:nth-of-type(n+1):hover {
+  border-bottom-color: #6ECFF5 !important;
+}
+.ui.items .item:nth-of-type(n+2):hover {
+  border-bottom-color: #5C6166 !important;
+}
+.ui.items .item:nth-of-type(n+3):hover {
+  border-bottom-color: #A1CF64 !important;
+}
+.ui.items .item:nth-of-type(n+4):hover {
+  border-bottom-color: #EF4D6D !important;
+}
+.ui.items .item:nth-of-type(n+5):hover {
+  border-bottom-color: #564F8A !important;
+}
+.ui.items .item:nth-of-type(n+6):hover {
+  border-bottom-color: #00B5AD !important;
+}
+
+
 /*******************************
            Variations
 *******************************/
@@ -293,12 +344,16 @@
   border-radius: 0px;
   margin: 0em;
   width: 33.33%;
-  border-bottom: none;
 }
 .ui.connected.items > .row {
-  display: table-row;
+  display: table;
+  margin: 0.5em 0em;
+}
+.ui.connected.items > .row:first-child {
+  margin-top: 0em;
 }
 
+/* Borders */
 .ui.connected.items > .item,
 .ui.connected.items > .row:last-child > .item {
   border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
@@ -312,6 +367,14 @@
   border-radius: 0em 0em 0.33em 0em;
 }
 
+
+/* Hover */
+.ui.connected.items .item:hover {
+  border-bottom-width: 0.2em;
+}
+
+
+/* Item Count */
 .ui.two.connected.items > .row > .item,
 .ui.two.connected.items > .item {
   width: 50%;
@@ -380,7 +443,6 @@
 }
 
 
-
 /*--------------
     Horizontal
 ---------------*/