]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Update off-canvas menu icon to be visible on Android 2.3 devices 3828/head
authorJohn Bacon <jpbacon@gmail.com>
Fri, 6 Dec 2013 16:52:55 +0000 (11:52 -0500)
committerJohn Bacon <jpbacon@gmail.com>
Fri, 6 Dec 2013 16:52:55 +0000 (11:52 -0500)
As detailed on CanIUse:
"Android 2.3 default browser doesn't seem to appreciate 0px values. e.g. -webkit-box-shadow: 5px 1px 0px #f04e29; doesn't work, but -webkit-box-shadow: 5px 1px 1px #f04e29 does!"
http://caniuse.com/#search=box-shadow

This is the case on Android 2.3 browsers (i.e. a tested Samsung Galaxy S2). Modifying the 0 value to 1px only for the -webkit prefixed box-shadow solves the issue without causing visual degradation.

scss/foundation/components/_offcanvas.scss

index de442af4cb740a65b83fcee0cc1bb0f8dd82fcc5..c6187c879f1582587264bb9a644311dd618d560f 100755 (executable)
@@ -304,9 +304,9 @@ $menu-slide: "transform 500ms ease" !default;
       // margin-top: $tabbar-height / 4;
 
       @if $experimental {
-        -webkit-box-shadow: 0 10px 0 1px $tabbar-menu-icon-color,
-                            0 16px 0 1px $tabbar-menu-icon-color,
-                            0 22px 0 1px $tabbar-menu-icon-color;
+        -webkit-box-shadow: 1px 10px 1px 1px $tabbar-menu-icon-color,
+                            1px 16px 1px 1px $tabbar-menu-icon-color,
+                            1px 22px 1px 1px $tabbar-menu-icon-color;
       }
         box-shadow:        0 10px 0 1px $tabbar-menu-icon-color,
                             0 16px 0 1px $tabbar-menu-icon-color,
@@ -315,9 +315,9 @@ $menu-slide: "transform 500ms ease" !default;
     
     &:hover span {
       @if $experimental {
-        -webkit-box-shadow: 0 10px 0 1px $tabbar-menu-icon-hover,
-                            0 16px 0 1px $tabbar-menu-icon-hover,
-                            0 22px 0 1px $tabbar-menu-icon-hover;
+        -webkit-box-shadow: 1px 10px 1px 1px $tabbar-menu-icon-hover,
+                            1px 16px 1px 1px $tabbar-menu-icon-hover,
+                            1px 22px 1px 1px $tabbar-menu-icon-hover;
       }
         box-shadow:        0 10px 0 1px $tabbar-menu-icon-hover,
                             0 16px 0 1px $tabbar-menu-icon-hover,
@@ -361,4 +361,4 @@ $menu-slide: "transform 500ms ease" !default;
     .move-right > .inner-wrap { left: $off-canvas-width; }
 
   }
-}
\ No newline at end of file
+}