From aff72e766e3dc7c43975141b3f0a9bb0d2bcd6ae Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Fri, 6 Jan 2012 20:44:34 +0100 Subject: [PATCH] MINOR Simpler field alignment of OptionsetField (and some specifics for member-profile-form) --- admin/css/screen.css | 25 +++++++++++++++++-------- admin/scss/_forms.scss | 36 ++++++++++++++++++++++++++---------- admin/scss/_style.scss | 19 ++++++++++++++----- 3 files changed, 57 insertions(+), 23 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index b08fc634f92..5b9cc1e2bcc 100755 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -89,7 +89,7 @@ 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; } .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; } +.field label.left { float: left; display: block; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; } .field label.right { cursor: pointer; } .field .middleColumn { margin-left: 184px; } .field span.readonly { padding-top: 8px; line-height: 16px; display: block; } @@ -157,11 +157,19 @@ form.stacked .field .middleColumn, .field.stacked .middleColumn { margin-left: 0 .field.checkbox { padding-left: 184px; margin-bottom: 8px; } .field.checkbox input { margin-left: 0; } +input.checkbox { margin-left: 0; } + +/** ---------------------------------------------------- Radiobutton Field ---------------------------------------------------- */ +.field.radio { padding-left: 184px; margin-bottom: 8px; } +.field.radio input { margin-left: 0; } + +input.radio { margin-left: 0; } + /** ---------------------------------------------------- Optionsets and Checkboxsets ---------------------------------------------------- */ -.optionset { overflow: hidden; padding-bottom: 8px; } -.optionset li { float: left; display: block; width: 216px; padding: 8px 8px 0; line-height: 16px; list-style: none; position: relative; } -.optionset li input { position: absolute; top: 9px; left: 2px; margin: 0; } -.optionset li label { display: block; cursor: pointer; padding: 0 0 0 16px; } +.optionset { padding-bottom: 8px; } +.optionset li { float: left; display: block; width: 216px; padding-bottom: 8px; line-height: 16px; list-style: none; } +.optionset li input { display: inline-block; padding-right: 0; margin-right: 0; } +.optionset li label { display: inline; cursor: pointer; padding-left: 8px; } /** ---------------------------------------------------- HTML Text ---------------------------------------------------- */ .htmleditor textarea { visibility: hidden; } @@ -317,13 +325,14 @@ body.cms { overflow: hidden; } form.member-profile-form #CsvFile .middleColumn { background: none !important; } form.member-profile-form .advanced h4 { margin-bottom: .5em; } form.member-profile-form .Actions { text-align: left; border: 0; } -form.member-profile-form input.customFormat { border: 1px solid #ccc !important; padding: 3px; display: inline; margin-left: 15px; position: relative; } -form.member-profile-form .formattingHelpToggle { display: block; font-size: 11px; margin-top: 10px; margin-left: 15px; } +form.member-profile-form input.customFormat { width: 80px; border: 1px solid #ccc !important; padding: 3px; display: inline-block; margin-left: 1em; } +form.member-profile-form .formattingHelpToggle { display: block; font-size: 11px; } form.member-profile-form .formattingHelpText { margin: 5px 0 0 -5px; color: #333; padding: 5px 10px; background: #fff; border: 1px solid #ccc; } form.member-profile-form .formattingHelpText ul { padding: 0; } -form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; margin-bottom: 2px; float: none; width: auto; } +form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; margin-bottom: 2px; padding-bottom: 0; float: none; width: auto; } form.member-profile-form #Groups .middleColumn { margin-left: 0; width: 100%; } form.member-profile-form #Groups .middleColumn .TreeDropdownField { width: 90%; max-width: 90%; } +form.member-profile-form #Permissions .optionset li { float: none; width: auto; } .cms .cms-content { border-right: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -o-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } .cms .cms-content-fields { /* always show a y scroll bar as popups like TreeDropdowns can trigger longer pages and the extra scroll bar doesn't fire our sizing bar */ overflow-y: auto; overflow-x: auto; background: none; } diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index df2e9104b05..ee5be42b61c 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -118,7 +118,7 @@ form.nostyle { &.left { float: left; display: block; - width: $grid-horizontal * 21; + width: $grid-horizontal * 22; padding: $grid-vertical $grid-horizontal $grid-vertical 0; line-height: $grid-vertical * 2; font-weight: bold; @@ -444,33 +444,49 @@ form.stacked .field, .field.stacked { margin-left: 0; } } +input.checkbox { + margin-left: 0 +} + +/** ---------------------------------------------------- + * Radiobutton Field + * ---------------------------------------------------- */ +.field.radio { + padding-left: $grid-horizontal * 23; + margin-bottom: $grid-vertical; + + input { + margin-left: 0; + } +} +input.radio { + margin-left: 0 +} + /** ---------------------------------------------------- * Optionsets and Checkboxsets * ---------------------------------------------------- */ .optionset { - overflow: hidden; padding-bottom: 8px; li { float: left; display: block; width: $grid-horizontal * 27; - padding: $grid-vertical $grid-horizontal 0; + padding-bottom: $grid-horizontal; line-height: $grid-vertical * 2; list-style: none; - position: relative; input { - position: absolute; - top: $grid-vertical + 1; // used to get the input off the edge, the overflow - left: 2px; // hidden crops the glow. - margin: 0; + display: inline-block; + padding-right: 0; + margin-right: 0; } label { - display: block; + display: inline; cursor: pointer; - padding: 0 0 0 $grid-vertical * 2; + padding-left: $grid-vertical; } } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index e28b2341de3..42ff390a98d 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -689,17 +689,15 @@ form.member-profile-form { } input.customFormat { + width: $grid-horizontal * 10; border: 1px solid #ccc !important; padding: 3px; - display: inline; - margin-left: 15px; - position: relative; + display: inline-block; + margin-left: 1em; } .formattingHelpToggle { display: block; font-size: 11px; - margin-top: 10px; - margin-left: 15px; } .formattingHelpText { margin: 5px 0 0 -5px; @@ -715,6 +713,7 @@ form.member-profile-form { font-size: 11px; color: #333; margin-bottom: 2px; + padding-bottom: 0; float: none; width: auto; } @@ -726,6 +725,16 @@ form.member-profile-form { max-width: 90%; } } + + // Same rules in .SecurityAdmin + #Permissions { + .optionset { + li { + float: none; + width: auto; + } + } + } } .cms {