From a70468aa562e51c3dd0d4a7505f4163e3572ea13 Mon Sep 17 00:00:00 2001
From: Surinna Curtis <ekiru.0@gmail.com>
Date: Sat, 24 Jun 2017 13:18:54 -0500
Subject: Support overriding media queries for deciding between
 single-column/multi-column layouts with a class

---
 app/javascript/styles/components.scss | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

(limited to 'app/javascript/styles/components.scss')

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 025ef2f64..e204f3637 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1330,7 +1330,7 @@
   position: relative;
 }
 
-@media screen and (min-width: 360px) {
+@include multi-columns('screen and (min-width: 360px)', $parent: null) {
   .columns-area {
     padding: 10px;
   }
@@ -1386,7 +1386,7 @@
   }
 }
 
-@media screen and (min-width: 360px) {
+@include multi-columns('screen and (min-width: 360px)', $parent: null) {
   .tabs-bar {
     margin: 10px;
     margin-bottom: 0;
@@ -1397,7 +1397,7 @@
   }
 }
 
-@media screen and (max-width: 1024px) {
+@include single-column('screen and (max-width: 1024px)', $parent: null) {
   .column,
   .drawer {
     width: 100%;
@@ -1414,7 +1414,7 @@
   }
 }
 
-@media screen and (min-width: 1025px) {
+@include multi-columns('screen and (min-width: 1025px)', $parent: null) {
   .columns-area {
     padding: 0;
   }
@@ -1540,7 +1540,7 @@
   }
 }
 
-@media screen and (min-width: 600px) {
+@include multi-columns('screen and (min-width: 600px)', $parent: null) {
   .tabs-bar__link {
     span {
       display: inline;
@@ -1548,7 +1548,7 @@
   }
 }
 
-@media screen and (min-width: 1025px) {
+@include multi-columns('screen and (min-width: 1025px)', $parent: null) {
   .tabs-bar {
     display: none;
   }
@@ -1737,7 +1737,7 @@
   }
 
   &.hidden-on-mobile {
-    @media screen and (max-width: 1024px) {
+    @include single-column('screen and (max-width: 1024px)') {
       display: none;
     }
   }
@@ -2114,7 +2114,7 @@ button.icon-button.active i.fa-retweet {
   }
 
   &.hidden-on-mobile {
-    @media screen and (max-width: 1024px) {
+    @include single-column('screen and (max-width: 1024px)') {
       display: none;
     }
   }
@@ -3073,7 +3073,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-@media screen and (max-width: 550px) {
+@include single-column('screen and (max-width: 550px)', $parent: null) {
   .onboarding-modal {
     width: 100%;
     height: 100%;
@@ -3209,7 +3209,7 @@ button.icon-button.active i.fa-retweet {
   margin-right: 15px;
 }
 
-@media screen and (max-width: 400px) {
+@include single-column('screen and (max-width: 400px)', $parent: null) {
   .onboarding-modal__page-one {
     flex-direction: column;
   }
@@ -3284,7 +3284,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-@media screen and (max-width: 320px) and (max-height: 600px) {
+@include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) {
   .onboarding-modal__page p {
     font-size: 14px;
     line-height: 20px;
-- 
cgit