@progress/kendo-theme-classic 4.41.2-dev.2 → 5.0.0-next.2

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

@@ -1,297 +0,0 @@
-@include exports("datetime/theme") {
-
-    // Common
-    .k-datepicker,
-    .k-timepicker,
-    .k-datetimepicker,
-    .k-dateinput {
-
-        .k-select {
-            @include fill(
-                $datetime-select-text,
-                $datetime-select-bg,
-                $datetime-select-border,
-                $datetime-select-gradient
-            );
-        }
-
-        .k-i-warning {
-            color: $error;
-        }
-    }
-
-
-    .k-datepicker .k-picker-wrap,
-    .k-timepicker .k-picker-wrap,
-    .k-datetimepicker .k-picker-wrap,
-    .k-dateinput .k-dateinput-wrap {
-        @include fill(
-            $datetime-text,
-            $datetime-bg,
-            $datetime-border
-        );
-
-        // Hovered state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $datetime-hovered-text,
-                $datetime-hovered-bg,
-                $datetime-hovered-border
-            );
-        }
-
-        // Selected state
-        &.k-state-focused,
-        &.k-state-active {
-            @include fill(
-                $datetime-focused-text,
-                $datetime-focused-bg,
-                $datetime-focused-border
-            );
-            @include box-shadow($datetime-focused-shadow);
-        }
-    }
-
-    .k-datepicker,
-    .k-timepicker {
-
-        .k-select:hover,
-        .k-select.k-state-hover {
-            @include fill(
-                $datetime-select-hovered-text,
-                $datetime-select-hovered-bg,
-                $datetime-select-hovered-border,
-                $datetime-select-hovered-gradient
-            );
-        }
-    }
-
-
-    .k-dateinput,
-    .k-datetimepicker {
-
-        .k-link:hover,
-        .k-link.k-state-hover {
-            @include fill(
-                $datetime-select-hovered-text,
-                $datetime-select-hovered-bg,
-                $datetime-select-hovered-border,
-                $datetime-select-hovered-gradient
-            );
-        }
-
-        .k-link:active,
-        .k-link.k-state-active,
-        .k-link.k-state-selected {
-            @include fill(
-                $datetime-select-pressed-text,
-                $datetime-select-pressed-bg,
-                $datetime-select-pressed-border,
-                $datetime-select-pressed-gradient
-            );
-        }
-    }
-
-
-    // Timepicker
-    .k-timepicker {}
-
-
-    // Timepicker header
-    .k-time-header {
-
-        .k-time-now {
-            color: $link-text;
-            background: transparent;
-
-            &:hover,
-            &:focus {
-                color: $link-hover-text;
-            }
-        }
-    }
-
-
-    // Timepicker content
-    .k-time-list-wrapper {
-
-        .k-title {
-            color: $time-list-title-text;
-        }
-
-        &.k-state-focused {
-            .k-title {
-                color: $time-list-title-focus-text;
-            }
-
-            &::before,
-            &::after {
-                background-color: $time-list-focused-bg;
-            }
-        }
-    }
-
-    .k-time-list {
-        &::before,
-        &::after {
-            $shadow-size: 3em;
-            box-shadow: 0 0 $shadow-size ($shadow-size / 2) $popup-bg;
-        }
-
-        .k-item:hover {
-            color: $primary;
-        }
-    }
-
-    .k-time-container {
-        background: transparent;
-    }
-
-    .k-time-highlight {
-        @include fill(
-            $bg: $time-list-highlight-bg,
-            $border: $time-list-highlight-border
-        );
-    }
-
-    .k-datetime-container {
-        .k-date-tab {
-
-            .k-datetime-buttongroup,
-            .k-datetime-selector {
-                background-color: $component-bg;
-            }
-        }
-    }
-
-    .k-datepicker,
-    .k-datetimepicker,
-    .k-timepicker {
-        .k-picker-wrap {
-            // Invalid
-            &.k-invalid,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-picker-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
-    .k-dateinput {
-        .k-dateinput-wrap {
-            // Invalid
-            &.k-invalid,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
-
-    //Universal rendering
-    .k-datepicker {
-        &.k-state-hover {
-            .k-picker-wrap {
-                @include fill(
-                    $datetime-hovered-text,
-                    $datetime-hovered-bg,
-                    $datetime-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-picker-wrap {
-                @include fill(
-                    $datetime-focused-text,
-                    $datetime-focused-bg,
-                    $datetime-focused-border
-                );
-                @include box-shadow($datetime-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-picker-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-picker-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
-    .k-dateinput,
-    .k-daterangepicker {
-        &.k-state-hover {
-            .k-dateinput-wrap {
-                @include fill(
-                    $datetime-hovered-text,
-                    $datetime-hovered-bg,
-                    $datetime-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-dateinput-wrap {
-                @include fill(
-                    $datetime-focused-text,
-                    $datetime-focused-bg,
-                    $datetime-focused-border
-                );
-                @include box-shadow($datetime-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-dateinput-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
-}

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

@@ -1,53 +0,0 @@
-// DateTime
-$time-highlight-size: 1px;
-
-$time-list-title-text: $subtle-text !default;
-$time-list-title-focus-text: $component-text !default;
-
-$time-list-highlight-bg: $component-bg !default;
-$time-list-highlight-border: $component-border !default;
-
-$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
-
-$time-header-padding: null !default;
-$timepicker-header-height: 2em;
-
-$time-list-padding: $padding-y * 5 !default;
-$time-list-focus-size: 2px !default;
-$time-list-width: 4em !default;
-$time-list-height: 200px !default;
-
-$time-list-item-padding-x: $padding-x !default;
-$time-list-item-padding-y: $padding-y !default;
-
-$dateinput-text: null !default;
-
-$datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
-
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-pressed-bg: $button-active-bg !default;
-$datetime-select-pressed-text: $button-active-text !default;
-$datetime-select-pressed-border: $button-active-border !default;
-$datetime-select-pressed-gradient: $button-active-gradient !default;

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

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

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

@@ -1,87 +0,0 @@
-@include exports("dialog/layout") {
-
-    .k-dialog-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        outline: 0;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 10001;
-
-        .k-dialog {
-            position: relative;
-        }
-    }
-
-    .k-dialog {
-        padding: 0;
-        position: fixed;
-        box-sizing: border-box;
-
-        // Centered
-        &.k-dialog-centered {
-            transform: translate(-50%, -50%);
-            top: 50%;
-            left: 50%;
-        }
-
-        .k-multiselect {
-            width: 100%;
-        }
-    }
-
-
-    // Titlebar
-    .k-dialog-titlebar {}
-    .k-dialog-title {}
-
-    .k-dialog-close {
-        align-self: flex-end;
-    }
-
-
-    // Actions
-    .k-dialog-actions {}
-    .k-dialog-action {}
-
-
-    // Content
-    .k-dialog-content {}
-
-
-    // Buttons
-    .k-dialog-buttongroup {
-        @include border-bottom-radius( $window-border-radius );
-        padding: $dialog-buttongroup-padding-y $dialog-buttongroup-padding-x;
-        border-width: $dialog-buttongroup-border-width 0 0;
-        border-style: solid;
-        border-color: inherit;
-        flex: 0 0 auto;
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        gap: $dialog-button-spacing;
-        overflow: hidden;
-    }
-
-
-    // Legacy spacing
-    .k-ie .k-dialog-buttongroup {
-
-        .k-button ~ .k-button {
-            margin-left: $dialog-button-spacing;
-
-            .k-rtl &,
-            [dir="rtl"] & {
-                margin-left: 0;
-                margin-right: $dialog-button-spacing;
-            }
-        }
-    }
-
-}

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

@@ -1,11 +0,0 @@
-@include exports("dialog/theme") {
-    // Titlebar
-    .k-dialog-titlebar {
-        @include fill(
-            $dialog-titlebar-text,
-            $dialog-titlebar-bg,
-            $dialog-titlebar-border
-        );
-    }
-
-}

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

@@ -1,10 +0,0 @@
-// Dialog
-$dialog-titlebar-bg: $primary !default;
-$dialog-titlebar-text: $primary-contrast !default;
-$dialog-titlebar-border: inherit !default;
-
-$dialog-buttongroup-padding-x: $actions-padding-x !default;
-$dialog-buttongroup-padding-y: $actions-padding-y !default;
-$dialog-buttongroup-border-width: 1px !default;
-
-$dialog-button-spacing: $actions-button-spacing !default;

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

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

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

@@ -1,221 +0,0 @@
-@include exports("drawer/layout") {
-
-    .k-drawer-container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        align-items: flex-start;
-    }
-    kendo-drawer.k-drawer,
-    kendo-drawer .k-drawer-wrapper {
-        transition: none;
-    }
-    .k-drawer {
-        height: 100%;
-        border-width: 0;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $drawer-font-family;
-        font-size: $drawer-font-size;
-        line-height: $drawer-line-height;
-        display: flex;
-        flex-direction: column;
-        flex: 0 0 auto;
-        transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Borders
-        .k-drawer-mini &.k-drawer-start,
-        .k-drawer-expanded &.k-drawer-start,
-        .k-drawer-left.k-drawer-mini &,
-        .k-drawer-left.k-drawer-expanded & {
-            border-right-width: $drawer-border-width;
-        }
-        .k-drawer-mini &.k-drawer-end,
-        .k-drawer-expanded &.k-drawer-end,
-        .k-drawer-right.k-drawer-mini &,
-        .k-drawer-right.k-drawer-expanded & {
-            border-left-width: $drawer-border-width;
-        }
-
-        // Position
-        &.k-drawer-start,
-        .k-drawer-left & {
-            top: 0;
-            left: 0;
-        }
-        &.k-drawer-end,
-        .k-drawer-right & {
-            top: 0;
-            right: 0;
-        }
-    }
-    .k-drawer-content {
-        flex: 1 1 auto;
-    }
-
-
-    // Overlay drawer
-    .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;
-        }
-
-
-        // right drawer
-        .k-drawer.k-drawer-end,
-        &.k-drawer-right .k-drawer {
-            order: 1;
-        }
-
-    }
-
-
-    // Drawer items
-    .k-drawer-wrapper {
-        overflow-x: hidden;
-        overflow-y: auto;
-        scrollbar-width: thin; // Scrollbar styles for Mozilla
-        transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
-
-        // Scrollbar styles for Chrome, Safari and Opera
-        &::-webkit-scrollbar {
-            width: $drawer-scrollbar-width;
-        }
-        &::-webkit-scrollbar-thumb {
-            border-radius: $drawer-scrollbar-radius;
-        }
-    }
-    .k-drawer-items,
-    .k-drawer-items ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .k-drawer-item {
-        padding: $drawer-item-padding-y $drawer-item-padding-x;
-        outline: 0;
-        color: inherit;
-        font-size: $drawer-item-font-size;
-        line-height: $drawer-item-line-height;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        cursor: pointer;
-
-        > .k-drawer-link {
-            margin: (-$drawer-item-padding-y) (-$drawer-item-padding-x);
-            padding: $drawer-item-padding-y $drawer-item-padding-x;
-            color: inherit;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            flex: 1 0 auto;
-        }
-
-        .k-icon {
-            margin: 0 $drawer-item-padding-x;
-            height: auto;
-            font-size: $drawer-icon-size;
-            line-height: $drawer-item-line-height;
-            flex-shrink: 0;
-
-            &.k-i-none {
-                margin: 0;
-            }
-        }
-
-        .k-item-text {
-            padding: 0 $drawer-item-padding-x;
-            display: inline-block;
-            white-space: nowrap;
-        }
-    }
-    .k-drawer-separator {
-        padding: 0;
-        height: 1px;
-    }
-
-
-
-    // Mini mode
-    .k-drawer-mini {
-
-        .k-drawer-wrapper {
-            width: $drawer-mini-initial-width;
-        }
-
-    }
-
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        // Borders
-        &.k-drawer-mini .k-drawer-start,
-        .k-drawer-mini .k-drawer-start,
-        .k-drawer-expanded .k-drawer-start,
-        &.k-drawer-expanded .k-drawer-start {
-            border-left-width: $drawer-border-width;
-            border-right-width: 0;
-        }
-        &.k-drawer-mini .k-drawer-end,
-        .k-drawer-mini .k-drawer-end,
-        &.k-drawer-expanded .k-drawer-end
-        .k-drawer-expanded .k-drawer-end {
-            border-left-width: 0;
-            border-right-width: $drawer-border-width;
-        }
-
-        // Position
-        &.k-drawer-overlay .k-drawer-start,
-        .k-drawer-overlay .k-drawer-start {
-            left: auto;
-            right: 0;
-        }
-        &.k-drawer-overlay .k-drawer-end,
-        .k-drawer-overlay .k-drawer-end {
-            left: 0;
-            right: auto;
-        }
-
-        // Order
-        .k-drawer-left.k-drawer-push .k-drawer {
-            order: 1;
-        }
-        .k-drawer-right.k-drawer-push .k-drawer {
-            order: 0;
-        }
-    }
-}