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

package/scss/components/tabstrip/_variables.scss

@@ -0,0 +1,82 @@
+// TabStrip
+
+
+$kendo-tabstrip-wrapper-padding-x: null !default;
+$kendo-tabstrip-wrapper-padding-y: null !default;
+$kendo-tabstrip-wrapper-border-width: null !default;
+
+$kendo-tabstrip-font-family: null !default;
+$kendo-tabstrip-font-size: null !default;
+$kendo-tabstrip-line-height: null !default;
+$kendo-tabstrip-border-width: null !default;
+
+$kendo-tabstrip-sm-font-size: null !default;
+$kendo-tabstrip-sm-line-height: null !default;
+$kendo-tabstrip-md-font-size: null !default;
+$kendo-tabstrip-md-line-height: null !default;
+$kendo-tabstrip-lg-font-size: null !default;
+$kendo-tabstrip-lg-line-height: null !default;
+
+$kendo-tabstrip-wrapper-bg: null !default;
+$kendo-tabstrip-wrapper-text: null !default;
+$kendo-tabstrip-wrapper-border: null !default;
+
+$kendo-tabstrip-bg: null !default;
+$kendo-tabstrip-text: null !default;
+$kendo-tabstrip-border: null !default;
+
+$kendo-tabstrip-item-padding-x: null !default;
+$kendo-tabstrip-item-padding-y: null !default;
+$kendo-tabstrip-item-border-width: null !default;
+$kendo-tabstrip-item-border-radius: null !default;
+$kendo-tabstrip-item-gap: null !default;
+$kendo-tabstrip-sm-item-padding-x: null !default;
+$kendo-tabstrip-sm-item-padding-y: null !default;
+$kendo-tabstrip-md-item-padding-x: null !default;
+$kendo-tabstrip-md-item-padding-y: null !default;
+$kendo-tabstrip-lg-item-padding-x: null !default;
+$kendo-tabstrip-lg-item-padding-y: null !default;
+
+$kendo-tabstrip-item-bg: null !default;
+$kendo-tabstrip-item-text: null !default;
+$kendo-tabstrip-item-border: null !default;
+$kendo-tabstrip-item-gradient: null !default;
+
+$kendo-tabstrip-item-hover-bg: null !default;
+$kendo-tabstrip-item-hover-text: null !default;
+$kendo-tabstrip-item-hover-border: null !default;
+$kendo-tabstrip-item-hover-gradient: null !default;
+
+$kendo-tabstrip-item-selected-bg: null !default;
+$kendo-tabstrip-item-selected-text: null !default;
+$kendo-tabstrip-item-selected-border: null !default;
+$kendo-tabstrip-item-selected-gradient: null !default;
+$kendo-tabstrip-item-selected-font-weight: null !default;
+
+
+$kendo-tabstrip-item-focus-shadow: null !default;
+
+$kendo-tabstrip-item-dragging-shadow: null !default;
+
+$kendo-tabstrip-item-disabled-bg: null !default;
+$kendo-tabstrip-item-disabled-text: null !default;
+$kendo-tabstrip-item-disabled-border: null !default;
+$kendo-tabstrip-item-disabled-gradient: null !default;
+$kendo-tabstrip-item-disabled-opacity: null !default;
+$kendo-tabstrip-item-disabled-filter: null !default;
+
+$kendo-tabstrip-indicator-size: null !default;
+$kendo-tabstrip-indicator-color: null !default;
+
+$kendo-tabstrip-content-padding-x: null !default;
+$kendo-tabstrip-content-padding-y: null !default;
+$kendo-tabstrip-content-border-width: null !default;
+
+$kendo-tabstrip-content-bg: null !default;
+$kendo-tabstrip-content-text: null !default;
+$kendo-tabstrip-content-border: null !default;
+$kendo-tabstrip-content-focus-border: null !default;
+
+$kendo-tabstrip-scroll-overlay: null !default;
+
+$kendo-tabstrip-sizes: null !default;

package/scss/components/taskboard/_index.scss

@@ -0,0 +1,32 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../searchbox/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../card/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-task-board--styles() {
+    @include import-once( "task-board" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-form--styles();
+        @include kendo-input--styles();
+        @include kendo-textbox--styles();
+        @include kendo-searchbox--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-card--styles();
+        @include kendo-task-board--layout();
+        @include kendo-task-board--theme();
+        @include kendo-utils--typography--text-overflow();
+    }
+}

package/scss/components/taskboard/_layout.scss

@@ -0,0 +1,222 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-task-board--layout-base() {
+
+    // TaskBoard
+    .k-taskboard {
+        padding-block: $kendo-taskboard-padding-y;
+        padding-inline: $kendo-taskboard-padding-x;
+        box-sizing: border-box;
+        font-size: $kendo-taskboard-font-size;
+        font-family: $kendo-taskboard-font-family;
+        line-height: $kendo-taskboard-line-height;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Toolbar
+    .k-taskboard-toolbar {
+        padding-block: $kendo-taskboard-toolbar-padding-y;
+        padding-inline: $kendo-taskboard-toolbar-padding-x;
+        border-width: 0;
+        box-shadow: none;
+        background: none;
+    }
+
+    // Content
+    .k-taskboard-content {
+        padding: 0 $kendo-taskboard-toolbar-padding-x $kendo-taskboard-content-padding-y;
+        display: flex;
+        position: relative;
+        flex: 1 1 auto;
+        overflow-x: auto;
+    }
+
+    // Columns
+    .k-taskboard-columns-container {
+        outline: none;
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+        gap: $kendo-taskboard-columns-container-gap;
+        overflow-x: visible;
+    }
+
+    .k-taskboard-column {
+        width: $kendo-taskboard-column-width;
+        border-width: $kendo-taskboard-column-border-width;
+        border-radius: $kendo-taskboard-column-border-radius;
+        border-style: solid;
+        outline: none;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        overflow: hidden;
+    }
+
+    .k-taskboard-column-header {
+        padding-block: $kendo-taskboard-column-header-padding-y;
+        padding-inline: $kendo-taskboard-column-header-padding-x;
+        font-weight: $kendo-taskboard-column-header-font-weight;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: $kendo-taskboard-column-header-gap;
+    }
+
+    .k-taskboard-column-header-actions {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-self: flex-start;
+        gap: $kendo-taskboard-column-header-actions-gap;
+    }
+
+    .k-taskboard-column-cards-container {
+        margin-bottom: $kendo-taskboard-column-container-spacing-y;
+        padding-block: $kendo-taskboard-column-container-padding-y;
+        padding-inline: $kendo-taskboard-column-container-padding-x;
+        outline: none;
+        overflow: auto;
+        flex: 1 1 auto;
+    }
+
+    .k-taskboard-column-cards {
+        padding-block: $kendo-taskboard-column-cards-padding-y;
+        padding-inline: $kendo-taskboard-column-cards-padding-x;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: $kendo-taskboard-column-cards-gap 0;
+    }
+
+    // Edit/New Columns
+    .k-taskboard-column-new {
+        // TODO: we need better way
+        // max-height: $kendo-taskboard-column-new-calc-height;
+    }
+
+    .k-taskboard-column-new,
+    .k-taskboard-column-edit {
+        .k-taskboard-column-header {
+            font-weight: inherit;
+        }
+
+        .k-taskboard-column-header-text {
+            flex: 1 1 100%;
+        }
+    }
+
+    // Preview/Edit Pane
+    .k-taskboard-pane {
+        padding-block: $kendo-taskboard-pane-padding-y;
+        padding-inline: $kendo-taskboard-pane-padding-x;
+        width: $kendo-taskboard-pane-width;
+        border-width: $kendo-taskboard-pane-border-width;
+        border-style: solid;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        z-index: 2;
+    }
+
+    .k-taskboard-pane-header {
+        padding-block: $kendo-taskboard-pane-header-padding-y;
+        padding-inline: $kendo-taskboard-pane-header-padding-x;
+        font-weight: $kendo-taskboard-pane-header-font-weight;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .k-taskboard-pane-header-text {
+        word-break: normal;
+        overflow-wrap: anywhere;
+    }
+
+    .k-taskboard-pane-header-actions {
+        flex-shrink: 0;
+        align-self: flex-start;
+    }
+
+    .k-taskboard-pane-content {
+        padding-block: $kendo-taskboard-pane-content-padding-y;
+        padding-inline: $kendo-taskboard-pane-content-padding-x;
+        overflow: auto;
+        flex: 1 1 auto;
+    }
+
+    .k-taskboard-pane-actions {
+        padding-block: $kendo-taskboard-pane-actions-padding-y;
+        padding-inline: $kendo-taskboard-pane-actions-padding-x;
+    }
+
+    .k-taskboard-pane-start {
+        right: auto;
+        left: 0;
+    }
+
+    // Cards
+    .k-taskboard-card {
+        @include border-radius( $kendo-taskboard-card-border-radius );
+        border-width: $kendo-taskboard-card-border-width;
+
+        &.k-taskboard-card-category {
+            border-inline-start-width: $kendo-taskboard-card-category-border-width;
+        }
+
+        .k-card-header
+        .k-card-body,
+        .k-card-footer {
+            padding-block: $kendo-taskboard-card-padding-y;
+            padding-inline: $kendo-taskboard-card-padding-x;
+        }
+
+        .k-card-header {
+            align-items: center;
+        }
+
+        .k-card-title {
+            font-size: inherit;
+            font-weight: inherit;
+            word-break: normal;
+            overflow-wrap: anywhere;
+
+            &:focus,
+            &.k-focus,
+            &:hover,
+            &.k-hover {
+                text-decoration: underline;
+            }
+        }
+
+        .k-card-header-actions {
+            align-self: flex-start;
+        }
+    }
+
+    // Card Drag Placeholder
+    .k-taskboard-drag-placeholder {
+        @include border-radius( $kendo-taskboard-drag-placeholder-border-radius );
+        border-width: $kendo-taskboard-drag-placeholder-border-width;
+        border-style: solid;
+        position: relative;
+    }
+
+}
+
+
+@mixin kendo-task-board--layout() {
+    @include kendo-task-board--layout-base();
+}

package/scss/components/taskboard/_theme.scss

@@ -0,0 +1,117 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-task-board--theme-base() {
+
+    // TaskBoard
+    .k-taskboard {
+        @include fill(
+            $kendo-taskboard-text,
+            $kendo-taskboard-bg,
+            $kendo-taskboard-border
+        );
+    }
+
+    // Toolbar
+    .k-taskboard-toolbar {
+        @include fill(
+            $kendo-taskboard-toolbar-text,
+            $kendo-taskboard-toolbar-bg,
+            $kendo-taskboard-toolbar-border,
+            $kendo-taskboard-toolbar-gradient
+        );
+    }
+
+    // Columns
+    .k-taskboard-column {
+        @include fill(
+            $kendo-taskboard-column-text,
+            $kendo-taskboard-column-bg,
+            $kendo-taskboard-column-border
+        );
+    }
+    .k-taskboard-column:focus,
+    .k-taskboard-column.k-focus {
+        @include fill(
+            $kendo-taskboard-column-focus-text,
+            $kendo-taskboard-column-focus-bg,
+            $kendo-taskboard-column-focus-border
+        );
+    }
+
+    .k-taskboard-column-header {
+        @include fill( $color: $kendo-taskboard-column-header-text );
+    }
+
+    // Preview/Edit Pane
+    .k-taskboard-pane {
+        @include fill (
+            $kendo-taskboard-pane-text,
+            $kendo-taskboard-pane-bg,
+            $kendo-taskboard-pane-border
+        );
+    }
+
+    .k-taskboard-pane-header {
+        @include fill( $color: $kendo-taskboard-pane-header-text );
+    }
+
+    // Cards
+    .k-taskboard-card {
+        @include fill(
+            $kendo-taskboard-card-text,
+            $kendo-taskboard-card-bg,
+            $kendo-taskboard-card-border
+        );
+        @include box-shadow( $kendo-taskboard-card-shadow );
+
+        .k-card-title {
+            @include fill( $color: $kendo-taskboard-card-header-text );
+
+            &:focus,
+            &.k-focus {
+                @include fill( $color: $kendo-taskboard-card-header-focus-text );
+            }
+
+            &:hover,
+            &.k-hover {
+                @include fill( $color: $kendo-taskboard-card-header-hover-text );
+            }
+        }
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-taskboard-card-focus-shadow );
+            @include fill( $border: $kendo-taskboard-card-focus-border );
+        }
+
+        &:hover,
+        &.k-hover {
+            @include fill( $border: $kendo-taskboard-card-hover-border );
+        }
+
+        &.k-selected {
+            @include fill( $border: $kendo-taskboard-card-selected-border );
+            @include box-shadow( $kendo-taskboard-card-selected-shadow );
+        }
+
+        &.k-disabled {
+            @include disabled( $kendo-disabled-styling... );
+        }
+    }
+
+    // Card Drag Placeholder
+    .k-taskboard-drag-placeholder {
+        @include fill(
+            $bg: $kendo-taskboard-drag-placeholder-bg,
+            $border: $kendo-taskboard-drag-placeholder-border
+        );
+    }
+
+}
+
+
+@mixin kendo-task-board--theme() {
+    @include kendo-task-board--theme-base();
+}

package/scss/components/taskboard/_variables.scss

@@ -0,0 +1,95 @@
+// TaskBoard
+
+$kendo-taskboard-spacer: null !default;
+$kendo-taskboard-padding-y: null !default;
+$kendo-taskboard-padding-x: null !default;
+$kendo-taskboard-font-family: null !default;
+$kendo-taskboard-font-size: null !default;
+$kendo-taskboard-line-height: null !default;
+$kendo-taskboard-bg: null !default;
+$kendo-taskboard-text: null !default;
+$kendo-taskboard-border: null !default;
+
+$kendo-taskboard-toolbar-padding-y: null !default;
+$kendo-taskboard-toolbar-padding-x: null !default;
+$kendo-taskboard-toolbar-bg: null !default;
+$kendo-taskboard-toolbar-text: null !default;
+$kendo-taskboard-toolbar-border: null !default;
+$kendo-taskboard-toolbar-gradient: null !default;
+
+$kendo-taskboard-content-padding-y: null !default;
+$kendo-taskboard-content-padding-x: null !default;
+
+$kendo-taskboard-column-container-spacing-y: null !default;
+$kendo-taskboard-column-container-padding-y: null !default;
+$kendo-taskboard-column-container-padding-x: null !default;
+$kendo-taskboard-columns-container-gap: null !default;
+
+$kendo-taskboard-column-width: null !default;
+$kendo-taskboard-column-border-width: null !default;
+$kendo-taskboard-column-border-radius: null !default;
+$kendo-taskboard-column-bg: null !default;
+$kendo-taskboard-column-text: null !default;
+$kendo-taskboard-column-border: null !default;
+
+$kendo-taskboard-column-focus-bg: null !default;
+$kendo-taskboard-column-focus-text: null !default;
+$kendo-taskboard-column-focus-border: null !default;
+
+$kendo-taskboard-column-header-padding-y: null !default;
+$kendo-taskboard-column-header-padding-x: null !default;
+$kendo-taskboard-column-header-gap: null !default;
+$kendo-taskboard-column-header-actions-gap: null !default;
+$kendo-taskboard-column-header-font-weight: null !default;
+$kendo-taskboard-column-header-text: null !default;
+
+$kendo-taskboard-column-cards-padding-y: null !default;
+$kendo-taskboard-column-cards-padding-x: null !default;
+$kendo-taskboard-column-cards-gap: null !default;
+
+$kendo-taskboard-pane-width: null !default;
+$kendo-taskboard-pane-padding-y: null !default;
+$kendo-taskboard-pane-padding-x: null !default;
+$kendo-taskboard-pane-border-width: null !default;
+$kendo-taskboard-pane-bg: null !default;
+$kendo-taskboard-pane-text: null !default;
+$kendo-taskboard-pane-border: null !default;
+
+$kendo-taskboard-pane-header-padding-y: null !default;
+$kendo-taskboard-pane-header-padding-x: null !default;
+$kendo-taskboard-pane-header-font-weight: null !default;
+$kendo-taskboard-pane-header-text: null !default;
+
+$kendo-taskboard-pane-content-padding-y: null !default;
+$kendo-taskboard-pane-content-padding-x: null !default;
+
+$kendo-taskboard-pane-actions-padding-y: null !default;
+$kendo-taskboard-pane-actions-padding-x: null !default;
+
+$kendo-taskboard-card-padding-y: null !default;
+$kendo-taskboard-card-padding-x: null !default;
+$kendo-taskboard-card-border-width: null !default;
+$kendo-taskboard-card-border-radius: null !default;
+$kendo-taskboard-card-shadow: null !default;
+$kendo-taskboard-card-bg: null !default;
+$kendo-taskboard-card-text: null !default;
+$kendo-taskboard-card-border: null !default;
+
+$kendo-taskboard-card-category-border-width: null !default;
+
+$kendo-taskboard-card-hover-border: null !default;
+
+$kendo-taskboard-card-focus-border: null !default;
+$kendo-taskboard-card-focus-shadow: null !default;
+
+$kendo-taskboard-card-selected-border: null !default;
+$kendo-taskboard-card-selected-shadow: null !default;
+
+$kendo-taskboard-card-header-text: null !default;
+$kendo-taskboard-card-header-hover-text: null !default;
+$kendo-taskboard-card-header-focus-text: null !default;
+
+$kendo-taskboard-drag-placeholder-border-width: null !default;
+$kendo-taskboard-drag-placeholder-border-radius: null !default;
+$kendo-taskboard-drag-placeholder-bg: null !default;
+$kendo-taskboard-drag-placeholder-border: null !default;

package/scss/components/textarea/_index.scss

@@ -0,0 +1,27 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-textarea--styles() {
+    @include import-once( "textarea" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-textarea--layout();
+        @include kendo-textarea--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--flex-direction();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--flex-wrap();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--interactivity--resize();
+    }
+}

package/scss/components/textarea/_layout.scss

@@ -0,0 +1,13 @@
+@mixin kendo-textarea--layout-base() {
+
+    // Textarea
+    .k-textarea:has(.k-input-inner[style*="width"]) {
+        width: max-content;
+    }
+
+}
+
+
+@mixin kendo-textarea--layout() {
+    @include kendo-textarea--layout-base();
+}

package/scss/components/textarea/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-textarea--theme-base() {
+
+    // Textarea
+    .k-textarea {}
+
+}
+
+
+@mixin kendo-textarea--theme() {
+    @include kendo-textarea--theme-base();
+}

package/scss/components/textarea/_variables.scss

@@ -0,0 +1 @@
+// Textarea

package/scss/components/textbox/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-textbox--styles() {
+    @include import-once( "textbox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-textbox--layout();
+        @include kendo-textbox--theme();
+    }
+}

package/scss/components/textbox/_layout.scss

@@ -0,0 +1,11 @@
+@mixin kendo-textbox--layout-base() {
+
+    // Textbox
+    .k-textbox {}
+
+}
+
+
+@mixin kendo-textbox--layout() {
+    @include kendo-textbox--layout-base();
+}

package/scss/components/textbox/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-textbox--theme-base() {
+
+    // Textbox
+    .k-textbox {}
+
+}
+
+
+@mixin kendo-textbox--theme() {
+    @include kendo-textbox--theme-base();
+}

package/scss/components/textbox/_variables.scss

@@ -0,0 +1 @@
+// Textbox

package/scss/components/tilelayout/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../card/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-tile-layout--styles() {
+    @include import-once( "tile-layout" ) {
+        @include core-styles();
+        @include kendo-card--styles();
+        @include kendo-icon--styles();
+        @include kendo-tile-layout--layout();
+        @include kendo-tile-layout--theme();
+        @include kendo-utils--interactivity--resize();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--flex-grid--grid-auto-flow();
+    }
+}