@syncfusion/ej2-inputs 20.4.54 → 21.1.37

package/styles/rating/_tailwind-definition.scss

@@ -1,36 +1,37 @@
-$rating-li-font-size: 20px !default;
+$rating-li-font-size: $font-icon-20 !default;
 $rating-li-padding: 4px !default;
 $rating-li-line-height: 3px !default;
+$rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 4px !default;
 $rating-label-bottom-margin: 6px !default;
 $rating-label-right-margin: 10px !default;
 $rating-label-top-margin: 8px !default;
 $rating-label-left-margin: 4px !default;
-$rating-label-font-size: 12px !default;
+$rating-label-font-size: $text-xs !default;
 $rating-label-line-height: 18px !default;
-$rating-reset-font-size : 16px !default;
+$rating-reset-font-size : $font-icon-16 !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
-$rating-small-li-font-size: 16px !default;
+$rating-small-li-font-size: $font-icon-16 !default;
 $rating-small-li-line-height: 10px !default;
-$rating-small-li-hover-font-size: 18px !default;
-$rating-small-label-font-size: 10px !default;
+$rating-small-li-min-width-height: 24px !default;
+$rating-small-label-font-size: $text-xxs !default;
 $rating-small-label-line-height: 16px !default;
-$rating-small-reset-font-size : 12px !default;
+$rating-small-reset-font-size : $font-icon-12 !default;
 
-$rating-bigger-li-font-size: 24px !default;
+$rating-bigger-li-font-size: $font-icon-24 !default;
 $rating-bigger-li-line-height: 18px !default;
-$rating-bigger-li-hover-font-size: 26px !default;
-$rating-bigger-label-font-size: 14px !default;
+$rating-bigger-li-min-width-height: 32px !default;
+$rating-bigger-label-font-size: $text-2xl !default;
 $rating-bigger-label-line-height: 22px !default;
-$rating-bigger-reset-font-size : 20px !default;
+$rating-bigger-reset-font-size : $font-icon-20 !default;
 
-$rating-bigger-small-li-font-size: 22px !default;
+$rating-bigger-small-li-font-size: $font-icon-22 !default;
 $rating-bigger-small-li-line-height: 15px !default;
-$rating-bigger-small-li-hover-font-size: 23px !default;
-$rating-bigger-small-label-font-size: 12px !default;
+$rating-bigger-small-li-min-width-height: 30px !default;
+$rating-bigger-small-label-font-size: $text-xs !default;
 $rating-bigger-small-label-line-height: 18px !default;
-$rating-bigger-small-reset-font-size : 18px !default;
+$rating-bigger-small-reset-font-size : $font-icon-18 !default;
 
 $rating-border-width: 1px !default;
 

package/styles/rating/_theme.scss

@@ -22,8 +22,13 @@
     .e-rating-item-container {
       .e-rating-icon {
         -webkit-text-fill-color: transparent;
-        -webkit-text-stroke: $rating-border-width $rating-unrated-bg-color;
-        @if ($skin-name =='tailwind') {
+        @if ($skin-name == 'Material3') {
+          -webkit-text-stroke: $rating-border-width transparent;
+        }
+        @else {
+          -webkit-text-stroke: $rating-border-width $rating-unrated-bg-color;
+        }
+        @if ($skin-name == 'Material3' or $skin-name =='tailwind') {
           background: $rating-unrated-bg-color;
           background-clip: text;
           /* stylelint-disable property-no-vendor-prefix */
@@ -120,6 +125,13 @@
       .e-rating-item-container {
         .e-rating-icon {
           -webkit-text-stroke: $rating-border-width $rating-unrated-disabled-bg-color;
+          @if ($skin-name == 'Material3') {
+            background: $rating-unrated-disabled-bg-color;
+            background-clip: text;
+            /* stylelint-disable property-no-vendor-prefix */
+            -webkit-background-clip: text;
+            /* stylelint-enable property-no-vendor-prefix */
+          }
         }
 
         &.e-rating-selected .e-rating-icon,

package/styles/rating/bootstrap-dark.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 9px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 4px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 16px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
   line-height: 9px;
+  min-width: 34px;
+  min-height: 34px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/bootstrap.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 9px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 4px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 16px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
   line-height: 9px;
+  min-width: 34px;
+  min-height: 34px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/bootstrap4.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 11px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 4px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 13px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 9px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/bootstrap5-dark.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 30px;
+  min-height: 30px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 6px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 13px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
   line-height: 13px;
+  min-width: 34px;
+  min-height: 34px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/bootstrap5.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 30px;
+  min-height: 30px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 6px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 13px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
   line-height: 13px;
+  min-width: 34px;
+  min-height: 34px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/fabric-dark.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 10px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
   line-height: 21px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 19px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/fabric.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 13px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
   line-height: 21px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 19px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/fluent-dark.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 13px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
   line-height: 21px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 19px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/fluent.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 13px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
   line-height: 21px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 19px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/highcontrast-light.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 13px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
   line-height: 21px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 19px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/highcontrast.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -129,6 +131,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 13px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -144,6 +148,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
   line-height: 21px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -161,6 +167,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 19px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/material-dark.css

@@ -35,6 +35,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -130,6 +132,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 9px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -145,6 +149,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 21px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -162,6 +168,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 17px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/material.css

@@ -35,6 +35,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -130,6 +132,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 9px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -145,6 +149,8 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 21px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -162,6 +168,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 17px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/tailwind-dark.css

@@ -35,6 +35,8 @@
   padding: 4px;
   line-height: 3px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -130,6 +132,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 10px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -145,10 +149,12 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 18px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
-  font-size: 14px;
+  font-size: 24px;
   line-height: 22px;
 }
 .e-bigger.e-rating-container .e-reset,
@@ -162,6 +168,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 22px;
   line-height: 15px;
+  min-width: 30px;
+  min-height: 30px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/rating/tailwind.css

@@ -35,6 +35,8 @@
   padding: 4px;
   line-height: 3px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -130,6 +132,8 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 10px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -145,10 +149,12 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 18px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
-  font-size: 14px;
+  font-size: 24px;
   line-height: 22px;
 }
 .e-bigger.e-rating-container .e-reset,
@@ -162,6 +168,8 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 22px;
   line-height: 15px;
+  min-width: 30px;
+  min-height: 30px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,