diff --git a/varya/assets/css/style-editor.css b/varya/assets/css/style-editor.css index 53690b13..3252c1d8 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,20 @@ 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, +.is-style-outline .wp-block-button__link { 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 { - color: var(--button--color-background-hover); -} - -.wp-block-button.is-style-squared .wp-block-button__link { +.wp-block-button__link.is-style-squared, +.is-style-squared .wp-block-button__link { border-radius: 0; } 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/_editor.scss b/varya/assets/sass/blocks/button/_editor.scss index 7852a0f5..1a1fadea 100644 --- a/varya/assets/sass/blocks/button/_editor.scss +++ b/varya/assets/sass/blocks/button/_editor.scss @@ -1,42 +1,32 @@ -.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 { - - .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); - } - } + &.is-style-outline, + .is-style-outline & { + color: var(--button--color-background); + background: transparent; + border: 2px solid currentcolor; } // Squared Style - &.is-style-squared .wp-block-button__link { + &.is-style-squared, + .is-style-squared & { border-radius: 0; } } diff --git a/varya/assets/sass/blocks/button/_style.scss b/varya/assets/sass/blocks/button/_style.scss index 47710b74..d368700d 100644 --- a/varya/assets/sass/blocks/button/_style.scss +++ b/varya/assets/sass/blocks/button/_style.scss @@ -22,7 +22,9 @@ input[type="submit"], // Outline Style &.is-style-outline { - + border: none; + + &.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..481fd1f6 100644 --- a/varya/style-rtl.css +++ b/varya/style-rtl.css @@ -1229,6 +1229,11 @@ 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); background: transparent; @@ -1236,11 +1241,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..cd54a0ef 100644 --- a/varya/style.css +++ b/varya/style.css @@ -1237,6 +1237,11 @@ 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); background: transparent; @@ -1244,11 +1249,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); }