@syncfusion/ej2-inputs 19.4.52 → 20.1.47

package/styles/textbox/fluent.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/fluent-definition.scss';
+@import '../input/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/uploader/_fluent-dark-definition.scss

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

package/styles/uploader/_layout.scss

@@ -36,6 +36,10 @@
 
           .e-file-container .e-file-size {
             font-size: $list-item-status-font-size;
+            @if $skin-name == 'tailwind' {
+              font-size: $list-item-file-size-font-size;
+              line-height: 22px;
+            }
             padding: $file-size-padding;
           }
 
@@ -434,6 +438,9 @@
         font-size: $list-items-font-size-smaller;
         height: 100%;
         line-height: $list-line-height;
+        @if $skin-name == 'tailwind' {
+          line-height: $list-line-height-smaller;
+        }
         min-height: $li-min-height;
         position: relative;
 
@@ -479,6 +486,10 @@
             display: block;
             font-size: $list-item-status-font-size-smaller;
             padding: $file-size-padding-smaller;
+            @if $skin-name == 'tailwind' {
+              font-size: $list-item-file-size-font-size-smaller;
+              line-height: 18px;
+            }
           }
 
           #{if(&, '&', '*')} .e-file-status,

package/styles/uploader/_tailwind-definition.scss

@@ -77,23 +77,26 @@ $ie-abort-icon-position-value: 12px !default;
 
 $upload-font-family: inherit !default;
 $drop-area-font-size-smaller: $text-sm !default;
-$drop-area-font-size: 15px !default;
+$drop-area-font-size: $text-base !default;
 $drop-zone-margin: 3px !default;
 $header-padding: 12px 0 12px 12px !default;
-$drop-area-padding-left: 15px !default;
+$drop-area-padding-left: 16px !default;
 $drop-area-padding-left-smaller: 12px !default;
 $file-name-font-size-smaller: $text-sm !default;
-$file-name-font-size: 15px !default;
-$list-item-status-font-size-smaller: $text-xs !default;
-$list-item-status-font-size: $text-xs !default;
+$file-name-font-size: $text-base !default;
+$list-item-status-font-size-smaller: $text-sm !default;
+$list-item-status-font-size: $text-base !default;
+$list-item-file-size-font-size-smaller: $text-xs !default;
+$list-item-file-size-font-size: $text-sm !default;
 $list-item-status-bigger-font-size: $text-sm !default;
 $list-item-margin-left-smaller: 12px !default;
-$list-item-margin-left: 15px !default;
-$list-line-height: 22px !default;
-$remove-icon-margin: 15px !default;
+$list-item-margin-left: 12px !default;
+$list-line-height: 24px !default;
+$list-line-height-smaller: 22px !default;
+$remove-icon-margin: 16px !default;
 $remove-icon-margin-smaller: 12px !default;
 $action-buttons-margin-smaller: 8px !default;
-$footer-buttons-margin: 15px !default;
+$footer-buttons-margin: 12px !default;
 $delete-icon-padding-smaller: 15px !default;
 $delete-icon-padding: 24px !default;
 $remove-icon-right: $zero-value !default;
@@ -101,10 +104,10 @@ $remove-icon-top-smaller: 50% !default;
 $remove-icon-before-left: 9px !default;
 $remove-icon-before-top: 9px !default;
 $remove-icon-margin-top: -24px !default;
-$file-name-padding-top-smaller: 12px !default;
-$file-name-padding-top: 15px !default;
-$file-size-padding: 10px $zero-value !default;
-$file-size-padding-smaller: 4px $zero-value !default;
+$file-name-padding-top-smaller: 8px !default;
+$file-name-padding-top: 12px !default;
+$file-size-padding: 2px $zero-value !default;
+$file-size-padding-smaller: 2px $zero-value !default;
 $progress-bar-wrapper-width: 95% !default;
 $progress-bar-top-paddding: 6px !default;
 $progress-bar-bottom-paddding: 11px !default;
@@ -117,7 +120,7 @@ $progress-inner-wrap-height-smaller: 4px !default;
 $progress-bar-height-smaller: 4px !default;
 $remove-icon-before-left-bigger: 12px !default;
 $remove-icon-before-top-bigger: 12px !default;
-$list-items-height: 108px !default;
+$list-items-height: 96px !default;
 $progress-bar-text-right: 16px !default;
 $progress-bar-text-top: -36px !default;
 $progress-bar-wrapper-width-bigger: 95% !default;
@@ -197,6 +200,7 @@ $disabled-state: $icon-color-disabled !default;
 $remove-icon-disabled-color:  $zero-value !default;
 $drop-text-color: $content-text-color !default;
 $file-drop-text-color: $content-text-color-alt2 !default;
+$file-status-color: $content-text-color-alt2 !default;
 $progress-text-color: $content-text-color-alt3 !default;
 $file-size-color: $content-text-color-alt3 !default;
 $upload-success-color: $success !default;
@@ -209,6 +213,17 @@ $list-bottom-border: 1px solid $border-light !default;
 $upload-border: 1px dashed $border-dark !default;
 $drag-hover-border: 2px dashed $primary !default;
 
+// Upload flat button custom styling
+$upload-btn-tap-highlight: transparent !default;
+$upload-flat-btn-bgcolor: $secondary-bg-color !default;
+$upload-flat-btn-border-color: $secondary-border-color !default;
+$upload-flat-btn-box-shadow: $shadow-sm !default;
+$upload-flat-btn-color: $secondary-text-color !default;
+// Upload primary button custom styling
+$upload-btn-primary-bgcolor: $primary-bg-color !default;
+$upload-btn-primary-border-color: $primary-border-color !default;
+$upload-btn-primary-color: $primary-text-color !default;
+
 .e-upload .e-upload-actions,
 .e-bigger.e-small .e-upload .e-upload-actions {
   background-color: $content-bg-color-alt1;

package/styles/uploader/_theme.scss

@@ -10,6 +10,7 @@
 
     #{if(&, '&', '*')} .e-file-drop {
       color: $file-drop-text-color;
+      vertical-align: middle;
     }
 
     #{if(&, '&', '*')} .e-upload-files {
@@ -35,7 +36,7 @@
           .e-file-status,
           .e-file-information {
             color: $drop-text-color;
-            @if $skin-name == 'FluentUI' {
+            @if $skin-name == 'FluentUI' or $skin-name == 'tailwind' {
               color: $file-status-color;
             }
           }
@@ -110,7 +111,29 @@
   }
 
   .e-upload-drag-hover {
-    outline: $drag-hover-border;
+    @if $skin-name == 'FluentUI' or $skin-name == 'tailwind' {
+      border-color: transparent;
+    }
+  }
+
+  .e-upload .e-upload-actions .e-file-clear-btn.e-flat:not(:hover) {
+    @if $skin-name == 'tailwind' {
+      // sass-lint:disable no-vendor-prefixes
+      -webkit-tap-highlight-color: $upload-btn-tap-highlight;
+      background-color: $upload-flat-btn-bgcolor;
+      border-color: $upload-flat-btn-border-color;
+      box-shadow: $upload-flat-btn-box-shadow;
+      color: $upload-flat-btn-color;
+    }
   }
 
+  .e-upload .e-upload-actions .e-file-upload-btn.e-flat.e-primary:not(:hover) {
+    @if $skin-name == 'tailwind' {
+      // sass-lint:disable no-vendor-prefixes
+      -webkit-tap-highlight-color: $upload-btn-tap-highlight;
+      background-color: $upload-btn-primary-bgcolor;
+      border-color: $upload-btn-primary-border-color;
+      color: $upload-btn-primary-color;
+    }
+  }
 }

package/styles/uploader/bootstrap-dark.css

@@ -979,6 +979,7 @@
 
 .e-upload .e-file-drop {
   color: #f0f0f0;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -1067,7 +1068,3 @@
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }
-
-.e-upload-drag-hover {
-  outline: 2px dashed #0070f0;
-}

package/styles/uploader/bootstrap.css

@@ -979,6 +979,7 @@
 
 .e-upload .e-file-drop {
   color: #333;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -1067,7 +1068,3 @@
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }
-
-.e-upload-drag-hover {
-  outline: 2px dashed #317ab9;
-}

package/styles/uploader/bootstrap4.css

@@ -979,6 +979,7 @@
 
 .e-upload .e-file-drop {
   color: #212529;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -1067,7 +1068,3 @@
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }
-
-.e-upload-drag-hover {
-  outline: dashed 2px #007bff;
-}

package/styles/uploader/bootstrap5-dark.css

@@ -985,6 +985,7 @@
 
 .e-upload .e-file-drop {
   color: #ced4da;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -1073,7 +1074,3 @@
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }
-
-.e-upload-drag-hover {
-  outline: 1px dashed #0d6efd;
-}

package/styles/uploader/bootstrap5.css

@@ -985,6 +985,7 @@
 
 .e-upload .e-file-drop {
   color: #495057;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -1073,7 +1074,3 @@
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }
-
-.e-upload-drag-hover {
-  outline: 1px dashed #0d6efd;
-}

package/styles/uploader/fabric-dark.css

@@ -979,6 +979,7 @@
 
 .e-upload .e-file-drop {
   color: #dadada;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -1067,7 +1068,3 @@
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }
-
-.e-upload-drag-hover {
-  outline: 2px dashed #0074cc;
-}

package/styles/uploader/fabric.css

@@ -979,6 +979,7 @@
 
 .e-upload .e-file-drop {
   color: #333;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -1067,7 +1068,3 @@
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }
-
-.e-upload-drag-hover {
-  outline: 2px dashed #0078d6;
-}