Editor: Fix footer styling issues (#12078)

* Editor: Fix footer styling issues. * More footer updates. * Updates per feedback.
Automattic · Mar 15, 2017 · b61952f · b61952f
1 parent df68e07
commit b61952f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/assets/stylesheets/shared/functions/_z-index.scss b/assets/stylesheets/shared/functions/_z-index.scss
@@ -75,6 +75,7 @@ $z-layers: (
 		'.domain-suggestion.is-clickable:hover': 1,
 		'.editor-html-toolbar': 1,
 		'.thank-you-card__header': 1,
+		'.editor-action-bar .editor-status-label': 2,
 		'.is-installing .theme': 2,
 		'.reader-update-notice': 2,
 		'.people-list-item .card__link-indicator': 2,
@@ -88,6 +89,7 @@ $z-layers: (
 		'.stats-module.is-loading .module-header-title::after': 2,
 		'ul.module-content-list-item-action-submenu': 2,
 		'ul.module-content-list-item-actions': 2,
+		'.editor-word-count': 3,
 		'.site-indicator__button': 3,
 		'ul.module-content-list-item-actions.collapsed': 3,
 		'.auth__input-wrapper .gridicon': 3,

diff --git a/client/post-editor/editor-action-bar/style.scss b/client/post-editor/editor-action-bar/style.scss
@@ -11,9 +11,31 @@
 	}
 
 	.editor-status-label {
+		line-height: 1;
 		position: fixed;
-		bottom: 12px;
-		left: 16px;
+			bottom: 0px;
+			left: 8px;
+		padding: 8px;
+		margin-right: 2px;
+		background-color: rgba( $white, 0.92 );
+		text-transform: uppercase;
+		font-size: 11px;
+		line-height: 1;
+		color: lighten( $gray, 10% );
+		pointer-events: none;
+		z-index: z-index( 'root', '.editor-action-bar .editor-status-label' );
+
+		@include breakpoint( "<480px" ) {
+			display: none;
+		}
+
+		.focus-sidebar & {
+			right: 228px;
+
+			@include breakpoint( ">960px" ) {
+				right: 273px;
+			}
+		}
 	}
 }
 

diff --git a/client/post-editor/editor-word-count/style.scss b/client/post-editor/editor-word-count/style.scss
@@ -2,19 +2,22 @@
 	position: fixed;
 		right: 0;
 		bottom: 0;
-	padding: 8px;
+	padding: 6px 8px 8px;
 	background-color: rgba( $white, 0.92 );
 	text-transform: uppercase;
 	font-size: 11px;
 	line-height: 1;
 	color: lighten( $gray, 10% );
 	pointer-events: none;
+	z-index: z-index( 'root', '.editor-word-count' );
 
 	.focus-sidebar & {
-		right: 272px;
+		right: 273px;
 	}
 
-	@include breakpoint( ">960px" ) {
-		padding: 16px;
+	@include breakpoint( "<960px" ) {
+		.focus-sidebar & {
+			right: 229px;
+		}
 	}
 }