Remove buttons and flex for search tools

thoughtbot · Jun 5, 2015 · a569c38 · a569c38
1 parent 74f8a20
commit a569c38
Show file tree

Hide file tree

Showing 17 changed files with 83 additions and 111 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -88,7 +88,6 @@
       }
 
       button {
-        @include button(flat, $action-color);
         display: inline-block;
         font-size: 0.7em;
         line-height: $base-line-height;