Penscratch 2: Update styles for buttons; see #434.

penscratch-2/css/blocks.css

@@ -196,39 +196,46 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Buttons */
 
-.wp-block-button .wp-block-button__link:not(.has-text-color) {
+.wp-block-button .wp-block-button__link {
+	cursor: pointer;
+	border: 1px solid #ccc;
+	border-color: #ccc #ccc #bbb #ccc;
+	-webkit-appearance: button;
+}
+
+.wp-block-button__link {
+	background: #e6e6e6;
 	color: rgba(0, 0, 0, .8);
 }
 
-.wp-block-button .wp-block-button__link:not(.has-background) {
+.wp-block-button__link:not(.has-background) {
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05);
 	/* Corrects inability to style clickable 'input' types in iOS */
 	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
 	/* Improves usability and consistency of cursor style between image-type 'input' and others */
 }
 
-.wp-block-button .wp-block-button__link {
-	cursor: pointer;
-	background: #e6e6e6;
-	border-radius: 3px;
-	border: 1px solid #ccc;
-	border-color: #ccc #ccc #bbb #ccc;
-	-webkit-appearance: button;
+.is-style-outline .wp-block-button__link {
+	border: 1px solid currentColor;
 }
 
-.wp-block-button .wp-block-button__link.has-background:hover {
-	opacity: 0.85;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: rgba(0, 0, 0, .8);
 }
 
-.wp-block-button .wp-block-button__link:not(.has-background):hover {
+.entry-content .wp-block-button .wp-block-button__link:hover {
+	background: #e6e6e6;
 	border-color: #ccc #bbb #aaa #bbb;
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 15px 17px rgba(255, 255, 255, .8), inset 0 -5px 12px rgba(0, 0, 0, .02);
+	color: rgba(0, 0, 0, .8);
 }
 
-.wp-block-button .wp-block-button__link:not(.has-background):focus,
-.wp-block-button .wp-block-button__link:not(.has-background):active {
+.entry-content .wp-block-button .wp-block-button__link:focus,
+.entry-content .wp-block-button .wp-block-button__link:active {
+	background: #e6e6e6;
 	border-color: #aaa #bbb #bbb #bbb;
 	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 2px 5px rgba(0, 0, 0, .15);
+	color: rgba(0, 0, 0, .8);
 }
 
 /* Separator */
@@ -295,7 +302,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .has-dark-green-background-color,
-.has-dark-green-background-color:hover.
+.has-dark-green-background-color:hover,
 .has-dark-green-background-color:focus,
 .has-dark-green-background-color:active,
 .has-dark-green-background-color:visited {
@@ -311,7 +318,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .has-dark-gray-background-color,
-.has-dark-gray-background-color:hover.
+.has-dark-gray-background-color:hover,
 .has-dark-gray-background-color:focus,
 .has-dark-gray-background-color:active,
 .has-dark-gray-background-color:visited {
@@ -327,7 +334,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .has-medium-gray-background-color,
-.has-medium-gray-background-color:hover.
+.has-medium-gray-background-color:hover,
 .has-medium-gray-background-color:focus,
 .has-medium-gray-background-color:active,
 .has-medium-gray-background-color:visited {
@@ -343,7 +350,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .has-light-gray-background-color,
-.has-light-gray-background-color:hover.
+.has-light-gray-background-color:hover,
 .has-light-gray-background-color:focus,
 .has-light-gray-background-color:active,
 .has-light-gray-background-color:visited {
@@ -359,7 +366,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .has-white-background-color,
-.has-white-background-color:hover.
+.has-white-background-color:hover,
 .has-white-background-color:focus,
 .has-white-background-color:active,
 .has-white-background-color:visited {

penscratch-2/css/editor-blocks.css

@@ -409,20 +409,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	/* Improves usability and consistency of cursor style between image-type 'input' and others */
 }
 
-.wp-block-file .wp-block-file__button:hover {
-	border-color: #ccc #bbb #aaa #bbb;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 15px 17px rgba(255, 255, 255, .8), inset 0 -5px 12px rgba(0, 0, 0, .02);
-	color: rgba(0, 0, 0, .8);
-}
-
-
-.wp-block-file .wp-block-file__button:focus,
-.wp-block-file .wp-block-file__button:active {
-	border-color: #aaa #bbb #bbb #bbb;
-	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 2px 5px rgba(0, 0, 0, .15);
-}
-
-
 /*--------------------------------------------------------------
 4.0 Blocks - Formatting
 --------------------------------------------------------------*/
@@ -510,40 +496,30 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Buttons */
 
-.wp-block-button .wp-block-button__link,
-.wp-block-button .wp-block-button__link:visited {
-	border-radius: 3px;
+.wp-block-button .wp-block-button__link {
 	background: #e6e6e6;
 	border: 1px solid #ccc;
 	border-color: #ccc #ccc #bbb #ccc;
 	color: rgba(0, 0, 0, .8);
 	font-size: 18px;
 	line-height: 24px;
+	padding: 12px 24px;
 }
 
-.wp-block-button .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link:not(.has-background):visited {
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05);
-	/* Corrects inability to style clickable 'input' types in iOS */
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
-	/* Improves usability and consistency of cursor style between image-type 'input' and others */
+.is-style-outline .wp-block-button__link {
+	border: 1px solid currentColor;
+	background: transparent;
 }
 
-.wp-block-button .wp-block-button__link:hover {
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
 	color: rgba(0, 0, 0, .8);
 }
 
-.wp-block-button .wp-block-button__link:not(.has-background):hover {
-	background: #e6e6e6;
-	border-color: #ccc #bbb #aaa #bbb;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 15px 17px rgba(255, 255, 255, .8), inset 0 -5px 12px rgba(0, 0, 0, .02);
-}
-
-.wp-block-button .wp-block-button__link:not(.has-background):focus,
-.wp-block-button .wp-block-button__link:not(.has-background):active {
-	background: #e6e6e6;
-	border-color: #aaa #bbb #bbb #bbb;
-	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 2px 5px rgba(0, 0, 0, .15);
+.wp-block-button .wp-block-button__link:not(.has-background) {
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05);
+	/* Corrects inability to style clickable 'input' types in iOS */
+	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
+	/* Improves usability and consistency of cursor style between image-type 'input' and others */
 }
 
 /* Separator */