@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/treeview/_layout.scss

@@ -15,7 +15,7 @@
         overflow: auto;
         white-space: nowrap;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -27,7 +27,7 @@
 
     // Treeview filter
     .k-treeview-filter {
-        padding: map-get( $spacing, 2 );
+        padding: k-map-get( $kendo-spacing, 2 );
         display: block;
         position: relative;
         flex: none;
@@ -42,7 +42,7 @@
         position: relative;
         outline: 0;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         &.ng-animating {
             overflow: hidden;
@@ -84,15 +84,15 @@
 
     // Loading icon
     .k-treeview-loading {
-        margin-right: $icon-spacing;
+        margin-right: $kendo-icon-spacing;
     }
 
 
     // Checkbox
     .k-treeview .k-checkbox-wrap,
     .k-treeview .k-checkbox-wrapper {
-        margin-left: $icon-spacing;
-        margin-right: $icon-spacing;
+        margin-left: $kendo-icon-spacing;
+        margin-right: $kendo-icon-spacing;
         align-self: center;
     }
 
@@ -112,7 +112,7 @@
         .k-icon,
         .k-image,
         .k-sprite {
-            margin-right: $icon-spacing;
+            margin-right: $kendo-icon-spacing;
         }
 
         &.k-focus {
@@ -153,7 +153,7 @@
         // Loading
         .k-treeview-loading {
             margin-right: 0;
-            margin-left: $icon-spacing;
+            margin-left: $kendo-icon-spacing;
         }
 
         // Treeview leaf
@@ -163,16 +163,16 @@
             .k-image,
             .k-sprite {
                 margin-right: 0;
-                margin-left: $icon-spacing;
+                margin-left: $kendo-icon-spacing;
             }
         }
     }
 
     @each $size, $size-props in $kendo-treeview-sizes {
-        $_font-size: map-get( $size-props, font-size);
-        $_line-height: map-get( $size-props, line-height);
-        $_item-padding-x: map-get( $size-props, item-padding-x);
-        $_item-padding-y: map-get( $size-props, item-padding-y);
+        $_font-size: k-map-get( $size-props, font-size);
+        $_line-height: k-map-get( $size-props, line-height);
+        $_item-padding-x: k-map-get( $size-props, item-padding-x);
+        $_item-padding-y: k-map-get( $size-props, item-padding-y);
 
         .k-treeview-#{$size} {
             font-size: $_font-size;

package/scss/treeview/_theme.scss

@@ -31,7 +31,7 @@
         // Focus state
         &:focus,
         &.k-focus {
-            @include box-shadow( $kendo-treeview-item-focus-shadow );
+            @include focus-indicator( $kendo-treeview-item-focus-shadow, true );
         }
 
         // Selected state
@@ -72,7 +72,7 @@
                 $kendo-treeview-loadmore-focus-bg,
                 $kendo-treeview-loadmore-focus-border
             );
-            @include box-shadow( $kendo-treeview-loadmore-focus-shadow );
+            @include focus-indicator( $kendo-treeview-loadmore-focus-shadow, true );
         }
     }
 

package/scss/treeview/_variables.scss

@@ -1,3 +1,6 @@
+@import "../typography/_variables.scss";
+
+
 // Treeview
 
 /// Font family of the treeview component.
@@ -21,16 +24,16 @@ $kendo-treeview-indent: 16px !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-treeview-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: k-map-get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
-$kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-treeview-item-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-lg: k-map-get( $kendo-spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -68,17 +71,17 @@ $kendo-treeview-sizes: (
 $kendo-treeview-bg: null !default;
 /// Text color of the treeview component.
 /// @group treeview
-$kendo-treeview-text: $component-text !default;
+$kendo-treeview-text: $kendo-component-text !default;
 /// Border color of the treeview component.
 /// @group treeview
 $kendo-treeview-border: null !default;
 
 /// Background color of hovered treeview items.
 /// @group treeview
-$kendo-treeview-item-hover-bg: $hovered-bg !default;
+$kendo-treeview-item-hover-bg: $kendo-hover-bg !default;
 /// Text color of hovered treeview items.
 /// @group treeview
-$kendo-treeview-item-hover-text: $hovered-text !default;
+$kendo-treeview-item-hover-text: $kendo-hover-text !default;
 /// Border color of hovered treeview items.
 /// @group treeview
 $kendo-treeview-item-hover-border: null !default;
@@ -88,10 +91,10 @@ $kendo-treeview-item-hover-gradient: null !default;
 
 /// Background color of selected treeview items.
 /// @group treeview
-$kendo-treeview-item-selected-bg: $selected-bg !default;
+$kendo-treeview-item-selected-bg: $kendo-selected-bg !default;
 /// Text color of selected treeview items.
 /// @group treeview
-$kendo-treeview-item-selected-text: $selected-text !default;
+$kendo-treeview-item-selected-text: $kendo-selected-text !default;
 /// Border color of selected treeview items.
 /// @group treeview
 $kendo-treeview-item-selected-border: null !default;
@@ -101,7 +104,7 @@ $kendo-treeview-item-selected-gradient: null !default;
 
 /// Box shadow of focused treeview items.
 /// @group treeview
-$kendo-treeview-item-focus-shadow: $focused-shadow !default;
+$kendo-treeview-item-focus-shadow: $kendo-focus-shadow !default;
 
 /// Background color of load more.
 /// @group treeview

package/scss/typography/_index.scss

@@ -2,10 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/typography/_theme.scss

@@ -2,8 +2,8 @@
 
     .k-body {
         @include fill(
-            $body-text,
-            $body-bg
+            $kendo-body-text,
+            $kendo-body-bg
         );
     }
 

package/scss/typography/_variables.scss

@@ -4,42 +4,6 @@
 /// @group typography
 $enable-typography: false !default;
 
-/// Base font size across all components.
-/// @group typography
-$font-size: 14px !default;
-$font-size-xs: 10px !default;
-$font-size-sm: 12px !default;
-$font-size-md: $font-size !default;
-$font-size-lg: 16px !default;
-$font-size-xl: 20px !default;
-
-/// Font family across all components.
-/// @group typography
-$font-family: inherit !default;
-
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-/// Line height used along with $font-size.
-/// @group typography
-$line-height: (20 / 14) !default;
-$line-height-xs: 1 !default;
-$line-height-sm: 1.25 !default;
-$line-height-md: $line-height !default;
-$line-height-lg: 1.5 !default;
-$line-height-em: calc( #{$line-height} * 1em ) !default;
-
-
-// Font weight
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-
-
-// Letter Spacing
-$letter-spacing: null !default;
-
 
 // Headings
 $h1-font-size: ($font-size * 3) !default;
@@ -108,12 +72,12 @@ $pre-padding-y: 16px !default;
 $code-border-width: 1px !default;
 
 $code-bg: $base-bg !default;
-$code-text: $component-text !default;
-$code-border: $component-border !default;
+$code-text: $kendo-component-text !default;
+$code-border: $kendo-component-border !default;
 
 // Link
-$link-text: $primary !default;
-$link-hover-text: $primary-darker !default;
+$link-text: $kendo-color-primary !default;
+$link-hover-text: $kendo-color-primary-darker !default;
 
 
 // Display

package/scss/upload/_index.scss

@@ -7,10 +7,9 @@
 @import "../action-buttons/_index.scss";
 @import "../icons/_index.scss";
 @import "../dropzone/_index.scss";
-@import "../toolbar/_variables.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

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,12 +106,13 @@
                 align-items: flex-start;
                 position: relative;
             }
+
             .k-file:last-child {
                 border-width: 0;
             }
 
             .k-filename {
-                margin-left: $spacer-x;
+                margin-left: k-map-get( $kendo-spacing, 4 );
                 flex: 1;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -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 {