feat: interaction optimize, mainly for input in archive layout

YujunXie · Jul 7, 2018 · 79bd285 · 79bd285
1 parent ac6b80e
commit 79bd285
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/_includes/scripts/archieve.js b/_includes/scripts/archieve.js
@@ -100,7 +100,7 @@
     var $root = $('.js-all');
     var $searchBox = $('.js-search-box');
     var $searchInput = $searchBox.children('input');
-    var $searchClear = $searchBox.children('.icon-clear');
+    var $searchClear = $searchBox.children('.js-icon-clear');
     var $tags = $('.js-tags');
     var $articleTags = $('.js-article-tag');
     var $tagShowAll = $('.js-tag-show-all');

diff --git a/_layouts/archive.html b/_layouts/archive.html
@@ -10,9 +10,11 @@
 
 <div class="layout--archive js-all">
   <div class="search-box js-search-box">
-    <div class="icon-search"><i class="fas fa-search"></i></div>
+    <div class="search-box__icon-search"><i class="fas fa-search"></i></div>
     <input type="text" />
-    <div class="button icon-clear"><i class="fas fa-times"></i></div>
+    <div class="search-box__icon-clear js-icon-clear">
+      <div class="button button--secondary button--circle button--sm"><i class="fas fa-times"></i></div>
+    </div>
   </div>
   {%- include tags.html -%}
   <div class="js-result layout--archive__result"></div>

diff --git a/_sass/layout/_archive.scss b/_sass/layout/_archive.scss
@@ -23,23 +23,20 @@
       @include clickable($text-color, $text-background-color);
       @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
     }
-    & > .icon-search, & > .icon-clear {
+    & > .search-box__icon-search, & > .search-box__icon-clear {
       position: absolute;
+      vertical-align: middle;
       top: 50%;
       @include transform(translateY(-50%));
-      display: inline-block;
-      vertical-align: middle;
-      font-size: map-get($base , font-size-sm);
     }
-    &.not-empty > .icon-clear {
+    &.not-empty > .search-box__icon-clear {
       display: block;
     }
-    & > .icon-clear {
+    & > .search-box__icon-clear {
       display: none;
-      right: .8rem;
-      @include link-colors($text-color-l);
+      right: .3rem;
     }
-    & > .icon-search {
+    & > .search-box__icon-search {
       left: .5rem;
     }
   }