From 9a355fd597a2963d8b8260507a45322dab238068 Mon Sep 17 00:00:00 2001
From: Steven H Johnson <shjohnson.pi@gmail.com>
Date: Sat, 16 Jul 2016 10:04:12 -0400
Subject: [PATCH] Fix nav images in webkit/Apple CSS

---
 static/css/sass/_genericClasses.scss |  33 +++--
 static/css/sass/_nav.scss            |  25 +---
 static/css/usta.css                  | 181 ++-------------------------
 3 files changed, 33 insertions(+), 206 deletions(-)

diff --git a/static/css/sass/_genericClasses.scss b/static/css/sass/_genericClasses.scss
index cd339aa..730c2f1 100644
--- a/static/css/sass/_genericClasses.scss
+++ b/static/css/sass/_genericClasses.scss
@@ -66,6 +66,22 @@
     align-self: $value;
 }
 
+// Sizes for nav icons.
+@mixin nav-img-size {
+    width: auto;
+    max-width: 40px;
+    max-height: 40px;
+    padding-right: 5px;
+
+    @media (max-width: $tablet-mid) {
+        max-width: 30px;
+    }
+
+    @media (max-width: $phone-max) {
+        max-width: 25px;
+    }
+}
+
 
 //****************************************************************************************************
 //****************************************************************************************************
@@ -92,23 +108,6 @@
     @include align-items(center);        // Cross axis alignment.
 }
 
-%nav-img-size {
-    // Sizes for nav icons.
-    img {
-        max-width: 40px;
-        max-height: 40px;
-        padding-right: 5px;
-
-        @media (max-width: $tablet-mid) {
-            max-width: 30px;
-        }
-
-        @media (max-width: $phone-max) {
-            max-width: 25px;
-        }
-    }
-}
-
 %divider-padding {
     @media (max-width: $phone-max) {
         padding-top: 10px;
diff --git a/static/css/sass/_nav.scss b/static/css/sass/_nav.scss
index 0bfa428..fa511bb 100644
--- a/static/css/sass/_nav.scss
+++ b/static/css/sass/_nav.scss
@@ -411,7 +411,9 @@ footer {
 //**************************************************
 
 nav {
-    @extend %nav-img-size;
+    img {
+        @include nav-img-size;
+    }
 }
 
 .nav-main-menu {
@@ -471,13 +473,9 @@ nav {
         }
     }
 
-    img {
+    .nav-logo, .mobile-nav-icon-wrapper {
         height: 78px;
         width: auto;
-
-        @media (max-width: $phone-mid) {
-            width: auto;
-        }
     }
 }
 
@@ -608,21 +606,6 @@ footer {
             max-width: 60%;
             margin-right: 1%;
         }
-
-        // Sizes for nav icons.
-        img {
-            max-width: 30px;
-            max-height: 30px;
-            padding-right: 5px;
-
-            @media (max-width: $tablet-mid) {
-                max-width: 30px;
-            }
-
-            @media (max-width: $phone-max) {
-                max-width: 25px;
-            }
-        }
     }
 
     .vert-nav {
diff --git a/static/css/usta.css b/static/css/usta.css
index 238d2e0..36ef420 100644
--- a/static/css/usta.css
+++ b/static/css/usta.css
@@ -1,14 +1,3 @@
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -130,17 +119,6 @@ ul.messagelist li.error {
 .event16 a, .event18 a {
   color: inherit; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -158,17 +136,6 @@ nav img {
     padding-top: 30px;
     padding-bottom: 30px; } }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -391,17 +358,6 @@ body:after {
 @media all and (max-width: 1024px) {
   body:after {
     content: "mobile"; } }
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -699,6 +655,18 @@ footer .nav-wrapper .nav-sub-menu {
   -webkit-justify-content: center;
   justify-content: center; }
 
+nav img {
+  width: auto;
+  max-width: 40px;
+  max-height: 40px;
+  padding-right: 5px; }
+  @media (max-width: 896px) {
+    nav img {
+      max-width: 30px; } }
+  @media (max-width: 767px) {
+    nav img {
+      max-width: 25px; } }
+
 .nav-main-menu {
   width: 100%; }
 
@@ -726,12 +694,9 @@ footer .nav-wrapper .nav-sub-menu {
   @media (max-width: 550px) {
     #header-nav a {
       max-height: 125px; } }
-#header-nav img {
+#header-nav .nav-logo, #header-nav .mobile-nav-icon-wrapper {
   height: 78px;
   width: auto; }
-  @media (max-width: 550px) {
-    #header-nav img {
-      width: auto; } }
 
 .horiz-nav {
   width: 100%;
@@ -790,16 +755,6 @@ footer .nav-wrapper .nav-sub-menu {
   footer nav {
     max-width: 60%;
     margin-right: 1%; } }
-footer nav img {
-  max-width: 30px;
-  max-height: 30px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    footer nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    footer nav img {
-      max-width: 25px; } }
 @media (min-width: 550px) and (max-width: 1023px) {
   footer .vert-nav {
     width: 90%; } }
@@ -895,17 +850,6 @@ nav a {
   border-bottom: 1px solid #efefef;
   border-radius: 0; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -1133,17 +1077,6 @@ nav img {
 .arrow-container {
   cursor: pointer; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -1289,17 +1222,6 @@ footer {
 footer .social-media {
   list-style-type: none; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -1317,17 +1239,6 @@ nav img {
     padding-top: 30px;
     padding-bottom: 30px; } }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -1419,17 +1330,6 @@ table tr:nth-child(odd) {
 table .player-img {
   background-color: #fff; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -1552,17 +1452,6 @@ nav img {
 #draws-page .hotspot-border {
   box-sizing: border-box; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -1690,17 +1579,6 @@ nav img {
   width: 310px;
   margin-bottom: 10px; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -1822,17 +1700,6 @@ nav img {
   border-top: 1px solid #efefef;
   border-bottom: 1px solid #efefef; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -2241,17 +2108,6 @@ nav img {
 #drilldown .news-list li li a, #drilldown .potd-list li li a {
   box-shadow: 2px 2px 2px 2px #3b7db8; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
@@ -2445,17 +2301,6 @@ nav img {
   border-top: 1px solid #efefef;
   border-bottom: 1px solid #efefef; }
 
-nav img {
-  max-width: 40px;
-  max-height: 40px;
-  padding-right: 5px; }
-  @media (max-width: 896px) {
-    nav img {
-      max-width: 30px; } }
-  @media (max-width: 767px) {
-    nav img {
-      max-width: 25px; } }
-
 @media (max-width: 767px) {
   #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
     padding-top: 10px;
-- 
GitLab