Fix Input group border issue picturepan2#260

trilbymedia · Aug 21, 2017 · 3d0f1a1 · 3d0f1a1
1 parent c2dcb64
commit 3d0f1a1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -835,7 +835,7 @@ textarea.form-input {
   height: auto;
 }
 .form-input[type="file"] {
-  padding: .125rem;
+  height: auto;
 }
 .form-input-hint {
   color: #acb3c2;
@@ -1069,10 +1069,13 @@ textarea.form-input {
   font-size: .8rem;
   padding: .45rem .4rem;
 }
-.input-group .input-group-addon,
+.input-group .form-input,
+.input-group .form-select {
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
 .input-group .input-group-btn {
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
+  z-index: 1;
 }
 .input-group .form-input:first-child:not(:last-child),
 .input-group .form-select:first-child:not(:last-child),
@@ -1100,7 +1103,7 @@ textarea.form-input {
 .input-group .form-select:focus,
 .input-group .input-group-addon:focus,
 .input-group .input-group-btn:focus {
-  z-index: 1;
+  z-index: 2;
 }
 .input-group .form-select {
   width: auto;
@@ -2112,7 +2115,7 @@ code {
 .chip {
   align-items: center;
   background: #f0f1f4;
-  border-radius: .1rem;
+  border-radius: 5rem;
   color: #727e96;
   display: -ms-inline-flexbox;
   display: inline-flex;

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/src/chips.less b/src/chips.less
@@ -2,7 +2,7 @@
 .chip {
   align-items: center;
   background: @bg-color-dark;
-  border-radius: @border-radius;
+  border-radius: 5rem;
   color: @gray-color-dark;
   display: inline-flex;
   height: @unit-7;

diff --git a/src/forms.less b/src/forms.less
@@ -81,7 +81,7 @@ legend {
 
   // Input types
   &[type="file"] {
-    padding: .125rem;
+    height: auto;
   }
 }
 
@@ -359,9 +359,14 @@ legend {
       padding: @control-padding-v-lg @control-padding-h;
     }
   }
-  .input-group-addon,
+
+  .form-input,
+  .form-select {
+    flex: 1 1 auto;
+  }
+
   .input-group-btn {
-    flex: 1 0 auto;
+    z-index: @zindex-0;
   }
 
   .form-input,
@@ -382,7 +387,7 @@ legend {
       margin-left: -@border-width;
     }
     &:focus {
-      z-index: @zindex-0;
+      z-index: @zindex-0 + 1;
     }
   }