@progress/kendo-theme-classic 4.42.1-dev.4 → 5.0.0-alpha.3

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

@@ -1,82 +0,0 @@
-// Menu
-$menu-padding-x: 0px !default;
-$menu-padding-y: 0px !default;
-$menu-border-width: 0px !default;
-$menu-font-family: $font-family !default;
-$menu-font-size: $font-size !default;
-$menu-line-height: $line-height !default;
-
-$menu-bg: transparent !default;
-$menu-text: $component-text !default;
-$menu-border: null !default;
-$menu-gradient: null !default;
-
-$menu-item-padding-x: $nav-item-padding-x !default;
-$menu-item-padding-y: $nav-item-padding-y !default;
-$menu-item-spacing: $nav-item-margin !default;
-$menu-item-icon-spacing: $icon-spacing !default;
-
-$menu-item-bg: null !default;
-$menu-item-text: $link-text !default;
-$menu-item-border: null !default;
-$menu-item-gradient: null !default;
-
-$menu-item-hover-bg: null !default;
-$menu-item-hover-text: $link-hover-text !default;
-$menu-item-hover-border: null !default;
-$menu-item-hover-gradient: null !default;
-
-$menu-item-expanded-bg: null !default;
-$menu-item-expanded-text: $component-text !default;
-$menu-item-expanded-border: null !default;
-$menu-item-expanded-gradient: null !default;
-
-$menu-item-focus-shadow: $list-item-focused-shadow !default;
-
-$menu-separator-spacing: 2px !default;
-
-$menu-scroll-button-bg: $component-bg !default;
-$menu-scroll-button-text: $link-text !default;
-$menu-scroll-button-border: $component-border !default;
-$menu-scroll-button-gradient: null !default;
-
-$menu-scroll-button-hover-bg: null !default;
-$menu-scroll-button-hover-text: $link-hover-text !default;
-$menu-scroll-button-hover-border: null !default;
-$menu-scroll-button-hover-gradient: null !default;
-
-
-// Menu popup
-$menu-popup-padding-x: $popup-padding-x !default;
-$menu-popup-padding-y: $popup-padding-y !default;
-$menu-popup-border-width: $popup-border-width !default;
-$menu-popup-font-size: $font-size !default;
-$menu-popup-line-height: $line-height !default;
-
-$menu-popup-bg: $popup-bg !default;
-$menu-popup-text: $popup-text !default;
-$menu-popup-border: $popup-border !default;
-$menu-popup-gradient: null !default;
-
-$menu-popup-item-padding-x: $list-item-padding-x !default;
-$menu-popup-item-padding-y: $list-item-padding-y !default;
-$menu-popup-item-padding-end: calc( #{$list-item-padding-x * 2} + #{$icon-size} ) !default;
-$menu-popup-item-spacing: 0px !default;
-$menu-popup-item-icon-spacing: $icon-spacing !default;
-
-$menu-popup-item-bg: null !default;
-$menu-popup-item-text: null !default;
-$menu-popup-item-border: null !default;
-$menu-popup-item-gradient: null !default;
-
-$menu-popup-item-hover-bg: $list-item-hovered-bg !default;
-$menu-popup-item-hover-text: $list-item-hovered-text !default;
-$menu-popup-item-hover-border: null !default;
-$menu-popup-item-hover-gradient: null !default;
-
-$menu-popup-item-expanded-bg: $list-item-selected-bg !default;
-$menu-popup-item-expanded-text: $list-item-selected-text !default;
-$menu-popup-item-expanded-border: null !default;
-$menu-popup-item-expanded-gradient: null !default;
-
-$menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;

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

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

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

@@ -1,20 +0,0 @@
-@include exports("messagebox/layout") {
-
-    // Base
-    .k-messagebox {
-        margin: $message-box-margin;
-        padding: $message-box-padding-y $message-box-padding-x;
-        border-width: $message-box-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        font-size: $message-box-font-size;
-        line-height: $message-box-line-height;
-
-        a {
-            color: inherit;
-            font-style: $message-box-link-font-style;
-            text-decoration: $message-box-link-text-decoration;
-        }
-    }
-
-}

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

@@ -1,13 +0,0 @@
-@include exports("messagebox/theme") {
-
-    @each $color-name, $color in $theme-colors {
-        .k-messagebox-#{$color-name} {
-            @include fill(
-                color-level( $color, $message-box-text-level ),
-                color-level( $color, $message-box-bg-level ),
-                color-level( $color, $message-box-border-level )
-            );
-        }
-    }
-
-}

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

@@ -1,15 +0,0 @@
-// Message box
-$message-box-margin: 0 0 $spacer 0 !default;
-$message-box-padding-x: $padding-x !default;
-$message-box-padding-y: $padding-y !default;
-$message-box-border-width: 0 0 0 4px !default;
-
-$message-box-font-size: $font-size !default;
-$message-box-line-height: $line-height !default;
-
-$message-box-bg-level: -10 !default;
-$message-box-text-level: 6 !default;
-$message-box-border-level: -9 !default;
-
-$message-box-link-font-style: italic !default;
-$message-box-link-text-decoration: underline !default;

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

@@ -1,17 +0,0 @@
-@import "../core/_index.scss";
-
-
-// Dependencies
-@import "../common/_index.scss";
-@import "../button/_index.scss";
-@import "../input/_index.scss";
-@import "../chip/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../popup/_index.scss";
-@import "../icons/_index.scss";
-
-
-// Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";

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

@@ -1,183 +0,0 @@
-@include exports("multiselect/layout") {
-
-    // Base
-    .k-multiselect {
-        @include border-radius( $input-border-radius );
-        width: $multiselect-width;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-loading-hidden {
-            visibility: hidden;
-        }
-
-        .k-multiselect-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0 $input-icon-width 0 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: text;
-            outline: 0;
-
-            // Input
-            .k-input {
-                float: left;
-            }
-
-            // Height placeholder
-            &::before {
-                content: "";
-                width: 0;
-                height: $input-inner-calc-height;
-                float: left;
-            }
-
-            // Token list
-            ul {
-                vertical-align: top;
-            }
-            li {
-                &.k-button {
-                    float: left;
-                }
-                .k-icon {
-                    cursor: pointer;
-                }
-            }
-
-
-            // Token
-            .k-button {
-                min-height: calc( #{$form-line-height-em} + #{$button-padding-y-sm} + 2px );
-                padding: ($button-padding-y-sm / 2) ($button-padding-x / 2);
-                margin: $padding-y-sm 0 0 $padding-y-sm;
-                cursor: default;
-                display: inline-flex;
-                flex-direction: row;
-                align-items: center;
-                gap: $icon-spacing;
-                line-height: inherit;
-                white-space: normal;
-
-                .k-select {
-                    display: flex;
-                    cursor: pointer;
-                    align-self: stretch;
-                }
-
-                &:last-child {
-                    margin-bottom: $padding-y-sm;
-                }
-            }
-
-            .k-searchbar {
-                // search bar must be floated to align after any selected tags
-                // (or align below them, if space is not available)
-                float: left;
-                width: auto;
-
-                .k-input {
-                    padding-right: 0;
-                }
-            }
-
-            .k-i-loading {
-                width: $input-icon-width;
-                height: $input-icon-height;
-                position: absolute;
-                top: 0;
-                right: 0;
-            }
-
-            // Clear value
-            .k-clear-value {
-                position: absolute;
-                top: 0;
-                right: 0;
-            }
-
-            // Select
-            > .k-select {
-                position: absolute;
-                top: 0;
-                right: 0;
-                width: $input-icon-width;
-                height: $input-icon-height;
-                flex-shrink: 0;
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                outline: 0;
-                cursor: pointer;
-            }
-        }
-
-        .k-multiselect-wrap.k-multiselect-wrap-arrow .k-clear-value {
-            right: $multiselect-clear-right;
-        }
-
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
-
-            .k-multiselect-wrap {
-                padding-left: $input-icon-width;
-                padding-right: 0;
-
-                &::before,
-                li.k-button,
-                .k-input {
-                    float: right;
-                }
-
-                .k-searchbar {
-                    float: right;
-
-                    .k-input {
-                        padding-left: 0;
-                        padding-right: $input-padding-x;
-                    }
-                }
-
-                .k-button {
-                    width: auto;
-                    margin-right: $padding-y-sm;
-                    margin-left: 0;
-                }
-
-                // Select
-                > .k-select {
-                    left: 0;
-                    right: auto;
-                }
-            }
-
-            .k-clear-value,
-            .k-i-loading {
-                right: auto;
-                left: 0;
-            }
-
-            .k-multiselect-wrap.k-multiselect-wrap-arrow .k-clear-value {
-                left: $multiselect-clear-right;
-                right: auto;
-            }
-        }
-    }
-}

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

@@ -1,142 +0,0 @@
-@include exports("multiselect/theme") {
-
-    .k-multiselect {
-
-        &.k-state-focused {
-            > .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-focused-text,
-                    $multiselect-focused-bg,
-                    $multiselect-focused-border
-                );
-                @include box-shadow($multiselect-focused-shadow);
-
-                // Invalid + focused
-                &.k-invalid,
-                &.k-invalid:hover,
-                &.k-state-invalid {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-            // Invalid + focused
-            &.k-state-invalid,
-            &.ng-invalid.ng-touched,
-            &.ng-invalid.ng-dirty {
-                .k-multiselect-wrap {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-
-        }
-
-        .k-multiselect-wrap {
-            @include fill(
-                $multiselect-text,
-                $multiselect-bg,
-                $multiselect-border
-            );
-
-            > .k-readonly {
-                opacity: .6;
-            }
-
-
-            .k-button {
-                .k-icon {
-                    opacity: .6;
-                }
-
-                .k-icon:hover,
-                .k-icon.k-state-hover {
-                    opacity: 1;
-                }
-
-                &:active,
-                &.k-state-active {
-                    @include fill(
-                        $multiselect-button-focused-text,
-                        $multiselect-button-focused-bg,
-                        $multiselect-button-focused-border,
-                        $multiselect-button-focused-gradient
-                    );
-                    @include box-shadow( $multiselect-button-focused-shadow );
-                }
-
-                // Focused state
-                &:focus,
-                &.k-state-focused {
-                    .k-icon {
-                        opacity: 1;
-                    }
-                }
-            }
-
-            .k-i-loading {
-                background-color: $multiselect-bg;
-            }
-
-
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $multiselect-hovered-text,
-                    $multiselect-hovered-bg,
-                    $multiselect-hovered-border
-                );
-            }
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-            }
-        }
-
-        // Invalid,
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-multiselect-wrap {
-                border-color: $invalid-border;
-            }
-        }
-    }
-
-    // Universal rendering
-    .k-multiselect {
-        &.k-state-hover {
-            .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-hovered-text,
-                    $multiselect-hovered-bg,
-                    $multiselect-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-focused-text,
-                    $multiselect-focused-bg,
-                    $multiselect-focused-border
-                );
-                @include box-shadow($multiselect-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-multiselect-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-multiselect-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
-}

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

@@ -1,37 +0,0 @@
-// Multiselect
-$multiselect-width: 100% !default;
-
-$multiselect-token-opacity: .07 !default;
-$multiselect-token-focused-opacity: .46 !default;
-$multiselect-token-focused-text: $base-bg !default;
-$multiselect-token-focused-bg: $base-text !default;
-$multiselect-token-disabled-text: rgba( $base-text, .42 ) !default;
-$multiselect-token-hover-text: $base-bg !default;
-$multiselect-token-hover-bg: rgba( $base-text, .54 ) !default;
-$multiselect-remove-text: $base-bg !default;
-$multiselect-remove-bg: rgba( $base-text, .4 ) !default;
-$multiselect-remove-hover-text: $multiselect-remove-text !default;
-$multiselect-remove-hover-bg: rgba( $base-text, .54 ) !default;
-$multiselect-remove-focused-text: rgba( $base-text, .54 ) !default;
-$multiselect-remove-focused-bg: rgba($base-bg, .93) !default;
-
-$multiselect-bg: $input-bg !default;
-$multiselect-text: $input-text !default;
-$multiselect-border: $input-border !default;
-
-$multiselect-hovered-bg: $input-hovered-bg !default;
-$multiselect-hovered-text: $input-hovered-text !default;
-$multiselect-hovered-border: $input-hovered-border !default;
-
-$multiselect-focused-bg: $input-focused-bg !default;
-$multiselect-focused-text: $input-focused-text !default;
-$multiselect-focused-border: $input-focused-border !default;
-$multiselect-focused-shadow: $input-focused-shadow !default;
-
-$multiselect-button-focused-bg: $button-active-bg !default;
-$multiselect-button-focused-text: $button-active-text !default;
-$multiselect-button-focused-border: $button-active-border !default;
-$multiselect-button-focused-gradient: $button-active-gradient !default;
-$multiselect-button-focused-shadow: $button-active-shadow !default;
-
-$multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;

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

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

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

@@ -1,78 +0,0 @@
-@include exports("notification/layout") {
-
-    // Base
-    .k-notification-group {
-        max-height: 100%;
-        display: inline-flex;
-        flex-flow: column-reverse wrap;
-        position: fixed;
-    }
-
-    .k-notification-container {
-        margin: ($notification-padding-y / 2) 0;
-        display: inline-flex;
-        vertical-align: top;
-
-        &-animating {
-            overflow: hidden;
-        }
-    }
-
-    .k-notification {
-        @include border-radius( $notification-border-radius );
-        padding: $notification-padding-y $notification-padding-x;
-        border-width: $notification-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $notification-font-family;
-        font-size: $notification-font-size;
-        line-height: $notification-line-height;
-        cursor: default;
-        position: relative;
-        display: block;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-    }
-
-    .k-notification-wrap {
-        display: flex;
-        flex-flow: row nowrap;
-
-        > .k-icon {
-            margin-top: $notification-icon-offset;
-            margin-right: $notification-icon-spacing;
-            flex: none;
-        }
-
-        > .k-i-close {
-            margin-right: 0;
-            margin-left: $notification-icon-spacing;
-            flex: none;
-            cursor: pointer;
-        }
-
-        > .k-notification-content {
-            flex: 1 1 auto;
-        }
-    }
-
-    // RTL
-    .k-rtl .k-notification,
-    [dir="rtl"] .k-notification {
-
-        .k-notification-wrap {
-
-            > .k-icon {
-                margin-right: 0;
-                margin-left: $notification-icon-spacing;
-            }
-
-            > .k-i-close {
-                margin-left: 0;
-                margin-right: $notification-icon-spacing;
-            }
-        }
-    }
-
-}

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

@@ -1,28 +0,0 @@
-@include exports("notification/theme") {
-
-    // Theme
-    .k-notification {
-        @include fill(
-            $notification-text,
-            $notification-bg,
-            $notification-border
-        );
-    }
-    .k-notification-wrap {
-        > .k-i-close {
-            color: inherit;
-        }
-    }
-    .k-notification-group .k-notification {
-        box-shadow: $notification-shadow;
-    }
-
-    @each $theme, $props in $notification-themes {
-        .k-notification-#{$theme} {
-            border-color: map-get( $props, border );
-            color: map-get( $props, color );
-            background-color: map-get( $props, bg );
-        }
-    }
-
-}

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

@@ -1,34 +0,0 @@
-// Notification
-$notification-padding-x: 8px !default;
-$notification-padding-y: 4px !default;
-$notification-border-width: 1px !default;
-$notification-border-radius: $border-radius !default;
-
-$notification-shadow: $popup-shadow !default;
-
-$notification-font-family: $font-family !default;
-$notification-font-size: $font-size-sm !default;
-$notification-line-height: $line-height !default;
-
-$notification-icon-offset: null !default;
-$notification-icon-spacing: $icon-spacing !default;
-
-$notification-bg: $component-bg !default;
-$notification-text: $component-text !default;
-$notification-border: $component-border !default;
-
-$notification-themes: () !default;
-
-@function notification-theme($name: null, $color: null) {
-    // sass-lint:disable indentation
-    @return (
-        border: $color,
-        color: contrast-wcag( $color ),
-        bg: $color
-    );
-    // sass-lint:enable indentation
-}
-
-@each $theme, $props in $theme-colors {
-    $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
-}