From 330b1090f472029609a27b7c08737f8dd274c533 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Mon, 27 Mar 2017 11:41:55 -0700
Subject: [PATCH] refactor(aio): move media queries to mixin

---
 aio/src/styles/1-layouts/_search-results.scss |  7 ++-
 aio/src/styles/1-layouts/_sidenav.scss        | 43 -------------------
 aio/src/styles/_mixins.scss                   | 42 ++++++++++++++++++
 3 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss
index 0833724fa8..6f1830081d 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/aio/src/styles/1-layouts/_search-results.scss
@@ -7,7 +7,7 @@ aio-search-results {
     display: flex;
     flex-direction: row;
     overflow: scroll;
-    padding: 80px 20px 20px;
+    padding-top: 50px;
     color: $offwhite;
     width: 100%;
     max-height: 40%;
@@ -17,6 +17,7 @@ aio-search-results {
     left: 0;
     right: 0;
     background-color: $darkgray;
+    border: 24px solid $darkgray;
 }
 
 .search-area {
@@ -40,4 +41,8 @@ aio-search-results {
         text-decoration: none;
         }
     }
+
+    @include bp(tiny) {
+        width: 100%;
+    }
 }
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 27be30275b..8aa7abdfcb 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -1,46 +1,3 @@
-/************************************
-
-             Media queries
-
- To use these, put this snippet in the approriate selector:
-
-     @include bp(tiny) {
-         background-color: purple;
-     }
-
-     Replace "tiny" with "medium" or "big" as necessary.
-*************************************/
-
-@mixin bp($point) {
-
-  $bp-xsmall: "(min-width: 320px)";
-  $bp-teeny: "(min-width: 480px)";
-  $bp-tiny: "(min-width: 600px)";
-  $bp-small: "(min-width: 650px)";
-  $bp-medium: "(min-width: 800px)";
-  $bp-big: "(min-width: 1000px)";
-
-  @if $point == big {
-    @media #{$bp-big} { @content; }
-  }
-  @else if $point == medium {
-    @media #{$bp-medium} { @content; }
-  }
-  @else if $point == small {
-    @media #{$bp-small}  { @content; }
-  }
-  @else if $point == tiny {
-    @media #{$bp-tiny}  { @content; }
-  }
-  @else if $point == teeny {
-    @media #{$bp-teeny}  { @content; }
-  }
-  @else if $point == xsmall {
-    @media #{$bp-xsmall}  { @content; }
-  }
-}
-
-/************************************/
 /** STEF:  HELP WITH LOGO SPACING **/
 .nav-link.home {
   margin: 0 20px 0 10px;
diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
index b35ee3e22a..58799989b7 100644
--- a/aio/src/styles/_mixins.scss
+++ b/aio/src/styles/_mixins.scss
@@ -1,3 +1,45 @@
+/************************************
+
+             Media queries
+
+ To use these, put this snippet in the approriate selector:
+
+     @include bp(tiny) {
+         background-color: purple;
+     }
+
+     Replace "tiny" with "medium" or "big" as necessary.
+*************************************/
+
+@mixin bp($point) {
+
+  $bp-xsmall: "(min-width: 320px)";
+  $bp-teeny: "(min-width: 480px)";
+  $bp-tiny: "(min-width: 600px)";
+  $bp-small: "(min-width: 650px)";
+  $bp-medium: "(min-width: 800px)";
+  $bp-big: "(min-width: 1000px)";
+
+  @if $point == big {
+    @media #{$bp-big} { @content; }
+  }
+  @else if $point == medium {
+    @media #{$bp-medium} { @content; }
+  }
+  @else if $point == small {
+    @media #{$bp-small}  { @content; }
+  }
+  @else if $point == tiny {
+    @media #{$bp-tiny}  { @content; }
+  }
+  @else if $point == teeny {
+    @media #{$bp-teeny}  { @content; }
+  }
+  @else if $point == xsmall {
+    @media #{$bp-xsmall}  { @content; }
+  }
+}
+
 @mixin rotate($degrees) {
   -moz-transform: rotate($degrees);
   -webkit-transform: rotate($degrees);