diff --git a/CHANGELOG.md b/CHANGELOG.md index 68ad1a3bfe8..abf77ddd346 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Migrate `EuiEmptyPrompt`and `EuiCard` to TS ([#2387](https://github.com/elastic/eui/pull/2387)) - Added Lens app `lensApp` icon ([#2389](https://github.com/elastic/eui/pull/2389)) +- Made `EuiKeyPadMenuItem` beta badge smaller ([#2388](https://github.com/elastic/eui/pull/2388)) ## [`14.3.0`](https://github.com/elastic/eui/tree/v14.3.0) diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss index 003cf808d6d..5b9b00337d8 100644 --- a/src/components/badge/beta_badge/_beta_badge.scss +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -14,15 +14,15 @@ white-space: nowrap; cursor: default; +} - // When it's just an icon, make it a circle - &.euiBetaBadge--iconOnly { - padding: 0; - width: $euiSizeL; +// When it's just an icon, make it a circle +.euiBetaBadge--iconOnly { + padding: 0; + width: $euiSizeL; - .euiBetaBadge__icon { - position: relative; - margin-top: -1px; - } + .euiBetaBadge__icon { + position: relative; + margin-top: -1px; } } diff --git a/src/components/key_pad_menu/_index.scss b/src/components/key_pad_menu/_index.scss index fa4d726dbce..127959f1402 100644 --- a/src/components/key_pad_menu/_index.scss +++ b/src/components/key_pad_menu/_index.scss @@ -1,5 +1,5 @@ // Key padis a phone like nav comprised of an svg icon and a title. -$euiKeyPadMenuSize: $euiSize * 6; +@import 'variables'; @import 'key_pad_menu'; diff --git a/src/components/key_pad_menu/_key_pad_menu.scss b/src/components/key_pad_menu/_key_pad_menu.scss index 2b9aff85e45..6e4ffd78350 100644 --- a/src/components/key_pad_menu/_key_pad_menu.scss +++ b/src/components/key_pad_menu/_key_pad_menu.scss @@ -1,7 +1,3 @@ -/** - * Dial menu is a phone like dial comprised of an svg icon and a title. - */ - /** * 1. Default to grid of 3 */ @@ -73,14 +69,13 @@ .euiKeyPadMenuItem__betaBadgeWrapper { position: absolute; - top: $euiSizeS; + top: $euiSizeXS; right: $euiSizeS; z-index: 3; // sass-lint:disable-block nesting-depth .euiKeyPadMenuItem__betaBadge:not(.euiBetaBadge--iconOnly) { - width: $euiSizeL; - padding: 0 (($euiSizeL - $euiFontSizeXS) / 1.5); /* 2 */ + padding: 0 ($euiSizeM / 2); /* 2 */ overflow: hidden; /* 2 */ letter-spacing: 3rem; /* 2 */ } @@ -89,9 +84,15 @@ } .euiKeyPadMenuItem__betaBadge { - color: $euiTextColor; + @include size($euiKeyPadMenuItemBetaBadgeSize); + line-height: $euiKeyPadMenuItemBetaBadgeSize; + color: $euiColorFullShade; background-color: tintOrShade($euiColorLightShade, 50%, 0%); box-shadow: none; + + .euiBetaBadge__icon { + @include size($euiSizeM); + } } .euiKeyPadMenuItem__icon { diff --git a/src/components/key_pad_menu/_variables.scss b/src/components/key_pad_menu/_variables.scss new file mode 100644 index 00000000000..bc25d3638c4 --- /dev/null +++ b/src/components/key_pad_menu/_variables.scss @@ -0,0 +1,2 @@ +$euiKeyPadMenuSize: $euiSize * 6 !default; +$euiKeyPadMenuItemBetaBadgeSize: $euiSize + $euiSizeXS !default;