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

package/scss/loader/_layout.scss

@@ -18,34 +18,34 @@
 
     // Loader segment
     .k-loader-segment {
-        border-radius: $loader-segment-border-radius;
+        border-radius: $kendo-loader-segment-border-radius;
         background-color: currentColor;
         position: absolute;
     }
 
     // Loader sizes
     .k-loader-sm {
-        padding: $loader-padding-sm;
+        padding: $kendo-loader-padding-sm;
 
         .k-loader-segment {
-            width: $loader-segment-size-sm;
-            height: $loader-segment-size-sm;
+            width: $kendo-loader-segment-size-sm;
+            height: $kendo-loader-segment-size-sm;
         }
     }
     .k-loader-md {
-        padding: $loader-padding-md;
+        padding: $kendo-loader-padding-md;
 
         .k-loader-segment {
-            width: $loader-segment-size-md;
-            height: $loader-segment-size-md;
+            width: $kendo-loader-segment-size-md;
+            height: $kendo-loader-segment-size-md;
         }
     }
     .k-loader-lg {
-        padding: $loader-padding-lg;
+        padding: $kendo-loader-padding-lg;
 
         .k-loader-segment {
-            width: $loader-segment-size-lg;
-            height: $loader-segment-size-lg;
+            width: $kendo-loader-segment-size-lg;
+            height: $kendo-loader-segment-size-lg;
         }
     }
 
@@ -86,22 +86,22 @@
 
         &.k-loader-sm {
             .k-loader-canvas {
-                width: ( $loader-segment-size-sm * 3 );
-                height: ( $loader-segment-size-sm * 1.5 );
+                width: ( $kendo-loader-segment-size-sm * 3 );
+                height: ( $kendo-loader-segment-size-sm * 1.5 );
             }
         }
 
         &.k-loader-md {
             .k-loader-canvas {
-                width: ( $loader-segment-size-md * 3 );
-                height: ( $loader-segment-size-md * 1.5 );
+                width: ( $kendo-loader-segment-size-md * 3 );
+                height: ( $kendo-loader-segment-size-md * 1.5 );
             }
         }
 
         &.k-loader-lg {
             .k-loader-canvas {
-                width: ( $loader-segment-size-lg * 3 );
-                height: ( $loader-segment-size-lg * 1.5 );
+                width: ( $kendo-loader-segment-size-lg * 3 );
+                height: ( $kendo-loader-segment-size-lg * 1.5 );
             }
         }
     }
@@ -169,25 +169,25 @@
 
         &.k-loader-sm {
             .k-loader-canvas {
-                margin: ( $loader-segment-size-sm / 2 );
-                width: calc( #{$loader-spinner-3-width-sm} - #{$loader-segment-size-sm} );
-                height: calc( #{$loader-spinner-3-height-sm} - #{$loader-segment-size-sm} );
+                margin: k-math-div( $kendo-loader-segment-size-sm, 2 );
+                width: calc( #{$kendo-loader-spinner-3-width-sm} - #{$kendo-loader-segment-size-sm} );
+                height: calc( #{$kendo-loader-spinner-3-height-sm} - #{$kendo-loader-segment-size-sm} );
             }
         }
 
         &.k-loader-md {
             .k-loader-canvas {
-                margin: ( $loader-segment-size-md / 2 );
-                width: calc( #{$loader-spinner-3-width-md} - #{$loader-segment-size-md} );
-                height: calc( #{$loader-spinner-3-height-md} - #{$loader-segment-size-md} );
+                margin: k-math-div( $kendo-loader-segment-size-md, 2 );
+                width: calc( #{$kendo-loader-spinner-3-width-md} - #{$kendo-loader-segment-size-md} );
+                height: calc( #{$kendo-loader-spinner-3-height-md} - #{$kendo-loader-segment-size-md} );
             }
         }
 
         &.k-loader-lg {
             .k-loader-canvas {
-                margin: ( $loader-segment-size-lg / 2 );
-                width: calc( #{$loader-spinner-3-width-lg} - #{$loader-segment-size-lg} );
-                height: calc( #{$loader-spinner-3-height-lg} - #{$loader-segment-size-lg} );
+                margin: k-math-div( $kendo-loader-segment-size-lg, 2 );
+                width: calc( #{$kendo-loader-spinner-3-width-lg} - #{$kendo-loader-segment-size-lg} );
+                height: calc( #{$kendo-loader-spinner-3-height-lg} - #{$kendo-loader-segment-size-lg} );
             }
         }
     }
@@ -347,22 +347,22 @@
 
         &.k-loader-sm {
             .k-loader-canvas {
-                width: $loader-spinner-4-width-sm;
-                height: $loader-spinner-4-height-sm;
+                width: $kendo-loader-spinner-4-width-sm;
+                height: $kendo-loader-spinner-4-height-sm;
             }
         }
 
         &.k-loader-md {
             .k-loader-canvas {
-                width: $loader-spinner-4-width-md;
-                height: $loader-spinner-4-height-md;
+                width: $kendo-loader-spinner-4-width-md;
+                height: $kendo-loader-spinner-4-height-md;
             }
         }
 
         &.k-loader-lg {
             .k-loader-canvas {
-                width: $loader-spinner-4-width-lg;
-                height: $loader-spinner-4-height-lg;
+                width: $kendo-loader-spinner-4-width-lg;
+                height: $kendo-loader-spinner-4-height-lg;
             }
         }
     }
@@ -370,6 +370,7 @@
 
 
 
+
 @include exports( "loader-container/layout" ) {
 
     .k-loader-container {
@@ -407,40 +408,40 @@
     }
 
     .k-loader-container-panel {
-        border-width: $loader-container-panel-border-width;
-        border-style: $loader-container-panel-border-style;
-        border-radius: $loader-container-panel-border-radius;
+        border-width: $kendo-loader-container-panel-border-width;
+        border-style: $kendo-loader-container-panel-border-style;
+        border-radius: $kendo-loader-container-panel-border-radius;
     }
 
     // Loader Container Sizes
     .k-loader-container-sm {
         .k-loader-container-inner {
-            padding: $loader-container-padding-sm;
-            gap: $loader-container-gap-sm;
+            padding: $kendo-loader-container-padding-sm;
+            gap: $kendo-loader-container-gap-sm;
         }
 
         .k-loader-container-label {
-            font-size: $loader-container-font-size-sm;
+            font-size: $kendo-loader-container-font-size-sm;
         }
     }
     .k-loader-container-md {
         .k-loader-container-inner {
-            padding: $loader-container-padding-md;
-            gap: $loader-container-gap-md;
+            padding: $kendo-loader-container-padding-md;
+            gap: $kendo-loader-container-gap-md;
         }
 
         .k-loader-container-label {
-            font-size: $loader-container-font-size-md;
+            font-size: $kendo-loader-container-font-size-md;
         }
     }
     .k-loader-container-lg {
         .k-loader-container-inner {
-            padding: $loader-container-padding-lg;
-            gap: $loader-container-gap-lg;
+            padding: $kendo-loader-container-padding-lg;
+            gap: $kendo-loader-container-gap-lg;
         }
 
         .k-loader-container-label {
-            font-size: $loader-container-font-size-lg;
+            font-size: $kendo-loader-container-font-size-lg;
         }
     }
 
@@ -458,3 +459,143 @@
     }
 
 }
+
+
+
+
+@include exports( "loader/from-common" ) {
+
+    // Loading mask
+    .k-loading-mask,
+    .k-loading-image,
+    .k-loading-color {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-loading-mask {
+        z-index: $kendo-zindex-loading;
+
+        &.k-opaque {
+            .k-loading-color {
+                opacity: 1;
+            }
+        }
+    }
+    .k-loading-text {
+        text-indent: -4000px;
+        text-align: center;
+        position: absolute;
+        color: $kendo-loading-text;
+    }
+    .k-loading-image {
+        z-index: 2;
+        color: $kendo-loading-text;
+    }
+    .k-loading-color {
+        background-color: $kendo-loading-bg;
+        opacity: $kendo-loading-opacity;
+    }
+
+    // Loading indicator
+    .k-i-loading {
+        position: relative;
+        background-color: transparent;
+        box-sizing: border-box;
+        color: $kendo-loading-text;
+
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-i-loading::before,
+    .k-i-loading::after,
+    .k-loading-image::before,
+    .k-loading-image::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: inline-block;
+        content: "";
+        box-sizing: inherit;
+        border-radius: 50%;
+        border-width: .05em;
+        border-style: solid;
+        border-color: currentColor;
+        border-top-color: transparent;
+        border-bottom-color: transparent;
+        background-color: transparent;
+    }
+
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
+
+    .k-i-loading::before,
+    .k-loading-image::before {
+        margin-top: -.5em;
+        margin-left: -.5em;
+        width: 1em;
+        height: 1em;
+        animation: k-loading-animation .7s linear infinite;
+    }
+
+    .k-i-loading::after,
+    .k-loading-image::after {
+        margin-top: -.25em;
+        margin-left: -.25em;
+        width: .5em;
+        height: .5em;
+        animation: k-loading-animation reverse 1.4s linear infinite;
+    }
+
+    .k-loading-image::before,
+    .k-loading-image::after {
+        content: "";
+        // See https://github.com/telerik/kendo-themes/issues/1925
+        border-width: 1px; // TODO: Remove once we drop IE support
+        border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
+        font-size: 4em;
+    }
+
+    @keyframes loading {
+        0% {
+            stroke-dasharray: 0 251;
+            stroke-dashoffset: 502;
+        }
+
+        50% {
+            stroke-dasharray: 250 1;
+        }
+
+        100% {
+            stroke-dasharray: 0 251;
+            stroke-dashoffset: 0;
+        }
+    }
+
+    @keyframes k-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+}

package/scss/loader/_theme.scss

@@ -3,7 +3,7 @@
     @each $name, $color in $kendo-theme-colors {
         .k-loader-#{$name} {
             @if $name == "secondary" {
-                color: $loader-secondary-bg;
+                color: $kendo-loader-secondary-bg;
             } @else {
                 color: $color;
             }
@@ -11,8 +11,8 @@
     }
 
     .k-loader-container-panel {
-        background-color: $loader-container-panel-bg;
-        border-color: $loader-container-panel-border-color;
+        background-color: $kendo-loader-container-panel-bg;
+        border-color: $kendo-loader-container-panel-border-color;
     }
 
     .k-loader-container-inner {
@@ -20,7 +20,7 @@
         // sass-lint:disable-block class-name-format
         .k-text-secondary,
         .\!k-text-secondary {
-            color: $loader-secondary-bg !important;
+            color: $kendo-loader-secondary-bg !important;
         }
     }
 

package/scss/loader/_variables.scss

@@ -1,43 +1,50 @@
 // Loader
-$loader-segment-border-radius: 50% !default;
-$loader-segment-size-sm: map-get( $spacing, 1 ) !default;
-$loader-segment-size-md: map-get( $spacing, 2 ) !default;
-$loader-segment-size-lg: map-get( $spacing, 4 ) !default;
-
-$loader-padding-sm: ( $loader-segment-size-sm / 2 ) !default;
-$loader-padding-md: ( $loader-segment-size-md / 2 ) !default;
-$loader-padding-lg: ( $loader-segment-size-lg / 2 ) !default;
-
-$loader-spinner-3-width-sm: ( $loader-segment-size-sm * 4 ) !default;
-$loader-spinner-3-height-sm: ( $loader-spinner-3-width-sm * $equilateral-height ) !default;
-$loader-spinner-3-width-md: ( $loader-segment-size-md * 4 ) !default;
-$loader-spinner-3-height-md: ( $loader-spinner-3-width-md * $equilateral-height ) !default;
-$loader-spinner-3-width-lg: ( $loader-segment-size-lg * 4 ) !default;
-$loader-spinner-3-height-lg: ( $loader-spinner-3-width-lg * $equilateral-height ) !default;
-
-$loader-spinner-4-width-sm: $loader-segment-size-sm * 4 !default;
-$loader-spinner-4-height-sm: $loader-spinner-4-width-sm !default;
-$loader-spinner-4-width-md: $loader-segment-size-md * 4 !default;
-$loader-spinner-4-height-md: $loader-spinner-4-width-md !default;
-$loader-spinner-4-width-lg: $loader-segment-size-lg * 4 !default;
-$loader-spinner-4-height-lg: $loader-spinner-4-width-lg !default;
-
-$loader-secondary-bg: #656565 !default;
-
-$loader-container-panel-border-width: 1px !default;
-$loader-container-panel-border-style: solid !default;
-$loader-container-panel-border-color: $component-border !default;
-$loader-container-panel-border-radius: $kendo-border-radius-md !default;
-$loader-container-panel-bg: $white !default;
-
-$loader-container-padding-sm: map-get( $spacing, 4 ) !default;
-$loader-container-gap-sm: map-get( $spacing, 1 ) !default;
-$loader-container-font-size-sm: $font-size-sm !default;
-
-$loader-container-padding-md: map-get( $spacing, 5 ) !default;
-$loader-container-gap-md: map-get( $spacing, 2 ) !default;
-$loader-container-font-size-md: $font-size-md !default;
-
-$loader-container-padding-lg: map-get( $spacing, 6 ) !default;
-$loader-container-gap-lg: map-get( $spacing, 3 ) !default;
-$loader-container-font-size-lg: $font-size-lg !default;
+
+$kendo-loader-segment-border-radius: 50% !default;
+$kendo-loader-segment-size-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-loader-segment-size-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-loader-segment-size-lg: k-map-get( $kendo-spacing, 4 ) !default;
+
+$kendo-loader-padding-sm: k-math-div( $kendo-loader-segment-size-sm, 2 ) !default;
+$kendo-loader-padding-md: k-math-div( $kendo-loader-segment-size-md, 2 ) !default;
+$kendo-loader-padding-lg: k-math-div( $kendo-loader-segment-size-lg, 2 ) !default;
+
+$kendo-loader-spinner-3-width-sm: ( $kendo-loader-segment-size-sm * 4 ) !default;
+$kendo-loader-spinner-3-height-sm: ( $kendo-loader-spinner-3-width-sm * $equilateral-height ) !default;
+$kendo-loader-spinner-3-width-md: ( $kendo-loader-segment-size-md * 4 ) !default;
+$kendo-loader-spinner-3-height-md: ( $kendo-loader-spinner-3-width-md * $equilateral-height ) !default;
+$kendo-loader-spinner-3-width-lg: ( $kendo-loader-segment-size-lg * 4 ) !default;
+$kendo-loader-spinner-3-height-lg: ( $kendo-loader-spinner-3-width-lg * $equilateral-height ) !default;
+
+$kendo-loader-spinner-4-width-sm: $kendo-loader-segment-size-sm * 4 !default;
+$kendo-loader-spinner-4-height-sm: $kendo-loader-spinner-4-width-sm !default;
+$kendo-loader-spinner-4-width-md: $kendo-loader-segment-size-md * 4 !default;
+$kendo-loader-spinner-4-height-md: $kendo-loader-spinner-4-width-md !default;
+$kendo-loader-spinner-4-width-lg: $kendo-loader-segment-size-lg * 4 !default;
+$kendo-loader-spinner-4-height-lg: $kendo-loader-spinner-4-width-lg !default;
+
+$kendo-loader-secondary-bg: #656565 !default;
+
+$kendo-loader-container-panel-border-width: 1px !default;
+$kendo-loader-container-panel-border-style: solid !default;
+$kendo-loader-container-panel-border-color: $kendo-component-border !default;
+$kendo-loader-container-panel-border-radius: $kendo-border-radius-md !default;
+$kendo-loader-container-panel-bg: $kendo-color-white !default;
+
+$kendo-loader-container-padding-sm: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-loader-container-gap-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-loader-container-font-size-sm: $font-size-sm !default;
+
+$kendo-loader-container-padding-md: k-map-get( $kendo-spacing, 5 ) !default;
+$kendo-loader-container-gap-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-loader-container-font-size-md: $font-size-md !default;
+
+$kendo-loader-container-padding-lg: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-loader-container-gap-lg: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-loader-container-font-size-lg: $font-size-lg !default;
+
+
+// Loading
+$kendo-loading-bg: $kendo-component-bg !default;
+$kendo-loading-text: currentColor !default;
+$kendo-loading-opacity: .3 !default;

package/scss/map/_index.scss

@@ -3,14 +3,14 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../button/_index.scss";
 @import "../scroller/_index.scss";
 @import "../icons/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "images/markers.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./images/markers.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/map/_layout.scss

@@ -121,7 +121,7 @@
 
     // Zoom control
     .k-zoom-control {
-        margin: $spacer-x;
+        margin: k-map-get( $kendo-spacing, 4 );
         border: 0;
         background: none;
         display: flex;

package/scss/map/_variables.scss

@@ -5,24 +5,24 @@ $map-font-size: $font-size !default;
 $map-line-height: $line-height !default;
 $map-font-family: $font-family !default;
 
-$map-bg: $component-bg !default;
-$map-text: $component-text !default;
-$map-border: $component-border !default;
+$map-bg: $kendo-component-bg !default;
+$map-text: $kendo-component-text !default;
+$map-border: $kendo-component-border !default;
 
-$map-navigator-margin: $spacer-x !default;
+$map-navigator-margin: k-map-get( $kendo-spacing, 4 ) !default;
 $map-navigator-padding: 2px !default;
-$map-navigator-width: calc( #{$icon-size * 3} + #{$map-navigator-padding * 2} ) !default;
+$map-navigator-width: calc( #{$kendo-icon-size * 3} + #{$map-navigator-padding * 2} ) !default;
 $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
-$map-zoom-control-margin: $spacer-x !default;
+$map-zoom-control-margin: k-map-get( $kendo-spacing, 4 ) !default;
 $map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
 
-$map-attribution-padding-x: $padding-x-sm !default;
-$map-attribution-padding-y: $padding-y-sm !default;
+$map-attribution-padding-x: $kendo-padding-sm-x !default;
+$map-attribution-padding-y: $kendo-padding-sm-y !default;
 $map-attribution-font-size: ($map-font-size * .75) !default;
 $map-attribution-bg: rgba( $map-bg, .8 ) !default;
 
-$map-marker-size: $icon-size-lg !default;
-$map-marker-fill: $primary !default;
+$map-marker-size: $kendo-icon-size-xxl !default;
+$map-marker-fill: $kendo-color-primary !default;

package/scss/maskedtextbox/_index.scss

@@ -9,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/mediaplayer/_index.scss

@@ -9,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/mediaplayer/_layout.scss

@@ -12,7 +12,7 @@
         display: block;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -65,7 +65,7 @@
     }
     .k-mediaplayer-volume-wrap {
         // TODO: When slider draghandle size is exposed, use it instead
-        padding: 0 (14px / 2);
+        padding: 0 k-math-div( 14px, 2 );
         align-items: center;
     }
     .k-mediaplayer-volume {

package/scss/mediaplayer/_variables.scss

@@ -4,12 +4,12 @@ $mediaplayer-font-family: $font-family !default;
 $mediaplayer-font-size: $font-size !default;
 $mediaplayer-line-height: $line-height !default;
 
-$mediaplayer-bg: $component-bg !default;
-$mediaplayer-text: $component-text !default;
-$mediaplayer-border: $component-border !default;
+$mediaplayer-bg: $kendo-component-bg !default;
+$mediaplayer-text: $kendo-component-text !default;
+$mediaplayer-border: $kendo-component-border !default;
 
-$mediaplayer-titlebar-padding-x: map-get( $spacing, 2 ) !default;
-$mediaplayer-titlebar-padding-y: map-get( $spacing, 2 ) !default;
+$mediaplayer-titlebar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$mediaplayer-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $mediaplayer-titlebar-bg: null !default;
 $mediaplayer-titlebar-text: $mediaplayer-bg !default;
 $mediaplayer-titlebar-border: null !default;

package/scss/menu/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/menu/_layout.scss

@@ -15,7 +15,7 @@
         position: relative;
         cursor: default;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -75,7 +75,7 @@
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin-inline-end: -$icon-spacing;
+        margin-inline-end: -$kendo-icon-spacing;
         display: inline-flex;
         flex-flow: row wrap;
         align-items: center;
@@ -125,7 +125,7 @@
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $panel-border;
+            border-color: $kendo-component-border;
             display: block;
         }
     }
@@ -166,7 +166,7 @@
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $component-border;
+            border-color: $kendo-component-border;
             display: block;
         }
     }

package/scss/menu/_theme.scss

@@ -38,7 +38,7 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $menu-item-focus-shadow );
+                @include focus-indicator( $menu-item-focus-shadow, true );
             }
         }
     }
@@ -85,7 +85,7 @@
         .k-item:focus,
         .k-item.k-focus {
             > .k-link {
-                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
+                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
             }
         }
     }