Merge branch '1.1.x' of https://git.drupalcode.org/project/socialbase into...

Merge branch '1.1.x' of https://git.drupalcode.org/project/socialbase into 3205263-update-profile-template

assets/css/base.css

@@ -630,8 +630,46 @@ th {
 .page-node-edit form .table thead th,
 .path-group form .table thead th,
 .page-node form .table thead th {
+  padding: 0.5rem 0;
   font-weight: bold;
-  border-bottom: 2px solid #CCCCCC;
+  border: none;
+}
+
+.page-node-edit form .table tbody td,
+.path-group form .table tbody td,
+.page-node form .table tbody td {
+  vertical-align: middle;
+}
+
+.page-node-edit form .table tbody td.field-multiple-drag,
+.path-group form .table tbody td.field-multiple-drag,
+.page-node form .table tbody td.field-multiple-drag {
+  width: 22px;
+  max-width: 100%;
+  padding-left: 1.75rem;
+  padding-right: .25rem;
+  text-align: center;
+}
+
+.page-node-edit form .table tbody td.field-multiple-drag .tabledrag-handle,
+.path-group form .table tbody td.field-multiple-drag .tabledrag-handle,
+.page-node form .table tbody td.field-multiple-drag .tabledrag-handle {
+  position: static;
+  width: 22px;
+  padding: 0;
+  margin: 0 auto;
+}
+
+.page-node-edit form .table tbody td.field-multiple-drag .tabledrag-handle span:before,
+.path-group form .table tbody td.field-multiple-drag .tabledrag-handle span:before,
+.page-node form .table tbody td.field-multiple-drag .tabledrag-handle span:before {
+  top: auto;
+}
+
+.page-node-edit form .table tbody td.field-multiple-drag + td,
+.path-group form .table tbody td.field-multiple-drag + td,
+.page-node form .table tbody td.field-multiple-drag + td {
+  padding-left: .25rem;
 }
 
 .table-sm th,

assets/css/cards.css

@@ -25,6 +25,10 @@
   font-size: 1rem;
 }
 
+summary.card__title {
+  padding-bottom: 15px;
+}
+
 .card__subtitle {
   font-size: 0.75rem;
   display: block;

assets/css/form-controls.css

@@ -101,6 +101,15 @@ form:not(.layout-builder-configure-block) textarea.form-control {
   height: auto;
 }
 
+form:not(.layout-builder-configure-block) fieldset {
+  margin-top: -1.25rem;
+}
+
+form:not(.layout-builder-configure-block) details fieldset,
+form:not(.layout-builder-configure-block) fieldset fieldset {
+  margin-top: 0;
+}
+
 form:not(.layout-builder-configure-block) input[type="search"] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -137,6 +146,11 @@ form:not(.layout-builder-configure-block) .data-policy-edit-form .form-textarea
   max-width: 100%;
 }
 
+form:not(.layout-builder-configure-block) .field--widget-string-textarea .form-textarea {
+  max-width: 100%;
+  min-height: 106px;
+}
+
 form:not(.layout-builder-configure-block) .radio,
 form:not(.layout-builder-configure-block) .checkbox {
   position: relative;
@@ -144,6 +158,10 @@ form:not(.layout-builder-configure-block) .checkbox {
   margin-bottom: 8px;
 }
 
+form:not(.layout-builder-configure-block) .checkbox.form-item-event-all-day {
+  margin-bottom: 1.5rem;
+}
+
 form:not(.layout-builder-configure-block) .radio + .radio,
 form:not(.layout-builder-configure-block) .checkbox + .checkbox {
   margin-top: -5px;
@@ -358,11 +376,11 @@ form:not(.layout-builder-configure-block).group-form .field--widget-options-butt
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  margin: 5px -13px 0;
+  margin: 5px -.75rem -8px;
 }
 
 form:not(.layout-builder-configure-block).group-form .field--widget-options-buttons .fieldgroup .fieldset-wrapper > .radio, form:not(.layout-builder-configure-block).node-form .field--widget-options-buttons .fieldgroup .fieldset-wrapper > .radio {
-  padding: 0 13px;
+  padding: 0 .75rem;
   margin-top: -5px;
 }
 
@@ -372,12 +390,12 @@ form:not(.layout-builder-configure-block).group-form .field--widget-options-butt
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  margin: 5px -13px 0;
-  padding: 0 13px;
+  margin: 5px -.75rem -8px;
+  padding: 0 .75rem;
 }
 
 form:not(.layout-builder-configure-block).group-form .field--widget-options-buttons .fieldgroup#edit-field-group-allowed-visibility--wrapper #edit-field-group-allowed-visibility > .checkbox, form:not(.layout-builder-configure-block).node-form .field--widget-options-buttons .fieldgroup#edit-field-group-allowed-visibility--wrapper #edit-field-group-allowed-visibility > .checkbox {
-  padding: 0 13px;
+  padding: 0 .75rem;
   margin-top: -5px;
 }
 

assets/css/form-elements.css

@@ -33,7 +33,7 @@ label {
 }
 
 .form-group {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
   position: relative;
 }
 
@@ -221,31 +221,6 @@ span.form-required {
   font-weight: 300;
 }
 
-.node-event-form .field--type-address .panel .panel-heading,
-.node-event-edit-form .field--type-address .panel .panel-heading,
-.profile-form .field--type-address .panel .panel-heading,
-.group-form .field--type-address .panel .panel-heading {
-  margin-bottom: .5rem;
-  font-size: .875rem;
-}
-
-.node-event-form .field--type-address .panel [id*='address-ajax-wrapper'],
-.node-event-edit-form .field--type-address .panel [id*='address-ajax-wrapper'],
-.profile-form .field--type-address .panel [id*='address-ajax-wrapper'],
-.group-form .field--type-address .panel [id*='address-ajax-wrapper'] {
-  max-width: 500px;
-  padding: 1.25rem 1.25rem .25rem;
-  background: #f3f3f3;
-  border-radius: 5px !important;
-}
-
-.node-event-form .field--type-address .panel [id*='address-ajax-wrapper'] label,
-.node-event-edit-form .field--type-address .panel [id*='address-ajax-wrapper'] label,
-.profile-form .field--type-address .panel [id*='address-ajax-wrapper'] label,
-.group-form .field--type-address .panel [id*='address-ajax-wrapper'] label {
-  margin-bottom: .5rem;
-}
-
 .node-event-form #edit-timezone-indication .btn,
 .node-event-edit-form #edit-timezone-indication .btn {
   cursor: auto;
@@ -255,12 +230,40 @@ fieldset.card legend.card__title {
   width: 100%;
   top: 1.5rem;
   margin-bottom: 1.25rem;
+  padding-top: .75rem;
+  padding-bottom: .75rem;
 }
 
 legend.control-label {
   margin-bottom: 5px;
 }
 
+.form-wrapper .card__block {
+  padding-bottom: 1rem;
+}
+
+details summary {
+  position: relative;
+}
+
+details summary svg.icon-summary-arrow {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  right: 1.25rem;
+  margin-right: 0;
+  top: .75rem;
+}
+
+details[open] summary {
+  border-bottom: 1px solid #e6e6e6;
+}
+
+details[open] summary svg.icon-summary-arrow {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
 @media (min-width: 600px) {
   .form-inline .form-group {
     display: inline-block;

assets/css/input-groups.css

 .input-group {
   position: relative;
-  display: table;
-  border-collapse: separate;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   max-width: 23rem;
 }
 
@@ -27,12 +28,6 @@
   outline: 0;
 }
 
-.input-group-addon,
-.input-group-btn,
-.input-group .form-control {
-  display: table-cell;
-}
-
 .input-group-addon:not(:first-child):not(:last-child),
 .input-group-btn:not(:first-child):not(:last-child),
 .input-group .form-control:not(:first-child):not(:last-child) {
@@ -41,13 +36,15 @@
 
 .input-group-addon,
 .input-group-btn {
-  width: 1%;
   white-space: nowrap;
   vertical-align: middle;
 }
 
 .input-group-addon {
+  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
   padding: 6px 12px;
   font-size: 16px;
   font-weight: normal;
@@ -55,6 +52,17 @@
   text-align: center;
 }
 
+.input-group.input-group-expanded .input-group-addon {
+  padding: .75rem .5rem .75rem 1.25rem;
+  font-size: .875rem;
+  line-height: 21px;
+}
+
+.input-group.input-group-expanded .input-group-addon + .form-control {
+  max-width: 240px;
+  height: 48px;
+}
+
 .input-group-addon:first-child {
   border-right: 0;
 }
@@ -79,6 +87,7 @@
   max-width: none;
 }
 
-.form-disabled .input-group-addon {
-  background-color: #fff;
+.form-disabled .input-group.input-group-expanded,
+.form-disabled .input-group.input-group-expanded + .help-block {
+  opacity: .5;
 }

components/01-base/tables/_tables.scss

@@ -95,8 +95,38 @@ th {
 
     thead {
       th {
+        padding: 0.5rem 0;
         font-weight: bold;
-        border-bottom: ($table-border-width * 2) solid $table-border-color;
+        border: none;
+      }
+    }
+
+    tbody {
+      td {
+        vertical-align: middle;
+
+        &.field-multiple-drag {
+          width: 22px;
+          max-width: 100%;
+          padding-left: 1.75rem;
+          padding-right: .25rem;
+          text-align: center;
+
+          .tabledrag-handle {
+            position: static;
+            width: 22px;
+            padding: 0;
+            margin: 0 auto;
+
+            span:before {
+              top: auto;
+            }
+          }
+
+          + td {
+            padding-left: .25rem;
+          }
+        }
       }
     }
   }

components/02-atoms/cards/cards.scss

@@ -71,6 +71,11 @@
   font-size: 1rem;
 }
 
+// The card title on the summary collapse block.
+summary.card__title {
+  padding-bottom: 15px;
+}
+
 .card__subtitle {
   font-size: 0.75rem;
   display: block;

components/02-atoms/form-controls/_radio-checkbox.scss

@@ -43,6 +43,10 @@
   margin-bottom: 8px;
 }
 
+.checkbox.form-item-event-all-day {
+  margin-bottom: 1.5rem;
+}
+
 .radio + .radio,
 .checkbox + .checkbox {
   margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
@@ -281,10 +285,10 @@
       .fieldset-wrapper {
         display: flex;
         flex-wrap: wrap;
-        margin: 5px -13px 0;
+        margin: 5px -.75rem -8px;
 
         > .radio {
-          padding: 0 13px;
+          padding: 0 .75rem;
           margin-top: -5px;
         }
       }
@@ -293,11 +297,11 @@
         #edit-field-group-allowed-visibility {
           display: flex;
           flex-wrap: wrap;
-          margin: 5px -13px 0;
-          padding: 0 13px;
+          margin: 5px -.75rem -8px;
+          padding: 0 .75rem;
 
           > .checkbox {
-            padding: 0 13px;
+            padding: 0 .75rem;
             margin-top: -5px;
           }
         }

components/02-atoms/form-controls/_textarea.scss

@@ -32,3 +32,10 @@
     max-width: 100%;
   }
 }
+
+.field--widget-string-textarea {
+  .form-textarea {
+    max-width: 100%;
+    min-height: 106px;
+  }
+}

components/02-atoms/form-controls/form-controls.scss

@@ -125,6 +125,17 @@ form:not(.layout-builder-configure-block) {
     height: auto;
   }
 
+  fieldset {
+    margin-top: -1.25rem;
+  }
+
+  details,
+  fieldset {
+    fieldset {
+      margin-top: 0;
+    }
+  }
+
   @import 'input';
   @import 'textarea';
 

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

@@ -89,7 +89,7 @@ label {
 // horizontal forms, use the predefined grid classes.
 
 .form-group {
-  margin-bottom: $form-group-margin-bottom;
+  margin-bottom: 1.5rem;
   position: relative;
 
   .radio,
@@ -315,37 +315,8 @@ span.form-required {
   }
 }
 
-// The location block styles on the event/group/profile edit pages
-.field--type-address {
-
-  .node-event-form &,
-  .node-event-edit-form &,
-  .profile-form &,
-  .group-form & {
-
-    .panel {
-      .panel-heading {
-        margin-bottom: .5rem;
-        font-size: .875rem;
-      }
-
-      [id*='address-ajax-wrapper'] {
-        max-width: 500px;
-        padding: 1.25rem 1.25rem .25rem;
-        background: #f3f3f3;
-        border-radius: 5px !important;
-
-        label {
-          margin-bottom: .5rem;
-        }
-      }
-    }
-  }
-}
-
 // The time zone block on the event edit pages
 #edit-timezone-indication {
-
   .node-event-form &,
   .node-event-edit-form & {
     .btn {
@@ -360,9 +331,42 @@ fieldset.card {
     width: 100%;
     top: 1.5rem;
     margin-bottom: 1.25rem;
+    padding-top: .75rem;
+    padding-bottom: .75rem;
   }
 }
 
 legend.control-label {
   margin-bottom: 5px;
-}
\ No newline at end of file
+}
+
+.form-wrapper {
+  .card__block {
+    padding-bottom: 1rem;
+  }
+}
+
+details {
+  summary {
+    position: relative;
+
+    svg.icon-summary-arrow {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      right: 1.25rem;
+      margin-right: 0;
+      top: .75rem;
+    }
+  }
+
+  &[open] {
+    summary {
+      border-bottom: 1px solid $gray-lighter;
+
+      svg.icon-summary-arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

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

@@ -4,8 +4,7 @@
 // -------------------------
 .input-group {
   position: relative; // For dropdowns
-  display: table;
-  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+  display: flex;
   max-width: 23rem;
 
   // Undo padding and float of grid classes
@@ -45,7 +44,6 @@
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  display: table-cell;
 
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
@@ -54,7 +52,6 @@
 // Addon and addon wrapper for buttons
 .input-group-addon,
 .input-group-btn {
-  width: 1%;
   white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }
@@ -70,6 +67,19 @@
   text-align: center;
 }
 
+.input-group.input-group-expanded {
+  .input-group-addon {
+    padding: .75rem .5rem .75rem 1.25rem;
+    font-size: .875rem;
+    line-height: 21px;
+
+    + .form-control {
+      max-width: 240px;
+      height: 48px;
+    }
+  }
+}
+
 .input-group-addon:first-child {
   border-right: 0;
 }
@@ -93,6 +103,9 @@
   max-width: none;
 }
 
-.form-disabled .input-group-addon {
-  background-color: #fff;
+.form-disabled {
+  .input-group.input-group-expanded,
+  .input-group.input-group-expanded + .help-block {
+    opacity: .5;
+  }
 }
\ No newline at end of file

templates/form/input--form-control.html.twig

@@ -26,9 +26,10 @@
   ]
 %}
 
+{{ attach_library('socialbase/form--input-groups') }}
+
 {% spaceless %}
   {% if input_group %}
-    {{ attach_library('socialbase/form--input-groups') }}
 
     <div class="input-group">
   {% endif %}

templates/system/details--collapsible.html.twig

@@ -18,8 +18,11 @@
 #}
 <details{{ attributes.removeAttribute('open').addClass('form-horizontal form-item js-form-item form-wrapper js-form-wrapper card panel panel-default') }}>
   {%- if title -%}
-    <summary{{ summary_attributes.addClass('card__title card__title--underline') }}>
+    <summary{{ summary_attributes.addClass('card__title') }}>
       {{ title }}
+      <svg class="icon-summary-arrow">
+        <use xlink:href="#icon-expand_more"></use>
+      </svg>
     </summary>
   {%- endif -%}