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

admin/client/src/components/Form/Form.scss

@@ -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) {

admin/client/src/styles/_variables.scss

@@ -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;

admin/client/src/styles/legacy/_forms.scss

@@ -73,12 +73,9 @@ form.nostyle {
     width: auto;
   }
 
-  .phonenumber-field__deco {
+  // TODO remove ID style
-  }
-
-
 	&#Action {
-    	box-shadow: none;
+    box-shadow: none;
 	}
 
 	// When a field's description is toggleable, it's given an icon (right title) which is used as

admin/client/src/styles/legacy/_style.scss

@@ -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,19 +853,10 @@ body.cms {
 	}
 }
 
-
+.cms-edit-form .ui-tabs-panel .message {
-.cms-edit-form {
+  margin: $grid-x*2 0; // gets padding from tab panel
-	.message {
-		margin: $grid-x*2; // TODO Remove double padding when adjacent to a padded tabs panel
-	}
-	.ui-tabs-panel {
-		.message {
-			margin: $grid-x*2 0; // gets padding from tab panel
-		}
-	}
 }
 
-
 .notice-item {
 	border-radius: 3px;
 	font-family: inherit;
@@ -944,90 +955,52 @@ body.cms {
 }
 
 .cms-add-form {
-  .field > label.left {
+  .message-restricted {
-    width: auto;
+    display: none;
   }
-	.step-label {
-		opacity:0.9;
 
-		.title {
+  .radio {
-			font-weight:bold; //to match pagetype label
+    margin-left: -$grid-gutter-width-half;
-		}
+    margin-right: -$grid-gutter-width-half;
-	}
+    margin-bottom: 0;
-	ul.SelectionGroup {
+    padding: #{$spacer-y * .625} $grid-gutter-width-half #{$spacer-y * .75};
-		padding-left:28px;
+    border-radius: $border-radius;
-		overflow: visible;
-		@include legacy-pie-clearfix;
-	}
-	.parent-mode {
-		padding: $grid-x;
-		overflow: auto;
-	}
-}
 
-#PageType {
+    &:hover,
-	ul {
+    &.selected {
-		padding-left: 20px;
+      background-color: $background-darker;
-		li {
+      cursor: pointer;
-			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;
 
-			&:last-child {
+    &.disabled {
-				border-bottom: none;
+      color: $color-text-disabled;
-			}
+      opacity: 0.6;
+    }
 
-			&:hover, &.selected {
+    &.disabled:hover {
-				background-color: $color-highlight-opacity;
+      background: none;
-			}
+    }
+  }
 
-			&.disabled {
+  input[type="radio"] {
-				color: $color-text-disabled;
+    position: static;
-				opacity: 0.5;
+  }
 
-				&:hover {
+  .page-icon {
-					background: none;
+    display: inline-block;
-				}
+    top: 3px;
-			}
+    margin-right: 6px;
+    position: relative;
 
-			input {
+    + .title {
-				margin: inherit;
+      margin-right: 6px;
-			}
+      font-weight: 500;
+    }
+  }
 
-			label {
+  .form__field-description {
-				padding-left: 0;
+    font-style: italic;
-				padding-bottom: 0;
+  }
-			}
-
-			input, label, .page-icon, .title {
-				float: left;
-				line-height: 1.3em;
-			}
-
-			.page-icon {
-				margin: 0 4px;
-			}
-
-			.title {
-				width: 120px;
-				font-weight: bold;
-				padding-right: 10px;
-			}
-
-			.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 {
+.CMSPageAddController .cms-panel-padded {
-	.cms-panel-padded {
+	padding: $grid-gutter-width-half;
-		padding: $grid-y*2 $grid-x*2;
-	}
 }
+
 /** ------------------------------------------------------------------
 * Dialog
 *
@@ -2073,40 +2045,14 @@ body.cms-dialog {
 /** --------------------------------------------
  * Step labels
  * -------------------------------------------- */
-.step-label {
+.step-label > * {
+  display: block;
+}
 
-	& > * {
+.step-label .flyout {
-		display: inline-block;
+  color: $brand-secondary;
-		vertical-align: top;
+  font-weight: bold;
-	}
+  text-transform: uppercase;
-
-  .flyout {
-    height: 26px;
-    font-size: $font-size-root +1;
-    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;
-	}
 }
 
 

admin/themes/cms-forms/templates/forms/SelectionGroup.ss

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