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

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

@@ -1,248 +0,0 @@
-@include exports("progressbar/layout") {
-
-    // Base
-    .k-progressbar {
-        @include border-radius( $border-radius );
-        --kendo-progressbar-progress: 0;
-        border-width: $progressbar-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $progressbar-font-family;
-        font-size: $progressbar-font-size;
-        line-height: $progressbar-line-height;
-        display: inline-grid;
-        vertical-align: middle;
-        position: relative;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-
-        // Selection
-        > .k-state-selected {
-            border-width: 0;
-            border-style: solid;
-            display: flex;
-            overflow: hidden;
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-        }
-
-
-        // Chunks
-        > ul {
-            border-width: inherit;
-            border-style: inherit;
-            white-space: nowrap;
-            display: flex;
-            align-items: stretch;
-            flex: 1;
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-        }
-        .k-item {
-            display: block;
-            border-width: 0;
-            border-style: solid;
-            border-color: transparent;
-        }
-
-    }
-
-
-    // Status
-    .k-progress-status-wrap {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-        grid-column: 1 / -1;
-        grid-row: 1 / -1;
-
-        &.k-progress-start { justify-content: flex-start; }
-        &.k-progress-center { justify-content: center; }
-        &.k-progress-end { justify-content: flex-end; }
-    }
-    .k-progress-status {
-        padding: 0 ($spacer-x / 2);
-        padding-block-start: 0;
-        padding-block-end: 0;
-        padding-inline-start: ($spacer-x / 2);
-        padding-inline-end: ($spacer-x / 2);
-        min-width: 10px;
-        text-align: center;
-        display: inline-block;
-        white-space: nowrap;
-    }
-
-
-    // Horizontal
-    .k-progressbar-horizontal {
-        width: 27em;
-        height: $progressbar-height;
-        grid-template-columns: 1fr;
-        grid-template-rows: 100%;
-
-
-        .k-progress-status-wrap {
-            flex-direction: row;
-        }
-
-        > .k-state-selected {
-            width: 0;
-            width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
-            flex-direction: row;
-
-            > .k-progress-status-wrap {
-                width: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) );
-            }
-        }
-
-
-        // Chunks
-        > ul {
-            flex-direction: row;
-        }
-        .k-item {}
-        .k-item + .k-item {
-            border-left-width: 1px;
-            border-inline-start-width: 1px;
-            border-inline-end-width: 0;
-        }
-
-
-        // Horizontal reverse
-        &.k-progressbar-reverse {
-
-            > .k-state-selected {
-                flex-direction: row-reverse;
-                justify-self: flex-end;
-            }
-
-        }
-    }
-
-
-    // Vertical
-    .k-progressbar-vertical {
-        width: $progressbar-height;
-        height: 27em;
-        grid-template-columns: 100%;
-        grid-template-rows: 1fr;
-
-
-        .k-progress-status-wrap {
-            flex-direction: column-reverse;
-        }
-        .k-progress-status {
-            writing-mode: vertical-lr;
-        }
-
-        > .k-state-selected {
-            height: 0;
-            height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
-            flex-direction: column-reverse;
-            align-self: flex-end;
-            align-items: flex-end;
-
-            > .k-progress-status-wrap {
-                height: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
-            }
-        }
-
-
-        // Chunk
-        > ul {
-            flex-direction: column;
-        }
-        .k-item {}
-        .k-item + .k-item {
-            border-top-width: 1px;
-            border-block-start-width: 1px;
-            border-block-end-width: 0;
-        }
-
-
-        // Vertical reverse
-        &.k-progressbar-reverse {
-            flex-direction: column;
-
-            > .k-state-selected {
-                flex-direction: column;
-                align-self: flex-start;
-            }
-        }
-    }
-
-
-    // Indeterminate
-    .k-progressbar-indeterminate {
-        .k-progress-status-wrap,
-        .k-state-selected,
-        .k-item {
-            display: none;
-        }
-    }
-
-
-    // Blazor specific
-    .telerik-blazor.k-progressbar-horizontal {
-
-        > .k-state-selected,
-        > .k-state-selected > .k-progress-status-wrap {
-            transition: width .1s ease-in-out;
-        }
-    }
-
-}
-
-
-
-
-@include exports("progressbar/layout/rtl") {
-
-    .k-rtl .k-progressbar,
-    .k-progressbar[dir="rtl"] {
-        direction: rtl;
-    }
-
-}
-
-
-
-
-@include exports("progressbar/layout/ie11") {
-
-    .k-progressbar {
-        display: -ms-inline-grid;
-
-        > .k-progress-status-wrap,
-        > .k-state-selected {
-            -ms-grid-column: 1;
-            -ms-grid-row: 1;
-        }
-    }
-    .k-progressbar-horizontal {
-        -ms-grid-columns: 1fr;
-        -ms-grid-rows: $progressbar-height;
-
-        &.k-progressbar-reverse > .k-state-selected {
-            -ms-grid-column-align: end;
-        }
-    }
-    .k-progressbar-vertical {
-        -ms-grid-columns: $progressbar-height;
-        -ms-grid-rows: 1fr;
-
-        > .k-state-selected {
-            -ms-grid-row-align: end;
-        }
-
-        &.k-progressbar-reverse > .k-state-selected {
-            -ms-grid-row-align: start;
-        }
-    }
-
-}

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

@@ -1,27 +0,0 @@
-@include exports("progressbar/theme") {
-
-    @keyframes progressbar-indeterminate-animation {
-        from { background-position: 0 0; }
-        to { background-position: $progressbar-height 0; }
-    }
-
-    .k-progressbar {
-        @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
-
-        .k-state-selected {
-            @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
-        }
-
-        .k-item {
-            border-color: $progressbar-chunk-border;
-        }
-    }
-
-    .k-progressbar-indeterminate {
-        @include fill( $progressbar-indeterminate-text, $progressbar-indeterminate-bg, $progressbar-indeterminate-border );
-        @include striped-gradient( shade($progressbar-indeterminate-bg) );
-        background-size: $progressbar-height $progressbar-height;
-        animation: progressbar-indeterminate-animation $progressbar-animation-timing;
-    }
-
-}

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

@@ -1,24 +0,0 @@
-// Progressbar
-$progressbar-height: 22px !default;
-$progressbar-animation-timing: 1s linear infinite !default;
-$progressbar-border-width: 0px !default;
-$progressbar-font-family: $font-family !default;
-$progressbar-font-size: $font-size-sm !default;
-$progressbar-line-height: 1 !default;
-
-$progressbar-bg: try-shade( $component-bg, 1 ) !default;
-$progressbar-text: $component-text !default;
-$progressbar-border: $component-border !default;
-$progressbar-gradient: null !default;
-
-$progressbar-fill-bg: $primary !default;
-$progressbar-fill-text: contrast-wcag( $progressbar-fill-bg ) !default;
-$progressbar-fill-border: try-shade( $progressbar-fill-bg ) !default;
-$progressbar-fill-gradient: null !default;
-
-$progressbar-indeterminate-bg: $progressbar-bg !default;
-$progressbar-indeterminate-text: $progressbar-text !default;
-$progressbar-indeterminate-border: $progressbar-border !default;
-$progressbar-indeterminate-gradient: null !default;
-
-$progressbar-chunk-border: $body-bg !default;

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

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

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

@@ -1,241 +0,0 @@
-@include exports( "radio/layout" ) {
-
-    // Radio
-    .k-radio {
-        @include border-radius( $radio-radius );
-        margin: 0;
-        padding: 0;
-        width: $radio-size;
-        height: $radio-size;
-        line-height: initial;
-        border-width: $radio-border-width;
-        border-style: solid;
-        outline: 0;
-        box-sizing: border-box;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        display: inline-block;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
-    // Radio indicator
-    .k-radio::before {
-        @if $radio-icon-type == "glyph" {
-            content: $radio-checked-glyph;
-            width: $radio-glyph-size;
-            height: $radio-glyph-size;
-            font-size: $radio-glyph-size;
-            font-family: $radio-glyph-font-family;
-            line-height: 1;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-
-        @if $radio-icon-type == "marker" {
-            content: "";
-            width: $radio-marker-checked-width;
-            height: $radio-marker-checked-width;
-            border-radius: 50%;
-            background-color: currentColor;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-    }
-
-    // Checked state
-    .k-radio:checked,
-    .k-radio.k-checked {
-        @if $radio-icon-type == "image" {
-            background-image: $radio-checked-image;
-        }
-
-        @if $radio-icon-type == "glyph" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $radio-icon-type == "marker" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-    }
-
-    // Disabled state
-    .k-radio:disabled,
-    .k-radio.k-disabled,
-    .k-radio:disabled + .k-radio-label,
-    .k-radio.k-disabled + .k-radio-label {
-        @include disabled( $disabled-styling );
-    }
-
-    .k-radio + .k-radio-label {
-        display: inline;
-    }
-
-    // Radio label
-    .k-radio-label {
-        margin: 0;
-        padding: 0;
-        line-height: $radio-line-height;
-        display: inline-flex;
-        align-items: flex-start;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-
-        .k-label {
-            cursor: pointer;
-        }
-
-        // Hide empty label
-        &:empty {
-            display: none;
-        }
-
-        .k-ripple {
-            top: $radio-size / 2;
-            left: $radio-size / 2;
-            right: auto;
-            bottom: auto;
-            width: $radio-size * 5 / 2;
-            height: $radio-size * 5 / 2;
-            transform: translate(-50%, -50%);
-            border-radius: 50%;
-
-            // Hide ripple temporarily
-            visibility: hidden !important; // sass-lint:disable-line no-important
-        }
-
-        .k-ripple-blob {
-            // sass-lint:disable-block no-important
-            // use !important until ripple can apply these styles from the script
-            top: 50% !important;
-            left: 50% !important;
-            width: 200% !important;
-            height: 200% !important;
-        }
-    }
-
-    .k-radio + .k-radio-label,
-    .k-radio-label + .k-radio,
-    .k-label + .k-radio {
-        margin-left: $radio-label-margin-x;
-    }
-    .k-radio-label > .k-radio {
-        margin-right: $radio-label-margin-x;
-        flex-shrink: 0;
-    }
-    kendo-label.k-radio-label > .k-label {
-        display: inline;
-    }
-
-    // Radio list
-    .k-radio-list {
-        margin: $radio-list-margin;
-        padding: $radio-list-padding;
-        list-style: none;
-
-        .k-radio-item {
-            padding: $radio-list-item-padding-y $radio-list-item-padding-x;
-        }
-    }
-
-    .k-list-horizontal {
-        .k-radio-item {
-            display: inline-block;
-            margin: 0 $radio-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        .k-radio + .k-radio-label,
-        .k-radio-label + .k-radio,
-        .k-label + .k-radio {
-            margin-left: 0;
-            margin-right: $radio-label-margin-x;
-        }
-        .k-radio-label > .k-radio {
-            margin-right: 0;
-            margin-left: $radio-label-margin-x;
-        }
-        kendo-label.k-radio-label > .k-radio:last-child {
-            margin-left: 0;
-        }
-        kendo-label.k-radio-label > .k-label:first-child {
-            margin-right: 0;
-            margin-left: $radio-label-margin-x;
-        }
-
-        .k-list-horizontal {
-            .k-radio-item {
-                margin-right: 0;
-                margin-left: $radio-list-horizontal-item-margin-x;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
-    }
-
-    .k-ripple-container {
-        .k-radio::after {
-            content: "";
-            display: block;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: $radio-ripple-size;
-            height: $radio-ripple-size;
-            margin-left: $radio-ripple-margin;
-            margin-top: $radio-ripple-margin;
-            border-radius: 100%;
-            z-index: 1;
-            transform: scale(0);
-        }
-
-        .k-radio:disabled::after,
-        .k-radio.k-disabled::after {
-            display: none;
-        }
-    }
-}
-
-
-
-
-@include exports( "radio/layout/edge" ) {
-
-    .k-radio::-ms-check {
-        border-width: 0;
-        border-color: inherit;
-        color: inherit;
-        background-color: inherit;
-    }
-
-    // IE 11 hack
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-        .k-radio::-ms-check {
-            border-width: 1px;
-        }
-    }
-
-}

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

@@ -1,90 +0,0 @@
-@include exports("radio/theme") {
-
-    // Radio
-    .k-radio {
-        @include fill(
-            $radio-text,
-            $radio-bg,
-            $radio-border
-        );
-    }
-
-
-    // Hover state
-    .k-radio:hover,
-    .k-radio.k-state-hover {
-        @include fill(
-            $radio-hovered-text,
-            $radio-hovered-bg,
-            $radio-hovered-border
-        );
-    }
-
-
-    // Focus state
-    .k-radio:focus,
-    .k-radio.k-state-focus {
-        @include fill( $border: $radio-focused-border );
-        @include box-shadow( $radio-focused-shadow );
-    }
-
-
-    // Invalid state
-    .k-radio.k-invalid,
-    .k-radio.k-state-invalid,
-    .k-radio.ng-invalid.ng-touched,
-    .k-radio.ng-invalid.ng-dirty {
-        @include fill( $border: $radio-invalid-border );
-    }
-    .k-radio.k-invalid + .k-radio-label,
-    .k-radio.k-state-invalid + .k-radio-label,
-    .k-radio.ng-invalid.ng-touched + .k-radio-label,
-    .k-radio.ng-invalid.ng-dirty + .k-radio-label {
-        @include fill( $color: $radio-invalid-text );
-    }
-
-
-    // Checked
-    .k-radio:checked,
-    .k-radio.k-checked {
-        @include fill(
-            $radio-checked-text,
-            $radio-checked-bg,
-            $radio-checked-border
-        );
-    }
-
-    .k-radio:checked:focus,
-    .k-radio.k-checked.k-state-focus {
-        @include fill( $border: $radio-focused-checked-border );
-        @include box-shadow( $radio-focused-checked-shadow );
-    }
-
-
-    // Disabled
-    .k-radio:disabled,
-    .k-radio.k-disabled {
-        @include fill(
-            $radio-disabled-text,
-            $radio-disabled-bg,
-            $radio-disabled-border
-        );
-    }
-    .k-radio:checked:disabled,
-    .k-radio.k-checked.k-disabled {
-        @include fill(
-            $radio-disabled-checked-text,
-            $radio-disabled-checked-bg,
-            $radio-disabled-checked-border
-        );
-    }
-
-    // Ripple
-    .k-ripple-container {
-        .k-radio::after {
-            background: $checkbox-checked-bg;
-            opacity: $checkbox-ripple-opacity;
-        }
-    }
-
-}

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

@@ -1,69 +0,0 @@
-// Radio button
-$radio-size: map-get( $spacing, 4 ) !default;
-$radio-radius: 50% !default;
-$radio-border-width: 1px !default;
-$radio-line-height: calc(#{$radio-size} + #{$radio-border-width}) !default;
-
-$radio-bg: $checkbox-bg !default;
-$radio-text: $checkbox-text !default;
-$radio-border: $checkbox-border !default;
-
-$radio-hovered-bg: $checkbox-hovered-bg !default;
-$radio-hovered-text: $checkbox-hovered-text !default;
-$radio-hovered-border: $checkbox-hovered-border !default;
-
-$radio-checked-bg: $checkbox-checked-bg !default;
-$radio-checked-text: $checkbox-checked-text !default;
-$radio-checked-border: $checkbox-checked-border !default;
-
-$radio-indeterminate-bg: $radio-checked-bg !default;
-$radio-indeterminate-text: $radio-checked-text !default;
-$radio-indeterminate-border: $radio-checked-border !default;
-
-$radio-focused-border: $checkbox-hovered-border !default;
-$radio-focused-shadow: $checkbox-focused-shadow !default;
-$radio-focused-checked-border: $checkbox-checked-border !default;
-$radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
-
-$radio-disabled-bg: null !default;
-$radio-disabled-text: null !default;
-$radio-disabled-border: null !default;
-
-$radio-disabled-checked-bg: null !default;
-$radio-disabled-checked-text: null !default;
-$radio-disabled-checked-border: null !default;
-
-$radio-invalid-bg: null !default;
-$radio-invalid-text: $invalid-text !default;
-$radio-invalid-border: $invalid-border !default;
-
-
-// Radio indicator
-$radio-icon-type: marker !default;
-
-$radio-glyph-font-family: "WebComponentsIcons", monospace !default;
-$radio-glyph-size: 12px !default;
-$radio-checked-glyph: "\e308" !default;
-
-$radio-checked-image: null !default;
-
-$radio-marker-checked-width: ( $radio-size / 2 ) !default;
-$radio-marker-checked-height: ( $radio-size / 2 ) !default;
-
-
-// Radio label
-$radio-label-margin-x: map-get( $spacing, 1 ) !default;
-
-
-// Radio list
-$radio-list-margin: 0px !default;
-$radio-list-padding: 0px !default;
-$radio-list-item-padding-x: 0px !default;
-$radio-list-item-padding-y: $list-item-padding-y !default;
-$radio-list-horizontal-item-margin-x: 32px !default;
-
-
-// Radio ripple
-$radio-ripple-size: $radio-size * 3 !default;
-$radio-ripple-margin: calc(-1 * (#{$radio-size} + 2 * #{$radio-border-width})) !default;
-$radio-ripple-opacity: .3 !default;