Skip to content

Commit

Permalink
Refactor the focus rectangle.
Browse files Browse the repository at this point in the history 
This makes it easier to adjust and test other styles.
  • Loading branch information
Joen Asmussen committed Jan 23, 2020
1 parent add452f commit 1d53509
Showing 1 changed file with 95 additions and 125 deletions.
220 changes: 95 additions & 125 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/**
* Block Toolbar
*/

.block-editor-block-toolbar {
display: flex;
flex-grow: 1;
Expand All @@ -14,101 +18,107 @@
overflow: inherit;
}

// The component is born with a border, but we only need some of them.
// Borders around toolbar segments.
.components-toolbar {
border: 0;
background: none;
// IE11 has thick paddings without this.
line-height: 0;

// These margins make the buttons themselves overlap the chrome of the toolbar.
// This helps make them square, and maximize the hit area.
margin-top: -$border-width;
margin-bottom: -$border-width;

// Add a border before item groups to show as separator in the block toolbar.
// Why not a border after item groups? Because the last item is an invisible inserter,
// so we can't use last-child to consistenly hide it, and we need round corners.
// The component is born with a border, but we only need some of them.
border: 0;

// Add a border after item groups to show as separator in the block toolbar.
// Also, on Mobile the toolbar is docked to the top of the screen.
border-left: $border-width solid $light-gray-500;
border-right: $border-width solid $light-gray-500;
@include break-medium() {
border-left: $border-width solid $border-color;
border-right: $border-width solid $border-color;
}
}

// IE11 has thick paddings without this.
line-height: 0;
> :last-child,
> :last-child .components-toolbar {
border-right: none;
}

// Adapt the height of the toolbar items.
background: none;
// Toolbar buttons.
.components-button {
position: relative;

// Give all buttons extra padding to fit text.
.components-button {
padding-left: $grid-unit-20;
padding-right: $grid-unit-20;
padding-left: $grid-unit-20;
padding-right: $grid-unit-20;

// Don't show the focus inherited by the Button component.
&:focus:enabled {
box-shadow: none;
outline: none;
}

// Focus and toggle pseudo elements.
&::before {
content: "";
position: absolute;
display: block;
border-radius: $radius-block-ui;
height: 32px;
min-width: 32px;

// Position the focus rectangle.
left: $grid-unit-10;
right: $grid-unit-10;
}

svg {
position: relative;

// Center the icon inside.
margin-left: auto;
margin-right: auto;
}

// Toggled style.
&.is-pressed {
color: $white;

&::before {
background: $border-color;
}
}

// Focus style.
&:focus::before {
@include block-toolbar-button-style__focus();
}

// Ensure the icon buttons remain square.
.components-button.has-icon {
&.has-icon {
// Reduce the default padding when a button only has an icon.
padding-left: $grid-unit-10;
padding-right: $grid-unit-10;

min-width: $block-toolbar-height;
justify-content: center;

// Center the icon inside.
svg {
margin-left: auto;
margin-right: auto;
}
}

// @todo: We should extract the tabs styles to the tabs component itself
.components-button.components-tab-button {
padding-left: 0;
padding-right: 0;
&.components-tab-button {
font-weight: 500;

span {
display: inline-block;
padding-left: $grid-unit-20;
padding-right: $grid-unit-20;
padding-left: 0;
padding-right: 0;
position: relative;
}
}

.components-button.components-tab-button:first-child {
padding-left: $grid-unit-05;
span {
padding-left: $grid-unit-15;
padding-right: $grid-unit-20;
}
}

.components-button.components-tab-button:last-child {
padding-right: $grid-unit-05;
span {
padding-left: $grid-unit-20;
padding-right: $grid-unit-15;
}
}
}

// Remove the left-border on the last item in the toolbar.
> .components-toolbar:first-child,
> :first-child > .components-toolbar {
border-left: none;
}

// Add a left border and adjust the color for Top Toolbar mode.
.has-fixed-toolbar & {
box-shadow: none;
border-left: $border-width solid $light-gray-500;

.components-toolbar {
border-color: $light-gray-500;
}
}

// Size multiple sequential buttons to be optically balanced.
// Specifically, buttons in a toolbar group are not all 48px.
// Icons are 36px, as set by a 24px icon and 12px padding.
.components-toolbar div > .components-button.has-icon {
min-width: $block-toolbar-height - $grid-unit-15;
Expand All @@ -118,98 +128,58 @@
svg {
min-width: $icon-button-size-small; // This is the optimal icon size, and we size the whole button after this.
}

&::before {
left: 2px;
right: 2px;
}
}

// First and last buttons in a group have 12px outer padding, like 48px buttons.
// First button in a group.
.components-toolbar div:first-child .components-button {
min-width: $block-toolbar-height - $grid-unit-15 / 2;
padding-left: $grid-unit-15 - $border-width;
padding-right: $grid-unit-15 / 2;

&::before {
left: $grid-unit-10;
right: 2px;
}
}

// Last button in a group.
.components-toolbar div:last-child .components-button {
min-width: $block-toolbar-height - $grid-unit-15 / 2;
padding-left: $grid-unit-15 / 2;
padding-right: $grid-unit-15 - $border-width;

&::before {
left: 2px;
right: $grid-unit-10;
}
}

// Single buttons should remain 48px.
.components-toolbar div:first-child:last-child > .components-button {
min-width: $block-toolbar-height;
padding-left: $grid-unit-15;
padding-right: $grid-unit-15;
}
}


/**
* Button States
*/

.block-editor-block-toolbar .components-button {
position: relative;

// Subscript for numbered icon buttons, like headings
&[data-subscript] svg {
padding: 5px 10px 5px 0;
}

&[data-subscript]::after {
content: attr(data-subscript);
font-family: $default-font;
font-size: $default-font-size;
font-weight: 600;
line-height: 12px;
position: absolute;
right: 8px;
bottom: 10px;
}

&:not(:disabled).is-pressed[data-subscript]::after {
color: $white;
&::before {
left: $grid-unit-10;
right: $grid-unit-10;
}
}

// Don't show the focus inherited by the Button component.
&:focus:enabled {
// Add a left border and adjust the color for Top Toolbar mode.
.has-fixed-toolbar & {
box-shadow: none;
outline: none;
}

// Focus and toggle pseudo elements.
&::before {
content: "";
position: absolute;
display: block;
border-radius: $radius-block-ui;
height: 32px;
min-width: 32px;

// Why not just use "left" and "right" properties?
// Because sequential buttons such as bold, italic, etc, are not the same size.
// By creating a 100% minus left and right padding square then centering it, we
// ensure the focus style is consistent, and scales.
width: calc(100% - #{ $grid-unit-10 * 2 });
left: 50%;
transform: translateX(-50%);
}

svg {
position: relative;
}

// Toggled style.
&.is-pressed {
color: $white;
border-left: $border-width solid $light-gray-500;

&::before {
background: $border-color;
.components-toolbar {
border-color: $light-gray-500;
}
}

// Focus style.
&:focus::before {
@include block-toolbar-button-style__focus();
}
}

.block-editor-block-toolbar__slot {
Expand Down

0 comments on commit 1d53509

Please sign in to comment.