Skip to content

Commit

Permalink
feat(@clayui/css): Cadmin Dropdown adds dropdown-menu-width-shrink
Browse files Browse the repository at this point in the history
    - The `dropdown-menu` should only be as wide as the text inside and maxes out at 240px wide. This forces `dropdown-item` text to be on one line.
  • Loading branch information
pat270 committed Dec 15, 2021
1 parent 2cc5b51 commit 1d86dfa
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 2 deletions.
4 changes: 4 additions & 0 deletions packages/clay-css/src/scss/cadmin/components/_dropdowns.scss
Original file line number Diff line number Diff line change
Expand Up @@ -410,6 +410,10 @@

// Dropdown Menu Width

.dropdown-menu-width-shrink {
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-width-shrink);
}

.dropdown-menu-width-full {
@include clay-css($cadmin-dropdown-menu-width-full);
}
Expand Down
33 changes: 31 additions & 2 deletions packages/clay-css/src/scss/cadmin/variables/_dropdowns.scss
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@ $cadmin-dropdown-item-base: map-deep-merge(
position: relative,
text-align: inherit,
transition: none,
white-space: normal,
width: 100%,
word-wrap: break-word,
hover: (
Expand Down Expand Up @@ -163,6 +162,23 @@ $cadmin-dropdown-item-base: map-deep-merge(
color: $cadmin-gray-500,
line-height: $cadmin-dropdown-font-size * $cadmin-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,
),
),
),
$cadmin-dropdown-item-base
);
Expand Down Expand Up @@ -637,7 +653,18 @@ $cadmin-dropdown-full-wide-header-spacer-y: 20px !default;

$cadmin-dropdown-wide-width: 500px !default;

// Dropdown Menu Width
// .dropdown-menu-width-shrink

$cadmin-dropdown-menu-width-shrink: () !default;
$cadmin-dropdown-menu-width-shrink: map-deep-merge(
(
min-width: 0,
white-space: nowrap,
),
$cadmin-dropdown-menu-width-shrink
);

// .dropdown-menu-width-full

$cadmin-dropdown-menu-width-full: () !default;
$cadmin-dropdown-menu-width-full: map-merge(
Expand All @@ -651,6 +678,8 @@ $cadmin-dropdown-menu-width-full: map-merge(
$cadmin-dropdown-menu-width-full
);

// .dropdown-menu-width-sm

$cadmin-dropdown-menu-width-sm: () !default;
$cadmin-dropdown-menu-width-sm: map-merge(
(
Expand Down

0 comments on commit 1d86dfa

Please sign in to comment.