Merge branch 'feature/ISTWCMS-5732-m26lebla-update-filter-look' into '1.0.x'

Feature/istwcms 5732 m26lebla update filter look

See merge request !40

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/mixins/_button.scss

@@ -144,3 +144,37 @@ $button-font-size: var(--font-size-1) !default;
     pointer-events: none;
   }
 }
+%button--standard {
+  border: 1px solid var(--uw-black) !important;
+  background: var(--uw-white) !important;
+  color: var(--uw-black) !important;
+  padding: var(--size-1) var(--size-2);
+  width:auto;
+  &:hover,
+  &:focus {
+    border: 1px solid transparent !important;
+    background: var(--gray-2) !important;
+    color: var(--uw-black) !important;
+  }
+  &:active{
+    border: 1px solid  var(--uw-black) !important;
+  }
+}
+
+
+%button--highlight {
+  border: 1px solid var(--uw-black) !important;
+  color: var(--uw-white) !important;
+  background: var(--uw-black) !important;
+  padding: var(--size-1) var(--size-2);
+  width:auto;
+  &:hover,
+  &:focus {
+    border: 1px solid transparent !important;
+    background: var(--gray-2) !important;
+    color: var(--uw-black) !important;
+  }
+  &:active{
+    border: 1px solid  var(--uw-black) !important;
+  }
+}

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

@@ -6,6 +6,45 @@
 .button,
 button{
   @include button();
+  // This custom button class, included as an example, is not output by Drupal by default.
+
+  &.button--medium {
+    font-size: var(--font-size-000);
+    padding: var(--size-2);
+    &:hover,
+    &:focus {
+      padding: var(--size-2);
+    }
+  }
+  &.button--small {
+    font-size: var(--font-size-0000);
+    padding: var(--size-1);
+    &:hover,
+    &:focus {
+      padding: var(--size-1);
+    }
+  }
+  &.button--unstyled {
+    background-color: transparent !important;
+    color: inherit;
+    padding: 0 !important;
+    text-decoration: underline;
+  }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--cancel,
+.button[data-drupal-selector="edit-cancel"]{
+  background-color: var(--orange-5);
+  color: var(--uw-white);
+  &:hover,
+  &:focus {
+    background-color: var(--orange-9);
+    color: var(--uw-white);
+  }
+}
+.button[data-drupal-selector="edit-cancel"]{
+  line-height: 2.125;
 }
 
 // Drupal outputs this class on buttons that can delete content.
@@ -25,26 +64,6 @@ button{
   }
 }
 
-// This custom button class, included as an example, is not output by Drupal by default.
-.button--medium {
-  font-size: var(--font-size-000);
-  padding: var(--size-105);
-  &:hover,
-  &:focus {
-    padding: var(--size-105);
-  }
-}
-
-// This custom button class, included as an example, is not output by Drupal by default.
-.button--small {
-  font-size: var(--font-size-0000);
-  padding: var(--size-1);
-  &:hover,
-  &:focus {
-    padding: var(--size-1);
-  }
-}
-
 // Drupal outputs this class on buttons that can delete content.
 .button--primary {
   background-color: var(--green-8);
@@ -67,20 +86,10 @@ button{
   }
 }
 
-// Drupal outputs this class on buttons that can delete content.
-.button--cancel,
-.button[data-drupal-selector="edit-cancel"]{
-  background-color: var(--orange-5);
-  color: var(--uw-white);
-  &:hover,
-  &:focus {
-    background-color: var(--orange-9);
-    color: var(--uw-white);
-  }
-}
-.button[data-drupal-selector="edit-cancel"]{
-  line-height: 2.125;
-}
+
+
+
+
 // Css within pattern lab.
 .pattern-lab-content .mobile-menu-button,
 .pl-c-pattern__extra-toggle{

src/patterns/04-components/button/button--cancel/button--cancel.md

----
-el: .button--cancel
-title: Cancel Button
----
-
-__Variables:__
-* is_button_tag: [boolean] Whether to output as a button element.
-* is_demo: [boolean] Whether to show extra demo examples.
-* is_disabled: [boolean] Whether this button is disabled. Not used for links.
-* modifier_classes: [string] Classes to modify the default component styling.
-* url: [string] URL of the button.
-* text: [string] Text of the button.

src/patterns/04-components/button/button--cancel/button--cancel.twig

-{% set button_modifier_classes -%}
-  button--cancel {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
-  'url': url,
-  'text': text,
-  'modifier_classes': button_modifier_classes,
-} %}

src/patterns/04-components/button/button--danger/button--danger.md

----
-el: .button--danger
-title: Danger Button
----
-
-__Variables:__
-* is_button_tag: [boolean] Whether to output as a button element.
-* is_demo: [boolean] Whether to show extra demo examples.
-* is_disabled: [boolean] Whether this button is disabled. Not used for links.
-* modifier_classes: [string] Classes to modify the default component styling.
-* url: [string] URL of the button.
-* text: [string] Text of the button.

src/patterns/04-components/button/button--danger/button--danger.twig

-{% set button_modifier_classes -%}
-  button--danger {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
-  'url': url,
-  'text': text,
-  'modifier_classes': button_modifier_classes,
-} %}

src/patterns/04-components/button/button--large/button--large.md

----
-el: .button--large
-title: Large Button
----
-
-__Variables:__
-* is_button_tag: [boolean] Whether to output as a button element.
-* is_demo: [boolean] Whether to show extra demo examples.
-* is_disabled: [boolean] Whether this button is disabled. Not used for links.
-* modifier_classes: [string] Classes to modify the default component styling.
-* url: [string] URL of the button.
-* text: [string] Text of the button.

src/patterns/04-components/button/button--large/button--large.twig

-{% set button_modifier_classes -%}
-  button--large {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
-  'url': url,
-  'text': text,
-  'modifier_classes': button_modifier_classes,
-} %}

src/patterns/04-components/button/button--medium/button--medium.md

----
-el: .button--medium
-title: Medium Button
----
-
-__Variables:__
-* is_button_tag: [boolean] Whether to output as a button element.
-* is_demo: [boolean] Whether to show extra demo examples.
-* is_disabled: [boolean] Whether this button is disabled. Not used for links.
-* modifier_classes: [string] Classes to modify the default component styling.
-* url: [string] URL of the button.
-* text: [string] Text of the button.

src/patterns/04-components/button/button--medium/button--medium.twig

-{% set button_modifier_classes -%}
-  button--medium {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
-  'url': url,
-  'text': text,
-  'modifier_classes': button_modifier_classes,
-} %}

src/patterns/04-components/button/button--primary/button--primary.md

----
-el: .button--primary
-title: Primary Button (save)
----
-
-__Variables:__
-* is_button_tag: [boolean] Whether to output as a button element.
-* is_demo: [boolean] Whether to show extra demo examples.
-* is_disabled: [boolean] Whether this button is disabled. Not used for links.
-* modifier_classes: [string] Classes to modify the default component styling.
-* url: [string] URL of the button.
-* text: [string] Text of the button.

src/patterns/04-components/button/button--primary/button--primary.twig

-{% set button_modifier_classes -%}
-    button--primary  {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
-    'url': url,
-    'text': text,
-    'modifier_classes': button_modifier_classes,
-} %}

src/patterns/04-components/button/button--primary/button--primary.yml

----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Save'
-text_demo: 'Save Button'

src/patterns/04-components/button/button--secondary/button--secondary.md

----
-el: .button--secondary
-title: Secondary Button
----
-
-__Variables:__
-* is_button_tag: [boolean] Whether to output as a button element.
-* is_demo: [boolean] Whether to show extra demo examples.
-* is_disabled: [boolean] Whether this button is disabled. Not used for links.
-* modifier_classes: [string] Classes to modify the default component styling.
-* url: [string] URL of the button.
-* text: [string] Text of the button.

src/patterns/04-components/button/button--secondary/button--secondary.twig

-{% set button_modifier_classes -%}
-    button--secondary  {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
-    'url': url,
-    'text': text,
-    'modifier_classes': button_modifier_classes,
-} %}
\ No newline at end of file