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

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

@@ -1,78 +0,0 @@
-@include exports( "textbox/layout" ) {
-
-    // Textbox
-    .k-textbox {
-        @include border-radius( $input-border-radius );
-        margin: 0;
-        padding: 0;
-        width: $input-default-width;
-        height: $input-calc-height;
-        border-width: $input-border-width;
-        border-style: solid;
-        outline: 0;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        box-sizing: border-box;
-        // Targets https://github.com/telerik/kendo-react/issues/638.
-        box-shadow: none;
-        background: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        vertical-align: middle;
-        position: relative;
-        -webkit-appearance: none;
-
-        // Hide clear icon
-        &::-ms-clear { display: none; }
-
-        // Placeholder text
-        &::placeholder {
-            color: $input-placeholder-text;
-            opacity: $input-placeholder-opacity;
-            user-select: none;
-        }
-        &:-ms-input-placeholder {
-            color: $input-placeholder-text;
-        }
-
-        .k-input {}
-
-        .k-button-clear {
-            width: $button-inner-calc-size;
-            height: $button-inner-calc-size;
-            border: 0;
-        }
-
-        .k-textbox-separator {
-            margin: 0;
-            width: 0;
-            height: $icon-size;
-            border-width: 0 0 0 1px;
-            border-style: solid;
-        }
-
-        // Disabled state
-        &:disabled,
-        &[disabled],
-        &.k-state-disabled {
-            @include disabled( $disabled-styling );
-
-            // Disabled selection
-            &::selection {
-                @include fill (
-                    $color: $input-text,
-                    $bg: transparent
-                );
-            }
-        }
-    }
-
-
-    // Textbox
-    input.k-textbox {
-        padding: $input-padding-y $input-padding-x;
-    }
-
-}

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

@@ -1,74 +0,0 @@
-@include exports("textbox/theme") {
-
-    // Textbox
-    .k-textbox {
-        @include fill(
-            $input-text,
-            $input-bg,
-            $input-border
-        );
-
-        // Selection
-        &::selection,
-        .k-input::selection {
-            @include fill (
-                $color: $input-selected-text, // $primary-contrast,
-                $bg: $input-selected-bg // $primary
-            );
-        }
-
-        .k-textbox-separator {
-            border-color: $input-separator-color;
-            opacity: $input-separator-opacity;
-        }
-
-        // Focused
-        &:focus,
-        // &:focus-within,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include fill (
-                $input-focused-text,
-                $input-focused-bg,
-                $input-focused-border
-            );
-            @include box-shadow( $input-focused-shadow );
-        }
-        &:focus-within {
-            @include fill (
-                $input-focused-text,
-                $input-focused-bg,
-                $input-focused-border
-            );
-            @include box-shadow( $input-focused-shadow );
-        }
-
-        // Hovered
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $input-hovered-text,
-                $input-hovered-bg,
-                $input-hovered-border
-            );
-        }
-
-        // Invalid
-        &.k-invalid,
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
-
-            &:focus,
-            // &:focus-within,
-            &.k-state-focus,
-            &.k-state-focused {
-                @include box-shadow($invalid-shadow);
-            }
-            &:focus-within {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-}

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

@@ -1,2 +0,0 @@
-// Textboxe
-$textbox-line-height: $input-line-height !default;

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

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

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

@@ -1,42 +0,0 @@
-@include exports("tilelayout/layout") {
-
-    .k-tilelayout {
-        border-width: $tilelayout-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        display: grid;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-card {
-            @include box-shadow( none );
-            border-width: $tilelayout-card-border-width;
-        }
-    }
-
-    .k-tilelayout-item {
-        position: relative;
-        z-index: 0;
-    }
-
-    .k-layout-item-hint {
-        @include border-radius( $tilelayout-hint-border-radius );
-        border-width: $tilelayout-hint-border-width;
-        border-style: solid;
-        position: relative;
-
-        &.k-layout-item-hint-resize {
-            z-index: 3;
-        }
-    }
-
-    .k-tilelayout-item-header.k-card-header {
-        z-index: 0;
-    }
-
-    .k-tilelayout-item-body {
-        min-height: 0;
-    }
-
-}

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

@@ -1,22 +0,0 @@
-@include exports("tilelayout/theme") {
-
-    .k-tilelayout {
-        @include fill(
-            $bg: $tilelayout-bg
-        );
-    }
-
-    .k-tilelayout-item:focus,
-    .k-tilelayout-item.k-state-focus,
-    .k-tilelayout-item.k-state-focused {
-        @include box-shadow($tilelayout-card-focus-shadow);
-    }
-
-    .k-layout-item-hint {
-        @include fill(
-            $bg: $tilelayout-hint-bg,
-            $border: $tilelayout-hint-border
-        );
-    }
-
-}

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

@@ -1,12 +0,0 @@
-// TileLayout
-$tilelayout-border-width: 0px !default;
-$tilelayout-card-border-width: $card-border-width !default;
-$tilelayout-card-focus-shadow: $card-focus-shadow !default;
-
-$tilelayout-hint-border-width: 1px !default;
-$tilelayout-hint-border-radius: $border-radius-lg !default;
-
-$tilelayout-bg: $base-bg !default;
-
-$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
-$tilelayout-hint-border: $component-border !default;

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

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

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

@@ -1,430 +0,0 @@
-@include exports("timeline/layout") {
-
-    .k-timeline {
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $timeline-font-family;
-        font-size: $timeline-font-size;
-        line-height: $timeline-line-height;
-        display: block;
-        background-color: transparent;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        ul {
-            margin: 0;
-            padding: 0;
-
-            li {
-                list-style-type: none;
-            }
-        }
-
-        .k-timeline-flag {
-            display: inline-block;
-            text-align: center;
-            padding: $timeline-flag-padding-y $timeline-flag-padding-x;
-            border-radius: $border-radius;
-            line-height: $timeline-flag-line-height;
-            min-width: $timeline-flag-min-width;
-            max-width: $timeline-flag-max-width;
-            box-sizing: border-box;
-            position: relative;
-            z-index: 1;
-        }
-
-        .k-timeline-circle {
-            width: $timeline-circle-width;
-            height: $timeline-circle-height;
-            border-radius: 50%;
-            flex-shrink: 0;
-            position: relative;
-            z-index: 1;
-        }
-
-        &.k-timeline-dates-hidden {
-            .k-timeline-date {
-                display: none;
-            }
-        }
-
-        .k-event-collapse {
-            display: none;
-        }
-
-        &.k-timeline-collapsible {
-            .k-card-header {
-                cursor: pointer;
-            }
-
-            .k-event-collapse {
-                display: flex;
-            }
-        }
-    }
-
-    .k-timeline-card {
-        .k-card {
-            position: relative;
-            overflow: visible;
-
-            .k-card-header {
-                overflow: visible;
-                border-bottom: 0;
-            }
-
-            .k-card-header + .k-card-body {
-                padding-top: 0;
-            }
-
-            .k-card-body {
-                overflow-y: auto;
-
-                // Scrollbar styles for Mozilla
-                scrollbar-width: thin;
-
-                // Scrollbar styles for Chrome, Safari and Opera
-                &::-webkit-scrollbar {
-                    width: 5px;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    border-radius: $border-radius;
-                }
-            }
-        }
-
-        .k-timeline-card-callout {
-            &.k-callout-w,
-            &.k-callout-e {
-                top: $timeline-track-event-offset;
-            }
-        }
-    }
-
-    .k-timeline-vertical,
-    .k-timeline-horizontal {
-        padding: 0 $timeline-spacing-x;
-        margin: $timeline-spacing-y 0;
-        width: 100%;
-        position: relative;
-        box-sizing: border-box;
-        border: 0;
-    }
-
-    .k-timeline-vertical,
-    .k-timeline-horizontal .k-timeline-track-wrap {
-        &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            border-width: $timeline-track-border-width;
-            border-style: solid;
-        }
-    }
-
-    .k-timeline-vertical {
-        padding-left: $timeline-vertical-padding-with-dates-calc;
-
-        &.k-timeline-dates-hidden {
-            padding-left: $timeline-vertical-padding-calc;
-        }
-
-        &::after {
-            height: 100%;
-            width: $timeline-track-size;
-            transform: translateX(-50%);
-            border-radius: $border-radius-lg;
-        }
-
-        .k-timeline-flag-wrap {
-            display: flex;
-            align-items: center;
-
-            &:first-child {
-                padding-top: $timeline-spacing-y;
-            }
-        }
-
-        .k-timeline-flag {
-            transform: translateX(-50%);
-        }
-
-        .k-timeline-date-wrap {
-            position: absolute;
-            padding-right: $timeline-items-padding;
-            margin-top: $timeline-track-event-offset;
-            transform: translate(-100%, -50%);
-            text-align: right;
-        }
-
-        .k-timeline-event {
-            display: flex;
-            align-items: flex-start;
-            padding: $timeline-spacing-y 0;
-        }
-
-        .k-timeline-card {
-            padding-left: $timeline-items-padding;
-
-            .k-card {
-                margin-left: $timeline-items-padding;
-                min-height: $timeline-event-min-height-calc;
-                width: $timeline-event-width;
-                max-width: 100%;
-
-                .k-card-header {
-                    border-radius: $card-border-radius; // In vertical collapsed mode there shold be a bottom border radius
-                }
-
-                .k-card-title {
-                    display: flex;
-                    justify-content: space-between;
-
-                    .k-event-title {
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-                    }
-
-                }
-            }
-
-            .k-event-collapse {
-                margin: -$icon-spacing 0;
-                transform: rotate(90deg);
-                transition: transform .2s ease-in-out;
-            }
-
-            &.k-collapsed {
-                .k-card-body,
-                .k-card-actions {
-                    display: none;
-                }
-
-                .k-event-collapse {
-                    transform: rotate(0deg);
-                }
-            }
-
-        }
-
-        .k-timeline-circle {
-            margin-top: $timeline-track-event-offset;
-            transform: translate(-50%, -50%);
-            margin-right: - $timeline-circle-width / 2;
-        }
-
-        &.k-timeline-alternating {
-            padding-left: $timeline-spacing-x;
-
-            &::after {
-                left: 50%;
-            }
-
-            .k-timeline-flag-wrap {
-                justify-content: center;
-            }
-
-            .k-timeline-flag {
-                transform: translateX(0);
-            }
-
-            .k-timeline-event {
-                justify-content: space-between;
-
-                &.k-reverse {
-                    flex-direction: row-reverse;
-
-                    .k-timeline-date-wrap {
-                        text-align: left;
-                        padding-right: 0;
-                        padding-left: $timeline-items-padding;
-                    }
-
-                    .k-timeline-card {
-                        padding-left: 0;
-                        padding-right: $timeline-items-padding;
-
-                        .k-card {
-                            margin-right: $timeline-items-padding;
-                            margin-left: auto;
-                        }
-                    }
-                }
-            }
-
-            .k-timeline-card,
-            .k-timeline-date-wrap {
-                flex-basis: 50%;
-                min-width: 0;
-            }
-
-            .k-timeline-date-wrap {
-                position: static;
-                transform: translateY(-50%);
-            }
-
-            .k-timeline-circle {
-                transform: translateY(-50%);
-                margin-right: 0;
-            }
-        }
-    }
-
-    .k-timeline-horizontal {
-
-        .k-timeline-track-item {
-            flex: 1 0 20%; // 20% are default, this will be calculated when rendered
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            position: relative;
-            flex-direction: column;
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            &.k-timeline-flag-wrap:hover {
-                cursor: default;
-            }
-        }
-
-        .k-timeline-date-wrap {
-            margin-top: auto;
-            margin-bottom: $timeline-date-margin-bottom;
-        }
-
-        .k-timeline-card {
-            height: 100%;
-            box-sizing: border-box;
-        }
-
-        .k-card {
-            max-height: 100%;
-            box-sizing: border-box;
-        }
-
-        .k-timeline-events-list {
-            overflow-x: hidden;
-            padding-top: $timeline-track-margin-bottom;
-
-            .k-timeline-scrollable-wrap {
-                position: relative;
-                height: $timeline-event-height;
-
-                .k-timeline-event {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-
-        .k-timeline-track-wrap {
-            position: relative;
-            padding: ($timeline-track-arrow-height / 2) 0;
-
-            &::after {
-                top: auto;
-                bottom: $timeline-track-bottom-calc;
-                left: $timeline-track-start-calc;
-                right: $timeline-track-end-calc;
-                transform: translateY(-50%);
-                height: $timeline-track-size;
-            }
-
-            .k-timeline-track {
-                overflow: hidden;
-                margin: 0 $timeline-track-arrow-width;
-                position: relative;
-                z-index: 2;
-
-                .k-timeline-scrollable-wrap {
-                    transition: transform 1s ease-in-out;
-                }
-            }
-
-            .k-timeline-flag {
-                margin-bottom: $timeline-flag-margin-bottom-calc;
-                position: relative;
-                min-width: $timeline-horizontal-flag-min-width;
-
-                &::after {
-                    content: "";
-                    width: $timeline-flag-callout-width;
-                    height: $timeline-flag-callout-height;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 0;
-                    transform: translate(-50%, 50%) rotate(45deg);
-                }
-            }
-        }
-
-        .k-timeline-scrollable-wrap {
-            padding-bottom: $timeline-track-wrap-padding-bottom;
-            display: flex;
-            outline: 0;
-        }
-    }
-
-    .k-timeline-arrow {
-        width: $timeline-track-arrow-width;
-        height: $timeline-track-arrow-height;
-        border-radius: 50%;
-        position: absolute;
-        bottom: calc(#{$timeline-track-size} + #{$timeline-track-wrap-padding-bottom} + 2 * #{$timeline-track-border-width});
-        z-index: 3;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .k-timeline-arrow-left {
-        left: 0;
-    }
-
-    .k-timeline-arrow-right {
-        right: 0;
-    }
-
-    .k-timeline-mobile {
-        padding: 0 $timeline-mobile-spacing-x;
-        margin: $timeline-mobile-spacing-y 0;
-
-        .k-timeline-flag {
-            max-width: $timeline-mobile-flag-max-width;
-        }
-
-        &.k-timeline-horizontal {
-            .k-timeline-flag-wrap {
-                display: none;
-            }
-        }
-
-        &.k-timeline-vertical {
-            padding-left: $timeline-mobile-vertical-padding-with-dates-calc;
-
-            &.k-timeline-dates-hidden {
-                padding-left: $timeline-mobile-vertical-padding-calc;
-            }
-
-            &.k-timeline-alternating {
-                padding-left: $timeline-mobile-spacing-x;
-            }
-
-            .k-timeline-card {
-                width: 100%;
-
-
-                .k-card {
-                    width: auto;
-                }
-            }
-        }
-    }
-}