@syncfusion/ej2-inputs 33.2.15 → 34.1.30

package/styles/bootstrap5.3.scss

@@ -1,50 +1,44 @@
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
 @use 'signature/bootstrap5.3-definition' as *;
-@use 'signature/all.bootstrap5.3' as *;
+@use 'signature/all' as *;
 
 @use 'input/bootstrap5.3-definition' as *;
 @use 'input/icons/bootstrap5.3' as *;
-@use 'input/all.bootstrap5.3' as *;
-@use 'input/bigger.bootstrap5.3' as *;
+@use 'input/all' as *;
+@use 'input/bigger' as *;
 @use 'numerictextbox/bootstrap5.3-definition' as *;
 @use 'numerictextbox/icons/bootstrap5.3' as *;
-@use 'numerictextbox/all.bootstrap5.3' as *;
-@use 'numerictextbox/bigger.bootstrap5.3' as *;
+@use 'numerictextbox/all' as *;
+@use 'numerictextbox/bigger' as *;
 @use 'maskedtextbox/bootstrap5.3-definition' as *;
-@use 'maskedtextbox/all.bootstrap5.3' as *;
-@use 'maskedtextbox/bigger.bootstrap5.3' as *;
-@use 'ej2-popups/styles/popup/bootstrap5.3-definition' as *;
-@use 'ej2-popups/styles/tooltip/bootstrap5.3-definition' as *;
+@use 'maskedtextbox/all' as *;
+@use 'maskedtextbox/bigger' as *;
 @use 'slider/bootstrap5.3-definition' as *;
-@use 'slider/all.bootstrap5.3' as *;
-@use 'slider/bigger.bootstrap5.3' as *;
+@use 'slider/all' as *;
+@use 'slider/bigger' as *;
 @use 'textbox/bootstrap5.3-definition' as *;
-@use 'textbox/all.bootstrap5.3' as *;
-@use 'textbox/bigger.bootstrap5.3' as *;
+@use 'textbox/all' as *;
+@use 'textbox/bigger' as *;
 @use 'textarea/bootstrap5.3-definition' as *;
-@use 'textarea/all.bootstrap5.3' as *;
-@use 'ej2-buttons/styles/button/bootstrap5.3-definition' as *;
-@use 'ej2-popups/styles/spinner/bootstrap5.3-definition' as *;
+@use 'textarea/all' as *;
 @use 'uploader/bootstrap5.3-definition' as *;
 @use 'uploader/icons/bootstrap5.3' as *;
-@use 'uploader/all.bootstrap5.3' as *;
-@use 'uploader/bigger.bootstrap5.3' as *;
-@use 'ej2-splitbuttons/styles/split-button/bootstrap5.3-definition' as *;
+@use 'uploader/all' as *;
+@use 'uploader/bigger' as *;
 @use 'color-picker/bootstrap5.3-definition' as *;
 @use 'color-picker/icons/bootstrap5.3' as *;
-@use 'color-picker/all.bootstrap5.3' as *;
-@use 'color-picker/bigger.bootstrap5.3' as *;
+@use 'color-picker/all' as *;
+@use 'color-picker/bigger' as *;
 @use 'rating/bootstrap5.3-definition' as *;
-@use 'rating/all.bootstrap5.3' as *;
-@use 'rating/bigger.bootstrap5.3' as *;
+@use 'rating/all' as *;
+@use 'rating/bigger' as *;
 @use 'data-form/bootstrap5.3-definition' as *;
-@use 'data-form/all.bootstrap5.3' as *;
+@use 'data-form/all' as *;
 @use 'otp-input/bootstrap5.3-definition' as *;
-@use 'otp-input/all.bootstrap5.3' as *;
-@use 'otp-input/bigger.bootstrap5.3' as *;
+@use 'otp-input/all' as *;
+@use 'otp-input/bigger' as *;
 @use 'speech-to-text/bootstrap5.3-definition' as *;
 @use 'speech-to-text/icons/bootstrap5.3' as *;
-@use 'speech-to-text/all.bootstrap5.3' as *;
-@use 'speech-to-text/bigger.bootstrap5.3' as *;
+@use 'speech-to-text/all' as *;
+@use 'speech-to-text/bigger' as *;
 @use 'smart-textarea/bootstrap5.3-definition' as *;
-@use 'smart-textarea/all.bootstrap5.3' as *;
+@use 'smart-textarea/all' as *;

package/styles/bootstrap5.css

@@ -21,7 +21,6 @@
   font-family: "e-icons";
 }
 
-/* stylelint-disable property-no-vendor-prefix */
 /*! input layout */
 .e-input-group,
 .e-input-group.e-control-wrapper {
@@ -2052,7 +2051,6 @@ textarea.e-input,
           box-sizing: border-box;
 }
 
-/* stylelint-disable property-no-vendor-prefix */
 /*! input theme */
 input.e-input,
 .e-input-group input.e-input,
@@ -2714,7 +2712,7 @@ input.e-input::-webkit-input-placeholder {
   color: #6c757d;
 }
 
-/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable-line no-empty-source */
 .e-input-group.e-bigger .e-input,
 .e-input-group.e-bigger.e-control-wrapper .e-input,
 .e-bigger .e-input-group .e-input,
@@ -4684,12 +4682,10 @@ span.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-w
   padding-right: 0;
 }
 
-/* stylelint-disable property-no-vendor-prefix */
 .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
   font-size: 14px;
 }
 
-/* stylelint-disable property-no-vendor-prefix */
 .e-bigger.e-content-placeholder.e-numeric.e-placeholder-numeric,
 .e-bigger .e-content-placeholder.e-numeric.e-placeholder-numeric {
   background-size: 300px 40px;
@@ -5542,7 +5538,6 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   font-size: 14px;
 }
 
-/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-content-placeholder.e-textbox.e-placeholder-textbox {
   background-size: 300px 33px;
@@ -5911,7 +5906,6 @@ span.e-input-group.e-append-wrapper.e-rtl.e-multi-line-input.e-outline textarea.
   padding-right: 1px;
 }
 
-/* stylelint-disable-line no-empty-source */
 .e-bigger .e-content-placeholder.e-textbox.e-placeholder-textbox,
 .e-bigger.e-content-placeholder.e-textbox.e-placeholder-textbox {
   background-size: 300px 40px;
@@ -6709,47 +6703,6 @@ span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-or
   top: -30px;
 }
 
-/* stylelint-disable property-no-vendor-prefix */
-@-webkit-keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
 .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
   content: "\e7e7";
 }
@@ -7885,6 +7838,11 @@ body.e-colorpicker-overflow {
 .e-container.e-color-picker {
   width: 341px;
 }
+@media screen and (max-width: 480px) {
+  .e-container.e-color-picker {
+    width: 344px;
+  }
+}
 .e-container.e-color-picker .e-mode-switch-btn {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUwLjIgKDU1MDQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA0IENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMjUtQ29weS04IiBmaWxsPSIjNDU5NkNFIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMjUtQ29weS05IiBmaWxsPSIjNUNDMTVCIiB4PSIwIiB5PSIxMiIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTI1LUNvcHktMTAiIGZpbGw9IiNGQkQ1MDYiIHg9IjEyIiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMjUtQ29weS0xMSIgZmlsbD0iI0VDNEU0MyIgeD0iMTIiIHk9IjEyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat 100% 100%;
 }
@@ -8448,6 +8406,11 @@ body.e-colorpicker-overflow {
 .e-bigger .e-container.e-color-picker {
   width: 462px;
 }
+@media screen and (max-width: 480px) {
+  .e-bigger .e-container.e-color-picker {
+    width: 344px;
+  }
+}
 @media only screen and (max-width: 600px) {
   .e-bigger .e-container.e-color-picker {
     width: 100% !important; /* stylelint-disable-line declaration-no-important */
@@ -8661,6 +8624,9 @@ body.e-colorpicker-overflow {
   cursor: default;
   pointer-events: none;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-rating-container .e-rating-item-container {
   cursor: pointer;
   font-size: 22px;
@@ -8670,9 +8636,6 @@ body.e-colorpicker-overflow {
   min-height: calc(1em + 8px);
   position: relative;
 }
-.e-rating-container .e-rating-item-container:has(svg) {
-  line-height: 13px;
-}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
@@ -8772,14 +8735,14 @@ body.e-colorpicker-overflow {
   text-align: center;
 }
 
-.e-small.e-rating-container .e-rating-item-container,
-.e-small .e-rating-container .e-rating-item-container {
-  font-size: 16px;
-}
 .e-small.e-rating-container .e-rating-item-container:has(svg),
 .e-small .e-rating-container .e-rating-item-container:has(svg) {
   line-height: 6px;
 }
+.e-small.e-rating-container .e-rating-item-container,
+.e-small .e-rating-container .e-rating-item-container {
+  font-size: 16px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -8888,14 +8851,14 @@ body.e-colorpicker-overflow {
   /* stylelint-enable property-no-vendor-prefix */
 }
 
-.e-bigger.e-rating-container .e-rating-item-container,
-.e-bigger .e-rating-container .e-rating-item-container {
-  font-size: 32px;
-}
 .e-bigger.e-rating-container .e-rating-item-container:has(svg),
 .e-bigger .e-rating-container .e-rating-item-container:has(svg) {
   line-height: 13px;
 }
+.e-bigger.e-rating-container .e-rating-item-container,
+.e-bigger .e-rating-container .e-rating-item-container {
+  font-size: 32px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -8906,18 +8869,18 @@ body.e-colorpicker-overflow {
   font-size: 28px;
 }
 
-.e-bigger.e-small.e-rating-container .e-rating-item-container,
-.e-bigger.e-small .e-rating-container .e-rating-item-container,
-.e-bigger .e-small.e-rating-container .e-rating-item-container,
-.e-small .e-bigger.e-rating-container .e-rating-item-container {
-  font-size: 26px;
-}
 .e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
 .e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
 .e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
 .e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
   line-height: 13px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container,
+.e-bigger.e-small .e-rating-container .e-rating-item-container,
+.e-bigger .e-small.e-rating-container .e-rating-item-container,
+.e-small .e-bigger.e-rating-container .e-rating-item-container {
+  font-size: 26px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -8932,13 +8895,8 @@ body.e-colorpicker-overflow {
   font-size: 22px;
 }
 
-/*! Form tailwind theme wise override definitions and variables */
 /*! Form tailwind theme wise override definitions and variables */
 /*! data-form layout */
-.e-data-form {
-  /* stylelint-disable property-no-vendor-prefix */
-  /* stylelint-enable property-no-vendor-prefix */
-}
 .e-data-form .e-form-label {
   font-size: 12px;
   margin-bottom: 4px;
@@ -8947,6 +8905,9 @@ body.e-colorpicker-overflow {
 .e-data-form .e-form-layout {
   display: grid;
 }
+.e-data-form {
+  /* stylelint-disable property-no-vendor-prefix */
+}
 .e-data-form .e-grid-col-2 {
   -ms-grid-columns: repeat(2, 1fr);
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -8991,6 +8952,9 @@ body.e-colorpicker-overflow {
   -ms-grid-columns: repeat(12, 1fr);
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
+.e-data-form {
+  /* stylelint-enable property-no-vendor-prefix */
+}
 .e-data-form .e-colspan-1 {
   grid-column: span 1/span 1;
 }
@@ -9141,7 +9105,6 @@ body.e-colorpicker-overflow {
   margin-top: 0;
 }
 
-/*! Form tailwind theme wise override definitions and variables */
 /*! data-form theme */
 .e-data-form .e-form-label {
   color: #343a40;

package/styles/bootstrap5.scss

@@ -1,50 +1,44 @@
-@use 'ej2-base/styles/definition/bootstrap5' as *;
 @use 'signature/bootstrap5-definition' as *;
-@use 'signature/all.bootstrap5' as *;
+@use 'signature/all' as *;
 
 @use 'input/bootstrap5-definition' as *;
 @use 'input/icons/bootstrap5' as *;
-@use 'input/all.bootstrap5' as *;
-@use 'input/bigger.bootstrap5' as *;
+@use 'input/all' as *;
+@use 'input/bigger' as *;
 @use 'numerictextbox/bootstrap5-definition' as *;
 @use 'numerictextbox/icons/bootstrap5' as *;
-@use 'numerictextbox/all.bootstrap5' as *;
-@use 'numerictextbox/bigger.bootstrap5' as *;
+@use 'numerictextbox/all' as *;
+@use 'numerictextbox/bigger' as *;
 @use 'maskedtextbox/bootstrap5-definition' as *;
-@use 'maskedtextbox/all.bootstrap5' as *;
-@use 'maskedtextbox/bigger.bootstrap5' as *;
-@use 'ej2-popups/styles/popup/bootstrap5-definition' as *;
-@use 'ej2-popups/styles/tooltip/bootstrap5-definition' as *;
+@use 'maskedtextbox/all' as *;
+@use 'maskedtextbox/bigger' as *;
 @use 'slider/bootstrap5-definition' as *;
-@use 'slider/all.bootstrap5' as *;
-@use 'slider/bigger.bootstrap5' as *;
+@use 'slider/all' as *;
+@use 'slider/bigger' as *;
 @use 'textbox/bootstrap5-definition' as *;
-@use 'textbox/all.bootstrap5' as *;
-@use 'textbox/bigger.bootstrap5' as *;
+@use 'textbox/all' as *;
+@use 'textbox/bigger' as *;
 @use 'textarea/bootstrap5-definition' as *;
-@use 'textarea/all.bootstrap5' as *;
-@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
-@use 'ej2-popups/styles/spinner/bootstrap5-definition' as *;
+@use 'textarea/all' as *;
 @use 'uploader/bootstrap5-definition' as *;
 @use 'uploader/icons/bootstrap5' as *;
-@use 'uploader/all.bootstrap5' as *;
-@use 'uploader/bigger.bootstrap5' as *;
-@use 'ej2-splitbuttons/styles/split-button/bootstrap5-definition' as *;
+@use 'uploader/all' as *;
+@use 'uploader/bigger' as *;
 @use 'color-picker/bootstrap5-definition' as *;
 @use 'color-picker/icons/bootstrap5' as *;
-@use 'color-picker/all.bootstrap5' as *;
-@use 'color-picker/bigger.bootstrap5' as *;
+@use 'color-picker/all' as *;
+@use 'color-picker/bigger' as *;
 @use 'rating/bootstrap5-definition' as *;
-@use 'rating/all.bootstrap5' as *;
-@use 'rating/bigger.bootstrap5' as *;
+@use 'rating/all' as *;
+@use 'rating/bigger' as *;
 @use 'data-form/bootstrap5-definition' as *;
-@use 'data-form/all.bootstrap5' as *;
+@use 'data-form/all' as *;
 @use 'otp-input/bootstrap5-definition' as *;
-@use 'otp-input/all.bootstrap5' as *;
-@use 'otp-input/bigger.bootstrap5' as *;
+@use 'otp-input/all' as *;
+@use 'otp-input/bigger' as *;
 @use 'speech-to-text/bootstrap5-definition' as *;
 @use 'speech-to-text/icons/bootstrap5' as *;
-@use 'speech-to-text/all.bootstrap5' as *;
-@use 'speech-to-text/bigger.bootstrap5' as *;
+@use 'speech-to-text/all' as *;
+@use 'speech-to-text/bigger' as *;
 @use 'smart-textarea/bootstrap5-definition' as *;
-@use 'smart-textarea/all.bootstrap5' as *;
+@use 'smart-textarea/all' as *;

package/styles/color-picker/_all.scss

@@ -1,2 +1,2 @@
-@use 'layout' as *;
-@use 'theme' as *;
+@forward 'layout';
+@forward 'theme';

package/styles/color-picker/_bds-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/bds' as *;
-@use 'ej2-buttons/styles/button/bds-definition' as *;
-@forward 'ej2-base/styles/definition/bds';
-@forward 'ej2-buttons/styles/button/bds-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 1px 4px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -186,6 +184,7 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;
 
 /* stylelint-disable */
 .e-colorpicker-wrapper{

package/styles/color-picker/_bigger.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('color-picker-bigger') {
   .e-bigger .e-colorpicker-wrapper,
   .e-bigger.e-colorpicker-wrapper,
@@ -72,6 +72,9 @@
         @else {
           width: $cpicker-bigger-container-width;
         }
+        @media screen and (max-width: 480px) {
+          width: $cpicker-media-width;
+        }
 
         & .e-switch-ctrl-btn .e-ctrl-btn .e-btn {
           @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {

package/styles/color-picker/_bootstrap-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
-@forward 'ej2-base/styles/definition/bootstrap-dark';
-@forward 'ej2-buttons/styles/button/bootstrap-dark-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 0 6px !default;
 $cpicker-bigger-split-btn-padding: $cpicker-split-btn-padding !default;
 $cpicker-split-line-height: 17px !default;
@@ -180,3 +178,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_bootstrap-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
-@forward 'ej2-base/styles/definition/bootstrap';
-@forward 'ej2-buttons/styles/button/bootstrap-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 0 6px !default;
 $cpicker-bigger-split-btn-padding: $cpicker-split-btn-padding !default;
 $cpicker-split-line-height: 17px !default;
@@ -180,3 +178,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_bootstrap4-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
-@forward 'ej2-base/styles/definition/bootstrap4';
-@forward 'ej2-buttons/styles/button/bootstrap4-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 8px 9px 7px 9px !default;
 $cpicker-bigger-split-btn-padding: 10px !default;
 $cpicker-split-line-height: 17px !default;
@@ -179,3 +177,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_bootstrap5-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
-@forward 'ej2-base/styles/definition/bootstrap5-dark';
-@forward 'ej2-buttons/styles/button/bootstrap5-dark-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 5px 8px !default;
 $cpicker-bigger-split-btn-padding: 6px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -188,3 +186,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_bootstrap5-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap5' as *;
-@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
-@forward 'ej2-base/styles/definition/bootstrap5';
-@forward 'ej2-buttons/styles/button/bootstrap5-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 5px 8px !default;
 $cpicker-bigger-split-btn-padding: 6px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -188,3 +186,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_bootstrap5.3-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
-@use 'ej2-buttons/styles/button/bootstrap5.3-definition' as *;
-@forward 'ej2-base/styles/definition/bootstrap5.3';
-@forward 'ej2-buttons/styles/button/bootstrap5.3-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 5px 8px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -192,3 +190,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_fabric-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/fabric-dark' as *;
-@use 'ej2-buttons/styles/button/fabric-dark-definition' as *;
-@forward 'ej2-base/styles/definition/fabric-dark';
-@forward 'ej2-buttons/styles/button/fabric-dark-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 0 5px !default;
 $cpicker-bigger-split-btn-padding: 0 7px !default;
 $cpicker-split-line-height: 16px !default;
@@ -180,3 +178,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_fabric-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/fabric' as *;
-@use 'ej2-buttons/styles/button/fabric-definition' as *;
-@forward 'ej2-base/styles/definition/fabric';
-@forward 'ej2-buttons/styles/button/fabric-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 0 5px !default;
 $cpicker-bigger-split-btn-padding: 0 7px !default;
 $cpicker-split-line-height: 16px !default;
@@ -179,3 +177,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_fluent-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/fluent-dark' as *;
-@use 'ej2-buttons/styles/button/fluent-dark-definition' as *;
-@forward 'ej2-buttons/styles/button/fluent-dark-definition';
-@forward 'ej2-base/styles/definition/fluent-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 5px 8px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -187,3 +185,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_fluent-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/fluent' as *;
-@use 'ej2-buttons/styles/button/fluent-definition' as *;
-@forward 'ej2-buttons/styles/button/fluent-definition';
-@forward 'ej2-base/styles/definition/fluent';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 5px 8px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -187,3 +185,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_fluent2-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/fluent2' as *;
-@use 'ej2-buttons/styles/button/fluent2-definition' as *;
-@forward 'ej2-base/styles/definition/fluent2';
-@forward 'ej2-buttons/styles/button/fluent2-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 1px 4px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -191,3 +189,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_fusionnew-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/fusionnew' as *;
-@use 'ej2-buttons/styles/button/fluent2-definition' as *;
-@forward 'ej2-base/styles/definition/fusionnew';
-@forward 'ej2-buttons/styles/button/fluent2-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 5px 8px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -184,3 +182,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_highcontrast-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@use 'ej2-buttons/styles/button/highcontrast-definition' as *;
-@forward 'ej2-base/styles/definition/highcontrast';
-@forward 'ej2-buttons/styles/button/highcontrast-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 0 5px !default;
 $cpicker-bigger-split-btn-padding: 0 7px !default;
 $cpicker-split-line-height: 16px !default;
@@ -179,3 +177,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_highcontrast-light-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
-@use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
-@forward 'ej2-base/styles/definition/highcontrast-light';
-@forward 'ej2-buttons/styles/button/highcontrast-light-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 0 5px !default;
 $cpicker-bigger-split-btn-padding: 0 7px !default;
 $cpicker-split-line-height: 16px !default;
@@ -179,3 +177,4 @@ $show-value-palette-width: 270px !default;
 $color-half-border-width: .5px !default;
 $selected-value-float-text-right: -12px !default;
 $cpicker-cont-color-ctrl-btn-padding-top: 12px !default;
+$cpicker-media-width: 344px !default;