From d2b2c3053ca3293f449c80d7f1a7e2a3a4c45287 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Mon, 23 Sep 2013 12:33:33 -0400
Subject: [PATCH] Fixes #63, sizes for inputs. Fixes issues with input icon
 sometimes not matching input height

Former-commit-id: db050d10b399f409cc5fd43d7f1006dfc2d50ecb
Former-commit-id: e45404bf325d271a3e12946ddd0c7f69b0f7c7a0
---
 node/src/documents/elements/input.html.eco | 45 +++++++++++++++++++++
 src/elements/input.less                    | 46 ++++++++++++++++++----
 2 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/node/src/documents/elements/input.html.eco b/node/src/documents/elements/input.html.eco
index 786ce2a5d..62550cfe3 100755
--- a/node/src/documents/elements/input.html.eco
+++ b/node/src/documents/elements/input.html.eco
@@ -123,4 +123,49 @@ type        : 'UI Element'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Size</h4>
+    <p>An input can vary in size</p>
+    <div class="ui mini icon input">
+      <input type="text" placeholder="Search mini...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui tiny icon input">
+      <input type="text" placeholder="Search tiny...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui small icon input">
+      <input type="text" placeholder="Search small...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui large icon input">
+      <input type="text" placeholder="Search large...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui big icon input">
+      <input type="text" placeholder="Search big...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui huge icon input">
+      <input type="text" placeholder="Search huge...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui massive icon input">
+      <input type="text" placeholder="Search massive...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+
 </div>
\ No newline at end of file
diff --git a/src/elements/input.less b/src/elements/input.less
index e62d9f671..86b6ebb45 100755
--- a/src/elements/input.less
+++ b/src/elements/input.less
@@ -187,14 +187,14 @@
   margin: 0em;
 
   width: 2.6em;
-  height: 2.6em;
-  padding-top: 0.75em;
+  height: 100%;
+  padding-top: 0.85em;
 
   text-align: center;
 
-  -webkit-border-radius: 0em 0.2em 0.2em 0em;
-  -moz-border-radius: 0em 0.2em 0.2em 0em;
-  border-radius: 0em 0.2em 0.2em 0em;
+  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
+  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
+  border-radius: 0em 0.3125em 0.3125em 0em;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -220,9 +220,9 @@
   right: auto;
   left: 1px;
 
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 0.3125em 0em 0em 0.3125em;
 }
 .ui.left.icon.input > .circular.icon {
   right: auto;
@@ -297,4 +297,34 @@
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+}
+
+
+/*--------------------
+        Size
+---------------------*/
+
+.ui.mini.input {
+  font-size: 0.8125rem;
+}
+.ui.tiny.input {
+  font-size: 0.875rem;
+}
+.ui.small.input {
+  font-size: 0.875rem;
+}
+.ui.input {
+  font-size: 1rem;
+}
+.ui.large.input {
+  font-size: 1.125rem;
+}
+.ui.big.input {
+  font-size: 1.25rem;
+}
+.ui.huge.input {
+  font-size: 1.375rem;
+}
+.ui.massive.input {
+  font-size: 1.5rem;
 }
\ No newline at end of file