Selaa lähdekoodia

Sketch: Update styles for buttons; see #434.

Laurel Fulford 6 vuotta sitten
vanhempi
commit
469025d7cd
2 muutettua tiedostoa jossa 21 lisäystä ja 44 poistoa
  1. 13 19
      sketch/css/blocks.css
  2. 8 25
      sketch/css/editor-blocks.css

+ 13 - 19
sketch/css/blocks.css

@@ -214,19 +214,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Buttons */
 
-.wp-block-button__link {
-	background: white;
-	color: #999999;
-}
-
 .wp-block-button .wp-block-button__link {
-	border: 3px solid #eeeeee;
-	border-radius: 3px;
 	font-family: Lato, Helvetica, Arial, sans-serif;
 	font-size: 16px;
 	font-weight: 400;
 	letter-spacing: 2px;
-	padding: 10px 14px;
+	padding: 10px 20px;
 	text-transform: uppercase;
 	-webkit-transition: all 0.3s ease-in-out;
 	-moz-transition: all 0.3s ease-in-out;
@@ -234,23 +227,24 @@ p.has-drop-cap:not(:focus)::first-letter {
 	transition: all 0.3s ease-in-out;
 }
 
-.wp-block-button__link.has-text-color {
-	border-color: currentColor;
+.wp-block-button__link,
+.wp-block-button__link:visited {
+	background: #999999;
+	color: #fff;
 }
 
-.wp-block-button__link:hover,
-.wp-block-button__link:not(.has-text-color):hover,
-.wp-block-button__link:focus,
-.wp-block-button__link:not(.has-text-color):focus {
-	border-color: #f68060;
-	color: #f68060;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #999;
 }
 
-.wp-block-button__link:not(.has-background):hover,
-.wp-block-button__link:not(.has-background):focus {
-	background: transparent;
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-button .wp-block-button__link:active {
+	background-color: #f68060;
+	color: #fff;
 }
 
+
 /* Separator */
 
 .wp-block-separator {

+ 8 - 25
sketch/css/editor-blocks.css

@@ -392,13 +392,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	transition: all 0.3s ease-in-out;
 }
 
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-file .wp-block-file__button:focus {
-	background: transparent;
-	border-color: #f68060;
-	color: #f68060;
-}
-
 /*--------------------------------------------------------------
 4.0 Blocks - Formatting
 --------------------------------------------------------------*/
@@ -492,36 +485,26 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	background: transparent;
-	border: 3px solid #eeeeee;
-	border-radius: 3px;
-	color: #999999;
 	font-family: Lato, Helvetica, Arial, sans-serif;
 	font-size: 16px;
 	font-weight: 400;
 	letter-spacing: 2px;
 	line-height: 24px;
-	padding: 10px 14px;
+	padding: 14px 20px;
 	text-transform: uppercase;
-	-webkit-transition: all 0.3s ease-in-out;
-	-moz-transition: all 0.3s ease-in-out;
-	-o-transition: all 0.3s ease-in-out
-	transition: all 0.3s ease-in-out;
 }
 
-.wp-block-button .editor-rich-text__tinymce.mce-content-body {
-	line-height: 24px;
+.wp-block-button__link {
+	background-color: #999999;
+	color: #fff;
 }
 
-.wp-block-button .wp-block-button__link.has-text-color {
-	border-color: currentColor;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #999;
 }
 
-.wp-block-button__link:hover,
-.wp-block-button__link:focus {
-	background: transparent;
-	border-color: #f68060;
-	color: #f68060;
+.wp-block-button .editor-rich-text__tinymce.mce-content-body {
+	line-height: 24px;
 }
 
 /* Separator */