Fix Input group border issue #260

1 files changed, 9 insertions, 6 deletions

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index 7076b9a..b3c1abd 100644
--- 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;