From a569c38e2a030330d51ce1f9521909dadc1b144f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Gyllensw=C3=A4rd?= <magnus@thoughtbot.com>
Date: Fri, 5 Jun 2015 14:08:33 +0200
Subject: [PATCH] Remove buttons and flex for search tools

---
 source/_device.html.erb                       |   1 -
 source/_hero.html.erb                         |   1 -
 source/_navigation.html.erb                   |   1 -
 source/_search_tools.html.erb                 | 106 +++++++++---------
 source/_side_image.html.erb                   |   1 -
 source/_sliding_panel.html.erb                |   2 +-
 source/javascripts/refills/search_tools.js    |   2 +-
 source/stylesheets/refills/_animate.scss      |   1 -
 source/stylesheets/refills/_device.scss       |   5 -
 source/stylesheets/refills/_hero.scss         |   5 -
 source/stylesheets/refills/_modal.scss        |   1 -
 source/stylesheets/refills/_navigation.scss   |  17 +--
 source/stylesheets/refills/_search-tools.scss |  43 +++----
 source/stylesheets/refills/_side-image.scss   |   5 -
 .../stylesheets/refills/_sliding-panel.scss   |   1 -
 .../stylesheets/refills/_tables-minimal.scss  |   1 -
 source/stylesheets/refills/_tables.scss       |   1 -
 17 files changed, 83 insertions(+), 111 deletions(-)

diff --git a/source/_device.html.erb b/source/_device.html.erb
index c0426de5..0e752f4c 100644
--- a/source/_device.html.erb
+++ b/source/_device.html.erb
@@ -2,7 +2,6 @@
   <div class="device-text">
     <h4>Text about App or Device</h4>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, recusandae? Deserunt repellendus.</p>
-    <button>Learn More</button>
   </div>
   <div class="device">
     <div class="screen"></div>
diff --git a/source/_hero.html.erb b/source/_hero.html.erb
index df2f8a0f..9b9cc9c5 100644
--- a/source/_hero.html.erb
+++ b/source/_hero.html.erb
@@ -6,6 +6,5 @@
 			<h1>Short description of Product</h1>
 			<p>A few reasons why this product is worth using, who it's for and why they need it.</p>	
 		</div>
-    <button>Learn More</button>
 	</div>
 </div>
diff --git a/source/_navigation.html.erb b/source/_navigation.html.erb
index b5822574..2e627a6d 100644
--- a/source/_navigation.html.erb
+++ b/source/_navigation.html.erb
@@ -38,7 +38,6 @@
           </button>
         </form>
       </div>
-      <a href="javascript:void(0)" class="sign-up">Sign Up</a>
     </div>
   </div>
 </header>
diff --git a/source/_search_tools.html.erb b/source/_search_tools.html.erb
index ef5bcec7..4f7aee3c 100644
--- a/source/_search_tools.html.erb
+++ b/source/_search_tools.html.erb
@@ -1,58 +1,60 @@
 <div class="search-tools">
-  <div class="filter">
-    <label>Colors</label>
-    <div>
-      <ol>
-        <li>
-          <input id="red" type="checkbox">
-          <label for="red">Red</label>
-        </li>
-        <li>
-          <input id="green" type="checkbox">
-          <label for="green">Green</label>
-        </li>
-        <li>
-          <input id="blue" type="checkbox">
-          <label for="blue">Blue</label>
-        </li>
-      </ol>
+  <div class="filters">
+    <div class="filter">
+      <label>Colors</label>
+      <div>
+        <ol>
+          <li>
+            <input id="red" type="checkbox">
+            <label for="red">Red</label>
+          </li>
+          <li>
+            <input id="green" type="checkbox">
+            <label for="green">Green</label>
+          </li>
+          <li>
+            <input id="blue" type="checkbox">
+            <label for="blue">Blue</label>
+          </li>
+        </ol>
+      </div>
     </div>
-  </div>
-  <div class="filter">
-    <label>Sizes</label>
-    <div>
-      <ol>
-        <li>
-          <input id="small" type="checkbox">
-          <label for="small">Small</label>
-        </li>
-        <li>
-          <input id="medium" type="checkbox">
-          <label for="medium">Medium</label>
-        </li>
-        <li>
-          <input id="large" type="checkbox">
-          <label for="large">Large</label>
-        </li>
-      </ol>
+    <div class="filter">
+      <label>Sizes</label>
+      <div>
+        <ol>
+          <li>
+            <input id="small" type="checkbox">
+            <label for="small">Small</label>
+          </li>
+          <li>
+            <input id="medium" type="checkbox">
+            <label for="medium">Medium</label>
+          </li>
+          <li>
+            <input id="large" type="checkbox">
+            <label for="large">Large</label>
+          </li>
+        </ol>
+      </div>
     </div>
-  </div>
-  <div class="filter">
-    <label>Lengths</label>
-    <div>
-      <ol>
-        <li>
-          <input id="short" type="checkbox">
-          <label for="short">Short</label>
-        </li>
-        <li>
-          <input id="long" type="checkbox">
-          <label for="long">Long</label>
-        </li>
-      </ol>
+    <div class="filter">
+      <label>Lengths</label>
+      <div>
+        <ol>
+          <li>
+            <input id="short" type="checkbox">
+            <label for="short">Short</label>
+          </li>
+          <li>
+            <input id="long" type="checkbox">
+            <label for="long">Long</label>
+          </li>
+        </ol>
+      </div>
+    </div>
+    <div class="filter trigger">
+      <button>Update</button>
     </div>
-  </div>
-  <div class="trigger">
-    <button>Update</button>
   </div>
 </div>
diff --git a/source/_side_image.html.erb b/source/_side_image.html.erb
index 1cad659a..3b96aff9 100644
--- a/source/_side_image.html.erb
+++ b/source/_side_image.html.erb
@@ -5,6 +5,5 @@
       <h1>Message with a gradient image</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.</p>
-      <button>Read more</button>
   </div>
 </div>
diff --git a/source/_sliding_panel.html.erb b/source/_sliding_panel.html.erb
index 851251f8..06f306dd 100644
--- a/source/_sliding_panel.html.erb
+++ b/source/_sliding_panel.html.erb
@@ -1,5 +1,5 @@
 <button type="button" class="js-menu-trigger sliding-panel-button">
-  <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/menu-white.png" alt="Menu Icon">
+  Click for Sliding Panel
 </button>
 
 <nav class="js-menu sliding-panel-content">
diff --git a/source/javascripts/refills/search_tools.js b/source/javascripts/refills/search_tools.js
index 314ee944..90b2723c 100644
--- a/source/javascripts/refills/search_tools.js
+++ b/source/javascripts/refills/search_tools.js
@@ -27,7 +27,7 @@ var Filter = (function() {
       attr('data-role', 'summary').
       prependTo(this._optionsContainer);
 
-    this._clearSelectionButton = $('<button></button>').
+    this._clearSelectionButton = $('<button class=clear></button>').
       text('Clear').
       attr('type', 'button').
       insertAfter(this._summaryElement);
diff --git a/source/stylesheets/refills/_animate.scss b/source/stylesheets/refills/_animate.scss
index 2866606a..3a9945a0 100644
--- a/source/stylesheets/refills/_animate.scss
+++ b/source/stylesheets/refills/_animate.scss
@@ -69,7 +69,6 @@ $action-color: #477dca !default;
 }
 
 button {
-  @include button(flat, $action-color);
   display: block;
   margin: auto;
   outline: none;
diff --git a/source/stylesheets/refills/_device.scss b/source/stylesheets/refills/_device.scss
index 8ea83fc0..10ca3b09 100644
--- a/source/stylesheets/refills/_device.scss
+++ b/source/stylesheets/refills/_device.scss
@@ -42,11 +42,6 @@
       line-height: 1.5em;
       margin-bottom: 1.5em;
     }
-
-    button {
-      @include button(flat, $action-color);
-      padding: 0.7em 1em;
-    }
   }
 
   .device {
diff --git a/source/stylesheets/refills/_hero.scss b/source/stylesheets/refills/_hero.scss
index dc56493a..1b5a856a 100644
--- a/source/stylesheets/refills/_hero.scss
+++ b/source/stylesheets/refills/_hero.scss
@@ -51,10 +51,5 @@
         }
       }
     }
-
-    button {
-      @include button(flat, $action-color);
-      padding: 0.7em 1em;
-    }
   }
 }
diff --git a/source/stylesheets/refills/_modal.scss b/source/stylesheets/refills/_modal.scss
index 369c3861..d8b70f60 100644
--- a/source/stylesheets/refills/_modal.scss
+++ b/source/stylesheets/refills/_modal.scss
@@ -33,7 +33,6 @@
   }
 
   .modal-trigger {
-    @include button(flat, $action-color);
     padding: 0.8em 1em;
   }
 
diff --git a/source/stylesheets/refills/_navigation.scss b/source/stylesheets/refills/_navigation.scss
index 6944f1c9..65280ce0 100644
--- a/source/stylesheets/refills/_navigation.scss
+++ b/source/stylesheets/refills/_navigation.scss
@@ -263,8 +263,6 @@ header.navigation {
     clear: both;
     display: block;
     height: $navigation-height;
-    padding-left: $navigation-padding / 2;
-    padding-right: $navigation-padding;
 
     @include media($horizontal-bar-mode) {
       background: transparent;
@@ -273,16 +271,6 @@ header.navigation {
     }
   }
 
-  .sign-up {
-    @include button(flat, $action-color);
-    display: inline;
-    float: right;
-    font-size: 0.8em;
-    margin-top: 1em;
-    padding: 0.75em 1em;
-    text-transform: uppercase;
-  }
-
   // Search bar
 
   .search-bar {
@@ -291,7 +279,7 @@ header.navigation {
     $search-bar-background: lighten($search-bar-border-color, 10%);
 
     float: left;
-    padding: 0.85em 0.6em 0.7em 0.6em;
+    padding: 0.85em 0.85em 0.7em 0.6em;
     width: 60%;
 
     form {
@@ -315,7 +303,8 @@ header.navigation {
       }
 
       button[type=submit] {
-        @include button(flat, $navigation-search-background);
+        background: $navigation-search-background;
+        border: none;
         bottom: 0.3em;
         left: auto;
         outline: none;
diff --git a/source/stylesheets/refills/_search-tools.scss b/source/stylesheets/refills/_search-tools.scss
index 068a63c4..22713223 100644
--- a/source/stylesheets/refills/_search-tools.scss
+++ b/source/stylesheets/refills/_search-tools.scss
@@ -11,11 +11,14 @@
   $search-tools-border-color: $base-border-color;
   $search-tools-background: lighten($search-tools-border-color, 10%);
 
+  @include display(flex);
+  @include justify-content(space-between);
   @include clearfix;
   background: $search-tools-background;
   border-radius: $base-border-radius;
   border: 1px solid $search-tools-border-color;
-  padding: $gutter / 2;
+  padding: $gutter ($gutter / 2);
+  width: 100%;
 
   ol {
     margin: 0;
@@ -34,11 +37,23 @@
     margin-bottom: $base-spacing / 4;
   }
 
+  .filters {
+    @include display(flex);
+    @include flex-direction(column);
+    @include justify-content(space-between);
+    width: 100%;
+
+    @include media($large-screen) {
+      @include flex-direction(row);
+    }
+  }
+
   .filter {
-    margin-bottom: 1em;
+    @include flex-shrink(1);
+    @include flex-grow(1);
+    margin: 0 0.2em 1em 0.2em;
 
     @include media($large-screen) {
-      @include span-columns(3.5);
       margin-bottom: 0;
     }
 
@@ -74,8 +89,7 @@
       }
     }
 
-    button {
-      @include button(simple, lighten($search-tools-background, 10%));
+    button.clear {
       @include position(absolute, 5px 5px auto auto);
       font-size: 0.7em;
     }
@@ -90,22 +104,13 @@
   }
 
   .trigger {
-    width: 100%;
-
-    @include media($large-screen) {
-      @include span-columns(1.5);
-    }
-
+    margin-top: 1.5em;
+    
     button {
-      @include button(flat, $action-color);
-      margin-top: 1em;
-      padding-bottom: 0.5em;
-      padding-top: 0.5em;
+      display: block;
       width: 100%;
-
-      @include media($large-screen) {
-        margin-top: 1.55em;
-      }
+      padding: .5em 1em;
+      text-align: center;
     }
   }
 }
diff --git a/source/stylesheets/refills/_side-image.scss b/source/stylesheets/refills/_side-image.scss
index 220cfa78..1bafc8b7 100644
--- a/source/stylesheets/refills/_side-image.scss
+++ b/source/stylesheets/refills/_side-image.scss
@@ -62,11 +62,6 @@
       line-height: $base-line-height;
       margin-bottom: 3em;
     }
-
-    button {
-      @include button(flat, $action-color);
-      padding: 0.7em 1em;
-    }
   }
 
   @include reset-display();
diff --git a/source/stylesheets/refills/_sliding-panel.scss b/source/stylesheets/refills/_sliding-panel.scss
index c5b220f8..97c0a5aa 100644
--- a/source/stylesheets/refills/_sliding-panel.scss
+++ b/source/stylesheets/refills/_sliding-panel.scss
@@ -65,7 +65,6 @@
 }
 
 .sliding-panel-button {
-  @include button(flat, #477DCA);
   padding: 10px 16px;
   display: inline-block;
   cursor: pointer;
diff --git a/source/stylesheets/refills/_tables-minimal.scss b/source/stylesheets/refills/_tables-minimal.scss
index a25aa9bb..eacb63d9 100644
--- a/source/stylesheets/refills/_tables-minimal.scss
+++ b/source/stylesheets/refills/_tables-minimal.scss
@@ -52,7 +52,6 @@
       padding: $table-padding;
 
       button {
-        @include button(flat, $action-color);
         display: inline-block;
         font-size: .7em;
         line-height: $base-line-height;
diff --git a/source/stylesheets/refills/_tables.scss b/source/stylesheets/refills/_tables.scss
index c45be253..212ccac9 100644
--- a/source/stylesheets/refills/_tables.scss
+++ b/source/stylesheets/refills/_tables.scss
@@ -88,7 +88,6 @@
       }
 
       button {
-        @include button(flat, $action-color);
         display: inline-block;
         font-size: 0.7em;
         line-height: $base-line-height;