adds flipped and rotated variations to icons

build/less/elements/icon.less

@@ -324,6 +324,44 @@ i.circular.inverted.icon {
   box-shadow: none;
 }
 
+/*-------------------
+      Flipped
+--------------------*/
+
+i.vertically.flipped.icon {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+i.horizontally.flipped.icon {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+/*-------------------
+        Rotated
+--------------------*/
+
+i.left.rotated.icon {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+i.right.rotated.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
 
 /*-------------------
         Square

build/uncompressed/elements/icon.css

@@ -672,6 +672,40 @@ i.circular.inverted.icon {
   -moz-box-shadow: none;
   box-shadow: none;
 }
+/*-------------------
+      Flipped
+--------------------*/
+i.vertically.flipped.icon {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+i.horizontally.flipped.icon {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+/*-------------------
+        Rotated
+--------------------*/
+i.left.rotated.icon {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+i.right.rotated.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
 /*-------------------
         Square
 --------------------*/

node/src/documents/collections/form.html

@@ -36,8 +36,8 @@ type   : 'UI Collection'
     <h4 class="ui header">Form:</h4>
     <p>
       Forms always include fields, and fields always contain form elements. Fields themselves may also include:
-        <a href="/elements/input.html">ui inputs</a>, standard form fields, <a href="/elements/labels.html">ui labels</a>, textareas, as well as:
-        <a href="/modules/checkbox.html">checkboxes</a>, and <a href="/elements/message.html">message blocks</a>.
+        <a href="/elements/input.html">inputs</a>, standard form fields, <a href="/elements/label.html">labels</a>, <a href="/modules/dropdown.html">selection dropdowns</a>, textareas, as well as:
+        <a href="/modules/checkbox.html">checkboxes</a>, and <a href="/collections/message.html">message blocks</a>.
     </p>
     <p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
     <div class="ui ignored info message">

node/src/documents/elements/icon.html

@@ -396,6 +396,27 @@ type   : 'UI Element'
     <i class="help circle icon link icon"></i>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Flipped</h4>
+    <p>An icon can be flipped</p>
+    <i class="horizontally flipped forward icon"></i>
+    <i class="vertically flipped forward icon"></i>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">Loading</h4>
+    <p>An icon can be spin to be used as a loading indicator</p>
+    <i class="clockwise loading icon"></i>
+  </div>
+
+
+  <div class="example">
+    <h4 class="ui header">Rotated</h4>
+    <p>An icon can be rotated</p>
+    <i class="left rotated forward icon"></i>
+    <i class="right rotated forward icon"></i>
+  </div>
+
 
   <div class="example">
     <h4 class="ui header">Circular</h4>

node/src/files/release/less/elements/icon.less

@@ -324,6 +324,44 @@ i.circular.inverted.icon {
   box-shadow: none;
 }
 
+/*-------------------
+      Flipped
+--------------------*/
+
+i.vertically.flipped.icon {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+i.horizontally.flipped.icon {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+/*-------------------
+        Rotated
+--------------------*/
+
+i.left.rotated.icon {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+i.right.rotated.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
 
 /*-------------------
         Square

node/src/files/release/uncompressed/elements/icon.css

@@ -672,6 +672,40 @@ i.circular.inverted.icon {
   -moz-box-shadow: none;
   box-shadow: none;
 }
+/*-------------------
+      Flipped
+--------------------*/
+i.vertically.flipped.icon {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+i.horizontally.flipped.icon {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+/*-------------------
+        Rotated
+--------------------*/
+i.left.rotated.icon {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+i.right.rotated.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
 /*-------------------
         Square
 --------------------*/

src/elements/icon.less

@@ -324,6 +324,44 @@ i.circular.inverted.icon {
   box-shadow: none;
 }
 
+/*-------------------
+      Flipped
+--------------------*/
+
+i.vertically.flipped.icon {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+i.horizontally.flipped.icon {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+/*-------------------
+        Rotated
+--------------------*/
+
+i.left.rotated.icon {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+i.right.rotated.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
 
 /*-------------------
         Square