Skip to content
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

Try using left borders for hover + selection states (Alternate) #14197

Closed
wants to merge 16 commits into from
+95 −33
Closed

Try using left borders for hover + selection states (Alternate) #14197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
62e49bd
Update hover states to use $dark-gray-300
kjellr Mar 1, 2019
77fc431
Clean up breadcrumb position.
kjellr Mar 1, 2019
0bf8fd5
Adjust post title & block outline colors
kjellr Mar 1, 2019
7354a90
Add a dark bottom border for the toolbar, to match the block borders.
kjellr Mar 1, 2019
b0d22a8
Adjust toolbar so that it includes a darker border all around.
kjellr Mar 1, 2019
9bdd017
Adjust border color for the permalink box.
kjellr Mar 1, 2019
390342c
Correct breadcrumb position for left/right floated blocks.
kjellr Mar 1, 2019
75d7500
Use dark border on select for reusable blocks.
kjellr Mar 1, 2019
f3712f2
Use dark border on blocks with warnings.
kjellr Mar 1, 2019
f225924
Add a short transition to the hover border.
kjellr Mar 4, 2019
e6aeb07
Add a slight transition to the post title hover border.
kjellr Mar 4, 2019
5b1e3ad
Remove delay on block movers animation, sync up with the block hover …
kjellr Mar 5, 2019
55b41d3
Clean up breadcrumb position on left/right alignments.
kjellr Mar 5, 2019
70f4283
Clean up toolbar colors for left/right-aligned blocks on mobile.
kjellr Mar 5, 2019
7284160
Merge branch 'master' into left-block-borders-alternate
kjellr Mar 6, 2019
8ad0130
Merge branch 'master' into left-block-borders-alternate
kjellr Mar 11, 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
66 changes: 44 additions & 22 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@
content: "";
position: absolute;
outline: $border-width solid transparent;
transition: outline 0.1s linear;
transition: outline 0.1s linear, box-shadow 0.15s linear;
pointer-events: none;

// Go edge-to-edge on mobile.
Expand All @@ -130,16 +130,16 @@
// Selected style.
&.is-selected > .editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
outline: $border-width solid $dark-opacity-light-500;
outline: $border-width solid $dark-opacity-200;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
outline-color: $light-opacity-300;
}
}

// Hover style.
&.is-hovered > .editor-block-list__block-edit::before {
outline: $border-width solid theme(outlines);
box-shadow: -$border-width 0 0 0 $dark-gray-300;
}

// Spotlight mode.
Expand Down Expand Up @@ -213,7 +213,7 @@
}
}

&.has-warning:not(.is-hovered) .editor-block-list__block-edit::before {
&.has-warning:not(.is-hovered):not(.is-selected) .editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
outline-color: $dark-opacity-light-500;

Expand All @@ -222,6 +222,10 @@
}
}

&.has-warning.is-hovered .editor-block-list__block-edit::before {
outline: $border-width solid $dark-opacity-light-500;
}

&.has-warning .editor-block-list__block-edit::after {
content: "";
position: absolute;
Expand Down Expand Up @@ -268,6 +272,14 @@
}
}

&.is-reusable.is-selected > .editor-block-list__block-edit::before {
outline-color: $dark-opacity-200;

.is-dark-theme & {
outline-color: $light-opacity-300;
}
}

// Alignments
&[data-align="left"],
&[data-align="right"] {
Expand Down Expand Up @@ -296,8 +308,14 @@
// Position toolbar better on mobile.
.editor-block-contextual-toolbar {
width: auto;
border-bottom: $border-width solid $light-gray-500;
border-bottom: $border-width solid $dark-opacity-200;
border-left: $border-width solid $dark-opacity-200;
bottom: auto;

> .editor-block-toolbar > *:last-child .components-toolbar {
box-shadow: none;
border-right: $border-width solid $dark-opacity-200;
}
}
}

Expand Down Expand Up @@ -389,9 +407,9 @@
float: left;
}

// Position hover label on the right
// Position hover label on the left
> .editor-block-list__breadcrumb {
right: -$border-width;
left: -$border-width;
}

// Hide mover until wide breakpoints, or it might be covered by toolbar
Expand Down Expand Up @@ -424,9 +442,9 @@

// Full-wide
&[data-align="full"] {
// Position hover label on the right for the top level block.
// Position hover label on the left for the top level block.
> .editor-block-list__block-edit > .editor-block-list__breadcrumb {
right: 0;
left: 0;
}

// Compensate for main container padding and subtract border.
Expand Down Expand Up @@ -595,7 +613,7 @@
margin-top: $block-toolbar-height;
margin-right: -$block-padding;
margin-left: -$block-padding;
border-top: $border-width solid $light-gray-500;
border-top: $border-width solid $dark-opacity-200;
height: $block-toolbar-height;

@include break-small() {
Expand Down Expand Up @@ -707,7 +725,7 @@

// Hide both the button until hovered.
opacity: 0;
transition: opacity 0.1s linear 0.1s;
transition: opacity 0.15s linear;

&:hover,
&.is-visible {
Expand Down Expand Up @@ -796,7 +814,7 @@
right: -$block-padding;

// Paint the borders on the toolbar itself on mobile.
border-top: $border-width solid $light-gray-500;
border-top: $border-width solid $dark-opacity-200;
.components-toolbar {
border-top: none;
border-bottom: none;
Expand All @@ -805,8 +823,8 @@
@include break-small() {
border-top: none;
.components-toolbar {
border-top: $border-width solid $light-gray-500;
border-bottom: $border-width solid $light-gray-500;
border-top: $border-width solid $dark-opacity-200;
border-bottom: $border-width solid $dark-opacity-200;
}
}
}
Expand Down Expand Up @@ -917,9 +935,9 @@
line-height: 1;
z-index: z-index(".editor-block-list__breadcrumb");

// Position in the top right of the border.
right: -$block-padding;
top: -$block-padding - $border-width;
// Position to the top left of the border.
left: -$block-padding - $border-width;
top: ($block-padding * -2) - ($border-width * 5);

.components-toolbar {
padding: 0;
Expand All @@ -929,7 +947,7 @@
font-family: $default-font;
font-size: 11px;
padding: 4px 4px;
background: theme(outlines);
background: $dark-gray-300;
color: $white;

// Animate in
Expand All @@ -939,11 +957,15 @@
}
}

// Position the breadcrumb closer on mobile.
[data-align="left"] &,
// Remove negative left breadcrumb position for left aligned blocks.
[data-align="left"] & {
left: 0;
}

// Right-align the breadcrumb for right-aligned blocks.
[data-align="right"] & {
left: auto;
right: 0;
top: 0;
}
}

Expand Down
32 changes: 27 additions & 5 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,30 @@
overflow: auto; // Allow horizontal scrolling on mobile.
position: relative;

// Allow overflow on desktop.
@include break-small() {

// Allow overflow on desktop.
overflow: inherit;
}

// Show a left border on the parent container.
border-left: $border-width solid $light-gray-500;
// Show a left border on the parent container.
border-left: $border-width solid $dark-opacity-200;

// Use a lighter left border when the fixed toolbar is active.
.has-fixed-toolbar & {
border-left: $border-width solid $light-gray-500;
}

// Use a darker border on the right edge of the toolbar.
> *:last-child .components-toolbar {
box-shadow: none;
border-right: $border-width solid $dark-opacity-200;

// If fixed toolbar is active, use a light border.
.has-fixed-toolbar & {
border-right: $border-width solid $light-gray-500;
}
}
}

// The component is born with a border, but we only need some of them.
.components-toolbar {
Expand All @@ -20,6 +37,11 @@
border-bottom: $border-width solid $light-gray-500;

// Add a right border to show as separator in the block toolbar.
border-right: $border-width solid $light-gray-500;
box-shadow: inset (-$border-width) 0 0 0 $light-gray-500;

// Add a tiny right margin to house the inset border above.
> *:last-child {
margin-right: $border-width;
}
}
}
18 changes: 18 additions & 0 deletions packages/block-editor/src/components/warning/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,24 @@
background-color: transparent;
}

.has-warning.is-hovered & {
// Use opacity to work in various editor styles.
border-left-color: $dark-opacity-200;

.is-dark-theme & {
border-left-color: $light-opacity-300;
}
}

.has-warning.is-selected & {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-200;

.is-dark-theme & {
border-color: $light-opacity-300;
}
}

.editor-warning__message {
line-height: $default-line-height;
font-family: $default-font;
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/post-permalink/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
white-space: nowrap;

// Use opacity to work in various editor styles.
border: $border-width solid $dark-opacity-light-500;
border: $border-width solid $dark-opacity-200;
background-clip: padding-box;

// Put toolbar snugly to edge on mobile.
Expand Down
10 changes: 5 additions & 5 deletions packages/editor/src/components/post-title/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
font-family: $editor-font;
line-height: $default-line-height;
color: $dark-gray-900;
transition: border 0.1s ease-out;
transition: border 0.1s ease-out, box-shadow, 0.15s ease-out;
padding: #{ $block-padding + 5px } $block-padding;
word-break: keep-all;

Expand Down Expand Up @@ -50,17 +50,17 @@
&:not(.is-focus-mode) {
&.is-selected .editor-post-title__input {
// use opacity to work in various editor styles
border-color: $dark-opacity-light-500;
border-color: $dark-opacity-200;

.is-dark-theme & {
border-color: $light-opacity-light-500;
border-color: $light-opacity-300;
}
}
}

&:not(.is-focus-mode):not(.has-fixed-toolbar) {
&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
.editor-post-title__input:hover {
border-color: theme(outlines);
box-shadow: -$border-width 0 0 0 $dark-gray-300;
}
}

Expand Down