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