Browse Source

Blank Canvas Blocks: Re-add svg button styling

Danny Dudzic 4 years ago
parent
commit
fac3ee7b2e

+ 32 - 0
blank-canvas-blocks/assets/ponyfill.css

@@ -246,6 +246,13 @@ input[type=checkbox] + label {
 	background-color: var(--button--color-background-hover);
 }
 
+.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
+	fill: var(--wp--custom--button--color--hover-text);
+}
+
 .wp-block-buttons .wp-block-button:last-child {
 	margin-bottom: 0;
 }
@@ -471,6 +478,13 @@ p.has-drop-cap:not(:focus):first-letter {
 	background-color: var(--button--color-background-hover);
 }
 
+.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
+	fill: var(--wp--custom--button--color--hover-text);
+}
+
 .wp-block-buttons .wp-block-button:last-child {
 	margin-bottom: 0;
 }
@@ -523,6 +537,13 @@ p.has-drop-cap:not(:focus):first-letter {
 	background-color: var(--button--color-background-hover);
 }
 
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background).has-focus svg,
+.wp-block-search .wp-block-search__button:not(.has-background):hover svg,
+.wp-block-search .wp-block-search__button:not(.has-background):focus svg,
+.wp-block-search .wp-block-search__button:not(.has-background).has-focus svg {
+	fill: var(--wp--custom--button--color--hover-text);
+}
+
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon,
 .wp-block-search .wp-block-search__button.has-icon {
 	line-height: 0;
@@ -562,6 +583,13 @@ p.has-drop-cap:not(:focus):first-letter {
 	background-color: var(--button--color-background-hover);
 }
 
+.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
+	fill: var(--wp--custom--button--color--hover-text);
+}
+
 .wp-block-buttons .wp-block-button:last-child {
 	margin-bottom: 0;
 }
@@ -594,6 +622,10 @@ p.has-drop-cap:not(:focus):first-letter {
 	background-color: var(--button--color-background-hover);
 }
 
+.wp-block-file .wp-block-file__button:not(.has-background):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):focus svg, .wp-block-file .wp-block-file__button:not(.has-background).has-focus svg {
+	fill: var(--wp--custom--button--color--hover-text);
+}
+
 .wp-block-table figcaption {
 	font-size: var(--wp--custom--table--figcaption--typography--font-size);
 	text-align: center;

+ 3 - 0
blank-canvas-blocks/sass/blocks/_button.scss

@@ -32,6 +32,9 @@
 		&.has-focus {
 			color: var(--button--color-text-hover);
 			background-color: var(--button--color-background-hover);
+			svg {
+				fill: var(--wp--custom--button--color--hover-text);
+			}
 		}
 	}
 }