Update Autocomplete style

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

Hide file tree

Showing 8 changed files with 61 additions and 63 deletions.
diff --git a/docs/components.html b/docs/components.html
@@ -412,28 +412,24 @@ <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#<
               <div class="form-group">
                 <div class="form-autocomplete">
                   <div class="form-autocomplete-input form-input">
-                    <label class="chip">
+                    <span class="chip">
                       Bruce Banner
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip">
+                    </span>
+                    <span class="chip">
                       <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar" />
                       Thor Odinson
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip">
+                    </span>
+                    <span class="chip">
                       <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar" />
                       Steve Rogers
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip">
+                    </span>
+                    <span class="chip">
+                      <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
                       Tony Stark
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip active">
+                    </span>
+                    <span class="chip active">
                       Natasha Romanoff
-                      <button class="btn btn-clear"></button>
-                    </label>
+                    </span>
                     <input class="form-input" type="text" placeholder="" />
                   </div>
                 </div>
@@ -443,15 +439,15 @@ <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#<
               <div class="form-group">
                 <div class="form-autocomplete">
                   <div class="form-autocomplete-input form-input is-focused">
-                    <label class="chip">
+                    <span class="chip">
                       Bruce Banner
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip">
+                      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+                    </span>
+                    <span class="chip">
                       <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
                       Thor Odinson
-                      <button class="btn btn-clear"></button>
-                    </label>
+                      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+                    </span>
                     <div class="has-icon-left">
                       <input class="form-input" type="text" placeholder="" value="S" />
                       <i class="form-icon loading"></i>
@@ -501,7 +497,7 @@ <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#<
     &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
       &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span> /&gt;
       Thor Odinson
-      &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+      &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
     &lt;<span class="tag">/label</span>&gt;
 
     <span class="com">&lt;!-- autocomplete real input box --&gt;</span>
@@ -998,53 +994,53 @@ <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chip
           </div>
           <div class="columns">
             <div class="column col-12">
-              <label class="chip">
+              <span class="chip">
                 Crime
-                <button class="btn btn-clear"></button>
-              </label>
-              <label class="chip">
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </span>
+              <span class="chip">
                 Drama
-                <button class="btn btn-clear"></button>
-              </label>
-              <label class="chip">
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </span>
+              <span class="chip">
                 Biography
-                <button class="btn btn-clear"></button>
-              </label>
-              <label class="chip">
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </span>
+              <span class="chip">
                 Mystery
-                <button class="btn btn-clear"></button>
-              </label>
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </span>
             </div>
             <div class="column col-12">
-              <label class="chip">
+              <span class="chip">
                 <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
                 Tony Stark
-              </label>
-              <label class="chip">
+              </span>
+              <span class="chip">
                 <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
                 Thor Odinson
-              </label>
-              <label class="chip">
+              </span>
+              <span class="chip">
                 <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" />
                 Steve Rogers
-              </label>
+              </span>
             </div>
           </div>
           <div class="docs-note">
             <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p>
           </div>
 
 <!-- chips example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
   Crime
-  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/label</span>&gt;
+  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">/span</span>&gt;
 
-&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
   &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> /&gt;
   Yan Zhu
-  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/label</span>&gt;</code>
+  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">/span</span>&gt;</code>
 </pre>
 
         </div>

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -1848,7 +1848,7 @@ code {
   flex-wrap: wrap;
   height: auto;
   min-height: 1.6rem;
-  padding: .05rem 0 0 .05rem;
+  padding: .1rem;
 }
 .form-autocomplete .form-autocomplete-input.is-focused {
   border-color: #5764c6;
@@ -1860,8 +1860,9 @@ code {
   display: inline-block;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
-  height: 1.4rem;
+  height: 1.2rem;
   line-height: .8rem;
+  margin: .1rem;
   width: auto;
 }
 .form-autocomplete mark {
@@ -2120,10 +2121,10 @@ code {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
-  height: 1.4rem;
-  margin: 0 .05rem .05rem 0;
+  height: 1.2rem;
+  margin: .1rem;
   max-width: 100%;
-  padding: .05rem .4rem;
+  padding: .1rem .5rem;
   text-decoration: none;
   vertical-align: middle;
 }
@@ -2132,7 +2133,7 @@ code {
   color: #fff;
 }
 .chip .avatar {
-  margin-left: -.2rem;
+  margin-left: -.5rem;
   margin-right: .2rem;
 }
 .dropdown {

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/src/docs.less b/docs/src/docs.less
@@ -358,7 +358,7 @@
 
     u {
       border-bottom: @border-width-lg solid currentColor;
-      padding-bottom: @unit-0;
+      padding-bottom: @unit-o;
       text-decoration: none;
     }
   }

diff --git a/src/autocomplete.less b/src/autocomplete.less
@@ -8,7 +8,7 @@
     flex-wrap: wrap;
     height: auto;
     min-height: @unit-8;
-    padding: @border-width 0 0 @border-width;
+    padding: @unit-h;
 
     &.is-focused {
       border-color: @primary-color;
@@ -20,8 +20,9 @@
       box-shadow: none;
       display: inline-block;
       flex: 1 0 auto;
-      height: @unit-7;
+      height: @unit-6;
       line-height: @unit-4;
+      margin: @unit-h;
       width: auto;
     }
   }

diff --git a/src/chips.less b/src/chips.less
@@ -5,10 +5,10 @@
   border-radius: 5rem;
   color: @gray-color-dark;
   display: inline-flex;
-  height: @unit-7;
-  margin: 0 @unit-0 @unit-0 0;
+  height: @unit-6;
+  margin: @unit-h;
   max-width: 100%;
-  padding: @unit-0 @unit-2;
+  padding: @unit-h @unit-2 + @unit-h;
   text-decoration: none;
   vertical-align: middle;
 
@@ -18,7 +18,7 @@
   }
 
   .avatar {
-    margin-left: -@unit-1;
+    margin-left: -(@unit-2 + @unit-h);
     margin-right: @unit-1;
   }
 }
diff --git a/src/pagination.less b/src/pagination.less
@@ -6,7 +6,7 @@
   padding: @unit-1 0;
 
   .page-item {
-    margin: @unit-1 @unit-0;
+    margin: @unit-1 @unit-o;
 
     span {
       display: inline-block;

diff --git a/src/variables.less b/src/variables.less
@@ -21,7 +21,7 @@
 @body-font-family: @base-font-family, @fallback-font-family;
 
 // Unit sizes
-@unit-0: .05rem;
+@unit-o: .05rem;
 @unit-h: .1rem;
 @unit-1: .2rem;
 @unit-2: .4rem;
@@ -51,7 +51,7 @@
 @control-min-width: 180px;
 @control-max-width: 320px;
 @border-radius: @unit-h;
-@border-width: @unit-0;
+@border-width: @unit-o;
 @border-width-lg: @unit-h;
 
 // Colors