diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss index ee17b9b3c45e3b..c352646eea0075 100644 --- a/edit-post/assets/stylesheets/_mixins.scss +++ b/edit-post/assets/stylesheets/_mixins.scss @@ -304,3 +304,16 @@ text-align: center; font-size: $default-font-size; } + +@mixin dropdown-arrow() { + content: ""; + pointer-events: none; + display: block; + position: absolute; + width: 0; + height: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 5px solid currentColor; + right: 6px; +} diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 106accd7702283..ff969d6d054061 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -13,7 +13,6 @@ import { DOWN } from '@wordpress/keycodes'; * Internal dependencies */ import IconButton from '../icon-button'; -import Dashicon from '../dashicon'; import Dropdown from '../dropdown'; import { NavigableMenu } from '../navigable-container'; @@ -61,7 +60,7 @@ function DropdownMenu( { label={ label } tooltip={ label } > - + ); } } diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 1c480cb5c6541f..da561de1797698 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -38,6 +38,17 @@ background-color: $dark-gray-500; color: $white; } + + .components-dropdown-menu__indicator { + display: inline-block; + margin-left: 10px; + + // Add a dropdown arrow indicator. + &::after { + @include dropdown-arrow(); + top: $icon-button-size-small / 2 + 1px; + } + } } } .components-dropdown-menu__popover .components-popover__content { @@ -58,11 +69,6 @@ outline: none; cursor: pointer; - .dashicon { - margin-right: 8px; - } - - &.has-separator { margin-top: 6px; position: relative; diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index 39cf29a819b857..a5c2292b01fb9f 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -36,17 +36,8 @@ // Add a dropdown arrow indicator. .editor-block-icon::after { - content: ""; - pointer-events: none; - display: block; - position: absolute; + @include dropdown-arrow(); top: $icon-button-size-small / 2 - 1px; - width: 0; - height: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; - border-top: 5px solid currentColor; - right: 6px; } .editor-block-switcher__transform {