adds flipped and rotated variations to icons

11 years ago · 2a1c343d11
7 changed files with 205 additions and 2 deletions
--- a/build/less/elements/icon.less
+++ b/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
--- a/build/uncompressed/elements/icon.css
+++ b/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
 --------------------*/
--- a/node/src/documents/collections/form.html
+++ b/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">
--- a/node/src/documents/elements/icon.html
+++ b/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>
--- a/node/src/files/release/less/elements/icon.less
+++ b/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
--- a/node/src/files/release/uncompressed/elements/icon.css
+++ b/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
 --------------------*/
--- a/src/elements/icon.less
+++ b/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