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 a darker selected block outline with animation #13700

Closed
wants to merge 28 commits into from
Closed

Try a darker selected block outline with animation #13700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
39bc785
merge from upstream
Oct 30, 2018
e15b05f
Merge branch 'master' of github.com:WordPress/gutenberg
Oct 31, 2018
f9856ed
Merge branch 'master' of github.com:WordPress/gutenberg
Oct 31, 2018
0395ac4
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 5, 2018
9eca9bf
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 7, 2018
2297665
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 8, 2018
246370f
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 12, 2018
dfd129a
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 12, 2018
e730af9
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 13, 2018
277ff12
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 13, 2018
b0ec06c
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 13, 2018
8792af3
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 16, 2018
de9d101
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 19, 2018
cc87beb
local save
Nov 28, 2018
d7d5a8d
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 28, 2018
cc4e6ca
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 30, 2018
b9e444f
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 30, 2018
2cf001e
darked focus state outline for block lists
Nov 30, 2018
3dc2f01
Merge branch 'master' of github.com:WordPress/gutenberg
Nov 30, 2018
94b2f52
Merge branch 'fix/issue-12254-make-selected-block-outline-darker'
Nov 30, 2018
09400da
Merge branch 'master' of github.com:WordPress/gutenberg
Dec 3, 2018
9446bc2
Merge branch 'master' of github.com:WordPress/gutenberg
Dec 3, 2018
bf8a16d
Merge branch 'master' of github.com:WordPress/gutenberg
Dec 5, 2018
4975c38
Merge branch 'master' into fix/issue-12254-make-selected-block-outlin…
Dec 5, 2018
e2bb065
Make selected block outline darker (with animation)
kjellr Feb 6, 2019
619b6f7
Remove border animation when top toolbar is active.
kjellr Feb 7, 2019
037e541
Apply fade animation to the page title.
kjellr Feb 7, 2019
9e7cc57
Merge branch 'master' into try/darker-selected-outline-with-animation
kjellr Feb 26, 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
20 changes: 20 additions & 0 deletions assets/stylesheets/_animations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,23 @@
animation: edit-post__fade-in-animation $speed ease-out $delay;
animation-fill-mode: forwards;
}

/**
* Outline animation
*/

@keyframes outline-fade-animation {
from {
outline-color: $dark-opacity-200;
border-color: $dark-opacity-200;
}
to {
outline-color: $dark-opacity-light-500;
border-color: $dark-opacity-light-500;
}
}

@mixin outline-fade-animation($speed: 0.2s, $delay: 1s) {
animation: outline-fade-animation $speed ease-out $delay;
animation-fill-mode: forwards;
}
6 changes: 6 additions & 0 deletions packages/edit-post/src/components/header/header-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@
border-bottom: none;
}

.editor-block-toolbar,
.components-toolbar {
border-color: $dark-opacity-light-500;
animation: none;
}

.is-sidebar-opened & {
display: none;
}
Expand Down
18 changes: 11 additions & 7 deletions packages/editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,11 @@
// 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;
@include outline-fade-animation();

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

Expand Down Expand Up @@ -296,7 +297,7 @@
// 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;
bottom: auto;
}
}
Expand Down Expand Up @@ -595,8 +596,9 @@
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 outline-fade-animation();

@include break-small() {
display: none;
Expand Down Expand Up @@ -796,7 +798,9 @@
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;
@include outline-fade-animation();

.components-toolbar {
border-top: none;
border-bottom: none;
Expand All @@ -805,8 +809,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
11 changes: 7 additions & 4 deletions packages/editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,18 @@
}

// Show a left border on the parent container.
border-left: $border-width solid $light-gray-500;
border-left: $border-width solid $dark-opacity-200;
@include outline-fade-animation();

// The component is born with a border, but we only need some of them.
.components-toolbar {
border: 0;
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;

// Add a right border to show as separator in the block toolbar.
border-right: $border-width solid $light-gray-500;
border-right: $border-width solid $dark-opacity-200;

@include outline-fade-animation();
}
}
3 changes: 2 additions & 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,8 @@
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;
@include outline-fade-animation();
background-clip: padding-box;

// Put toolbar snugly to edge on mobile.
Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -50,7 +50,8 @@
&: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;
@include outline-fade-animation();

.is-dark-theme & {
border-color: $light-opacity-light-500;
Expand Down