@syncfusion/ej2-angular-splitbuttons 20.4.38-ngcc → 20.4.38

package/styles/button-group/bootstrap4.css

@@ -257,7 +257,7 @@
   color: #fff;
   outline: #6c757d 0 solid;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25em rgba(128, 136, 143, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(108, 117, 125, 0.5);
   box-shadow: none;
   outline-color: inherit;
 }
@@ -269,7 +269,7 @@
   border-color: #007bff;
   color: #fff;
   outline: #6c757d 0 solid;
-  box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(0, 123, 255, 0.5);
   box-shadow: none;
   outline-color: inherit;
 }
@@ -280,7 +280,7 @@
   background-color: #28a745;
   border-color: #28a745;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(40, 167, 69, 0.5);
   box-shadow: none;
   outline-color: inherit;
 }
@@ -291,7 +291,7 @@
   background-color: #17a2b8;
   border-color: #17a2b8;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(51, 174, 194, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(23, 162, 184, 0.5);
   box-shadow: none;
   outline-color: inherit;
 }
@@ -302,7 +302,7 @@
   background-color: #ffc107;
   border-color: #ffc107;
   color: #212529;
-  box-shadow: 0 0 0 0.25em rgba(255, 202, 44, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(255, 193, 7, 0.5);
   box-shadow: none;
   outline-color: inherit;
 }
@@ -313,7 +313,7 @@
   background-color: #dc3545;
   border-color: #dc3545;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(225, 83, 97, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(220, 53, 69, 0.5);
   box-shadow: none;
   outline-color: inherit;
 }
@@ -336,42 +336,42 @@
 .e-btn-group input:focus + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
-  box-shadow: 0 0 0 0.25em rgba(128, 136, 143, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(108, 117, 125, 0.5);
   box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(0, 123, 255, 0.5);
   box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(40, 167, 69, 0.5);
   box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  box-shadow: 0 0 0 0.25em rgba(46, 173, 193, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(23, 162, 184, 0.5);
   box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  box-shadow: 0 0 0 0.25em rgba(255, 201, 40, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(255, 193, 7, 0.5);
   box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  box-shadow: 0 0 0 0.25em rgba(225, 81, 95, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(220, 53, 69, 0.5);
   box-shadow: none;
 }
 .e-btn-group .e-btn:active,
@@ -385,7 +385,7 @@
   color: #fff;
   outline: #6c757d 0 solid;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(78, 85, 91, 0.5);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,
@@ -397,7 +397,7 @@
   border-color: #005cbf;
   color: #fff;
   outline: #6c757d 0 solid;
-  box-shadow: 0 0 0 0.25em rgba(31, 113, 201, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(0, 92, 191, 0.5);
 }
 .e-btn-group .e-btn:active.e-success,
 .e-btn-group input:active + label.e-btn.e-success,
@@ -408,7 +408,7 @@
   background-color: #1e7e34;
   border-color: #1c7430;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(28, 116, 48, 0.5);
 }
 .e-btn-group .e-btn:active.e-info,
 .e-btn-group input:active + label.e-btn.e-info,
@@ -419,7 +419,7 @@
   background-color: #117a8b;
   color: #fff;
   border-color: #10707f;
-  box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(16, 112, 127, 0.5);
 }
 .e-btn-group .e-btn:active.e-warning,
 .e-btn-group input:active + label.e-btn.e-warning,
@@ -430,7 +430,7 @@
   background-color: #d39e00;
   border-color: #c69500;
   color: #212529;
-  box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(198, 149, 0, 0.5);
 }
 .e-btn-group .e-btn:active.e-danger,
 .e-btn-group input:active + label.e-btn.e-danger,
@@ -441,7 +441,7 @@
   background-color: #bd2130;
   border-color: #b21f2d;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(178, 31, 45, 0.5);
 }
 .e-btn-group .e-btn:active.e-outline,
 .e-btn-group input:active + label.e-btn.e-outline,
@@ -451,7 +451,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline {
   background-color: #6c757d;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(78, 85, 91, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -462,7 +462,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
   background-color: #007bff;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(31, 139, 255, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(0, 123, 255, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -473,7 +473,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
   background-color: #28a745;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(28, 116, 48, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -484,7 +484,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
   background-color: #17a2b8;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(16, 112, 127, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -495,7 +495,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
   background-color: #ffc107;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(198, 149, 0, 0.5);
   color: #212529;
 }
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -506,7 +506,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
   background-color: #dc3545;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5);
+  box-shadow: 0 0 0 0.25em rgba(178, 31, 45, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:disabled,

package/styles/button-group/bootstrap4.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/bootstrap4.scss';
+@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
+@import 'bootstrap4-definition.scss';
+@import 'all.scss';

package/styles/button-group/bootstrap5-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/bootstrap5-dark.scss';
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'all.scss';

package/styles/button-group/bootstrap5.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/bootstrap5.scss';
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'all.scss';

package/styles/button-group/fabric-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/fabric-dark.scss';
+@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
+@import 'fabric-dark-definition.scss';
+@import 'all.scss';

package/styles/button-group/fabric.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/fabric.scss';
+@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-buttons/styles/button/fabric-definition.scss';
+@import 'fabric-definition.scss';
+@import 'all.scss';

package/styles/button-group/fluent-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'all.scss';

package/styles/button-group/fluent.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/fluent.scss';
+@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/button-group/highcontrast-light.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/highcontrast-light.scss';
+@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
+@import 'highcontrast-light-definition.scss';
+@import 'all.scss';

package/styles/button-group/highcontrast.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/highcontrast.scss';
+@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
+@import 'highcontrast-definition.scss';
+@import 'all.scss';

package/styles/button-group/material-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/material-dark.scss';
+@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material-dark-definition.scss';
+@import 'material-dark-definition.scss';
+@import 'all.scss';

package/styles/button-group/material.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/material.scss';
+@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-buttons/styles/button/material-definition.scss';
+@import 'material-definition.scss';
+@import 'all.scss';

package/styles/button-group/tailwind-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/tailwind-dark.scss';
+@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-dark-definition.scss';
+@import 'tailwind-dark-definition.scss';
+@import 'all.scss';

package/styles/button-group/tailwind.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/tailwind.scss';
+@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-definition.scss';
+@import 'tailwind-definition.scss';
+@import 'all.scss';

package/styles/drop-down-button/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/drop-down-button/_bootstrap-dark-definition.scss

@@ -0,0 +1,51 @@
+//default
+$drop-down-btn-arrow-content: '\e969' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: 15px !default;
+$drop-down-btn-bigger-li-height: 40px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $grey-dark-font !default;
+$drop-down-btn-disable-text: rgba($grey-dark-font, .65) !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-margin-right: 12px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-bgcolor: $grey-44 !default;
+$drop-down-btn-li-box-shadow: inset 0 0 0 1px $grey-8c !default;
+$drop-down-btn-li-border-color: $grey-44 !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: transparent !default;
+$drop-down-btn-li-height: 26px !default;
+$drop-down-btn-li-padding: 0 14px !default;
+$drop-down-btn-bigger-li-padding: 0 14px !default;
+$drop-down-btn-small-li-padding: 0 14px !default;
+$drop-down-btn-li-selection-bgcolor: $brand-primary !default;
+$drop-down-btn-li-selection-font-color: $brand-primary-font !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 16px !default;
+$drop-down-btn-menu-icon-color: $grey-dark-font !default;
+$drop-down-btn-menu-icon-disabled-color: rgba($grey-dark-font, .65) !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-selected-color: $brand-primary-font !default;
+$drop-down-btn-sub-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$drop-down-btn-ul-bgcolor: $grey-dark !default;
+$drop-down-btn-ul-border: 1px solid $grey-44 !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 3px 0 !default;
+$drop-down-btn-ul-bigger-padding: 5px 0 !default;
+$drop-down-btn-ul-small-padding: 5px 0 !default;
+$drop-down-btn-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;
+
+//enddefault

package/styles/drop-down-button/_bootstrap-definition.scss

@@ -0,0 +1,48 @@
+$drop-down-btn-arrow-content: '\e969' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: 15px !default;
+$drop-down-btn-bigger-li-height: 40px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $grey-dark !default;
+$drop-down-btn-disable-text: rgba($grey, .65) !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 12px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-bgcolor: $grey-e6 !default;
+$drop-down-btn-li-box-shadow: 0 0 0 1px $grey-8c inset !default;
+$drop-down-btn-li-border-color: $grey-e6 !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: transparent !default;
+$drop-down-btn-li-height: 26px !default;
+$drop-down-btn-li-padding: 0 14px !default;
+$drop-down-btn-bigger-li-padding: 0 14px !default;
+$drop-down-btn-small-li-padding: 0 14px !default;
+$drop-down-btn-li-selection-bgcolor: $grey-e6 !default;
+$drop-down-btn-li-selection-font-color: $grey-dark !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 16px !default;
+$drop-down-btn-menu-icon-color: $grey-dark !default;
+$drop-down-btn-menu-icon-disabled-color: rgba($grey-light-font, .65) !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-selected-color: $grey-dark !default;
+$drop-down-btn-sub-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$drop-down-btn-ul-bgcolor: $grey-white !default;
+$drop-down-btn-ul-border: 1px solid $grey-cc !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 3px 0 !default;
+$drop-down-btn-ul-bigger-padding: 5px 0 !default;
+$drop-down-btn-ul-small-padding: 5px 0 !default;
+$drop-down-btn-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;

package/styles/drop-down-button/_bootstrap4-definition.scss

@@ -0,0 +1,48 @@
+$drop-down-btn-arrow-content: '\e969' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: 16px !default;
+$drop-down-btn-bigger-li-height: 32px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $gray-900 !default;
+$drop-down-btn-disable-text: rgba($gray-600, .65) !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 8px !default;
+$drop-down-btn-bigger-icon-margin-right: 0 !default;
+$drop-down-btn-li-bgcolor: darken($gray-100, 2%) !default;
+$drop-down-btn-li-box-shadow: none !default;
+$drop-down-btn-li-border-color: $gray-600 !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: darken($gray-100, 2%) !default;
+$drop-down-btn-li-height: 26px !default;
+$drop-down-btn-li-padding: 0 20px !default;
+$drop-down-btn-bigger-li-padding: 0 24px !default;
+$drop-down-btn-small-li-padding: 0 16px !default;
+$drop-down-btn-li-selection-bgcolor: $primary !default;
+$drop-down-btn-li-selection-font-color: $gray-900 !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 16px !default;
+$drop-down-btn-menu-icon-color: $gray-900 !default;
+$drop-down-btn-menu-icon-disabled-color: $gray-600 !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow: none !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-selected-color: $white !default;
+$drop-down-btn-sub-ul-box-shadow: none !default;
+$drop-down-btn-ul-bgcolor: $content-popup-bg !default;
+$drop-down-btn-ul-border: 1px solid rgba($black, .15) !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 6px 0 !default;
+$drop-down-btn-ul-bigger-padding: 8px 0 !default;
+$drop-down-btn-ul-small-padding: 4px 0 !default;
+$drop-down-btn-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;

package/styles/drop-down-button/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/drop-down-button/_bootstrap5-definition.scss

@@ -0,0 +1,50 @@
+//layout variables
+$drop-down-btn-arrow-content: '\e70d' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: $text-base !default;
+$drop-down-btn-bigger-li-height: 32px !default;
+$drop-down-btn-bigger-max-width: 202px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 11px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-height: 30px !default;
+$drop-down-btn-li-padding: 0 12px !default;
+$drop-down-btn-bigger-li-padding: 0 16px !default;
+$drop-down-btn-small-li-padding: 0 8px !default;
+$drop-down-btn-max-width: 178px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 22px !default;
+$drop-down-btn-menu-icon-font-size: 18px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-sub-ul-box-shadow: none !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 4px 0 !default;
+$drop-down-btn-ul-bigger-padding: 8px 0 !default;
+$drop-down-btn-ul-small-padding: 4px 0 !default;
+$drop-down-btn-caret-icon-font-size: 10px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 12px !default;
+$drop-down-btn-box-shadow: $secondary-shadow-focus !default;
+$drop-down-btn-popup-margin-top: 2px !default;
+$drop-down-btn-bigger-popup-margin-top: 4px !default;
+$drop-down-btn-ul-border: 1px solid $border-light !default;
+$drop-down-btn-li-box-shadow: none !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-color: $content-text-color !default;
+$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
+$drop-down-btn-font-size: $text-sm !default;
+$drop-down-btn-font-weight: $font-weight-normal !default;
+$drop-down-btn-li-bgcolor: $content-bg-color-hover !default;
+$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
+$drop-down-btn-li-border-color: $border-light !default;
+$drop-down-btn-selected-color: $content-text-color-selected !default;
+$drop-down-btn-parent-ul-box-shadow: none !default;
+$drop-down-btn-li-focus-bgcolor: $content-bg-color-hover !default;
+$drop-down-btn-li-selection-bgcolor: $content-bg-color-selected !default;
+$drop-down-btn-li-selection-font-color: $content-text-color !default;
+$drop-down-btn-menu-icon-color: $icon-color !default;
+$drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
+$drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;

package/styles/drop-down-button/_fabric-dark-definition.scss

@@ -0,0 +1,51 @@
+//default
+$drop-down-btn-arrow-content: '\e36a' !default;
+$drop-down-btn-vertical-btn-padding: 8px 20px !default;
+$drop-down-btn-vertical-bigger-padding: 10px 24px !default;
+$drop-down-btn-bigger-font-size: 15px !default;
+$drop-down-btn-bigger-li-height: 48px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $neutral-light-font !default;
+$drop-down-btn-disable-text: $neutral-tertiary-alt !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 10px !default;
+$drop-down-btn-bigger-icon-margin-right: 10px !default;
+$drop-down-btn-li-bgcolor: $neutral-light !default;
+$drop-down-btn-li-box-shadow: 0 2px 5px 0 rgba($shadow, .26) !default;
+$drop-down-btn-li-border-color: $neutral-light !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: transparent !default;
+$drop-down-btn-li-height: 36px !default;
+$drop-down-btn-li-padding: 0 10px !default;
+$drop-down-btn-bigger-li-padding: 0 10px !default;
+$drop-down-btn-small-li-padding: 0 10px !default;
+$drop-down-btn-li-selection-bgcolor: $neutral-quintenary !default;
+$drop-down-btn-li-selection-font-color: $neutral-light-fontalt !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 18px !default;
+$drop-down-btn-menu-icon-color: $neutral-light-font !default;
+$drop-down-btn-menu-icon-disabled-color: $neutral-tertiary-alt !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow:  0 2px 5px 0 rgba($shadow, .26) !default;
+$drop-down-btn-selected-color: $neutral-light-fontalt !default;
+$drop-down-btn-seperator-padding: 0 !default;
+$drop-down-btn-sub-ul-box-shadow: 0 2px 5px 0 rgba($shadow, .26) !default;
+$drop-down-btn-ul-bgcolor: $neutral-lighter-alt !default;
+$drop-down-btn-ul-border: 1px solid $neutral-light !default;
+$drop-down-btn-ul-border-radius: 0 !default;
+$drop-down-btn-ul-padding: 0 !default;
+$drop-down-btn-ul-bigger-padding: 0 !default;
+$drop-down-btn-ul-small-padding: 0 !default;
+$drop-down-btn-caret-icon-font-size: 10px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;
+
+//enddefault

package/styles/drop-down-button/_fabric-definition.scss

@@ -0,0 +1,48 @@
+$drop-down-btn-arrow-content: '\e36a' !default;
+$drop-down-btn-vertical-btn-padding: 8px 20px !default;
+$drop-down-btn-vertical-bigger-padding: 10px 24px !default;
+$drop-down-btn-bigger-font-size: 15px !default;
+$drop-down-btn-bigger-li-height: 48px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $neutral-light-font !default;
+$drop-down-btn-disable-text: $neutral-tertiary-alt !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 10px !default;
+$drop-down-btn-bigger-icon-margin-right: 10px !default;
+$drop-down-btn-li-bgcolor: $neutral-lighter !default;
+$drop-down-btn-li-box-shadow: 0 0 0 1px $neutral-secondary-alt inset !default;
+$drop-down-btn-li-border-color:  $neutral-light !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: transparent !default;
+$drop-down-btn-li-height: 36px !default;
+$drop-down-btn-li-padding: 0 10px !default;
+$drop-down-btn-bigger-li-padding: 0 10px !default;
+$drop-down-btn-small-li-padding: 0 10px !default;
+$drop-down-btn-li-selection-bgcolor:  $neutral-tertiary-alt !default;
+$drop-down-btn-li-selection-font-color: $theme-light-font !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 18px !default;
+$drop-down-btn-menu-icon-color: $neutral-light-font !default;
+$drop-down-btn-menu-icon-disabled-color: $neutral-tertiary-alt !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow:  0 0 10px 0 rgba($neutral-black, .2) !default;
+$drop-down-btn-selected-color: $neutral-light-font !default;
+$drop-down-btn-seperator-padding: 0 !default;
+$drop-down-btn-sub-ul-box-shadow: 0 0 10px 0 rgba($neutral-black, .2) !default;
+$drop-down-btn-ul-bgcolor: $neutral-white !default;
+$drop-down-btn-ul-border: 1px solid $neutral-light !default;
+$drop-down-btn-ul-border-radius: 0 !default;
+$drop-down-btn-ul-padding: 0 !default;
+$drop-down-btn-ul-bigger-padding: 0 !default;
+$drop-down-btn-ul-small-padding: 0 !default;
+$drop-down-btn-caret-icon-font-size: 10px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;

package/styles/drop-down-button/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';