use CSS Media Queries Level 4 to detect device support for :hover, refs

steemit#2639
Liiiyang · Mar 9, 2018 · a3dd64b · a3dd64b
1 parent ba92faf
commit a3dd64b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 38 deletions.
diff --git a/src/app/components/elements/SteemLogo/index.jsx b/src/app/components/elements/SteemLogo/index.jsx
@@ -3,24 +3,10 @@ import PropTypes from 'prop-types';
 
 const SteemLogo = () => {
     return (
-        <svg
-            className="logo__steemit"
-            width="150"
-            height="40"
-            viewBox="0 0 150 40"
-            version="1.1"
-        >
-            <title>Steemit logo</title>
-            <g className="logo__hover-group">
+        <span className="logo">
+            <svg width="150" height="40" viewBox="0 0 150 40" version="1.1">
+                <title>Steemit logo</title>
                 <g id="steemit">
-                    <rect
-                        className="logo__hover-box"
-                        x="0"
-                        y="0"
-                        width="150"
-                        height="40"
-                        fill="transparent"
-                    />
                     <path
                         className="logo__beta"
                         d="M130.576172,31.8027344 L131.430664,31.8027344 L131.430664,34.4052734 C131.622722,34.1546211 131.852212,33.9633796 132.119141,33.831543 C132.386069,33.6997064 132.67578,33.6337891 132.988281,33.6337891 C133.639326,33.6337891 134.167478,33.8575824 134.572754,34.3051758 C134.978029,34.7527692 135.180664,35.4127561 135.180664,36.2851562 C135.180664,37.1119833 134.980471,37.7988254 134.580078,38.3457031 C134.179685,38.8925809 133.624678,39.1660156 132.915039,39.1660156 C132.517902,39.1660156 132.182619,39.0699879 131.90918,38.8779297 C131.746418,38.7639968 131.572267,38.581707 131.386719,38.3310547 L131.386719,39 L130.576172,39 L130.576172,31.8027344 Z M132.861328,38.3896484 C133.336591,38.3896484 133.692219,38.2008482 133.928223,37.8232422 C134.164226,37.4456361 134.282227,36.9475942 134.282227,36.3291016 C134.282227,35.7789686 134.164226,35.323244 133.928223,34.9619141 C133.692219,34.6005841 133.344729,34.4199219 132.885742,34.4199219 C132.48535,34.4199219 132.134604,34.5680324 131.833496,34.8642578 C131.532388,35.1604833 131.381836,35.6487596 131.381836,36.3291016 C131.381836,36.8206405 131.443684,37.2193995 131.567383,37.5253906 C131.798504,38.1015654 132.229815,38.3896484 132.861328,38.3896484 Z M138.383789,33.6533203 C138.754885,33.6533203 139.114582,33.7403963 139.462891,33.9145508 C139.8112,34.0887053 140.076496,34.3141262 140.258789,34.5908203 C140.434571,34.8544935 140.551758,35.1621076 140.610352,35.5136719 C140.662435,35.7545585 140.688477,36.1386692 140.688477,36.6660156 L136.855469,36.6660156 C136.871745,37.1966172 136.997069,37.6222315 137.231445,37.9428711 C137.465821,38.2635107 137.828774,38.4238281 138.320312,38.4238281 C138.779299,38.4238281 139.145506,38.2724625 139.418945,37.9697266 C139.575196,37.7939444 139.685872,37.5904959 139.750977,37.359375 L140.615234,37.359375 C140.592448,37.5514333 140.516765,37.7654611 140.388184,38.0014648 C140.259602,38.2374686 140.115561,38.4303378 139.956055,38.5800781 C139.689126,38.8404961 139.358726,39.0162756 138.964844,39.1074219 C138.753254,39.1595055 138.513999,39.1855469 138.24707,39.1855469 C137.596025,39.1855469 137.044273,38.9487328 136.591797,38.4750977 C136.139321,38.0014625 135.913086,37.3382204 135.913086,36.4853516 C135.913086,35.6455036 136.140948,34.9635443 136.59668,34.4394531 C137.052411,33.915362 137.648108,33.6533203 138.383789,33.6533203 Z M139.785156,35.9677734 C139.749349,35.5869122 139.666342,35.2825532 139.536133,35.0546875 C139.295246,34.6315083 138.893232,34.4199219 138.330078,34.4199219 C137.92643,34.4199219 137.587892,34.565591 137.314453,34.8569336 C137.041014,35.1482762 136.896159,35.5185524 136.879883,35.9677734 L139.785156,35.9677734 Z M141.943359,32.3105469 L142.832031,32.3105469 L142.832031,33.7705078 L143.666992,33.7705078 L143.666992,34.4882812 L142.832031,34.4882812 L142.832031,37.9013672 C142.832031,38.0836598 142.89388,38.2057289 143.017578,38.2675781 C143.085938,38.3033856 143.199869,38.3212891 143.359375,38.3212891 C143.401693,38.3212891 143.447265,38.3204753 143.496094,38.3188477 C143.544922,38.31722 143.601888,38.3131511 143.666992,38.3066406 L143.666992,39 C143.56608,39.029297 143.461101,39.0504557 143.352051,39.0634766 C143.243001,39.0764975 143.125001,39.0830078 142.998047,39.0830078 C142.587889,39.0830078 142.309571,38.9780284 142.163086,38.7680664 C142.016601,38.5581044 141.943359,38.2854834 141.943359,37.9501953 L141.943359,34.4882812 L141.235352,34.4882812 L141.235352,33.7705078 L141.943359,33.7705078 L141.943359,32.3105469 Z M145.219727,37.6083984 C145.219727,37.862306 145.312499,38.0624993 145.498047,38.2089844 C145.683595,38.3554695 145.903319,38.4287109 146.157227,38.4287109 C146.466473,38.4287109 146.765949,38.3570971 147.055664,38.2138672 C147.543948,37.9762358 147.788086,37.5872423 147.788086,37.046875 L147.788086,36.3388672 C147.680664,36.4072269 147.542319,36.4641925 147.373047,36.5097656 C147.203775,36.5553388 147.037761,36.5878905 146.875,36.6074219 L146.342773,36.6757812 C146.023761,36.7180992 145.784506,36.7848303 145.625,36.8759766 C145.354816,37.0289721 145.219727,37.2731103 145.219727,37.6083984 Z M147.348633,35.8310547 C147.550457,35.8050129 147.685547,35.7203783 147.753906,35.5771484 C147.792969,35.499023 147.8125,35.3867195 147.8125,35.2402344 C147.8125,34.9407537 147.705893,34.7234707 147.492676,34.5883789 C147.279459,34.4532871 146.974286,34.3857422 146.577148,34.3857422 C146.118162,34.3857422 145.792644,34.5094389 145.600586,34.7568359 C145.493164,34.8935554 145.423177,35.0970039 145.390625,35.3671875 L144.570312,35.3671875 C144.586589,34.722653 144.795734,34.2742526 145.197754,34.0219727 C145.599774,33.7696927 146.066078,33.6435547 146.59668,33.6435547 C147.211917,33.6435547 147.711587,33.760741 148.095703,33.9951172 C148.476564,34.2294934 148.666992,34.594073 148.666992,35.0888672 L148.666992,38.1015625 C148.666992,38.1927088 148.685709,38.2659502 148.723145,38.3212891 C148.76058,38.3766279 148.839518,38.4042969 148.959961,38.4042969 C148.999024,38.4042969 149.042969,38.4018555 149.091797,38.3969727 C149.140625,38.3920898 149.192708,38.3847657 149.248047,38.375 L149.248047,39.0244141 C149.111327,39.0634768 149.007162,39.0878906 148.935547,39.0976562 C148.863932,39.1074219 148.766277,39.1123047 148.642578,39.1123047 C148.339842,39.1123047 148.120118,39.0048839 147.983398,38.7900391 C147.911783,38.6761062 147.861328,38.514975 147.832031,38.3066406 C147.652994,38.5410168 147.395835,38.7444653 147.060547,38.9169922 C146.725259,39.0895191 146.355796,39.1757812 145.952148,39.1757812 C145.46712,39.1757812 145.070802,39.0284845 144.763184,38.7338867 C144.455565,38.4392889 144.301758,38.0706402 144.301758,37.6279297 C144.301758,37.1429012 144.453123,36.7669284 144.755859,36.5 C145.058595,36.2330716 145.455727,36.0686852 145.947266,36.0068359 L147.348633,35.8310547 Z"
@@ -34,8 +20,8 @@ const SteemLogo = () => {
                         d="M32.7004951,11.3807248 C31.1310771,9.81140963 29.3043776,8.66313021 27.3619013,7.92312792 C28.4939405,4.59311764 32.5075339,3.38104493 32.5075339,3.38104493 C32.5075339,3.38104493 23.1424826,-1.48000457 12.7997611,0.459311764 C9.35218721,1.00793415 6.0461183,3.12587173 3.62767097,5.92001831 C-1.62087426,11.9803819 -0.926213868,21.1028239 5.18422484,26.3083572 C6.1233028,27.1121528 8.22014805,28.3625014 8.2587403,28.4262947 C6.8822836,31.9221676 2.48276772,32.8790671 2.48276772,32.8790671 C2.48276772,32.8790671 8.29733255,36.5152853 16.10583,37.4594261 C18.1769471,37.7145993 20.3767051,37.7783926 22.6536475,37.5359781 C26.2684544,37.2425289 29.8703972,35.3287299 32.6104465,32.6366526 C38.5407881,26.7931863 38.5922444,17.2752258 32.7004951,11.3807248 Z M30.0247661,30.3145765 C27.8121441,32.4835487 24.5060752,33.861484 21.9589871,34.0528639 C20.1580157,34.2314851 18.2284034,34.2570024 16.3759757,34.0273465 C13.6487905,33.6956214 11.680586,32.9428604 9.75097374,32.2156168 C10.7286439,31.271476 11.7063141,29.9700926 12.1051006,28.8473305 C12.3623823,28.1838802 12.3366541,27.4438779 12.0279162,26.7931863 C9.95679906,22.5317938 10.8572848,17.4283297 14.2662664,14.1110781 C16.73617,11.6996913 20.1322875,10.5641706 23.5798614,10.9852064 C26.1140854,11.2914142 28.416756,12.4014176 30.2177274,14.2003887 C34.5915151,18.5893678 34.4371461,26.014908 30.0247661,30.3145765 Z"
                     />
                 </g>
-            </g>
-        </svg>
+            </svg>
+        </span>
     );
 };
 

diff --git a/src/app/components/elements/SteemLogo/styles.scss b/src/app/components/elements/SteemLogo/styles.scss
@@ -1,23 +1,17 @@
-.logo__steemit {
+.logo {
     cursor: pointer;
     transition: all 0.3s ease-in-out;
-    .logo__hover-group {
-        .logo__hover-box{
-            fill: transparent;
-        }
-        .logo__beta{
-            fill: $color-text-gray;
-            transition: 0.25s all ease-in-out;
-        }
-        .logo__steemit{
-            fill: $color-teal;
-
-            transition: 0.25s all ease-in-out;
-        }
-        :hover {
-            .logo__hover-box{
-                fill: transparent;
-            }
+    .logo__beta{
+        fill: $color-text-gray;
+        transition: 0.25s all ease-in-out;
+    }
+    .logo__steemit{
+        fill: $color-teal;
+        transition: 0.25s all ease-in-out;
+    }
+    // Fixes #2639 - Don't apply hover styles on devices that do not support it.
+    @media (hover: hover) {
+        &:hover, &:active {
             .logo__beta{
                 @include themify($themes) {
                     fill: themed('colorAccentReverse');
@@ -30,4 +24,4 @@
             }
         }
     }
-}
+}