ISTWCMS-5732: css for new filter look, includes new buttons styles

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/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-105);
+    &:hover,
+    &:focus {
+      padding: var(--size-105);
+    }
+  }
+  &.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

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

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

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

----
-el: .button--small
-title: Small 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--small/button--small.twig

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

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

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

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

 ---
+modifier_classes: ''
 is_button_tag: true
 is_demo: true
 is_disabled: false
-autofocus: false
-formaction: 'form_action'
-form: 'form_id'
-formmethod: ''
-formtarget: 'form_target'
-name: ''
-formenctype: ''
-value: ''
 url: '#'
 text: 'Button'
-text_demo: 'Link Button'
-type: ''
-modifier_classes: ''
-btnclick : |
-  alert('Hello World!');
+text_demo: 'Button'