Improve large Buttons and Forms

trilbymedia · Aug 15, 2017 · afb32d1 · afb32d1
1 parent 0150eb6
commit afb32d1
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -692,12 +692,12 @@ dl dd {
 .btn.btn-sm {
   font-size: .6rem;
   height: 1.2rem;
-  padding: .05rem .4rem;
+  padding: .05rem .3rem;
 }
 .btn.btn-lg {
   font-size: .8rem;
   height: 2rem;
-  padding: .45rem .4rem;
+  padding: .45rem .6rem;
 }
 .btn.btn-block {
   display: block;
@@ -851,7 +851,7 @@ textarea.form-input {
   height: auto;
 }
 .form-input[type="file"] {
-  height: auto;
+  padding: .125rem;
 }
 .form-input-hint {
   color: #acb3c2;

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -959,6 +959,7 @@ <h4 class="s-subtitle">Form sizes</h4>
 
           <h4 class="s-subtitle">Form icons</h4>
           <div class="docs-note">
+            <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p>
             <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element. And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.</p>
           </div>
           <div class="columns">
@@ -1210,7 +1211,7 @@ <h4 class="s-subtitle">Form validation styles</h4>
             <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p>
           </div>
           <div class="columns">
-            <div class="column col-6 col-xs-12">
+            <div class="column col-9 col-xs-12">
               <fieldset>
                 <legend>form-input</legend>
                 <div class="form-group">
@@ -1251,7 +1252,7 @@ <h4 class="s-subtitle">Form validation styles</h4>
                 </div>
               </fieldset>
               <fieldset>
-                <legend>form-checkbox, radio and switch</legend>
+                <legend>form-checkbox, radio and switch (Error status only)</legend>
                 <div class="form-group">
                   <label class="form-checkbox is-error">
                     <input type="checkbox" checked />

diff --git a/src/buttons.less b/src/buttons.less
@@ -91,13 +91,13 @@
   &.btn-sm {
     font-size: @font-size-sm;
     height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h;
+    padding: @control-padding-v-sm @control-padding-h * .75;
   }
 
   &.btn-lg {
     font-size: @font-size-lg;
     height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h;
+    padding: @control-padding-v-lg @control-padding-h * 1.5;
   }
 
   // Button Block

diff --git a/src/forms.less b/src/forms.less
@@ -81,7 +81,7 @@ legend {
 
   // Input types
   &[type="file"] {
-    height: auto;
+    padding: .125rem;
   }
 }