Skip to content
This repository
Browse code

ENHANCEMENT Basic css spacing issues

Ticket #7446 Minor css spacing fixs: padding on grid filter, filter
panel, page actions box-shadow to remove
  • Loading branch information...
commit 3ada9a93274304e6a61e24ffadec9b2629f4138f 1 parent 3f68e6f
Paul authored June 11, 2012
11  admin/css/screen.css
@@ -141,7 +141,7 @@ form.nostyle label.left { float: none; display: inherit; width: auto; padding: 0
141 141
 form.nostyle .middleColumn { margin-left: 0; }
142 142
 form.nostyle input.text, form.nostyle textarea, form.nostyle select, form.nostyle .TreeDropdownField { width: auto; max-width: auto; }
143 143
 
144  
-.field { display: block; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); padding: 0 0 7px 0; margin: 0 0 8px 0; *zoom: 1; }
  144
+.field { display: block; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(244, 245, 245, 0.8); -moz-box-shadow: 0 1px 0 rgba(244, 245, 245, 0.8); box-shadow: 0 1px 0 rgba(244, 245, 245, 0.8); padding: 0 0 7px 0; margin: 0 0 8px 0; *zoom: 1; }
145 145
 .field:last-child { border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
146 146
 .field:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
147 147
 .field.nolabel .middleColumn { margin-left: 0; }
@@ -151,11 +151,10 @@ form.nostyle input.text, form.nostyle textarea, form.nostyle select, form.nostyl
151 151
 .field span.readonly { padding-top: 8px; line-height: 16px; display: block; }
152 152
 .field .help { color: #777777; font-style: italic; padding-top: 1em; }
153 153
 .field input.text, .field textarea, .field select, .field .TreeDropdownField { width: 100%; max-width: 512px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
154  
-.field .fieldholder-small { margin-top: 8px; }
155  
-.field .fieldholder-small label { padding-top: 8px; width: 64px; float: left; margin-left: -64px; }
156 154
 .field input.text, .field textarea, .field .TreeDropdownField { background: #fff; border: 1px solid #b3b3b3; padding: 7px 7px; line-height: 16px; margin: 0; outline: none; -webkit-transition: 0.2s box-shadow ease-in; -moz-transition: 0.2s box-shadow ease-in; -ms-transition: 0.2s box-shadow ease-in; -o-transition: 0.2s box-shadow ease-in; transition: 0.2s box-shadow ease-in; -webkit-transition: 0.2s border ease-in; -moz-transition: 0.2s border ease-in; -ms-transition: 0.2s border ease-in; -o-transition: 0.2s border ease-in; transition: 0.2s border ease-in; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eaeaea), color-stop(10%, #ffffff)); background-image: -webkit-linear-gradient(#eaeaea, #ffffff 10%); background-image: -moz-linear-gradient(#eaeaea, #ffffff 10%); background-image: -o-linear-gradient(#eaeaea, #ffffff 10%); background-image: -ms-linear-gradient(#eaeaea, #ffffff 10%); background-image: linear-gradient(#eaeaea, #ffffff 10%); }
157 155
 .field input.text:focus, .field textarea:focus, .field .TreeDropdownField:focus { border: 1px solid #9a9a9a; border-top-color: gray; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; }
158 156
 .field input[disabled], .field input.disabled, .field textarea[disabled], .field textarea.disabled, .field select[disabled], .field select.disabled { color: #777777; background: #efefef; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiY2JjYmMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bcbcbc), color-stop(10%, #efefef), color-stop(90%, #ffffff), color-stop(100%, #bcbcbc)); background-image: -webkit-linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); background-image: -moz-linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); background-image: -o-linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); background-image: -ms-linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); background-image: linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); border: 1px solid #b3b3b3; }
  157
+.field#Action { box-shadow: none; }
159 158
 
160 159
 form.stacked .field label, .field.stacked label { display: block; float: none; padding-bottom: 10px; }
161 160
 form.stacked .field .middleColumn, .field.stacked .middleColumn { margin-left: 0px; clear: left; }
@@ -226,6 +225,7 @@ input.radio { margin-left: 0; }
226 225
 /** ---------------------------------------------------- HTML Text  ---------------------------------------------------- */
227 226
 .htmleditor textarea { visibility: hidden; }
228 227
 .htmleditor .mceEditor input, .htmleditor .mceEditor select { width: auto; }
  228
+.htmleditor label.left { padding-bottom: 4px; }
229 229
 
230 230
 .action-hidden { display: none; }
231 231
 
@@ -365,7 +365,7 @@ body.cms { overflow: hidden; }
365 365
 .cms-content-tools { background-color: #F1F4F5; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 2px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 2px 3px; box-shadow: rgba(0, 0, 0, 0.6) 0 2px 3px; float: left; position: relative; }
366 366
 .cms-content-tools.filter { padding: 0 !important; }
367 367
 .cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
368  
-.cms-content-tools .cms-panel-content { width: 176px; padding: 0 8px; overflow: auto; height: 100%; }
  368
+.cms-content-tools .cms-panel-content { width: 176px; padding: 8px 8px 0; overflow: auto; height: 100%; }
369 369
 .cms-content-tools .cms-panel-content .dropdown select { width: 160px; }
370 370
 .cms-content-tools .cms-panel-content #LastEditedFrom { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
371 371
 .cms-content-tools .cms-panel-content #LastEditedFrom input { width: 160px; }
@@ -456,6 +456,9 @@ form.member-profile-form .ui-tabs-nav .ui-corner-all, form.member-profile-form .
456 456
 .cms .cms-content-fields #Root_Main .customFormat { max-width: 80px; }
457 457
 .cms .cms-content-fields #Root_Main .cms-help-toggle { text-indent: -9999em; display: inline-block; width: 20px; background: url(../images/question.png) no-repeat 0px 0px; }
458 458
 .cms .cms-content-fields #Root_Permissions ul.optionset li { float: none; }
  459
+.cms .cms-content-fields .field .fieldholder-small { margin-top: 8px; }
  460
+.cms .cms-content-fields .field .fieldholder-small label { padding-top: 8px; width: 64px; float: left; margin-left: -64px; }
  461
+.cms .cms-content-fields .field table .fieldholder-small { margin-top: 0; }
459 462
 
460 463
 /** -------------------------------------------- "Settings" Form -------------------------------------------- */
461 464
 #CanViewType .optionset li, #CanEditType .optionset li, #CanCreateTopLevelType .optionset li { float: none; width: auto; white-space: nowrap; }
20  admin/scss/_forms.scss
@@ -17,7 +17,7 @@ form.nostyle {
17 17
 .field {
18 18
 	display: block;
19 19
 	border-bottom: 1px solid $color-shadow-light;
20  
-    @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
  20
+    @include box-shadow(0 1px 0 lighten($color-shadow-light, 16%));
21 21
 
22 22
 	//TODO: use single border line with shadow instead:: http://daverupert.com/2011/06/two-tone-borders-with-css3/
23 23
 	//overflow: hidden;
@@ -89,16 +89,6 @@ form.nostyle {
89 89
 		@include box-sizing(border-box);
90 90
 	}
91 91
 
92  
-	// Small fields have a second set of headers
93  
-	.fieldholder-small {
94  
-		margin-top: $grid-y;
95  
-		label {
96  
-			padding-top: $grid-x;
97  
-			width: $grid-x * 8;
98  
-			float: left;
99  
-			margin-left: $grid-x * -8;
100  
-		}
101  
-	}
102 92
 	
103 93
 	input.text, 
104 94
 	textarea,
@@ -129,7 +119,9 @@ form.nostyle {
129 119
 		@include background-image(linear-gradient(darken(#efefef, 20%), #efefef 10%, #fff 90%, darken(#efefef, 20%)));
130 120
 		border: 1px solid lighten($color-medium-separator, 20%);
131 121
 	}
132  
-
  122
+	&#Action {
  123
+    	box-shadow: none;
  124
+	}
133 125
 }
134 126
 
135 127
 form.stacked .field, .field.stacked {
@@ -513,7 +505,9 @@ input.radio {
513 505
 			width: auto;
514 506
 		}	
515 507
 	}
516  
-	
  508
+	label.left {
  509
+		padding-bottom: $grid-y/2;
  510
+	}
517 511
 }
518 512
 
519 513
 
17  admin/scss/_style.scss
@@ -630,7 +630,7 @@ body.cms {
630 630
 	
631 631
 	.cms-panel-content {
632 632
 		width: ($grid-x * 22);
633  
-		padding: 0 $grid-x;
  633
+		padding: $grid-x $grid-x 0;
634 634
 		overflow: auto;
635 635
 		height:100%;
636 636
 		.dropdown select {
@@ -1082,6 +1082,21 @@ form.member-profile-form {
1082 1082
 				float:none;
1083 1083
 			}
1084 1084
 		}	
  1085
+		
  1086
+		.field {
  1087
+			.fieldholder-small { // Small fields have a second set of headers
  1088
+				margin-top: $grid-y;
  1089
+				label {
  1090
+					padding-top: $grid-x;
  1091
+					width: $grid-x * 8;
  1092
+					float: left;
  1093
+					margin-left: $grid-x * -8;
  1094
+				}
  1095
+			}
  1096
+			table .fieldholder-small {
  1097
+				margin-top: 0;
  1098
+			}
  1099
+		}
1085 1100
 	}
1086 1101
 }
1087 1102
 
1  css/AssetUploadField.css
@@ -8,7 +8,6 @@
8 8
 
9 9
 body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: 16px; overflow: auto; background: #E2E2E2; }
10 10
 body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
11  
-body.cms.ss-uploadfield-edit-iframe .fieldholder-small, .composite.ss-assetuploadfield .details fieldset .fieldholder-small { margin-top: -8px; }
12 11
 body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-assetuploadfield .details fieldset .fieldholder-small label { margin-left: 0; }
13 12
 
14 13
 .ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
2  css/GridField.css
@@ -71,7 +71,7 @@
71 71
 .cms table.ss-gridfield-table tr th div.fieldgroup.filter-buttons { min-width: 0; }
72 72
 .cms table.ss-gridfield-table tr th div.fieldgroup.filter-buttons div { width: auto; display: inline; }
73 73
 .cms table.ss-gridfield-table tr th.main { white-space: nowrap; border-top: 1px solid #a4b4bf; border-left: 1px solid #a4b4bf; color: #fff; background: #98aab6; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
74  
-.cms table.ss-gridfield-table tr th.main span { text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0; padding-left: 8px; padding-right: 8px; }
  74
+.cms table.ss-gridfield-table tr th.main span { text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0; padding-left: 8px; padding-right: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; margin-right: 8px; }
75 75
 .cms table.ss-gridfield-table tr th.main.col-listChildrenLink { border-right: none; }
76 76
 .cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { padding: 0; cursor: default; }
77 77
 .cms table.ss-gridfield-table tr th.extra { position: relative; background: #637276; background: rgba(0, 0, 0, 0.7); padding: 5px; border-top: rgba(0, 0, 0, 0.2); }
2  scss/AssetUploadField.scss
@@ -23,7 +23,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
23 23
 		text-shadow: 0px 1px 0px #fff;
24 24
 	}
25 25
 	.fieldholder-small{
26  
-		margin-top:-8px;
  26
+		
27 27
 		label{
28 28
 			margin-left:0;
29 29
 		}
10  scss/GridField.scss
@@ -21,6 +21,7 @@
21 21
 //multiple images. 
22 22
 $experimental-support-for-svg: true; 
23 23
 
  24
+
24 25
 $gf_colour_gradient_dark: darken($color-base, 8%);
25 26
 $gf_colour_header_border: $gf_colour_gradient_dark;
26 27
 $gf_colour_subheader: saturate(lighten($color-base, 15%),5%);
@@ -39,6 +40,12 @@ $gf_grid_x:	16px;
39 40
 	-webkit-box-shadow: none;
40 41
 	box-shadow: none;
41 42
 }
  43
+@mixin hide-text-overflow {
  44
+	overflow: hidden;
  45
+	white-space: nowrap;
  46
+	text-overflow: ellipsis;
  47
+	o-text-overflow: ellipsis;
  48
+}
42 49
 
43 50
 .cms {
44 51
 	.ss-gridfield {
@@ -360,6 +367,9 @@ $gf_grid_x:	16px;
360 367
 						@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
361 368
 						padding-left: $gf_grid_x/2;
362 369
 						padding-right: $gf_grid_x/2;
  370
+						@include hide-text-overflow; // Add ellipses to overflowing text
  371
+						margin-right: 8px;
  372
+
363 373
 					}
364 374
 					&.col-listChildrenLink {
365 375
 						border-right:none;

0 notes on commit 3ada9a9

Please sign in to comment.
Something went wrong with that request. Please try again.