Browse Source

Shoreditch: Update button block styles to respect rounded, squared and outline styles. See #434.

Laurel Fulford 6 years ago
parent
commit
c5269ac1bd
2 changed files with 18 additions and 28 deletions
  1. 8 9
      shoreditch/css/blocks.css
  2. 10 19
      shoreditch/css/editor-blocks.css

+ 8 - 9
shoreditch/css/blocks.css

@@ -366,8 +366,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .wp-block-button .wp-block-button__link {
-	border: 0;
-	border-radius: 5em;
 	box-shadow: none;
 	font-size: 13px;
 	font-size: 0.8125rem;
@@ -378,15 +376,16 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-transform: uppercase;
 }
 
-.wp-block-button__link:hover,
-.wp-block-button__link:focus {
-	background: #2c313f;
-	outline: none;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #3e69dc;
 }
 
-.wp-block-button__link.has-background:hover,
-.wp-block-button__link.has-background:focus {
-	opacity: 0.8;
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus {
+	background: #2c313f;
+	border-color: #2c313f;
+	color: #fff;
+	outline: none;
 }
 
 @media (min-width: 768px) {

+ 10 - 19
shoreditch/css/editor-blocks.css

@@ -399,8 +399,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-decoration: underline;
 }
 
-.wp-block-file .wp-block-file__button,
-.wp-block-file .wp-block-file__button:visited {
+.wp-block-file .wp-block-file__button {
 	background: #3e69dc;
 	border: 0;
 	border-radius: 5em;
@@ -414,15 +413,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-transform: uppercase;
 }
 
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-file .wp-block-file__button:focus {
-	background: #2c313f;
-	outline: none;
-}
-
 @media (min-width: 768px) {
-	.wp-block-file .wp-block-file__button,
-	.wp-block-file .wp-block-file__button:visited {
+	.wp-block-file .wp-block-file__button {
 		font-size: 16px;
 	}
 }
@@ -526,11 +518,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Buttons */
 
-.wp-block-button .wp-block-button__link {
+.wp-block-button__link {
 	background: #3e69dc;
-	border: 0;
-	border-radius: 5em;
 	color: #fff;
+}
+
+.wp-block-button .wp-block-button__link {
 	font-size: 13px;
 	font-size: 0.8125rem;
 	font-weight: bold;
@@ -540,14 +533,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-transform: uppercase;
 }
 
-.wp-block-button .editor-rich-text__tinymce.mce-content-body {
-	line-height: 22.15px;
+.is-style-outline .wp-block-button__link {
+	color: #3e69dc;
 }
 
-.wp-block-button__link:hover,
-.wp-block-button__link:focus {
-	background: #2c313f;
-	outline: none;
+.wp-block-button .editor-rich-text__tinymce.mce-content-body {
+	line-height: 22.15px;
 }
 
 @media (min-width: 768px) {