@syncfusion/blazor-themes 31.2.4 → 31.2.10

package/SCSS-Themes/buttons/radio-button/material3-lite.scss

@@ -70,6 +70,7 @@ $radio-btn-ripple-bgcolor: rgba($content-text-color, .08) !default;
 $radio-btn-focus-check-bg-color: rgba($primary) !default;
 $radio-btn-focus-check-border-color: rgba($primary) !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/material3.scss

@@ -70,6 +70,7 @@ $radio-btn-ripple-bgcolor: rgba($content-text-color, .08) !default;
 $radio-btn-focus-check-bg-color: rgba($primary) !default;
 $radio-btn-focus-check-border-color: rgba($primary) !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/tailwind-dark-lite.scss

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/tailwind-dark.scss

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/tailwind-lite.scss

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/tailwind.scss

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/tailwind3-dark-lite.scss

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/tailwind3-dark.scss

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/tailwind3-lite.scss

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/buttons/radio-button/tailwind3.scss

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
 
 

package/SCSS-Themes/documenteditor/document-editor-container/fluent2-dark-lite.scss

@@ -106,7 +106,7 @@ $de-border-size-button-width: 99px !default;
 $de-list-hover-bg: $primary !default;
 $de-pane-margin-right: 10px;
 $de-pane-margin-right-big: 16px;
-$de-page-number-height: 20px;
+$de-page-number-height: 22px;
 $de-items-pressed: $content-bg-color-pressed;
 $de-font-margin-right: 16px;
 $e-de-shadow-color: $border;

package/SCSS-Themes/documenteditor/document-editor-container/fluent2-dark.scss

@@ -106,7 +106,7 @@ $de-border-size-button-width: 99px !default;
 $de-list-hover-bg: $primary !default;
 $de-pane-margin-right: 10px;
 $de-pane-margin-right-big: 16px;
-$de-page-number-height: 20px;
+$de-page-number-height: 22px;
 $de-items-pressed: $content-bg-color-pressed;
 $de-font-margin-right: 16px;
 $e-de-shadow-color: $border;

package/SCSS-Themes/documenteditor/document-editor-container/fluent2-highcontrast-lite.scss

@@ -106,7 +106,7 @@ $de-border-size-button-width: 99px !default;
 $de-list-hover-bg: $primary !default;
 $de-pane-margin-right: 10px;
 $de-pane-margin-right-big: 16px;
-$de-page-number-height: 20px;
+$de-page-number-height: 22px;
 $de-items-pressed: $content-bg-color-pressed;
 $de-font-margin-right: 16px;
 $e-de-shadow-color: $border;

package/SCSS-Themes/documenteditor/document-editor-container/fluent2-highcontrast.scss

@@ -106,7 +106,7 @@ $de-border-size-button-width: 99px !default;
 $de-list-hover-bg: $primary !default;
 $de-pane-margin-right: 10px;
 $de-pane-margin-right-big: 16px;
-$de-page-number-height: 20px;
+$de-page-number-height: 22px;
 $de-items-pressed: $content-bg-color-pressed;
 $de-font-margin-right: 16px;
 $e-de-shadow-color: $border;

package/SCSS-Themes/documenteditor/document-editor-container/fluent2-lite.scss

@@ -106,7 +106,7 @@ $de-border-size-button-width: 99px !default;
 $de-list-hover-bg: $primary !default;
 $de-pane-margin-right: 10px;
 $de-pane-margin-right-big: 16px;
-$de-page-number-height: 20px;
+$de-page-number-height: 22px;
 $de-items-pressed: $content-bg-color-pressed;
 $de-font-margin-right: 16px;
 $e-de-shadow-color: $border;

package/SCSS-Themes/documenteditor/document-editor-container/fluent2.scss

@@ -106,7 +106,7 @@ $de-border-size-button-width: 99px !default;
 $de-list-hover-bg: $primary !default;
 $de-pane-margin-right: 10px;
 $de-pane-margin-right-big: 16px;
-$de-page-number-height: 20px;
+$de-page-number-height: 22px;
 $de-items-pressed: $content-bg-color-pressed;
 $de-font-margin-right: 16px;
 $e-de-shadow-color: $border;

package/SCSS-Themes/documenteditor/document-editor-container/tailwind3-dark-lite.scss

@@ -182,7 +182,7 @@ $de-clr-pckr-split-button: 41px;
 $de-page-number-margin-top: 3px;
 $de-page-number-margin-top-big: 4px;
 $de-hlt-clr-height: 20px;
-$de-hlt-clr-height-bigger: 24px;
+$de-hlt-clr-height-bigger: 22px;
 $de-shw-hid-height: 76px;
 $de-shw-hid-height-big: 78px;
 $de-tool-item-height: 68px;

package/SCSS-Themes/documenteditor/document-editor-container/tailwind3-dark.scss

@@ -182,7 +182,7 @@ $de-clr-pckr-split-button: 41px;
 $de-page-number-margin-top: 3px;
 $de-page-number-margin-top-big: 4px;
 $de-hlt-clr-height: 20px;
-$de-hlt-clr-height-bigger: 24px;
+$de-hlt-clr-height-bigger: 22px;
 $de-shw-hid-height: 76px;
 $de-shw-hid-height-big: 78px;
 $de-tool-item-height: 68px;

package/SCSS-Themes/documenteditor/document-editor-container/tailwind3-lite.scss

@@ -182,7 +182,7 @@ $de-clr-pckr-split-button: 41px;
 $de-page-number-margin-top: 3px;
 $de-page-number-margin-top-big: 4px;
 $de-hlt-clr-height: 20px;
-$de-hlt-clr-height-bigger: 24px;
+$de-hlt-clr-height-bigger: 22px;
 $de-shw-hid-height: 76px;
 $de-shw-hid-height-big: 78px;
 $de-tool-item-height: 68px;

package/SCSS-Themes/documenteditor/document-editor-container/tailwind3.scss

@@ -182,7 +182,7 @@ $de-clr-pckr-split-button: 41px;
 $de-page-number-margin-top: 3px;
 $de-page-number-margin-top-big: 4px;
 $de-hlt-clr-height: 20px;
-$de-hlt-clr-height-bigger: 24px;
+$de-hlt-clr-height-bigger: 22px;
 $de-shw-hid-height: 76px;
 $de-shw-hid-height-big: 78px;
 $de-tool-item-height: 68px;

package/SCSS-Themes/dropdowns/drop-down-list/bds-dark-lite.scss

@@ -24,6 +24,8 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
+$border-type: solid !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -42,6 +44,7 @@ $ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
 $ddl-popup-background-color: $flyout-bg-color !default;
 $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value solid !default;
 
 @include export-module('dropdownlist-bds') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -116,6 +119,15 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bds-dark.scss

@@ -24,6 +24,8 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
+$border-type: solid !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -42,6 +44,7 @@ $ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
 $ddl-popup-background-color: $flyout-bg-color !default;
 $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value solid !default;
 
 @include export-module('dropdownlist-bds') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -116,6 +119,15 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bds-lite.scss

@@ -24,6 +24,8 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
+$border-type: solid !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -42,6 +44,7 @@ $ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
 $ddl-popup-background-color: $flyout-bg-color !default;
 $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value solid !default;
 
 @include export-module('dropdownlist-bds') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -116,6 +119,15 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bds.scss

@@ -24,6 +24,8 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
+$border-type: solid !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -42,6 +44,7 @@ $ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
 $ddl-popup-background-color: $flyout-bg-color !default;
 $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value solid !default;
 
 @include export-module('dropdownlist-bds') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -116,6 +119,15 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bootstrap-dark-lite.scss

@@ -15,7 +15,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 24px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $grey-dark-font !default;
@@ -32,6 +32,7 @@ $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $grey-lighter !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;
@@ -110,6 +111,15 @@ $ddl-bigger-small-list-font-size: 14px !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bootstrap-dark.scss

@@ -15,7 +15,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 24px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $grey-dark-font !default;
@@ -32,6 +32,7 @@ $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $grey-lighter !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;
@@ -110,6 +111,15 @@ $ddl-bigger-small-list-font-size: 14px !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bootstrap-lite.scss

@@ -14,7 +14,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 24px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $grey-dark !default;
@@ -31,6 +31,7 @@ $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $grey-cc !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;
@@ -109,6 +110,15 @@ $ddl-bigger-small-list-font-size: 14px !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bootstrap.scss

@@ -14,7 +14,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 24px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $grey-dark !default;
@@ -31,6 +31,7 @@ $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $grey-cc !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;
@@ -109,6 +110,15 @@ $ddl-bigger-small-list-font-size: 14px !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bootstrap4-lite.scss

@@ -6,6 +6,7 @@
 @import '../../popups/spinner/bootstrap4.scss';
 @import '../../dropdowns/drop-down-base/bootstrap4.scss';
 $ddl-input-font-size: 14px !default;
+$border-type: solid !default;
 
 // $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -34,6 +35,8 @@ $ddl-icon-hover-color: rgba($black, .4) !default;
 $ddl-readonly-bg-color: $gray-200 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $gray-400 !default;
+$input-border: $ddl-zero-value $border-type !default;
+$input-margin-top: 24px !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;
@@ -146,6 +149,15 @@ $ddl-bigger-small-list-font-size: 14px !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bootstrap4.scss

@@ -6,6 +6,7 @@
 @import '../../popups/spinner/bootstrap4.scss';
 @import '../../dropdowns/drop-down-base/bootstrap4.scss';
 $ddl-input-font-size: 14px !default;
+$border-type: solid !default;
 
 // $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -34,6 +35,8 @@ $ddl-icon-hover-color: rgba($black, .4) !default;
 $ddl-readonly-bg-color: $gray-200 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $gray-400 !default;
+$input-border: $ddl-zero-value $border-type !default;
+$input-margin-top: 24px !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;
@@ -146,6 +149,15 @@ $ddl-bigger-small-list-font-size: 14px !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/SCSS-Themes/dropdowns/drop-down-list/bootstrap5-dark-lite.scss

@@ -7,6 +7,7 @@
 @import '../../dropdowns/drop-down-base/bootstrap5-dark.scss';
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
+$border-type: solid !default;
 $ddl-input-border: 1px $border-light !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
@@ -25,6 +26,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $border !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -43,6 +45,7 @@ $ddl-filter-background-color: $content-bg-color !default;
 $ddl-filter-bg: $content-bg-color !default;
 $ddl-list-icon-color: $icon-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
@@ -151,6 +154,15 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;