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

Jump to bottom

Polish focus styles #3401

Merged
merged 8 commits into from
Nov 14, 2017
Merged

Polish focus styles #3401

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
6f38bba
Focus style work.
Nov 7, 2017
66fa96c
Polish work on the focus styles
Nov 9, 2017
f3cf96a
Polish formatting buttons.
Nov 9, 2017
6f84959
Fix issue with block-fixed toolbar jogging the block.
Nov 9, 2017
d3bd425
Fix dropdown menus and popovers.
Nov 9, 2017
eedf7a1
Fix Chrome specific border radius regression in tabs.
Nov 9, 2017
a3b92c9
Style in-between inserter and other polish
Nov 9, 2017
3a40426
Remove word count specific style.
Nov 14, 2017
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
6 changes: 3 additions & 3 deletions blocks/inspector-controls/range-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,17 +76,17 @@

// webkit
&:focus::-webkit-slider-thumb {
box-shadow: $button-focus-style;;
@include button-style__focus-active;
}

// moz
&:focus::-moz-range-thumb {
box-shadow: $button-focus-style;;
@include button-style__focus-active;
}

// ie
&:focus::-ms-thumb {
box-shadow: $button-focus-style;;
@include button-style__focus-active;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion blocks/library/text-columns/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.wp-block-text-columns {
.blocks-editable__tinymce:focus {
box-shadow: $button-focus-style;
@include button-style__focus-active;
}
}
7 changes: 2 additions & 5 deletions components/autocomplete/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@

.components-autocomplete__result.components-button {
margin-bottom: 0;
border: 1px solid transparent;
font-family: $default-font;
font-size: $default-font-size;
color: $dark-gray-500;
Expand All @@ -28,12 +27,10 @@
text-align: left;

&.is-selected {
box-shadow: none;
color: $dark-gray-500;
border-color: $dark-gray-500;
@include button-style__focus-active;
}

&:hover {
color: $blue-medium-500;
@include button-style__hover;
}
}
8 changes: 2 additions & 6 deletions components/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
outline: none;
text-decoration: none;
margin: 0;
border-radius: 0;

&:active {
color: currentColor;
Expand All @@ -18,11 +19,6 @@
}

&:focus {
box-shadow: $button-focus-style;
outline: none;
}

&:active:focus {
box-shadow: none;
@include button-style__focus-active;
}
}
14 changes: 1 addition & 13 deletions components/dropdown-menu/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,25 +54,13 @@

.components-dropdown-menu__menu-item {
width: 100%;
margin-bottom: 3px;
padding: 6px;
background: none;
border: 1px solid transparent;
border-radius: 0;
outline: none;
color: $dark-gray-500;
cursor: pointer;

&:hover,
&:focus,
&:not(:disabled):hover {
box-shadow: none;
color: $dark-gray-500;
border-color: $dark-gray-500;
}

.dashicon {
margin-right: 5px;
margin-right: 8px;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion components/icon-button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
}

&:not( :disabled ):hover {
color: $blue-medium-500;
@include button-style__hover;
}
}
4 changes: 0 additions & 4 deletions components/popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,6 @@
background: $white;
min-width: 240px;

&:focus {
box-shadow: $button-focus-style;
}

.components-popover.is-top & {
bottom: 100%;
}
Expand Down
77 changes: 39 additions & 38 deletions components/toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,57 +39,23 @@ div.components-toolbar {
align-items: flex-end;
margin: 0;
padding: 3px;
background: none;
outline: none;
color: $dark-gray-500;
cursor: pointer;
position: relative;
width: $icon-button-size;
height: $icon-button-size;

&:hover,
/* the ":not(:disabled)" is needed to make it specific enough */
&:hover:not(:disabled),
&:focus {
color: $dark-gray-500;
outline: none;
box-shadow: none;
}

&.is-active,
&.is-active:hover {
color: $white;
}

&:disabled {
cursor: default;
}

&> svg {
border: 1px solid transparent;
padding: 4px;
& > svg {
padding: 5px;
box-sizing: content-box;
border-radius: $button-style__radius-roundrect;
}

&:hover > svg,
&:focus > svg {
color: $dark-gray-500;
}

&:not(:disabled) {
&.is-active > svg,
&:hover > svg,
&:focus > svg {
border: 1px solid $dark-gray-500;
}
}

&.is-active > svg,
&.is-active:hover > svg {
background-color: $dark-gray-500;
color: $white;
}

// subscript for numbered icon buttons, like headings
&[data-subscript] svg {
padding: 4px 8px 4px 0px;
}
Expand All @@ -103,6 +69,41 @@ div.components-toolbar {
right: 6px;
bottom: 8px;
}

// special hover style
&:not(:disabled) {
&.is-active > svg,
&:hover > svg {
box-shadow: inset 0 0 0 1px $dark-gray-500;
}
}

// special active style
&.is-active > svg {
background: $dark-gray-500;
color: $white;
}

// focus style
&:focus {
outline: none;
box-shadow: none;
background: none;
}

&:focus > svg {
@include button-style__focus-active;
}
&:focus:hover > svg {
@include button-style__focus-active;
}

// active focus style
&.is-active:focus > svg {
background: $dark-gray-500;
color: $white;
box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
}
}

.components-toolbar__control .dashicon {
Expand Down
33 changes: 33 additions & 0 deletions editor/assets/stylesheets/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,3 +110,36 @@

$visual-editor-max-width-padding: $visual-editor-max-width + $block-mover-padding-visible + $block-mover-padding-visible;
$float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );

/**
* Button states and focus styles
*/

@mixin button-style__disabled {
opacity: 0.6;
cursor: default;
}

@mixin button-style__hover {
color: $dark-gray-900; // previously $blue-medium-500
}

@mixin button-style__focus-active() {
outline: none;
box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
color: $dark-gray-900;
background: $light-gray-300;
}

@mixin tab-style__focus-active() {
outline: none;
box-shadow: 0 0 0 1px $dark-gray-500;
color: $dark-gray-900;
background: $light-gray-300;
}

@mixin input-style__focus-active() {
outline: none;
box-shadow: 0 0 0 1px $dark-gray-500;
color: $dark-gray-900;
}
7 changes: 5 additions & 2 deletions editor/assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ $blue-medium-200: #BFE7F3;
$blue-medium-100: #E5F5FA;
$blue-medium-highlight: #b3e7fe;

// Alerts
/* Alerts */
$alert-yellow: #f0b849;
$alert-red: #d94f4f;
$alert-green: #4ab866;
Expand Down Expand Up @@ -62,7 +62,6 @@ $admin-sidebar-width-collapsed: 36px;
$shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
$shadow-toolbar: 0px 2px 10px rgba( $dark-gray-900, .1 ), 0px 0px 2px rgba( $dark-gray-900, .1 );
$text-editor-max-width: 760px;
$button-focus-style: 0 0 0 1px $blue-medium-400, 0 0 2px 1px $blue-medium-400;

/* Editor */
$text-editor-max-width: 760px;
Expand All @@ -77,6 +76,10 @@ $block-mover-padding-hidden: 10px;
$block-mover-padding-visible: 32px;
$block-spacing: 4px;

/* Button styles */
$button-style__radius-roundrect: 4px;
$button-style__radius-round: 50%;

/* Media Queries */

/* All media queries currently in WordPress:
Expand Down
24 changes: 7 additions & 17 deletions editor/block-switcher/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,25 +34,15 @@
}

.editor-block-switcher__menu-item {
color: $dark-gray-500;
display: flex;
align-items: center;
width: 100%;
margin-bottom: 3px;
padding: 6px;
background: none;
border: 1px solid transparent;
outline: none;
border-radius: 0;
color: $dark-gray-500;
cursor: pointer;
text-align: left;

&:hover,
&:focus,
&:not(:disabled):hover {
box-shadow: none;
color: $dark-gray-500;
border-color: $dark-gray-500;
.editor-block-switcher__block-icon {
margin-right: 8px;
height: 20px;
}
}

.editor-block-switcher__block-icon {
margin-right: 5px;
}
1 change: 1 addition & 0 deletions editor/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

.editor-block-toolbar .editor-block-switcher {
display: inline-flex;
border-left: 1px solid $light-gray-500;
}

.editor-block-toolbar__mobile-tools {
Expand Down
3 changes: 1 addition & 2 deletions editor/components/document-outline/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,7 @@
text-align: left;

&:focus {
box-shadow: $button-focus-style;
outline: none;
@include button-style__focus-active;
}
}

Expand Down
Loading