Skip to content

Commit

Permalink
Polish the side dropdown.
Browse files Browse the repository at this point in the history
  • Loading branch information
Joen Asmussen committed Oct 11, 2017
1 parent df37328 commit 0d6c7fa
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 16 deletions.
16 changes: 8 additions & 8 deletions components/popover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
left: 50%;

&:before {
border: 10px solid $light-gray-500;
border: 8px solid $light-gray-500;
}

&:after {
border: 10px solid $white;
border: 8px solid $white;
}

&:before,
Expand All @@ -25,14 +25,14 @@

&.is-top {
bottom: 100%;
margin-top: -10px;
margin-top: -8px;

&:before {
bottom: -10px;
bottom: -8px;
}

&:after {
bottom: -8px;
bottom: -6px;
}

&:before,
Expand All @@ -44,14 +44,14 @@

&.is-bottom {
top: 100%;
margin-top: 10px;
margin-top: 8px;

&:before {
top: -10px;
top: -8px;
}

&:after {
top: -8px;
top: -6px;
}

&:before,
Expand Down
2 changes: 1 addition & 1 deletion editor/block-settings-menu/content.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function BlockSettingsMenuContent( { mode, onDelete, isSidebarOpened, onToggleSi
>
{ mode === 'visual'
? __( 'Edit as HTML' )
: __( 'Edit in the visual mode' )
: __( 'Edit visually' )
}
</IconButton>
<IconButton
Expand Down
19 changes: 12 additions & 7 deletions editor/block-settings-menu/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,19 @@
}
}

.editor-block-settings-menu__popover .components-popover__content {
width: 200px;
.editor-block-settings-menu__popover {
&:before,
&:after {
margin-left: 2px;
}

.components-popover__content {
width: 182px;
}
}

.editor-block-settings-menu__content {
width: 100%;
padding: 5px;
}

.editor-block-settings-menu__toggle {
Expand All @@ -36,21 +42,20 @@
.editor-block-settings-menu__control {
width: 100%;
justify-content: flex-start;
margin-bottom: 3px;
padding: 6px;
padding: 8px;
background: none;
border: 1px solid transparent;
outline: none;
border-radius: 0;
color: $dark-gray-500;
cursor: pointer;
border: 1px solid transparent;

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

.dashicon {
Expand Down

0 comments on commit 0d6c7fa

Please sign in to comment.