Browse Source

Publication: Update styles for buttons; see #434.

Laurel Fulford 6 years ago
parent
commit
9c63d8593e
2 changed files with 20 additions and 40 deletions
  1. 13 11
      publication/blocks.css
  2. 7 29
      publication/editor-blocks.css

+ 13 - 11
publication/blocks.css

@@ -312,16 +312,9 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
-	border: 0;
 	font-weight: bold;
-	padding: 6px 12px;
+	padding: 6px 18px;
 	text-transform: uppercase;
-}
-
-.wp-block-button .wp-block-button__link:active,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
 	box-shadow: none;
 }
 
@@ -330,9 +323,18 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: #fff;
 }
 
-.wp-block-button__link:active,
-.wp-block-button__link:focus,
-.wp-block-button__link:hover {
+.is-style-outline .wp-block-button__link {
+	background: transparent;
+	border-color: currentColor;
+}
+
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #ef7d0b;
+}
+
+.wp-block-button .wp-block-button__link:active,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-button .wp-block-button__link:hover {
 	background: #222;
 	color: #fff;
 }

+ 7 - 29
publication/editor-blocks.css

@@ -368,14 +368,6 @@
 	text-transform: uppercase;
 }
 
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-file .wp-block-file__button:focus,
-.wp-block-file .wp-block-file__button:active {
-	background: #222;
-	color: #fff;
-	outline: 0;
-}
-
 .rtl .wp-block-file .wp-block-file__button {
 	margin-left: 12px;
 	margin-right: 0;
@@ -722,39 +714,25 @@
 }
 
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
-	border: 0;
 	font-weight: bold;
-	padding: 6px 12px;
+	padding: 6px 18px;
 	text-transform: uppercase;
 }
 
-.wp-block-button .wp-block-button__link:active,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
-	box-shadow: none;
-}
-
-.wp-block-button__link:not(.has-background) {
+.wp-block-button__link {
 	background: #ef7d0b;
-}
-
-.wp-block-button__link:not(.has-text-color) {
 	color: #fff;
 }
 
-.wp-block-button__link:not(.has-text-color):active,
-.wp-block-button__link:not(.has-text-color):focus,
-.wp-block-button__link:not(.has-text-color):hover {
-	color: #fff;
+.is-style-outline .wp-block-button__link {
+	border-color: currentColor;
 }
 
-.wp-block-button__link:not(.has-background):active,
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
-	background: #222;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #ef7d0b;
 }
 
+
 .wp-block-button.alignleft {
 	margin-left: 0;
 }