From a633453c7e4a9e0c719a2da8c89394a788a96843 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Mon, 4 Apr 2016 16:45:38 +0800
Subject: add chips code

---
 src/chips.less | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/chips.less

(limited to 'src/chips.less')

diff --git a/src/chips.less b/src/chips.less
new file mode 100644
index 0000000..9c906a8
--- /dev/null
+++ b/src/chips.less
@@ -0,0 +1,14 @@
+// Chips
+.chip {
+  display: inline-flex;
+  padding: .3rem .6rem;
+  border-radius: .3rem;
+  font-size: 1.2rem;
+  align-items: center;
+  background-color: @core-border-color;
+  border: 1px solid darken(@core-border-color, 5%);
+
+  .chip-name {
+    margin-left: .4rem;
+  }
+}
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From aea71b81042ddcf399a3da82ec6f8c3965b575ff Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Mon, 4 Apr 2016 16:53:36 +0800
Subject: update chips example codes

---
 demo/index.html  | 29 ++++++++++++++++++++++++++++-
 dist/spectre.css |  9 +++++++--
 src/buttons.less |  4 ++--
 src/chips.less   |  6 ++++++
 4 files changed, 43 insertions(+), 5 deletions(-)

(limited to 'src/chips.less')

diff --git a/demo/index.html b/demo/index.html
index 45df598..26d277d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -404,16 +404,43 @@
             <div class="columns">
                 <div class="column">
                     <div class="chip">
-                        <span class="chip-name">Yan Zhu</span>
+                        <span class="chip-name">Crime</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
+                    <div class="chip">
+                        <span class="chip-name">Drama</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
+                    <div class="chip">
+                        <span class="chip-name">Biography</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
+                    <div class="chip">
+                        <span class="chip-name">Mystery</span>
                         <button class="btn btn-clear"></button>
                     </div>
                 </div>
                 <div class="column">
+                    <div class="chip">
+                        <img src="img/avatar-1.png" class="avatar avatar-xs" />
+                        <span class="chip-name">Yan Zhu</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
                     <div class="chip">
                         <img src="img/avatar-2.png" class="avatar avatar-xs" />
                         <span class="chip-name">Yan Zhu</span>
                         <button class="btn btn-clear"></button>
                     </div>
+                    <div class="chip">
+                        <img src="img/avatar-3.png" class="avatar avatar-xs" />
+                        <span class="chip-name">Yan Zhu</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
+                    <div class="chip">
+                        <img src="img/avatar-4.png" class="avatar avatar-xs" />
+                        <span class="chip-name">Yan Zhu</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
                 </div>
             </div>
         </section>
diff --git a/dist/spectre.css b/dist/spectre.css
index fc3faa7..8d379ee 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -762,8 +762,8 @@ button.btn-block {
 }
 .btn.btn-clear,
 button.btn-clear {
-  width: 1.6rem;
-  height: 1.6rem;
+  width: 1.4rem;
+  height: 1.4rem;
   padding: 0;
   margin: 0.1rem -0.2rem 0.1rem 0.2rem;
   border: 0;
@@ -1146,6 +1146,7 @@ textarea.form-input {
   padding: .3rem .6rem;
   border-radius: .3rem;
   font-size: 1.2rem;
+  vertical-align: middle;
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
@@ -1156,6 +1157,10 @@ textarea.form-input {
 .chip .chip-name {
   margin-left: .4rem;
 }
+.chip:hover,
+.chip:focus {
+  background-color: #eaeaea;
+}
 .label {
   display: inline-block;
   padding: .3rem .5rem;
diff --git a/src/buttons.less b/src/buttons.less
index 32525b7..e2db1e1 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -128,8 +128,8 @@ button {
 
   // Button Clear
   &.btn-clear {
-    width: 1.6rem;
-    height: 1.6rem;
+    width: 1.4rem;
+    height: 1.4rem;
     padding: 0;
     margin: .1rem -.2rem .1rem .2rem;
     border: 0;
diff --git a/src/chips.less b/src/chips.less
index 9c906a8..aa3027b 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -4,6 +4,7 @@
   padding: .3rem .6rem;
   border-radius: .3rem;
   font-size: 1.2rem;
+  vertical-align: middle;
   align-items: center;
   background-color: @core-border-color;
   border: 1px solid darken(@core-border-color, 5%);
@@ -11,4 +12,9 @@
   .chip-name {
     margin-left: .4rem;
   }
+
+  &:hover,
+  &:focus {
+    background-color: darken(@core-border-color, 2%);
+  }
 }
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From 16e12c5efac6eb019d6ff2732fa51704218c7bbe Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Mon, 4 Apr 2016 18:04:51 +0800
Subject: add input groups code

---
 demo/index.html  | 60 +++++++++++++++++++++++++++++++++++++++-----------------
 dist/spectre.css | 44 ++++++++++++++++++++++++++++++++++++-----
 src/chips.less   |  8 ++++----
 src/forms.less   | 38 +++++++++++++++++++++++++++++++++--
 4 files changed, 121 insertions(+), 29 deletions(-)

(limited to 'src/chips.less')

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;
+    }
+  }
+}
+
-- 
cgit v1.3.1-23-gd82d