Permalink
Browse files

fixed bug when scrolling on top of the screen

  • Loading branch information...
1 parent ba2d7a9 commit 316d6d317943ac6b5fea488cc71f57d1427ec1d5 @steren steren committed Aug 9, 2012
Showing with 7 additions and 6 deletions.
  1. +1 −1 app/css/phone.blue.css
  2. +1 −1 app/css/phone.earth.css
  3. +1 −1 app/css/phone.gray.css
  4. +1 −1 app/css/phone.spicy.css
  5. +1 −1 app/css/phone.vegetal.css
  6. +2 −1 app/less/phone.less
View
2 app/css/phone.blue.css
@@ -34,7 +34,7 @@ img{max-width:100%;}
.google-map img{max-width:none;}
.map-overlay{color:#333333;}
body{font-size:15 px;}
-header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:10em;background-size:100% auto;width:100%;position:relative;z-index:10;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#4b6c8a), to(#2b3e4f));background-image:-webkit-linear-gradient(#4b6c8a, #2b3e4f);background-image:-moz-linear-gradient(#4b6c8a, #2b3e4f);background-image:-ms-linear-gradient(#4b6c8a, #2b3e4f);background-image:-o-linear-gradient(#4b6c8a, #2b3e4f);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
+header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:5em;background-size:100% auto;width:100%;position:relative;z-index:10;pointer-events:none;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#4b6c8a), to(#2b3e4f));background-image:-webkit-linear-gradient(#4b6c8a, #2b3e4f);background-image:-moz-linear-gradient(#4b6c8a, #2b3e4f);background-image:-ms-linear-gradient(#4b6c8a, #2b3e4f);background-image:-o-linear-gradient(#4b6c8a, #2b3e4f);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
header>span{display:block;position:absolute;top:0;right:0;width:40%;height:2.24em;z-index:32;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, right top, color-stop(0, rgba(83, 135, 181, 0)), color-stop(0.4, rgba(83, 135, 181, 0.5)), color-stop(1, rgba(83, 135, 181, 0.4)));background-image:-webkit-linear-gradient(rgba(83, 135, 181, 0) 0, rgba(83, 135, 181, 0.5) 0.4, rgba(83, 135, 181, 0.4) 1);background-image:-moz-linear-gradient(to right, rgba(83, 135, 181, 0) 0%, rgba(83, 135, 181, 0.5) 40%, rgba(83, 135, 181, 0.4) 100%);background-image:-ms-linear-gradient(to right, rgba(83, 135, 181, 0) 0%, rgba(83, 135, 181, 0.5) 40%, rgba(83, 135, 181, 0.4) 100%);background-image:-o-linear-gradient(to right, rgba(83, 135, 181, 0) 0%, rgba(83, 135, 181, 0.5) 40%, rgba(83, 135, 181, 0.4) 100%);}
#back{position:absolute;left:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-back.png) no-repeat center center;text-indent:-30000px;display:none;}
#refresh{position:absolute;right:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-refresh.png) no-repeat center center;text-indent:-30000px;}
View
2 app/css/phone.earth.css
@@ -34,7 +34,7 @@ img{max-width:100%;}
.google-map img{max-width:none;}
.map-overlay{color:#333333;}
body{font-size:15 px;}
-header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:10em;background-size:100% auto;width:100%;position:relative;z-index:10;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#c86438), to(#804024));background-image:-webkit-linear-gradient(#c86438, #804024);background-image:-moz-linear-gradient(#c86438, #804024);background-image:-ms-linear-gradient(#c86438, #804024);background-image:-o-linear-gradient(#c86438, #804024);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
+header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:5em;background-size:100% auto;width:100%;position:relative;z-index:10;pointer-events:none;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#c86438), to(#804024));background-image:-webkit-linear-gradient(#c86438, #804024);background-image:-moz-linear-gradient(#c86438, #804024);background-image:-ms-linear-gradient(#c86438, #804024);background-image:-o-linear-gradient(#c86438, #804024);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
header>span{display:block;position:absolute;top:0;right:0;width:40%;height:2.24em;z-index:32;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, right top, color-stop(0, rgba(221, 127, 85, 0)), color-stop(0.4, rgba(221, 127, 85, 0.5)), color-stop(1, rgba(221, 127, 85, 0.4)));background-image:-webkit-linear-gradient(rgba(221, 127, 85, 0) 0, rgba(221, 127, 85, 0.5) 0.4, rgba(221, 127, 85, 0.4) 1);background-image:-moz-linear-gradient(to right, rgba(221, 127, 85, 0) 0%, rgba(221, 127, 85, 0.5) 40%, rgba(221, 127, 85, 0.4) 100%);background-image:-ms-linear-gradient(to right, rgba(221, 127, 85, 0) 0%, rgba(221, 127, 85, 0.5) 40%, rgba(221, 127, 85, 0.4) 100%);background-image:-o-linear-gradient(to right, rgba(221, 127, 85, 0) 0%, rgba(221, 127, 85, 0.5) 40%, rgba(221, 127, 85, 0.4) 100%);}
#back{position:absolute;left:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-back.png) no-repeat center center;text-indent:-30000px;display:none;}
#refresh{position:absolute;right:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-refresh.png) no-repeat center center;text-indent:-30000px;}
View
2 app/css/phone.gray.css
@@ -34,7 +34,7 @@ img{max-width:100%;}
.google-map img{max-width:none;}
.map-overlay{color:#333333;}
body{font-size:15 px;}
-header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:10em;background-size:100% auto;width:100%;position:relative;z-index:10;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#555555), to(#272727));background-image:-webkit-linear-gradient(#555555, #272727);background-image:-moz-linear-gradient(#555555, #272727);background-image:-ms-linear-gradient(#555555, #272727);background-image:-o-linear-gradient(#555555, #272727);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
+header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:5em;background-size:100% auto;width:100%;position:relative;z-index:10;pointer-events:none;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#555555), to(#272727));background-image:-webkit-linear-gradient(#555555, #272727);background-image:-moz-linear-gradient(#555555, #272727);background-image:-ms-linear-gradient(#555555, #272727);background-image:-o-linear-gradient(#555555, #272727);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
header>span{display:block;position:absolute;top:0;right:0;width:40%;height:2.24em;z-index:32;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, right top, color-stop(0, rgba(111, 111, 111, 0)), color-stop(0.4, rgba(111, 111, 111, 0.5)), color-stop(1, rgba(111, 111, 111, 0.4)));background-image:-webkit-linear-gradient(rgba(111, 111, 111, 0) 0, rgba(111, 111, 111, 0.5) 0.4, rgba(111, 111, 111, 0.4) 1);background-image:-moz-linear-gradient(to right, rgba(111, 111, 111, 0) 0%, rgba(111, 111, 111, 0.5) 40%, rgba(111, 111, 111, 0.4) 100%);background-image:-ms-linear-gradient(to right, rgba(111, 111, 111, 0) 0%, rgba(111, 111, 111, 0.5) 40%, rgba(111, 111, 111, 0.4) 100%);background-image:-o-linear-gradient(to right, rgba(111, 111, 111, 0) 0%, rgba(111, 111, 111, 0.5) 40%, rgba(111, 111, 111, 0.4) 100%);}
#back{position:absolute;left:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-back.png) no-repeat center center;text-indent:-30000px;display:none;}
#refresh{position:absolute;right:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-refresh.png) no-repeat center center;text-indent:-30000px;}
View
2 app/css/phone.spicy.css
@@ -34,7 +34,7 @@ img{max-width:100%;}
.google-map img{max-width:none;}
.map-overlay{color:#333333;}
body{font-size:15 px;}
-header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:10em;background-size:100% auto;width:100%;position:relative;z-index:10;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#cb1717), to(#790d0d));background-image:-webkit-linear-gradient(#cb1717, #790d0d);background-image:-moz-linear-gradient(#cb1717, #790d0d);background-image:-ms-linear-gradient(#cb1717, #790d0d);background-image:-o-linear-gradient(#cb1717, #790d0d);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
+header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:5em;background-size:100% auto;width:100%;position:relative;z-index:10;pointer-events:none;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#cb1717), to(#790d0d));background-image:-webkit-linear-gradient(#cb1717, #790d0d);background-image:-moz-linear-gradient(#cb1717, #790d0d);background-image:-ms-linear-gradient(#cb1717, #790d0d);background-image:-o-linear-gradient(#cb1717, #790d0d);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
header>span{display:block;position:absolute;top:0;right:0;width:40%;height:2.24em;z-index:32;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, right top, color-stop(0, rgba(243, 34, 34, 0)), color-stop(0.4, rgba(243, 34, 34, 0.5)), color-stop(1, rgba(243, 34, 34, 0.4)));background-image:-webkit-linear-gradient(rgba(243, 34, 34, 0) 0, rgba(243, 34, 34, 0.5) 0.4, rgba(243, 34, 34, 0.4) 1);background-image:-moz-linear-gradient(to right, rgba(243, 34, 34, 0) 0%, rgba(243, 34, 34, 0.5) 40%, rgba(243, 34, 34, 0.4) 100%);background-image:-ms-linear-gradient(to right, rgba(243, 34, 34, 0) 0%, rgba(243, 34, 34, 0.5) 40%, rgba(243, 34, 34, 0.4) 100%);background-image:-o-linear-gradient(to right, rgba(243, 34, 34, 0) 0%, rgba(243, 34, 34, 0.5) 40%, rgba(243, 34, 34, 0.4) 100%);}
#back{position:absolute;left:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-back.png) no-repeat center center;text-indent:-30000px;display:none;}
#refresh{position:absolute;right:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-refresh.png) no-repeat center center;text-indent:-30000px;}
View
2 app/css/phone.vegetal.css
@@ -34,7 +34,7 @@ img{max-width:100%;}
.google-map img{max-width:none;}
.map-overlay{color:#333333;}
body{font-size:15 px;}
-header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:10em;background-size:100% auto;width:100%;position:relative;z-index:10;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#829133), to(#454d1b));background-image:-webkit-linear-gradient(#829133, #454d1b);background-image:-moz-linear-gradient(#829133, #454d1b);background-image:-ms-linear-gradient(#829133, #454d1b);background-image:-o-linear-gradient(#829133, #454d1b);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
+header{background:url(../images/phone-shadow.png) no-repeat center 2.2em;padding-bottom:5em;background-size:100% auto;width:100%;position:relative;z-index:10;pointer-events:none;}header h1{background-image:-webkit-gradient(linear, left top, left bottom, from(#829133), to(#454d1b));background-image:-webkit-linear-gradient(#829133, #454d1b);background-image:-moz-linear-gradient(#829133, #454d1b);background-image:-ms-linear-gradient(#829133, #454d1b);background-image:-o-linear-gradient(#829133, #454d1b);position:absolute;z-index:30;left:0;top:0;width:100%;font-family:"HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;text-transform:uppercase;text-align:center;line-height:1em;padding:.4em 0;}header h1 span{display:block;position:relative;z-index:5;text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
header>span{display:block;position:absolute;top:0;right:0;width:40%;height:2.24em;z-index:32;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, right top, color-stop(0, rgba(173, 195, 52, 0)), color-stop(0.4, rgba(173, 195, 52, 0.5)), color-stop(1, rgba(173, 195, 52, 0.4)));background-image:-webkit-linear-gradient(rgba(173, 195, 52, 0) 0, rgba(173, 195, 52, 0.5) 0.4, rgba(173, 195, 52, 0.4) 1);background-image:-moz-linear-gradient(to right, rgba(173, 195, 52, 0) 0%, rgba(173, 195, 52, 0.5) 40%, rgba(173, 195, 52, 0.4) 100%);background-image:-ms-linear-gradient(to right, rgba(173, 195, 52, 0) 0%, rgba(173, 195, 52, 0.5) 40%, rgba(173, 195, 52, 0.4) 100%);background-image:-o-linear-gradient(to right, rgba(173, 195, 52, 0) 0%, rgba(173, 195, 52, 0.5) 40%, rgba(173, 195, 52, 0.4) 100%);}
#back{position:absolute;left:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-back.png) no-repeat center center;text-indent:-30000px;display:none;}
#refresh{position:absolute;right:0;top:0;width:3em;height:2.24em;overflow:hidden;z-index:35;background:transparent url(../images/phone-refresh.png) no-repeat center center;text-indent:-30000px;}
View
3 app/less/phone.less
@@ -21,11 +21,12 @@ body {
//---------------------------------------------------------------------------
header {
background: url(../images/phone-shadow.png) no-repeat center 2.2em;
- padding-bottom: 10em;
+ padding-bottom: 5em;
background-size: 100% auto;
width: 100%;
position:relative;
z-index:10;
+ pointer-events: none;
h1 {
.vertical-gradient(desaturate(lighten(@background-color, 20%), 20%), desaturate(lighten(@background-color, 2), 20%));

0 comments on commit 316d6d3

Please sign in to comment.