@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/upload/_layout.scss

@@ -1,17 +1,17 @@
 @include exports("upload/layout") {
 
     .k-upload {
-        border-width: $upload-border-width;
+        border-width: $kendo-upload-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $upload-font-family;
-        font-size: $upload-font-size;
-        line-height: $upload-line-height;
+        font-family: $kendo-upload-font-family;
+        font-size: $kendo-upload-font-size;
+        line-height: $kendo-upload-line-height;
         position: relative;
         display: block;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -24,10 +24,11 @@
         }
 
         // Drop zone
-        .k-dropzone {
-            padding: $upload-dropzone-padding-y $upload-dropzone-padding-x;
+        .k-dropzone,
+        .k-upload-dropzone {
+            padding: $kendo-upload-dropzone-padding-y $kendo-upload-dropzone-padding-x;
             border-width: 0;
-            text-align: right;
+            text-align: end;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -51,7 +52,7 @@
                 position: relative;
 
                 > .k-icon {
-                    margin-right: $upload-icon-spacing;
+                    margin-inline-end: $kendo-upload-icon-spacing;
                 }
             }
 
@@ -72,7 +73,7 @@
 
         // Upload files list
         .k-upload-files {
-            max-height: $upload-max-height;
+            max-height: $kendo-upload-max-height;
             overflow-y: auto;
             margin: 0;
             padding: 0;
@@ -97,7 +98,7 @@
             }
 
             .k-file {
-                padding: $upload-item-padding-y $upload-item-padding-x calc(#{$upload-item-padding-y} + #{$upload-progress-thickness});
+                padding: $kendo-upload-item-padding-y $kendo-upload-item-padding-x calc(#{$kendo-upload-item-padding-y} + #{$kendo-upload-progress-thickness});
                 border-width: 0 0 1px;
                 border-style: solid;
                 outline: none;
@@ -105,6 +106,7 @@
                 align-items: flex-start;
                 position: relative;
             }
+
             .k-file:last-child {
                 border-width: 0;
             }
@@ -118,21 +120,15 @@
                 position: relative;
             }
 
-            .k-upload-status {
-                .k-icon {
-                    vertical-align: middle;
-                }
-            }
-
             .k-upload-pct {
-                margin: 0 $upload-icon-spacing;
+                margin: 0 $kendo-upload-icon-spacing;
                 font-weight: normal;
                 vertical-align: middle;
             }
 
             ~ .k-clear-selected,
             ~ .k-upload-selected {
-                margin-top: -$padding-y;
+                margin-top: -$kendo-padding-md-y;
                 border-width: 0;
             }
 
@@ -145,7 +141,7 @@
             .k-file-name,
             .k-file-size,
             .k-file-validation-message,
-            .k-file-information {
+            .k-file-summary {
                 display: block;
             }
 
@@ -157,34 +153,17 @@
             }
 
             .k-file-size,
-            .k-file-information,
+            .k-file-summary,
             .k-file-validation-message {
-                font-size: $upload-validation-font-size;
+                font-size: $kendo-upload-validation-font-size;
                 line-height: 1;
             }
 
-            .k-file-extension-wrapper,
-            .k-multiple-files-extension-wrapper,
-            .k-file-invalid-extension-wrapper,
-            .k-multiple-files-invalid-extension-wrapper {
-                margin: ($upload-item-image-border / 2) 0;
-                width: 24px;
-                height: 34px;
-                border-width: 2px;
-                border-style: solid;
-                font-size: ($font-size * .57);
-                text-transform: uppercase;
-                position: absolute;
-                top: $upload-item-padding-y;
-            }
 
-            .k-file-group-wrapper,
-            .k-file-invalid-group-wrapper,
-            .k-multiple-files-group-wrapper,
-            .k-multiple-files-invalid-group-wrapper {
+            .k-file-icon-wrapper {
 
-                .k-file-group {
-                    font-size: $upload-group-icon-size;
+                .k-file-icon {
+                    font-size: $kendo-upload-group-icon-size;
                 }
 
                 .k-file-state {
@@ -192,219 +171,56 @@
                 }
             }
 
-            .k-file-invalid-extension-wrapper,
-            .k-multiple-files-invalid-extension-wrapper {
-                font-size: 1.2em;
-            }
-
-            .k-multiple-files-extension-wrapper,
-            .k-multiple-files-invalid-extension-wrapper {
-                margin-top: $padding-y;
-            }
-
             .k-file-state {
                 visibility: hidden;
             }
-
-            // Old icon rendering
-            .k-file-invalid-extension-wrapper + .k-file-name-size-wrapper,
-            .k-file-single > .k-file-extension-wrapper + .k-file-name-size-wrapper {
-                // 24px - image width
-                margin-left: calc( 24px + #{$spacer-x} );
-                // 34px - $upload-item-image-height; 2px - $upload-item-image-border;
-                min-height: 34px + (2px * 2);
-                display: block;
-                overflow: hidden;
-            }
-
-            // Old icon rendering
-            .k-multiple-files-invalid-extension-wrapper + .k-file-name-size-wrapper,
-            .k-multiple-files-extension-wrapper + .k-file-name-size-wrapper {
-                // 24px - image width
-                margin-left: calc( 24px + #{$spacer-x} );
-            }
-
-            // Old icon rendering
-            .k-file-extension-wrapper + .k-file-name-size-wrapper {
-                margin-bottom: -2px;
-
-                .k-file-size,
-                .k-file-information,
-                .k-file-validation-message {
-                    font-size: $font-size-sm * .786;
-                }
-            }
-
-            // Old icon rendering
-            .k-file-extension-wrapper::before,
-            .k-multiple-files-extension-wrapper::before,
-            .k-multiple-files-extension-wrapper::after,
-            .k-file-invalid-extension-wrapper::before,
-            .k-multiple-files-invalid-extension-wrapper::before,
-            .k-multiple-files-invalid-extension-wrapper::after {
-                content: "";
-                border-style: solid;
-                display: inline-block;
-                position: absolute;
-            }
-
-            // Old icon rendering
-            .k-file-extension-wrapper::before,
-            .k-multiple-files-extension-wrapper::before,
-            .k-file-invalid-extension-wrapper::before,
-            .k-multiple-files-invalid-extension-wrapper::before {
-                top: -1px;
-                right: -1px;
-                width: 0;
-                height: 0;
-                border-width: 6px;
-                margin-top: -1px;
-                margin-right: -1px;
-            }
-
-            // Old icon rendering
-            .k-multiple-files-extension-wrapper::after,
-            .k-multiple-files-invalid-extension-wrapper::after {
-                top: -6px;
-                left: -6px;
-                width: 15px;
-                height: 35px;
-                border-width: 2px 0 0 2px;
-            }
-
-            // Old icon rendering
-            .k-file-extension,
-            .k-file-invalid-icon {
-                position: absolute;
-                bottom: 0;
-                line-height: normal;
-            }
-
-            // Old icon rendering
-            .k-file-invalid-icon {
-                margin-left: 4px;
-            }
-
-            .k-file-extension {
-                margin-left: .2em;
-                margin-bottom: .3em;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-width: 100%;
-                left: 0;
-            }
-
-            .k-upload-action {
-                border-width: 0;
-                color: inherit;
-                background: none;
-                box-shadow: none;
-            }
         }
 
-        .k-upload-files .k-file-name-size-wrapper {
-            margin-left: 0;
-            margin-right: 0;
-            min-height: $upload-group-icon-size;
+        .k-upload-files .k-file-info {
+            min-height: $kendo-upload-group-icon-size;
             display: block;
             overflow: hidden;
             flex: 1 0 0;
         }
 
-        // old rendering
-        .k-file-multiple > .k-file-name-size-wrapper {
-            margin-left: $upload-item-padding-x;
-        }
-
         .k-multiple-files-wrapper,
-        .k-file-single > .k-file-name-size-wrapper,
-        .k-file > .k-file-name-size-wrapper {
-            margin-left: $padding-x;
-            margin-right: 0;
-            min-height: $upload-group-icon-size;
+        .k-file-single > .k-file-info {
+            margin-inline-start: $kendo-padding-md-x;
+            min-height: $kendo-upload-group-icon-size;
             display: block;
             overflow: hidden;
             flex: 1 0 0;
         }
 
         .k-multiple-files-wrapper {
-            .k-file-name-size-wrapper {
-                margin-bottom: $upload-multiple-items-spacing;
+            .k-file-info {
+                margin-bottom: $kendo-upload-multiple-items-spacing;
                 display: block;
             }
 
-            .k-file-information {
-                margin-top: -($upload-multiple-items-spacing / 3);
+            .k-file-summary {
+                margin-top: - k-math-div($kendo-upload-multiple-items-spacing, 3);
             }
         }
 
-        // old rendering
-        .k-progress {
-            height: $upload-progress-thickness;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-        }
-
         .k-progressbar {
-            height: $upload-progress-thickness;
+            --kendo-progressbar-height: #{$kendo-upload-progress-thickness};
             position: absolute;
-            bottom: $upload-item-padding-y / 2;
-            // successed
-            width: calc(100% - #{$upload-item-padding-x} * 2);
-
-            .k-progress {
-                position: absolute;
-                width: 100%;
-                max-width: 100%;
-                height: 100%;
-            }
-        }
-
-        .k-file-invalid > .k-progress {
-            width: 100%;
+            left: $kendo-upload-item-padding-x;
+            right: $kendo-upload-item-padding-x;
+            bottom: k-math-div( $kendo-upload-item-padding-y, 2 );
+            width: auto;
         }
 
-
         // Action buttons
         .k-actions {
             border-top-width: 1px;
         }
 
-        // RTL styles
-        &[dir = "rtl"],
-        .k-rtl & {
-            .k-dropzone {
-                text-align: left;
-
-                .k-upload-status > .k-icon {
-                    margin-left: $padding-y-lg;
-                    margin-right: 0;
-                }
-            }
-
-            .k-multiple-files-wrapper,
-            .k-file-single > .k-file-name-size-wrapper,
-            .k-file-multiple > .k-file-name-size-wrapper,
-            .k-file > .k-file-name-size-wrapper {
-                margin-right: $padding-x;
-            }
-
-            .k-button + .k-button {
-                border-right-width: 0;
-            }
-
-            // old rendering
-            .k-progress {
-                left: auto;
-                right: 0;
-            }
-        }
     }
 
-    .k-upload-button {
+    .k-upload-button-wrap {
         position: relative;
-        overflow: hidden;
         direction: ltr;
 
         input {

package/scss/upload/_theme.scss

@@ -2,136 +2,96 @@
 
     .k-upload {
         @include fill(
-            $upload-text,
-            $upload-bg,
-            $upload-border
+            $kendo-upload-text,
+            $kendo-upload-bg,
+            $kendo-upload-border
         );
 
-        .k-dropzone {
+        .k-dropzone,
+        .k-upload-dropzone {
             @include fill(
-                $upload-dropzone-text,
-                $upload-dropzone-bg,
-                $upload-dropzone-border
+                $kendo-upload-dropzone-text,
+                $kendo-upload-dropzone-bg,
+                $kendo-upload-dropzone-border
             );
 
-            &.k-dropzone-hover,
-            &.k-dropzone-hovered {
-                background-color: $upload-dropzone-hover-bg;
+            &.k-hover {
+                background-color: $kendo-upload-dropzone-hover-bg;
             }
 
             .k-dropzone-hint {
-                color: $upload-status-text;
-                opacity: $upload-status-text-opacity;
+                color: $kendo-upload-status-text;
+                opacity: $kendo-upload-status-text-opacity;
             }
 
         }
 
         .k-upload-files,
         .k-file {
-            border-color: $upload-border;
+            border-color: $kendo-upload-border;
         }
 
         .k-file {
-
             &.k-focus {
-                box-shadow: inset $upload-focused-shadow;
-            }
-
-            .k-upload-action.k-focus {
-                box-shadow: $upload-focused-shadow;
+                box-shadow: inset $kendo-upload-focus-shadow;
             }
 
         }
 
         .k-upload-status {
-            color: $upload-status-text;
-            opacity: $upload-status-text-opacity;
+            color: $kendo-upload-status-text;
+            opacity: $kendo-upload-status-text-opacity;
         }
 
         // Upload status: uploading
         .k-file-progress {
-
-            .k-file-name {
-                color: $upload-progress-text;
-            }
-            .k-progress {
-                background-color: $upload-progress-bg;
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-progress-bg;
             }
         }
 
 
         // Upload status: success
         .k-file-success {
-            .k-progress {
-                background-color: $upload-success-bg;
+            .k-file-validation-message {
+                color: $kendo-upload-success-text;
+            }
+
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-success-bg;
             }
         }
 
         // Upload satus: error
-        .k-file-error,
-        .k-file-invalid {
+        .k-file-error {
             .k-file-validation-message {
-                color: $upload-error-text;
+                color: $kendo-upload-error-text;
             }
-            .k-progress {
-                background-color: $upload-error-bg;
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-error-bg;
             }
         }
 
-        .k-file-extension-wrapper,
-        .k-multiple-files-extension-wrapper,
-        .k-file-group-wrapper,
-        .k-multiple-files-group-wrapper,
-        .k-file-invalid-extension-wrapper,
-        .k-multiple-files-invalid-extension-wrapper,
-        .k-file-invalid-group-wrapper,
-        .k-multiple-files-invalid-group-wrapper {
-            color: $upload-icon-color;
-            border-color: $upload-icon-color;
-        }
-
-        // old rendering
-        .k-file-invalid-extension-wrapper,
-        .k-multiple-files-invalid-extension-wrapper,
-        .k-file-error .k-file-extension-wrapper,
-        .k-file-invalid-group-wrapper,
-        .k-multiple-files-invalid-group-wrapper,
-        .k-file-error .k-file-group-wrapper {
-            border-color: $upload-icon-color;
-        }
-
-        // old rendering
-        .k-file-extension-wrapper::before,
-        .k-multiple-files-extension-wrapper::before,
-        .k-file-invalid-extension-wrapper::before,
-        .k-multiple-files-invalid-extension-wrapper::before,
-        .k-file-error .k-file-extension-wrapper::before {
-            background-color: $upload-bg;
-            border-color: transparent transparent $upload-icon-color $upload-icon-color;
-        }
-
-        // old rendering
-        .k-multiple-files-extension-wrapper::after,
-        .k-multiple-files-invalid-extension-wrapper::after {
-            border-top-color: $upload-icon-color;
-            border-left-color: $upload-icon-color;
+        .k-file-icon-wrapper {
+            color: $kendo-upload-icon-color;
+            border-color: $kendo-upload-icon-color;
         }
 
         .k-file-size,
         .k-file-validation-message,
-        .k-file-information {
-            color: $subtle-text;
+        .k-file-summary {
+            color: $kendo-subtle-text;
         }
 
-        .k-multiple-files-wrapper .k-file-information {
-            color: $upload-text;
+        .k-multiple-files-wrapper .k-file-summary {
+            color: $kendo-upload-text;
         }
 
         // Invalid,
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            border-color: $invalid-border;
+            border-color: $kendo-invalid-border;
         }
     }
 

package/scss/upload/_variables.scss

@@ -1,48 +1,47 @@
 // Upload
-$upload-border-width: 1px !default;
-$upload-font-family: $font-family !default;
-$upload-font-size: $font-size !default;
-$upload-line-height: $line-height !default;
-$upload-max-height: 300px !default;
+$kendo-upload-border-width: 1px !default;
+$kendo-upload-font-family: $font-family !default;
+$kendo-upload-font-size: $font-size !default;
+$kendo-upload-line-height: $line-height !default;
+$kendo-upload-max-height: 300px !default;
 
-$upload-bg: $component-bg !default;
-$upload-text: $component-text !default;
-$upload-border: $component-border !default;
+$kendo-upload-bg: $kendo-component-bg !default;
+$kendo-upload-text: $kendo-component-text !default;
+$kendo-upload-border: $kendo-component-border !default;
 
-$upload-dropzone-padding-x: map-get( $spacing, 2 ) !default;
-$upload-dropzone-padding-y: map-get( $spacing, 2 ) !default;
-$upload-dropzone-bg: $header-bg !default;
-$upload-dropzone-text: $header-text !default;
-$upload-dropzone-border: $upload-border !default;
-$upload-dropzone-hover-bg: $hovered-bg !default;
+$kendo-upload-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+$kendo-upload-dropzone-text: $kendo-component-header-text !default;
+$kendo-upload-dropzone-border: $kendo-upload-border !default;
+$kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default;
 
-$upload-status-text: $subtle-text !default;
-$upload-status-text-opacity: null !default;
+$kendo-upload-status-text: $kendo-subtle-text !default;
+$kendo-upload-status-text-opacity: null !default;
 
-$upload-item-padding-x: map-get( $spacing, 2 ) !default;
-$upload-item-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-upload-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$upload-multiple-items-spacing: 12px !default;
+$kendo-upload-multiple-items-spacing: 12px !default;
 
-$upload-validation-font-size: 11px !default;
-$upload-icon-spacing: $icon-spacing !default;
-$upload-icon-color: $subtle-text !default;
+$kendo-upload-validation-font-size: 11px !default;
+$kendo-upload-icon-spacing: $icon-spacing !default;
+$kendo-upload-icon-color: $kendo-subtle-text !default;
 
-$upload-item-image-width: 30px !default;
-$upload-item-image-height: 30px !default;
-$upload-item-image-border: 0px !default; // TODO: remove
+$kendo-upload-item-image-width: 30px !default;
+$kendo-upload-item-image-height: 30px !default;
+$kendo-upload-item-image-border: 0px !default; // TODO: remove
 
-$upload-group-icon-size: $icon-size-lg !default;
+$kendo-upload-group-icon-size: $icon-size-lg !default;
 
-$upload-progress-thickness: 2px !default;
-$upload-progress-bg: $info !default;
-$upload-progress-text: $component-text !default;
+$kendo-upload-progress-thickness: 2px !default;
+$kendo-upload-progress-bg: $kendo-color-info !default;
 
-$upload-success-bg: $success !default;
-$upload-success-text: $success !default;
+$kendo-upload-success-bg: $kendo-color-success !default;
+$kendo-upload-success-text: $kendo-color-success !default;
 
-$upload-error-bg: $error !default;
-$upload-error-text: $error !default;
-$upload-error-border: $error !default;
+$kendo-upload-error-bg: $kendo-color-error !default;
+$kendo-upload-error-text: $kendo-color-error !default;
+$kendo-upload-error-border: $kendo-color-error !default;
 
-$upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/utils/_aspect-ratio.scss

@@ -2,14 +2,19 @@
 
     // Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
 
-    // @name k-aspect-ratio-auto
-    // @description This is equivalent to `aspect-ratio: auto;`. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
-    // @group aspect-ratio
+    /// This is equivalent to `aspect-ratio: auto;`. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
+    /// @name .k-aspect-ratio-auto
+    /// @group aspect-ratio
+    /// @contextType css
+    _ {}
 
-    // @name k-aspect-ratio-1
-    // @description This is equivalent to `aspect-ratio: 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
-    // @group aspect-ratio
+    /// This is equivalent to `aspect-ratio: 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+    /// @name .k-aspect-ratio-1
+    /// @group aspect-ratio
+    /// @contextType css
+    _ {}
 
+    // Aspect ratio utility classes
     $utils-aspect-ratio: (
         auto,
         1