Use $screen-xs-max instead of $phone-width to match upcoming Bootstra…

…p 3 styles
judytuna · Oct 10, 2014 · 62af8a8 · 62af8a8
1 parent e538f3a
commit 62af8a8
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 28 deletions.
diff --git a/app/assets/stylesheets/_base.css.scss b/app/assets/stylesheets/_base.css.scss
@@ -1,4 +1,4 @@
-$phone-width: 520px;
+$screen-xs-max: 767px;
 
 body {
   font-family: 'AmbleLight', sans-serif;
@@ -21,7 +21,7 @@ h1 {
   font-size: 42px;
   color: $red-color;
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     font-size: 32px;
   }
 
@@ -75,7 +75,7 @@ td.wide {
   width: 20%;
 }
 
-@media (max-width: $phone-width) {
+@media (max-width: $screen-xs-max) {
   .hide-on-phone {
     display: none !important;
   }
@@ -184,7 +184,7 @@ ul {
   li {
     display: inline-block;
     margin: 10px 10px 0 0;
-    @media (max-width: $phone-width) {
+    @media (max-width: $screen-xs-max) {
       display: block;
       margin: 0;
     }

diff --git a/app/assets/stylesheets/_external_pages.css.scss b/app/assets/stylesheets/_external_pages.css.scss
@@ -3,7 +3,7 @@
   margin: 0 auto 10px auto;
   padding: 15px;
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     box-sizing: border-box;
     padding: 8px;
     width: 100%;
@@ -14,7 +14,7 @@
   margin: 0 3em;
   display: table;
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     margin: 0;
     width: 100%;
   }
@@ -31,7 +31,7 @@
       margin-top: 10px;
     }
 
-    @media (max-width: $phone-width) {
+    @media (max-width: $screen-xs-max) {
       font-size: 14px;
     }
   }
@@ -46,7 +46,7 @@
     max-width: 190px;
   }
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     display: none;
   }
 }

diff --git a/app/assets/stylesheets/_gravatars.css.scss b/app/assets/stylesheets/_gravatars.css.scss
@@ -1,8 +1,8 @@
 #gravatar {
-	width: 115px;
-	padding: 15px 0px 15px 0px;
+  width: 115px;
+  padding: 15px 0px 15px 0px;
 
-	#change_gravatar {
-		text-align:center;
-	}
+  #change_gravatar {
+    text-align: center;
+  }
 }
diff --git a/app/assets/stylesheets/_header.css.scss b/app/assets/stylesheets/_header.css.scss
@@ -3,7 +3,7 @@
     background: #333;
     padding: 0 !important;
 
-    @media (max-width: $phone-width) {
+    @media (max-width: $screen-xs-max) {
 
       .nav {
         text-align: center;
@@ -64,7 +64,7 @@
     }
   }
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     .app-name {
       display: block;
       text-align: center;

diff --git a/app/assets/stylesheets/_tables.css.scss b/app/assets/stylesheets/_tables.css.scss
@@ -21,7 +21,7 @@ table.checkins {
   }
 }
 
-@media (max-width: $phone-width) {
+@media (max-width: $screen-xs-max) {
   .checkins-table-container {
     margin-left: -10px;
     margin-right: -10px;
@@ -102,7 +102,7 @@ table.sent-emails {
 }
 
 table.responsive-table {
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     border: none;
     thead {
       display: none;

diff --git a/app/assets/stylesheets/devise.css.scss b/app/assets/stylesheets/devise.css.scss
@@ -11,7 +11,7 @@
     margin: 5px 0 10px 0;
   }
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     .login-option:last-child {
       margin-top: 20px;
     }
@@ -35,7 +35,7 @@
     display: inline-block;
   }
   &.external-auth-existing li {
-    @media (max-width: $phone-width) {
+    @media (max-width: $screen-xs-max) {
       display: block;
     }
   }

diff --git a/app/assets/stylesheets/events/_index.css.scss b/app/assets/stylesheets/events/_index.css.scss
@@ -2,7 +2,7 @@
   margin-top: 30px;
 }
 
-@media (min-width: $phone-width) {
+@media (min-width: $screen-xs-max) {
   .chapter-select-container {
     margin-right: 100px;
   }
@@ -28,7 +28,7 @@
     color: $red-color;
   }
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     width: 100%;
     margin-right: 0;
   }

diff --git a/app/assets/stylesheets/events/_organize.css.scss b/app/assets/stylesheets/events/_organize.css.scss
@@ -13,7 +13,7 @@
 
   .header-actions {
     float: right;
-    @media (max-width: $phone-width) {
+    @media (max-width: $screen-xs-max) {
       float: none;
     }
   }
@@ -38,7 +38,7 @@
   display: inline-block;
   width: 300px;
   vertical-align: top;
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     width: auto;
   }
 }
@@ -49,7 +49,7 @@
   margin-right: 10px;
   display: inline-block;
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     margin-bottom: 10px;
     width: 100%;
   }
@@ -82,7 +82,7 @@
       @include background(linear-gradient(0deg, #ccc 30%, #ddd 70%));
     }
 
-    @media (max-width: $phone-width) {
+    @media (max-width: $screen-xs-max) {
       margin: 0 auto;
     }
   }
@@ -112,7 +112,7 @@
   .section-arranger-link-text {
     margin-left: 15px;
 
-    @media (max-width: $phone-width) {
+    @media (max-width: $screen-xs-max) {
       margin: 0;
       font-size: 24px;
       text-align: center;
@@ -129,7 +129,7 @@
   border: 1px solid rgb(205, 205, 228);
   padding: 7px;
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     box-sizing: border-box;
     text-align: center;
     margin-bottom: 10px;

diff --git a/app/assets/stylesheets/events/_show.css.scss b/app/assets/stylesheets/events/_show.css.scss
@@ -65,7 +65,7 @@
     }
   }
 
-  @media (max-width: $phone-width) {
+  @media (max-width: $screen-xs-max) {
     div {
       &:first-child {
         font-size: 24px;