diff --git a/src/patterns/01-core/mixins/_button.scss b/src/patterns/01-core/mixins/_button.scss
index 9fabbc2c346331439e883a01b5a48c17a0cdd4cc..e6c8ff2a7633cf6cfabd7f6d86bd87e1ab551a91 100644
--- a/src/patterns/01-core/mixins/_button.scss
+++ b/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;
+ }
+}
diff --git a/src/patterns/04-components/button/_button.scss b/src/patterns/04-components/button/_button.scss
index 0b6b9c1ff6b13de1b4fb5f76620c8af75e871e2b..08732d4a1e04d3a3e133521128f6ffa130e8db44 100644
--- a/src/patterns/04-components/button/_button.scss
+++ b/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{
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.md b/src/patterns/04-components/button/button--cancel/button--cancel.md
deleted file mode 100644
index f547601f67fbac97069876a5772b7ab0cc3fdb0b..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--cancel/button--cancel.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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.
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.twig b/src/patterns/04-components/button/button--cancel/button--cancel.twig
deleted file mode 100644
index 4b1078a769bc5400f37513648f15df61acca5f42..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--cancel/button--cancel.twig
+++ /dev/null
@@ -1,9 +0,0 @@
-{% set button_modifier_classes -%}
- button--cancel {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
- 'url': url,
- 'text': text,
- 'modifier_classes': button_modifier_classes,
-} %}
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.yml b/src/patterns/04-components/button/button--cancel/button--cancel.yml
deleted file mode 100644
index cffef5d967c6f37bd0919e290a222e0a10a59cbc..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--cancel/button--cancel.yml
+++ /dev/null
@@ -1,6 +0,0 @@
----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Cancel'
-text_demo: 'Cancel (Link)'
diff --git a/src/patterns/04-components/button/button--danger/button--danger.md b/src/patterns/04-components/button/button--danger/button--danger.md
deleted file mode 100644
index 90d99731ad5136597e128c3f7732929ac79a5e0b..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--danger/button--danger.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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.
diff --git a/src/patterns/04-components/button/button--danger/button--danger.twig b/src/patterns/04-components/button/button--danger/button--danger.twig
deleted file mode 100644
index f0c8362acf11d2e72652c7cb54bbf1113159193f..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--danger/button--danger.twig
+++ /dev/null
@@ -1,9 +0,0 @@
-{% set button_modifier_classes -%}
- button--danger {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
- 'url': url,
- 'text': text,
- 'modifier_classes': button_modifier_classes,
-} %}
diff --git a/src/patterns/04-components/button/button--danger/button--danger.yml b/src/patterns/04-components/button/button--danger/button--danger.yml
deleted file mode 100644
index 51477bd36f6829c80f9484c21f20917f1da4e9fc..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--danger/button--danger.yml
+++ /dev/null
@@ -1,6 +0,0 @@
----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Delete'
-text_demo: 'Delete (Link)'
diff --git a/src/patterns/04-components/button/button--large/button--large.md b/src/patterns/04-components/button/button--large/button--large.md
deleted file mode 100644
index 22fe954d6e6165f02d2088a9971a667f0bcd0c5f..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--large/button--large.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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.
diff --git a/src/patterns/04-components/button/button--large/button--large.twig b/src/patterns/04-components/button/button--large/button--large.twig
deleted file mode 100644
index 9d395daaf63a5eee18d4493364d8d3040eff225e..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--large/button--large.twig
+++ /dev/null
@@ -1,9 +0,0 @@
-{% set button_modifier_classes -%}
- button--large {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
- 'url': url,
- 'text': text,
- 'modifier_classes': button_modifier_classes,
-} %}
diff --git a/src/patterns/04-components/button/button--large/button--large.yml b/src/patterns/04-components/button/button--large/button--large.yml
deleted file mode 100644
index 7c8ac2d6302f02ef52ce5164f90dc380ad446c0b..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--large/button--large.yml
+++ /dev/null
@@ -1,6 +0,0 @@
----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Submit'
-text_demo: 'Link'
diff --git a/src/patterns/04-components/button/button--medium/button--medium.md b/src/patterns/04-components/button/button--medium/button--medium.md
deleted file mode 100644
index 6123ac5a27e826c2bd68488096a677ab158b4062..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--medium/button--medium.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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.
diff --git a/src/patterns/04-components/button/button--medium/button--medium.twig b/src/patterns/04-components/button/button--medium/button--medium.twig
deleted file mode 100644
index 8a3419dab0e072baa45462adccc49cb817f70bb7..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--medium/button--medium.twig
+++ /dev/null
@@ -1,9 +0,0 @@
-{% set button_modifier_classes -%}
- button--medium {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
- 'url': url,
- 'text': text,
- 'modifier_classes': button_modifier_classes,
-} %}
diff --git a/src/patterns/04-components/button/button--medium/button--medium.yml b/src/patterns/04-components/button/button--medium/button--medium.yml
deleted file mode 100644
index 7e1cb4ffa7f98b1d91a8823e62099c9ec2204bea..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--medium/button--medium.yml
+++ /dev/null
@@ -1,6 +0,0 @@
----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Button'
-text_demo: 'Link Button'
diff --git a/src/patterns/04-components/button/button--primary/button--primary.md b/src/patterns/04-components/button/button--primary/button--primary.md
deleted file mode 100644
index 2b4fc2b72828e284a35d3e897d525d7a64641ed5..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--primary/button--primary.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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.
diff --git a/src/patterns/04-components/button/button--primary/button--primary.twig b/src/patterns/04-components/button/button--primary/button--primary.twig
deleted file mode 100644
index cf637b5fe61e4daab28a9db4229fb8788374e398..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--primary/button--primary.twig
+++ /dev/null
@@ -1,9 +0,0 @@
-{% set button_modifier_classes -%}
- button--primary {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
- 'url': url,
- 'text': text,
- 'modifier_classes': button_modifier_classes,
-} %}
diff --git a/src/patterns/04-components/button/button--primary/button--primary.yml b/src/patterns/04-components/button/button--primary/button--primary.yml
deleted file mode 100644
index fb053e630bc3004c9605bb512f9788e0b92c5cf1..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--primary/button--primary.yml
+++ /dev/null
@@ -1,6 +0,0 @@
----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Save'
-text_demo: 'Save Button'
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.md b/src/patterns/04-components/button/button--secondary/button--secondary.md
deleted file mode 100644
index a423e1d6f6dd82e492e73c93e775ff7009c2c871..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--secondary/button--secondary.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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.
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.twig b/src/patterns/04-components/button/button--secondary/button--secondary.twig
deleted file mode 100644
index 83e711079ae8b44cede77dc4adba12a40b8dc523..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--secondary/button--secondary.twig
+++ /dev/null
@@ -1,9 +0,0 @@
-{% 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
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.yml b/src/patterns/04-components/button/button--secondary/button--secondary.yml
deleted file mode 100644
index cebf6161d8481520069c560cf3810095ece9cfb2..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--secondary/button--secondary.yml
+++ /dev/null
@@ -1,6 +0,0 @@
----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Revert'
-text_demo: 'Revert Button'
diff --git a/src/patterns/04-components/button/button--small/button--small.md b/src/patterns/04-components/button/button--small/button--small.md
deleted file mode 100644
index 860993d4bb3174412697a26e271559fb7b4ee41c..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--small/button--small.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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.
diff --git a/src/patterns/04-components/button/button--small/button--small.twig b/src/patterns/04-components/button/button--small/button--small.twig
deleted file mode 100644
index bb01b13dfcb1363e4591edfb4dd0e29297d2f8ae..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--small/button--small.twig
+++ /dev/null
@@ -1,9 +0,0 @@
-{% set button_modifier_classes -%}
- button--small {{ modifier_classes }}
-{%- endset %}
-
-{% include '@components/button/button.twig' with {
- 'url': url,
- 'text': text,
- 'modifier_classes': button_modifier_classes,
-} %}
diff --git a/src/patterns/04-components/button/button--small/button--small.yml b/src/patterns/04-components/button/button--small/button--small.yml
deleted file mode 100644
index 7e1cb4ffa7f98b1d91a8823e62099c9ec2204bea..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/button/button--small/button--small.yml
+++ /dev/null
@@ -1,6 +0,0 @@
----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Button'
-text_demo: 'Link Button'
diff --git a/src/patterns/04-components/button/button.yml b/src/patterns/04-components/button/button.yml
index 5a1d8353928892b3f512d98fe4f8d6fbeb77a277..d3103e51478ebcab819e6bee7d4b74ff44bd74ed 100644
--- a/src/patterns/04-components/button/button.yml
+++ b/src/patterns/04-components/button/button.yml
@@ -1,19 +1,8 @@
---
+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'
diff --git a/src/patterns/04-components/button/button~cancel.yml b/src/patterns/04-components/button/button~cancel.yml
new file mode 100644
index 0000000000000000000000000000000000000000..dfaac5ed5d59e39aa56f4ca2f9f8d0f06225b418
--- /dev/null
+++ b/src/patterns/04-components/button/button~cancel.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--cancel'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Cancel'
+text_demo: 'Cancel Link'
diff --git a/src/patterns/04-components/button/button~danger.yml b/src/patterns/04-components/button/button~danger.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7bc35c742db57be6b32f78d3908dd8766a9afbf4
--- /dev/null
+++ b/src/patterns/04-components/button/button~danger.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--danger'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Danger'
+text_demo: 'Danger Link'
diff --git a/src/patterns/04-components/button/button~highlight.yml b/src/patterns/04-components/button/button~highlight.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ae750944a07bfa42b71225d77b0f39dbac8a9476
--- /dev/null
+++ b/src/patterns/04-components/button/button~highlight.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--highlight'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Highlight'
+text_demo: 'Highlight link'
diff --git a/src/patterns/04-components/button/button~large.yml b/src/patterns/04-components/button/button~large.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7eed47de582b0a1c161d37ca31cbad988eeb8601
--- /dev/null
+++ b/src/patterns/04-components/button/button~large.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--large'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Large'
+text_demo: 'Large link'
diff --git a/src/patterns/04-components/button/button~link.yml b/src/patterns/04-components/button/button~link.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f20fe79fe3a392dcbf88d838ac79920ca673b5cd
--- /dev/null
+++ b/src/patterns/04-components/button/button~link.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--link'
+is_button_tag: false
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Link'
+text_demo: 'Link'
diff --git a/src/patterns/04-components/button/button~medium.yml b/src/patterns/04-components/button/button~medium.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d3b1fa95ddd870b78f5fd4961ecd6f5bd707b0a0
--- /dev/null
+++ b/src/patterns/04-components/button/button~medium.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--medium'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Medium'
+text_demo: 'Medium link'
diff --git a/src/patterns/04-components/button/button~primary.yml b/src/patterns/04-components/button/button~primary.yml
new file mode 100644
index 0000000000000000000000000000000000000000..30aca6fd2f5f8055ed757eca01bbeb6fff25f60c
--- /dev/null
+++ b/src/patterns/04-components/button/button~primary.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--primary'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Primary'
+text_demo: 'Primary link'
diff --git a/src/patterns/04-components/button/button~secondary.yml b/src/patterns/04-components/button/button~secondary.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2ed818a91d614e023aab6fb80c28139c357a899a
--- /dev/null
+++ b/src/patterns/04-components/button/button~secondary.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--secondary'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Secondary'
+text_demo: 'Secondary link'
diff --git a/src/patterns/04-components/button/button~small.yml b/src/patterns/04-components/button/button~small.yml
new file mode 100644
index 0000000000000000000000000000000000000000..093d5bcb7ed6a2ba45112f205ed5e880478c2be2
--- /dev/null
+++ b/src/patterns/04-components/button/button~small.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--small'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Small'
+text_demo: 'Small link'
diff --git a/src/patterns/04-components/button/button~standard.yml b/src/patterns/04-components/button/button~standard.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5c425e7a33394a9278560dfefeba067d89845a38
--- /dev/null
+++ b/src/patterns/04-components/button/button~standard.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--standard'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Standard'
+text_demo: 'Standard link'
diff --git a/src/patterns/04-components/button/button~unstyled.yml b/src/patterns/04-components/button/button~unstyled.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fb89c02cac755c5d6195d65a767e6c8ae3b1f900
--- /dev/null
+++ b/src/patterns/04-components/button/button~unstyled.yml
@@ -0,0 +1,8 @@
+---
+modifier_classes: 'button--unstyled'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Unstyled'
+text_demo: 'Unstyled link'
diff --git a/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss b/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
index 8de81b610c8a5a50b8124cf463565ef7aaeb9444..9e45fabb19629b31b0f53cc31eac7203e29e32f3 100644
--- a/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
+++ b/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
@@ -634,10 +634,12 @@ are the same height. */
line-height: var(--font-lineheight-2);
}
- em, i {
+ em,
+ i {
font-style: normal;
}
- strong, b {
+ strong,
+ b {
font-weight: bold;
}
}
diff --git a/src/patterns/04-components/filters/_filters.scss b/src/patterns/04-components/filters/_filters.scss
index 8bf0398d0d90e8f7e6bc2d120fe4141118e6bbf7..c44b8f81374bd2db0e7b64a46071223d3fde7f63 100644
--- a/src/patterns/04-components/filters/_filters.scss
+++ b/src/patterns/04-components/filters/_filters.scss
@@ -1,24 +1,67 @@
/**
* @file
- * Collapsible details.
+ * Collapsible details for filter page.
*
- * @see collapse.js
*/
+@use '../../01-core' as *;
+
.views-exposed-form{
margin: 0 !important;
padding: 0 !important;
.form-actions{
display: flex;
- gap: var(--size-4);
+ justify-content: flex-end;
+ flex-flow: row;
+ gap: var(--size-2);
+ margin-top: var(--size-1);
.button.js-form-submit.form-submit{
+ @extend %button--highlight;
font-weight: inherit;
- &:last-of-type{
- //background-color: gesso-color(button, primary, background);
- //color: gesso-color(button,primary,text);
- &:hover,
- &:focus {
- //background-color: gesso-color(button, primary, background-hover);
- //color: gesso-color(button,primary,text);
+ order: 1;
+ &[data-drupal-selector="edit-reset"]{
+ @extend %button--standard;
+ order: -1;
+ }
+ }
+ }
+ .form--inline{
+ .form-item.form-wrapper {
+ background: var(--uw-white);
+ margin: 0;
+ .form-item{
+ float: inherit;
+ .form-item{
+ margin: 0;
+ }
+ }
+ }
+ details{
+ &.uw-details,
+ &.seven-details{
+ 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;
+ &[open] > .seven-details__summary {
+ background-color: var(--gray-2);
+ color: var(--uw-black-primary);
+ }
+ &:hover > .seven-details__summary {
+ background-color: var(--gray-2);
+ color: var(--uw-black-primary);
+ }
+ &:last-of-type{
+ border-width: var(--size-xs);
+ margin-bottom: var(--size-1);
+ }
+ }
+ summary{
+ &.seven-details__summary,
+ &.details__summary {
+ background-color: var(--uw-white);
}
}
}
diff --git a/src/patterns/04-components/filters/filters.js b/src/patterns/04-components/filters/filters.js
index d00a70b0de7d7d8430b495eb1691f3a52836e64a..437fd8f03a71f7bc5bca04d8a9e5366937fa7940 100644
--- a/src/patterns/04-components/filters/filters.js
+++ b/src/patterns/04-components/filters/filters.js
@@ -7,9 +7,7 @@
Drupal.behaviors.filtersopen = {
attach: function () {
$(document).ready(function () {
- $('.view-filters details').each(function () {
- $(this).attr('open', '');
- });
+ $('.view-filters details').first().attr('open', '');
});
}
};
diff --git a/src/patterns/04-components/filters/filters.twig b/src/patterns/04-components/filters/filters.twig
index 6addf3c5d74f7aa1d29cb3fe2c94c355f7fdd160..0432b616e1922fd9176f39b7fc6fab7c694fec70 100644
--- a/src/patterns/04-components/filters/filters.twig
+++ b/src/patterns/04-components/filters/filters.twig
@@ -20,7 +20,7 @@
{% if pattern_lab %}
<form class="views-exposed-form bef-exposed-form" data-drupal-selector="views-exposed-form-uw-view-events-event-page" action="" method="" id="views-exposed-form-uw-view-events-event-page" accept-charset="UTF-8">
<div class="form--inline clearfix">
- <details open data-drupal-selector="edit-title-collapsible" aria-describedby="edit-title-collapsible--description" id="edit-title-collapsible" class="js-form-wrapper form-wrapper seven-details"> <summary role="button" aria-controls="edit-title-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+ <details open data-drupal-selector="edit-title-collapsible" aria-describedby="edit-title-collapsible--description" id="edit-title-collapsible" class="js-form-wrapper form-item form-wrapper seven-details"> <summary role="button" aria-controls="edit-title-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
<span>Title</span>
</summary>
<div class="seven-details__wrapper details-wrapper">
@@ -29,7 +29,7 @@
</div>
</div>
</details>
- <details open data-drupal-selector="edit-date-collapsible" aria-describedby="edit-date-collapsible--description" id="edit-date-collapsible" class="js-form-wrapper form-wrapper seven-details"> <summary role="button" aria-controls="edit-date-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+ <details open data-drupal-selector="edit-date-collapsible" aria-describedby="edit-date-collapsible--description" id="edit-date-collapsible" class="js-form-wrapper form-item form-wrapper seven-details"> <summary role="button" aria-controls="edit-date-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
<span>Date range</span>
</summary><div class="seven-details__wrapper details-wrapper">
<div class="seven-details__description">Limit to events where the first date of the event:</div>
@@ -37,7 +37,7 @@
<label for="edit-date-type">Operator</label>
<select data-drupal-selector="edit-date-type" id="edit-date-type" name="date_type" class="form-select"><option value="<">Is less than</option><option value="<=">Is less than or equal to</option><option value="=" selected="selected">Is equal to</option><option value="!=">Is not equal to</option><option value=">=">Is greater than or equal to</option><option value=">">Is greater than</option><option value="between">Is between</option><option value="not between">Is not between</option></select>
</div>
- <div data-drupal-selector="edit-date" id="edit-date" class="js-form-wrapper form-wrapper"><div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-date-value form-item-date-value">
+ <div data-drupal-selector="edit-date" id="edit-date" class="js-form-wrapper form-item form-wrapper"><div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-date-value form-item-date-value">
<input class="bef-datepicker form-text hasDatepicker" type="text" autocomplete="off" data-drupal-selector="edit-date-value" id="edit-date-value" name="date[value]" value="" maxlength="128" data-drupal-states="{"visible":[{":input[name=\u0022date_type\u0022]":{"value":"\u003C"}},{":input[name=\u0022date_type\u0022]":{"value":"\u003C="}},{":input[name=\u0022date_type\u0022]":{"value":"="}},{":input[name=\u0022date_type\u0022]":{"value":"!="}},{":input[name=\u0022date_type\u0022]":{"value":"\u003E="}},{":input[name=\u0022date_type\u0022]":{"value":"\u003E"}},{":input[name=\u0022date_type\u0022]":{"value":"regular_expression"}}]}">
@@ -58,7 +58,7 @@
</div>
</div>
</details>
- <details open data-drupal-selector="edit-type-collapsible" aria-describedby="edit-type-collapsible--description" id="edit-type-collapsible" class="js-form-wrapper form-wrapper seven-details"> <summary role="button" aria-controls="edit-type-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+ <details open data-drupal-selector="edit-type-collapsible" aria-describedby="edit-type-collapsible--description" id="edit-type-collapsible" class="js-form-wrapper form-item form-wrapper seven-details"> <summary role="button" aria-controls="edit-type-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
<span>Types</span>
</summary><div class="seven-details__wrapper details-wrapper">
<div class="seven-details__description">Limit to events where the type is one or more of:</div><div id="edit-type" class="form-checkboxes"><a class="bef-toggle" href="#">Select All</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">
@@ -126,7 +126,7 @@
</div>
</div>
</details>
- <details open data-drupal-selector="edit-field-uw-event-tags-target-id-collapsible" aria-describedby="edit-field-uw-event-tags-target-id-collapsible--description" id="edit-field-uw-event-tags-target-id-collapsible" class="js-form-wrapper form-wrapper seven-details"> <summary role="button" aria-controls="edit-field-uw-event-tags-target-id-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+ <details open data-drupal-selector="edit-field-uw-event-tags-target-id-collapsible" aria-describedby="edit-field-uw-event-tags-target-id-collapsible--description" id="edit-field-uw-event-tags-target-id-collapsible" class="js-form-wrapper form-item form-wrapper seven-details"> <summary role="button" aria-controls="edit-field-uw-event-tags-target-id-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
<span>Tags</span>
</summary><div class="seven-details__wrapper details-wrapper">
<div class="seven-details__description">Limit to events tagged with one or more of:</div><div id="edit-field-uw-event-tags-target-id" class="form-checkboxes"><a class="bef-toggle" href="#">Select None</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">
@@ -134,7 +134,7 @@
</div>
</div>
</details>
- <details open data-drupal-selector="edit-audience-collapsible" aria-describedby="edit-audience-collapsible--description" id="edit-audience-collapsible" class="js-form-wrapper form-wrapper seven-details"> <summary role="button" aria-controls="edit-audience-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+ <details open data-drupal-selector="edit-audience-collapsible" aria-describedby="edit-audience-collapsible--description" id="edit-audience-collapsible" class="js-form-wrapper form-item form-wrapper seven-details"> <summary role="button" aria-controls="edit-audience-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
<span>Audience</span>
</summary><div class="seven-details__wrapper details-wrapper">
<div class="seven-details__description">Limit to events where the audience is one or more of:</div><div id="edit-audience" class="form-checkboxes"><a class="bef-toggle" href="#">Select All</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">
diff --git a/src/patterns/04-components/form-item/_form-item.scss b/src/patterns/04-components/form-item/_form-item.scss
index 412dd3f941b8c970e173672245d5ec2623ddf293..2783640ce1829d5a3696b7d253a5535c16433f94 100644
--- a/src/patterns/04-components/form-item/_form-item.scss
+++ b/src/patterns/04-components/form-item/_form-item.scss
@@ -5,8 +5,10 @@
.form-item {
margin: 0 0 var(--size-2);
- .form--inline .form-checkboxes &{
- margin: inherit;
+ .form--inline{
+ .form-checkboxes &{
+ margin: inherit;
+ }
}
}
diff --git a/src/patterns/04-components/multi-type-list/multi-type-list.twig b/src/patterns/04-components/multi-type-list/multi-type-list.twig
index f4818ca72eb933c8db501691bcc359ca6a9bd3b3..0a6ed6b9a785e41b3522c8cacace747997ae50a4 100644
--- a/src/patterns/04-components/multi-type-list/multi-type-list.twig
+++ b/src/patterns/04-components/multi-type-list/multi-type-list.twig
@@ -26,7 +26,7 @@
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
- {% include '@components/button/button--large/button--large.twig' with {
+ {% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
@@ -42,7 +42,7 @@
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
- {% include '@components/button/button--large/button--large.twig' with {
+ {% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
@@ -58,7 +58,7 @@
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
- {% include '@components/button/button--large/button--large.twig' with {
+ {% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
diff --git a/src/patterns/04-components/pager/_pager.scss b/src/patterns/04-components/pager/_pager.scss
index cd90f5d21e103b95a053d7362c4f2ac2957b7915..05ad33cef1f73190ead15e6c815899deca750d86 100644
--- a/src/patterns/04-components/pager/_pager.scss
+++ b/src/patterns/04-components/pager/_pager.scss
@@ -47,7 +47,6 @@ $pager-bp: 600px !default;
transition:
color var(---dur-short) var(--ease-out-1),
background-color var(--dur-standard) var(--ease-out-1);
-
&:focus {
outline: 1px dotted $pager-link-focus-outline-color;
}
@@ -73,15 +72,11 @@ $pager-bp: 600px !default;
@extend %pager__link;
display: inline-block;
text-decoration: none;
- &:visited {
- color: $pager-link-color;
- }
&:hover,
&:focus {
background-color: $pager-background-color-hover;
color: var(--uw-white);
}
-
&:active {
background-color: $pager-background-color-active;
color: $pager-link-color-active;
@@ -103,10 +98,6 @@ $pager-bp: 600px !default;
fill: $pager-background-color;
}
}
-
- &:visited {
- color: var(--uw-white);
- }
}
.pager__item--previous {
diff --git a/src/patterns/04-components/site-name/_site-name.scss b/src/patterns/04-components/site-name/_site-name.scss
index f1b2f2f33a039a4d2d1ad98172ce0405ad55e63c..ec31222e4c57149cfe6b02b9ee1e17269be78b1f 100644
--- a/src/patterns/04-components/site-name/_site-name.scss
+++ b/src/patterns/04-components/site-name/_site-name.scss
@@ -41,7 +41,6 @@ $site-slogan-font-size: var(--font-size-2);
@media(min-width: $screen-md) {
font-size: $site-slogan-font-size;
}
-
margin: 0;
padding: 0 0 0.5rem;
}