Merge pull request #39 from picturepan2/feature/improve-form-controls

Feature/improve form controls

3 files changed, 31 insertions, 19 deletions

diff --git a/src/buttons.less b/src/buttons.less
index cb97f5c..1dada53 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -18,8 +18,10 @@
   vertical-align: middle;
   white-space: nowrap;
 
-  &:hover,
   &:focus {
+    background: lighten(@core-color, 40%);
+  }
+  &:hover {
     background: @core-color;
     border-color: darken(@core-color, 5%);
     color: @core-light-color;
@@ -37,8 +39,8 @@
     border-color: darken(@core-color, 5%);
     color: @core-light-color;
 
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
       background: darken(@core-color, 5%);
       border-color: darken(@core-color, 10%);
       color: @core-light-color;
diff --git a/src/forms.less b/src/forms.less
index 96049c9..77d02ec 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -41,11 +41,12 @@
     font-size: 1.6rem;
     height: 4.2rem;
     line-height: 2rem;
-    padding: 1rem 1.2rem;
+    padding: 1rem .8rem;
   }
 
   &.input-inline {
     display: inline-block;
+    vertical-align: middle;
     width: auto;
   }
 
@@ -74,16 +75,16 @@
 // Form element: Select
 .form-select {
   appearance: none;
+  border: .1rem solid @control-color;
+  border-radius: .3rem;
+  outline: 0;
+  padding: .5rem .8rem;
+  vertical-align: middle;
 
   &:not([multiple]) {
     background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
-    border: .1rem solid @control-color;
-    border-radius: .3rem;
-    font-size: 1.4rem;
     height: 3.2rem;
-    outline: 0;
-    padding: .5rem 2.4rem .5rem .8rem;
-    vertical-align: middle;
+    padding-right: 2.4rem;
   }
 
   &:focus {
@@ -93,13 +94,17 @@
     display: none;
   }
 
-  // Select small
+  // Select sizes
   &.select-sm {
     border-radius: .2rem;
     font-size: 1.2rem;
     height: 2.4rem;
     padding: .4rem 2rem .4rem .6rem;
   }
+  &.select-lg {
+    height: 4.2rem;
+    padding: 1rem 2.4rem 1rem .8rem;
+  }
 }
 // Form element: Checkbox and radio
 .form-checkbox,
@@ -240,6 +245,16 @@
     border-radius: .3rem;
     line-height: 1.6rem;
     padding: .7rem .8rem;
+
+    &.addon-sm {
+      font-size: 1.2rem;
+      padding: .3rem .6rem;
+    }
+    &.addon-lg {
+      font-size: 1.6rem;
+      line-height: 2rem;
+      padding: 1rem .8rem;
+    }
   }
   .input-group-addon,
   .input-group-btn {
@@ -266,10 +281,4 @@
       z-index: 99;
     }
   }
-}
-// Form inline
-.form-inline {
-  display: inline-block;
-  vertical-align: middle;
-  width: auto;
-}
+}
\ No newline at end of file
diff --git a/src/navigation.less b/src/navigation.less
index 0fd8d0c..65d67b9 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -41,6 +41,7 @@
 
   .tab-item {
     margin-bottom: -.1rem;
+    margin-top: 0;
 
     a {
       border-bottom: .2rem solid transparent;
@@ -73,7 +74,7 @@
         &[data-badge]::after {
           position: absolute;
           right: 1.5rem;
-          top: .5rem;
+          top: .6rem;
           transform: translate(50%, -.8rem);
         }
       }