@progress/kendo-theme-fluent 5.7.0

package/scss/card/_layout.scss

@@ -0,0 +1,364 @@
+@use "_variables.scss" as *;
+@use "../core/variables" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+@use "../typography/variables.scss" as *;
+
+@mixin kendo-card--layout() {
+
+    // Angular elements
+    kendo-card,
+    kendo-card-header,
+    kendo-card-body,
+    kendo-card-actions,
+    kendo-card-footer {
+        display: block;
+    }
+
+
+    // Card
+    .k-card {
+        @include border-radius( var( --kendo-card-border-radius, #{$kendo-card-border-radius} ) );
+        border-width: var( --kendo-card-border-width, #{$kendo-card-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-card-font-family, #{$kendo-card-font-family} );
+        font-size: var( --kendo-card-font-size, #{$kendo-card-font-size} );
+        line-height: var( --kendo-card-line-height, #{$kendo-card-line-height} );
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+    .k-card > .k-card-inner {
+        @include border-radius( var( --kendo-card-inner-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
+
+
+    // Card title
+    .k-card-title {
+        @extend .k-h5;
+        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
+        margin-block-end: var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} );
+    }
+
+
+    // Card subtitle
+    .k-card-subtitle {
+        @extend .k-h6;
+        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
+        margin-block-end: var( --kendo-card-subtitle-margin-bottom, #{$kendo-card-subtitle-margin-bottom} );
+
+        @at-root .k-card-title + & {
+            margin-block-start: calc( var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} ) * -1 );
+        }
+    }
+
+
+    // Header
+    .k-card-header {
+        @extend .k-h5;
+        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
+        margin: 0;
+        padding-inline: var( --kendo-card-header-padding-x, #{$kendo-card-header-padding-x} );
+        padding-block: var( --kendo-card-header-padding-y, #{$kendo-card-header-padding-y} );
+        border-width: 0 0 var( --kendo-card-header-border-width, #{$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: 0;
+        }
+    }
+
+
+    // Footer
+    .k-card-footer {
+        padding-inline: var( --kendo-card-footer-padding-x, #{$kendo-card-footer-padding-x} );
+        padding-block: var( --kendo-card-footer-padding-y, #{$kendo-card-footer-padding-y} );
+        border-width: var( --kendo-card-footer-border-width, #{$kendo-card-footer-border-width} ) 0 0;
+        border-style: solid;
+        outline: 0;
+        flex-shrink: 0;
+    }
+
+
+    // Body
+    .k-card-body {
+        padding-inline: var( --kendo-card-body-padding-x, #{$kendo-card-body-padding-x} );
+        padding-block: var( --kendo-card-body-padding-y, #{$kendo-card-body-padding-y} );
+        outline: 0;
+        flex: 1 1 auto;
+
+        p {
+            margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin} );
+        }
+
+        > .k-last,
+        > :last-child {
+            margin-block-end: 0;
+        }
+
+        > .k-card-actions {
+            padding: 0;
+        }
+    }
+
+
+    // Card avatar
+    .k-card-avatar,
+    .k-card .k-avatar {
+        margin-inline-end: var( --kendo-card-avatar-spacing, #{$kendo-card-avatar-spacing} );
+        width: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
+        height: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
+        flex-basis: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
+    }
+
+
+    // Card image
+    .k-card-image,
+    .k-card-media {
+        border: 0;
+        max-width: 100%;
+        flex-shrink: 0;
+        overflow: hidden;
+
+        > img {
+            border: 0;
+            max-width: 100%;
+        }
+
+        .k-card-horizontal & {
+            max-width: var( --kendo-card-img-max-width, #{$kendo-card-img-max-width} );
+            object-fit: cover;
+        }
+    }
+
+    // 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-vertical,
+    .k-card-horizontal > .k-card-separator {
+        border-left-width: 1px;
+    }
+
+    .k-card-separator.k-separator-horizontal,
+    .k-card-vertical > .k-card-separator {
+        border-top-width: 1px;
+    }
+
+    .k-card > .k-hr {
+        margin: 0;
+        flex: 0 0 auto;
+        border-color: inherit;
+    }
+
+
+    // Card actions
+    .k-card-actions {
+        padding-inline: var( --kendo-card-actions-padding-x, #{$kendo-card-actions-padding-x} );
+        padding-block: var( --kendo-card-actions-padding-y, #{$kendo-card-actions-padding-y} );
+        border-width: var( --kendo-card-actions-border-width, #{$kendo-card-actions-border-width} );
+        border-style: solid;
+        border-color: inherit;
+        overflow: hidden;
+        display: flex;
+        flex-shrink: 0;
+        flex-basis: auto;
+        gap: var( --kendo-card-actions-gap, #{$kendo-card-actions-gap} );
+    }
+
+
+    // Actions align
+    .k-card-actions-start       { justify-content: flex-start; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-end         { justify-content: flex-end; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-center      { justify-content: center; } // stylelint-disable-line block-opening-brace-space-before
+
+
+    // Actions orientation
+    .k-card-actions-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
+
+
+    // Stretched actions
+    .k-card-actions-stretched > * {
+        flex: 1 1 auto;
+    }
+
+
+    // Card action
+    .k-card-action {
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        display: inline-flex;
+    }
+
+
+    // 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-block-end: 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( var( --kendo-card-deck-scroll-button-radius, #{$kendo-card-deck-scroll-button-radius} ) );
+            flex: 0 0 auto;
+            position: absolute;
+            z-index: 1;
+
+            &:first-child {
+                left: var( --kendo-card-deck-scroll-button-offset, #{$kendo-card-deck-scroll-button-offset} );
+            }
+
+            &:last-child {
+                right: var( --kendo-card-deck-scroll-button-offset, #{$kendo-card-deck-scroll-button-offset} );
+            }
+        }
+
+        > .k-card-deck {
+            // hide scrollbar
+            margin-block-end: -$default-scrollbar-width;
+            padding-block-end: $default-scrollbar-width;
+            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: var( --kendo-card-border-width, #{$kendo-card-border-width} );
+        }
+
+
+        // Border-radius
+        .k-card.k-first {
+            @include border-left-radius( var(--kendo-card-border-radius, #{$kendo-card-border-radius}) );
+        }
+        .k-card.k-last {
+            @include border-right-radius( var(--kendo-card-border-radius, #{$kendo-card-border-radius}) );
+        }
+        .k-card.k-only {
+            @include border-radius( var(--kendo-card-border-radius, #{$kendo-card-border-radius}) );
+        }
+    }
+
+    .k-card-with-callout {
+        overflow: visible;
+    }
+
+    .k-card-callout {
+        margin: 0;
+        width: var( --kendo-card-callout-size, #{$kendo-card-callout-size} );
+        height: var( --kendo-card-callout-size, #{$kendo-card-callout-size} );
+        border-width: var( --kendo-card-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( var( --kendo-card-shadow, #{$kendo-card-shadow} ) );
+    }
+
+
+    // Flat card
+    .k-card-flat {
+        @include box-shadow( none );
+    }
+
+}

package/scss/card/_theme.scss

@@ -0,0 +1,116 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-card--theme() {
+
+    // Card
+    .k-card {
+        --INTERNAL--kendo-card-text: var( --kendo-card-text, #{$kendo-card-text} );
+        --INTERNAL--kendo-card-bg: var( --kendo-card-bg, #{$kendo-card-bg} );
+        --INTERNAL--kendo-card-border: var( --kendo-card-border, #{$kendo-card-border} );
+        --INTERNAL--kendo-card-shadow: var( --kendo-card-shadow, #{$kendo-card-shadow} );
+
+        color: var( --INTERNAL--kendo-card-text, initial );
+        background-color: var( --INTERNAL--kendo-card-bg, initial );
+        border-color: var( --INTERNAL--kendo-card-border, initial );
+
+        @include box-shadow( var( --INTERNAL--kendo-card-shadow, none ) );
+
+        .k-card-inner {
+            background-color: inherit;
+            border-color: inherit;
+        }
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-card-text: var( --kendo-card-focus-text, #{$kendo-card-focus-text} );
+            --INTERNAL--kendo-card-bg: var( --kendo-card-focus-bg, #{$kendo-card-focus-bg} );
+            --INTERNAL--kendo-card-border: var( --kendo-card-focus-border, #{$kendo-card-focus-border} );
+            --INTERNAL--kendo-card-shadow: var( --kendo-card-focus-shadow, #{$kendo-card-focus-shadow} );
+        }
+
+        &.k-selected {
+            --INTERNAL--kendo-card-shadow: var( --kendo-card-focus-shadow, #{$kendo-card-focus-shadow} );
+        }
+    }
+
+
+    // Card actions
+    .k-card-actions {
+        border-color: var( --kendo-card-border, #{$kendo-card-border} );
+    }
+
+
+    // Header
+    .k-card-header {
+        @include fill(
+            var( --kendo-card-header-text, #{$kendo-card-header-text} ),
+            var( --kendo-card-header-bg, #{$kendo-card-header-bg} ),
+            var( --kendo-card-header-border, #{$kendo-card-header-border} )
+        );
+    }
+
+
+    // Footer
+    .k-card-footer {
+        @include fill(
+            var( --kendo-card-footer-text, #{$kendo-card-footer-text} ),
+            var( --kendo-card-footer-bg, #{$kendo-card-footer-bg} ),
+            var( --kendo-card-footer-border, #{$kendo-card-footer-border} )
+        );
+    }
+
+
+    // Separator
+    .k-card-separator,
+    .k-card .k-separator {
+        border-color: var( --kendo-card-border, #{$kendo-card-border} );
+    }
+
+
+    // TODO: refactor
+    .k-card-subtitle {
+        color: var( --kendo-card-subtitle-text, #{$kendo-card-subtitle-text} );
+    }
+
+
+    // Card theme colors
+    @each $theme-color, $color-props in $kendo-card-theme-colors {
+
+        $_text-color: map-get( $color-props, text );
+        $_bg: map-get( $color-props, bg );
+        $_border-color: map-get( $color-props, border );
+
+        .k-card-#{$theme-color} {
+            --kendo-card-text: var( --kendo-card-#{$theme-color}-text, #{$_text-color} );
+            --kendo-card-bg: var( --kendo-card-#{$theme-color}-bg, #{$_bg} );
+            --kendo-card-border: var( --kendo-card-#{$theme-color}-border, #{$_border-color} );
+
+            .k-card-subtitle {
+                color: inherit;
+            }
+        }
+    }
+
+
+    .k-card-wrap {
+        &.k-focus,
+        &:focus,
+        &.k-selected {
+            > .k-card {
+                @include box-shadow( var( --kendo-card-shadow, #{$kendo-card-shadow} ) );
+            }
+        }
+    }
+
+
+    // Card callout
+    .k-card-callout {
+        @include fill(
+            $bg: inherit,
+            $border: inherit
+        );
+
+        @include box-shadow( inherit );
+    }
+}

package/scss/card/_variables.scss

@@ -0,0 +1,170 @@
+@use "sass:map";
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+
+/// Horizontal padding of the card.
+/// @group card
+$kendo-card-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the card.
+/// @group card
+$kendo-card-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Width of the border around the card.
+/// @group card
+$kendo-card-border-width: 0px !default;
+/// Border radius of the card.
+/// @group card
+$kendo-card-border-radius: $kendo-border-radius-md !default;
+$kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;
+/// Font family of the card.
+/// @group card
+$kendo-card-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the card.
+/// @group card
+$kendo-card-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Line height of the card.
+/// @group card
+$kendo-card-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Spacing between the cards in the card deck.
+/// @group card
+$kendo-card-deck-gap: map-get( $kendo-spacing, 4 ) !default;
+
+/// Background color of the card.
+/// @group card
+$kendo-card-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the card.
+/// @group card
+$kendo-card-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the card.
+/// @group card
+$kendo-card-border: var( --kendo-component-border, initial ) !default;
+/// Shadow of the card.
+/// @group card
+$kendo-card-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+
+/// Background color of the card when focused.
+/// @group card
+$kendo-card-focus-bg: $kendo-card-bg !default;
+/// Text color of the card when focused.
+/// @group card
+$kendo-card-focus-text: null !default;
+/// Border color of the card when focused.
+/// @group card
+$kendo-card-focus-border: var( --kendo-component-border, initial ) !default;
+/// Shadow of the card when focused.
+/// @group card
+$kendo-card-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+
+/// Text weight of the card header.
+/// @group card
+$kendo-card-header-font-weight: var( --kendo-font-weight, initial ) !default;
+/// Horizontal padding of the card header.
+/// @group card
+$kendo-card-header-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Verical padding of the card header.
+/// @group card
+$kendo-card-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Bottom border width of the card header.
+/// @group card
+$kendo-card-header-border-width: 0 !default;
+/// Background color of the card header.
+/// @group card
+$kendo-card-header-bg: inherit !default;
+/// Text color of the card header.
+/// @group card
+$kendo-card-header-text: get-theme-color-var( neutral-190 ) !default; // header-text
+/// Border color of the card header.
+/// @group card
+$kendo-card-header-border: inherit !default; // header-border
+
+/// Horizontal padding of the card body.
+/// @group card
+$kendo-card-body-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the card body.
+/// @group card
+$kendo-card-body-padding-y: map-get( $kendo-spacing, 3 ) !default;
+
+/// Horizontal padding of the card footer.
+/// @group card
+$kendo-card-footer-padding-x: $kendo-card-padding-x !default;
+/// Vertical padding of the card footer.
+/// @group card
+$kendo-card-footer-padding-y: $kendo-card-padding-y !default;
+/// Top border width of the card footer.
+/// @group card
+$kendo-card-footer-border-width: 0 !default;
+/// Background color of the card footer.
+/// @group card
+$kendo-card-footer-bg: inherit !default;
+/// Text color of the card footer.
+/// @group card
+$kendo-card-footer-text: inherit !default; // $header-text
+/// Border color of the card footer.
+/// @group card
+$kendo-card-footer-border: inherit !default; // $header-border
+
+/// Text weight of the card title.
+/// @group card
+$kendo-card-title-font-weight: $kendo-card-header-font-weight !default;
+/// Bottom margin of the card title.
+/// @group card
+$kendo-card-title-margin-bottom: map-get( $kendo-spacing, 3 ) !default;
+/// Bottom margin of the card subtitle.
+/// @group card
+$kendo-card-subtitle-margin-bottom: map-get( $kendo-spacing, 3 ) !default;
+/// Text color of the card subtitle.
+/// @group card
+$kendo-card-subtitle-text: $kendo-subtle-text !default;
+
+/// Maximum width of the card image.
+/// @group card
+$kendo-card-img-max-width: 100px !default;
+/// Size of the avatar in the card.
+/// @group card
+$kendo-card-avatar-size: 3rem !default;
+/// Spacing between the avatar and the text in the card.
+/// @group card
+$kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
+
+/// Horizontal padding of the card actions.
+/// @group card
+$kendo-card-actions-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the card actions.
+/// @group card
+$kendo-card-actions-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Top border of the card actions.
+/// @group card
+$kendo-card-actions-border-width: 0 !default;
+/// Spacing between the card actions.
+/// @group card
+$kendo-card-actions-gap: map-get( $kendo-spacing, 2 ) !default;
+
+/// Border radius of the scroll button in the card deck.
+/// @group card
+$kendo-card-deck-scroll-button-radius: 0 !default;
+$kendo-card-deck-scroll-button-offset: calc( -1 * #{$kendo-button-border-width} ) !default;
+
+/// Size of the card callout.
+/// @group card
+$kendo-card-callout-size: 20px !default;
+
+/// Theme variations for the card.
+$kendo-card-brand-colors: ( primary, error, warning, success, info );
+
+// Matrix with card theme colors in the order: bg, color, border
+$_tc-card-matrix: (
+    (normal: (20, 160, 20)),
+);
+
+/// Theme colors map for the card variations.
+$kendo-card-theme-colors: ();
+
+@each $ui-states in $_tc-card-matrix {
+    @each $brand-color in $kendo-card-brand-colors {
+        $kendo-card-theme-colors: map.deep-merge(
+            $kendo-card-theme-colors,
+            generate-theme-variation( $brand-color, $brand-color, $ui-states )
+        );
+    };
+}

package/scss/card/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "card",
+    dependencies: (
+        "action-buttons",
+        "button",
+        "icon",
+        "typography",
+        "avatar"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "card" ) {
+        @include kendo-card--layout();
+        @include kendo-card--theme();
+    }
+}