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 issue/socialbase-3198471-3198471-as-a-lu

assets/css/base.css

@@ -155,7 +155,8 @@ body {
 
 #skip-link a {
   background: #222222;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
+  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
+          box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
   color: #f3f3f3;
   padding: 3px 20px 8px;
   text-decoration: none;
@@ -548,63 +549,141 @@ th {
 }
 
 .table,
-.path-node .body-text table {
+.path-node .body-text table,
+.comment .comment__text table {
   width: 100%;
   max-width: 100%;
   margin-bottom: 1rem;
   background-color: transparent;
   font-size: 0.875rem;
+  border-color: #CCCCCC;
 }
 
 .table th,
 .table td,
 .path-node .body-text table th,
-.path-node .body-text table td {
-  padding: 0.75rem;
+.path-node .body-text table td,
+.comment .comment__text table th,
+.comment .comment__text table td {
+  padding: 0.75rem 1.25rem;
   vertical-align: top;
   word-wrap: break-word;
+  border: 1px solid #CCCCCC;
+}
+
+.table th p:last-child,
+.table td p:last-child,
+.path-node .body-text table th p:last-child,
+.path-node .body-text table td p:last-child,
+.comment .comment__text table th p:last-child,
+.comment .comment__text table td p:last-child {
+  margin-bottom: 0;
 }
 
 .table thead th,
-.path-node .body-text table thead th {
-  font-weight: 500;
-  font-size: 12px;
+.path-node .body-text table thead th,
+.comment .comment__text table thead th {
+  font-weight: 700;
+  font-size: 14px;
   vertical-align: bottom;
-  border-bottom: 2px solid #e6e6e6;
+}
+
+.table thead th a,
+.path-node .body-text table thead th a,
+.comment .comment__text table thead th a {
+  font-weight: bold;
 }
 
 .table tbody + tbody,
-.path-node .body-text table tbody + tbody {
-  border-top: 2px solid #e6e6e6;
+.path-node .body-text table tbody + tbody,
+.comment .comment__text table tbody + tbody {
+  border-top: 1px solid #CCCCCC;
 }
 
 .table .views-align-left,
-.path-node .body-text table .views-align-left {
+.path-node .body-text table .views-align-left,
+.comment .comment__text table .views-align-left {
   text-align: left;
 }
 
 .table .views-align-right,
-.path-node .body-text table .views-align-right {
+.path-node .body-text table .views-align-right,
+.comment .comment__text table .views-align-right {
   text-align: right;
 }
 
 .table .views-align-center,
-.path-node .body-text table .views-align-center {
+.path-node .body-text table .views-align-center,
+.comment .comment__text table .views-align-center {
+  text-align: center;
+}
+
+.page-node-edit form .table td,
+.page-node-edit form .table th,
+.path-group form .table td,
+.path-group form .table th,
+.page-node form .table td,
+.page-node form .table th {
+  border: none;
+}
+
+.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: 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,
 .table-sm td {
   padding: 0.3rem;
 }
 
 .table-bordered {
-  border: 1px solid #e6e6e6;
+  border: 1px solid #CCCCCC;
 }
 
 .table-bordered th,
 .table-bordered td {
-  border: 1px solid #e6e6e6;
+  border: 1px solid #CCCCCC;
 }
 
 .table-bordered thead th,
@@ -655,6 +734,10 @@ form:not(.layout-builder-add-block) .tabledrag-handle ~ .form-managed-file {
   width: 100%;
 }
 
+.table-responsive.card__block--table {
+  margin-bottom: .625rem;
+}
+
 .table-responsive .table-bordered {
   border: 0;
 }
@@ -686,6 +769,10 @@ form:not(.layout-builder-configure-block) .select-all.checkbox {
           justify-content: left;
 }
 
+.vbo-table .btn-group--operations > .btn {
+  white-space: nowrap;
+}
+
 .vbo-table .form-no-label.checkbox label {
   display: none;
 }
@@ -756,6 +843,99 @@ form:not(.layout-builder-configure-block) .select-all.checkbox {
   padding-top: 0.5rem;
 }
 
+.card__block--table table {
+  margin-bottom: 0;
+}
+
+.card__block--table table th,
+.card__block--table table td {
+  border-color: #e6e6e6;
+}
+
+.card__block--table table thead th {
+  border: none;
+}
+
+.card__block--table table tbody tr:nth-of-type(odd), .card__block--table table tbody tr:hover {
+  background-color: #f3f3f3;
+}
+
+.card__block--table table tbody td {
+  border-width: 1px 0 0;
+}
+
+.card__block--table table tbody td a {
+  font-weight: bold;
+}
+
+.card__block--table table tbody td,
+.card__block--table table tbody td a {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.card__block--table table {
+  margin-bottom: 0;
+}
+
+.card__block--table table th,
+.card__block--table table td {
+  border-color: #e6e6e6;
+}
+
+.card__block--table table thead th {
+  border: none;
+}
+
+.card__block--table table tbody tr:nth-of-type(odd), .card__block--table table tbody tr:hover {
+  background-color: #f3f3f3;
+}
+
+.card__block--table table tbody td {
+  border-width: 1px 0 0;
+}
+
+.card__block--table table tbody td a {
+  font-weight: bold;
+}
+
+.card__block--table table tbody td,
+.card__block--table table tbody td a {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.card__block--table table {
+  margin-bottom: 0;
+}
+
+.card__block--table table th,
+.card__block--table table td {
+  border-color: #e6e6e6;
+}
+
+.card__block--table table thead th {
+  border: none;
+}
+
+.card__block--table table tbody tr:nth-of-type(odd), .card__block--table table tbody tr:hover {
+  background-color: #f3f3f3;
+}
+
+.card__block--table table tbody td {
+  border-width: 1px 0 0;
+}
+
+.card__block--table table tbody td a {
+  font-weight: bold;
+}
+
+.card__block--table table tbody td,
+.card__block--table table tbody td a {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 b,
 strong {
   font-weight: bold;
@@ -1404,6 +1584,42 @@ button.close {
   h4, .h4 {
     font-size: 1.25rem;
   }
+  .card__block--table table tbody td {
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+  }
+  .card__block--table table tr th:first-child,
+  .card__block--table table tr td:first-child {
+    padding-left: 2.5rem;
+  }
+  .card__block--table table tr th:last-child,
+  .card__block--table table tr td:last-child {
+    padding-right: 2.5rem;
+  }
+  .card__block--table table tbody td {
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+  }
+  .card__block--table table tr th:first-child,
+  .card__block--table table tr td:first-child {
+    padding-left: 2.5rem;
+  }
+  .card__block--table table tr th:last-child,
+  .card__block--table table tr td:last-child {
+    padding-right: 2.5rem;
+  }
+  .card__block--table table tbody td {
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+  }
+  .card__block--table table tr th:first-child,
+  .card__block--table table tr td:first-child {
+    padding-left: 2.5rem;
+  }
+  .card__block--table table tr th:last-child,
+  .card__block--table table tr td:last-child {
+    padding-right: 2.5rem;
+  }
 }
 
 @media (min-width: 1200px) {
@@ -1423,12 +1639,6 @@ button.close {
   figure.align-left figcaption, figure.align-right figcaption, figure.align-center figcaption {
     padding: 0;
   }
-  .table-responsive {
-    overflow-x: auto;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    padding-bottom: 100px;
-    margin-bottom: -100px;
-  }
   .table-responsive.card__block--table {
     margin-bottom: 0;
   }
@@ -1458,3 +1668,12 @@ button.close {
     display: none;
   }
 }
+
+@media (max-width: 899px) {
+  .table-responsive {
+    overflow-x: auto;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    padding-bottom: 100px;
+    margin-bottom: -100px;
+  }
+}

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;
@@ -47,10 +51,6 @@
   padding-top: 0;
 }
 
-.card__block--table {
-  padding: 1.25rem 0;
-}
-
 .card__block--list:not(:first-child) {
   padding-top: 0;
 }

assets/css/comment.css

@@ -35,7 +35,7 @@ a[id^="comment-"] {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  overflow-x: auto;
+  max-width: calc(100% - 50px);
 }
 
 .comment__author {
@@ -57,6 +57,7 @@ a[id^="comment-"] {
 .comment__text {
   margin: .25em 0 .5em;
   line-height: 1.3;
+  overflow-y: auto;
 }
 
 .comment__text p:last-of-type {

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

assets/images/icons/icon-bar_chart.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 8.4h3.857V21H3V8.4zM10.2 3h3.6v18h-3.6V3zm7.2 10.286H21V21h-3.6v-7.714z" fill="#4D4D4D"/></svg>
\ No newline at end of file

components/00-config/variables/_colors.scss

@@ -8,6 +8,7 @@ $gray-light:             #777777;
 $gray-light-1:           #adadad;
 $gray-lighter:           #e6e6e6;
 $gray-lighter-1:         #f7f7f7;
+$gray-lighter-2:         #CCCCCC;
 $gray-lightest:          #f3f3f3;
 
 //** Global text color on `<body>`.

components/00-config/variables/_tables.scss

 //** Padding for `<th>`s and `<td>`s.
+
+// ** Current variable does not use for the tables.
 $table-cell-padding:            0.75rem;