Browse Source

Varia: revise outline button selector nesting. code tidying

Allan Cole 5 years ago
parent
commit
68a276bbbd
2 changed files with 13 additions and 15 deletions
  1. 7 9
      varia/sass/blocks/button/_editor.scss
  2. 6 6
      varia/style-editor.css

+ 7 - 9
varia/sass/blocks/button/_editor.scss

@@ -20,16 +20,14 @@
 	&.is-style-outline,
 	.is-style-outline & {
 
-		.wp-block-button__link {
-			color: #{map-deep-get($config-button, "color", "background")};
-			background: transparent;
-			border: 2px solid currentcolor;
+		color: #{map-deep-get($config-button, "color", "background")};
+		background: transparent;
+		border: 2px solid currentcolor;
 
-			&: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")};
 		}
 	}
 

+ 6 - 6
varia/style-editor.css

@@ -548,17 +548,17 @@ object {
 	background-color: indigo;
 }
 
-.wp-block-button__link.is-style-outline .wp-block-button__link,
-.is-style-outline .wp-block-button__link .wp-block-button__link {
+.wp-block-button__link.is-style-outline,
+.is-style-outline .wp-block-button__link {
 	color: blue;
 	background: transparent;
 	border: 2px solid currentcolor;
 }
 
-.wp-block-button__link.is-style-outline .wp-block-button__link:hover, .wp-block-button__link.is-style-outline .wp-block-button__link:focus, .wp-block-button__link.is-style-outline .wp-block-button__link.has-focus,
-.is-style-outline .wp-block-button__link .wp-block-button__link:hover,
-.is-style-outline .wp-block-button__link .wp-block-button__link:focus,
-.is-style-outline .wp-block-button__link .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,
+.is-style-outline .wp-block-button__link:hover,
+.is-style-outline .wp-block-button__link:focus,
+.is-style-outline .wp-block-button__link.has-focus {
 	color: indigo;
 }