diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss index 8e5b6e2218561d..0d044161b9e538 100644 --- a/packages/edit-post/src/components/fullscreen-mode/style.scss +++ b/packages/edit-post/src/components/fullscreen-mode/style.scss @@ -1,29 +1,32 @@ body.js.is-fullscreen-mode { - // Reset the html.wp-topbar padding - // Because this uses negative margins, we have to compensate for the height. - margin-top: -$admin-bar-height-big; - height: calc(100% + #{ $admin-bar-height-big }); - @include break-medium() { - margin-top: -$admin-bar-height; - height: calc(100% + #{ $admin-bar-height }); - } - #adminmenumain, - #wpadminbar { - display: none; - } + @include break-medium { + // Reset the html.wp-topbar padding. + // Because this uses negative margins, we have to compensate for the height. + margin-top: -$admin-bar-height-big; + height: calc(100% + #{ $admin-bar-height-big }); + @include break-medium() { + margin-top: -$admin-bar-height; + height: calc(100% + #{ $admin-bar-height }); + } - #wpcontent, - #wpfooter { - margin-left: 0; - } + #adminmenumain, + #wpadminbar { + display: none; + } + + #wpcontent, + #wpfooter { + margin-left: 0; + } - // Animations - @include edit-post__fade-in-animation(0.3s); + // Animations. + @include edit-post__fade-in-animation(0.3s); - .edit-post-header { - transform: translateY(-100%); - animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards; + .edit-post-header { + transform: translateY(-100%); + animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards; + } } } diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index e6a3c7285b8868..26d43a35d74584 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -1,7 +1,14 @@ .edit-post-fullscreen-mode-close__toolbar { - border-top: 0; - border-bottom: 0; - border-left: 0; - margin: -9px 10px -9px -10px; - padding: 9px 10px; + // Do not show the toolbar icon on small screens, + // when Fullscreen Mode is not an option in the "More" menu. + display: none; + + @include break-medium() { + display: block; + border-top: 0; + border-bottom: 0; + border-left: 0; + margin: -9px 10px -9px -10px; + padding: 9px 10px; + } } diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 987dcbfd5e14cd..6676d35676b7d2 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -20,10 +20,6 @@ position: fixed; padding: $grid-size; top: $admin-bar-height-big; - - body.is-fullscreen-mode & { - top: 0; - } } @include break-medium() { diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 3aa896af7b377b..963862b7105d73 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -167,10 +167,6 @@ left: 0; overflow: auto; - body.is-fullscreen-mode & { - top: 0; - } - @include break-medium() { top: $admin-bar-height; left: auto; diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index c33aee329d7065..cd8256823d4e75 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -17,10 +17,6 @@ height: auto; overflow: auto; -webkit-overflow-scrolling: touch; - - body.is-fullscreen-mode & { - top: $header-height; - } } @include break-medium() { @@ -41,18 +37,18 @@ margin-top: -1px; margin-bottom: -1px; - body.is-fullscreen-mode & { - max-height: calc(100vh - #{ $panel-header-height }); - @include break-small() { - max-height: none; - } - } - @include break-small() { overflow: inherit; height: auto; max-height: none; } + + @include break-medium() { + + body.is-fullscreen-mode & { + max-height: calc(100vh - #{ $panel-header-height }); + } + } } > .components-panel .components-panel__header { diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index b04479300535f9..1a5980bc5e022c 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -3,10 +3,6 @@ @include break-small() { padding-top: ($grid-size * 5) + $admin-bar-height-big; - - body.is-fullscreen-mode & { - padding-top: $grid-size * 5; - } } @include break-medium() { diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 44ad95c3351652..90fac100e15eed 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -120,10 +120,6 @@ body.block-editor-page { bottom: 0; left: 0; min-height: calc(100vh - #{ $admin-bar-height-big }); - - body.is-fullscreen-mode & { - min-height: 100vh; - } } // The WP header height changes at this breakpoint