Skip to content

Navigate regions landmarks style and position improvements #8554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
afercia merged 8 commits into from
Feb 15, 2019
Merged

Navigate regions landmarks style and position improvements #8554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
01a5dd9
Improve publish panel landmark and button position.
afercia Aug 4, 2018
0368112
Use outline for navigate regions focus style.
afercia Aug 4, 2018
fe42700
Avoid conflict with publish panel animation.
afercia Aug 5, 2018
231a2ac
Make the outline animation expand inwards.
afercia Aug 6, 2018
becfa8b
CSS lint after rebase.
afercia Aug 26, 2018
e49e8cf
Rebuild outline animation.
afercia Feb 11, 2019
ff62949
Try negative z-indexes.
afercia Feb 12, 2019
58bf394
Change animation timing to 0.1s.
afercia Feb 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ $z-layers: (
".editor-block-list__layout .reusable-block-indicator": 1,
".editor-block-list__breadcrumb": 2,
".components-form-toggle__input": 1,
".components-panel__header.edit-post-sidebar__panel-tabs": 1,
".components-panel__header.edit-post-sidebar__panel-tabs": -1,
".edit-post-sidebar .components-panel": -2,
".editor-inserter__tabs": 1,
".editor-inserter__tab.is-active": 1,
".components-panel__header": 1,
Expand Down
23 changes: 19 additions & 4 deletions packages/components/src/higher-order/navigate-regions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.components-navigate-regions.is-focusing-regions [role="region"] {
// For browsers that don't support outline-offset (IE11).
&:focus::after {
content: "";
position: absolute;
Expand All @@ -8,16 +9,30 @@
right: 0;
pointer-events: none;
outline: 4px solid transparent; // Shown in Windows High Contrast mode.
animation: editor-animation__region-focus 0.2s ease-out;
animation-fill-mode: forwards;
box-shadow: inset 0 0 0 4px $blue-medium-400;
}

@supports ( outline-offset: 1px ) {
&:focus::after {
content: none;
}

&:focus {
outline-style: solid;
outline-color: $blue-medium-400;
animation: editor-animation__region-focus 0.1s ease-out;
animation-fill-mode: forwards;
}
}
}

@keyframes editor-animation__region-focus {
from {
box-shadow: inset 0 0 0 0 $blue-medium-400;
outline-width: 0;
outline-offset: 0;
}
to {
box-shadow: inset 0 0 0 4px $blue-medium-400;
outline-width: 4px;
outline-offset: -4px;
}
}
34 changes: 26 additions & 8 deletions packages/edit-post/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,11 @@
body.is-fullscreen-mode & {
top: 0;
}

// Keep it open on focus to avoid conflict with navigate-regions animation.
.is-focusing-regions & {
transform: translateX(0%);
}
}
}

Expand All @@ -202,28 +207,41 @@
}

.edit-post-toggle-publish-panel {
position: absolute;
bottom: 0;
position: fixed;
top: -9999em;
bottom: auto;
left: auto;
right: 0;
z-index: z-index(".edit-post-toggle-publish-panel");
padding: 10px 10px 10px 0;
width: $sidebar-width;
height: 0;
overflow: hidden;
&:focus-within {
height: auto;
padding: 20px 0 0 0;
background-color: $white;

&:focus {
top: auto;
bottom: 0;
}

.edit-post-toggle-publish-panel__button {
float: right;
width: auto;
height: auto;
display: block;
font-size: 14px;
font-weight: 600;
margin: 0 0 0 auto;
padding: 15px 23px 14px;
line-height: normal;
text-decoration: none;
outline: none;
background: #f1f1f1;
color: theme(secondary);

&:focus {
position: fixed;
top: auto;
right: 10px;
bottom: 10px;
left: auto;
}
}
}
2 changes: 2 additions & 0 deletions packages/edit-post/src/components/sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
max-height: calc(100vh - #{ $admin-bar-height-big + $panel-header-height });
margin-top: -1px;
margin-bottom: -1px;
position: relative;
z-index: z-index(".edit-post-sidebar .components-panel");

@include break-small() {
overflow: inherit;
Expand Down