add input groups code

4 files changed, 121 insertions, 29 deletions

diff --git a/demo/index.html b/demo/index.html
index 26d277d..59ced86 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -8,6 +8,11 @@
         header > h4 {
             margin-top: 4rem;
         }
+        .bg-grey {
+            background-color: #efefef;
+            padding: 1rem;
+            border-radius: .3rem;
+        }
     </style>
 </head>
 <body>
@@ -88,50 +93,50 @@
             </section>
             <div class="columns">
                 <div class="column">
-                    First column
+                    <div class="bg-grey">First column</div>
                 </div>
                 <div class="column">
-                    Second column
+                    <div class="bg-grey">Second column</div>
                 </div>
                 <div class="column">
-                    Third column
+                    <div class="bg-grey">Third column</div>
                 </div>
                 <div class="column">
-                    Fourth column
+                    <div class="bg-grey">Fourth column</div>
                 </div>
                 <div class="column">
-                    Fifth column
+                    <div class="bg-grey">Fifth column</div>
                 </div>
                 <div class="column">
-                    Sixth column
+                    <div class="bg-grey">Sixth column</div>
                 </div>
             </div>
             <div class="columns">
                 <div class="column col-4">
-                    First column
+                    <div class="bg-grey">First column</div>
                 </div>
                 <div class="column col-4">
-                    Second column
+                    <div class="bg-grey">Second column</div>
                 </div>
                 <div class="column">
-                    Third column
+                    <div class="bg-grey">Third column</div>
                 </div>
                 <div class="column">
-                    Fourth column
+                    <div class="bg-grey">Fourth column</div>
                 </div>
             </div>
             <div class="columns">
                 <div class="column col-2">
-                    First column
+                    <div class="bg-grey">First column</div>
                 </div>
                 <div class="column col-4">
-                    Second column
+                    <div class="bg-grey">Second column</div>
                 </div>
                 <div class="column col-4">
-                    Third column
+                    <div class="bg-grey">Third column</div>
                 </div>
                 <div class="column col-2">
-                    Fourth column
+                    <div class="bg-grey">Fourth column</div>
                 </div>
             </div>
         </section>
@@ -230,11 +235,11 @@
                     <form>
                         <div class="form-group">
                             <label class="form-label" for="input-example-1">Name</label>
-                            <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+                            <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
                         </div>
                         <div class="form-group">
                             <label class="form-label" for="input-example-2">Email</label>
-                            <input class="form-input" type="email" id="input-example-2" placeholder="Email">
+                            <input class="form-input" type="email" id="input-example-2" placeholder="Email" />
                         </div>
                         <div class="form-group">
                             <select class="form-select">
@@ -281,13 +286,13 @@
                         <div class="form-group columns">
                             <label class="form-label col-3" for="input-example-4">Name</label>
                             <div class="col-9">
-                                <input class="form-input" type="text" id="input-example-4" placeholder="Name">
+                                <input class="form-input" type="text" id="input-example-4" placeholder="Name" />
                             </div>
                         </div>
                         <div class="form-group columns">
                             <label class="form-label col-3" for="input-example-5">Email</label>
                             <div class="col-9">
-                                <input class="form-input" type="email" id="input-example-5" placeholder="Email">
+                                <input class="form-input" type="email" id="input-example-5" placeholder="Email" />
                             </div>
                         </div>
                         <div class="form-group columns">
@@ -348,6 +353,25 @@
             </div>
         </section>
 
+        <section id="input-groups">
+            <header class="text-center"><h4>input groups</h4></header>
+            <div class="columns">
+                <div class="column">
+                    <div class="input-group">
+                        <span class="input-group-addon">slack.com/</span>
+                        <input type="text" class="form-input" placeholder="site name" />
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="input-group">
+                        <span class="input-group-addon">slack.com/</span>
+                        <input type="text" class="form-input" placeholder="site name" />
+                        <button class="btn btn-primary input-group-btn">Submit</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <section id="media">
             <header class="text-center"><h4>media</h4></header>
             <div class="columns">
diff --git a/dist/spectre.css b/dist/spectre.css
index 8d379ee..09bef9b 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -909,11 +909,11 @@ textarea.form-input {
   height: auto;
 }
 .has-success .form-input,
-.form-input.input-success {
+.form-input.is-success {
   border-color: #32b643;
 }
 .has-danger .form-input,
-.form-input.input-danger {
+.form-input.is-danger {
   border-color: #e85600;
 }
 .form-label {
@@ -1053,6 +1053,40 @@ textarea.form-input {
   left: 1.2rem;
   background-color: #fff;
 }
+.input-group {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.input-group .input-group-addon {
+  line-height: 1.6rem;
+  padding: .7rem .8rem;
+  border: 1px solid #c5c5c5;
+  border-radius: .3rem;
+  background-color: #efefef;
+}
+.input-group .form-input:first-child:not(:last-child),
+.input-group .input-group-addon:first-child:not(:last-child),
+.input-group .input-group-btn:first-child:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-group .form-input:not(:first-child):not(:last-child),
+.input-group .input-group-addon:not(:first-child):not(:last-child),
+.input-group .input-group-btn:not(:first-child):not(:last-child) {
+  margin-left: -0.1rem;
+  border-radius: 0;
+  z-index: 49;
+}
+.input-group .form-input:last-child:not(:first-child),
+.input-group .input-group-addon:last-child:not(:first-child),
+.input-group .input-group-btn:last-child:not(:first-child) {
+  margin-left: -0.1rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  z-index: 99;
+}
 .avatar {
   display: inline-block;
   width: 3.2rem;
@@ -1154,13 +1188,13 @@ textarea.form-input {
   background-color: #efefef;
   border: 1px solid #e2e2e2;
 }
-.chip .chip-name {
-  margin-left: .4rem;
-}
 .chip:hover,
 .chip:focus {
   background-color: #eaeaea;
 }
+.chip .chip-name {
+  margin-left: .4rem;
+}
 .label {
   display: inline-block;
   padding: .3rem .5rem;
diff --git a/src/chips.less b/src/chips.less
index aa3027b..b5a667d 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -9,12 +9,12 @@
   background-color: @core-border-color;
   border: 1px solid darken(@core-border-color, 5%);
 
-  .chip-name {
-    margin-left: .4rem;
-  }
-
   &:hover,
   &:focus {
     background-color: darken(@core-border-color, 2%);
   }
+
+  .chip-name {
+    margin-left: .4rem;
+  }
 }
\ No newline at end of file
diff --git a/src/forms.less b/src/forms.less
index 9838228..eaab29d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -86,11 +86,11 @@
 
   // Status
   .has-success &,
-  &.input-success {
+  &.is-success {
     border-color: @control-color-success;
   }
   .has-danger &,
-  &.input-danger {
+  &.is-danger {
     border-color: @control-color-danger;
   }
 
@@ -250,3 +250,37 @@
     }
   }
 }
+
+// Form element: Input groups
+.input-group {
+  display: flex;
+
+  .input-group-addon {
+    line-height: 1.6rem;
+    padding: .7rem .8rem;
+    border: 1px solid @control-color;
+    border-radius: .3rem;
+    background-color: @core-border-color;
+  }
+
+  .form-input,
+  .input-group-addon,
+  .input-group-btn {
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      margin-left: -.1rem;
+      border-radius: 0;
+      z-index: 49;
+    }
+    &:last-child:not(:first-child) {
+      margin-left: -.1rem;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      z-index: 99;
+    }
+  }
+}
+