CHG: Update chip and autocomplete components

1 files changed, 29 insertions, 56 deletions

diff --git a/dist/spectre.css b/dist/spectre.css
index d3bad50..90dc9aa 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -689,7 +689,7 @@ pre code {
   border: 0;
   color: currentColor;
   height: 2rem;
-  margin-left: .3rem;
+  margin-left: .4rem;
   opacity: .45;
   padding: 0;
   text-decoration: none;
@@ -1680,107 +1680,80 @@ textarea.form-input {
 .chip-sm {
   -webkit-align-items: center;
   align-items: center;
-  background: #eff1fa;
+  background: #efefef;
   border-radius: .3rem;
   color: #666;
-  display: -ms-inline-flexbox;
   display: inline-flex;
+  display: -ms-inline-flexbox;
   display: -webkit-inline-flex;
   -ms-flex-align: center;
-  font-size: 1.2rem;
-  height: 2.4rem;
+  height: 3rem;
+  margin-bottom: .1rem;
+  margin-top: .1rem;
   max-width: 100%;
-  padding: .3rem .6rem;
+  padding: .4rem .8rem;
   text-decoration: none;
   vertical-align: middle;
 }
-.chip-sm:hover,
-.chip-sm:focus {
-  background: #e8eaf7;
-}
-.chip-sm .btn-clear {
-  margin-top: -.2rem;
-}
 .chip-sm .btn-clear::before {
-  color: #3b49af;
+  color: currentColor;
   font-size: 1.6rem;
 }
 .chip-sm.selected {
   background: #5764c6;
   color: #fff;
 }
-.chip-sm.selected .btn-clear::before {
-  color: #eff1fa;
-}
 .chip-sm .chip-name {
-  margin-left: .4rem;
+  margin: 0 .4rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .chip-sm .avatar {
-  font-size: .8rem;
-  height: 1.6rem;
-  width: 1.6rem;
+  font-size: 1rem;
+  height: 2rem;
+  width: 2rem;
 }
 .form-autocomplete {
   position: relative;
 }
 .form-autocomplete .form-autocomplete-input {
+  -webkit-align-content: flex-start;
+  align-content: flex-start;
   background: #fff;
   border: .1rem solid #c5c5c5;
   border-radius: .3rem;
   color: #333;
-  display: block;
-  font-size: 1.4rem;
-  line-height: 1.6rem;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-line-pack: start;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   max-width: 100%;
-  min-height: 3.2rem;
+  min-height: 4rem;
   outline: 0;
-  padding: .3rem .3rem 0 .3rem;
+  padding: .4rem .4rem 0 .4rem;
   width: 100%;
 }
 .form-autocomplete .form-autocomplete-input .chip-sm {
-  margin-bottom: .3rem;
+  margin-bottom: .4rem;
+  margin-right: .4rem;
 }
 .form-autocomplete .form-autocomplete-input .form-input {
   background: #fff;
   border-color: transparent;
   display: inline-block;
-  height: 2.4rem;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  height: 3rem;
   margin-bottom: .3rem;
   padding: .3rem;
   vertical-align: top;
   width: auto;
 }
-.form-autocomplete .form-autocomplete-list {
-  background: #fff;
-  border: .1rem solid #d2d2d2;
-  border-radius: .3rem;
-  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15);
-  display: block;
-  height: auto;
-  left: 0;
-  margin: .3rem 0 0 0;
-  padding: .5rem;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  z-index: 1988;
-}
-.form-autocomplete .form-autocomplete-item {
-  border-radius: .3rem;
-  display: block;
-  margin-top: .1rem;
-  padding: .2rem 1rem;
-}
-.form-autocomplete .form-autocomplete-item:hover,
-.form-autocomplete .form-autocomplete-item:focus {
-  background: #fff;
-}
-.form-autocomplete .form-autocomplete-item.active {
-  background: #eff1fa;
-}
 .tooltip {
   position: relative;
 }