Added missing bootstrap form messages

Align top of selection-group and label
Fix styles for overly nested composite fields
Step label added and new templates for forms
This commit is contained in:
Oly Su 2016-05-06 15:53:23 +12:00 committed by Damian Mooyman
parent c556b01071
commit 2805baecd3
6 changed files with 100 additions and 148 deletions

File diff suppressed because one or more lines are too long

View File

@ -148,6 +148,28 @@ input.radio {
.form-group {
@include make-row();
// Composite fields
// TODO reduce nesting
// scss-lint:disable SelectorDepth
.form__field-holder .form-group {
.form__field-holder,
.form__field-label {
@include make-col();
@include make-col-span(12);
}
.form__field-holder {
margin-left: 0;
}
// TODO make label display on the right side like normal .form__field-extra-label
.form__field-extra-label {
@include make-col-span(12);
@include make-col-offset(0);
}
}
// scss-lint:enable SelectorDepth
&::after {
margin: $spacer-y $grid-gutter-width-half #{-$spacer-y};
width: calc(100% - #{$grid-gutter-width}); // IE10 fix for avoiding horizontal scrollbars
@ -208,23 +230,10 @@ input.radio {
}
}
.optionset {
.optionset,
.selection-group {
margin-top: 7px;
}
// Confirm password fields
.form__field-holder .form-group.password {
.form__field-holder,
.form__field-label {
@include make-col();
@include make-col-span(12);
}
.form__field-extra-label {
@include make-col-span(12);
@include make-col-offset(0);
}
}
}
@include media-breakpoint-up($breakpoint-inline-limit-width) {

View File

@ -36,7 +36,7 @@ $gray-darkest: darken($gray-dark, 20%);
$white: #fff; // Never change, create new variable if needed
$black: #000; // Never change
$brand-secondary: #005a93;
$brand-primary: #29abe2;
$brand-success: #3fa142;
// $brand-info: #5bc0de;

View File

@ -73,10 +73,7 @@ form.nostyle {
width: auto;
}
.phonenumber-field__deco {
}
// TODO remove ID style
&#Action {
box-shadow: none;
}

View File

@ -798,11 +798,31 @@ body.cms {
/** --------------------------------------------
* Messages
* -------------------------------------------- */
.alert {
&.good {
@extend .alert-success;
}
&.notice {
@extend .alert-info;
}
&.warning {
@extend .alert-warning;
}
&.error,
&.bad,
&.required,
&.validation {
@extend .alert-danger;
}
}
.message { // White
display: block;
clear: both;
margin: 0 0 $grid-y;
margin: 0 0 $spacer-y;
padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2;
font-weight: normal;
border: 1px #ccc solid;
@ -833,18 +853,9 @@ body.cms {
}
}
.cms-edit-form {
.message {
margin: $grid-x*2; // TODO Remove double padding when adjacent to a padded tabs panel
}
.ui-tabs-panel {
.message {
.cms-edit-form .ui-tabs-panel .message {
margin: $grid-x*2 0; // gets padding from tab panel
}
}
}
.notice-item {
border-radius: 3px;
@ -944,89 +955,51 @@ body.cms {
}
.cms-add-form {
.field > label.left {
width: auto;
}
.step-label {
opacity:0.9;
.title {
font-weight:bold; //to match pagetype label
}
}
ul.SelectionGroup {
padding-left:28px;
overflow: visible;
@include legacy-pie-clearfix;
}
.parent-mode {
padding: $grid-x;
overflow: auto;
}
.message-restricted {
display: none;
}
#PageType {
ul {
padding-left: 20px;
li {
float: none;
width: 100%;
padding: 9px 0 9px 15px;
overflow: hidden;
border-bottom-width: 2px;
border-bottom: 2px groove lighten($color-shadow-light, 95%);
-webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
.radio {
margin-left: -$grid-gutter-width-half;
margin-right: -$grid-gutter-width-half;
margin-bottom: 0;
padding: #{$spacer-y * .625} $grid-gutter-width-half #{$spacer-y * .75};
border-radius: $border-radius;
&:last-child {
border-bottom: none;
}
&:hover, &.selected {
background-color: $color-highlight-opacity;
&:hover,
&.selected {
background-color: $background-darker;
cursor: pointer;
}
&.disabled {
color: $color-text-disabled;
opacity: 0.5;
opacity: 0.6;
}
&:hover {
&.disabled:hover {
background: none;
}
}
input {
margin: inherit;
}
label {
padding-left: 0;
padding-bottom: 0;
}
input, label, .page-icon, .title {
float: left;
line-height: 1.3em;
input[type="radio"] {
position: static;
}
.page-icon {
margin: 0 4px;
display: inline-block;
top: 3px;
margin-right: 6px;
position: relative;
+ .title {
margin-right: 6px;
font-weight: 500;
}
}
.title {
width: 120px;
font-weight: bold;
padding-right: 10px;
}
.description {
.form__field-description {
font-style: italic;
// Undo some generic styles from tooltips
display: inline;
clear: none;
margin: 0;
}
}
}
}
@ -1603,11 +1576,10 @@ form.member-profile-form {
}
}
.CMSPageAddController {
.cms-panel-padded {
padding: $grid-y*2 $grid-x*2;
}
.CMSPageAddController .cms-panel-padded {
padding: $grid-gutter-width-half;
}
/** ------------------------------------------------------------------
* Dialog
*
@ -2073,40 +2045,14 @@ body.cms-dialog {
/** --------------------------------------------
* Step labels
* -------------------------------------------- */
.step-label {
& > * {
display: inline-block;
vertical-align: top;
.step-label > * {
display: block;
}
.flyout {
height: 26px;
font-size: $font-size-root +1;
.step-label .flyout {
color: $brand-secondary;
font-weight: bold;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #667980; // hardcoding colour since its tied to the sprite
padding: 4px 3px 4px 6px;
text-align: center;
text-shadow: none;
color: #fff;
line-height: 18px;
}
.arrow {
height: 26px;
width: 10px;
margin-right: 4px;
@extend .icon-sprites-32x32;
@include sprite($sprites-32x32-numeric-label);
display: inline-block;
}
.title {
height: 26px - 2*4px; // minus padding
padding: 4px;
}
text-transform: uppercase;
}

View File

@ -1,4 +1,4 @@
<ul>
<ul class="list-unstyled selection-group">
<% if $IsReadonly %>
<% loop $FieldSet %>
<% if $Selected %>