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

package/scss/components/card/_layout.scss

@@ -0,0 +1,350 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "../../typography/index.import.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 );
+    }
+
+}
+
+
+@mixin kendo-card--layout() {
+    @include kendo-card--layout-base();
+}

package/scss/components/card/_theme.scss

@@ -0,0 +1,111 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../_variables.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 );
+    }
+
+}
+
+
+@mixin kendo-card--theme() {
+    @include kendo-card--theme-base();
+}

package/scss/components/card/_variables.scss

@@ -0,0 +1,72 @@
+// Card
+
+$kendo-card-padding-x: null !default;
+$kendo-card-padding-y: null !default;
+$kendo-card-border-width: null !default;
+$kendo-card-border-radius: null !default;
+$kendo-card-inner-border-radius: null !default;
+$kendo-card-font-family: null !default;
+$kendo-card-font-size: null !default;
+$kendo-card-line-height: null !default;
+
+$kendo-card-deck-gap: null !default;
+
+$kendo-card-bg: null !default;
+$kendo-card-text: null !default;
+$kendo-card-border: null !default;
+$kendo-card-shadow: null !default;
+
+$kendo-card-focus-bg: null !default;
+$kendo-card-focus-text: null !default;
+$kendo-card-focus-border: null !default;
+
+// TODO: double-check: the default theme is not supposed to elevate the Card on focus
+
+$kendo-card-focus-shadow: null !default;
+
+$kendo-card-header-padding-x: null !default;
+$kendo-card-header-padding-y: null !default;
+$kendo-card-header-border-width: null !default;
+$kendo-card-header-bg: null !default;
+$kendo-card-header-text: null !default;
+$kendo-card-header-border: null !default;
+
+$kendo-card-body-padding-x: null !default;
+$kendo-card-body-padding-y: null !default;
+
+$kendo-card-footer-padding-x: null !default;
+$kendo-card-footer-padding-y: null !default;
+$kendo-card-footer-border-width: null !default;
+$kendo-card-footer-bg: null !default;
+$kendo-card-footer-text: null !default;
+$kendo-card-footer-border: null !default;
+
+$kendo-card-title-margin-bottom: null !default;
+$kendo-card-title-font-size: null !default;
+$kendo-card-title-font-family: null !default;
+$kendo-card-title-line-height: null !default;
+$kendo-card-title-font-weight: null !default;
+$kendo-card-title-letter-spacing: null !default;
+
+$kendo-card-subtitle-margin-bottom: null !default;
+$kendo-card-subtitle-font-size: null !default;
+$kendo-card-subtitle-font-family: null !default;
+$kendo-card-subtitle-line-height: null !default;
+$kendo-card-subtitle-font-weight: null !default;
+$kendo-card-subtitle-letter-spacing: null !default;
+$kendo-card-subtitle-text: null !default;
+
+$kendo-card-img-max-width: null !default;
+$kendo-card-avatar-size: null !default;
+$kendo-card-avatar-spacing: null !default;
+
+$kendo-card-actions-padding-x: null !default;
+$kendo-card-actions-padding-y: null !default;
+$kendo-card-actions-border-width: null !default;
+$kendo-card-actions-gap: null !default;
+
+$kendo-card-deck-scroll-button-radius: null !default;
+$kendo-card-deck-scroll-button-offset: null !default;
+
+$kendo-card-callout-width: null !default;
+$kendo-card-callout-height: null !default;

package/scss/components/chart-wizard/_index.scss

@@ -0,0 +1,37 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../window/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../dataviz/_index.scss" as *;
+@use "../expansion-panel/_index.scss" as *;
+@use "../grid/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+@use "../listview/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../combobox/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-chart-wizard--styles() {
+    @include import-once( "chart-wizard" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-window--styles();
+        @include kendo-splitter--styles();
+        @include kendo-dataviz--styles();
+        @include kendo-expander--styles();
+        @include kendo-grid--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-listview--styles();
+        @include kendo-form--styles();
+        @include kendo-combobox--styles();
+        @include kendo-chart-wizard--layout();
+        @include kendo-chart-wizard--theme();
+    }
+}

package/scss/components/chart-wizard/_layout.scss

@@ -0,0 +1,46 @@
+@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;
+    }
+}
+
+
+@mixin kendo-chart-wizard--layout() {
+    @include kendo-chart-wizard--layout-base();
+}

package/scss/components/chart-wizard/_theme.scss

@@ -0,0 +1,37 @@
+@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;
+        }
+    }
+}
+
+
+@mixin kendo-chart-wizard--theme() {
+    @include kendo-chart-wizard--theme-base();
+}

package/scss/components/chart-wizard/_variables.scss

@@ -0,0 +1,16 @@
+// Chart wizard
+
+$kendo-chart-wizard-icon-area-color: null !default;
+$kendo-chart-wizard-icon-area-bg: null !default;
+$kendo-chart-wizard-icon-area-border-radius: null !default;
+$kendo-chart-wizard-icon-area-padding: null !default;
+$kendo-chart-wizard-icon-area-focus-shadow: null !default;
+$kendo-chart-wizard-icon-area-selected-shadow: null !default;
+
+$kendo-chart-wizard-chart-type-selected-color: null !default;
+
+$kendo-chart-wizard-preview-pane-padding: null !default;
+$kendo-chart-wizard-property-pane-padding: null !default;
+
+$kendo-chart-wizard-chart-type-spacing: null !default;
+$kendo-chart-wizard-icon-text-gap: null !default;

package/scss/components/chat/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../card/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-chat--styles() {
+    @include import-once( "chat" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-card--styles();
+        @include kendo-icon--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-chat--layout();
+        @include kendo-chat--theme();
+    }
+}