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

package/scss/components/drawer/_layout.scss

@@ -0,0 +1,207 @@
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-drawer--layout-base() {
+
+    // Container
+    .k-drawer-container {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+    }
+
+    kendo-drawer.k-drawer,
+    kendo-drawer .k-drawer-wrapper {
+        transition: none;
+    }
+
+
+    // Drawer
+    .k-drawer {
+        height: 100%;
+        max-width: 100%;
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-drawer-font-family;
+        font-size: $kendo-drawer-font-size;
+        line-height: $kendo-drawer-line-height;
+        display: flex;
+        flex-direction: column;
+        flex: 0 0 auto;
+        transition: all 300ms ease-in-out;
+        overflow: hidden;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-drawer-mini &.k-drawer-start,
+        .k-drawer-expanded &.k-drawer-start {
+            border-inline-end-width: $kendo-drawer-border-width;
+        }
+
+        .k-drawer-mini &.k-drawer-end,
+        .k-drawer-expanded &.k-drawer-end {
+            border-inline-start-width: $kendo-drawer-border-width;
+        }
+
+
+        // Position
+        &.k-drawer-start {
+            top: 0;
+            inset-inline-start: 0;
+        }
+        &.k-drawer-end {
+            top: 0;
+            inset-inline-end: 0;
+        }
+    }
+
+
+    // Content
+    .k-drawer-content {
+        flex: 1 1 auto;
+        overflow: auto;
+        padding-block: $kendo-drawer-content-padding-y;
+        padding-inline: $kendo-drawer-content-padding-x;
+    }
+
+
+    // Overlay
+    .k-drawer-overlay {
+        .k-drawer {
+            max-width: 80vw; // limit width
+            position: fixed;
+            z-index: 10002;
+            border: 0;
+        }
+
+        > .k-overlay {
+            display: none;
+        }
+        &.k-drawer-expanded > .k-overlay {
+            display: block;
+        }
+    }
+
+
+    // Push drawer
+    .k-drawer-push {
+        display: flex;
+        flex-direction: row;
+
+        .k-drawer {
+            height: auto;
+            position: relative;
+            align-self: stretch;
+        }
+
+        &:has(.k-drawer.k-drawer-end) {
+            flex-direction: row-reverse;
+        }
+    }
+
+
+    // Drawer items
+    .k-drawer-wrapper {
+        overflow-x: hidden;
+        overflow-y: auto;
+        scrollbar-width: thin; // Scrollbar styles for Mozilla
+        transition: all 300ms ease-in-out;
+
+        // Scrollbar styles for Chrome, Safari and Opera
+        &::-webkit-scrollbar {
+            width: $kendo-drawer-scrollbar-width;
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: $kendo-drawer-scrollbar-radius;
+        }
+    }
+    .k-drawer-items {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .k-drawer-item {
+        padding-block: $kendo-drawer-item-padding-y;
+        padding-inline: $kendo-drawer-item-padding-x;
+        outline: 0;
+        color: inherit;
+        font-size: $kendo-drawer-item-font-size;
+        line-height: $kendo-drawer-item-line-height;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: $kendo-drawer-item-padding-x;
+        cursor: pointer;
+
+        > .k-drawer-link {
+            margin-block: calc( #{$kendo-drawer-item-padding-y} * -1 );
+            margin-inline: calc( #{$kendo-drawer-item-padding-x} * -1 );
+            padding-block: $kendo-drawer-item-padding-y;
+            padding-inline: $kendo-drawer-item-padding-x;
+            color: inherit;
+            display: flex;
+            flex-flow: row nowrap;
+            flex: 1 0 auto;
+            gap: $kendo-drawer-item-padding-x;
+        }
+
+        .k-icon {
+            flex-shrink: 0;
+            padding-inline: $kendo-drawer-icon-padding-x;
+            padding-block: $kendo-drawer-icon-padding-y;
+            box-sizing: content-box;
+
+            &.k-i-none {
+                margin: 0;
+            }
+        }
+
+        .k-item-text {
+            display: inline-block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .k-drawer-toggle {
+            margin-inline-start: auto;
+            cursor: pointer;
+            display: flex;
+        }
+
+        // Hierarchy items
+        @for $i from 1 through $kendo-drawer-item-level-count {
+            &.k-level-#{$i} {
+                padding-inline-start: calc(( #{$i} + 1) * #{$kendo-drawer-item-level-padding-x}) ;
+            }
+        }
+    }
+
+
+    // Separator
+    .k-drawer-separator {
+        padding: 0;
+        height: 1px;
+    }
+
+
+    // Mini mode
+    .k-drawer-mini .k-drawer-wrapper {
+        width: $kendo-drawer-mini-initial-width;
+    }
+}
+
+
+@mixin kendo-drawer--layout() {
+    @include kendo-drawer--layout-base();
+}

package/scss/components/drawer/_theme.scss

@@ -0,0 +1,68 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-drawer--theme-base() {
+
+    .k-drawer {
+        @include fill(
+            $kendo-drawer-text,
+            $kendo-drawer-bg,
+            $kendo-drawer-border
+        );
+    }
+
+    // Drawer items
+    .k-drawer-wrapper {
+        scrollbar-color: $kendo-drawer-scrollbar-color $kendo-drawer-scrollbar-bg;
+
+        &::-webkit-scrollbar-track {
+            background: $kendo-drawer-scrollbar-bg;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: $kendo-drawer-scrollbar-color;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            background: $kendo-drawer-scrollbar-hover-color;
+        }
+    }
+    .k-drawer-item {
+
+        &:hover,
+        &.k-hover {
+            color: $kendo-drawer-hover-text;
+            background-color: $kendo-drawer-hover-bg;
+        }
+
+        &:focus,
+        &.k-focus {
+            background-color: $kendo-drawer-focus-bg;
+            @include focus-indicator( $kendo-drawer-focus-shadow, true );
+
+            &:hover,
+            &.k-hover {
+                color: $kendo-drawer-hover-text;
+                background-color: $kendo-drawer-hover-bg;
+            }
+        }
+
+        &.k-selected {
+            color: $kendo-drawer-selected-text;
+            background-color: $kendo-drawer-selected-bg;
+
+            &:hover,
+            &.k-hover {
+                color: $kendo-drawer-selected-hover-text;
+                background-color: $kendo-drawer-selected-hover-bg;
+            }
+        }
+    }
+    .k-drawer-separator {
+        background-color: $kendo-drawer-border;
+    }
+
+}
+
+
+@mixin kendo-drawer--theme() {
+    @include kendo-drawer--theme-base();
+}

package/scss/components/drawer/_variables.scss

@@ -0,0 +1,46 @@
+// Drawer
+
+$kendo-drawer-bg: null !default;
+$kendo-drawer-text: null !default;
+$kendo-drawer-border: null !default;
+$kendo-drawer-border-width: null !default;
+
+$kendo-drawer-font-family: null !default;
+$kendo-drawer-font-size: null !default;
+$kendo-drawer-line-height: null !default;
+
+$kendo-drawer-content-padding-x: null !default;
+
+$kendo-drawer-content-padding-y: null !default;
+
+$kendo-drawer-scrollbar-width: null !default;
+$kendo-drawer-scrollbar-color: null !default;
+$kendo-drawer-scrollbar-bg: null !default;
+$kendo-drawer-scrollbar-radius: null !default;
+$kendo-drawer-scrollbar-hover-color: null !default;
+
+$kendo-drawer-item-padding-x: null !default;
+$kendo-drawer-item-padding-y: null !default;
+$kendo-drawer-item-font-size: null !default;
+$kendo-drawer-item-line-height: null !default;
+
+$kendo-drawer-item-level-padding-x: null !default;
+$kendo-drawer-item-level-count: null !default;
+
+$kendo-drawer-icon-padding-x: null !default;
+
+$kendo-drawer-icon-padding-y: null !default;
+
+$kendo-drawer-mini-initial-width: null !default;
+
+$kendo-drawer-hover-bg: null !default;
+$kendo-drawer-hover-text: null !default;
+
+$kendo-drawer-focus-bg: null !default;
+$kendo-drawer-focus-shadow: null !default;
+
+$kendo-drawer-selected-bg: null !default;
+$kendo-drawer-selected-text: null !default;
+
+$kendo-drawer-selected-hover-bg: null !default;
+$kendo-drawer-selected-hover-text: null !default;

package/scss/components/dropdowngrid/_index.scss

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

package/scss/components/dropdowngrid/_layout.scss

@@ -0,0 +1,20 @@
+@mixin kendo-dropdown-grid--layout-base() {
+
+    // Dropdown grid
+    .k-dropdown-grid {}
+
+
+    // Dropdown grid popup
+    .k-dropdowngrid-popup {
+        overflow: hidden;
+    }
+    .k-dropdowngrid-popup > .k-data-table {
+        border-width: 0;
+    }
+
+}
+
+
+@mixin kendo-dropdown-grid--layout() {
+    @include kendo-dropdown-grid--layout-base();
+}

package/scss/components/dropdowngrid/_theme.scss

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

package/scss/components/dropdowngrid/_variables.scss

@@ -0,0 +1 @@
+// Dropdown grid

package/scss/components/dropdownlist/_index.scss

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

package/scss/components/dropdownlist/_layout.scss

@@ -0,0 +1,43 @@
+@mixin kendo-dropdown-list--layout-base() {
+
+    // Dropdown list
+    .k-dropdown-list {}
+
+
+    // Native select
+    select.k-dropdown-list {}
+
+
+    // Dropdown operator
+    .k-dropdown-operator {
+        width: min-content;
+        flex: none;
+
+        .k-input-button {
+            border-width: 0;
+            width: min-content;
+        }
+
+        .k-input-button .k-button-icon {
+            width: auto;
+            aspect-ratio: 1;
+        }
+
+        .k-input-inner {
+            display: none;
+        }
+    }
+
+
+    // Legacy aliases
+    .k-dropdown,
+    .k-dropdownlist {
+        @extend .k-dropdown-list !optional;
+    }
+
+}
+
+
+@mixin kendo-dropdown-list--layout() {
+    @include kendo-dropdown-list--layout-base();
+}

package/scss/components/dropdownlist/_theme.scss

@@ -0,0 +1,14 @@
+@mixin kendo-dropdown-list--theme-base() {
+
+    // Dropdown list
+    .k-dropdown-list {}
+
+    // Native select
+    select.k-dropdown-list {}
+
+}
+
+
+@mixin kendo-dropdown-list--theme() {
+    @include kendo-dropdown-list--theme-base();
+}

package/scss/components/dropdownlist/_variables.scss

@@ -0,0 +1 @@
+// Dropdownlist

package/scss/components/dropdowntree/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../multiselect/_index.scss" as *;
+@use "../treeview/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dropdown-tree--styles() {
+    @include import-once( "dropdown-tree" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-popup--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-multiselect--styles();
+        @include kendo-treeview--styles();
+        @include kendo-dropdown-tree--layout();
+        @include kendo-dropdown-tree--theme();
+        @include kendo-utils--typography--text-align();
+    }
+}

package/scss/components/dropdowntree/_layout.scss

@@ -0,0 +1,44 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-dropdown-tree--layout-base() {
+
+    // Dropdown tree
+    .k-dropdown-tree {}
+
+    // Dropdowntree popup
+    .k-popup-dropdowntree, // remove legacy class once updated in components
+    .k-dropdowntree-popup,
+    .k-multiselecttree-popup {
+        .k-treeview {
+            padding-block: calc( #{$kendo-dropdowntree-popup-padding-y} / 2 );
+            padding-inline: calc( #{$kendo-dropdowntree-popup-padding-x} / 2 );
+        }
+
+        .k-check-all {
+            padding-block: $kendo-dropdowntree-popup-padding-y;
+            padding-inline: $kendo-dropdowntree-popup-padding-x;
+        }
+    }
+
+    .k-multiselecttree {
+        .k-input-values {
+            width: auto;
+            max-width: 100%;
+        }
+
+        .k-input-inner::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+}
+
+
+@mixin kendo-dropdown-tree--layout() {
+    @include kendo-dropdown-tree--layout-base();
+}

package/scss/components/dropdowntree/_theme.scss

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

package/scss/components/dropdowntree/_variables.scss

@@ -0,0 +1,4 @@
+// Dropdowntree
+
+$kendo-dropdowntree-popup-padding-x: null !default;
+$kendo-dropdowntree-popup-padding-y: null !default;

package/scss/components/dropzone/_index.scss

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

package/scss/components/dropzone/_layout.scss

@@ -0,0 +1,49 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-dropzone--layout-base() {
+
+    // Dropzone
+    .k-external-dropzone {
+        height: $kendo-dropzone-min-height;
+        display: flex;
+        flex-flow: row nowrap;
+    }
+
+    // Dropzone inner
+    .k-dropzone-inner {
+        padding-block: $kendo-dropzone-padding-y;
+        padding-inline: $kendo-dropzone-padding-x;
+        border-width: $kendo-dropzone-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        font-size: $kendo-dropzone-font-size;
+        font-family: $kendo-dropzone-font-family;
+        line-height: $kendo-dropzone-line-height;
+        flex: 1 1 auto;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        .k-dropzone-icon {
+            margin-bottom: $kendo-dropzone-icon-spacing;
+        }
+
+        .k-dropzone-hint {
+            margin-bottom: $kendo-dropzone-hint-spacing;
+            font-size: $kendo-dropzone-hint-font-size;
+        }
+
+        .k-dropzone-note {
+            margin-bottom: $kendo-dropzone-note-spacing;
+            font-size: $kendo-dropzone-note-font-size;
+        }
+    }
+
+}
+
+
+@mixin kendo-dropzone--layout() {
+    @include kendo-dropzone--layout-base();
+}

package/scss/components/dropzone/_theme.scss

@@ -0,0 +1,41 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-dropzone--theme-base() {
+
+    // Dropzone
+    .k-dropzone-inner {
+        @include fill(
+            $kendo-dropzone-text,
+            $kendo-dropzone-bg,
+            $kendo-dropzone-border
+        );
+
+        .k-icon,
+        .k-dropzone-icon {
+            color: $kendo-dropzone-icon-text;
+        }
+        .k-dropzone-hint {
+            color: $kendo-dropzone-hint-text;
+        }
+        .k-dropzone-note {
+            color: $kendo-dropzone-note-text;
+        }
+    }
+
+
+    // Hover
+    .k-external-dropzone-hover {
+
+        .k-icon,
+        .k-dropzone-icon {
+            color: $kendo-dropzone-icon-hover-text;
+        }
+    }
+
+}
+
+
+@mixin kendo-dropzone--theme() {
+    @include kendo-dropzone--theme-base();
+}