diff --git a/packages/clay-css/src/scss/components/_dropdowns.scss b/packages/clay-css/src/scss/components/_dropdowns.scss index 575a3283d9..5cf67025ad 100644 --- a/packages/clay-css/src/scss/components/_dropdowns.scss +++ b/packages/clay-css/src/scss/components/_dropdowns.scss @@ -424,6 +424,10 @@ // Dropdown Menu Width +.dropdown-menu-width-shrink { + @include clay-dropdown-menu-variant($dropdown-menu-width-shrink); +} + .dropdown-menu-width-full { @include clay-css($dropdown-menu-width-full); } diff --git a/packages/clay-css/src/scss/variables/_dropdowns.scss b/packages/clay-css/src/scss/variables/_dropdowns.scss index 86ebdf810e..985c290e6c 100644 --- a/packages/clay-css/src/scss/variables/_dropdowns.scss +++ b/packages/clay-css/src/scss/variables/_dropdowns.scss @@ -218,6 +218,23 @@ $dropdown-item-base: map-deep-merge( c-kbd-inline: ( line-height: $dropdown-font-size * $line-height-base, ), + '&.autofit-row': ( + padding-left: 1rem, + padding-right: 1rem, + autofit-col: ( + padding-left: 0.25rem, + padding-right: 0.25rem, + ), + ), + autofit-row: ( + margin-left: 0.25rem, + margin-right: 0.25rem, + width: auto, + autofit-col: ( + padding-left: 0.25rem, + padding-right: 0.25rem, + ), + ), ), $dropdown-item-base ); @@ -736,7 +753,21 @@ $dropdown-full-wide-header-spacer-y: 20px !default; $dropdown-wide-width: 500px !default; -// Dropdown Menu Width +// .dropdown-menu-width-shrink + +$dropdown-menu-width-shrink: () !default; +$dropdown-menu-width-shrink: map-deep-merge( + ( + min-width: 0, + white-space: nowrap, + dropdown-item: ( + white-space: inherit, + ), + ), + $dropdown-menu-width-shrink +); + +// .dropdown-menu-width-full $dropdown-menu-width-full: () !default; $dropdown-menu-width-full: map-merge( @@ -750,6 +781,8 @@ $dropdown-menu-width-full: map-merge( $dropdown-menu-width-full ); +// .dropdown-menu-width-sm + $dropdown-menu-width-sm: () !default; $dropdown-menu-width-sm: map-merge( (