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

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

@@ -1,134 +0,0 @@
-// Chart
-/// The first base series color and its light and dark shades.
-/// @group charts
-$series-a: #ff6358 !default;
-$series-a-dark: mix(black, $series-a, 25%) !default;
-$series-a-darker: mix(black, $series-a, 50%) !default;
-$series-a-light: mix(white, $series-a, 25%) !default;
-$series-a-lighter: mix(white, $series-a, 50%) !default;
-
-/// The second base series color and its light and dark shades.
-/// @group charts
-$series-b: #ffd246 !default;
-$series-b-dark: mix(black, $series-b, 25%) !default;
-$series-b-darker: mix(black, $series-b, 50%) !default;
-$series-b-light: mix(white, $series-b, 25%) !default;
-$series-b-lighter: mix(white, $series-b, 50%) !default;
-
-/// The third base series color and its light and dark shades.
-/// @group charts
-$series-c: #78d237 !default;
-$series-c-dark: mix(black, $series-c, 25%) !default;
-$series-c-darker: mix(black, $series-c, 50%) !default;
-$series-c-light: mix(white, $series-c, 25%) !default;
-$series-c-lighter: mix(white, $series-c, 50%) !default;
-
-/// The fourth base series color and its light and dark shades.
-/// @group charts
-$series-d: #28b4c8 !default;
-$series-d-dark: mix(black, $series-d, 25%) !default;
-$series-d-darker: mix(black, $series-d, 50%) !default;
-$series-d-light: mix(white, $series-d, 25%) !default;
-$series-d-lighter: mix(white, $series-d, 50%) !default;
-
-/// The fifth base series color and its light and dark shades.
-/// @group charts
-$series-e: #2d73f5 !default;
-$series-e-dark: mix(black, $series-e, 25%) !default;
-$series-e-darker: mix(black, $series-e, 50%) !default;
-$series-e-light: mix(white, $series-e, 25%) !default;
-$series-e-lighter: mix(white, $series-e, 50%) !default;
-
-/// The sixth base series color and its light and dark shades.
-/// @group charts
-$series-f: #aa46be !default;
-$series-f-dark: mix(black, $series-f, 25%) !default;
-$series-f-darker: mix(black, $series-f, 50%) !default;
-$series-f-light: mix(white, $series-f, 25%) !default;
-$series-f-lighter: mix(white, $series-f, 50%) !default;
-
-/// The series colors in order:
-/// base, light, dark, lighter, darker
-/// @group charts
-$series-1: $series-a !default;
-$series-2: $series-b !default;
-$series-3: $series-c !default;
-$series-4: $series-d !default;
-$series-5: $series-e !default;
-$series-6: $series-f !default;
-$series-7: $series-a-light !default;
-$series-8: $series-b-light !default;
-$series-9: $series-c-light !default;
-$series-10: $series-d-light !default;
-$series-11: $series-e-light !default;
-$series-12: $series-f-light !default;
-$series-13: $series-a-dark !default;
-$series-14: $series-b-dark !default;
-$series-15: $series-c-dark !default;
-$series-16: $series-d-dark !default;
-$series-17: $series-e-dark !default;
-$series-18: $series-f-dark !default;
-$series-19: $series-a-lighter !default;
-$series-20: $series-b-lighter !default;
-$series-21: $series-c-lighter !default;
-$series-22: $series-d-lighter !default;
-$series-23: $series-e-lighter !default;
-$series-24: $series-f-lighter !default;
-$series-25: $series-a-darker !default;
-$series-26: $series-b-darker !default;
-$series-27: $series-c-darker !default;
-$series-28: $series-d-darker !default;
-$series-29: $series-e-darker !default;
-$series-30: $series-f-darker !default;
-
-$chart-border-width: 0px !default;
-$chart-font-family: $font-family !default;
-$chart-font-size: $font-size !default;
-$chart-line-height: $line-height !default;
-$chart-font-size-sm: 11px !default;
-$chart-font-size-md: 12px !default;
-$chart-font-size-lg: 16px !default;
-$chart-tooltip-font-size: ($font-size * .929) !default;
-$chart-label-font-size: .857em !default;
-$chart-title-font-size: 1.143em !default;
-$chart-pane-title-font-size: $chart-label-font-size !default;
-$chart-pane-title-font-weight: $font-weight-normal !default;
-
-$chart-inactive: rgba( $body-text, .5 ) !default;
-
-/// The color of the Chart grid lines (major).
-/// @group charts
-$chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
-
-/// The color of the Chart grid lines (minor).
-/// @group charts
-$chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
-
-$chart-area-opacity: .6 !default;
-$chart-area-inactive-opacity: .1 !default;
-$chart-line-inactive-opacity: .3 !default;
-
-$chart-bg: $component-bg !default;
-$chart-text: $component-text !default;
-$chart-border: $component-border !default;
-
-$chart-crosshair-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
-$chart-crosshair-shared-tooltip-color: $chart-text !default;
-$chart-crosshair-shared-tooltip-background: try-shade( $chart-bg, 1 ) !default;
-$chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $white, $black ), .08) !default;
-
-$chart-notes-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
-$chart-notes-border: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
-$chart-notes-lines: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
-
-$error-bars-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
-
-$selection-handle-size: 22px !default;
-$selection-border-color: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
-$selection-shadow: inset 0 1px 7px rgba( if( $dark-theme, $white, $black ), .15) !default;
-
-
-// TreeMap
-$treemap-font-family: $font-family !default;
-$treemap-font-size: $font-size !default;
-$treemap-line-height: $line-height !default;

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

@@ -1,16 +0,0 @@
-@import "../core/_index.scss";
-
-
-// Dependencies
-@import "../common/_index.scss";
-@import "../action-buttons/_index.scss";
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
-@import "../popup/_index.scss";
-
-
-// Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";

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

@@ -1,528 +0,0 @@
-@include exports("datetime/layout") {
-
-    // Dateinput
-    .k-dateinput {
-        width: $input-default-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-dateinput-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: default;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            padding: 0;
-            width: if( $use-picker-select-width, $spinner-width, null );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-        .k-link {
-            padding: 0 $picker-select-padding-x;
-            min-width: $icon-size;
-            flex: 1 1 auto;
-            display: block;
-            overflow: hidden;
-            position: relative;
-
-            .k-icon {
-                position: absolute;
-                right: 50%;
-                transform: translateX(50%);
-            }
-        }
-        .k-link-increase .k-icon {
-            bottom: -$spinner-icon-offset;
-        }
-        .k-link-decrease .k-icon {
-            top: -$spinner-icon-offset;
-        }
-
-
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            right: $padding-x;
-            top: 50%;
-            transform: translateY(-50%);
-            overflow: visible;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-dateinput-wrap .k-i-warning {
-                left: $padding-x;
-                right: auto;
-            }
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-
-
-        // Nested dateinput
-        .k-picker-wrap & {
-            margin: 0 !important; // sass-lint:disable-line no-important
-            width: 100%;
-            flex: 1 1 auto;
-
-            .k-dateinput-wrap {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0;
-                box-shadow: none !important; // sass-lint:disable-line no-important
-            }
-
-            [dir="rtl"] &,
-            .k-rtl & {
-                .k-dateinput-wrap {
-                    @include border-right-radius-only( $input-border-radius );
-                }
-            }
-
-        }
-    }
-
-
-    // Datepicker / timepicker
-    .k-datepicker,
-    .k-timepicker {
-        width: $input-default-width;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        white-space: nowrap;
-        background: none;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Wrapper
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $input-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $picker-select-calc-size, null );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-
-
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
-            transform: translateY(-50%);
-            overflow: visible;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-
-            .k-i-warning {
-                right: auto;
-                left: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
-            }
-        }
-    }
-
-
-    // Datetimepicker
-    .k-datetimepicker {
-        width: $input-default-width;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        background: none;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Wrappers
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-        .k-link {
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $button-inner-calc-size, null );
-            height: 100%;
-            border-width: 0;
-            border-style: solid;
-            border-color: inherit;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-        }
-
-
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
-            transform: translateY(-50%);
-            overflow: visible;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-
-            .k-i-warning {
-                right: auto;
-                left: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
-            }
-        }
-    }
-
-    .k-datetime-container {
-
-        .k-datetime-wrap {
-            width: $datetime-width;
-            overflow: hidden;
-        }
-
-        .k-datetime-buttongroup {
-            padding: $button-padding-x;
-        }
-
-        .k-datetime-selector {
-            display: flex;
-            transition: transform .2s;
-        }
-
-        .k-datetime-calendar-wrap,
-        .k-datetime-time-wrap {
-            text-align: center;
-            flex: 0 0 $datetime-width;
-        }
-
-        .k-timeselector {
-            outline: none;
-        }
-
-        .k-time-list-container {
-            justify-content: center;
-        }
-
-        .k-time-tab {
-
-            .k-datetime-selector {
-                transform: translateX(-100%);
-            }
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-time-tab {
-
-                .k-datetime-selector {
-                    transform: translateX(100%);
-                }
-            }
-        }
-    }
-
-    // Infinite timepicker
-    .k-timeselector {}
-
-
-    // Header
-    .k-time-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 2 * $padding-y $padding-x * 2;
-        line-height: $timepicker-header-height;
-
-        .k-title {
-            font-weight: bold;
-        }
-
-        .k-time-now {
-            border-width: 0;
-            line-height: inherit;
-            cursor: pointer;
-        }
-    }
-
-    // Content
-    .k-time-list-wrapper {
-        display: inline-block;
-        overflow: hidden;
-        box-sizing: content-box;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: relative;
-        padding: $time-list-padding 0;
-        text-align: center;
-        min-width: $time-list-width;
-        height: $time-list-height;
-        flex: 1 1 auto;
-
-        .k-title {
-            display: block;
-            text-align: center;
-            font-size: $font-size-xs;
-            position: absolute;
-            text-transform: capitalize;
-            font-weight: bold;
-            min-width: 100%;
-            height: 1.5em;
-            line-height: 1.5em;
-            margin-top: -$time-list-padding;
-            z-index: 12;
-        }
-
-        &.k-state-focused {
-            &::before,
-            &::after {
-                display: block;
-                content: " ";
-                position: absolute;
-                width: 100%;
-                left: 0;
-                pointer-events: none;
-                height: calc(50% - 1em);
-                box-sizing: border-box;
-                border-width: 0;
-                border-style: solid;
-            }
-
-            &::before {
-                top: 0;
-            }
-
-            &::after {
-                bottom: 0;
-            }
-        }
-    }
-
-    .k-time-container {
-        position: absolute;
-        display: block;
-        overflow-x: hidden;
-        overflow-y: scroll;
-        line-height: $line-height;
-        left: 0;
-        right: 0;
-        top: $time-list-padding;
-        bottom: $time-list-padding;
-
-        @include hide-scrollbar("right");
-
-        > ul {
-            height: auto;
-            width: $time-list-width;
-            margin: auto;
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"]  {
-            @include hide-scrollbar("left");
-        }
-    }
-
-    .k-time-list-container {
-        display: flex;
-        position: relative;
-    }
-
-    .k-time-list {
-        position: absolute;
-        display: flex;
-        z-index: 10;
-        outline: 0;
-        bottom: 0;
-        right: 0;
-        left: 0;
-        top: 0;
-
-        &::before,
-        &::after {
-            display: block;
-            position: absolute;
-            content: " ";
-            height: 0;
-            line-height: 0;
-            z-index: 1;
-            width: 200%;
-            left: -50%;
-        }
-
-        &::before { top: 0; }
-        &::after { bottom: 0;}
-    }
-
-    .k-time-list .k-item {
-        padding: $time-list-item-padding-y $time-list-item-padding-x;
-        min-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
-        line-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
-    }
-
-    .k-time-highlight {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        transform: translateY(-50%);
-        width: 100%;
-        height: $button-inner-calc-size;
-        z-index: 1;
-        border-width: $time-highlight-size 0;
-        border-style: solid;
-        border-radius: .1px; // workaround for https://bugs.webkit.org/show_bug.cgi?id=175117
-    }
-
-    .k-time-container .k-scrollable-placeholder {
-        position: absolute;
-        width: 1px;
-        top: 0;
-        right: 0;
-    }
-
-    .k-time-separator {
-        width: 0;
-        height: 100%;
-        display: inline-flex;
-        align-self: center;
-        justify-content: center;
-        z-index: 11;
-    }
-}