|
@@ -1,8 +1,8 @@
|
|
// NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere. This can be removed when those no longer exist.
|
|
// NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere. This can be removed when those no longer exist.
|
|
// See https://github.com/WordPress/gutenberg/issues/29167
|
|
// See https://github.com/WordPress/gutenberg/issues/29167
|
|
@mixin button-main-styles {
|
|
@mixin button-main-styles {
|
|
|
|
+
|
|
@include button-padding-styles;
|
|
@include button-padding-styles;
|
|
- @include button-typography-styles;
|
|
|
|
@include button-color-styles;
|
|
@include button-color-styles;
|
|
border-radius: var(--wp--custom--button--border--radius);
|
|
border-radius: var(--wp--custom--button--border--radius);
|
|
}
|
|
}
|
|
@@ -11,7 +11,8 @@
|
|
opacity: 1;
|
|
opacity: 1;
|
|
color: var(--wp--custom--button--color--text);
|
|
color: var(--wp--custom--button--color--text);
|
|
background-color: var(--wp--custom--button--color--background);
|
|
background-color: var(--wp--custom--button--color--background);
|
|
- border-color: currentColor;
|
|
|
|
|
|
+ border-color: currentcolor;
|
|
|
|
+
|
|
svg {
|
|
svg {
|
|
fill: var(--wp--custom--button--color--text);
|
|
fill: var(--wp--custom--button--color--text);
|
|
}
|
|
}
|
|
@@ -21,18 +22,10 @@
|
|
//standard and outline buttons are equal.
|
|
//standard and outline buttons are equal.
|
|
@mixin button-padding-styles {
|
|
@mixin button-padding-styles {
|
|
border-width: 0;
|
|
border-width: 0;
|
|
- padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width) );
|
|
|
|
- padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width) );
|
|
|
|
- padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) );
|
|
|
|
- padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) );
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-@mixin button-typography-styles {
|
|
|
|
- font-weight: var(--wp--custom--button--typography--font-weight);
|
|
|
|
- font-family: inherit;
|
|
|
|
- font-size: var(--wp--custom--button--typography--font-size);
|
|
|
|
- line-height: var(--wp--custom--button--typography--line-height);
|
|
|
|
- text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
|
|
|
|
|
|
+ padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
|
|
|
|
+ padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
|
|
|
|
+ padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
|
|
|
|
+ padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
|
|
}
|
|
}
|
|
|
|
|
|
//apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
|
|
//apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
|
|
@@ -52,6 +45,7 @@
|
|
@mixin button-hover-styles {
|
|
@mixin button-hover-styles {
|
|
//The following changes should ONLY be changed if the user has NOT set a custom color
|
|
//The following changes should ONLY be changed if the user has NOT set a custom color
|
|
&:not(.has-background):not(.has-text-color) {
|
|
&:not(.has-background):not(.has-text-color) {
|
|
|
|
+
|
|
&:hover,
|
|
&:hover,
|
|
&:focus,
|
|
&:focus,
|
|
&.has-focus {
|
|
&.has-focus {
|
|
@@ -59,6 +53,7 @@
|
|
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
|
|
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
|
|
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
|
|
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
|
|
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
|
|
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
|
|
|
|
+
|
|
@include button-color-styles;
|
|
@include button-color-styles;
|
|
border-color: var(--wp--custom--button--border--color);
|
|
border-color: var(--wp--custom--button--border--color);
|
|
}
|
|
}
|
|
@@ -67,11 +62,12 @@
|
|
|
|
|
|
//Mixins for the alternative outline style
|
|
//Mixins for the alternative outline style
|
|
@mixin button-outline-hover-styles {
|
|
@mixin button-outline-hover-styles {
|
|
|
|
+
|
|
&:hover,
|
|
&:hover,
|
|
&:focus,
|
|
&:focus,
|
|
&.has-focus {
|
|
&.has-focus {
|
|
border-style: var(--wp--custom--button--border--style);
|
|
border-style: var(--wp--custom--button--border--style);
|
|
- border-color: currentColor;
|
|
|
|
|
|
+ border-color: currentcolor;
|
|
border-width: var(--wp--custom--button--border--width);
|
|
border-width: var(--wp--custom--button--border--width);
|
|
padding-top: var(--wp--custom--button--spacing--padding--top);
|
|
padding-top: var(--wp--custom--button--spacing--padding--top);
|
|
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
|
|
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
|