Issue #3203938 by agami4: Improve form

assets/css/form-elements.css

@@ -70,3 +70,394 @@ fieldset strong {
 .card__block .form-item-data-policy label a {
   color: #33b5e5;
 }
+
+.field--name-field-social-collaboration-editors,
+.field--name-field-event-managers,
+.field--name-field-social-idea-coauthors,
+.field--name-field-discussion-moderator,
+.field--name-field-course-related-courses {
+  max-width: 445px;
+}
+
+.field--name-field-social-collaboration-editors .help-block,
+.field--name-field-event-managers .help-block,
+.field--name-field-social-idea-coauthors .help-block,
+.field--name-field-discussion-moderator .help-block,
+.field--name-field-course-related-courses .help-block {
+  display: none;
+}
+
+.field--name-field-social-collaboration-editors table,
+.field--name-field-event-managers table,
+.field--name-field-social-idea-coauthors table,
+.field--name-field-discussion-moderator table,
+.field--name-field-course-related-courses table {
+  margin-bottom: 0;
+}
+
+.field--name-field-social-collaboration-editors table tbody tr,
+.field--name-field-event-managers table tbody tr,
+.field--name-field-social-idea-coauthors table tbody tr,
+.field--name-field-discussion-moderator table tbody tr,
+.field--name-field-course-related-courses table tbody tr {
+  background: #f3f3f3;
+}
+
+.field--name-field-social-collaboration-editors table tbody tr:hover,
+.field--name-field-event-managers table tbody tr:hover,
+.field--name-field-social-idea-coauthors table tbody tr:hover,
+.field--name-field-discussion-moderator table tbody tr:hover,
+.field--name-field-course-related-courses table tbody tr:hover {
+  background: #f3f3f3;
+}
+
+.field--name-field-social-collaboration-editors table tbody td,
+.field--name-field-event-managers table tbody td,
+.field--name-field-social-idea-coauthors table tbody td,
+.field--name-field-discussion-moderator table tbody td,
+.field--name-field-course-related-courses table tbody td {
+  padding-top: 1.75rem;
+  padding-bottom: 0;
+}
+
+.field--name-field-social-collaboration-editors table tbody td .form-group,
+.field--name-field-event-managers table tbody td .form-group,
+.field--name-field-social-idea-coauthors table tbody td .form-group,
+.field--name-field-discussion-moderator table tbody td .form-group,
+.field--name-field-course-related-courses table tbody td .form-group {
+  margin-bottom: 0;
+}
+
+.field--name-field-social-collaboration-editors table tbody td > .form-group,
+.field--name-field-event-managers table tbody td > .form-group,
+.field--name-field-social-idea-coauthors table tbody td > .form-group,
+.field--name-field-discussion-moderator table tbody td > .form-group,
+.field--name-field-course-related-courses table tbody td > .form-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0 -.25rem;
+}
+
+.field--name-field-social-collaboration-editors table tbody td > .form-group > *,
+.field--name-field-event-managers table tbody td > .form-group > *,
+.field--name-field-social-idea-coauthors table tbody td > .form-group > *,
+.field--name-field-discussion-moderator table tbody td > .form-group > *,
+.field--name-field-course-related-courses table tbody td > .form-group > * {
+  padding-left: .25rem;
+  padding-right: .25rem;
+}
+
+.field--name-field-social-collaboration-editors table tbody td > .form-group label,
+.field--name-field-event-managers table tbody td > .form-group label,
+.field--name-field-social-idea-coauthors table tbody td > .form-group label,
+.field--name-field-discussion-moderator table tbody td > .form-group label,
+.field--name-field-course-related-courses table tbody td > .form-group label {
+  display: none;
+}
+
+.field--name-field-social-collaboration-editors table tbody td .form-type-select,
+.field--name-field-event-managers table tbody td .form-type-select,
+.field--name-field-social-idea-coauthors table tbody td .form-type-select,
+.field--name-field-discussion-moderator table tbody td .form-type-select,
+.field--name-field-course-related-courses table tbody td .form-type-select {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 104px;
+          flex: 0 0 104px;
+  max-width: 104px;
+}
+
+.field--name-field-social-collaboration-editors table tbody td .input-group,
+.field--name-field-event-managers table tbody td .input-group,
+.field--name-field-social-idea-coauthors table tbody td .input-group,
+.field--name-field-discussion-moderator table tbody td .input-group,
+.field--name-field-course-related-courses table tbody td .input-group {
+  max-width: 240px;
+}
+
+.field--name-field-social-collaboration-editors .clearfix,
+.field--name-field-event-managers .clearfix,
+.field--name-field-social-idea-coauthors .clearfix,
+.field--name-field-discussion-moderator .clearfix,
+.field--name-field-course-related-courses .clearfix {
+  padding: .625rem 1rem;
+  background: #f3f3f3;
+}
+
+.field--name-field-social-collaboration-editors .clearfix .btn,
+.field--name-field-event-managers .clearfix .btn,
+.field--name-field-social-idea-coauthors .clearfix .btn,
+.field--name-field-discussion-moderator .clearfix .btn,
+.field--name-field-course-related-courses .clearfix .btn {
+  font-weight: bold;
+}
+
+.field--name-field-event-managers table tbody tr td .input-group,
+.field--name-field-social-idea-coauthors table tbody tr td .input-group,
+.field--name-field-discussion-moderator table tbody tr td .input-group,
+.field--name-field-course-related-courses table tbody tr td .input-group {
+  max-width: 100%;
+}
+
+#edit-author-info,
+#edit-tab-settings,
+#edit-menu,
+.field--name-field-event-date,
+.field--name-field-event-date-end,
+.field--type-address,
+.field--name-field-enroll-method,
+.field--name-field-discussion-date {
+  max-width: 445px;
+  margin-bottom: 1.5rem;
+}
+
+#edit-author-info fieldset.card,
+#edit-tab-settings fieldset.card,
+#edit-menu fieldset.card,
+.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,
+.field--name-field-discussion-date fieldset.card {
+  margin-top: -1.5rem;
+}
+
+#edit-author-info fieldset.card legend.card__title,
+#edit-tab-settings fieldset.card legend.card__title,
+#edit-menu fieldset.card legend.card__title,
+.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,
+.field--name-field-discussion-date fieldset.card legend.card__title {
+  padding: 0 0 .5rem;
+  font-size: .875rem;
+  line-height: 21px;
+}
+
+#edit-author-info .card,
+#edit-author-info .card__block,
+#edit-tab-settings .card,
+#edit-tab-settings .card__block,
+#edit-menu .card,
+#edit-menu .card__block,
+.field--name-field-event-date .card,
+.field--name-field-event-date .card__block,
+.field--name-field-event-date-end .card,
+.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,
+.field--name-field-discussion-date .card,
+.field--name-field-discussion-date .card__block {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border-radius: 0 !important;
+  background: transparent;
+}
+
+#edit-author-info .panel-body,
+#edit-author-info .card__block,
+#edit-author-info fieldset:not(.card),
+#edit-tab-settings .panel-body,
+#edit-tab-settings .card__block,
+#edit-tab-settings fieldset:not(.card),
+#edit-menu .panel-body,
+#edit-menu .card__block,
+#edit-menu fieldset:not(.card),
+.field--name-field-event-date .panel-body,
+.field--name-field-event-date .card__block,
+.field--name-field-event-date fieldset:not(.card),
+.field--name-field-event-date-end .panel-body,
+.field--name-field-event-date-end .card__block,
+.field--name-field-event-date-end fieldset:not(.card),
+.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),
+.field--name-field-discussion-date .panel-body,
+.field--name-field-discussion-date .card__block,
+.field--name-field-discussion-date fieldset:not(.card) {
+  background: #f3f3f3;
+  padding: 1.25rem 1.25rem .25rem;
+}
+
+#edit-author-info fieldset:not(.card),
+#edit-tab-settings fieldset:not(.card),
+#edit-menu fieldset:not(.card),
+.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),
+.field--name-field-discussion-date fieldset:not(.card) {
+  margin-top: -24px;
+  padding-bottom: 1.25rem;
+}
+
+#edit-author-info legend:not(.card__title),
+#edit-tab-settings legend:not(.card__title),
+#edit-menu legend:not(.card__title),
+.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),
+.field--name-field-discussion-date legend:not(.card__title) {
+  position: relative;
+  top: 22px;
+  margin: 0;
+  padding-top: 1.25rem;
+  padding-bottom: .5rem;
+  font-weight: 300;
+}
+
+#edit-author-info label,
+#edit-tab-settings label,
+#edit-menu label,
+.field--name-field-event-date label,
+.field--name-field-event-date-end label,
+.field--type-address label,
+.field--name-field-enroll-method label,
+.field--name-field-discussion-date label {
+  font-weight: 300;
+  margin-bottom: .5rem;
+}
+
+#edit-author-info .field--name-uid,
+#edit-tab-settings .field--name-uid,
+#edit-menu .field--name-uid,
+.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,
+.field--name-field-discussion-date .field--name-uid {
+  max-width: 260px;
+}
+
+#edit-author-info .form-inline,
+#edit-tab-settings .form-inline,
+#edit-menu .form-inline,
+.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,
+.field--name-field-discussion-date .form-inline {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 -.5rem;
+}
+
+#edit-author-info .form-inline label,
+#edit-tab-settings .form-inline label,
+#edit-menu .form-inline label,
+.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,
+.field--name-field-discussion-date .form-inline label {
+  margin-bottom: .5rem;
+}
+
+#edit-author-info .form-inline > *,
+#edit-tab-settings .form-inline > *,
+#edit-menu .form-inline > *,
+.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 > *,
+.field--name-field-discussion-date .form-inline > * {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  padding: 0 .5rem;
+}
+
+#edit-author-info .form-inline > *:nth-child(1),
+#edit-tab-settings .form-inline > *:nth-child(1),
+#edit-menu .form-inline > *:nth-child(1),
+.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),
+.field--name-field-discussion-date .form-inline > *:nth-child(1) {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 240px;
+          flex: 0 0 240px;
+  max-width: 240px;
+}
+
+#edit-author-info .form-inline input[type='text'].form-date,
+#edit-tab-settings .form-inline input[type='text'].form-date,
+#edit-menu .form-inline input[type='text'].form-date,
+.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,
+.field--name-field-discussion-date .form-inline input[type='text'].form-date {
+  min-width: auto;
+}
+
+#edit-author-info [id*='address-ajax-wrapper'],
+#edit-tab-settings [id*='address-ajax-wrapper'],
+#edit-menu [id*='address-ajax-wrapper'],
+.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'],
+.field--name-field-discussion-date [id*='address-ajax-wrapper'] {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 375px;
+          flex: 0 0 375px;
+  max-width: 375px;
+}
+
+.field--name-field-enroll-method {
+  width: auto;
+  max-width: none;
+}
+
+#edit-menu .panel-body {
+  padding: 0;
+  background: transparent;
+}
+
+#edit-menu .panel-body .form-wrapper {
+  background: #f3f3f3;
+  padding: 1.25rem 1.25rem .25rem;
+}
+
+#edit-menu .panel-body > .form-type-checkbox {
+  margin-bottom: 0;
+}
+
+.field--name-field-discussion-date .card__block {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 -.5rem;
+}
+
+.field--name-field-discussion-date .card__block > * {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 50%;
+          flex: 0 0 50%;
+  max-width: 50%;
+  padding: 0 .5rem;
+}
+
+.field--name-field-discussion-date .card__block > * .form-inline > * {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  max-width: 100%;
+}
+
+.field--name-field-discussion-date .card__block input[type='text'].form-date {
+  min-width: auto;
+}

assets/css/input-groups.css

@@ -7,9 +7,8 @@
 
 .input-group-addon {
   color: #555555;
-  background-color: #e6e6e6;
+  background-color: #f3f3f3;
   border: 1px solid #adadad;
-  border-radius: 5px;
 }
 
 .input-group.input-group-expanded .input-group-addon {

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

@@ -94,3 +94,218 @@ fieldset {
     }
   }
 }
+
+.field--name-field-social-collaboration-editors,
+.field--name-field-event-managers,
+.field--name-field-social-idea-coauthors,
+.field--name-field-discussion-moderator,
+.field--name-field-course-related-courses {
+  max-width: 445px;
+
+  .help-block {
+    display: none;
+  }
+
+  table {
+    margin-bottom: 0;
+
+    tbody {
+      tr {
+        background: #f3f3f3;
+
+        &:hover {
+          background: #f3f3f3;
+        }
+      }
+
+      td {
+        padding-top: 1.75rem;
+        padding-bottom: 0;
+
+        .form-group {
+          margin-bottom: 0;
+        }
+
+        > .form-group {
+          display: flex;
+          align-items: center;
+          margin: 0 -.25rem;
+
+          > * {
+            padding-left: .25rem;
+            padding-right: .25rem;
+          }
+
+          label {
+            display: none;
+          }
+        }
+
+        .form-type-select {
+          flex: 0 0 104px;
+          max-width: 104px;
+        }
+
+        .input-group {
+          max-width: 240px;
+        }
+      }
+    }
+  }
+
+  .clearfix {
+    padding: .625rem 1rem;
+    background: #f3f3f3;
+
+    .btn {
+      font-weight: bold;
+    }
+  }
+}
+
+.field--name-field-event-managers,
+.field--name-field-social-idea-coauthors,
+.field--name-field-discussion-moderator,
+.field--name-field-course-related-courses {
+  table {
+    tbody {
+      tr {
+        td {
+          .input-group {
+            max-width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+#edit-author-info,
+#edit-tab-settings,
+#edit-menu,
+.field--name-field-event-date,
+.field--name-field-event-date-end,
+.field--type-address,
+.field--name-field-enroll-method,
+.field--name-field-discussion-date {
+  max-width: 445px;
+  margin-bottom: 1.5rem;
+
+  fieldset.card {
+    margin-top: -1.5rem;
+
+    legend.card__title {
+      padding: 0 0 .5rem;
+      font-size: .875rem;
+      line-height: 21px;
+    }
+  }
+
+  .card,
+  .card__block {
+    box-shadow: none;
+    border-radius: 0 !important;
+    background: transparent;
+  }
+
+  .panel-body,
+  .card__block,
+  fieldset:not(.card) {
+    background: #f3f3f3;
+    padding: 1.25rem 1.25rem .25rem;
+  }
+
+  fieldset:not(.card) {
+    margin-top: -24px;
+    padding-bottom: 1.25rem;
+  }
+
+  legend:not(.card__title) {
+    position: relative;
+    top: 22px;
+    margin: 0;
+    padding-top: 1.25rem;
+    padding-bottom: .5rem;
+    font-weight: 300;
+  }
+
+  label {
+    font-weight: 300;
+    margin-bottom: .5rem;
+  }
+
+  .field--name-uid {
+    max-width: 260px;
+  }
+
+  .form-inline {
+    display: flex;
+    margin: 0 -.5rem;
+
+    label {
+      margin-bottom: .5rem;
+    }
+
+    > * {
+      flex: 1;
+      padding: 0 .5rem;
+
+      &:nth-child(1) {
+        flex: 0 0 240px;
+        max-width: 240px;
+      }
+    }
+
+    input[type='text'].form-date {
+      min-width: auto;
+    }
+  }
+
+  [id*='address-ajax-wrapper'] {
+    flex: 0 0 375px;
+    max-width: 375px;
+  }
+}
+
+.field--name-field-enroll-method {
+  width: auto;
+  max-width: none;
+}
+
+#edit-menu {
+  .panel-body {
+    padding: 0;
+    background: transparent;
+
+    .form-wrapper {
+      background: #f3f3f3;
+      padding: 1.25rem 1.25rem .25rem;
+    }
+
+    > .form-type-checkbox {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.field--name-field-discussion-date {
+  .card__block {
+    display: flex;
+    margin: 0 -.5rem;
+
+    > * {
+      flex: 0 0 50%;
+      max-width: 50%;
+      padding: 0 .5rem;
+
+      .form-inline > * {
+        flex: 1;