additional css and pattern work for views

css/styles.css

@@ -2740,7 +2740,7 @@ form {
   margin-right: auto;
   max-width: 75rem;
   padding: 0 16px;
-  padding: 1rem; }
+  padding: 1rem 0; }
   @media (min-width: 75rem) {
     .uw-highlighted,
     .block-page-title-block,
@@ -2755,19 +2755,6 @@ form {
     form {
       padding-left: 0;
       padding-right: 0; } }
-  @media (min-width: 75rem) {
-    .uw-highlighted,
-    .block-page-title-block,
-    .block-local-tasks-block,
-    .node-form,
-    .admin-list,
-    .js-media-library-view,
-    .messages,
-    .message,
-    .contextual-region.profile,
-    .uw-content-moderation__wrapper,
-    form {
-      padding: 1rem 0; } }
 
 .uw-content-moderation__wrapper {
   padding: 1rem; }
@@ -4223,7 +4210,10 @@ button {
     background-image: url("../source/images/icons/mobile-arrow-up-y.svg"); }
 
 /* stylelint-disable-next-line selector-no-qualifying-type */
-details.details {
+.details,
+.seven-details {
+  background-color: #fcfcfa;
+  border: 1px solid #bfbfbf;
   border-bottom: 1px solid #000;
   border-radius: inherit;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
@@ -4231,15 +4221,20 @@ details.details {
   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
   width: 100%;
   /* stylelint-disable-next-line selector-no-qualifying-type */ }
-  details.details:hover {
+  .details:hover,
+  .seven-details:hover {
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
-  details.details:focus-within {
+  .details:focus-within,
+  .seven-details:focus-within {
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
-  details.details:first-child {
+  .details:first-child,
+  .seven-details:first-child {
     margin-top: 0; }
-  .js details.details:not([open]) > .details__content {
+  .js .details:not([open]) > .details__content, .js
+  .seven-details:not([open]) > .details__content {
     display: none; }
 
+.seven-details__summary,
 .details__summary {
   background-image: url("../source/images/icons/mobile-arrow-down.svg");
   background-color: #eee;
@@ -4256,14 +4251,18 @@ details.details {
   padding: 1rem;
   text-shadow: 0 1px 0 #fff;
   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
-  [dir='rtl'] .details__summary {
+  [dir='rtl'] .seven-details__summary, [dir='rtl']
+  .details__summary {
     background-position: left 32px center;
     padding-left: 56px;
     padding-right: 32px; }
-  [open] > .details__summary {
+  [open] > .seven-details__summary, [open] >
+  .details__summary {
     background-image: url("../source/images/icons/mobile-arrow-up.svg"); }
+  .seven-details__summary:first-child,
   .details__summary:first-child {
     margin-top: 0; }
+  .seven-details__summary::-webkit-details-marker,
   .details__summary::-webkit-details-marker {
     display: none; }
 
@@ -4280,16 +4279,24 @@ details.details {
   .details__content > :last-child {
     margin-bottom: 0; }
 
-.details__description {
+.details__description,
+.seven-details__description {
   color: #000;
   font-size: 1rem;
   margin-bottom: 1rem; }
-  .details__description > :last-child {
+  .details__description > :last-child,
+  .seven-details__description > :last-child {
     margin-bottom: 0; }
 
 .node--type-uw-ct-contact .details {
   max-width: 600px; }
 
+.seven-details__wrapper {
+  padding: 1rem; }
+  .seven-details__wrapper .uw-input,
+  .seven-details__wrapper .form-text {
+    width: 100% !important; }
+
 .sliding-popup-bottom,
 .sliding-popup-top {
   background: #fdd54f;
@@ -5163,54 +5170,6 @@ fieldset,
     .views-exposed-form .form-actions .button.js-form-submit.form-submit {
       font-weight: inherit; }
 
-.seven-details {
-  background-color: #fcfcfa;
-  border-bottom: 1px solid #000;
-  border-radius: inherit;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  margin-bottom: 1rem;
-  margin-top: 1rem;
-  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
-  .seven-details:hover, .seven-details:focus-within {
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
-  .seven-details:first-child {
-    margin-top: 0; }
-
-.seven-details__summary {
-  background-image: url("../source/images/icons/mobile-arrow-down.svg");
-  background-color: #eee;
-  background-position: right 1rem center;
-  background-repeat: no-repeat;
-  background-size: 0.8125rem;
-  color: #000;
-  cursor: pointer;
-  display: block;
-  font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
-  font-size: 0.88889rem;
-  font-weight: 400;
-  line-height: 1.25;
-  padding: 1rem;
-  text-shadow: 0 1px 0 #fff; }
-  .seven-details__summary::-webkit-details-marker {
-    display: none; }
-
-.seven-details__summary:hover,
-.seven-details__summary:focus,
-.seven-details[open] > .seven-details__summary {
-  background-color: #eee;
-  color: #000; }
-
-.seven-details__summary:focus,
-.seven-details[open] > .seven-details__summary {
-  background-image: url("../source/images/icons/mobile-arrow-up.svg");
-  color: #000; }
-
-.seven-details__wrapper {
-  padding: 1rem; }
-  .seven-details__wrapper .uw-input,
-  .seven-details__wrapper .form-text {
-    width: 100% !important; }
-
 .form-item {
   margin: 0 0 1rem; }
 
@@ -8314,34 +8273,60 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
   text-align: center; }
 
 .view {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 75rem;
-  padding: 0 16px;
   display: grid;
+  gap: 1rem;
   grid-template-columns: 100%;
-  padding: 1rem;
+  padding: 0;
   position: relative; }
-  @media (min-width: 75rem) {
-    .view {
-      padding-left: 0;
-      padding-right: 0; } }
+  .views-element-container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 75rem;
+    padding: 0 16px;
+    padding: 0;
+    position: relative; }
+    @media (min-width: 75rem) {
+      .views-element-container {
+        padding-left: 0;
+        padding-right: 0; } }
   .block-views .view {
     padding: 0; }
   @media (min-width: 75rem) {
-    .view {
-      padding: 1rem 0;
-      padding-top: 0; }
-      .block-views .view {
-        padding: 0; } }
+    .block-views .view {
+      padding: 0; } }
   .view.view-uw-view-contacts {
     padding-left: 0;
     padding-right: 0; }
+  .view-interact {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 75rem;
+    padding: 0 16px;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    padding: 0; }
+    @media (min-width: 75rem) {
+      .view-interact {
+        padding-left: 0;
+        padding-right: 0; } }
+    .view-interact .button {
+      margin: 0; }
   .view-header {
     grid-column: 1/3;
     grid-row: 1/2;
     width: 100%; }
+  .view-content {
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+    gap: 2rem;
+    grid-column: 1/2;
+    grid-row: 2/3;
+    width: 100%; }
   .view-content--message {
+    grid-column: 1/2;
     grid-row: 2/3;
     margin: 0;
     position: relative;
@@ -8349,66 +8334,81 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
     .view-content--message .message,
     .view-content--message .messages {
       margin: 0; }
-  .view.with-filters {
-    display: grid; }
+  @media (min-width: 63.1875rem) {
+    .view.with-filters {
+      gap: 2rem;
+      grid-template-columns: auto 18.75rem; } }
+  .view.with-filters .view-content {
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+    gap: 2rem;
+    grid-column: 1/2;
+    grid-row: 2/3;
+    width: 100%; }
+  .view.with-filters .view-filters {
+    background: #fff;
+    grid-column: 2/3;
+    height: 0;
+    overflow: hidden;
+    width: 0; }
+    .view.with-filters .view-filters h2 {
+      margin-top: 0; }
     @media (min-width: 63.1875rem) {
-      .view.with-filters {
-        gap: 2rem;
-        grid-template-columns: auto 18.75rem; } }
-    .view.with-filters .view-header {
-      margin-bottom: 1rem; }
-    .view.with-filters .view-filters {
-      grid-column: 2/3;
-      overflow: hidden; }
-      @media (min-width: 63.1875rem) {
-        .view.with-filters .view-filters {
-          grid-row: 2/4; } }
-      .view.with-filters .view-filters:target {
-        grid-column: 1/3;
-        margin-top: -2.5rem;
-        min-height: 90vh;
-        overflow: inherit;
-        padding: 0;
-        width: 100%; }
-        .view.with-filters .view-filters:target ~ .view-content {
-          height: 0;
-          overflow: hidden;
-          width: 0; }
-      @media (min-width: 63.1875rem) {
+      .view.with-filters .view-filters {
+        grid-row: 2/4;
+        height: inherit;
+        overflow: hidden;
+        width: inherit; } }
+    .view.with-filters .view-filters:target {
+      grid-column: 1/2;
+      grid-row: 1/2;
+      height: 100%;
+      margin-top: -2.5rem;
+      overflow: inherit;
+      padding: 1rem;
+      width: 100%;
+      z-index: 9; }
+      .view.with-filters .view-filters:target ~ .view-content {
+        display: none; }
+        .view.with-filters .view-filters:target ~ .view-content--message {
+          display: none; }
+    @media (min-width: 63.1875rem) {
+      .view.with-filters .view-filters {
+        background: inherit; }
         .view.with-filters .view-filters:target {
           background: inherit;
           grid-column: 2/3;
+          grid-row: inherit;
           height: inherit;
-          margin: 0;
-          min-height: inherit;
+          margin-top: 0;
           overflow: inherit;
+          padding: 0;
           width: 18.75rem; }
           .view.with-filters .view-filters:target ~ .view-content {
-            height: inherit;
-            overflow: inherit;
-            transition: inherit;
-            width: inherit; } }
-    .view.with-filters .view-content {
-      display: flex;
-      -webkit-flex-flow: row wrap;
-      -ms-flex-flow: row wrap;
-      flex-flow: row wrap;
-      gap: 2rem;
-      grid-column: 1/2;
-      grid-row: 2/3;
-      width: 100%; }
-      @media (min-width: 63.1875rem) {
-        .view.with-filters .view-content {
-          grid-column: 1/2; } }
+            display: flex;
+            -webkit-flex-flow: row wrap;
+            -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+            gap: 2rem;
+            grid-column: 1/2;
+            grid-row: 1/2; }
+            .view.with-filters .view-filters:target ~ .view-content--message {
+              display: block;
+              grid-column: 1/2;
+              grid-row: 1/2; } }
 
-.uw-offcanvas--filters {
-  padding-right: 0;
-  text-align: right;
-  width: 100%; }
+.uw-offcanvas--filter {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end; }
 
-@media (min-width: 63.1875rem) {
-  .view-filters__open {
-    display: none; } }
+.view-filters__open {
+  order: 100; }
+  @media (min-width: 63.1875rem) {
+    .view-filters__open {
+      display: none; } }
 
 .view-filters__close {
   margin: inherit;

js/component_scripts.min.js

+/**
+ * @file
+ * Ckeditor Modal.
+ */
+
+(function ($, Drupal) {
+  if ($.ui && $.ui.dialog) {
+    orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
+    $.ui.dialog.prototype._allowInteraction = function (event) {
+      if ($(event.target).closest('.cke_dialog').length) {
+        return true;
+      }
+      return orig_allowInteraction.apply(this, arguments);
+    };
+  }
+})(jQuery, Drupal);
+
 /**
  * @file
  */
@@ -169,6 +186,22 @@
   };
 })(jQuery, Drupal);
 
+/**
+ * @file
+ */
+
+(function ($, Drupal) {
+  Drupal.behaviors.filtersopen = {
+    attach: function (context, settings) {
+      $(document).ready(function () {
+        $('.view-filters details').each(function () {
+          $(this).attr("open", "");
+        });
+      });
+    }
+  };
+})(jQuery, Drupal);
+
 /**
  * @file
  */
@@ -357,23 +390,6 @@ else {
   };
 })(jQuery);
 
-/**
- * @file
- * Ckeditor Modal.
- */
-
-(function ($, Drupal) {
-  if ($.ui && $.ui.dialog) {
-    orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
-    $.ui.dialog.prototype._allowInteraction = function (event) {
-      if ($(event.target).closest('.cke_dialog').length) {
-        return true;
-      }
-      return orig_allowInteraction.apply(this, arguments);
-    };
-  }
-})(jQuery, Drupal);
-
 /**
  * @file
  */

source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss

@@ -15,10 +15,7 @@
   .uw-content-moderation__wrapper,
   form {
     @include uw-contained-width;
-    padding: rem(gesso-spacing(sm));
-    @include xl {
-      padding: rem(gesso-spacing(sm)) 0;
-    }
+    padding: rem(gesso-spacing(sm)) 0;
   }
   // Reset padding
   .uw-content-moderation__wrapper{

source/_patterns/04-components/details/_details.scss

@@ -11,7 +11,10 @@ $details-font-family: gesso-font-family(primary);
 // 'details' can appear as a modernizr class on the html tag, so this
 // class is limited to only the details element
 /* stylelint-disable-next-line selector-no-qualifying-type */
-details.details {
+.details,
+.seven-details{
+  background-color: #fcfcfa;
+  border: 1px solid #bfbfbf;
   border-bottom: 1px solid $card-accent-border-color;
   border-radius: inherit;
   box-shadow: gesso-box-shadow(1);
@@ -27,13 +30,14 @@ details.details {
   &:first-child{
     margin-top: 0;
   }
+
   // Fallback for browsers that don’t support details.
   /* stylelint-disable-next-line selector-no-qualifying-type */
   .js &:not([open]) > .details__content {
     display: none;
   }
 }
-
+.seven-details__summary,
 .details__summary {
   @include svg-background(mobile-arrow-down);
   background-color: $details-background-color;
@@ -52,7 +56,6 @@ details.details {
   transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
 
 
-
   @if $support-for-rtl {
     [dir='rtl'] & {
       background-position: left $details-padding center;
@@ -97,7 +100,8 @@ details.details {
   }
 }
 
-.details__description {
+.details__description,
+.seven-details__description{
   color: $details-text-color;
   font-size: rem(gesso-font-size(0));
   margin-bottom: rem(gesso-spacing(sm));
@@ -111,3 +115,10 @@ details.details {
     .details {max-width:600px;}
   }
 }
+.seven-details__wrapper {
+  padding: 1rem;
+  .uw-input,
+  .form-text{
+    width:100% !important;
+  }
+}

source/_patterns/04-components/details/details.yml

 ---
+details_classes: 'seven-details'
 details_summary: 'Details summary'
 details_description: 'Details description'
 details_content: |-
   <p>Details content</p>
+

source/_patterns/04-components/filters/_filters.scss

@@ -26,57 +26,3 @@
   }
 }
 
-.seven-details {
-  background-color: #fcfcfa;
-  border-bottom: 1px solid $card-accent-border-color;
-  border-radius: inherit;
-  box-shadow: gesso-box-shadow(1);
-  margin-bottom: 1rem;
-  margin-top: 1rem;
-  transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
-  &:hover,
-  &:focus-within {
-    box-shadow: gesso-box-shadow(3);
-  }
-  &:first-child{
-    margin-top: 0;
-  }
-}
-.seven-details__summary {
-  @include svg-background(mobile-arrow-down);
-  background-color: $details-background-color;
-  background-position: right 1rem center; // LTR
-  background-repeat: no-repeat;
-  background-size: rem(13px);
-  color: gesso-brand(org-default,uw-black,'primary');
-  cursor: pointer;
-  display: block;
-  font-family:$summary-font-family;
-  font-size: rem(gesso-font-size(-1));
-  font-weight:400;
-  line-height: 1.25;
-  padding: 1rem;
-  text-shadow: 0 1px 0 #fff;
-  &::-webkit-details-marker {
-    display: none;
-  }
-}
-.seven-details__summary:hover,
-.seven-details__summary:focus,
-.seven-details[open] > .seven-details__summary {
-  background-color: #eee;
-  color: gesso-brand(org-default,uw-black,'primary');
-
-}
-.seven-details__summary:focus,
-.seven-details[open] > .seven-details__summary {
-  @include svg-background(mobile-arrow-up);
-  color: gesso-brand(org-default,uw-black,'primary');
-}
-.seven-details__wrapper {
-  padding: 1rem;
-  .uw-input,
-  .form-text{
-    width:100% !important;
-  }
-}

source/_patterns/04-components/filters/filters.js

+/**
+ * @file
+ */
+
+(function ($, Drupal) {
+  Drupal.behaviors.filtersopen = {
+    attach: function (context, settings) {
+      $(document).ready(function () {
+        $('.view-filters details').each(function () {
+          $(this).attr("open", "");
+        });
+      });
+    }
+  };
+})(jQuery, Drupal);

source/_patterns/04-components/filters/filters.twig

@@ -8,6 +8,7 @@
         'modifier_classes': 'button--icon view-filters__close',
       } %}
      </div>
+    <h2>Filters:</h2>
     {% block exposed %}
       {{ exposed }}
     {% endblock %}

source/_patterns/04-components/view/_view.scss

@@ -10,22 +10,20 @@ $sidebar-width: 18.75rem;
 // set the layout for the Views container when being used with Blog, news, events
 // to match flexbox in multi list usage.
 .view {
-  @include uw-contained-width;
+  &s-element-container{
+    @include uw-contained-width;
+    padding:0;
+    position:relative;
+  }
   display: grid;
+  gap:1rem;
   grid-template-columns: 100%;
-  padding: rem(gesso-spacing(sm));
+  padding:0;
   position: relative;