@syncfusion/ej2-multicolumn-combobox 26.1.35 → 26.1.39

package/styles/material-dark.css

@@ -151,10 +151,20 @@
 
 .e-multicolumn-list .e-popup-footer {
   vertical-align: middle;
-  border-top: 1px solid;
+  border-style: solid;
+  border-width: 0 0 0 0;
   font-size: 14px;
-  height: 38px;
-  padding: 8px 0;
+  height: 36px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.e-multicolumn-grid.e-grid {
+  border-width: 0;
 }
 
 .e-input-group.e-multicolumn-list input[readonly].e-input {
@@ -230,8 +240,10 @@
 .e-small .e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 12px;
 }
+.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-small.e-popup .e-multicolumn-grid .e-row,
 .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-popup.e-multicolumn-list .e-popup-footer,
 .e-small .e-popup .e-multicolumn-grid .e-row,
 .e-small .e-popup .e-multicolumn-grid .e-emptyrow {
   height: 36px;
@@ -245,8 +257,10 @@
 .e-bigger .e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 16px;
 }
+.e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger .e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger .e-popup .e-multicolumn-grid .e-row,
 .e-bigger .e-popup .e-multicolumn-grid .e-emptyrow {
   height: 48px;
@@ -269,12 +283,16 @@
 .e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 14px;
 }
+.e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger.e-small .e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger .e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger .e-small.e-popup .e-multicolumn-grid .e-row,
 .e-bigger .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
 .e-small .e-bigger.e-popup .e-multicolumn-grid .e-row,
 .e-small .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow {
   height: 48px;
@@ -287,7 +305,7 @@
 }
 
 .e-multicolumn-list .e-popup-footer {
-  background: transperent;
+  background: #424242;
   color: rgba(255, 255, 255, 0.6);
   border-color: #616161;
 }

package/styles/material.css

@@ -176,10 +176,20 @@
 
 .e-multicolumn-list .e-popup-footer {
   vertical-align: middle;
-  border-top: 1px solid;
+  border-style: solid;
+  border-width: 0 1px 0 1px;
   font-size: 14px;
-  height: 38px;
-  padding: 8px 0;
+  height: 36px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.e-multicolumn-grid.e-grid {
+  border-width: 1px;
 }
 
 .e-input-group.e-multicolumn-list input[readonly].e-input {
@@ -255,8 +265,10 @@
 .e-small .e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 12px;
 }
+.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-small.e-popup .e-multicolumn-grid .e-row,
 .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-popup.e-multicolumn-list .e-popup-footer,
 .e-small .e-popup .e-multicolumn-grid .e-row,
 .e-small .e-popup .e-multicolumn-grid .e-emptyrow {
   height: 36px;
@@ -270,8 +282,10 @@
 .e-bigger .e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 16px;
 }
+.e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger .e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger .e-popup .e-multicolumn-grid .e-row,
 .e-bigger .e-popup .e-multicolumn-grid .e-emptyrow {
   height: 48px;
@@ -294,12 +308,16 @@
 .e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 14px;
 }
+.e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger.e-small .e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger .e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger .e-small.e-popup .e-multicolumn-grid .e-row,
 .e-bigger .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
 .e-small .e-bigger.e-popup .e-multicolumn-grid .e-row,
 .e-small .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow {
   height: 48px;
@@ -312,7 +330,7 @@
 }
 
 .e-multicolumn-list .e-popup-footer {
-  background: transparent;
+  background: #fff;
   color: rgba(0, 0, 0, 0.54);
   border-color: #e0e0e0;
 }

package/styles/material3-dark.css

@@ -241,10 +241,20 @@
 
 .e-multicolumn-list .e-popup-footer {
   vertical-align: middle;
-  border-top: 1px solid;
+  border-style: solid;
+  border-width: 0 1px 0 1px;
   font-size: 14px;
-  height: 38px;
-  padding: 8px 0;
+  height: 32px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.e-multicolumn-grid.e-grid {
+  border-width: 1px;
 }
 
 .e-input-group.e-multicolumn-list input[readonly].e-input {
@@ -320,8 +330,10 @@
 .e-small .e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 12px;
 }
+.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-small.e-popup .e-multicolumn-grid .e-row,
 .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-popup.e-multicolumn-list .e-popup-footer,
 .e-small .e-popup .e-multicolumn-grid .e-row,
 .e-small .e-popup .e-multicolumn-grid .e-emptyrow {
   height: 26px;
@@ -335,8 +347,10 @@
 .e-bigger .e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 16px;
 }
+.e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger .e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger .e-popup .e-multicolumn-grid .e-row,
 .e-bigger .e-popup .e-multicolumn-grid .e-emptyrow {
   height: 40px;
@@ -359,12 +373,16 @@
 .e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 14px;
 }
+.e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger.e-small .e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger .e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger .e-small.e-popup .e-multicolumn-grid .e-row,
 .e-bigger .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
 .e-small .e-bigger.e-popup .e-multicolumn-grid .e-row,
 .e-small .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow {
   height: 36px;
@@ -377,9 +395,9 @@
 }
 
 .e-multicolumn-list .e-popup-footer {
-  background: transparent;
+  background: rgba(var(--color-sf-surface));
   color: var(--color-sf-on-surface-variant);
-  border-color: var(--color-sf-outline-variant);
+  border-color: rgba(var(--color-sf-outline-variant));
 }
 
 .e-input-group.e-multicolumn-list:focus-visible {

package/styles/material3.css

@@ -297,10 +297,20 @@
 
 .e-multicolumn-list .e-popup-footer {
   vertical-align: middle;
-  border-top: 1px solid;
+  border-style: solid;
+  border-width: 0 1px 0 1px;
   font-size: 14px;
-  height: 38px;
-  padding: 8px 0;
+  height: 32px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.e-multicolumn-grid.e-grid {
+  border-width: 1px;
 }
 
 .e-input-group.e-multicolumn-list input[readonly].e-input {
@@ -376,8 +386,10 @@
 .e-small .e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 12px;
 }
+.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-small.e-popup .e-multicolumn-grid .e-row,
 .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-popup.e-multicolumn-list .e-popup-footer,
 .e-small .e-popup .e-multicolumn-grid .e-row,
 .e-small .e-popup .e-multicolumn-grid .e-emptyrow {
   height: 26px;
@@ -391,8 +403,10 @@
 .e-bigger .e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 16px;
 }
+.e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger .e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger .e-popup .e-multicolumn-grid .e-row,
 .e-bigger .e-popup .e-multicolumn-grid .e-emptyrow {
   height: 40px;
@@ -415,12 +429,16 @@
 .e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer {
   font-size: 14px;
 }
+.e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger.e-small .e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-row,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-emptyrow,
+.e-bigger .e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger .e-small.e-popup .e-multicolumn-grid .e-row,
 .e-bigger .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
 .e-small .e-bigger.e-popup .e-multicolumn-grid .e-row,
 .e-small .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow {
   height: 36px;
@@ -433,9 +451,9 @@
 }
 
 .e-multicolumn-list .e-popup-footer {
-  background: transparent;
+  background: rgba(var(--color-sf-surface));
   color: var(--color-sf-on-surface-variant);
-  border-color: var(--color-sf-outline-variant);
+  border-color: rgba(var(--color-sf-outline-variant));
 }
 
 .e-input-group.e-multicolumn-list:focus-visible {

package/styles/multicolumn-combobox/_bds-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 30px !default;
 $multicolumn-margin-top-value: 2px !default;
+$footer-border-width: 0 0 0 0 !default;
+$grid-border-width: 0 !default;
 
 $multicolumn-grid-small-height: 24px !default;
 $multicolumn-margin-top-small-value: 2px !default;
@@ -17,7 +19,7 @@ $grid-content-color: $content-text-color !default;
 $grid-content-hover-bg-color: $content-bg-color-hover !default;
 $grid-content-active-bg-color: $content-bg-color-selected !default;
 $grid-content-active-color: $content-text-color-selected !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $flyout-bg-color !default;
 $grid-footer-color: $content-text-color-alt2 !default;
 $grid-group-content-header-color: $content-text-color-alt2 !default;
 $grid-group-content-header-bg-color: $flyout-bg-color !default;

package/styles/multicolumn-combobox/_bootstrap-dark-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: unset !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 32px !default;
 $multicolumn-margin-top-small-value: unset !default;
@@ -17,7 +19,7 @@ $grid-content-color: $grey-light-font !default;
 $grid-content-hover-bg-color: $grey-44 !default;
 $grid-content-active-bg-color: $brand-primary !default;
 $grid-content-active-color: $brand-primary-font !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $gray-dark !default;
 $grid-footer-color: $brand-primary !default;
 $grid-group-content-header-color: $brand-primary !default;
 $grid-group-content-header-bg-color: $gray-dark !default;

package/styles/multicolumn-combobox/_bootstrap-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: unset !default;
+$footer-border-width: 1px 0 0 0 !default;
+$grid-border-width: 0 !default;
 
 $multicolumn-grid-small-height: 32px !default;
 $multicolumn-margin-top-small-value: unset !default;
@@ -17,7 +19,7 @@ $grid-content-color: $grey-light-font !default;
 $grid-content-hover-bg-color: $grey-f5 !default;
 $grid-content-active-bg-color: $brand-primary !default;
 $grid-content-active-color: $brand-primary-font !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $grey-white !default;
 $grid-footer-color: $gray-light !default;
 $grid-group-content-header-color: $gray-light !default;
 $grid-group-content-header-bg-color: $grey-white !default;

package/styles/multicolumn-combobox/_bootstrap4-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 400 !default;
 $multicolumn-grid-height: 26px !default;
 $multicolumn-margin-top-value: 2px !default;
+$footer-border-width: 1px 0 0 0 !default;
+$grid-border-width: 0 !default;
 
 $multicolumn-grid-small-height: 24px !default;
 $multicolumn-margin-top-small-value: 3px !default;
@@ -17,7 +19,7 @@ $grid-content-color: $gray-900 !default;
 $grid-content-hover-bg-color: $gray-100 !default;
 $grid-content-active-bg-color: $primary !default;
 $grid-content-active-color: $primary-font !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $white !default;
 $grid-footer-color: $gray-700 !default;
 $grid-group-content-header-color: $gray-700 !default;
 $grid-group-content-header-bg-color: $white !default;

package/styles/multicolumn-combobox/_bootstrap5-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 700 !default;
 $multicolumn-grid-height: 30px !default;
 $multicolumn-margin-top-value: 3px !default;
+$footer-border-width: 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 26px !default;
 $multicolumn-margin-top-small-value: 3px !default;

package/styles/multicolumn-combobox/_bootstrap5.3-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 700 !default;
 $multicolumn-grid-height: 30px !default;
 $multicolumn-margin-top-value: 3px !default;
+$footer-border-width: 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 26px !default;
 $multicolumn-margin-top-small-value: 3px !default;

package/styles/multicolumn-combobox/_fabric-dark-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: unset !default;
+$footer-border-width: 0 0 0 0 !default;
+$grid-border-width: 0 !default;
 
 $multicolumn-grid-small-height: 32px !default;
 $multicolumn-margin-top-small-value: unset !default;
@@ -17,7 +19,7 @@ $grid-content-color: $neutral-light-font !default;
 $grid-content-hover-bg-color: $neutral-light !default;
 $grid-content-active-bg-color: $neutral-quintenary !default;
 $grid-content-active-color: $neutral-light-font !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $neutral-lighter-alt !default;
 $grid-footer-color: $theme-primary !default;
 $grid-group-content-header-color: $theme-primary !default;
 $grid-group-content-header-bg-color: $neutral-lighter-alt !default;

package/styles/multicolumn-combobox/_fabric-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: unset !default;
+$footer-border-width: 1px 0 0 0 !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 32px !default;
 $multicolumn-margin-top-small-value: unset !default;
@@ -17,7 +19,7 @@ $grid-content-color: $neutral-light-fontalt !default;
 $grid-content-hover-bg-color: $neutral-lighter !default;
 $grid-content-active-bg-color: $theme-lighter !default;
 $grid-content-active-color: $neutral-primary !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $neutral-white !default;
 $grid-footer-color: $theme-primary !default;
 $grid-group-content-header-color: $theme-primary !default;
 $grid-group-content-header-bg-color: $neutral-white !default;

package/styles/multicolumn-combobox/_fluent-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 32px !default;
 $multicolumn-margin-top-value: 2px !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 26px !default;
 $multicolumn-margin-top-small-value: 2px !default;
@@ -17,7 +19,7 @@ $grid-content-color: $content-text-color !default;
 $grid-content-hover-bg-color: $flyout-bg-color-hover !default;
 $grid-content-active-bg-color: $flyout-bg-color-pressed !default;
 $grid-content-active-color: $flyout-text-color-selected !default;
-$grid-footer-bg-color: $transparent !default;
+$grid-footer-bg-color: $flyout-bg-color !default;
 $grid-footer-color: $content-text-color-alt3 !default;
 $grid-group-content-header-color: $content-text-color-alt3 !default;
 $grid-group-content-header-bg-color: $flyout-bg-color !default;

package/styles/multicolumn-combobox/_fluent2-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 400 !default;
 $multicolumn-grid-height: 32px !default;
 $multicolumn-margin-top-value: unset !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 32px !default;
 $multicolumn-margin-top-small-value: unset !default;
@@ -17,7 +19,7 @@ $grid-content-color: $content-text-color !default;
 $grid-content-hover-bg-color: $flyout-bg-color-hover !default;
 $grid-content-active-bg-color: $flyout-bg-color-selected !default;
 $grid-content-active-color: $flyout-text-color-selected !default;
-$grid-footer-bg-color: $transparent !default;
+$grid-footer-bg-color: $flyout-bg-color !default;
 $grid-footer-color: $content-text-color-alt2 !default;
 $grid-group-content-header-color: $content-text-color-alt2 !default;
 $grid-group-content-header-bg-color: $flyout-bg-color !default;

package/styles/multicolumn-combobox/_fusionnew-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 32px !default;
 $multicolumn-margin-top-value: 2px !default;
+$footer-border-width: 1px 0 0 0 !default;
+$grid-border-width: 0 !default;
 
 $multicolumn-grid-small-height: 26px !default;
 $multicolumn-margin-top-small-value: 2px !default;
@@ -17,7 +19,7 @@ $grid-content-color: $content-text-color !default;
 $grid-content-hover-bg-color: $flyout-bg-color-hover !default;
 $grid-content-active-bg-color: $flyout-bg-color-pressed !default;
 $grid-content-active-color: $flyout-text-color-selected !default;
-$grid-footer-bg-color: $transparent !default;
+$grid-footer-bg-color: $flyout-bg-color !default;
 $grid-footer-color: $content-text-color-alt3 !default;
 $grid-group-content-header-color: $content-text-color-alt3 !default;
 $grid-group-content-header-bg-color: $flyout-bg-color !default;

package/styles/multicolumn-combobox/_highcontrast-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: unset !default;
+$footer-border-width: 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 32px !default;
 $multicolumn-margin-top-small-value: unset !default;
@@ -17,7 +19,7 @@ $grid-content-color: $content-font !default;
 $grid-content-hover-bg-color: $hover-bg !default;
 $grid-content-active-bg-color: $selection-bg !default;
 $grid-content-active-color: $selection-font !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $bg-base-0 !default;
 $grid-footer-color: $selection-border !default;
 $grid-group-content-header-color: $selection-border !default;
 $grid-group-content-header-bg-color: $bg-base-0 !default;

package/styles/multicolumn-combobox/_highcontrast-light-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: unset !default;
+$footer-border-width: 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 32px !default;
 $multicolumn-margin-top-small-value: unset !default;
@@ -17,7 +19,7 @@ $grid-content-color: $content-font !default;
 $grid-content-hover-bg-color: $hover-bg !default;
 $grid-content-active-bg-color: $selection-bg !default;
 $grid-content-active-color: $selection-font !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $bg-base-0 !default;
 $grid-footer-color: $selection-border !default;
 $grid-group-content-header-color: $selection-border !default;
 $grid-group-content-header-bg-color: $bg-base-0 !default;

package/styles/multicolumn-combobox/_layout.scss

@@ -21,10 +21,15 @@
   }
   .e-multicolumn-list .e-popup-footer {
     vertical-align: middle;
-    border-top: 1px solid;
+    border-style: solid;
+    border-width: $footer-border-width;
     font-size: 14px;
-    height: 38px;
-    padding: 8px 0;
+    height: $multicolumn-grid-height;
+    display: flex;
+    align-items: center;
+  }
+  .e-multicolumn-grid.e-grid {
+    border-width: $grid-border-width;
   }
   .e-input-group.e-multicolumn-list {
     input[readonly].e-input {
@@ -93,6 +98,7 @@
     &.e-multicolumn-list .e-popup-footer {
       font-size: 12px;
     }
+    &.e-multicolumn-list .e-popup-footer,
     .e-multicolumn-grid .e-row,
     .e-multicolumn-grid .e-emptyrow {
       height: $multicolumn-grid-small-height;
@@ -105,6 +111,7 @@
     &.e-multicolumn-list .e-popup-footer {
       font-size: 16px;
     }
+    &.e-multicolumn-list .e-popup-footer,
     .e-multicolumn-grid .e-row,
     .e-multicolumn-grid .e-emptyrow {
       height: $multicolumn-grid-bigger-height;
@@ -121,6 +128,7 @@
     &.e-multicolumn-list .e-popup-footer {
       font-size: 14px;
     }
+    &.e-multicolumn-list .e-popup-footer,
     .e-multicolumn-grid .e-row,
     .e-multicolumn-grid .e-emptyrow {
       height: $multicolumn-grid-bigger-small-height;

package/styles/multicolumn-combobox/_material-dark-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: 1px !default;
+$footer-border-width: 0 0 0 0 !default;
+$grid-border-width: 0 !default;
 
 $multicolumn-grid-small-height: 36px !default;
 $multicolumn-margin-top-small-value: 1px !default;
@@ -17,7 +19,7 @@ $grid-content-color: rgba($grey-white, 1) !default;
 $grid-content-hover-bg-color: $grey-700 !default;
 $grid-content-active-bg-color: $grey-700 !default;
 $grid-content-active-color: $accent !default;
-$grid-footer-bg-color: transperent !default;
+$grid-footer-bg-color: $grey-800 !default;
 $grid-footer-color: rgba($grey-white, .6) !default;
 $grid-group-content-header-color: rgba($grey-white, .6) !default;
 $grid-group-content-header-bg-color: $grey-800 !default;

package/styles/multicolumn-combobox/_material-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: 1px !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 36px !default;
 $multicolumn-margin-top-small-value: 1px !default;
@@ -17,7 +19,7 @@ $grid-content-color: rgba($grey-black, .87) !default;
 $grid-content-hover-bg-color: $grey-200 !default;
 $grid-content-active-bg-color: $grey-200 !default;
 $grid-content-active-color: $accent !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $grey-white !default;
 $grid-footer-color: rgba($grey-black, .54) !default;
 $grid-group-content-header-color: rgba($grey-black, .54) !default;
 $grid-group-content-header-bg-color: $grey-white !default;

package/styles/multicolumn-combobox/_material3-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 32px !default;
 $multicolumn-margin-top-value: 1px !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 26px !default;
 $multicolumn-margin-top-small-value: 1px !default;
@@ -11,13 +13,13 @@ $multicolumn-margin-top-bigger-value: 1px !default;
 $multicolumn-grid-bigger-small-height: 36px !default;
 $multicolumn-margin-top-bigger-small-value: 1px !default;
 
-$footer-border-color: $border-light !default;
+$footer-border-color: rgba($border-light) !default;
 $popup-text-color: $content-text-color-alt1 !default;
 $grid-content-color: $content-text-color !default;
 $grid-content-hover-bg-color: $flyout-bg-color-hover !default;
 $grid-content-active-bg-color: $flyout-bg-color-selected !default;
 $grid-content-active-color: $flyout-text-color-selected !default;
-$grid-footer-bg-color: $transparent !default;
+$grid-footer-bg-color: rgba($content-bg-color) !default;
 $grid-footer-color: $content-text-color-alt1 !default;
 $grid-group-content-header-color: $content-text-color-alt1 !default;
 $grid-group-content-header-bg-color: rgba($content-bg-color) !default;

package/styles/multicolumn-combobox/_tailwind-definition.scss

@@ -1,6 +1,8 @@
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 30px !default;
 $multicolumn-margin-top-value: 2px !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 24px !default;
 $multicolumn-margin-top-small-value: 2px !default;
@@ -17,7 +19,7 @@ $grid-content-color: $content-text-color !default;
 $grid-content-hover-bg-color: $content-bg-color-hover !default;
 $grid-content-active-bg-color: $content-bg-color-selected !default;
 $grid-content-active-color: $content-text-color-selected !default;
-$grid-footer-bg-color: transparent !default;
+$grid-footer-bg-color: $flyout-bg-color !default;
 $grid-footer-color: $content-text-color-alt2 !default;
 $grid-group-content-header-color: $content-text-color-alt2 !default;
 $grid-group-content-header-bg-color: $flyout-bg-color !default;