ISTWCMS-5732:adding css for the filters presentation changes

src/patterns/01-core/elements/_details.scss

@@ -12,9 +12,8 @@
     border: var(--size-xs) solid #bfbfbf;
     border-bottom:var(--size-xs) solid var(--uw-black-primary);
     border-radius: var(--radius-1);
-    box-shadow: var(--shadow-1);
-    color: var(--uw-black-primary);
-    font-family: var(--font-book);
+    box-shadow: var(--shadow-0);
+    color: var(--uw-black);
     margin: var(--size-3) 0;
     transition: box-shadow 300ms ease;
     width:100%;
@@ -98,7 +97,6 @@
   background: var(--uw-white);
   border: var(--size-xs) solid var(--gray-2);
   border-top: 0;
-  font-family:inherit;
   padding: var(--size-2);
 
   > :last-child {
@@ -107,14 +105,14 @@
   .uw-label,
   label{
     margin-bottom:0;
-    margin-top: var(--size-2);
+    margin-top: var(--size-105);
   }
 }
 .details__description,
 .seven-details__description{
+  font-family: var(--font-systemmedium) !important;
+  font-size: var(--font-size-000) !important;
   color: var(--uw-black);
-  font-family: var(--font-book);
-  font-size: var(--font-size-00);
   margin-bottom: var(--size-2);
   > :last-child {
     margin-bottom: 0;

src/patterns/01-core/elements/_label.scss

@@ -18,4 +18,8 @@ label,
     display: inline;
     font-size: var(--font-size-1);
   }
+  &.option{
+    font-family: inherit;
+    font-size: inherit;
+  }
 }

src/patterns/01-core/elements/_option.scss

@@ -7,8 +7,8 @@
   font-size: var(--font-size-0);
   font-weight: var(--font-weight-400);
   letter-spacing: inherit;
-  margin-left: 0.2rem;
-  padding-left: 0.25rem;
+  margin-left: var(--size-05);
+  padding-left: var(--size-105);
 }
 
 :where(optgroup) {
@@ -19,12 +19,13 @@
   margin: 0;
 }
 
-.option {
+label.option,
+.option{
   display: inline;
-  font-family:  var(--font-book);
-  font-size:  var(--font-size-0);
+  font-family: var(--font-systemmedium) !important;
+  font-size: var(--font-size-000) !important;
   font-weight:  normal;
   letter-spacing:inherit;
-  margin-left: 0.2rem;
-  padding-left: 0.25rem;
+  margin-left: var(--size-05);
+  padding: var(--size-1) 0 var(--size-1) var(--size-4);
 }

src/patterns/01-core/elements/_select.scss

@@ -5,6 +5,7 @@
 
 :where(select) {
   @include svg-background(select-arrows);
+  appearance: none;
   background-color: var(--gray-2);
   background-position: right 10px center; // LTR
   background-repeat: no-repeat;
@@ -15,8 +16,8 @@
   font-family: var(--font-systemmedium);
   font-size: inherit;
   letter-spacing: inherit;
-  //padding-block: .75ch;
-  //padding-inline: 1.25ch 0;
+  padding-block: .75ch;
+  padding-inline: 1.25ch 0;
   padding-right: 10px; // LTR
   touch-action: manipulation;
   &:-moz-focusring {

src/patterns/01-core/props/_colors.scss

@@ -15,7 +15,7 @@
   --gray-0: #ffffff;
   --gray-1: #fafafa;
   --gray-2: #eee;
-  --gray-3: #ccc;
+  --gray-3: #dbdbdb;
   --gray-4: #a2a2a2;
   --gray-5: #757575;
   --gray-6: #4e4e4e;

src/patterns/04-components/button/_button.scss

@@ -10,10 +10,10 @@ button{
 
   &.button--medium {
     font-size: var(--font-size-000);
-    padding: var(--size-105);
+    padding: var(--size-2);
     &:hover,
     &:focus {
-      padding: var(--size-105);
+      padding: var(--size-2);
     }
   }
   &.button--small {

src/patterns/04-components/card/_card.scss

@@ -2,7 +2,7 @@
 // Styles for Cards..
 
 @use '../../01-core' as *;
-$card-border-color: var(--gray-2);
+$card-border-color: var(--gray-3);
 $card-accent-border-color: var(--uw-black-primary) !default;
 $card-link-color: var(--uw-black-primary) !default;
 $card-link-color-hover: var(--gray-5) !default;

src/patterns/04-components/filters/_filters.scss

@@ -41,7 +41,6 @@
         background: var(--uw-white);
         border: var(--size-xs) solid var(--gray-3);
         border-width: var(--size-xs) var(--size-xs) 0 var(--size-xs);
-        box-shadow: none;
         font-family: var(--font-systembold);
         font-size: var(--font-size-000);
         margin: 0;
@@ -66,4 +65,58 @@
       }
     }
   }
+  input[type="radio"],
+  input[type="checkbox"] {
+    position: absolute;
+    top: 0;
+    left: -9999px;
+    visibility: hidden;
+    &:checked + label {
+      &::before {
+        //
+      }
+      &::after {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+      }
+    }
+  }
+  label.option {
+    cursor: pointer;
+    display: block;
+    font-family: inherit;
+    font-size: inherit;
+    position: relative;
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+    }
+    &::before {
+      background: var(--gray-2);
+      box-shadow: 0 0 1px var(--gray-4);
+      height: 20px;
+      margin: -10px 0 0;
+      left: 0;
+      width: 20px;
+    }
+
+    &::after {
+      background: var(--uw-black);
+      height: 15px;
+      margin: -7px 0 0;
+      left: 3px;
+      opacity: 0;
+      transform: translate3d(-40px, 0, 0) scale(0.5);
+      transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+      width: 15px;
+    }
+  }
+}
+.form-type-radio label.option {
+  &::before,
+  &::after {
+    border-radius: 50% !important;
+  }
 }

src/patterns/04-components/filters/filters.twig

@@ -5,7 +5,7 @@
         'is_demo': false,
         'url': '#offcanvasbutton',
         'text': 'Close X',
-        'modifier_classes':  'button view-filters__close',
+        'modifier_classes': 'button--medium view-filters__close',
       } %}
      </div>
     <h2>

src/patterns/04-components/view/_view.scss

@@ -54,7 +54,6 @@ $sidebar-width: 18.75rem;
       width: 100%;
     }
   }
-
   &-content--message {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
@@ -142,7 +141,6 @@ $sidebar-width: 18.75rem;
       }
     }
   }
-
   // Ovewrite the view for when in services or catalog
   &-uw-view-catalog-show-nodes,
   &-uw-view-catalog-show-terms,
@@ -201,8 +199,6 @@ $sidebar-width: 18.75rem;
     }
   }
 }
-
-
 //Setting the views views-row item grids.
 .path-news,
 .path-blog,

src/patterns/04-components/view/view-filter/_view-filter.scss

@@ -49,6 +49,11 @@
     .image-button {
       margin: 0;
     }
+    label{
+      font-family: var(--font-book);
+      font-size: var(--font-size-00);
+      font-weight: var(--font-weight-300);
+    }
   }
   @media(min-width: $screen-lg) {
     .uw-input,
@@ -60,4 +65,15 @@
       padding: 0 !important;
     }
   }
+  .bef-toggle{
+    display: inline-block;
+    font-family: var(--font-systemmedium) !important;
+    font-size: var(--font-size-000) !important;
+    margin-bottom: var(--size-2) !important;
+    text-decoration: underline;
+    &:hover,
+    &:focus{
+      text-decoration: none;
+    }
+  }
 }