Merge pull request #4508 from WordPress/update/theme-progress-bar

Update theme progress color bar to match theme
WordPress · Jan 16, 2018 · 6c65025 · 6c65025
2 parents 64a4cf7 + 8a12860
commit 6c65025
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/editor/assets/stylesheets/_admin-schemes.scss b/editor/assets/stylesheets/_admin-schemes.scss
@@ -51,6 +51,19 @@ $scheme-sunrise__spot-color: #de823f;
 				border-color: $spot-color;
 			}
 		}
+
+		// Saving state indicators
+		.editor-post-publish-button.is-saving,
+		.editor-post-publish-button.is-saving:disabled {
+			// Yes, these need to be !important because they !important upstream too ¯\_(ツ)_/¯
+			border-color: darken( $spot-color, 10 ) darken( $spot-color, 20 ) darken( $spot-color, 20 ) !important;
+			box-shadow: 0 1px 0 darken( $spot-color, 20 ) !important;
+			text-shadow: 0 -1px 1px darken( $spot-color, 20 ), 1px 0 1px darken( $spot-color, 20 ), 0 1px 1px darken( $spot-color, 20 ), -1px 0 1px darken( $spot-color, 20 ) !important;
+
+			&:before {
+				background-image: repeating-linear-gradient( -45deg, darken( $spot-color, 20 ), darken( $spot-color, 20 ) 11px, darken( $spot-color, 10 ) 10px, darken( $spot-color, 10 ) 20px );
+			}
+		}
 	}
 }
 

diff --git a/editor/components/post-publish-button/style.scss b/editor/components/post-publish-button/style.scss
@@ -3,13 +3,13 @@
 	position: relative;
 
 	// These styles overrides the disabled state with the button primary styles
+	opacity: 1;
 	background: none !important;
-	border-color: #0073aa #006799 #006799 !important;
-	box-shadow: 0 1px 0 #006799 !important;
-	color: #fff !important;
 	text-decoration: none !important;
-	text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799 !important;
-	opacity: 1;
+	color: $white !important;
+	border-color: $blue-wordpress $blue-wordpress-700 $blue-wordpress-700 !important;
+	box-shadow: 0 1px 0 $blue-wordpress-700 !important;
+	text-shadow: 0 -1px 1px $blue-wordpress-700, 1px 0 1px $blue-wordpress-700, 0 1px 1px $blue-wordpress-700, -1px 0 1px $blue-wordpress-700 !important;
 	// End of the overriding
 
 	&:hover {