MINOR Using box-sizing to lay out form fields rather than relying on …

…hacky 90% widths + pixel-based paddings, which makes it impossible to align anything outside of the field container the these elements. Using conditional CSS to disable field padding if box-sizing is not available. Generalized "stacked" form pattern in _form.scss, fixed CMS actions padding to align with fields.

admin/code/LeftAndMain.php

@@ -292,15 +292,21 @@ function init() {
 		);
 
 		Requirements::css(SAPPHIRE_ADMIN_DIR . '/css/screen.css');
-
+
+		// Browser-specific requirements
+		$ie = isset($_SERVER['HTTP_USER_AGENT']) ? strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') : false;
+		if($ie) {
+			$version = substr($_SERVER['HTTP_USER_AGENT'], $ie + 5, 3);
+			if($version == 7) Requirements::css('sapphire/admin/css/ie7.css');
+		}
+
+		// Custom requirements				
 		foreach (self::$extra_requirements['javascript'] as $file) {
 			Requirements::javascript($file[0]);
 		}
-
 		foreach (self::$extra_requirements['css'] as $file) {
 			Requirements::css($file[0], $file[1]);
 		}
-
 		foreach (self::$extra_requirements['themedcss'] as $file) {
 			Requirements::themedCSS($file[0], $file[1]);
 		}

admin/css/ie7.css

@@ -0,0 +1 @@
+.field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; }

admin/scss/_forms.scss

@@ -151,8 +151,9 @@ form.nostyle {
 	textarea,
 	select,
 	.TreeDropdownField {
-		width: 90%;
+		width: 100%;
 		max-width: $grid-horizontal * 64;
+		@include box-sizing(border-box);
 	}
 
 	input.text, 
@@ -184,22 +185,34 @@ 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%);
 	}
+
+}
+
+form.stacked .field, .field.stacked {
+	label {
+		display: block;
+		float: none;
+		padding-bottom: 10px;
+	}
 
+	.middleColumn {
+		margin-left: 0px;
+		clear: left;
+	}
+}
+
+.field {	
 	/* TreeDropdowns */
 	.TreeDropdownField {
-		padding: 0 14px 0 0;
+		padding: 0;
 
 		.treedropdownfield-panel {
 			border: 1px solid lighten($color-medium-separator, 20%);
 			border-top: none;
-			padding-right: 14px;
 
 			@include border-bottom-left-radius(4px);
 			@include border-bottom-right-radius(4px);
 		}
-		.treedropdownfield-toggle-panel-link {
-			margin-right: -14px;
-		}
 
 		&.treedropdownfield-open-tree {
 			@include border-bottom-left-radius(0);
@@ -430,10 +443,12 @@ form.nostyle {
 /** ----------------------------------------------------
  * Checkbox Field
  * ---------------------------------------------------- */
-.field {
-	&.checkbox {
-		padding-left: $grid-horizontal * 24;
-		margin-bottom: $grid-vertical;
+.field.checkbox {
+	padding-left: $grid-horizontal * 23;
+	margin-bottom: $grid-vertical;
+
+	input {
+		margin-left: 0;
 	}
 }
 /** ----------------------------------------------------
@@ -479,16 +494,12 @@ form.nostyle {
 		visibility: hidden; // enabled by JS
 	}
 
-	label {
-		display: block;
-		float: none;
-		padding-bottom: 10px;
+	.mceEditor {
+		input, select {
+			width: auto;
+		}	
 	}
 
-	.middleColumn {
-		margin-left: 0px;
-		clear: left;
-	}
 }
 
 

admin/scss/_style.scss

@@ -233,7 +233,7 @@ html,body {
  * -------------------------------------------- */
 
 .cms-content-actions {
-	margin: $grid-vertical $grid-horizontal;
+	margin: $grid-vertical $grid-horizontal*2 $grid-vertical*2 $grid-horizontal*2;
 	text-align: right;
 	height: $grid-vertical*4;
 	z-index: 70;

admin/scss/ie7.scss

@@ -0,0 +1,9 @@
+.field {
+	input.text, 
+	textarea,
+	.TreeDropdownField {
+		// Left/right padding conflicts with 100% width on the element unless box-sizing is respected, so disable padding for IE
+		padding-left: 0;
+		padding-right: 0;
+	}
+}