Browse Source

Button 2: Fix button styles; see #434.

Laurel Fulford 6 years ago
parent
commit
c161dc981b
1 changed files with 66 additions and 19 deletions
  1. 66 19
      button-2/blocks.css

+ 66 - 19
button-2/blocks.css

@@ -306,6 +306,37 @@ p.has-drop-cap:not(:focus)::first-letter {
 	display: inline-block;
 }
 
+/* File */
+
+.wp-block-file .wp-block-file__button {
+	background: #bbb;
+	border-radius: 0;
+	border: 1px dashed white;
+	box-shadow: none;
+	color: #fff;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 1;
+	margin: 5px;
+	outline: 5px solid #bbb;
+	padding: .75em 1em;
+	text-shadow: none;
+	text-transform: uppercase;
+	transition: .3s;
+}
+
+.wp-block-file .wp-block-file__button:active,
+.wp-block-file .wp-block-file__button:focus,
+.wp-block-file .wp-block-file__button:hover {
+	background: #f78769;
+	outline: 5px solid #f78769;
+	box-shadow: none;
+}
+
+.wp-block-file .wp-block-file__button {
+	margin-left: 17px;
+}
+
 /*--------------------------------------------------------------
 3.0 Blocks - Formatting
 --------------------------------------------------------------*/
@@ -331,28 +362,35 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Buttons */
 
-.wp-block-file .wp-block-file__button,
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
-	border: 1px dashed white;
-	box-shadow: none;
 	font-size: 14px;
 	font-weight: bold;
 	line-height: 1;
-	margin: 5px;
+	position: relative;
 	padding: .75em 1em;
 	text-shadow: none;
 	text-transform: uppercase;
 	transition: .3s;
 }
 
-.wp-block-file .wp-block-file__button,
-.wp-block-button__link:not(.has-background) {
+.wp-block-button__link {
 	background: #bbb;
-	outline: 5px solid #bbb;
+	color: #fff;
+}
+
+.wp-block-button__link:not(.has-background) {
+	border: 1px dashed #fff;
+	box-shadow: 0 0 0 5px #bbb;
+	margin: 0 5px;
+}
+
+.wp-block-button__link.has-background,
+.wp-block-button.is-style-outline .wp-block-button__link {
+	box-shadow: none;
+	margin: 0;
+	padding: calc( .75em + 5px ) calc( 1em + 5px );
 }
 
-.wp-block-file .wp-block-file__button,
 a.wp-block-button__link:not(.has-text-color),
 a.wp-block-button__link:not(.has-text-color):active,
 a.wp-block-button__link:not(.has-text-color):focus,
@@ -360,19 +398,27 @@ a.wp-block-button__link:not(.has-text-color):hover {
 	color: #fff;
 }
 
-.wp-block-file .wp-block-file__button:active,
-.wp-block-file .wp-block-file__button:focus,
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-button__link:not(.has-background):active,
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
+.wp-block-button.is-style-outline .wp-block-button__link {
+	border-color: currentColor;
+	border-style: dashed;
+	border-width: 1px;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #bbb;
+}
+
+.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: #f78769;
-	outline: 5px solid #f78769;
-	box-shadow: none;
+	color: #fff;
 }
 
-.wp-block-file .wp-block-file__button {
-	margin-left: 17px;
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):active,
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus,
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
+	box-shadow: 0 0 0 5px #f78769;
 }
 
 /* Seperator */
@@ -424,6 +470,7 @@ hr.wp-block-separator {
 .wp-block-latest-posts.is-grid {
 	margin: 0;
 }
+
 /*--------------------------------------------------------------
 6.0 Blocks - Colors
 --------------------------------------------------------------*/