Forms border fixes

klokantech · May 24, 2017 · c0b17d3 · c0b17d3
1 parent d5cce54
commit c0b17d3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 25 deletions.
diff --git a/_sass/_forms.scss b/_sass/_forms.scss
@@ -35,6 +35,7 @@ label {
 
 input, textarea{
   padding: $input-padding;
+  margin: $input-margin;
   line-height: $input-line-height;
   color: $input-color;
   background-color: $input-bg;
@@ -57,28 +58,13 @@ input, textarea{
 
 }
 
-input[type='text'], input[type='password'], input[type='date'],
-input[type='email'], input[type='button']{
-
-  &.search{
-    display: inline-block;
-  }
-
-}
 input[type='submit'], input[type='button']{
-  margin-top: 5px;
-  &.search{
-    position: relative;
-    display: inline-block;
-    margin-top: 0;
-    padding: 7px 10px;
-    cursor: pointer;
-
-    &:hover{
-      color: darken($input-color, 30%);
-      border-color: darken($input-color, 30%);
-    }
+  cursor: pointer;
+  margin-left: -1px;
 
+  &:not(.btn):hover{
+      color: $input-border-color-active;
+      border-color: $input-border-color-active;
   }
 }
 

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -170,6 +170,7 @@ $input-border-color-active: $color-primary;
 $input-box-shadow-active: none;
 $input-border-radius: 2px;
 $input-padding: 8px 12px;
+$input-margin: 0 0 6px 0;
 $checkbox-color: $color-gray-dark;
 $checkbox-check-color: $color-gray-dark;
 $checkbox-size: 22px;
@@ -179,7 +180,7 @@ $legend-color: $color-gray-dark;
 $label-color: $text-color;
 $label-font-size: $font-size * 0.9;
 $label-fontweight: bold;
-$label-margin: 26px 0 4px 1px;
+$label-margin: 12px 0 6px 0;
 
 /* Progressbar */
 $progress-width: 500px;

diff --git a/index.html b/index.html
@@ -405,13 +405,12 @@ <h4>Usage</h4>
 <div class="row">
   <div class="col12">
     <form>
-      <input type="text" name="name" id="name" class="search">
-      <input type="submit" value="Search" class="search">
+      <input type="text" name="name" id="name"><input type="submit" value="Search">
     </form>
     <br>
     <form>
-      <input type="text" name="search" id="ht-search" class="search">
-      <input type="button" value="Q" class="search icon" id="ht-search-btn">
+      <input type="text" name="search">
+      <input type="button" value="Q" class="icon">
     </form>
   </div>
 </div>