diff --git a/client/extensions/woocommerce/components/action-header/index.js b/client/extensions/woocommerce/components/action-header/index.js index e299066d33a722..7dbf87899f9ed6 100644 --- a/client/extensions/woocommerce/components/action-header/index.js +++ b/client/extensions/woocommerce/components/action-header/index.js @@ -53,7 +53,9 @@ class ActionHeader extends React.Component {
- + + +
{ site &&

{ site.title }

} { this.renderBreadcrumbs() } diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss index 912f01e9da47d9..9624b271348b85 100644 --- a/client/extensions/woocommerce/components/action-header/style.scss +++ b/client/extensions/woocommerce/components/action-header/style.scss @@ -11,6 +11,10 @@ color: $gray-dark; background: $white; border-bottom: 1px solid $gray-lighten-20; + position: fixed; + z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); + top: 47px; + left: 0px; @include breakpoint( ">480px" ) { padding: 8px 24px 8px 0; @@ -18,29 +22,13 @@ @include breakpoint( ">660px" ) { padding: 5px 16px; + padding-left: 0; margin: 0; - } + margin-left: 40px; - @include breakpoint( ">960px" ) { - position: fixed; - z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); - width: calc(100% - 273px); - top: 47px; - left: 273px; - } - @include breakpoint( "660px-960px" ) { - position: fixed; - z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); - width: calc(100% - 229px); - top: 47px; - left: 229px; - } - - @include breakpoint( "<660px" ) { - position: fixed; - z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); - width: 100%; - top: 47px; + .gridicons-chevron-left { + display: none; + } } } @@ -48,10 +36,6 @@ flex-grow: 0; flex-shrink: 0; min-width: 40px; - - @include breakpoint( ">660px" ) { - display: none; - } } .action-header__content { @@ -60,6 +44,10 @@ display: flex; justify-content: flex-start; + @include breakpoint( ">660px" ) { + margin-left: -32px; + } + .site-icon { margin-right: 8px; } @@ -68,6 +56,10 @@ font-size: 10px; color: $gray-darken-10; margin: 2px 0 -3px; + + a, a:hover { + color: $gray-darken-10; + } } .action-header__breadcrumbs { @@ -92,6 +84,10 @@ overflow: hidden; text-align: right; + @include breakpoint( ">660px" ) { + margin-right: 40px; + } + .action-header__actions-list { display: flex; justify-content: flex-end; diff --git a/client/extensions/woocommerce/store-sidebar/store-ground-control.js b/client/extensions/woocommerce/store-sidebar/store-ground-control.js index 7d027206732115..a357c1cef7e616 100644 --- a/client/extensions/woocommerce/store-sidebar/store-ground-control.js +++ b/client/extensions/woocommerce/store-sidebar/store-ground-control.js @@ -28,10 +28,10 @@ const StoreGroundControl = ( { site, translate } ) => { href={ backLink } aria-label={ translate( 'Go back' ) } > - +
- +
); diff --git a/client/extensions/woocommerce/style.scss b/client/extensions/woocommerce/style.scss index c0d2b95c28279d..f66da94eecbcc0 100644 --- a/client/extensions/woocommerce/style.scss +++ b/client/extensions/woocommerce/style.scss @@ -117,7 +117,6 @@ .store-sidebar__ground-control { align-items: center; - border-bottom: 1px solid darken( $sidebar-bg-color, 10% ); background-color: $white; display: flex; width: 100%; @@ -126,19 +125,60 @@ .store-sidebar__ground-control-back { flex: 0 0 auto; margin-left: 7px; - margin-right: 7px; } .store-sidebar__ground-control-site { - border-left: 1px solid darken( $sidebar-bg-color, 10% ); display: inline-block; flex-grow: 1; - min-height: 46px; + max-height: 60px; + + .site__content { + padding: 12px; + padding-left: 8px; + } + } + + @include breakpoint( ">660px" ) { + margin-top: 47px; + padding-top: 4px; + + .store-sidebar__ground-control-site { + display: none; + } + + .store-sidebar__ground-control { + padding-left: 7px; + position: fixed; + width: 100%; + top: 47px; + left: 0px; + min-height: 46px; + z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); + background: $white; + border-bottom: 1px solid $gray-lighten-20; + } + } + + @include breakpoint( "<660px" ) { + .site__title { + margin-top: 8px; + } + .site__domain { + display: none; + } } .sidebar__menu { margin-top: 0; + @include breakpoint( "<660px" ) { + border-top: 1px solid darken( $sidebar-bg-color, 10% ); + } + + @include breakpoint( ">660px" ) { + margin-top: -4px; + } + ul { li:first-child { border-top-width: 0;