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

package/scss/radio/_theme.scss

@@ -1,94 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-radio--theme-base() {
-
-    // Radio
-    .k-radio {
-        @include fill(
-            $kendo-radio-text,
-            $kendo-radio-bg,
-            $kendo-radio-border
-        );
-    }
-
-
-    // Hover state
-    .k-radio:hover,
-    .k-radio.k-hover {
-        @include fill(
-            $kendo-radio-hover-text,
-            $kendo-radio-hover-bg,
-            $kendo-radio-hover-border
-        );
-    }
-
-
-    // Focus state
-    .k-radio:focus,
-    .k-radio.k-focus {
-        @include fill( $border: $kendo-radio-focus-border );
-        @include focus-indicator( $kendo-radio-focus-shadow );
-    }
-
-
-    // Invalid state
-    .k-radio.k-invalid,
-    .k-radio.ng-invalid.ng-touched,
-    .k-radio.ng-invalid.ng-dirty {
-        @include fill( $border: $kendo-radio-invalid-border );
-    }
-    .k-radio.k-invalid + .k-radio-label,
-    .k-radio.ng-invalid.ng-touched + .k-radio-label,
-    .k-radio.ng-invalid.ng-dirty + .k-radio-label {
-        @include fill( $color: $kendo-radio-invalid-text );
-    }
-
-
-    // Checked
-    .k-radio:checked,
-    .k-radio.k-checked {
-        @include fill(
-            $kendo-radio-checked-text,
-            $kendo-radio-checked-bg,
-            $kendo-radio-checked-border
-        );
-    }
-    .k-radio:checked:focus,
-    .k-radio.k-checked.k-focus {
-        @include fill( $border: $kendo-radio-focus-checked-border );
-        @include focus-indicator( $kendo-radio-focus-checked-shadow );
-    }
-
-
-    // Disabled
-    .k-radio:disabled,
-    .k-radio.k-disabled {
-        @include fill(
-            $kendo-radio-disabled-text,
-            $kendo-radio-disabled-bg,
-            $kendo-radio-disabled-border
-        );
-    }
-    .k-radio:checked:disabled,
-    .k-radio.k-checked.k-disabled {
-        @include fill(
-            $kendo-radio-disabled-checked-text,
-            $kendo-radio-disabled-checked-bg,
-            $kendo-radio-disabled-checked-border
-        );
-    }
-
-
-    // Ripple
-    .k-ripple-container {
-        .k-radio::after {
-            background: $kendo-radio-ripple-bg;
-            opacity: $kendo-radio-ripple-opacity;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/radio/_theme.scss" as *;
 
 
 @mixin kendo-radio--theme() {

package/scss/radio/_variables.scss

@@ -187,3 +187,51 @@ $kendo-radio-ripple-bg: $kendo-radio-checked-bg !default;
 /// The opacity of the RadioButton ripple.
 /// @group radio
 $kendo-radio-ripple-opacity: .25 !default;
+
+@forward "@progress/kendo-theme-core/scss/components/radio/_variables.scss" with (
+    $kendo-radio-radius: $kendo-radio-radius,
+    $kendo-radio-border-width: $kendo-radio-border-width,
+    $kendo-radio-sm-size: $kendo-radio-sm-size,
+    $kendo-radio-md-size: $kendo-radio-md-size,
+    $kendo-radio-lg-size: $kendo-radio-lg-size,
+    $kendo-radio-sm-glyph-size: $kendo-radio-sm-glyph-size,
+    $kendo-radio-md-glyph-size: $kendo-radio-md-glyph-size,
+    $kendo-radio-lg-glyph-size: $kendo-radio-lg-glyph-size,
+    $kendo-radio-sm-ripple-size: $kendo-radio-sm-ripple-size,
+    $kendo-radio-md-ripple-size: $kendo-radio-md-ripple-size,
+    $kendo-radio-lg-ripple-size: $kendo-radio-lg-ripple-size,
+    $kendo-radio-sizes: $kendo-radio-sizes,
+    $kendo-radio-bg: $kendo-radio-bg,
+    $kendo-radio-text: $kendo-radio-text,
+    $kendo-radio-border: $kendo-radio-border,
+    $kendo-radio-hover-bg: $kendo-radio-hover-bg,
+    $kendo-radio-hover-text: $kendo-radio-hover-text,
+    $kendo-radio-hover-border: $kendo-radio-hover-border,
+    $kendo-radio-checked-bg: $kendo-radio-checked-bg,
+    $kendo-radio-checked-text: $kendo-radio-checked-text,
+    $kendo-radio-checked-border: $kendo-radio-checked-border,
+    $kendo-radio-focus-border: $kendo-radio-focus-border,
+    $kendo-radio-focus-shadow: $kendo-radio-focus-shadow,
+    $kendo-radio-focus-checked-border: $kendo-radio-focus-checked-border,
+    $kendo-radio-focus-checked-shadow: $kendo-radio-focus-checked-shadow,
+    $kendo-radio-disabled-bg: $kendo-radio-disabled-bg,
+    $kendo-radio-disabled-text: $kendo-radio-disabled-text,
+    $kendo-radio-disabled-border: $kendo-radio-disabled-border,
+    $kendo-radio-disabled-checked-bg: $kendo-radio-disabled-checked-bg,
+    $kendo-radio-disabled-checked-text: $kendo-radio-disabled-checked-text,
+    $kendo-radio-disabled-checked-border: $kendo-radio-disabled-checked-border,
+    $kendo-radio-invalid-bg: $kendo-radio-invalid-bg,
+    $kendo-radio-invalid-text: $kendo-radio-invalid-text,
+    $kendo-radio-invalid-border: $kendo-radio-invalid-border,
+    $kendo-radio-indicator-type: $kendo-radio-indicator-type,
+    $kendo-radio-glyph-font-family: $kendo-radio-glyph-font-family,
+    $kendo-radio-checked-glyph: $kendo-radio-checked-glyph,
+    $kendo-radio-checked-image: $kendo-radio-checked-image,
+    $kendo-radio-disabled-checked-image: $kendo-radio-disabled-checked-image,
+    $kendo-radio-label-margin-x: $kendo-radio-label-margin-x,
+    $kendo-radio-list-spacing: $kendo-radio-list-spacing,
+    $kendo-radio-list-item-padding-x: $kendo-radio-list-item-padding-x,
+    $kendo-radio-list-item-padding-y: $kendo-radio-list-item-padding-y,
+    $kendo-radio-ripple-bg: $kendo-radio-ripple-bg,
+    $kendo-radio-ripple-opacity: $kendo-radio-ripple-opacity
+);

package/scss/rating/_layout.scss

@@ -1,96 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-rating--layout-base() {
-
-    .k-rating {
-        margin: 0;
-        padding: 0;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        font-family: $kendo-rating-font-family;
-        font-size: $kendo-rating-font-size;
-        line-height: $kendo-rating-line-height;
-        display: inline-flex;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        &.k-readonly {
-            pointer-events: none;
-        }
-    }
-
-    .k-rating-container {
-        flex: 0 1 auto;
-        position: relative;
-        margin-block: 0;
-        margin-inline: $kendo-rating-container-margin-x;
-
-        .k-rating-item {
-            display: inline-flex;
-            position: relative;
-            padding-block: $kendo-rating-item-padding-y;
-            padding-inline: $kendo-rating-item-padding-x;
-            align-items: center;
-            vertical-align: middle;
-            margin: 0;
-            outline: 0;
-            overflow: hidden;
-            transition: color 200ms ease-out 0s;
-
-            * {
-                pointer-events: none;
-            }
-
-            .k-rating-precision-part,
-            .k-rating-precision-complement {
-                display: inherit;
-                position: absolute;
-                top: $kendo-rating-item-padding-y;
-                left: $kendo-rating-item-padding-x;
-                overflow: hidden;
-            }
-
-            .k-rating-precision-complement {
-                direction: rtl;
-            }
-
-            svg {
-                fill: currentColor;
-            }
-        }
-    }
-
-    .k-rating-label {
-        display: inline-flex;
-        align-items: center;
-        vertical-align: middle;
-        line-height: $kendo-rating-label-line-height;
-        margin-block: $kendo-rating-label-margin-y;
-        margin-inline: $kendo-rating-label-margin-x;
-    }
-
-    .k-rtl,
-    [dir="rtl"] {
-        .k-rating-precision-part {
-            left: auto;
-            right: $kendo-rating-item-padding-x;
-        }
-
-        .k-rating-item .k-rating-precision-complement {
-            direction: ltr;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/rating/_layout.scss" as *;
 
 
 @mixin kendo-rating--layout() {

package/scss/rating/_theme.scss

@@ -1,46 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-rating--theme-base() {
-
-    .k-rating {
-        color: $kendo-component-text;
-
-        &:focus,
-        &.k-focus {
-
-            .k-rating-item {
-                > .k-icon {
-                    filter: drop-shadow( $kendo-rating-icon-focus-shadow );
-                }
-
-                &.k-selected > .k-icon {
-                    filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow );
-                }
-            }
-        }
-    }
-
-    .k-rating-item {
-        color: $kendo-rating-icon-text;
-
-        &.k-selected {
-            color: $kendo-rating-icon-selected-text;
-
-            &:focus,
-            &.k-focus {
-                color: $kendo-rating-icon-focus-text;
-            }
-        }
-
-        &:hover,
-        &.k-hover {
-            color: $kendo-rating-icon-hover-text;
-            cursor: pointer;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/rating/_theme.scss" as *;
 
 
 @mixin kendo-rating--theme() {

package/scss/rating/_variables.scss

@@ -58,3 +58,22 @@ $kendo-rating-icon-focus-shadow: k-elevation(1) !default;
 /// The shadow of the focused and selected Rating icon.
 /// @group rating
 $kendo-rating-icon-focus-selected-shadow: k-elevation(1) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/rating/_variables.scss" with (
+    $kendo-rating-font-family: $kendo-rating-font-family,
+    $kendo-rating-font-size: $kendo-rating-font-size,
+    $kendo-rating-line-height: $kendo-rating-line-height,
+    $kendo-rating-container-margin-x: $kendo-rating-container-margin-x,
+    $kendo-rating-item-padding-x: $kendo-rating-item-padding-x,
+    $kendo-rating-item-padding-y: $kendo-rating-item-padding-y,
+    $kendo-rating-label-margin-x: $kendo-rating-label-margin-x,
+    $kendo-rating-label-margin-y: $kendo-rating-label-margin-y,
+    $kendo-rating-label-line-height: $kendo-rating-label-line-height,
+    $kendo-rating-icon-size: $kendo-rating-icon-size,
+    $kendo-rating-icon-text: $kendo-rating-icon-text,
+    $kendo-rating-icon-selected-text: $kendo-rating-icon-selected-text,
+    $kendo-rating-icon-hover-text: $kendo-rating-icon-hover-text,
+    $kendo-rating-icon-focus-text: $kendo-rating-icon-focus-text,
+    $kendo-rating-icon-focus-shadow: $kendo-rating-icon-focus-shadow,
+    $kendo-rating-icon-focus-selected-shadow: $kendo-rating-icon-focus-selected-shadow
+);

package/scss/responsivepanel/_layout.scss

@@ -1,50 +1,4 @@
-@mixin kendo-responsive-panel--layout-base() {
-
-    .k-rpanel {}
-
-    // Variants
-    .k-rpanel-left,
-    .k-rpanel-right {
-        position: fixed;
-        display: block;
-        overflow: auto;
-        min-width: 320px;
-        height: 100%;
-        top: 0;
-
-        & + * {
-            overflow: auto;
-        }
-
-        &.k-rpanel-expanded {
-            transform: translateX(0) translateZ(0);
-        }
-    }
-    .k-rpanel-left {
-        transform: translateX(-100%) translateZ(0);
-        left: 0;
-    }
-    .k-rpanel-right {
-        transform: translateX(100%) translateZ(0);
-        right: 0;
-    }
-
-    // Top
-    .k-rpanel-top {
-        position: static;
-        max-height: 0;
-    }
-    .k-rpanel-top.k-rpanel-expanded {
-        max-height: 568px;
-        overflow: visible !important; // stylelint-disable-line declaration-no-important
-    }
-
-    // Toggle button
-    .k-rpanel-toggle {
-        touch-action: manipulation;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/responsivepanel/_layout.scss" as *;
 
 
 @mixin kendo-responsive-panel--layout() {

package/scss/responsivepanel/_theme.scss

@@ -1,8 +1,4 @@
-@mixin kendo-responsive-panel--theme-base() {
-
-    .k-rpanel {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/responsivepanel/_theme.scss" as *;
 
 
 @mixin kendo-responsive-panel--theme() {

package/scss/ripple/_layout.scss

@@ -1,54 +1,4 @@
-@mixin kendo-ripple--layout-base() {
-
-    .k-ripple-target {
-        position: relative;
-    }
-
-    .k-ripple {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        overflow: hidden;
-        pointer-events: none;
-    }
-
-    .k-ripple-blob {
-        pointer-events: none;
-        position: absolute;
-        border-radius: 50%;
-        padding: 0;
-        transform: translate(-50%, -50%) scale(0);
-        transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1);
-        opacity: .1;
-        background-color: currentColor;
-    }
-
-    .k-primary .k-ripple-blob {
-        opacity: .2;
-    }
-
-    .k-ripple-focus::after {
-        visibility: visible;
-        animation: ripple 600ms ease-out;
-    }
-
-    @keyframes ripple {
-        0% {
-            transform: translate(-50%, -50%) scale(0);
-        }
-        20% {
-            transform: translate(-50%, -50%) scale(1);
-        }
-        100% {
-            opacity: 0;
-            transform: translate(-50%, -50%) scale(1);
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/ripple/_layout.scss" as *;
 
 
 @mixin kendo-ripple--layout() {

package/scss/ripple/_theme.scss

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