Browse Source

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

Laurel Fulford 6 years ago
parent
commit
6ba3f2e0a5
2 changed files with 23 additions and 62 deletions
  1. 14 20
      intergalactic-2/blocks.css
  2. 9 42
      intergalactic-2/editor-blocks.css

+ 14 - 20
intergalactic-2/blocks.css

@@ -306,45 +306,39 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
 	font-size: 18px;
 	font-weight: bold;
 	line-height: 1;
-	padding: .75em;
+	padding: .75em 1.25em;
 	cursor: pointer;
 	-webkit-transition: .3s all ease-in-out;
 	   -moz-transition: .3s all ease-in-out;
 			transition: .3s all ease-in-out;
 	text-transform: uppercase;
-	border: 2px solid currentColor;
-	box-shadow: none;
-	text-shadow: none;
 }
 
-.wp-block-button__link {
-	background: transparent;
-	border: 2px solid #222;
-	color: #222;
-}
-
-.wp-block-button__link:active,
-.wp-block-button__link:focus,
-.wp-block-button__link:hover {
+.wp-block-button__link,
+.wp-block-button__link:visited {
 	background: #222;
-	border: 2px solid #222;
 	color: #fff;
 }
 
-.wp-block-button__link.has-text-color {
+.is-style-outline .wp-block-button__link {
+	background-color: transparent;
 	border-color: currentColor;
 }
 
-.wp-block-button__link.has-background:active,
-.wp-block-button__link.has-background:focus,
-.wp-block-button__link.has-background:hover {
-	border-color: currentColor;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #222;
+}
+
+.wp-block-button__link:active,
+.wp-block-button__link:focus,
+.wp-block-button__link:hover {
+	opacity: 0.8;
 }
 
+
 /* Seperator */
 
 hr.wp-block-separator {

+ 9 - 42
intergalactic-2/editor-blocks.css

@@ -71,7 +71,7 @@
 	font-family: Lato, Helvetica, sans-serif;
 	font-weight: 700;
 	font-size: 30px;
-	text-align: center;	
+	text-align: center;
 }
 
 .wp-block.editor-post-title__block {
@@ -507,17 +507,6 @@
 	text-shadow: none;
 }
 
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-file .wp-block-file__button:focus {
-	-webkit-transition: .3s all ease-in-out;
-	   -moz-transition: .3s all ease-in-out;
-			transition: .3s all ease-in-out;
-	color: #fff;
-	border-color: #222;
-	background: #222;
-	box-shadow: none;
-}
-
 /*--------------------------------------------------------------
 4.0 Blocks - Formatting
 --------------------------------------------------------------*/
@@ -659,53 +648,31 @@
 
 /* Buttons */
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
 	font-size: 18px;
 	font-weight: bold;
-	line-height: 1;
-	padding: .75em;
+	line-height: 1.25;
+	padding: .75em 1em;
 	cursor: pointer;
 	-webkit-transition: .3s all ease-in-out;
 	   -moz-transition: .3s all ease-in-out;
 			transition: .3s all ease-in-out;
 	text-transform: uppercase;
-	border: 2px solid currentColor;
-	box-shadow: none;
-	text-shadow: none;
 }
 
-.wp-block-button .wp-block-button__link:active,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
+.wp-block-button__link {
+	background: #222;
+	color: #fff;
 }
 
-.wp-block-button__link:not(.has-background) {
+.is-style-outline .wp-block-button__link {
 	background: transparent;
-	border: 2px solid #222;
+	border-color: currentColor;
 }
 
-.wp-block-button__link:not(.has-background):focus {
-	border-color: #222;
-	background: #222;
-}
-
-.wp-block-button__link:not(.has-text-color) {
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
 	color: #222;
 }
 
-.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;
-}
-
-.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;
-	border: 2px solid #222;
-}
-
 /* Separator */
 
 .wp-block-separator {