Skip to content

Commit

Permalink
Polish the header a bit
Browse files Browse the repository at this point in the history
- Normalize the margins between items
- Tweak the alignment and size of the publish button
- Make the Settings cog have a background when toggled, and match the size of the publish button
  • Loading branch information
Joen Asmussen authored and youknowriad committed Oct 5, 2017
1 parent 97e66c3 commit a89801b
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions editor/header/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -94,3 +94,37 @@
display: inline-flex;
align-items: center;
}

.editor-mode-switcher {
margin-left: $item-spacing;
}

.editor-header__left .components-button {
margin-right: $item-spacing;
}

.editor-header .components-button {
border-radius: 3px;

&.is-toggled {
color: $white;
}

// put the gray background on a separate layer, so as to match the size of the publish button (34px)
&.is-toggled::before {
content: "";
border-radius: 3px;
position: absolute;
z-index: -1;
background: $dark-gray-500;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
}

&.editor-publish-button {
height: 33px;
line-height: 32px;
}
}

0 comments on commit a89801b

Please sign in to comment.