@progress/kendo-theme-default 5.0.0-next.4 → 5.0.2-dev.0

package/scss/input/_theme.scss

@@ -1,28 +1,123 @@
-@include exports("input/theme") {
+@include exports( "input/theme" ) {
 
-    .k-input-prefix,
-    .k-input-suffix {
+    // Solid input
+    .k-input {
+        @include fill(
+            $kendo-input-text,
+            $kendo-input-bg,
+            $kendo-input-border
+        );
 
-        > .k-icon {
-            color: $input-icon-text;
-            opacity: $input-icon-opacity;
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-input-hover-text,
+                $kendo-input-hover-bg,
+                $kendo-input-hover-border
+            );
         }
 
-        .k-clear-value {
-            color: $clear-button-text;
+        // Focus
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-focus-text,
+                $kendo-input-focus-bg,
+                $kendo-input-focus-border
+            );
+            @include box-shadow( $kendo-input-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-input-focus-text,
+                $kendo-input-focus-bg,
+                $kendo-input-focus-border
+            );
+            @include box-shadow( $kendo-input-focus-shadow );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
 
-        > .k-clear-value {
-            &.k-state-focused::after,
-            &:focus::after {
-                background-color: $input-clear-button-focused-background;
-                opacity: $input-clear-button-focused-opacity;
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
             }
         }
+
     }
 
-    .k-input-separator {
-        border-color: $input-separator-color;
-        opacity: $input-separator-opacity;
+
+    // Solid picker
+    .k-picker {
+        @include fill(
+            $kendo-picker-text,
+            $kendo-picker-bg,
+            $kendo-picker-border,
+            $kendo-picker-gradient
+        );
+
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-picker-hover-text,
+                $kendo-picker-hover-bg,
+                $kendo-picker-hover-border,
+                $kendo-picker-hover-gradient
+            );
+        }
+
+        // Focus
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-picker-focus-text,
+                $kendo-picker-focus-bg,
+                $kendo-picker-focus-border,
+                $kendo-picker-focus-gradient
+            );
+            @include box-shadow( $kendo-picker-focus-shadow );
+        }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-focus-text,
+                $kendo-picker-focus-bg,
+                $kendo-picker-focus-border,
+                $kendo-picker-focus-gradient
+            );
+            @include box-shadow( $kendo-picker-focus-shadow );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
     }
+
 }

package/scss/input/_variables.scss

@@ -1,97 +1,121 @@
 // Input
+$kendo-input-default-width: 100% !default;
+
+$kendo-input-border-width: 1px !default;
+$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+$kendo-input-border-radius: null !default;
+
+$kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-input-font-family: $font-family !default;
+$kendo-input-font-size: $font-size-md !default;
+$kendo-input-line-height: $line-height-md !default;
+
+$kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-input-font-size-sm: $font-size-md !default;
+$kendo-input-line-height-sm: $line-height-md !default;
+
+$kendo-input-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-input-font-size-md: $font-size-md !default;
+$kendo-input-line-height-md: $line-height-md !default;
+
+$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-input-font-size-lg: $font-size-md !default;
+$kendo-input-line-height-lg: $line-height-md !default;
+
+$kendo-input-sizes: (
+    sm: (
+        padding-x: $kendo-input-padding-x-sm,
+        padding-y: $kendo-input-padding-y-sm,
+        font-size: $kendo-input-font-size-sm,
+        line-height: $kendo-input-line-height-sm,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} ),
+        button-padding-x: $kendo-input-padding-y-sm,
+        button-padding-y: $kendo-input-padding-y-sm
+    ),
+    md: (
+        padding-x: $kendo-input-padding-x-md,
+        padding-y: $kendo-input-padding-y-md,
+        font-size: $kendo-input-font-size-md,
+        line-height: $kendo-input-line-height-md,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} ),
+        button-padding-x: $kendo-input-padding-y-md,
+        button-padding-y: $kendo-input-padding-y-md
+    ),
+    lg: (
+        padding-x: $kendo-input-padding-x-lg,
+        padding-y: $kendo-input-padding-y-lg,
+        font-size: $kendo-input-font-size-lg,
+        line-height: $kendo-input-line-height-lg,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} ),
+        button-padding-x: $kendo-input-padding-y-lg,
+        button-padding-y: $kendo-input-padding-y-lg
+    )
+) !default;
+
+$kendo-input-bg: $component-bg !default;
+$kendo-input-text: $component-text !default;
+$kendo-input-border: $component-border !default;
+$kendo-input-shadow: null !default;
+
+$kendo-input-hover-bg: null !default;
+$kendo-input-hover-text: null !default;
+$kendo-input-hover-border: rgba( $kendo-input-border, .16 ) !default;
+$kendo-input-hover-shadow: null !default;
+
+$kendo-input-focus-bg: null !default;
+$kendo-input-focus-text: null !default;
+$kendo-input-focus-border: $kendo-input-hover-border !default;
+$kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
+
+$kendo-picker-bg: $kendo-button-bg !default;
+$kendo-picker-text: $kendo-button-text !default;
+$kendo-picker-border: $kendo-button-border !default;
+$kendo-picker-gradient: $kendo-button-gradient !default;
+$kendo-picker-shadow: $kendo-button-shadow !default;
+
+$kendo-picker-hover-bg: $kendo-button-hover-bg !default;
+$kendo-picker-hover-text: $kendo-button-hover-text !default;
+$kendo-picker-hover-border: $kendo-button-hover-border !default;
+$kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
+$kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
+
+$kendo-picker-focus-bg: $kendo-button-focus-bg !default;
+$kendo-picker-focus-text: $kendo-button-focus-text !default;
+$kendo-picker-focus-border: $kendo-button-focus-border !default;
+$kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
+$kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
+
+$kendo-input-placeholder-text: $subtle-text !default;
+$kendo-input-placeholder-opacity: 1 !default;
+
+$kendo-input-selected-bg: null !default;
+$kendo-input-selected-text: null !default;
+
+$kendo-input-clear-value-text: null !default;
+$kendo-input-clear-value-opacity: .5 !default;
+$kendo-input-clear-value-hover-text: null !default;
+$kendo-input-clear-value-hover-opacity: 1 !default;
+
+$kendo-input-values-margin-y: map-get( $spacing, thin ) !default;
+$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
+
+
+// Input actions
+$kendo-input-button-width: $kendo-button-inner-calc-size !default;
+$kendo-input-button-border-width: 0px !default;
+$kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
+$kendo-input-spinner-icon-offset: null !default;
 
-$input-default-width: 12.4em !default;
 
-$input-border-width: 1px !default;
-$input-border-height: ( $input-border-width * 2 ) !default;
-$input-border-radius: $border-radius !default;
-$input-border-radius-sm: $border-radius !default;
-$input-border-radius-lg: $border-radius !default;
-
-$input-padding-x: $padding-x !default;
-$input-padding-y: $padding-y !default;
-$input-font-family: $font-family !default;
-$input-font-size: $font-size !default;
-$input-line-height: $line-height !default;
-$input-line-height-em: $input-line-height * 1em !default;
-
-$input-padding-x-sm: ($input-padding-x / 2) !default;
-$input-padding-y-sm: ($input-padding-y / 2) !default;
-$input-font-size-sm: $input-font-size !default;
-$input-line-height-sm: $line-height-sm !default;
-
-$input-padding-x-lg: ($input-padding-x * 1.5) !default;
-$input-padding-y-lg: ($input-padding-y * 1.5) !default;
-$input-font-size-lg: $input-font-size !default;
-$input-line-height-lg: $line-height-lg !default;
-
-$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-height} ) !default;
-$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-height} ) !default;
-$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-height} ) !default;
-
-$input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} ) !default;
-$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
-$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;
-
-$input-adornment-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;
-$input-adornment-width: $input-adornment-height !default;
-
-$input-bg: $component-bg !default;
-$input-text: $component-text !default;
-$input-border: $component-border !default;
-$input-shadow: null !default;
-
-$input-hovered-bg: null !default;
-$input-hovered-text: null !default;
-$input-hovered-border: rgba( $input-border, .16 ) !default;
-$input-hovered-shadow: null !default;
-
-$input-focused-bg: null !default;
-$input-focused-text: null !default;
-$input-focused-border: $input-hovered-border !default;
-$input-focused-shadow: 0 0 0 2px rgba( $input-focused-border, .08 ) !default;
-
-$input-placeholder-text: $subtle-text !default;
-$input-placeholder-opacity: 1 !default;
-
-$input-selected-bg: $primary !default;
-$input-selected-text: $primary-contrast !default;
-
-$input-clear-button-focused-background: $base-text !default;
-$input-clear-button-focused-opacity: .2 !default;
-
-
-// Picker
-$picker-select-border-width: 0px !default;
-
-$picker-select-padding-x: $input-padding-y !default;
-$picker-select-padding-y: $input-padding-y !default;
-
-$picker-select-padding-x-sm: $input-padding-y-sm !default;
-$picker-select-padding-y-sm: $input-padding-y-sm !default;
-
-$picker-select-padding-x-lg: $input-padding-y-sm !default;
-$picker-select-padding-y-lg: $input-padding-y-sm !default;
-
-$picker-select-calc-size: $input-inner-calc-height !default;
-$picker-select-calc-size-sm: $input-inner-calc-height-sm !default;
-$picker-select-calc-size-lg: $input-inner-calc-height-lg !default;
-
-
-// Spinner
-$spinner-width: $button-inner-calc-size !default;
-$spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
-$spinner-icon-offset: 2px !default;
-
-
-// Input icon
-$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
-$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;
-
-$input-icon-text: $subtle-text !default;
-$input-icon-opacity: null !default;
+// Input separator
+$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-opacity: .5 !default;
 
 
-// Input separator
-$input-separator-color: $input-text !default;
-$input-separator-opacity: .5 !default;
+// Invalid
+$kendo-input-invalid-border: $invalid-border !default;
+$kendo-input-invalid-shadow: $invalid-shadow !default;

package/scss/list/_index.scss

@@ -0,0 +1,12 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../checkbox/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/list/_layout.scss

@@ -0,0 +1,241 @@
+@include exports( "list/layout" ) {
+
+    // List
+    .k-list {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-size: $kendo-list-font-size;
+        line-height: $kendo-list-line-height;
+        display: flex;
+        flex-flow: column nowrap;
+        outline: none;
+        position: relative;
+        overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // List in popup
+    .k-popup > .k-list {
+        height: 100%;
+        border-width: 0;
+    }
+
+
+    // List header
+    // .k-list-header,
+    .k-list-group-sticky-header {
+        padding: $kendo-list-header-padding-y $kendo-list-header-padding-x;
+        border-width: 0;
+        border-width: $kendo-list-header-border-width; // sass-lint:disable-line no-duplicate-properties
+        border-style: solid;
+        font-size: $kendo-list-header-font-size;
+        line-height: $kendo-list-header-line-height;
+        font-weight: $kendo-list-header-font-weight;
+        white-space: nowrap;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        flex: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+
+    // List content
+    .k-list-content {
+        border-color: inherit;
+        flex: 1 1 auto;
+        overflow: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        position: relative;
+    }
+
+
+    // List UL
+    .k-list-ul {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        border-color: inherit;
+        height: auto;
+        list-style: none;
+    }
+
+
+    // List item
+    .k-list-item {
+        padding: $kendo-list-item-padding-y $kendo-list-item-padding-x;
+        border: 0;
+        font-size: $kendo-list-item-font-size;
+        line-height: $kendo-list-item-line-height;
+        outline: none;
+        cursor: pointer;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: $icon-spacing;
+        position: relative;
+        transition-property: color, background-color, outline-color, box-shadow;
+        transition-duration: 200ms;
+        transition-timing-function: ease;
+
+        &.k-first::before {
+            content: "";
+            border-width: 1px 0 0;
+            border-style: solid;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+    .k-list-optionlabel {
+        @extend .k-list-item;
+    }
+
+
+    // List group item
+    .k-list-group-item {
+        padding: $kendo-list-group-item-padding-y $kendo-list-group-item-padding-x;
+        border-width: 0;
+        border-width: $kendo-list-group-item-border-width; // sass-lint:disable-line no-duplicate-properties
+        border-style: solid;
+        font-size: $kendo-list-group-item-font-size;
+        line-height: $kendo-list-group-item-line-height;
+        font-weight: $kendo-list-group-item-font-weight;
+        cursor: default;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: $icon-spacing;
+        position: relative;
+    }
+
+
+    // List item group label
+    .k-list-item-group-label {
+        padding: 0 .5em;
+        font-size: .75em;
+        position: absolute;
+        top: 0;
+        inset-inline-end: 0;
+
+        .k-ie & {
+            right: 0;
+        }
+        .k-ie .k-rtl &,
+        .k-ie [dir="rtl"] & {
+            right: auto;
+            left: 0;
+        }
+    }
+
+
+    // Virtualization
+    .k-virtual-list {}
+    .k-virtual-content,
+    .k-virtual-list .k-list-content {
+        overflow-y: scroll;
+    }
+    .k-virtual-list .k-list-item,
+    .k-virtual-list .k-list-group-item,
+    .k-virtual-content .k-list-item,
+    .k-virtual-content .k-list-group-item {
+        position: absolute;
+        width: 100%;
+    }
+    .k-virtual-list .k-list-item-text,
+    .k-virtual-list .k-list-header-text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .k-virtual-list .k-list-optionlabel {
+        position: relative;
+    }
+
+
+    // Filter
+    .k-list-filter {
+        display: block;
+        position: relative;
+        padding: $padding-x;
+        box-sizing: border-box;
+        flex: 0 0 auto;
+    }
+
+
+    // Switch sizes
+    @each $size, $size-props in $kendo-list-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_header-padding-x: map-get( $size-props, header-padding-x );
+        $_header-padding-y: map-get( $size-props, header-padding-y );
+        $_header-font-size: map-get( $size-props, header-font-size );
+        $_header-line-height: map-get( $size-props, header-line-height );
+        $_item-padding-x: map-get( $size-props, item-padding-x );
+        $_item-padding-y: map-get( $size-props, item-padding-y );
+        $_item-font-size: map-get( $size-props, item-font-size );
+        $_item-line-height: map-get( $size-props, item-line-height );
+        $_group-item-padding-x: map-get( $size-props, group-item-padding-x );
+        $_group-item-padding-y: map-get( $size-props, group-item-padding-y );
+        $_group-item-font-size: map-get( $size-props, group-item-font-size );
+        $_group-item-line-height: map-get( $size-props, group-item-line-height );
+
+        .k-list-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            // .k-list-header,
+            .k-list-group-sticky-header {
+                padding: $_header-padding-y $_header-padding-x;
+                font-size: $_header-font-size;
+                line-height: $_header-line-height;
+            }
+
+            .k-list-item {
+                padding: $_item-padding-y $_item-padding-x;
+                font-size: $_item-font-size;
+                line-height: $_item-line-height;
+            }
+
+            .k-list-group-item {
+                padding: $_group-item-padding-y $_group-item-padding-x;
+                font-size: $_group-item-font-size;
+                line-height: $_group-item-line-height;
+            }
+        }
+    }
+
+
+    // No data
+    .k-no-data {
+        min-height: 140px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        text-align: center;
+        white-space: normal;
+    }
+
+
+    // Alias
+    .k-nodata {
+        @extend .k-no-data !optional;
+    }
+
+}

package/scss/list/_theme.scss

@@ -0,0 +1,91 @@
+@include exports( "list/theme" ) {
+
+    // List
+    .k-list {
+        @include fill(
+            $kendo-list-text,
+            $kendo-list-bg,
+            $kendo-list-border
+        );
+    }
+
+
+    // List header
+    // .k-list-header,
+    .k-list-group-sticky-header {
+        @include fill(
+            $kendo-list-header-text,
+            $kendo-list-header-bg,
+            $kendo-list-header-border,
+        );
+        @include box-shadow( $kendo-list-header-shadow );
+    }
+
+
+    // List item
+    .k-list-item {
+        @include fill(
+            $kendo-list-item-text,
+            $kendo-list-item-bg
+        );
+
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-list-item-hover-text,
+                $kendo-list-item-hover-bg
+            );
+        }
+
+        // Focus
+        &:focus,
+        &.k-focus {
+            @include fill(
+                $kendo-list-item-focus-text,
+                $kendo-list-item-focus-bg
+            );
+            @include box-shadow( $kendo-list-item-focus-shadow );
+        }
+
+        // Selected
+        &.k-selected {
+            @include fill(
+                $kendo-list-item-selected-text,
+                $kendo-list-item-selected-bg
+            );
+        }
+        &.k-selected:hover,
+        &.k-selected.k-hover {
+            color: $kendo-list-item-selected-text;
+            background-color: shade( $kendo-list-item-selected-bg );
+        }
+    }
+
+
+    // List group item
+    .k-list-group-item {
+        @include fill(
+            $kendo-list-group-item-text,
+            $kendo-list-group-item-bg,
+            $kendo-list-group-item-border,
+        );
+        @include box-shadow( $kendo-list-group-item-shadow );
+    }
+
+
+    // List item group label
+    .k-list-item-group-label {
+        @include fill(
+            $kendo-list-bg,
+            $kendo-list-text
+        );
+    }
+
+
+    // No data
+    .k-no-data {
+        color: $kendo-list-no-data-text;
+    }
+
+}