Issue #3206945: Improve enrollment setting section

assets/css/form-elements.css

@@ -208,9 +208,9 @@ fieldset strong {
 .field--name-field-event-date,
 .field--name-field-event-date-end,
 .field--type-address,
-.field--name-field-enroll-method,
+.enrollment-methods,
 .field--name-field-discussion-date {
-  max-width: 445px;
+  max-width: 500px;
   margin-bottom: 1.5rem;
 }
 
@@ -220,7 +220,7 @@ fieldset strong {
 .field--name-field-event-date fieldset.card,
 .field--name-field-event-date-end fieldset.card,
 .field--type-address fieldset.card,
-.field--name-field-enroll-method fieldset.card,
+.enrollment-methods fieldset.card,
 .field--name-field-discussion-date fieldset.card {
   margin-top: -1.5rem;
 }
@@ -231,7 +231,7 @@ fieldset strong {
 .field--name-field-event-date fieldset.card legend.card__title,
 .field--name-field-event-date-end fieldset.card legend.card__title,
 .field--type-address fieldset.card legend.card__title,
-.field--name-field-enroll-method fieldset.card legend.card__title,
+.enrollment-methods fieldset.card legend.card__title,
 .field--name-field-discussion-date fieldset.card legend.card__title {
   padding: 0 0 .5rem;
   font-size: .875rem;
@@ -250,8 +250,8 @@ fieldset strong {
 .field--name-field-event-date-end .card__block,
 .field--type-address .card,
 .field--type-address .card__block,
-.field--name-field-enroll-method .card,
-.field--name-field-enroll-method .card__block,
+.enrollment-methods .card,
+.enrollment-methods .card__block,
 .field--name-field-discussion-date .card,
 .field--name-field-discussion-date .card__block {
   -webkit-box-shadow: none;
@@ -278,9 +278,9 @@ fieldset strong {
 .field--type-address .panel-body,
 .field--type-address .card__block,
 .field--type-address fieldset:not(.card),
-.field--name-field-enroll-method .panel-body,
-.field--name-field-enroll-method .card__block,
-.field--name-field-enroll-method fieldset:not(.card),
+.enrollment-methods .panel-body,
+.enrollment-methods .card__block,
+.enrollment-methods fieldset:not(.card),
 .field--name-field-discussion-date .panel-body,
 .field--name-field-discussion-date .card__block,
 .field--name-field-discussion-date fieldset:not(.card) {
@@ -294,10 +294,9 @@ fieldset strong {
 .field--name-field-event-date fieldset:not(.card),
 .field--name-field-event-date-end fieldset:not(.card),
 .field--type-address fieldset:not(.card),
-.field--name-field-enroll-method fieldset:not(.card),
+.enrollment-methods fieldset:not(.card),
 .field--name-field-discussion-date fieldset:not(.card) {
   margin-top: -24px;
-  padding-bottom: 1.25rem;
 }
 
 #edit-author-info legend:not(.card__title),
@@ -306,7 +305,7 @@ fieldset strong {
 .field--name-field-event-date legend:not(.card__title),
 .field--name-field-event-date-end legend:not(.card__title),
 .field--type-address legend:not(.card__title),
-.field--name-field-enroll-method legend:not(.card__title),
+.enrollment-methods legend:not(.card__title),
 .field--name-field-discussion-date legend:not(.card__title) {
   position: relative;
   top: 22px;
@@ -322,7 +321,7 @@ fieldset strong {
 .field--name-field-event-date label,
 .field--name-field-event-date-end label,
 .field--type-address label,
-.field--name-field-enroll-method label,
+.enrollment-methods label,
 .field--name-field-discussion-date label {
   font-weight: 300;
   margin-bottom: .5rem;
@@ -334,7 +333,7 @@ fieldset strong {
 .field--name-field-event-date .field--name-uid,
 .field--name-field-event-date-end .field--name-uid,
 .field--type-address .field--name-uid,
-.field--name-field-enroll-method .field--name-uid,
+.enrollment-methods .field--name-uid,
 .field--name-field-discussion-date .field--name-uid {
   max-width: 260px;
 }
@@ -345,7 +344,7 @@ fieldset strong {
 .field--name-field-event-date .form-inline,
 .field--name-field-event-date-end .form-inline,
 .field--type-address .form-inline,
-.field--name-field-enroll-method .form-inline,
+.enrollment-methods .form-inline,
 .field--name-field-discussion-date .form-inline {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -359,7 +358,7 @@ fieldset strong {
 .field--name-field-event-date .form-inline label,
 .field--name-field-event-date-end .form-inline label,
 .field--type-address .form-inline label,
-.field--name-field-enroll-method .form-inline label,
+.enrollment-methods .form-inline label,
 .field--name-field-discussion-date .form-inline label {
   margin-bottom: .5rem;
 }
@@ -370,7 +369,7 @@ fieldset strong {
 .field--name-field-event-date .form-inline > *,
 .field--name-field-event-date-end .form-inline > *,
 .field--type-address .form-inline > *,
-.field--name-field-enroll-method .form-inline > *,
+.enrollment-methods .form-inline > *,
 .field--name-field-discussion-date .form-inline > * {
   -webkit-box-flex: 1;
       -ms-flex: 1;
@@ -384,7 +383,7 @@ fieldset strong {
 .field--name-field-event-date .form-inline > *:nth-child(1),
 .field--name-field-event-date-end .form-inline > *:nth-child(1),
 .field--type-address .form-inline > *:nth-child(1),
-.field--name-field-enroll-method .form-inline > *:nth-child(1),
+.enrollment-methods .form-inline > *:nth-child(1),
 .field--name-field-discussion-date .form-inline > *:nth-child(1) {
   -webkit-box-flex: 0;
       -ms-flex: 0 0 240px;
@@ -398,7 +397,7 @@ fieldset strong {
 .field--name-field-event-date .form-inline input[type='text'].form-date,
 .field--name-field-event-date-end .form-inline input[type='text'].form-date,
 .field--type-address .form-inline input[type='text'].form-date,
-.field--name-field-enroll-method .form-inline input[type='text'].form-date,
+.enrollment-methods .form-inline input[type='text'].form-date,
 .field--name-field-discussion-date .form-inline input[type='text'].form-date {
   min-width: auto;
 }
@@ -409,7 +408,7 @@ fieldset strong {
 .field--name-field-event-date [id*='address-ajax-wrapper'],
 .field--name-field-event-date-end [id*='address-ajax-wrapper'],
 .field--type-address [id*='address-ajax-wrapper'],
-.field--name-field-enroll-method [id*='address-ajax-wrapper'],
+.enrollment-methods [id*='address-ajax-wrapper'],
 .field--name-field-discussion-date [id*='address-ajax-wrapper'] {
   -webkit-box-flex: 0;
       -ms-flex: 0 0 375px;
@@ -461,3 +460,16 @@ fieldset strong {
 .field--name-field-discussion-date .card__block input[type='text'].form-date {
   min-width: auto;
 }
+
+.enrollment-methods .panel-body fieldset,
+.enrollment-methods .panel-body .panel-body {
+  padding: 0;
+}
+
+.enrollment-methods .panel-body legend {
+  top: 0;
+}
+
+.enrollment-methods .panel-body .panel-heading header {
+  font-weight: 300;
+}

components/03-molecules/form-elements/form-elements.scss

@@ -186,9 +186,9 @@ fieldset {
 .field--name-field-event-date,
 .field--name-field-event-date-end,
 .field--type-address,
-.field--name-field-enroll-method,
+.enrollment-methods,
 .field--name-field-discussion-date {
-  max-width: 445px;
+  max-width: 500px;
   margin-bottom: 1.5rem;
 
   fieldset.card {
@@ -217,7 +217,6 @@ fieldset {
 
   fieldset:not(.card) {
     margin-top: -24px;
-    padding-bottom: 1.25rem;
   }
 
   legend:not(.card__title) {
@@ -309,3 +308,22 @@ fieldset {
     }
   }
 }
+
+.enrollment-methods {
+  .panel-body {
+    fieldset,
+    .panel-body {
+      padding: 0;
+    }
+
+    legend {
+      top: 0;
+    }
+
+    .panel-heading {
+      header {
+        font-weight: 300;
+      }
+    }
+  }
+}