Fixes #63, sizes for inputs. Fixes issues with input icon sometimes not

matching input height


Former-commit-id: db050d10b3
Former-commit-id: e45404bf32

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>

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;
 }