Skip to content
Browse files

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.
  • Loading branch information...
1 parent 66a6047 commit 8dd64bd2efceff43692eb3e4552cc560990b4772 @chillu chillu committed
Showing with 63 additions and 33 deletions.
  1. +9 −3 admin/code/LeftAndMain.php
  2. +1 −0 admin/css/ie7.css
  3. +14 −11 admin/css/screen.css
  4. +29 −18 admin/scss/_forms.scss
  5. +1 −1 admin/scss/_style.scss
  6. +9 −0 admin/scss/ie7.scss
View
12 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]);
}
View
1 admin/css/ie7.css
@@ -0,0 +1 @@
+.field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; }
View
25 admin/css/screen.css
@@ -86,7 +86,7 @@ form.nostyle .field { padding: 0; border: 0; }
form.nostyle label { float: none; width: auto; }
form.nostyle .middleColumn { margin-left: 0; }
-.field { display: block; padding: 10px 0; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-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); padding: 0 0 7px 0; margin: 0 0 8px 0; *zoom: 1; /* TreeDropdowns */ /* dropdowns */ /* chzn override */ /* Date Fields */ }
+.field { display: block; padding: 10px 0; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-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); padding: 0 0 7px 0; margin: 0 0 8px 0; *zoom: 1; }
.field:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
.field.noLabel .middleColumn { margin-left: 0; }
.field label.left { float: left; display: block; width: 168px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; }
@@ -94,13 +94,17 @@ form.nostyle .middleColumn { margin-left: 0; }
.field label.right { cursor: pointer; }
.field .middleColumn { margin-left: 184px; }
.field span.readonly { padding-top: 8px; line-height: 16px; display: block; }
-.field input.text, .field textarea, .field select, .field .TreeDropdownField { width: 90%; max-width: 512px; }
+.field input.text, .field textarea, .field select, .field .TreeDropdownField { width: 100%; max-width: 512px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.field input.text, .field textarea, .field .TreeDropdownField { background: #fff; border: 1px solid #b3b3b3; padding: 7px 7px; line-height: 16px; margin: 0; outline: none; -moz-transition: 0.2s box-shadow ease-in; -webkit-transition: 0.2s box-shadow ease-in; -o-transition: 0.2s box-shadow ease-in; transition: 0.2s box-shadow ease-in; -moz-transition: 0.2s border ease-in; -webkit-transition: 0.2s border ease-in; -o-transition: 0.2s border ease-in; transition: 0.2s border ease-in; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
.field input.text:focus, .field textarea:focus, .field .TreeDropdownField:focus { border: 1px solid #9a9a9a; border-top-color: gray; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; }
.field input[disabled], .field textarea[disabled], .field select[disabled] { color: #777777; background: #efefef; 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; }
-.field .TreeDropdownField { padding: 0 14px 0 0; }
-.field .TreeDropdownField .treedropdownfield-panel { border: 1px solid #b3b3b3; border-top: none; padding-right: 14px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
-.field .TreeDropdownField .treedropdownfield-toggle-panel-link { margin-right: -14px; }
+
+form.stacked .field label, .field.stacked label { display: block; float: none; padding-bottom: 10px; }
+form.stacked .field .middleColumn, .field.stacked .middleColumn { margin-left: 0px; clear: left; }
+
+.field { /* TreeDropdowns */ /* dropdowns */ /* chzn override */ /* Date Fields */ }
+.field .TreeDropdownField { padding: 0; }
+.field .TreeDropdownField .treedropdownfield-panel { border: 1px solid #b3b3b3; border-top: none; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.field .TreeDropdownField.treedropdownfield-open-tree { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; -o-border-bottom-left-radius: 0; -ms-border-bottom-left-radius: 0; -khtml-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; -o-border-bottom-right-radius: 0; -ms-border-bottom-right-radius: 0; -khtml-border-bottom-right-radius: 0; border-bottom-right-radius: 0; }
.field .dropdown select { margin-top: 8px; }
.field .chzn-container .chzn-results li { font-size: 11px; line-height: 16px; padding: 4px 4px; }
@@ -151,7 +155,8 @@ form.nostyle .middleColumn { margin-left: 0; }
.fieldgroup .fieldgroup-field .field { border: none; padding-bottom: 0; }
/** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */
-.field.checkbox { padding-left: 192px; margin-bottom: 8px; }
+.field.checkbox { padding-left: 184px; margin-bottom: 8px; }
+.field.checkbox input { margin-left: 0; }
/** ---------------------------------------------------- Optionsets and Checkboxsets ---------------------------------------------------- */
.optionset { overflow: hidden; padding-bottom: 8px; }
@@ -161,8 +166,7 @@ form.nostyle .middleColumn { margin-left: 0; }
/** ---------------------------------------------------- HTML Text ---------------------------------------------------- */
.htmleditor textarea { visibility: hidden; }
-.htmleditor label { display: block; float: none; padding-bottom: 10px; }
-.htmleditor .middleColumn { margin-left: 0px; clear: left; }
+.htmleditor .mceEditor input, .htmleditor .mceEditor select { width: auto; }
.action-hidden { display: none; }
@@ -216,7 +220,7 @@ html article, html aside, html details, html figcaption, html figure, html foote
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
/** -------------------------------------------- Actions -------------------------------------------- */
-.cms-content-actions { margin: 8px 8px; text-align: right; height: 32px; z-index: 70; -moz-box-shadow: #f0f3f4 0 -16px 16px; -webkit-box-shadow: #f0f3f4 0 -16px 16px; -o-box-shadow: #f0f3f4 0 -16px 16px; box-shadow: #f0f3f4 0 -16px 16px; }
+.cms-content-actions { margin: 8px 16px 16px 16px; text-align: right; height: 32px; z-index: 70; -moz-box-shadow: #f0f3f4 0 -16px 16px; -webkit-box-shadow: #f0f3f4 0 -16px 16px; -o-box-shadow: #f0f3f4 0 -16px 16px; box-shadow: #f0f3f4 0 -16px 16px; }
/** -------------------------------------------- Messages -------------------------------------------- */
.message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
@@ -367,12 +371,11 @@ form.member-profile-form #Groups .middleColumn .TreeDropdownField { width: 90%;
/* Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) */
.cms .ui-widget-overlay { background-color: #000; background-image: none; }
-.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Labels for all the Dialogs of the pop-up form */ /* Numeric labels in the sitetree */ /* Exception for a label that is inline with the selector dropdown box */ }
+.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Numeric labels in the sitetree */ /* Exception for a label that is inline with the selector dropdown box */ }
.ui-dialog #PageType .middleColumn { margin: 0; padding: 0; }
.ui-dialog #PageType .middleColumn .optionset li { width: 100%; }
.ui-dialog #PageType li.selected { background-color: rgba(255, 255, 153, 0.5); /*background-color: #FFFF99;*/ }
.ui-dialog #PageType li:hover { background-color: #FFFF99 !important; /* lighter highlight on hover */ }
-.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; margin-top: -4px; margin-left: 38px; }
.ui-dialog label.numeric-label { font-size: 14px; font-weight: bold; float: left; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #7b8c91; padding: 4px 8px 4px 3px; text-align: right; color: #fff; position: absolute; width: 15px; /* Numeric label icon (supports up to two-digit numbers) */ }
.ui-dialog label.numeric-label .label-flyout-indicator { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; }
.ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: left !important; width: 125px; }
View
47 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;
- }
}
View
2 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;
View
9 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;
+ }
+}

0 comments on commit 8dd64bd

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