Browse Source

Gazette: Update styles for buttons; see #434.

Laurel Fulford 6 years ago
parent
commit
c8218845e1
2 changed files with 21 additions and 21 deletions
  1. 12 6
      gazette/css/blocks.css
  2. 9 15
      gazette/css/editor-blocks.css

+ 12 - 6
gazette/css/blocks.css

@@ -134,7 +134,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Button */
 /* Button */
 
 
 .wp-block-button .wp-block-button__link {
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
 	border: 2px solid #3863c1;
 	border: 2px solid #3863c1;
 	font-family: Lato, sans-serif;
 	font-family: Lato, sans-serif;
 	font-size: 16px;
 	font-size: 16px;
@@ -150,18 +149,25 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: #fff;
 	color: #fff;
 }
 }
 
 
-.wp-block-button__link:active,
-.wp-block-button__link:focus,
-.wp-block-button__link:hover {
-	background: #fff;
+.is-style-outline .wp-block-button__link {
+	border-color: currentColor;
+}
+
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
 	color: #3863c1;
 	color: #3863c1;
-	outline: none;
 }
 }
 
 
 .wp-block-button__link.has-background.has-text-color {
 .wp-block-button__link.has-background.has-text-color {
 	border-color: currentColor;
 	border-color: currentColor;
 }
 }
 
 
+.entry-content .wp-block-button .wp-block-button__link:active,
+.entry-content .wp-block-button .wp-block-button__link:focus,
+.entry-content .wp-block-button .wp-block-button__link:hover {
+	background: #fff;
+	color: #3863c1;
+}
+
 /* Seperator */
 /* Seperator */
 
 
 .wp-block-separator:not(.is-style-wide) {
 .wp-block-separator:not(.is-style-wide) {

+ 9 - 15
gazette/css/editor-blocks.css

@@ -347,13 +347,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-transform: uppercase;
 	text-transform: uppercase;
 }
 }
 
 
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-file .wp-block-file__button:focus {
-	background: #fff;
-	color: #3863c1;
-	outline: none;
-}
-
 /*--------------------------------------------------------------
 /*--------------------------------------------------------------
 4.0 Blocks - Formatting
 4.0 Blocks - Formatting
 --------------------------------------------------------------*/
 --------------------------------------------------------------*/
@@ -481,7 +474,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 .wp-block-button .wp-block-button__link {
 .wp-block-button .wp-block-button__link {
 	background: #3863c1;
 	background: #3863c1;
 	border: 2px solid #3863c1;
 	border: 2px solid #3863c1;
-	border-radius: 0;
 	color: #fff;
 	color: #fff;
 	font-family: Lato, sans-serif;
 	font-family: Lato, sans-serif;
 	font-size: 16px;
 	font-size: 16px;
@@ -491,15 +483,17 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-transform: uppercase;
 	text-transform: uppercase;
 }
 }
 
 
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
-	background: #fff;
-	color: #3863c1;
-	outline: none;
+.wp-block-button__link.has-background.has-text-color,
+.is-style-outline .wp-block-button__link {
+	border-color: currentColor;
 }
 }
 
 
-.wp-block-button__link.has-background.has-text-color {
-	border-color: currentColor;
+.wp-block-button.is-style-outline .wp-block-button__link {
+	background: transparent;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #3863c1;
 }
 }
 
 
 .wp-block-button .editor-rich-text__tinymce.mce-content-body {
 .wp-block-button .editor-rich-text__tinymce.mce-content-body {