Fixed tablet portrait first-child margin-left issue.

rishabh-ink · Nov 14, 2012 · 498d86e · 498d86e
1 parent b90e811
commit 498d86e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/less/component/body/body.less b/less/component/body/body.less
@@ -11,14 +11,13 @@ section.info-banner {
 	@baseMargin: @gridGutterWidth / 4;
 
 	.info-box {
-		background: #85BEFF;
+		.img-gradient("../img/common/bghaze.png", #FFFFFF, 1, #C9E2FF, #ADD4FF, center center, 100px);
+		.drop-shadow();
+		.border-radius();
+
 		margin: @baseMargin;
 		height: @gridColumnWidth * 2.5;
-		padding: (@baseMargin * 8) @baseMargin;
-
-		&:first-child {
-			margin-left: @baseMargin;
-		}
+		padding: (@baseMargin * 8) (@baseMargin * 4);
 
 		.title {
 			margin: @baseMargin;

diff --git a/less/style.css b/less/style.css
@@ -10278,9 +10278,9 @@ ul.horizontal-list li {
 i {
   color: #777777;
 }
-@media (max-width: 480px) {
+@media (max-width: 767px) {
   .row-fluid [class*="span"]:first-child {
-    margin-left: inherit;
+    margin-left: 5px;
   }
 }
 .main {
@@ -10292,13 +10292,31 @@ i {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
 }
 section.info-banner .info-box {
-  background: #85BEFF;
+  background-color: #ffffff;
+  background-color: #ffffff;
+  zoom: 1;
+  background-color: transparent\9;
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffffffff)";
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffffffff);
+  background-image: url("../img/common/bghaze.png"), -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 1500, color-stop(0%, #c7e1ff), color-stop(100%, #add5ff));
+  background-image: url("../img/common/bghaze.png"), -webkit-radial-gradient(center center, #c7e1ff, #add5ff 100px);
+  background-image: url("../img/common/bghaze.png"), -moz-radial-gradient(center center, #c7e1ff, #add5ff 100px);
+  background-image: url("../img/common/bghaze.png"), -o-radial-gradient(center center, #c7e1ff, #add5ff 100px);
+  background-image: url("../img/common/bghaze.png"), -ms-radial-gradient(center center, #c7e1ff, #add5ff 100px);
+  background-image: url("../img/common/bghaze.png"), radial-gradient(center center, #c7e1ff, #add5ff 100px);
+  background-repeat: repeat;
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
   margin: 5px;
   height: 150px;
-  padding: 40px 5px;
-}
-section.info-banner .info-box:first-child {
-  margin-left: 5px;
+  padding: 40px 20px;
 }
 section.info-banner .info-box .title {
   margin: 5px;

diff --git a/less/util/common.less b/less/util/common.less
@@ -18,8 +18,8 @@ i {
 
 // Fix for mobile layout
 // See https://github.com/twitter/bootstrap/pull/5028
-@media (max-width: 480px) {
+@media (max-width: 767px) {
 	.row-fluid [class*="span"]:first-child {
-	  margin-left: inherit;
+	  margin-left: 5px;
 	}
 }
diff --git a/less/util/mixin.less b/less/util/mixin.less
@@ -13,7 +13,7 @@
         filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7
 }
 
-.img-gradient(@image, @baseColor, @alpha, @colorStopOne, @colorStopTwo) {
+.img-gradient(@image, @baseColor, @alpha, @colorStopOne, @colorStopTwo, @radialGradientPosition: top center, @radialGradientRadius: 1500px) {
     @alphaColour: hsla(hue(@baseColor), saturation(@baseColor), lightness(@baseColor), @alpha);
     @ieAlphaColour: argb(@alphaColour);
 
@@ -30,11 +30,11 @@
         filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7
 
     background-image: url(@image), -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 1500, color-stop(0%, @alphaColourOne), color-stop(100%, @alphaColourTwo));
-    background-image: url(@image), -webkit-radial-gradient(top center, @alphaColourOne, @alphaColourTwo 1500px);
-    background-image: url(@image), -moz-radial-gradient(top center, @alphaColourOne, @alphaColourTwo 1500px);
-    background-image: url(@image), -o-radial-gradient(top center, @alphaColourOne, @alphaColourTwo 1500px);
-    background-image: url(@image), -ms-radial-gradient(top center, @alphaColourOne, @alphaColourTwo 1500px);
-    background-image: url(@image), radial-gradient(top center, @alphaColourOne, @alphaColourTwo 1500px);
+    background-image: url(@image), -webkit-radial-gradient(@radialGradientPosition, @alphaColourOne, @alphaColourTwo @radialGradientRadius);
+    background-image: url(@image), -moz-radial-gradient(@radialGradientPosition, @alphaColourOne, @alphaColourTwo @radialGradientRadius);
+    background-image: url(@image), -o-radial-gradient(@radialGradientPosition, @alphaColourOne, @alphaColourTwo @radialGradientRadius);
+    background-image: url(@image), -ms-radial-gradient(@radialGradientPosition, @alphaColourOne, @alphaColourTwo @radialGradientRadius);
+    background-image: url(@image), radial-gradient(@radialGradientPosition, @alphaColourOne, @alphaColourTwo @radialGradientRadius);
 
     background-repeat: repeat;
 }