diff --git a/src/components/dropdown/themes/dropdown-item.base.scss b/src/components/dropdown/themes/dropdown-item.base.scss index 4a03ba320..2a5369428 100644 --- a/src/components/dropdown/themes/dropdown-item.base.scss +++ b/src/components/dropdown/themes/dropdown-item.base.scss @@ -12,8 +12,7 @@ position: relative; cursor: pointer; outline-style: none; - padding-inline: pad-inline(rem(6px), rem(12px), rem(24px)); - padding-block: pad-block(rem(2px), rem(4px), rem(8px)); + padding-inline: pad-inline(rem(16px), rem(20px), rem(24px)); } :host([disabled]) { @@ -43,11 +42,11 @@ [name='prefix']::slotted(*) { --component-size: var(--dropdown-size) !important; - margin-inline-end: pad(rem(16px)); + margin-inline-end: pad(rem(8px)); } [name='suffix']::slotted(*) { --component-size: var(--dropdown-size) !important; - margin-inline-start: pad(rem(16px)); + margin-inline-start: pad(rem(8px)); } diff --git a/src/components/dropdown/themes/header.ts b/src/components/dropdown/themes/header.ts index ed4a937c4..1309a3209 100644 --- a/src/components/dropdown/themes/header.ts +++ b/src/components/dropdown/themes/header.ts @@ -2,25 +2,18 @@ import { css } from 'lit'; import type { Themes } from '../../../theming/types.js'; // Shared Styles -import { styles as fluent } from './shared/header/dropdown-header.fluent.css.js'; import { styles as indigo } from './shared/header/dropdown-header.indigo.css.js'; const light = { indigo: css` ${indigo} `, - fluent: css` - ${fluent} - `, }; const dark = { indigo: css` ${indigo} `, - fluent: css` - ${fluent} - `, }; export const all: Themes = { light, dark }; diff --git a/src/components/dropdown/themes/shared/dropdown.common.scss b/src/components/dropdown/themes/shared/dropdown.common.scss index 9a56af225..c03913369 100644 --- a/src/components/dropdown/themes/shared/dropdown.common.scss +++ b/src/components/dropdown/themes/shared/dropdown.common.scss @@ -10,6 +10,7 @@ $theme: $base; } [part='base'] { + box-shadow: var-get($theme, 'elevation'); background: var-get($theme, 'background-color'); border-radius: var-get($theme, 'border-radius'); } diff --git a/src/components/dropdown/themes/shared/dropdown.fluent.scss b/src/components/dropdown/themes/shared/dropdown.fluent.scss index 818b5ad4d..8436f1dfd 100644 --- a/src/components/dropdown/themes/shared/dropdown.fluent.scss +++ b/src/components/dropdown/themes/shared/dropdown.fluent.scss @@ -7,6 +7,3 @@ $theme: $fluent; --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); } -[part='base'] { - box-shadow: var(--ig-elevation-4); -} diff --git a/src/components/dropdown/themes/shared/dropdown.indigo.scss b/src/components/dropdown/themes/shared/dropdown.indigo.scss index 87bd6d6ce..b46623df4 100644 --- a/src/components/dropdown/themes/shared/dropdown.indigo.scss +++ b/src/components/dropdown/themes/shared/dropdown.indigo.scss @@ -8,7 +8,6 @@ $theme: $indigo; } [part='base'] { - box-shadow: var-get($theme, 'elevation'); padding: rem(3px); outline: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); outline-offset: rem(-1px); diff --git a/src/components/dropdown/themes/shared/dropdown.material.scss b/src/components/dropdown/themes/shared/dropdown.material.scss index 71cbb1e7c..7eee1cf84 100644 --- a/src/components/dropdown/themes/shared/dropdown.material.scss +++ b/src/components/dropdown/themes/shared/dropdown.material.scss @@ -6,8 +6,3 @@ $theme: $material; :host { --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); } - -[part='base'] { - box-shadow: var(--ig-elevation-8); - padding: rem(8px) 0; -} diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.common.scss b/src/components/dropdown/themes/shared/header/dropdown-header.common.scss index 6cc32d1aa..f6b6924e0 100644 --- a/src/components/dropdown/themes/shared/header/dropdown-header.common.scss +++ b/src/components/dropdown/themes/shared/header/dropdown-header.common.scss @@ -4,7 +4,9 @@ $theme: $base; :host { + height: var-get($theme, 'size'); color: var-get($theme, 'header-text-color'); - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block: pad-block(rem(2px), rem(4px), rem(8px)); + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + display: flex; + align-items: center; } diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss b/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss deleted file mode 100644 index 98588567c..000000000 --- a/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'styles/utilities' as *; - -:host { - padding: pad(rem(2px), rem(4px), rem(8px)); -} diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss b/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss index 1506a6c47..1583416e4 100644 --- a/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss +++ b/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss @@ -2,6 +2,4 @@ :host { padding-inline: pad-inline(rem(8px), rem(12px), rem(12px)); - padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); - margin-block-end: rem(2px); } diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.common.scss b/src/components/dropdown/themes/shared/item/dropdown-item.common.scss index 74ac9609a..518172aab 100644 --- a/src/components/dropdown/themes/shared/item/dropdown-item.common.scss +++ b/src/components/dropdown/themes/shared/item/dropdown-item.common.scss @@ -4,6 +4,7 @@ $theme: $material; :host { + height: var-get($theme, 'size'); border-radius: var-get($theme, 'item-border-radius'); color: var-get($theme, 'item-text-color'); diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss b/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss index 3f506c12c..14470d81d 100644 --- a/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss +++ b/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss @@ -3,10 +3,6 @@ $theme: $fluent; -:host { - padding: pad(rem(2px), rem(4px), rem(8px)); -} - :host([active]:hover) { background: var-get($theme, 'hover-item-background'); color: var-get($theme, 'hover-item-text-color'); diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss index 9b5f0d9f6..99b84b50b 100644 --- a/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss +++ b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss @@ -5,7 +5,6 @@ $theme: $indigo; :host { padding-inline: pad-inline(rem(8px), rem(12px), rem(12px)); - padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); margin-block: rem(2px); --item-icon: #{sizable(rem(14px), rem(16px), rem(16px))}; @@ -15,15 +14,6 @@ $theme: $indigo; } } -[name='prefix']::slotted(*) { - margin-inline-end: rem(8px); -} - -[name='suffix']::slotted(*) { - margin-inline-start: rem(8px); -} - -:host(:first-of-type), :host(:last-of-type) { margin-block: unset; } diff --git a/stories/dropdown.stories.ts b/stories/dropdown.stories.ts index e8ce2d9bb..ffeb603be 100644 --- a/stories/dropdown.stories.ts +++ b/stories/dropdown.stories.ts @@ -171,7 +171,13 @@ const Items = [ 'Documentation', 'Builds', ].map( - (each) => html`${each}` + (each) => + html`${each}` ); const overflowItems = Array.from(range(1, 51)).map(