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

Clean up top toolbar to use same metrics as block toolbar #61126

Merged
merged 5 commits into from Apr 29, 2024
Merged

Clean up top toolbar to use same metrics as block toolbar #61126

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2fe78e7
Clean up top toolbar to resemble block toolbar
richtabor Apr 25, 2024
74ec7b8
undo `top: -$grid-unit` change
richtabor Apr 29, 2024
6434442
Formatting
richtabor Apr 29, 2024
1658045
Update CHANGELOG.md
richtabor Apr 29, 2024
d056313
Merge branch 'trunk' into try/clean-top-toolbar
richtabor Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 8 additions & 11 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Expand Up @@ -90,11 +90,6 @@
}
}

.block-editor-block-toolbar .components-toolbar-group,
.block-editor-block-toolbar .components-toolbar {
border-right-color: $gray-200;
}

& > .block-editor-block-toolbar {
flex-grow: initial;
width: initial;
Expand All @@ -109,14 +104,16 @@

// Parent selector dot divider
&::after {
content: "\00B7";
align-items: center;
background-color: $gray-900;
border-radius: 100%;
content: "";
display: inline-flex;
height: 2px;
position: absolute;
font-size: 16px;
right: 0;
height: $button-size-compact;
top: 0;
display: inline-flex;
align-items: center;
top: $grid-unit-20 - $border-width;
width: 2px;
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/toolbar/toolbar/style.scss
View file
Open in desktop
Expand Up @@ -84,8 +84,8 @@
// This needs specificity.
&.has-icon.has-icon {
// Reduce the default padding when a button only has an icon.
padding-left: $grid-unit-15;
padding-right: $grid-unit-15;
padding-left: $grid-unit-10;
padding-right: $grid-unit-10;
min-width: $block-toolbar-height;
}

Expand Down
10 changes: 6 additions & 4 deletions packages/editor/src/components/collapsible-block-toolbar/style.scss
View file
Open in desktop
Expand Up @@ -28,21 +28,23 @@
width: $border-width;
height: $grid-unit-30;
background-color: $gray-300;
margin-left: $grid-unit;
margin-right: $grid-unit - $border-width;
}

// Modified group borders.
.components-toolbar-group,
.components-toolbar {
border-right: none;
position: relative;

&::after {
content: "";
width: $border-width;
height: $grid-unit-30;
background-color: $gray-300;
margin-top: $grid-unit-05;
margin-left: $grid-unit;
top: $grid-unit-05;
position: absolute;
right: - $border-width;
richtabor marked this conversation as resolved.
Show resolved Hide resolved
}

& .components-toolbar-group.components-toolbar-group {
Expand All @@ -63,7 +65,7 @@
@include break-small() {
&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
position: relative;
top: -10px;
top: - $grid-unit;
richtabor marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
Expand Down