Skip to content

Commit

Permalink
fix(styling): make Grid Menu item full width instead of max-content
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding committed Dec 22, 2022
1 parent 064e75e commit 52a954b
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 7 deletions.
7 changes: 4 additions & 3 deletions packages/common/src/styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,8 @@ $slick-column-picker-close-btn-position-right: 5px !default;
$slick-column-picker-close-btn-position-top: 0px !default;
$slick-column-picker-min-width: 150px !default;
$slick-column-picker-padding: 6px !default;
$slick-column-picker-padding-firefox: 6px 14px 6px 6px !default;
$slick-column-picker-list-width-firefox: calc(100% + 12px) !default;
$slick-column-picker-padding-firefox: 6px 15px 6px 6px !default;
$slick-column-picker-divider-width: 100% !default;
$slick-column-picker-item-border: 1px solid transparent !default;
$slick-column-picker-item-border-radius: 0px !default;
Expand All @@ -310,7 +311,6 @@ $slick-column-picker-label-margin: 4px !default;
$slick-column-picker-label-font-weight: normal !default;
$slick-column-picker-link-background-color: #ffffff !default;
$slick-column-picker-list-margin-bottom: 8px !default;
$slick-column-picker-list-width: max-content !default;
$slick-column-picker-title-border-bottom: 1px solid #d6d6d6 !default;
$slick-column-picker-title-font-size: calc(#{$slick-column-picker-item-font-size} + 2px) !default;
$slick-column-picker-title-font-weight: normal !default;
Expand All @@ -326,6 +326,7 @@ $slick-grid-menu-link-background-color: #ffffff !default;
$slick-grid-menu-icon-font-size: $slick-icon-font-size !default;
$slick-grid-menu-icon-top-margin: 5px !default;
$slick-grid-menu-divider-width: calc(100% - 10px) !default;
$slick-gri-menu-item-margin-right: 6px !default;

/* Menu Plugins */
$slick-menu-bg-color: #ffffff !default;
Expand Down Expand Up @@ -367,7 +368,7 @@ $slick-menu-line-height: 24px !default;
$slick-menu-min-width: 140px !default;
$slick-menu-option-list-margin-bottom: 6px !default;
$slick-menu-padding: 6px !default;
$slick-menu-padding-firefox: 6px 14px 6px 6px !default;
$slick-menu-padding-firefox: 6px 15px 6px 6px !default;
$slick-menu-title-container-display: flex !default;
$slick-menu-title-container-align-items: flex-start !default;
$slick-menu-title-container-justify-content: flex-end !default;
Expand Down
22 changes: 18 additions & 4 deletions packages/common/src/styles/slick-plugins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,14 @@ li.hidden {
overflow-x: hidden;
overflow-y: auto;
resize: both;
width: max-content;
font-family: var(--slick-font-family, $slick-font-family);
background-color: var(--slick-column-picker-background-color, $slick-column-picker-background-color);
border: var(--slick-column-picker-border, $slick-column-picker-border);
border-radius: var(--slick-column-picker-border-radius, $slick-column-picker-border-radius);
min-width: var(--slick-column-picker-min-width, $slick-column-picker-min-width);
padding: var(--slick-column-picker-padding, $slick-column-picker-padding);
@-moz-document url-prefix() {
/* add right padding to avoid scrollback showing over text, but for firefox since webkit is ok */
/* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
padding: var(--slick-column-picker-padding-firefox, $slick-column-picker-padding-firefox);
}
box-shadow: var(--slick-column-picker-box-shadow, $slick-column-picker-box-shadow);
Expand Down Expand Up @@ -90,7 +89,11 @@ li.hidden {
}

.slick-column-picker-list, .slick-grid-menu-list {
width: var(--slick-column-picker-list-width, $slick-column-picker-list-width);
white-space: nowrap;
@-moz-document url-prefix() {
/* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
width: var(--slick-column-picker-list-width-firefox, $slick-column-picker-list-width-firefox);
}

li {
border: var(--slick-column-picker-item-border, $slick-column-picker-item-border);
Expand Down Expand Up @@ -157,11 +160,22 @@ li.hidden {
.slick-grid-menu {
.slick-menu-command-list {
margin-bottom: var(--slick-column-picker-list-margin-bottom, $slick-column-picker-list-margin-bottom);
@-moz-document url-prefix() {
/* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
width: var(--slick-column-picker-list-width-firefox, $slick-column-picker-list-width-firefox);
}
}

li {
list-style: none;
background: none;
overflow: hidden;
text-overflow: ellipsis;
@-moz-document url-prefix() {
margin-right: var(--slick-gri-menu-item-margin-right, $slick-gri-menu-item-margin-right);
width: 100%;
}

a {
display: block;
padding: 4px;
Expand Down Expand Up @@ -345,7 +359,7 @@ li.hidden {
min-width: var(--slick-menu-min-width, $slick-menu-min-width);
padding: var(--slick-menu-padding, $slick-menu-padding);
@-moz-document url-prefix() {
/* add right padding to avoid scrollback showing over text, but for firefox since webkit is ok */
/* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
padding: var(--slick-menu-padding-firefox, $slick-menu-padding-firefox);
}
z-index: 100000;
Expand Down

0 comments on commit 52a954b

Please sign in to comment.