ENHANCEMENT Basic css spacing issues

Ticket #7446 Minor css spacing fixs: padding on grid filter, filter panel, page actions box-shadow to remove
silverstripe · Jun 11, 2012 · 3ada9a9 · 3ada9a9
1 parent 3f68e6f
commit 3ada9a9
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 21 deletions.
diff --git a/admin/css/screen.css b/admin/css/screen.css
diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss
@@ -17,7 +17,7 @@ form.nostyle {
 .field {
 	display: block;
 	border-bottom: 1px solid $color-shadow-light;
-    @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
+    @include box-shadow(0 1px 0 lighten($color-shadow-light, 16%));
 
 	//TODO: use single border line with shadow instead:: http://daverupert.com/2011/06/two-tone-borders-with-css3/
 	//overflow: hidden;
@@ -89,16 +89,6 @@ form.nostyle {
 		@include box-sizing(border-box);
 	}
 
-	// Small fields have a second set of headers
-	.fieldholder-small {
-		margin-top: $grid-y;
-		label {
-			padding-top: $grid-x;
-			width: $grid-x * 8;
-			float: left;
-			margin-left: $grid-x * -8;
-		}
-	}
 
 	input.text, 
 	textarea,
@@ -129,7 +119,9 @@ form.nostyle {
 		@include background-image(linear-gradient(darken(#efefef, 20%), #efefef 10%, #fff 90%, darken(#efefef, 20%)));
 		border: 1px solid lighten($color-medium-separator, 20%);
 	}
-
+	&#Action {
+    	box-shadow: none;
+	}
 }
 
 form.stacked .field, .field.stacked {
@@ -513,7 +505,9 @@ input.radio {
 			width: auto;
 		}	
 	}
-
+	label.left {
+		padding-bottom: $grid-y/2;
+	}
 }
 
 

diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss
@@ -630,7 +630,7 @@ body.cms {
 
 	.cms-panel-content {
 		width: ($grid-x * 22);
-		padding: 0 $grid-x;
+		padding: $grid-x $grid-x 0;
 		overflow: auto;
 		height:100%;
 		.dropdown select {
@@ -1082,6 +1082,21 @@ form.member-profile-form {
 				float:none;
 			}
 		}	
+
+		.field {
+			.fieldholder-small { // Small fields have a second set of headers
+				margin-top: $grid-y;
+				label {
+					padding-top: $grid-x;
+					width: $grid-x * 8;
+					float: left;
+					margin-left: $grid-x * -8;
+				}
+			}
+			table .fieldholder-small {
+				margin-top: 0;
+			}
+		}
 	}
 }
 

diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css
diff --git a/css/GridField.css b/css/GridField.css
diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss
@@ -23,7 +23,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
 		text-shadow: 0px 1px 0px #fff;
 	}
 	.fieldholder-small{
-		margin-top:-8px;
+
 		label{
 			margin-left:0;
 		}

diff --git a/scss/GridField.scss b/scss/GridField.scss
@@ -21,6 +21,7 @@
 //multiple images. 
 $experimental-support-for-svg: true; 
 
+
 $gf_colour_gradient_dark: darken($color-base, 8%);
 $gf_colour_header_border: $gf_colour_gradient_dark;
 $gf_colour_subheader: saturate(lighten($color-base, 15%),5%);
@@ -39,6 +40,12 @@ $gf_grid_x:	16px;
 	-webkit-box-shadow: none;
 	box-shadow: none;
 }
+@mixin hide-text-overflow {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	o-text-overflow: ellipsis;
+}
 
 .cms {
 	.ss-gridfield {
@@ -360,6 +367,9 @@ $gf_grid_x:	16px;
 						@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
 						padding-left: $gf_grid_x/2;
 						padding-right: $gf_grid_x/2;
+						@include hide-text-overflow; // Add ellipses to overflowing text
+						margin-right: 8px;
+
 					}
 					&.col-listChildrenLink {
 						border-right:none;