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

package/scss/calendar/_theme.scss

@@ -1,213 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-calendar--theme-base() {
-
-    .k-calendar {
-        @include fill(
-            $kendo-calendar-text,
-            $kendo-calendar-bg,
-            $kendo-calendar-border
-        );
-
-
-        // TODO: do we even use this?
-        // Header / footer
-        .k-header {
-            @include fill(
-                $kendo-calendar-header-text,
-                $kendo-calendar-header-bg,
-                inherit,
-                $kendo-calendar-header-gradient
-            );
-            @include box-shadow( $kendo-calendar-header-shadow );
-        }
-
-
-        // Header cells
-        .k-calendar-th,
-        .k-calendar-caption,
-        .k-meta-header,
-        .k-month-header {
-            color: $kendo-calendar-header-cell-text;
-        }
-
-
-        // Special days
-        .k-calendar-view .k-today {
-            @if $kendo-calendar-today-style == box {
-                .k-calendar-cell-inner {
-                    box-shadow: inset 0 0 0 1px $kendo-calendar-today-color;
-                }
-                &.k-focus .k-calendar-cell-inner {
-                    @include focus-indicator( $indicator: ( inset 0 0 0 1px $kendo-calendar-today-color, $kendo-calendar-cell-focus-shadow ), $inset: true );
-                }
-            } @else if $kendo-calendar-today-style == color {
-                color: $kendo-calendar-today-color;
-            }
-        }
-        .k-other-month {
-            @include fill(
-                $kendo-calendar-other-month-text,
-                $kendo-calendar-other-month-bg
-            );
-        }
-        .k-weekend {
-            @include fill(
-                $kendo-calendar-weekend-text,
-                $kendo-calendar-weekend-bg
-            );
-        }
-        .k-alt {
-            // remove default k-alt background color
-            background-color: transparent;
-            @include fill(
-                $kendo-calendar-week-number-text,
-                $kendo-calendar-week-number-bg
-            );
-        }
-
-
-        // Interactive states
-        .k-calendar-td:hover .k-calendar-cell-inner,
-        .k-calendar-td.k-hover .k-calendar-cell-inner {
-            @include fill(
-                $kendo-calendar-cell-hover-text,
-                $kendo-calendar-cell-hover-bg,
-                $kendo-calendar-cell-hover-border,
-                $kendo-calendar-cell-hover-gradient
-            );
-        }
-        .k-calendar-td.k-selected .k-calendar-cell-inner {
-            @include fill(
-                $kendo-calendar-cell-selected-text,
-                $kendo-calendar-cell-selected-bg,
-                $kendo-calendar-cell-selected-border,
-                $kendo-calendar-cell-selected-gradient
-            );
-        }
-        .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
-        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
-            @include fill(
-                $kendo-calendar-cell-selected-hover-text,
-                $kendo-calendar-cell-selected-hover-bg,
-                $kendo-calendar-cell-selected-hover-border,
-                $kendo-calendar-cell-selected-hover-gradient
-            );
-        }
-        .k-calendar-td:focus .k-calendar-cell-inner,
-        .k-calendar-td.k-focus .k-calendar-cell-inner {
-            @include focus-indicator( $kendo-calendar-cell-focus-shadow, true );
-        }
-        .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
-        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
-            @include focus-indicator( $kendo-calendar-cell-selected-focus-shadow, true );
-        }
-
-
-        // Calendar navigation
-        .k-calendar-navigation {
-            @include fill(
-                $kendo-calendar-navigation-text,
-                $kendo-calendar-navigation-bg
-            );
-            box-shadow: inset -1px 0 $kendo-calendar-navigation-border;
-
-            li:hover,
-            li.k-hover {
-                color: $kendo-calendar-navigation-hover-text;
-            }
-        }
-        .k-calendar-navigation-highlight {
-            @include fill(
-                $kendo-calendar-text,
-                $kendo-calendar-bg,
-                $kendo-calendar-border
-            );
-        }
-
-        // Invalid
-        &.k-invalid,
-        &.k-invalid:hover,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            border-color: $kendo-invalid-border;
-        }
-    }
-
-    .k-rtl .k-calendar,
-    .k-calendar[dir="rtl"] {
-        .k-calendar-navigation {
-            box-shadow: inset 1px 0 $kendo-calendar-navigation-border;
-        }
-    }
-
-    // Scheduler integration
-    .k-scheduler .k-calendar .k-other-month {
-        @include fill(
-            $kendo-calendar-other-month-text,
-            transparent
-        );
-    }
-
-
-
-
-    // Multiview calendar
-    .k-calendar { // stylelint-disable-line
-
-        $kendo-calendar-range-gap: k-spacing(1px) !default;
-        $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 ));
-        $kendo-calendar-range-split-size: 5px !default;
-
-        .k-range-start,
-        .k-range-end,
-        .k-range-mid {
-            background-color: $kendo-calendar-range-bg;
-        }
-
-        .k-range-start,
-        .k-range-end {
-            .k-calendar-cell-inner {
-                background-color: $kendo-calendar-cell-selected-bg;
-            }
-        }
-
-        .k-range-start.k-active,
-        .k-range-end.k-active {
-            .k-calendar-cell-inner {
-                box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
-            }
-        }
-
-        .k-range-split-start,
-        .k-range-split-end {
-            position: relative;
-
-            &::after {
-                content: "";
-                display: block;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                width: $kendo-calendar-range-split-size;
-            }
-        }
-
-        .k-range-split-start::after {
-            left: -$kendo-calendar-range-split-size;
-            right: auto;
-            background-image: linear-gradient(to left, $kendo-calendar-range-bg, transparent 100%);
-        }
-
-        .k-range-split-end::after {
-            right: -$kendo-calendar-range-split-size;
-            left: auto;
-            background-image: linear-gradient(to right, $kendo-calendar-range-bg, transparent 100%);
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/calendar/_theme.scss" as *;
 
 
 @mixin kendo-calendar--theme() {

package/scss/calendar/_variables.scss

@@ -356,3 +356,102 @@ $kendo-calendar-sizes: (
         cell-padding-y: $kendo-calendar-lg-cell-padding-x
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/calendar/_variables.scss" with (
+    $kendo-calendar-border-width: $kendo-calendar-border-width,
+    $kendo-calendar-font-family: $kendo-calendar-font-family,
+    $kendo-calendar-font-size: $kendo-calendar-font-size,
+    $kendo-calendar-line-height: $kendo-calendar-line-height,
+    $kendo-calendar-cell-size: $kendo-calendar-cell-size,
+    $kendo-calendar-bg: $kendo-calendar-bg,
+    $kendo-calendar-text: $kendo-calendar-text,
+    $kendo-calendar-border: $kendo-calendar-border,
+    $kendo-calendar-header-padding-x: $kendo-calendar-header-padding-x,
+    $kendo-calendar-header-padding-y: $kendo-calendar-header-padding-y,
+    $kendo-calendar-header-border-width: $kendo-calendar-header-border-width,
+    $kendo-calendar-header-bg: $kendo-calendar-header-bg,
+    $kendo-calendar-header-text: $kendo-calendar-header-text,
+    $kendo-calendar-header-border: $kendo-calendar-header-border,
+    $kendo-calendar-header-gradient: $kendo-calendar-header-gradient,
+    $kendo-calendar-header-shadow: $kendo-calendar-header-shadow,
+    $kendo-calendar-nav-gap: $kendo-calendar-nav-gap,
+    $kendo-calendar-footer-padding-x: $kendo-calendar-footer-padding-x,
+    $kendo-calendar-footer-padding-y: $kendo-calendar-footer-padding-y,
+    $kendo-calendar-cell-padding-x: $kendo-calendar-cell-padding-x,
+    $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-y,
+    $kendo-calendar-cell-line-height: $kendo-calendar-cell-line-height,
+    $kendo-calendar-cell-border-radius: $kendo-calendar-cell-border-radius,
+    $kendo-calendar-header-cell-padding-x: $kendo-calendar-header-cell-padding-x,
+    $kendo-calendar-header-cell-padding-y: $kendo-calendar-header-cell-padding-y,
+    $kendo-calendar-header-cell-width: $kendo-calendar-header-cell-width,
+    $kendo-calendar-header-cell-height: $kendo-calendar-header-cell-height,
+    $kendo-calendar-header-cell-font-size: $kendo-calendar-header-cell-font-size,
+    $kendo-calendar-header-cell-line-height: $kendo-calendar-header-cell-line-height,
+    $kendo-calendar-header-cell-bg: $kendo-calendar-header-cell-bg,
+    $kendo-calendar-header-cell-text: $kendo-calendar-header-cell-text,
+    $kendo-calendar-header-cell-opacity: $kendo-calendar-header-cell-opacity,
+    $kendo-calendar-caption-padding-x: $kendo-calendar-caption-padding-x,
+    $kendo-calendar-caption-padding-y: $kendo-calendar-caption-padding-y,
+    $kendo-calendar-caption-height: $kendo-calendar-caption-height,
+    $kendo-calendar-caption-font-size: $kendo-calendar-caption-font-size,
+    $kendo-calendar-caption-line-height: $kendo-calendar-caption-line-height,
+    $kendo-calendar-caption-font-weight: $kendo-calendar-caption-font-weight,
+    $kendo-calendar-week-number-font-size: $kendo-calendar-week-number-font-size,
+    $kendo-calendar-view-width: $kendo-calendar-view-width,
+    $kendo-calendar-view-height: $kendo-calendar-view-height,
+    $kendo-calendar-view-gap: $kendo-calendar-view-gap,
+    $kendo-calendar-weekend-bg: $kendo-calendar-weekend-bg,
+    $kendo-calendar-weekend-text: $kendo-calendar-weekend-text,
+    $kendo-calendar-today-style: $kendo-calendar-today-style,
+    $kendo-calendar-today-color: $kendo-calendar-today-color,
+    $kendo-calendar-week-number-bg: $kendo-calendar-week-number-bg,
+    $kendo-calendar-week-number-text: $kendo-calendar-week-number-text,
+    $kendo-calendar-other-month-bg: $kendo-calendar-other-month-bg,
+    $kendo-calendar-other-month-text: $kendo-calendar-other-month-text,
+    $kendo-calendar-cell-bg: $kendo-calendar-cell-bg,
+    $kendo-calendar-cell-text: $kendo-calendar-cell-text,
+    $kendo-calendar-cell-border: $kendo-calendar-cell-border,
+    $kendo-calendar-cell-gradient: $kendo-calendar-cell-gradient,
+    $kendo-calendar-cell-hover-bg: $kendo-calendar-cell-hover-bg,
+    $kendo-calendar-cell-hover-text: $kendo-calendar-cell-hover-text,
+    $kendo-calendar-cell-hover-border: $kendo-calendar-cell-hover-border,
+    $kendo-calendar-cell-hover-gradient: $kendo-calendar-cell-hover-gradient,
+    $kendo-calendar-cell-selected-bg: $kendo-calendar-cell-selected-bg,
+    $kendo-calendar-cell-selected-text: $kendo-calendar-cell-selected-text,
+    $kendo-calendar-cell-selected-border: $kendo-calendar-cell-selected-border,
+    $kendo-calendar-cell-selected-gradient: $kendo-calendar-cell-selected-gradient,
+    $kendo-calendar-cell-selected-hover-bg: $kendo-calendar-cell-selected-hover-bg,
+    $kendo-calendar-cell-selected-hover-text: $kendo-calendar-cell-selected-hover-text,
+    $kendo-calendar-cell-selected-hover-border: $kendo-calendar-cell-selected-hover-border,
+    $kendo-calendar-cell-selected-hover-gradient: $kendo-calendar-cell-selected-hover-gradient,
+    $kendo-calendar-cell-focus-shadow: $kendo-calendar-cell-focus-shadow,
+    $kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-selected-focus-shadow,
+    $kendo-calendar-navigation-width: $kendo-calendar-navigation-width,
+    $kendo-calendar-navigation-item-height: $kendo-calendar-navigation-item-height,
+    $kendo-calendar-navigation-bg: $kendo-calendar-navigation-bg,
+    $kendo-calendar-navigation-text: $kendo-calendar-navigation-text,
+    $kendo-calendar-navigation-border: $kendo-calendar-navigation-border,
+    $kendo-calendar-navigation-hover-text: $kendo-calendar-navigation-hover-text,
+    $kendo-infinite-calendar-header-padding-x: $kendo-infinite-calendar-header-padding-x,
+    $kendo-infinite-calendar-header-padding-y: $kendo-infinite-calendar-header-padding-y,
+    $kendo-infinite-calendar-view-padding-x: $kendo-infinite-calendar-view-padding-x,
+    $kendo-infinite-calendar-view-padding-y: $kendo-infinite-calendar-view-padding-y,
+    $kendo-infinite-calendar-view-height: $kendo-infinite-calendar-view-height,
+    $kendo-calendar-range-cell-border-radius: $kendo-calendar-range-cell-border-radius,
+    $kendo-calendar-sm-font-size: $kendo-calendar-sm-font-size,
+    $kendo-calendar-sm-line-height: $kendo-calendar-sm-line-height,
+    $kendo-calendar-sm-cell-size: $kendo-calendar-sm-cell-size,
+    $kendo-calendar-sm-cell-padding-x: $kendo-calendar-sm-cell-padding-x,
+    $kendo-calendar-sm-cell-padding-y: $kendo-calendar-sm-cell-padding-y,
+    $kendo-calendar-md-font-size: $kendo-calendar-md-font-size,
+    $kendo-calendar-md-line-height: $kendo-calendar-md-line-height,
+    $kendo-calendar-md-cell-size: $kendo-calendar-md-cell-size,
+    $kendo-calendar-md-cell-padding-x: $kendo-calendar-md-cell-padding-x,
+    $kendo-calendar-md-cell-padding-y: $kendo-calendar-md-cell-padding-y,
+    $kendo-calendar-lg-font-size: $kendo-calendar-lg-font-size,
+    $kendo-calendar-lg-line-height: $kendo-calendar-lg-line-height,
+    $kendo-calendar-lg-cell-size: $kendo-calendar-lg-cell-size,
+    $kendo-calendar-lg-cell-padding-x: $kendo-calendar-lg-cell-padding-x,
+    $kendo-calendar-lg-cell-padding-y: $kendo-calendar-lg-cell-padding-y,
+    $kendo-calendar-sizes: $kendo-calendar-sizes
+);

package/scss/captcha/_layout.scss

@@ -1,67 +1,4 @@
-@use "./variables.scss" as *;
-
-@mixin kendo-captcha--layout-base() {
-
-    // Captcha
-    .k-captcha {
-        width: $kendo-captcha-width;
-        box-sizing: border-box;
-        font-size: $kendo-captcha-font-size;
-        font-family: $kendo-captcha-font-family;
-        line-height: $kendo-captcha-line-height;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: $kendo-captcha-gap;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    // Image
-    .k-captcha-image-wrap {
-        position: relative;
-        gap: $kendo-captcha-image-wrap-gap;
-    }
-
-    .k-captcha-image-controls {
-        position: relative;
-        gap: $kendo-captcha-image-controls-gap;
-    }
-
-    .k-captcha-image {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .k-captcha-image > img {
-        width: 100%;
-        height: 100%;
-        display: block;
-        object-fit: cover;
-    }
-
-    // Loading
-    .k-captcha-loading .k-captcha-image {
-        height: auto;
-    }
-
-    // Volume Control
-    .k-captcha-volume-control {
-        height: 100%;
-    }
-
-    // Verification Success
-    .k-captcha-validation-message {
-        margin-top: $kendo-captcha-validation-message-margin-top;
-        font-size: $kendo-captcha-validation-message-font-size;
-        font-style: $kendo-captcha-validation-message-font-style;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/captcha/_layout.scss" as *;
 
 
 @mixin kendo-captcha--layout() {

package/scss/captcha/_theme.scss

@@ -1,18 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-captcha--theme-base() {
-
-    // Captcha
-    .k-captcha {
-        @include fill(
-            $kendo-captcha-text,
-            $kendo-captcha-bg,
-            $kendo-captcha-border
-        );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/captcha/_theme.scss" as *;
 
 
 @mixin kendo-captcha--theme() {

package/scss/captcha/_variables.scss

@@ -47,3 +47,20 @@ $kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit
 /// The font style of the Captcha validation message.
 /// @group captcha
 $kendo-captcha-validation-message-font-style: italic !default;
+
+@forward "@progress/kendo-theme-core/scss/components/captcha/_variables.scss" with (
+    $kendo-captcha-spacer: $kendo-captcha-spacer,
+    $kendo-captcha-width: $kendo-captcha-width,
+    $kendo-captcha-font-family: $kendo-captcha-font-family,
+    $kendo-captcha-font-size: $kendo-captcha-font-size,
+    $kendo-captcha-line-height: $kendo-captcha-line-height,
+    $kendo-captcha-gap: $kendo-captcha-gap,
+    $kendo-captcha-bg: $kendo-captcha-bg,
+    $kendo-captcha-text: $kendo-captcha-text,
+    $kendo-captcha-border: $kendo-captcha-border,
+    $kendo-captcha-image-wrap-gap: $kendo-captcha-image-wrap-gap,
+    $kendo-captcha-image-controls-gap: $kendo-captcha-image-controls-gap,
+    $kendo-captcha-validation-message-margin-top: $kendo-captcha-validation-message-margin-top,
+    $kendo-captcha-validation-message-font-size: $kendo-captcha-validation-message-font-size,
+    $kendo-captcha-validation-message-font-style: $kendo-captcha-validation-message-font-style
+);