ISTWCMS-5061:css changes to the autocomplete and adjustments to details in view filters

css/styles.css

@@ -2107,7 +2107,7 @@ textarea {
 .uw-site-container .webform-submission-form .form-actions {
   display: flex;
   gap: 1rem;
-  margin: 2rem 0; }
+  margin: 0.25rem 0; }
   .uw-site-container .webform-submission-form .form-actions .button {
     background-color: #757575;
     background-image: none;
@@ -2393,7 +2393,8 @@ svg:not(:root) {
       pointer-events: none; }
 
 .webform-has-field-prefix .form-text,
-.webform-has-field-suffix .form-text {
+.webform-has-field-suffix .form-text,
+.captcha .form-text {
   width: auto !important; }
 
 .bef-toggle {
@@ -2419,6 +2420,22 @@ input[size="60"] {
   max-width: 100%;
   width: 100%; }
 
+/* stylelint-disable */
+.js input.form-autocomplete {
+  background-position: 99.5% center; }
+
+/* stylelint-enable */
+.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper,
+.ui-autocomplete .ui-menu-item a {
+  color: #000 !important;
+  font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif !important;
+  text-decoration: none; }
+  .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover, .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:focus, .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:active,
+  .ui-autocomplete .ui-menu-item a:hover,
+  .ui-autocomplete .ui-menu-item a:focus,
+  .ui-autocomplete .ui-menu-item a:active {
+    background: #fffaaa; }
+
 .breadcrumb__title, .readmore-link__accessibility-description {
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -5302,7 +5319,7 @@ button {
   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);
+  box-shadow: none;
   margin: 1.5rem 0;
   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
   width: 100%;
@@ -5312,10 +5329,10 @@ button {
     color: #000; }
   .uw-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); }
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
   .uw-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); }
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
   .uw-details:first-child,
   .seven-details:first-child {
     margin-top: 0; }
@@ -5398,7 +5415,7 @@ button {
   padding: 1rem; }
   .seven-details__wrapper .uw-input,
   .seven-details__wrapper .form-text {
-    width: 100% !important; }
+    width: 100%; }
 
 .sliding-popup-bottom,
 .sliding-popup-top {
@@ -9491,7 +9508,7 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
     font-size: 14.22224px;
     font-weight: 200;
     letter-spacing: inherit;
-    padding-left: 16px; }
+    padding-left: 0.25rem; }
   .view-filters form .uw-input,
   .view-filters form .form-text,
   .view-filters form select {
@@ -9503,7 +9520,7 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
 @media (min-width: 63.1875rem) {
   .view-filters .uw-input,
   .view-filters .form-text {
-    width: 100% !important; }
+    width: 100%; }
   .view-filters .views-exposed-form {
     margin: 0 !important;
     padding: 0 !important; } }

source/_patterns/02-base/02-html-elements/25-forms/_forms.scss

@@ -218,11 +218,12 @@ textarea {
       }
     }
   }
+
   .webform-submission-form{
     .form-actions{
       display:flex;
       gap:1rem;
-      margin:2rem 0;
+      margin:0.25rem 0;
       .button{
         @include button();
         height:inherit;

source/_patterns/02-base/02-html-elements/27-input/_input.scss

@@ -40,6 +40,7 @@ $uw-input-padding: 0.46667rem;
   padding: $uw-input-padding;
   transition: border-color;
   width: 100%;
+
   &:focus {
     border: 1px solid $uw-input-border-color-focus !important;
     box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 0 5px rgba(104,104,104,.7);
@@ -52,8 +53,10 @@ $uw-input-padding: 0.46667rem;
   // make the input after prefix be inline
 
 }
+
 .webform-has-field-prefix,
-.webform-has-field-suffix{
+.webform-has-field-suffix,
+.captcha {
  .form-text{
     width:auto !important;
   }
@@ -82,3 +85,33 @@ input[size="60"] {
   max-width: 100%;
   width: 100%;
 }
+
+// Autoomplete
+
+/* stylelint-disable */
+.js {
+  input {
+    &.form-autocomplete {
+      background-position: 99.5% center;
+    }
+  }
+}
+/* stylelint-enable */// Autocomplete ul li a.
+.ui-autocomplete {
+  .ui-menu-item{
+
+    .ui-menu-item-wrapper,
+    a{
+      color:$uw-black !important;
+      font-family:$uw-input-font-family !important;
+      text-decoration:none;
+
+      &:hover,
+      &:focus,
+      &:active{
+        background:gesso-brand('org-default', uw-gold, lvl1);
+      }
+
+    }
+  }
+}

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

@@ -17,7 +17,7 @@ $details-font-family: gesso-font-family(primary);
   border: 1px solid #bfbfbf;
   border-bottom: 1px solid $card-accent-border-color;
   border-radius: inherit;
-  box-shadow: gesso-box-shadow(1);
+  box-shadow: gesso-box-shadow(0);
   margin: rem(gesso-spacing(md)) 0;
   transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
   width:100%;
@@ -25,10 +25,10 @@ $details-font-family: gesso-font-family(primary);
     color: gesso-brand(org-default,uw-black,'primary');
   }
   &:hover {
-    box-shadow: gesso-box-shadow(3);
+    box-shadow: gesso-box-shadow(1);
   }
   &:focus-within {
-    box-shadow: gesso-box-shadow(3);
+    box-shadow: gesso-box-shadow(1);
   }
   &:first-child{
     margin-top: 0;
@@ -126,6 +126,6 @@ $details-font-family: gesso-font-family(primary);
   padding: 1rem;
   .uw-input,
   .form-text{
-    width:100% !important;
+    width:100%;
   }
 }

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

@@ -32,7 +32,7 @@
       font-size:gesso-font-size(-1);
       font-weight:200;
       letter-spacing:inherit;
-      padding-left:gesso-spacing(sm);
+      padding-left:0.25rem;
     }
     .uw-input,
     .form-text,
@@ -47,7 +47,7 @@
   @include large {
     .uw-input,
     .form-text {
-      width: 100% !important;
+      width: 100%;
     }
     .views-exposed-form {
       margin: 0 !important;