refactor(forms): make forms look good

src/app/pages/form/inputs/widgets/inputGroups.html

@@ -1,21 +1,21 @@
 <div class="input-group">
   <span class="input-group-addon input-group-addon-primary addon-left" id="basic-addon1">@</span>
-  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
+  <input type="text" class="form-control with-primary-addon" placeholder="Username" aria-describedby="basic-addon1">
 </div>
 
 <div class="input-group">
-  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+  <input type="text" class="form-control with-warning-addon" placeholder="Recipient's username" aria-describedby="basic-addon2">
   <span class="input-group-addon input-group-addon-warning addon-right" id="basic-addon2">@example.com</span>
 </div>
 
 <div class="input-group">
   <span class="input-group-addon addon-left input-group-addon-success">$</span>
-  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+  <input type="text" class="form-control with-success-addon" aria-label="Amount (to the nearest dollar)">
   <span class="input-group-addon addon-right input-group-addon-success">.00</span>
 </div>
 
 <div class="input-group">
-  <input type="text" class="form-control" placeholder="Search for...">
+  <input type="text" class="form-control with-danger-addon" placeholder="Search for...">
   <span class="input-group-btn">
       <button class="btn btn-danger" type="button">Go!</button>
   </span>

src/sass/app/_form.scss

@@ -398,7 +398,7 @@ label.custom-input-danger {
 
 @mixin groupAddon($color) {
   background: $color;
-  color: $default;
+  color: $default-text;
   border-color: $color;
 }
 
@@ -430,51 +430,50 @@ label.custom-input-danger {
   button.btn.btn-default {
     background: transparent;
     color: $default-text;
-    border-color: $input-border;
+    &:hover {
-    &:focus, &:hover {
+      background: $default;
-      background: $default-text;
       box-shadow: none;
       outline: 0 !important;
     }
     &:active {
       border-color: $input-border;
       box-shadow: none;
-      background: $default;
+      background: $default-text;
+      color: $dropdown-text;
     }
   }
   &.open {
     > .btn.btn-default.dropdown-toggle {
       box-shadow: none;
+      background: $default-text;
+      color: $dropdown-text;
+      border-color: $select-border;
+    }
+    > .btn{
       border-radius: 5px 5px 0 0;
     }
-    .dropdown-menu {
+    .dropdown-menu.open {
+      border: 1px solid;
       border-top: none;
       border-radius: 0 0 5px 5px;
-      padding-top: 0;
-    }
-  }
-  &.with-search.open{
-    .btn-default.btn{
-      background-color: rgba(0, 0, 0, 0.2);
-      border-color: 1px solid $default;
     }
   }
   &.with-search.open .btn-default + .dropdown-menu {
     .bs-searchbox .form-control {
-      background-color: rgba(0, 0, 0, 0.35);
+      background-color: $default;
+      border: 1px solid $input-border;
     }
     .no-results {
-      color: $default-text;
+      color: $dropdown-text;
     }
   }
   .notify {
-    color: $default-text;
+    color: $dropdown-text;
   }
 }
 
 .bootstrap-tagsinput {
   color: $default-text;
-  @include placeholderStyle($default-text, 0.7);
   background-color: transparent;
   border: 1px solid $input-border;
   border-radius: 5px;
@@ -497,6 +496,7 @@ label.custom-input-danger {
     }
   }
   input {
+    @include placeholderStyle($default-text, 0.8);
     line-height: 22px;
     font-size: 11px;
     min-width: 53px;
@@ -537,6 +537,19 @@ label.custom-input-danger {
   border-bottom-right-radius: 5px;
 }
 
+.with-primary-addon:focus{
+  border-color: $primary;
+}
+.with-warning-addon:focus{
+  border-color: $warning;
+}
+.with-success-addon:focus{
+  border-color: $success;
+}
+.with-danger-addon:focus{
+  border-color: $danger;
+}
+
 .sub-little-text{
   font-size: 12px;
 }

src/sass/theme/_buttons.scss

@@ -105,10 +105,10 @@ button.btn.btn-danger {
 
 button.btn.btn-inverse {
   @include buttonColor($help-text, $help-text);
-  color: $default;
+  color: $dropdown-text;
   &:active, &:target, &:hover {
     background-color: $help-text;
-    color: $default;
+    color: $dropdown-text;
   }
 }
 

src/sass/theme/conf/_colorScheme.scss

@@ -12,6 +12,7 @@ $sidebar-text: #ffffff;
 $dropdown-text: #7d7d7d;
 $bootstrap-panel-text: #7d7d7d;
 $bootstrap-panel-bg: #ffffff;
+$select-border: #e7e7e7;
 
 $primary: #209e91 !default;
 $info: #2dacd1 !default;