From d04be3a1d7d1340fb0f19b926158a8b697267561 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 13 Apr 2020 10:48:49 -0400 Subject: [PATCH 1/4] Fix button styles. --- varya/assets/css/style-editor.css | 10 ++-- varya/assets/sass/blocks/button/_editor.scss | 50 +++++++++----------- 2 files changed, 27 insertions(+), 33 deletions(-) diff --git a/varya/assets/css/style-editor.css b/varya/assets/css/style-editor.css index 53690b13..e3ba6596 100644 --- a/varya/assets/css/style-editor.css +++ b/varya/assets/css/style-editor.css @@ -421,7 +421,7 @@ object { color: currentColor; } -.wp-block-button .wp-block-button__link { +.wp-block-button__link { color: var(--button--color-text); font-weight: var(--button--font-weight); font-family: var(--button--font-family); @@ -432,22 +432,22 @@ object { padding: var(--button--padding-vertical) var(--button--padding-horizontal); } -.wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus { +.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link.has-focus { color: var(--button--color-text-hover); background-color: var(--button--color-background-hover); } -.wp-block-button.is-style-outline .wp-block-button__link { +.wp-block-button__link.is-style-outline { color: var(--button--color-background); background: transparent; border: 2px solid currentcolor; } -.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus { +.wp-block-button__link.is-style-outline:hover, .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline.has-focus { color: var(--button--color-background-hover); } -.wp-block-button.is-style-squared .wp-block-button__link { +.wp-block-button__link.is-style-squared { border-radius: 0; } diff --git a/varya/assets/sass/blocks/button/_editor.scss b/varya/assets/sass/blocks/button/_editor.scss index 7852a0f5..5969a790 100644 --- a/varya/assets/sass/blocks/button/_editor.scss +++ b/varya/assets/sass/blocks/button/_editor.scss @@ -1,42 +1,36 @@ -.wp-block-button { +.wp-block-button__link { - // Default Style - .wp-block-button__link { - color: var(--button--color-text); - font-weight: var(--button--font-weight); - font-family: var(--button--font-family); - font-size: var(--button--font-size); - line-height: var(--button--line-height); - background-color: var(--button--color-background); - border-radius: var(--button--border-radius); - padding: var(--button--padding-vertical) var(--button--padding-horizontal); + color: var(--button--color-text); + font-weight: var(--button--font-weight); + font-family: var(--button--font-family); + font-size: var(--button--font-size); + line-height: var(--button--line-height); + background-color: var(--button--color-background); + border-radius: var(--button--border-radius); + padding: var(--button--padding-vertical) var(--button--padding-horizontal); - &:hover, - &:focus, - &.has-focus { - color: var(--button--color-text-hover); - background-color: var(--button--color-background-hover); - } + &:hover, + &:focus, + &.has-focus { + color: var(--button--color-text-hover); + background-color: var(--button--color-background-hover); } // Outline Style &.is-style-outline { + color: var(--button--color-background); + background: transparent; + border: 2px solid currentcolor; - .wp-block-button__link { - color: var(--button--color-background); - background: transparent; - border: 2px solid currentcolor; - - &:hover, - &:focus, - &.has-focus { - color: var(--button--color-background-hover); - } + &:hover, + &:focus, + &.has-focus { + color: var(--button--color-background-hover); } } // Squared Style - &.is-style-squared .wp-block-button__link { + &.is-style-squared { border-radius: 0; } } From 7af9523c7648faff57ff1d12c7760fb4037fa079 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 13 Apr 2020 12:17:58 -0400 Subject: [PATCH 2/4] Ensure buttons work with and without the GB plugin activated. --- varya/assets/css/style-editor.css | 10 ++++------ varya/assets/sass/blocks/button/_editor.scss | 12 ++++-------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/varya/assets/css/style-editor.css b/varya/assets/css/style-editor.css index e3ba6596..3252c1d8 100644 --- a/varya/assets/css/style-editor.css +++ b/varya/assets/css/style-editor.css @@ -437,17 +437,15 @@ object { background-color: var(--button--color-background-hover); } -.wp-block-button__link.is-style-outline { +.wp-block-button__link.is-style-outline, +.is-style-outline .wp-block-button__link { color: var(--button--color-background); background: transparent; border: 2px solid currentcolor; } -.wp-block-button__link.is-style-outline:hover, .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline.has-focus { - color: var(--button--color-background-hover); -} - -.wp-block-button__link.is-style-squared { +.wp-block-button__link.is-style-squared, +.is-style-squared .wp-block-button__link { border-radius: 0; } diff --git a/varya/assets/sass/blocks/button/_editor.scss b/varya/assets/sass/blocks/button/_editor.scss index 5969a790..1a1fadea 100644 --- a/varya/assets/sass/blocks/button/_editor.scss +++ b/varya/assets/sass/blocks/button/_editor.scss @@ -17,20 +17,16 @@ } // Outline Style - &.is-style-outline { + &.is-style-outline, + .is-style-outline & { color: var(--button--color-background); background: transparent; border: 2px solid currentcolor; - - &:hover, - &:focus, - &.has-focus { - color: var(--button--color-background-hover); - } } // Squared Style - &.is-style-squared { + &.is-style-squared, + .is-style-squared & { border-radius: 0; } } From e2dd692e86eed3f76ee6c90be80961af181f71ab Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 13 Apr 2020 12:21:28 -0400 Subject: [PATCH 3/4] Clean up front-end buttons --- varya/assets/css/variables-editor.css | 2 +- varya/assets/css/variables.css | 2 +- varya/assets/sass/blocks/button/_config.scss | 2 +- varya/assets/sass/blocks/button/_style.scss | 3 ++- varya/assets/sass/child-theme/variables-editor.css | 2 +- varya/assets/sass/child-theme/variables.css | 2 +- varya/style-rtl.css | 7 ++++++- varya/style.css | 7 ++++++- 8 files changed, 19 insertions(+), 8 deletions(-) diff --git a/varya/assets/css/variables-editor.css b/varya/assets/css/variables-editor.css index 816b2552..dcd26c82 100644 --- a/varya/assets/css/variables-editor.css +++ b/varya/assets/css/variables-editor.css @@ -102,7 +102,7 @@ body { --button--font-size: var(--global--font-size-base); --button--font-weight: normal; --button--line-height: 1; - --button--border-width: 1px; + --button--border-width: 2px; --button--border-radius: 4px; --button--padding-vertical: calc(var(--global--spacing-horizontal) - var(--button--border-width)); --button--padding-horizontal: var(--global--spacing-horizontal); diff --git a/varya/assets/css/variables.css b/varya/assets/css/variables.css index 4c3dcc0e..e5d7e9e9 100644 --- a/varya/assets/css/variables.css +++ b/varya/assets/css/variables.css @@ -102,7 +102,7 @@ --button--font-size: var(--global--font-size-base); --button--font-weight: normal; --button--line-height: 1; - --button--border-width: 1px; + --button--border-width: 2px; --button--border-radius: 4px; --button--padding-vertical: calc(var(--global--spacing-horizontal) - var(--button--border-width)); --button--padding-horizontal: var(--global--spacing-horizontal); diff --git a/varya/assets/sass/blocks/button/_config.scss b/varya/assets/sass/blocks/button/_config.scss index 988c873a..02fe3fdb 100644 --- a/varya/assets/sass/blocks/button/_config.scss +++ b/varya/assets/sass/blocks/button/_config.scss @@ -15,7 +15,7 @@ --button--line-height: 1; // Borders - --button--border-width: 1px; + --button--border-width: 2px; --button--border-radius: 4px; // Spacing diff --git a/varya/assets/sass/blocks/button/_style.scss b/varya/assets/sass/blocks/button/_style.scss index 47710b74..798c6297 100644 --- a/varya/assets/sass/blocks/button/_style.scss +++ b/varya/assets/sass/blocks/button/_style.scss @@ -22,7 +22,8 @@ input[type="submit"], // Outline Style &.is-style-outline { - + + &.wp-block-button__link, .wp-block-button__link { color: var(--button--color-background); background: transparent; diff --git a/varya/assets/sass/child-theme/variables-editor.css b/varya/assets/sass/child-theme/variables-editor.css index 816b2552..dcd26c82 100644 --- a/varya/assets/sass/child-theme/variables-editor.css +++ b/varya/assets/sass/child-theme/variables-editor.css @@ -102,7 +102,7 @@ body { --button--font-size: var(--global--font-size-base); --button--font-weight: normal; --button--line-height: 1; - --button--border-width: 1px; + --button--border-width: 2px; --button--border-radius: 4px; --button--padding-vertical: calc(var(--global--spacing-horizontal) - var(--button--border-width)); --button--padding-horizontal: var(--global--spacing-horizontal); diff --git a/varya/assets/sass/child-theme/variables.css b/varya/assets/sass/child-theme/variables.css index 4c3dcc0e..e5d7e9e9 100644 --- a/varya/assets/sass/child-theme/variables.css +++ b/varya/assets/sass/child-theme/variables.css @@ -102,7 +102,7 @@ --button--font-size: var(--global--font-size-base); --button--font-weight: normal; --button--line-height: 1; - --button--border-width: 1px; + --button--border-width: 2px; --button--border-radius: 4px; --button--padding-vertical: calc(var(--global--spacing-horizontal) - var(--button--border-width)); --button--padding-horizontal: var(--global--spacing-horizontal); diff --git a/varya/style-rtl.css b/varya/style-rtl.css index 03fee7ef..8a0b471e 100644 --- a/varya/style-rtl.css +++ b/varya/style-rtl.css @@ -1229,6 +1229,7 @@ button[data-load-more-btn], line-height: var(--button--line-height); } +.wp-block-button.is-style-outline.wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { color: var(--button--color-background); background: transparent; @@ -1236,11 +1237,15 @@ button[data-load-more-btn], padding: var(--button--padding-vertical) var(--button--padding-horizontal); } +.wp-block-button.is-style-outline.wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:active { color: var(--button--color-background); } -.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus { +.wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus, +.wp-block-button.is-style-outline .wp-block-button__link:hover, +.wp-block-button.is-style-outline .wp-block-button__link:focus, +.wp-block-button.is-style-outline .wp-block-button__link.has-focus { color: var(--button--color-background-hover); } diff --git a/varya/style.css b/varya/style.css index 85a6605a..eb04fe70 100644 --- a/varya/style.css +++ b/varya/style.css @@ -1237,6 +1237,7 @@ button[data-load-more-btn], line-height: var(--button--line-height); } +.wp-block-button.is-style-outline.wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { color: var(--button--color-background); background: transparent; @@ -1244,11 +1245,15 @@ button[data-load-more-btn], padding: var(--button--padding-vertical) var(--button--padding-horizontal); } +.wp-block-button.is-style-outline.wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:active { color: var(--button--color-background); } -.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus { +.wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus, +.wp-block-button.is-style-outline .wp-block-button__link:hover, +.wp-block-button.is-style-outline .wp-block-button__link:focus, +.wp-block-button.is-style-outline .wp-block-button__link.has-focus { color: var(--button--color-background-hover); } From 3ed2cf30edca56ac3f1810d82b2a0c370f7f3ee8 Mon Sep 17 00:00:00 2001 From: Jeffrey Ong Date: Fri, 17 Apr 2020 12:10:49 -0400 Subject: [PATCH 4/4] Remove additional border from outline style --- varya/assets/sass/blocks/button/_style.scss | 1 + varya/style-rtl.css | 4 ++++ varya/style.css | 4 ++++ 3 files changed, 9 insertions(+) diff --git a/varya/assets/sass/blocks/button/_style.scss b/varya/assets/sass/blocks/button/_style.scss index 798c6297..d368700d 100644 --- a/varya/assets/sass/blocks/button/_style.scss +++ b/varya/assets/sass/blocks/button/_style.scss @@ -22,6 +22,7 @@ input[type="submit"], // Outline Style &.is-style-outline { + border: none; &.wp-block-button__link, .wp-block-button__link { diff --git a/varya/style-rtl.css b/varya/style-rtl.css index 8a0b471e..481fd1f6 100644 --- a/varya/style-rtl.css +++ b/varya/style-rtl.css @@ -1229,6 +1229,10 @@ button[data-load-more-btn], line-height: var(--button--line-height); } +.wp-block-button.is-style-outline { + border: none; +} + .wp-block-button.is-style-outline.wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { color: var(--button--color-background); diff --git a/varya/style.css b/varya/style.css index eb04fe70..cd54a0ef 100644 --- a/varya/style.css +++ b/varya/style.css @@ -1237,6 +1237,10 @@ button[data-load-more-btn], line-height: var(--button--line-height); } +.wp-block-button.is-style-outline { + border: none; +} + .wp-block-button.is-style-outline.wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { color: var(--button--color-background);