source/stylesheets/refills/_search-tools.scss in refills-0.1.0 vs source/stylesheets/refills/_search-tools.scss in refills-0.2.0

@@ -1,22 +1,28 @@
-.search-tools {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.search-tools {
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-line-height: 1.5em !default;
   $base-spacing: 1.5em !default;
-  $base-accent-color: #477DCA !default;
-  $base-link-color: $base-accent-color !default;
+  $action-color: #477DCA !default;
+
   $dark-gray: #333 !default;
-  $large-screen: em(860) !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-  
-  ol {
-    margin: 0;
-    padding: 0;
-  }
+  $clear-button-width: 4em;
+  $search-tools-border-color: $base-border-color;
+  $search-tools-background: lighten($search-tools-border-color, 10%);
 
+  @include clearfix;
+  background: $search-tools-background;
+  border: 1px solid $search-tools-border-color;
+  border-radius: $base-border-radius;
+  display: flex;
+  justify-content: space-between;
+  padding: $gutter ($gutter / 2);
+  width: 100%;
+
   li {
     font-size: 0.8em;
     line-height: 1.5em;
     list-style: none;
   }
@@ -24,65 +30,67 @@
   label {
     display: block;
     font-weight: bold;
     margin-bottom: $base-spacing / 4;
   }
-  //////////////////////////////////////////////////////////////////////////////////
 
-  $search-tools-border-color: $base-border-color;
-  $search-tools-background: lighten($search-tools-border-color, 10%);
+  .filters {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
 
-  @include clearfix;
-  background: $search-tools-background;
-  border-radius: $base-border-radius;
-  border: 1px solid $search-tools-border-color;
-  padding: $gutter / 2;
+    @include media($large-screen) {
+      flex-direction: row;
+    }
+  }
 
   .filter {
-    margin-bottom: 1em;
+    flex-grow: 1;
+    flex-shrink: 1;
+    margin: 0 0.2em 1em 0.2em;
 
     @include media($large-screen) {
-      @include span-columns(3.5);
       margin-bottom: 0;
     }
 
     > div {
-      @include box-sizing(border-box);
-      @include transition(border-color);
       background-color: white;
-      border-radius: $base-border-radius;
       border: 1px solid $base-border-color;
+      border-radius: $base-border-radius;
+      box-sizing: border-box;
       font-size: 1em;
       margin-bottom: $base-spacing / 2;
-      padding: ($base-spacing / 3) ($base-spacing / 3);
+      padding: ($base-spacing / 3) $clear-button-width ($base-spacing / 3) ($base-spacing / 3);
       position: relative;
+      transition: border-color;
       width: 100%;
 
       &:focus,
       &:hover {
         border-color: darken($base-border-color, 10%);
       }
 
       label {
         cursor: pointer;
-        font-weight: 400;
         margin-bottom: 0;
       }
     }
 
-    ol {
-      margin-top: 1em;
+    .filter-list {
+      margin: 1em 0 0;
+      padding: 0;
 
       label {
         display: inline;
       }
     }
 
-    button {
-      @include button(simple, lighten($search-tools-background, 10%));
+    button.clear {
       @include position(absolute, 5px 5px auto auto);
       font-size: 0.7em;
+      max-width: $clear-button-width;
     }
 
     .hide-options {
       margin-bottom: 0;
 
@@ -91,24 +99,15 @@
       }
     }
   }
 
   .trigger {
-    width: 100%;
+    margin-top: 1.5em;
 
-    @include media($large-screen) {
-      @include span-columns(1.5);
-    }
-
     button {
-      @include button(flat, $base-accent-color);
-      margin-top: 1em;
-      padding-bottom: 0.5em;
-      padding-top: 0.5em;
+      display: block;
+      padding: 0.5em 1em;
+      text-align: center;
       width: 100%;
-
-      @include media($large-screen) {
-        margin-top: 1.55em;
-      }
     }
   }
 }