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

package/scss/card/_layout.scss

@@ -1,346 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../typography/_variables.scss" as *;
-
-@mixin kendo-card--layout-base() {
-
-
-    // Angular elements
-    kendo-card,
-    kendo-card-header,
-    kendo-card-body,
-    kendo-card-actions,
-    kendo-card-footer {
-        display: block;
-    }
-
-
-    // Card
-    .k-card {
-        @include border-radius( $kendo-card-border-radius );
-        border-width: $kendo-card-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-card-font-family;
-        font-size: $kendo-card-font-size;
-        line-height: $kendo-card-line-height;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        // Card avatar
-        .k-card-avatar,
-        .k-avatar {
-            margin-right: $kendo-card-avatar-spacing;
-            width: $kendo-card-avatar-size;
-            height: $kendo-card-avatar-size;
-            flex-basis: $kendo-card-avatar-size;
-        }
-    }
-    .k-card > .k-card-inner {
-        @include border-radius( $kendo-card-inner-border-radius );
-        display: flex;
-        flex-direction: inherit;
-        overflow: hidden;
-        position: relative;
-    }
-
-    // Card orientation
-    .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
-
-    // Header
-    .k-card-header {
-        padding-block: $kendo-card-header-padding-y;
-        padding-inline: $kendo-card-header-padding-x;
-        border-width: 0 0 $kendo-card-header-border-width;
-        border-style: solid;
-        outline: 0;
-        flex-shrink: 0;
-        overflow: hidden;
-        position: relative;
-        z-index: 1;
-
-        .k-card-title,
-        .k-card-subtitle {
-            margin-bottom: 0;
-        }
-        .k-card-title + .k-card-subtitle,
-        .k-card-subtitle + .k-card-subtitle {
-            margin-top: $kendo-card-title-margin-bottom;
-        }
-    }
-
-
-    // Footer
-    .k-card-footer {
-        padding-block: $kendo-card-footer-padding-y;
-        padding-inline: $kendo-card-footer-padding-x;
-        border-width: $kendo-card-footer-border-width 0 0;
-        border-style: solid;
-        outline: 0;
-        flex-shrink: 0;
-    }
-
-
-    // Body
-    .k-card-body {
-        padding-block: $kendo-card-body-padding-y;
-        padding-inline: $kendo-card-body-padding-x;
-        outline: 0;
-        flex: 1 1 auto;
-
-        p {
-            margin: $kendo-paragraph-margin;
-        }
-
-        > .k-last,
-        > :last-child {
-            margin-bottom: 0;
-        }
-
-        > .k-card-actions {
-            padding: 0;
-        }
-    }
-
-    // Card media
-    .k-card-media {
-        border: 0;
-        max-width: 100%;
-        flex-shrink: 0;
-        overflow: hidden;
-    }
-
-    .k-card-horizontal .k-card-media {
-        max-width: $kendo-card-img-max-width;
-        object-fit: cover;
-    }
-
-
-    // Card title
-    .k-card-title {
-        margin: 0 0 $kendo-card-title-margin-bottom;
-        @include typography(
-            $kendo-card-title-font-size,
-            $kendo-card-title-font-family,
-            $kendo-card-title-line-height,
-            $kendo-card-title-font-weight,
-            $kendo-card-title-letter-spacing
-        );
-    }
-
-
-    // Card subtitle
-    .k-card-subtitle {
-        margin: 0 0 $kendo-card-subtitle-margin-bottom;
-        @include typography(
-            $kendo-card-subtitle-font-size,
-            $kendo-card-subtitle-font-family,
-            $kendo-card-subtitle-line-height,
-            $kendo-card-subtitle-font-weight,
-            $kendo-card-subtitle-letter-spacing
-        );
-    }
-
-
-    // Separator
-    .k-card-separator {
-        margin: 0;
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: block;
-        flex: 0 0 auto;
-        align-self: stretch;
-    }
-
-    .k-card-separator.k-separator-horizontal,
-    .k-card-vertical > .k-card-separator {
-        border-top-width: 1px;
-    }
-
-    .k-card-separator.k-separator-vertical,
-    .k-card-horizontal > .k-card-separator {
-        border-left-width: 1px;
-    }
-
-    .k-card > .k-hr {
-        margin: 0;
-        flex: 0 0 auto;
-        border-color: inherit;
-    }
-
-    // Card actions
-    .k-card-actions {
-        padding-block: $kendo-card-actions-padding-y;
-        padding-inline: $kendo-card-actions-padding-x;
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        overflow: hidden;
-        display: flex;
-        flex-shrink: 0;
-        flex-basis: auto;
-        gap: $kendo-card-actions-gap;
-    }
-
-    .k-card-horizontal .k-actions-horizontal {
-        width: auto;
-    }
-
-    // List
-    .k-card-list {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-        gap: $kendo-card-deck-gap;
-        flex: 0 0 auto;
-
-        .k-card {
-            flex: 0 0 auto;
-        }
-    }
-
-
-    // Deck
-    .k-card-deck {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        gap: $kendo-card-deck-gap;
-        flex: 0 0 auto;
-
-        .k-card {
-            flex: 0 0 auto;
-        }
-    }
-
-    .k-card-deck-scrollwrap {
-        padding-bottom: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar)
-        width: 100%;
-        box-sizing: content-box;
-        display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        position: relative;
-        overflow: hidden;
-
-        > .k-button {
-            @include border-radius( $kendo-card-deck-scroll-button-radius );
-            flex: 0 0 auto;
-            position: absolute;
-            z-index: 1;
-
-            &:first-child {
-                left: $kendo-card-deck-scroll-button-offset;
-            }
-
-            &:last-child {
-                right: $kendo-card-deck-scroll-button-offset;
-            }
-        }
-
-        > .k-card-deck {
-            // hide scrollbar
-            $scrollbar-size: 20px;
-
-            margin-bottom: -$scrollbar-size;
-            padding-bottom: $scrollbar-size;
-            flex: 1 1 auto;
-        }
-    }
-
-
-    // Group
-    .k-card-group {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        flex: 0 0 auto;
-
-        .k-card {
-            @include border-radius( 0 );
-            flex: 0 0 auto;
-        }
-        .k-card + .k-card {
-            margin-inline-start: $kendo-card-border-width;
-        }
-
-
-        // Border-radius
-        .k-card.k-first {
-            @include border-left-radius( $kendo-card-border-radius );
-        }
-        .k-card.k-last {
-            @include border-right-radius( $kendo-card-border-radius );
-        }
-        .k-card.k-only {
-            @include border-radius( $kendo-card-border-radius );
-        }
-    }
-
-    // Card with callout
-    .k-card-with-callout {
-        overflow: visible;
-    }
-
-
-    // Card callout
-    .k-card-callout {
-        margin: 0;
-        width: $kendo-card-callout-width;
-        height: $kendo-card-callout-height;
-        border-width: $kendo-card-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        position: absolute;
-    }
-
-    .k-card-callout.k-callout-n {
-        top: 0;
-        left: 50%;
-        transform: translate(-50%, -50%) rotate(45deg);
-    }
-    .k-card-callout.k-callout-e {
-        top: 50%;
-        right: 0;
-        transform: translate(50%, -50%) rotate(-45deg);
-    }
-    .k-card-callout.k-callout-s {
-        bottom: 0;
-        left: 50%;
-        transform: translate(-50%, 50%) rotate(45deg);
-    }
-    .k-card-callout.k-callout-w {
-        top: 50%;
-        left: 0;
-        transform: translate(-50%, -50%) rotate(45deg);
-    }
-
-
-    // Solid card
-    .k-card-solid {
-        @include box-shadow( $kendo-card-shadow );
-    }
-
-
-    // Flat card
-    .k-card-flat {
-        @include box-shadow( none );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/card/_layout.scss" as *;
 
 
 @mixin kendo-card--layout() {

package/scss/card/_theme.scss

@@ -1,106 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-card--theme-base() {
-
-    // Card
-    .k-card {
-        @include fill(
-            $kendo-card-text,
-            $kendo-card-bg,
-            $kendo-card-border
-        );
-        @include box-shadow( $kendo-card-shadow );
-
-        .k-card-inner {
-            background-color: inherit;
-            border-color: inherit;
-        }
-
-        &:focus,
-        &.k-focus {
-            @include fill(
-                $kendo-card-focus-text,
-                $kendo-card-focus-bg,
-                $kendo-card-focus-border
-            );
-            @include focus-indicator( $kendo-card-focus-shadow );
-        }
-
-        &.k-selected {
-            @include box-shadow( $kendo-card-focus-shadow );
-        }
-    }
-
-
-    // Card actions
-    .k-card-actions {
-        border-color: $kendo-card-border;
-    }
-
-
-    // Header
-    .k-card-header {
-        @include fill( $kendo-card-header-text, $kendo-card-header-bg, $kendo-card-header-border );
-    }
-
-
-    // Footer
-    .k-card-footer {
-        @include fill( $kendo-card-footer-text, $kendo-card-footer-bg, $kendo-card-footer-border );
-    }
-
-
-    // Separator
-    .k-card-separator,
-    .k-card .k-separator {
-        border-color: $kendo-card-border;
-    }
-
-
-    // TODO: refactor
-    .k-card-subtitle {
-        color: $kendo-card-subtitle-text;
-    }
-
-
-    // Card theme colors
-    @each $name, $color in $kendo-theme-colors {
-        .k-card-#{$name} {
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10));
-            color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6));
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9));
-
-            .k-card-subtitle {
-                color: inherit;
-            }
-        }
-    }
-
-
-    .k-card-wrap {
-        &:focus,
-        &.k-focus,
-        &.k-selected {
-            > .k-card {
-                @include focus-indicator( $kendo-card-focus-shadow );
-            }
-        }
-    }
-
-
-    // Card callout
-    .k-card-callout {
-        @include fill(
-            $bg: inherit,
-            $border: inherit
-        );
-
-        @include box-shadow( inherit );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/card/_theme.scss" as *;
 
 
 @mixin kendo-card--theme() {

package/scss/card/_variables.scss

@@ -183,3 +183,61 @@ $kendo-card-callout-width: 20px !default;
 /// The height of the Card callout.
 /// @group card
 $kendo-card-callout-height: 20px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with (
+    $kendo-card-padding-x: $kendo-card-padding-x,
+    $kendo-card-padding-y: $kendo-card-padding-y,
+    $kendo-card-border-width: $kendo-card-border-width,
+    $kendo-card-border-radius: $kendo-card-border-radius,
+    $kendo-card-inner-border-radius: $kendo-card-inner-border-radius,
+    $kendo-card-font-family: $kendo-card-font-family,
+    $kendo-card-font-size: $kendo-card-font-size,
+    $kendo-card-line-height: $kendo-card-line-height,
+    $kendo-card-deck-gap: $kendo-card-deck-gap,
+    $kendo-card-bg: $kendo-card-bg,
+    $kendo-card-text: $kendo-card-text,
+    $kendo-card-border: $kendo-card-border,
+    $kendo-card-shadow: $kendo-card-shadow,
+    $kendo-card-focus-bg: $kendo-card-focus-bg,
+    $kendo-card-focus-text: $kendo-card-focus-text,
+    $kendo-card-focus-border: $kendo-card-focus-border,
+    $kendo-card-focus-shadow: $kendo-card-focus-shadow,
+    $kendo-card-header-padding-x: $kendo-card-header-padding-x,
+    $kendo-card-header-padding-y: $kendo-card-header-padding-y,
+    $kendo-card-header-border-width: $kendo-card-header-border-width,
+    $kendo-card-header-bg: $kendo-card-header-bg,
+    $kendo-card-header-text: $kendo-card-header-text,
+    $kendo-card-header-border: $kendo-card-header-border,
+    $kendo-card-body-padding-x: $kendo-card-body-padding-x,
+    $kendo-card-body-padding-y: $kendo-card-body-padding-y,
+    $kendo-card-footer-padding-x: $kendo-card-footer-padding-x,
+    $kendo-card-footer-padding-y: $kendo-card-footer-padding-y,
+    $kendo-card-footer-border-width: $kendo-card-footer-border-width,
+    $kendo-card-footer-bg: $kendo-card-footer-bg,
+    $kendo-card-footer-text: $kendo-card-footer-text,
+    $kendo-card-footer-border: $kendo-card-footer-border,
+    $kendo-card-title-margin-bottom: $kendo-card-title-margin-bottom,
+    $kendo-card-title-font-size: $kendo-card-title-font-size,
+    $kendo-card-title-font-family: $kendo-card-title-font-family,
+    $kendo-card-title-line-height: $kendo-card-title-line-height,
+    $kendo-card-title-font-weight: $kendo-card-title-font-weight,
+    $kendo-card-title-letter-spacing: $kendo-card-title-letter-spacing,
+    $kendo-card-subtitle-margin-bottom: $kendo-card-subtitle-margin-bottom,
+    $kendo-card-subtitle-font-size: $kendo-card-subtitle-font-size,
+    $kendo-card-subtitle-font-family: $kendo-card-subtitle-font-family,
+    $kendo-card-subtitle-line-height: $kendo-card-subtitle-line-height,
+    $kendo-card-subtitle-font-weight: $kendo-card-subtitle-font-weight,
+    $kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing,
+    $kendo-card-subtitle-text: $kendo-card-subtitle-text,
+    $kendo-card-img-max-width: $kendo-card-img-max-width,
+    $kendo-card-avatar-size: $kendo-card-avatar-size,
+    $kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
+    $kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
+    $kendo-card-actions-padding-y: $kendo-card-actions-padding-y,
+    $kendo-card-actions-border-width: $kendo-card-actions-border-width,
+    $kendo-card-actions-gap: $kendo-card-actions-gap,
+    $kendo-card-deck-scroll-button-radius: $kendo-card-deck-scroll-button-radius,
+    $kendo-card-deck-scroll-button-offset: $kendo-card-deck-scroll-button-offset,
+    $kendo-card-callout-width: $kendo-card-callout-width,
+    $kendo-card-callout-height: $kendo-card-callout-height
+);

package/scss/chart-wizard/_layout.scss

@@ -1,45 +1,4 @@
-@use "./variables.scss" as *;
-
-@mixin kendo-chart-wizard--layout-base() {
-    // Chart wizard
-    .k-chart-wizard {
-        .k-icon-text-wrapper {
-            display: flex;
-            align-items: center;
-            gap: $kendo-chart-wizard-icon-text-gap;
-        }
-
-        .k-icon-background-area {
-            display: flex;
-            padding: $kendo-chart-wizard-icon-area-padding;
-            border-radius: $kendo-chart-wizard-icon-area-border-radius;
-        }
-    }
-
-    .k-chart-types-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: $kendo-chart-wizard-chart-type-spacing;
-    }
-
-    .k-chart-wizard-splitter {
-        height: 100%;
-
-        .k-tabstrip {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .k-chart-wizard-preview-pane {
-        padding: $kendo-chart-wizard-preview-pane-padding;
-    }
-
-    .k-chart-wizard-property-pane {
-        padding: $kendo-chart-wizard-property-pane-padding;
-    }
-}
-
+@use "@progress/kendo-theme-core/scss/components/chart-wizard/_layout.scss" as *;
 
 @mixin kendo-chart-wizard--layout() {
     @include kendo-chart-wizard--layout-base();

package/scss/chart-wizard/_theme.scss

@@ -1,36 +1,4 @@
-@use "./variables.scss" as *;
-
-@mixin kendo-chart-wizard--theme-base() {
-    .k-chart-wizard {
-        .k-icon-text-wrapper {
-            &.k-selected {
-                color: $kendo-chart-wizard-chart-type-selected-color;
-
-                .k-icon-background-area {
-                    box-shadow: $kendo-chart-wizard-icon-area-selected-shadow;
-                }
-            }
-
-            &:hover,
-            &.k-hover {
-                cursor: pointer;
-            }
-
-            &:focus,
-            &.k-focus {
-                .k-icon-background-area {
-                    box-shadow: $kendo-chart-wizard-icon-area-focus-shadow;
-                }
-            }
-        }
-
-        .k-icon-background-area {
-            color: $kendo-chart-wizard-icon-area-color;
-            background-color: $kendo-chart-wizard-icon-area-bg;
-        }
-    }
-}
-
+@use "@progress/kendo-theme-core/scss/components/chart-wizard/_theme.scss" as *;
 
 @mixin kendo-chart-wizard--theme() {
     @include kendo-chart-wizard--theme-base();

package/scss/chart-wizard/_variables.scss

@@ -39,3 +39,17 @@ $kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default;
 /// The gap between the icon area and its text.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-text-gap: k-spacing(3) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/chart-wizard/_variables.scss" with (
+    $kendo-chart-wizard-icon-area-color: $kendo-chart-wizard-icon-area-color,
+    $kendo-chart-wizard-icon-area-bg: $kendo-chart-wizard-icon-area-bg,
+    $kendo-chart-wizard-icon-area-border-radius: $kendo-chart-wizard-icon-area-border-radius,
+    $kendo-chart-wizard-icon-area-padding: $kendo-chart-wizard-icon-area-padding,
+    $kendo-chart-wizard-icon-area-focus-shadow: $kendo-chart-wizard-icon-area-focus-shadow,
+    $kendo-chart-wizard-icon-area-selected-shadow: $kendo-chart-wizard-icon-area-selected-shadow,
+    $kendo-chart-wizard-chart-type-selected-color: $kendo-chart-wizard-chart-type-selected-color,
+    $kendo-chart-wizard-preview-pane-padding: $kendo-chart-wizard-preview-pane-padding,
+    $kendo-chart-wizard-property-pane-padding: $kendo-chart-wizard-property-pane-padding,
+    $kendo-chart-wizard-chart-type-spacing: $kendo-chart-wizard-chart-type-spacing,
+    $kendo-chart-wizard-icon-text-gap: $kendo-chart-wizard-icon-text-gap
+);