Merge branch 'feature/ISTWCMS-5950-exp-col-fixes' into '1.0.x'

ISTWCMS-5950: adding fix for inline operations on exp/col block

See merge request !58

src/patterns/04-components/exp_col_block/_exp_col_block.scss

@@ -20,6 +20,7 @@
               background: var(--gray-2);
               color: var(--gray-6);
             }
+
             &:hover,
             &:focus {
               outline: none;
@@ -35,10 +36,12 @@
               }
             }
           }
+
           .uw-details{
             .details__summary {
               @include svg-background(mobile-arrow-down);
               background-color: var(--gray-2);
+
               h2,
               h3,
               h4,
@@ -46,6 +49,7 @@
               h6 {
                 color: var(--gray-6);
               }
+
               &:hover,
               &:focus {
                 @include svg-background(mobile-arrow-down-w);
@@ -59,6 +63,7 @@
                 }
               }
             }
+
             &[open] {
               > .details__summary {
                 @include svg-background(mobile-arrow-up);
@@ -70,6 +75,7 @@
                 h6 {
                   color: var(--gray-6);
                 }
+
                 &:focus {
                   @include svg-background(mobile-arrow-up-w);
                   background-color: var(--gray-6);
@@ -101,9 +107,9 @@
     }
     // Else run the loop on the faculties.
     @else {
-      .uw-exp-col{
-        &:not(.contact){
-          .uw-exp-col__button{
+      .uw-exp-col {
+        &:not(.contact) {
+          .uw-exp-col__button {
             &[data-type="expand-all"] {
               background: var(--#{$colour}-primary);
               border-right: var(--size-xs) solid var(--uw-white);
@@ -118,20 +124,24 @@
             &:hover,
             &:focus {
               outline: none;
+
               &[data-type="expand-all"] {
                 background-color: var(--uw-white);
                 color: var(--#{$colour}-primary);
               }
+
               &[data-type="collapse-all"] {
                 background-color: var(--uw-white);
                 color: var(--#{$colour}-primary);
               }
             }
           }
-          .uw-details{
+
+          .uw-details {
             .details__summary {
               background-color: var(--#{$colour}-primary);
               background-image: inherit;
+
               h2,
               h3,
               h4,
@@ -147,9 +157,11 @@
               &:hover,
               &:focus {
                 background-color: var(--uw-white);
-                &::after{
+
+                &::after {
                   @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
                 }
+
                 h2,
                 h3,
                 h4,
@@ -160,12 +172,15 @@
               }
             }
           }
+
           .uw-details[open] {
             .details__summary {
               background-image: inherit;
             }
+
             > .details__summary {
               background-color: var(--#{$colour}-primary);
+
               h2,
               h3,
               h4,
@@ -183,9 +198,11 @@
               .details__summary {
                 background-color: var(--uw-white);
                 background-image: inherit;
+
                 &::after {
                   @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
                 }
+
                 h2,
                 h3,
                 h4,
@@ -200,9 +217,11 @@
               .details__summary {
                 background-color: var(--uw-white);
                 background-image: inherit;
+
                 &::after {
                   @include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
                 }
+
                 h2,
                 h3,
                 h4,
@@ -212,12 +231,15 @@
                 }
               }
             }
+
             &:hover {
               .details__summary {
                 background-color: var(--uw-white);
+
                 &::after {
                   @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
                 }
+
                 h2,
                 h3,
                 h4,
@@ -233,28 +255,43 @@
     }
   }
 }
+
+.uw-exp-col__operations {
+  list-style-type: none;
+  margin: 0;
+  padding: var(--size-2) 0 0;
+
+  li {
+    display: inline-block;
+    margin: 0;
+    padding: 0 0 0 var(--size-2);
+  }
+}
+
+.uw-exp-col__group-info {
+  .form-type-entity-autocomplete {
+    display: inline-block;
+    width: 90%;
+  }
+}
+
 .uw-exp-col {
-  &:not(.contact){
+  &:not(.contact) {
     -webkit-font-smoothing: antialiased;
-    .uw-exp-col__operations {
-      list-style-type: none;
-      margin: 0;
-      padding: var(--size-2) 0 0;
-      li {
-        display: inline-block;
-      }
-    }
+
     .uw-exp-col__group-info,
     .uw-exp-col__heading-selector,
     .uw-exp-col__heading-text {
       display: inline-block;
     }
+
     .uw-exp-col__heading-selector {
       .form-select {
         display: inline-block;
         width: 82%;
       }
     }
+
     .uw-exp-col__group-info,
     .uw-exp-col__heading-text {
       .ui-dialog & {
@@ -275,6 +312,7 @@
       display: grid;
       grid-template-columns: 50% 50%;
       margin-bottom: var(--size-2);
+
       .no-js & {
         display: none;
       }
@@ -290,6 +328,7 @@
       font-weight: 400;
       margin: 0;
       max-width: inherit;
+
       .uw-exp-col--controls {
         text-align: center;
       }
@@ -300,6 +339,7 @@
       font-family: inherit !important;
       margin-bottom: var(--size-2);
       margin-top: inherit;
+
       .details__summary {
         background-image: inherit;
         border: var(--size-xs) solid var(--gray-2);
@@ -307,6 +347,7 @@
         position: relative;
         text-shadow: inherit;
         transition: background-color 0.2s ease-in-out;
+
         &::after {
           content: '';
           display: block;
@@ -316,6 +357,7 @@
           top: calc(50% - 0.5rem);
           width: var(--size-2);
         }
+
         h2,
         h3,
         h4,
@@ -333,16 +375,20 @@
         }
       }
     }
+
     .details__content {
       background-color: var(--gray-1);
       padding: var(--size-2);
+
       .layout {
         padding: 0;
       }
+
       .block {
         margin-bottom: var(--size-2);
       }
     }
+
     .uw-exp-col__group-info {
       .form-type-entity-autocomplete {
         display: inline-block;
@@ -350,13 +396,15 @@
       }
     }
   }
-  &.contact{
-    .uw-exp-col__controls{
+
+  &.contact {
+    .uw-exp-col__controls {
       border: var(--size-xs) solid var(--gray-2);
       display: grid;
       grid-template-columns: 50% 50%;
       margin-bottom: var(--size-2);
       gap: var(--size-05);
+
       .no-js & {
         display: none;
       }
@@ -376,12 +424,14 @@
     display: none;
   }
 }
+
 /* stylelint-enable selector-max-id, declaration-no-important */
-.layout-builder{
+.layout-builder {
   &__section [data-expand-collapse-group],
   &__section [data-expand-collapse-header] {
     margin-top: var(--size-5) !important;
     position: relative;
+
     &:first-of-type {
       &::before {
         background: #195c8f;