@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/scrollview/_variables.scss

@@ -93,3 +93,34 @@ $kendo-scrollview-transition-duration: .3s !default;
 /// The timing function of the ScrollView transition.
 /// @group scrollview
 $kendo-scrollview-transition-timing-function: ease-in-out !default;
+
+@forward "@progress/kendo-theme-core/scss/components/scrollview/_variables.scss" with (
+    $kendo-scrollview-border-width: $kendo-scrollview-border-width,
+    $kendo-scrollview-font-family: $kendo-scrollview-font-family,
+    $kendo-scrollview-font-size: $kendo-scrollview-font-size,
+    $kendo-scrollview-line-height: $kendo-scrollview-line-height,
+    $kendo-scrollview-text: $kendo-scrollview-text,
+    $kendo-scrollview-bg: $kendo-scrollview-bg,
+    $kendo-scrollview-border: $kendo-scrollview-border,
+    $kendo-scrollview-pagebutton-size: $kendo-scrollview-pagebutton-size,
+    $kendo-scrollview-pagebutton-bg: $kendo-scrollview-pagebutton-bg,
+    $kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-border,
+    $kendo-scrollview-pagebutton-primary-bg: $kendo-scrollview-pagebutton-primary-bg,
+    $kendo-scrollview-pagebutton-primary-border: $kendo-scrollview-pagebutton-primary-border,
+    $kendo-scrollview-pagebutton-shadow: $kendo-scrollview-pagebutton-shadow,
+    $kendo-scrollview-pager-offset: $kendo-scrollview-pager-offset,
+    $kendo-scrollview-pager-item-spacing: $kendo-scrollview-pager-item-spacing,
+    $kendo-scrollview-pager-item-border-width: $kendo-scrollview-pager-item-border-width,
+    $kendo-scrollview-pager-height: $kendo-scrollview-pager-height,
+    $kendo-scrollview-arrow-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color,
+    $kendo-scrollview-navigation-color: $kendo-scrollview-navigation-color,
+    $kendo-scrollview-navigation-icon-shadow: $kendo-scrollview-navigation-icon-shadow,
+    $kendo-scrollview-navigation-bg: $kendo-scrollview-navigation-bg,
+    $kendo-scrollview-navigation-default-opacity: $kendo-scrollview-navigation-default-opacity,
+    $kendo-scrollview-navigation-hover-opacity: $kendo-scrollview-navigation-hover-opacity,
+    $kendo-scrollview-navigation-hover-span-bg: $kendo-scrollview-navigation-hover-span-bg,
+    $kendo-scrollview-light-bg: $kendo-scrollview-light-bg,
+    $kendo-scrollview-dark-bg: $kendo-scrollview-dark-bg,
+    $kendo-scrollview-transition-duration: $kendo-scrollview-transition-duration,
+    $kendo-scrollview-transition-timing-function: $kendo-scrollview-transition-timing-function
+);

package/scss/searchbox/_layout.scss

@@ -1,9 +1,4 @@
-@mixin kendo-searchbox--layout-base() {
-
-    // Searchbox
-    .k-searchbox {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/searchbox/_layout.scss" as *;
 
 
 @mixin kendo-searchbox--layout() {

package/scss/searchbox/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-searchbox--theme-base() {
-
-    // Searchbox
-    .k-searchbox {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/searchbox/_theme.scss" as *;
 
 
 @mixin kendo-searchbox--theme() {

package/scss/signature/_layout.scss

@@ -1,77 +1,4 @@
-@use "sass:map";
-@use "./variables.scss" as *;
-
-@mixin kendo-signature--layout-base() {
-
-    .k-signature {
-        width: $kendo-signature-width;
-        min-height: $kendo-signature-height;
-        position: relative;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        &.k-signature-maximized {
-            width: $kendo-signature-maximized-width;
-            height: $kendo-signature-maximized-height;
-
-            > .k-signature-line {
-                border-bottom-width: $kendo-signature-maximized-line-width;
-            }
-        }
-    }
-
-    .k-signature-actions {
-        display: flex;
-        width: min-content;
-        margin-inline-start: auto;
-        gap: $kendo-signature-actions-gap;
-        z-index: 2;
-    }
-
-    .k-signature-canvas {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: block;
-        z-index: 1;
-        outline: none;
-    }
-
-    .k-signature-line {
-        position: absolute;
-        bottom: $kendo-signature-line-bottom-offset;
-        z-index: 2;
-        pointer-events: none;
-        border-bottom-width: $kendo-signature-line-width;
-        border-bottom-style: $kendo-signature-line-style;
-    }
-
-    // Sizes
-    @each $size, $size-props in $kendo-signature-sizes {
-        $_padding-x: map.get($size-props, padding-x);
-        $_padding-y: map.get($size-props, padding-y);
-        $_line-size: map.get($size-props, line-size);
-        $_line-offset: map.get($size-props, line-offset);
-
-        .k-signature-#{$size} {
-            padding-inline: $_padding-x;
-            padding-block: $_padding-y;
-
-            .k-signature-line {
-                width: $_line-size;
-            }
-        }
-    }
-
-    .k-signature-lg {
-        min-height: $kendo-signature-lg-min-height;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/signature/_layout.scss" as *;
 
 
 @mixin kendo-signature--layout() {

package/scss/signature/_theme.scss

@@ -1,16 +1,4 @@
-@use "./variables.scss" as *;
-
-@mixin kendo-signature--theme-base() {
-
-    // Solid signature
-    .k-signature {
-
-        .k-signature-line {
-            border-bottom-color: $kendo-signature-line-color;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/signature/_theme.scss" as *;
 
 
 @mixin kendo-signature--theme() {

package/scss/signature/_variables.scss

@@ -49,3 +49,30 @@ $kendo-signature-sizes: (
 
 $kendo-signature-actions-gap: k-spacing(1) !default;
 $kendo-signature-maximized-line-width: 3px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/signature/_variables.scss" with (
+    $kendo-signature-width: $kendo-signature-width,
+    $kendo-signature-height: $kendo-signature-height,
+    $kendo-signature-lg-min-height: $kendo-signature-lg-min-height,
+    $kendo-signature-maximized-width: $kendo-signature-maximized-width,
+    $kendo-signature-maximized-height: $kendo-signature-maximized-height,
+    $kendo-signature-padding-x: $kendo-signature-padding-x,
+    $kendo-signature-sm-padding-x: $kendo-signature-sm-padding-x,
+    $kendo-signature-md-padding-x: $kendo-signature-md-padding-x,
+    $kendo-signature-lg-padding-x: $kendo-signature-lg-padding-x,
+    $kendo-signature-padding-y: $kendo-signature-padding-y,
+    $kendo-signature-sm-padding-y: $kendo-signature-sm-padding-y,
+    $kendo-signature-md-padding-y: $kendo-signature-md-padding-y,
+    $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-y,
+    $kendo-signature-line-width: $kendo-signature-line-width,
+    $kendo-signature-line-style: $kendo-signature-line-style,
+    $kendo-signature-line-color: $kendo-signature-line-color,
+    $kendo-signature-line-size: $kendo-signature-line-size,
+    $kendo-signature-sm-line-size: $kendo-signature-sm-line-size,
+    $kendo-signature-md-line-size: $kendo-signature-md-line-size,
+    $kendo-signature-lg-line-size: $kendo-signature-lg-line-size,
+    $kendo-signature-line-bottom-offset: $kendo-signature-line-bottom-offset,
+    $kendo-signature-sizes: $kendo-signature-sizes,
+    $kendo-signature-actions-gap: $kendo-signature-actions-gap,
+    $kendo-signature-maximized-line-width: $kendo-signature-maximized-line-width
+);

package/scss/skeleton/_layout.scss

@@ -1,95 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-skeleton--layout-base() {
-
-    .k-skeleton {
-        display: block;
-    }
-
-    .k-skeleton-text {
-        border-radius: $kendo-skeleton-text-border-radius;
-        transform: $kendo-skeleton-text-transform;
-
-        &:empty::before {
-            content: "\200b";
-        }
-    }
-
-    .k-skeleton-rect {
-        border-radius: $kendo-skeleton-rect-border-radius;
-    }
-
-    .k-skeleton-circle {
-        border-radius: $kendo-skeleton-circle-border-radius;
-    }
-
-
-    // Legacy alias
-    .k-placeholder-line {
-        @extend .k-skeleton !optional;
-        @extend .k-skeleton-text !optional;
-    }
-
-
-    // Skeleton wave
-    @keyframes k-skeleton-wave {
-        0% {
-            transform: translateX(-100%);
-        }
-        60% {
-            transform: translateX(100%);
-        }
-        100% {
-            transform: translateX(100%);
-        }
-    }
-
-    .k-skeleton-wave {
-
-        .k-skeleton,
-        &.k-skeleton {
-            position: relative;
-            overflow: hidden;
-
-            &::after {
-                content: "";
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                transform: translateX(-100%);
-                animation: k-skeleton-wave 1.6s linear .5s infinite;
-            }
-        }
-
-    }
-
-
-    // Skeleton pulse
-    @keyframes k-skeleton-pulse {
-        0% {
-            opacity: 1;
-        }
-        50% {
-            opacity: .4;
-        }
-        100% {
-            opacity: 1;
-        }
-    }
-
-    .k-skeleton-pulse {
-
-        .k-skeleton,
-        &.k-skeleton {
-            animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
-        }
-
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/skeleton/_layout.scss" as *;
 
 
 @mixin kendo-skeleton--layout() {

package/scss/skeleton/_theme.scss

@@ -1,29 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-skeleton--theme-base() {
-
-    .k-skeleton {
-        @include fill( $bg: $kendo-skeleton-item-bg );
-    }
-
-
-    // Skeleton wave
-    .k-skeleton-wave {
-
-        .k-skeleton::after,
-        &.k-skeleton::after {
-            background-image: linear-gradient(
-                to right,
-                transparent,
-                $kendo-skeleton-wave-bg,
-                transparent
-            );
-        }
-
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/skeleton/_theme.scss" as *;
 
 
 @mixin kendo-skeleton--theme() {

package/scss/skeleton/_variables.scss

@@ -19,3 +19,12 @@ $kendo-skeleton-circle-border-radius: 9999px !default;
 $kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 )) !default;
 
 $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/skeleton/_variables.scss" with (
+    $kendo-skeleton-text-transform: $kendo-skeleton-text-transform,
+    $kendo-skeleton-text-border-radius: $kendo-skeleton-text-border-radius,
+    $kendo-skeleton-rect-border-radius: $kendo-skeleton-rect-border-radius,
+    $kendo-skeleton-circle-border-radius: $kendo-skeleton-circle-border-radius,
+    $kendo-skeleton-item-bg: $kendo-skeleton-item-bg,
+    $kendo-skeleton-wave-bg: $kendo-skeleton-wave-bg
+);