@syncfusion/ej2-inputs 33.2.15 → 34.1.30

package/styles/color-picker/_layout.scss

@@ -1,4 +1,6 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
+@use '@syncfusion/ej2-buttons/styles/button/variables' as btn;
+
 @mixin btn-icon-layout {
   @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
     background-color: $cpicker-tile-active-border-color;
@@ -68,14 +70,14 @@
         & .e-selected-color {
           background: $cpicker-transparent-bg-pattern;
           background-size: 8px;
-          border-radius: $btn-border-radius;
+          border-radius: btn.$btn-border-radius;
           height: $cpicker-split-btn-icon-height;
           margin-top: $color-zero-padding-margin;
           position: relative;
           width: $cpicker-split-btn-icon-height;
 
           & .e-split-preview {
-            border-radius: $btn-border-radius;
+            border-radius: btn.$btn-border-radius;
           }
         }
 
@@ -219,6 +221,11 @@
       @else {
         width: $cpicker-container-width;
       }
+
+      @media screen and (max-width: 480px) {
+        width: $cpicker-media-width;
+      }
+
       @if $skin-name == 'bootstrap4' {
         background-color: $content-bg;
         border: 1px solid $cpicker-shadow;

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

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/material-dark' as *;
-@use 'ej2-buttons/styles/button/material-dark-definition' as *;
-@forward 'ej2-base/styles/definition/material-dark';
-@forward 'ej2-buttons/styles/button/material-dark-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 0 4px !default;
 $cpicker-bigger-split-btn-padding: 0 6px !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/_material-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/material' as *;
-@use 'ej2-buttons/styles/button/material-definition' as *;
-@forward 'ej2-base/styles/definition/material';
-@forward 'ej2-buttons/styles/button/material-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 0 4px !default;
 $cpicker-bigger-split-btn-padding: 0 6px !default;
 $cpicker-split-line-height: 14px !default;
@@ -182,3 +180,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/_material3-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@use 'ej2-buttons/styles/button/material3-dark-definition' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
-@forward 'ej2-buttons/styles/button/material3-dark-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 3px 8px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -197,3 +195,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/_material3-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@use 'ej2-buttons/styles/button/material3-definition' as *;
-@forward 'ej2-base/styles/definition/material3';
-@forward 'ej2-buttons/styles/button/material3-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 3px 8px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -197,3 +195,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/_tailwind-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@use 'ej2-buttons/styles/button/tailwind-dark-definition' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
-@forward 'ej2-buttons/styles/button/tailwind-dark-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 4px 8px !default;
 $cpicker-bigger-split-btn-padding: 6px 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/_tailwind-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@use 'ej2-buttons/styles/button/tailwind-definition' as *;
-@forward 'ej2-base/styles/definition/tailwind';
-@forward 'ej2-buttons/styles/button/tailwind-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 4px 8px !default;
 $cpicker-bigger-split-btn-padding: 6px 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/_tailwind3-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
-@forward 'ej2-buttons/styles/button/tailwind3-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $cpicker-split-btn-padding: 3px 8px !default;
 $cpicker-bigger-split-btn-padding: 7px 12px !default;
 $cpicker-split-line-height: 14px !default;
@@ -202,3 +200,4 @@ $color-slider-preview-previous-top: 20px !default;
 $color-picker-preview-tail-top: 10px !default;
 $color-float-text-font-size: 16px !default;
 $color-switch-ctrl-btn-height: 64px !default;
+$cpicker-media-width: 344px !default;

package/styles/color-picker/_theme.scss

@@ -1,5 +1,7 @@
 @use 'sass:color';
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
+@use '@syncfusion/ej2-buttons/styles/button/variables' as btn;
+
 @include export-module('color-picker-theme') {
   .e-container {
     @if $skin-name == 'Material3' {
@@ -85,18 +87,18 @@
     &.e-disabled {
       & .e-value-switch-btn,
       & .e-mode-switch-btn {
-        color: $btn-disabled-color;
+        color: btn.$btn-disabled-color;
 
         &:focus {
           background-color: transparent;
-          color: $btn-disabled-color;
+          color: btn.$btn-disabled-color;
           outline: none;
           outline-offset: unset;
         }
 
         &:active {
           background-color: transparent;
-          color: $btn-disabled-color;
+          color: btn.$btn-disabled-color;
         }
       }
     }
@@ -132,7 +134,7 @@
           color: $cpicker-handler-tooltip-color;
         }
         @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          background-color: $btn-hover-bgcolor;
+          background-color: btn.$btn-hover-bgcolor;
           color: $cpicker-handler-tooltip-color;
         }
       }
@@ -146,10 +148,10 @@
           color: $gray-700;
         }
         @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          background-color: $btn-focus-bgcolor;
-          border-color: $btn-focus-border-color;
-          box-shadow: $btn-active-box-shadow;
-          color: $btn-active-color;
+          background-color: btn.$btn-focus-bgcolor;
+          border-color: btn.$btn-focus-border-color;
+          box-shadow: btn.$btn-active-box-shadow;
+          color: btn.$btn-active-color;
         }
       }
 
@@ -161,9 +163,9 @@
           color: $cpicker-handler-tooltip-color;
         }
         @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          background-color: $btn-active-bgcolor;
-          box-shadow: $btn-active-box-shadow;
-          color: $btn-active-color;
+          background-color: btn.$btn-active-bgcolor;
+          box-shadow: btn.$btn-active-box-shadow;
+          color: btn.$btn-active-color;
         }
       }
 
@@ -174,13 +176,13 @@
         }
         box-shadow: none;
         @if $skin-name != 'tailwind' and $skin-name != 'tailwind3' and $skin-name != 'FluentUI' and $skin-name != 'fluent2'{
-          color: $btn-disabled-bgcolor;
+          color: btn.$btn-disabled-bgcolor;
         }
         @if $skin-name == 'fluent2' {
           color: $icon-color-disabled;
         }
         @if $skin-name == 'tailwind' {
-          border-color: $btn-disabled-border-color;
+          border-color: btn.$btn-disabled-border-color;
         }
         @if $skin-name == 'Material3' {
           border: none;
@@ -189,7 +191,7 @@
     }
   }
 
-  #{if(&, '&', '*')} .e-color-picker .e-selected-value {
+  * .e-color-picker .e-selected-value {
     & .e-css.e-btn.e-flat {
       @if $skin-name == 'bootstrap4' {
         background-color: $cpicker-handler-tooltip-color;

package/styles/color-picker/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';