Skip to content

Commit

Permalink
Fix issue with unified toolbar not fitting (#10990)
Browse files Browse the repository at this point in the history
* Fix issue with unified toolbar not fitting

Fixes #10959.

This PR fixes an issue where at certain viewport widths, there wouldn't be room for the unified toolbar between the icons on the left, and the buttons on the right, in the editor bar. It does so by:

- Reducing the padding between toolbar segments
- Introducing a new breakpoint, xlarge (1080px), that allows the toolbar to stay in the editor bar for longer, before it stacks.

* Revert to fullheight separators.
  • Loading branch information
jasmussen authored Oct 25, 2018
1 parent e682faa commit 4b77281
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 3 deletions.
2 changes: 2 additions & 0 deletions assets/stylesheets/_breakpoints.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
// Most used breakpoints
$break-huge: 1440px;
$break-wide: 1280px;
$break-xlarge: 1080px;
$break-large: 960px; // admin sidebar auto folds
$break-large: 960px; // admin sidebar auto folds
$break-medium: 782px; // adminbar goes big
$break-small: 600px;
Expand Down
6 changes: 6 additions & 0 deletions assets/stylesheets/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@
}
}

@mixin break-xlarge() {
@media (min-width: #{ ($break-xlarge) }) {
@content;
}
}

@mixin break-large() {
@media (min-width: #{ ($break-large) }) {
@content;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
}

// Move toolbar into top Editor Bar.
@include break-large {
@include break-xlarge {
padding-left: $grid-size;
position: static;
left: auto;
Expand All @@ -64,11 +64,11 @@
}

.editor-block-toolbar {
margin: -9px 0;
margin: -($grid-size + $border-width) 0;
}

.editor-block-toolbar .components-toolbar {
padding: 9px;
padding: ($grid-size + $border-width + $border-width) $grid-size-small ($grid-size + $border-width);
}
}
}

0 comments on commit 4b77281

Please sign in to comment.