update .form-select control (base64 image via Bootstrap)

1 files changed, 7 insertions, 11 deletions

diff --git a/src/forms.less b/src/forms.less
index e542491..73ab643 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -51,7 +51,7 @@
   color: @body-font-color;
   font-size: 1.4rem;
   line-height: 1.6rem;
-  padding: .7rem .8rem;
+  padding: .5rem .8rem;
   -webkit-appearance: none;
   outline: 0;
 
@@ -60,9 +60,7 @@
   }
 
   &[disabled] {
-    opacity: .75;
     background-color: #eeeff2;
-    pointer-events: none;
   }
 
   // Input sizes
@@ -70,7 +68,6 @@
     height: 2.4rem;
     border-radius: .2rem;
     font-size: 1.2rem;
-    line-height: 1.4rem;
     padding: .4rem .6rem;
   }
 
@@ -78,7 +75,6 @@
     height: 4.2rem;
     border-radius: .4rem;
     font-size: 1.6rem;
-    line-height: 2rem;
     padding: 1rem 1.2rem;
   }
 
@@ -90,6 +86,7 @@
   // Textarea
   textarea& {
     height: auto;
+    line-height: 2rem;
   }
 
   // Form status
@@ -101,8 +98,6 @@
   &.is-danger {
     border-color: @control-color-danger;
   }
-
-  // TODO: Input with icons
 }
 // Form element: Label
 .form-label {
@@ -112,15 +107,17 @@
 }
 // Form element: Select
 .form-select {
+  appearance: none;
+
   &:not([multiple]) {
     height: 3.2rem;
-    background-color: #fff;
     font-size: 1.4rem;
-    line-height: 1.6rem;
-    padding: .7rem .8rem;
+    vertical-align: middle;
+    padding: .5rem 2.4rem .5rem .8rem;
     border: .1rem solid @control-color;
     border-radius: .3rem;
     outline: 0;
+    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
   }
 
   &:focus {
@@ -132,7 +129,6 @@
     height: 2.4rem;
     border-radius: .2rem;
     font-size: 1.2rem;
-    line-height: 1.4rem;
     padding: .4rem .6rem;
   }
 }