feat(upload): update styling to match the design

telerik · May 7, 2020 · 553a69e · 553a69e
1 parent 889719e
commit 553a69e
Show file tree

Hide file tree

Showing 12 changed files with 2,146 additions and 384 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -1740,16 +1740,20 @@ $upload-bg: $component-bg !default;
 $upload-text: $component-text !default;
 $upload-border: $component-border !default;
 
-$upload-dropzone-padding-x: $toolbar-padding-x !default;
-$upload-dropzone-padding-y: $toolbar-padding-y !default;
+$upload-dropzone-padding-x: map-get( $spacing, 2 ) !default;
+$upload-dropzone-padding-y: map-get( $spacing, 2 ) !default;
 $upload-dropzone-spacing: ($upload-dropzone-padding-x * 2) !default;
 $upload-dropzone-bg: $toolbar-bg !default;
 $upload-dropzone-text: $toolbar-text !default;
 $upload-dropzone-border: $toolbar-border !default;
+$upload-dropzone-hover-bg: try-shade( $upload-dropzone-bg, .2) !default;
 
 $upload-item-padding-x: $spacer !default;
 $upload-item-padding-y: $spacer !default;
 
+$upload-multiple-items-spacing: 12px !default;
+
+$upload-validation-font-size: 11px !default;
 $upload-icon-spacing: $upload-dropzone-padding-x !default;
 
 $upload-item-image-width: 24px !default;

diff --git a/packages/bootstrap/scss/dropzone/_layout.scss b/packages/bootstrap/scss/dropzone/_layout.scss
@@ -3,7 +3,7 @@
 @include exports( "dropzone/layout/bootstrap" ) {
     .k-dropzone-inner {
         >.k-icon {
-            margin-bottom: $upload-dropzone-padding-y * 4;
+            margin-bottom: $upload-dropzone-padding-y * 3;
         }
 
         .k-dropzone-hint {

diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -1753,15 +1753,19 @@ $upload-dropzone-spacing: ($upload-dropzone-padding-x * 2) !default;
 $upload-dropzone-bg: $toolbar-bg !default;
 $upload-dropzone-text: $toolbar-text !default;
 $upload-dropzone-border: $toolbar-border !default;
+$upload-dropzone-hover-bg: $hovered-bg !default;
 
 $upload-item-padding-x: $cell-padding !default;
 $upload-item-padding-y: $cell-padding !default;
 
+$upload-multiple-items-spacing: 12px !default;
+
+$upload-validation-font-size: 11px !default;
 $upload-icon-spacing: $upload-dropzone-padding-x !default;
 
-$upload-item-image-width: 24px !default;
-$upload-item-image-height: 34px !default;
-$upload-item-image-border: 2px !default;
+$upload-item-image-width: 30px !default;
+$upload-item-image-height: 30px !default;
+$upload-item-image-border: 0 !default; // TODO: remove
 
 $upload-group-icon-size: $icon-size-lg !default;