beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Add outline button styles for the frontend.

Browse source
This commit is contained in:
Allan Cole 2020-04-17 14:47:20 -04:00
parent 68a276bbbd
commit 79e5f16995
3 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
varia/sass/blocks/button/_style.scss
View file

@ -16,27 +16,27 @@ input[type="submit"],
.wp-block-button {
// Outline Style
&.is-style-outline {
&.is-style-outline,
&.is-style-outline .wp-block-button__link {
.wp-block-button__link {
color: #{map-deep-get($config-button, "color", "background")};
background: transparent;
border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};
&:active {
color: #{map-deep-get($config-button, "color", "background")};
background: transparent;
border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};
}
&:active {
color: #{map-deep-get($config-button, "color", "background")};
}
&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "background-hover")};
}
&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "background-hover")};
}
}
// Squared Style
&.is-style-squared,
&.is-style-squared .wp-block-button__link {
border-radius: 0;
}

7
varia/style-rtl.css
View file

@ -1432,6 +1432,7 @@ button[data-load-more-btn], .button {
/**
* Block Options
*/
.wp-block-button.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
color: blue;
background: transparent;
@ -1439,11 +1440,15 @@ button[data-load-more-btn], .button {
padding: 14px 16px;
}
.wp-block-button.is-style-outline:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
color: blue;
}
.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:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.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: indigo;
}

8
varia/style.css
View file

@ -1432,6 +1432,7 @@ button[data-load-more-btn], .button {
/**
* Block Options
*/
.wp-block-button.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
color: blue;
background: transparent;
@ -1439,14 +1440,19 @@ button[data-load-more-btn], .button {
padding: 14px 16px;
}
.wp-block-button.is-style-outline:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
color: blue;
}
.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:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.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: indigo;
}
.wp-block-button.is-style-squared,
.wp-block-button.is-style-squared .wp-block-button__link {
border-radius: 0;
}