@progress/kendo-theme-classic 4.41.3-dev.0 → 5.0.0-next.3

package/modules/@progress/kendo-theme-default/scss/card/_layout.scss

@@ -1,458 +0,0 @@
-@include exports("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( $card-border-radius );
-        border-width: $card-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $card-font-family;
-        font-size: $card-font-size;
-        line-height: $card-line-height;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-    }
-    .k-card > .k-card-inner {
-        @include border-radius( $card-inner-border-radius );
-        display: flex;
-        flex-direction: inherit;
-        overflow: hidden;
-    }
-
-
-    // Card orientation
-    .k-card-horizontal  { flex-flow: row nowrap; }
-    .k-card-vertical    { flex-flow: column nowrap; }
-
-
-    // Header
-    .k-card-header {
-        padding: $card-header-padding-y $card-header-padding-x;
-        border-width: 0 0 $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: $card-title-margin-bottom;
-        }
-    }
-
-
-    // Footer
-    .k-card-footer {
-        padding: $card-footer-padding-y $card-footer-padding-x;
-        border-width: $card-footer-border-width 0 0;
-        border-style: solid;
-        outline: 0;
-        flex-shrink: 0;
-    }
-
-
-    // Body
-    .k-card-body {
-        padding: $card-body-padding-y $card-body-padding-x;
-        outline: 0;
-        flex: 1 1 auto;
-
-        p {
-            margin: $paragraph-margin;
-        }
-
-        > .k-last,
-        > :last-child {
-            margin-bottom: 0;
-        }
-
-        > .k-card-actions {
-            padding: 0;
-        }
-    }
-
-
-    // Card avatar
-    .k-card-avatar,
-    .k-card .k-avatar {
-        margin-right: $card-avatar-spacing;
-        width: $card-avatar-size;
-        height: $card-avatar-size;
-        flex-basis: $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: $card-img-max-width;
-            object-fit: cover;
-        }
-    }
-
-
-    // Card title
-    .k-card-title {
-        margin: 0 0 $card-title-margin-bottom;
-        @include typography(
-            $card-title-font-size,
-            $card-title-font-family,
-            $card-title-line-height,
-            $card-title-font-weight,
-            $card-title-letter-spacing
-        );
-    }
-
-
-    // Card subtitle
-    .k-card-subtitle {
-        margin: 0 0 $card-subtitle-margin-bottom;
-        @include typography(
-            $card-subtitle-font-size,
-            $card-subtitle-font-family,
-            $card-subtitle-line-height,
-            $card-subtitle-font-weight,
-            $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-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: $card-actions-padding-y $card-actions-padding-x;
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        overflow: hidden;
-        display: flex;
-        flex-shrink: 0;
-        flex-basis: auto;
-        gap: $card-actions-gap;
-
-        > .k-button {
-            padding-left: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
-            padding-right: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
-            max-width: 100%;
-            white-space: normal;
-        }
-    }
-
-
-    // Actions align
-    .k-card-actions-start       { justify-content: flex-start; }
-    .k-card-actions-end         { justify-content: flex-end; }
-    .k-card-actions-center      { justify-content: center; }
-
-
-    // Actions orientation
-    .k-card-actions-horizontal  { flex-flow: row nowrap; }
-    .k-card-actions-vertical    { flex-flow: column nowrap; }
-
-
-    // Streched actions
-    .k-card-actions-stretched {
-        padding: 0;
-        gap: 0;
-
-        > .k-button,
-        > .k-card-action {
-            flex: 1 1 auto;
-        }
-
-        // TODO: refactor once we have button size
-        .k-button {
-            @include border-radius( 0 );
-            padding-top: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
-            padding-bottom: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
-        }
-
-        .k-card & {
-            border-top-width: $card-actions-border-width;
-        }
-        .k-card-horizontal > & {
-            border-top-width: 0;
-            border-inline-start-width: $card-actions-border-width;
-        }
-        .k-card-vertical > & {
-            border-top-width: $card-actions-border-width;
-        }
-
-        &.k-card-actions-horizontal > .k-card-action + .k-card-action {
-            border-inline-start-width: $card-actions-border-width;
-        }
-        &.k-card-actions-vertical > .k-card-action + .k-card-action {
-            border-top-width: $card-actions-border-width;
-        }
-    }
-
-
-    // Card action
-    .k-card-action {
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: inline-flex;
-
-        > .k-button {
-            flex: 1 1 auto;
-        }
-    }
-
-
-    // List
-    .k-card-list {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-        gap: $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: $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( $card-deck-scroll-button-radius );
-            flex: 0 0 auto;
-            position: absolute;
-            z-index: 1;
-
-            &:first-child {
-                left: $card-deck-scroll-button-offset;
-            }
-
-            &:last-child {
-                right: $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-direction: row;
-        flex-wrap: 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: $card-border-width;
-        }
-
-
-        // Border-radius
-        .k-card.k-first {
-            @include border-left-radius( $card-border-radius );
-        }
-        .k-card.k-last {
-            @include border-right-radius( $card-border-radius );
-        }
-        .k-card.k-only {
-            @include border-radius( $card-border-radius );
-        }
-    }
-
-
-}
-
-
-
-
-@include exports( "card/layout/callout" ) {
-
-    .k-card-with-callout {
-        overflow: visible;
-    }
-
-    .k-card-callout {
-        margin: 0;
-        width: $card-callout-width;
-        height: $card-callout-height;
-        border-width: $card-border-width $card-border-width 0 0;
-        border-style: solid;
-        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(135deg) scaleX(-1);
-    }
-    .k-card-callout.k-callout-s {
-        bottom: 0;
-        left: 50%;
-        transform: translate(-50%, 50%) rotate(135deg);
-    }
-    .k-card-callout.k-callout-w {
-        top: 50%;
-        left: 0;
-        transform: translate(-50%, -50%) rotate(-135deg);
-    }
-
-}
-
-
-
-
-@include exports( "card/layout/fill" ) {
-
-
-    // Solid card
-    .k-card-solid {
-        @include box-shadow( $card-shadow );
-    }
-
-
-    // Flat card
-    .k-card-flat {
-        @include box-shadow( none );
-    }
-
-}
-
-
-
-
-@include exports("card/layout/rtl") {
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        .k-card-actions-stretched {
-            .k-card-action + .k-card-action {
-                border-right-width: $card-actions-border-width;
-                border-left-width: 0;
-            }
-        }
-
-        .k-card-horizontal {
-            > .k-card-actions-stretched,
-            .k-card-actions-vertical {
-                border-right-width: $card-actions-border-width;
-                border-left-width: 0;
-            }
-        }
-
-    }
-
-}
-
-
-
-
-@include exports("card/layout/ie11") {
-
-    .k-ie11 {
-
-        // IE11 needs units to be added to flex-basis when in shorthand
-        // Thus, `flex: x x 0` will be ignored and we need `flex: x x auto`
-        // See https://github.com/philipwalton/flexbugs#flexbug-4
-        .k-card-body {
-            flex: 1 1 auto;
-        }
-
-    }
-}

package/modules/@progress/kendo-theme-default/scss/card/_theme.scss

@@ -1,104 +0,0 @@
-@include exports("card/theme") {
-
-    // Card
-    .k-card {
-        @include fill(
-            $card-text,
-            $card-bg,
-            $card-border
-        );
-        @include box-shadow( $card-shadow );
-
-        &:focus,
-        &.k-state-focus {
-            @include fill(
-                $card-focus-text,
-                $card-focus-bg,
-                $card-focus-border
-            );
-            @include box-shadow( $card-focus-shadow );
-        }
-    }
-
-
-    // Card actions
-    .k-card-actions {
-        border-color: $card-border;
-    }
-
-
-    // Header
-    .k-card-header {
-        @include fill( $card-header-text, $card-header-bg, $card-header-border );
-    }
-
-
-    // Footer
-    .k-card-footer {
-        @include fill( $card-footer-text, $card-footer-bg, $card-footer-border );
-    }
-
-
-    // Separator
-    .k-card-separator {
-        border-color: $card-border;
-    }
-
-
-    // TODO: refactor
-    .k-card-subtitle {
-        color: $card-subtitle-text;
-    }
-
-
-    // Card theme colors
-    @each $name, $color in $theme-colors {
-        .k-card-#{$name} {
-            background-color: tint($color, 10);
-            color: shade($color, 6);
-            border-color: tint($color, 9);
-
-            .k-card-subtitle {
-                color: inherit;
-            }
-        }
-    }
-
-
-    .k-card-wrap {
-        &.k-state-focused,
-        &.k-state-selected {
-            > .k-card {
-                @include box-shadow( $card-focus-shadow );
-            }
-        }
-    }
-
-
-    // Card callout
-    .k-card-callout {
-        @include fill(
-            $bg: $card-bg,
-            $border: $card-border
-        );
-    }
-
-    .k-card-callout.k-callout-n { @include box-shadow( $card-callout-box-shadow-n ); }
-    .k-card-callout.k-callout-e { @include box-shadow( $card-callout-box-shadow-e ); }
-    .k-card-callout.k-callout-s { @include box-shadow( $card-callout-box-shadow-s ); }
-    .k-card-callout.k-callout-w { @include box-shadow( $card-callout-box-shadow-w ); }
-
-    .k-card:focus .k-card-callout,
-    .k-card.k-state-focus .k-card-callout {
-        @include fill(
-            $bg: $card-focus-bg,
-            $border: $card-focus-border
-        );
-
-        &.k-callout-n { @include box-shadow( $card-focus-callout-box-shadow-n ); }
-        &.k-callout-e { @include box-shadow( $card-focus-callout-box-shadow-e ); }
-        &.k-callout-s { @include box-shadow( $card-focus-callout-box-shadow-s ); }
-        &.k-callout-w { @include box-shadow( $card-focus-callout-box-shadow-w ); }
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/card/_variables.scss

@@ -1,78 +0,0 @@
-// Card
-$card-padding-x: map-get( $spacing, lg ) !default;
-$card-padding-y: map-get( $spacing, md ) !default;
-$card-border-width: 1px !default;
-$card-border-radius: $border-radius-lg !default;
-$card-inner-border-radius: calc( #{$card-border-radius} - #{$card-border-width} ) !default;
-$card-font-family: $font-family !default;
-$card-font-size: $font-size !default;
-$card-line-height: $line-height !default;
-
-$card-deck-gap: map-get( $spacing, lg ) !default;
-
-$card-bg: $component-bg !default;
-$card-text: $component-text !default;
-$card-border: $component-border !default;
-$card-shadow: null !default;
-
-$card-focus-bg: null !default;
-$card-focus-text: null !default;
-$card-focus-border: rgba( black, .15 ) !default;
-$card-focus-shadow: 0 3px 4px 0 rgba( black, .06 ) !default;
-
-$card-header-padding-x: $card-padding-x !default;
-$card-header-padding-y: $card-padding-y !default;
-$card-header-border-width: 1px !default;
-$card-header-bg: null !default;
-$card-header-text: $header-text !default;
-$card-header-border: $header-border !default;
-
-$card-body-padding-x: map-get( $spacing, lg ) !default;
-$card-body-padding-y: map-get( $spacing, lg ) !default;
-
-$card-footer-padding-x: $card-padding-x !default;
-$card-footer-padding-y: $card-padding-y !default;
-$card-footer-border-width: 1px !default;
-$card-footer-bg: null !default;
-$card-footer-text: $header-text !default;
-$card-footer-border: $header-border !default;
-
-$card-title-margin-bottom: map-get( $spacing, sm ) !default;
-$card-title-font-size: $font-size-md !default;
-$card-title-font-family: inherit !default;
-$card-title-line-height: normal !default;
-$card-title-font-weight: $font-weight-normal !default;
-$card-title-letter-spacing: null !default;
-
-$card-subtitle-margin-bottom: map-get( $spacing, sm ) !default;
-$card-subtitle-font-size: $font-size-sm !default;
-$card-subtitle-font-family: inherit !default;
-$card-subtitle-line-height: normal !default;
-$card-subtitle-font-weight: $font-weight-normal !default;
-$card-subtitle-letter-spacing: null !default;
-$card-subtitle-text: $subtle-text !default;
-
-$card-img-max-width: 100px !default;
-$card-avatar-size: 45px !default;
-$card-avatar-spacing:  $card-header-padding-x !default;
-
-$card-actions-padding-x: map-get( $spacing, 2 ) !default;
-$card-actions-padding-y: map-get( $spacing, 2 ) !default;
-$card-actions-border-width: 1px !default;
-$card-actions-gap: map-get( $spacing, 2 ) !default;
-
-$card-deck-scroll-button-radius: 0px !default;
-$card-deck-scroll-button-offset: -$button-border-width !default;
-
-$card-callout-width: 20px !default;
-$card-callout-height: 20px !default;
-
-$card-callout-box-shadow-n: null !default;
-$card-callout-box-shadow-e: null !default;
-$card-callout-box-shadow-s: null !default;
-$card-callout-box-shadow-w: null !default;
-
-$card-focus-callout-box-shadow-n: 1px -1px 4px 0 rgba( black, .06) !default;
-$card-focus-callout-box-shadow-e: 2px -1px 4px 0 rgba( black, .06) !default;
-$card-focus-callout-box-shadow-s: 2px -2px 4px 0 rgba( black, .06) !default;
-$card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;

package/modules/@progress/kendo-theme-default/scss/chat/_index.scss

@@ -1,15 +0,0 @@
-@import "../core/_index.scss";
-
-
-// Dependencies
-@import "../common/_index.scss";
-@import "../input/_index.scss";
-@import "../card/_index.scss";
-@import "../icons/_index.scss";
-@import "../toolbar/_index.scss";
-
-
-// Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";