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

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

@@ -1,173 +0,0 @@
-@include exports("chip/layout") {
-
-    .k-chip-list {
-        display: inline-flex;
-
-        > * {
-            margin-right: $chips-margin;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-
-    .k-selection-single {
-        .k-selected-icon-wrapper {
-            display: none;
-        }
-    }
-
-    .k-selection-multiple {
-        .k-selected-icon-wrapper {
-            width: 0;
-            height: $chip-selected-icon-size;
-            position: relative;
-            left: $chip-selected-icon-offset;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            visibility: hidden;
-            z-index: 1;
-        }
-
-        .k-selected-icon {
-            font-size: $chip-selected-icon-font-size;
-        }
-
-        .k-chip.k-state-selected .k-selected-icon-wrapper,
-        .k-chip.k-selected .k-selected-icon-wrapper {
-            width: $chip-selected-icon-size;
-            visibility: visible;
-        }
-
-        > .k-chip-has-icon {
-            .k-selected-icon-wrapper {
-                border-radius: 50%;
-                position: absolute;
-            }
-        }
-
-        :not(.k-chip-has-icon) {
-            .k-selected-icon-wrapper {
-                left: $chip-selected-icon-no-icon-offset;
-                opacity: 0;
-                transition: width .2s, opacity .2s;
-            }
-
-            &.k-state-selected .k-selected-icon-wrapper,
-            &.k-selected .k-selected-icon-wrapper {
-                opacity: 1;
-            }
-        }
-    }
-
-    .k-chip {
-        overflow: hidden;
-        padding: $chip-padding-y $chip-padding-x;
-        height: $chip-height;
-        border-radius: $chip-border-radius;
-        position: relative;
-        box-sizing: border-box;
-        border-width: 1px;
-        border-style: solid;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        font-size: $chip-font-size;
-        cursor: pointer;
-        user-select: none;
-
-        &:focus,
-        &.k-chip-focus {
-            outline: 0;
-        }
-    }
-
-    .k-chip-content {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding: 0 $chip-content-padding-x;
-        flex: 1 1 auto;
-    }
-
-    .k-chip-icon,
-    .k-remove-icon {
-        width: $chip-icons-size;
-        height: $chip-icons-size;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 1 0 auto;
-    }
-
-    .k-chip-icon {
-        margin-left: $chip-icon-margin;
-    }
-
-    .k-remove-icon {
-        margin-right: $chip-remove-icon-margin;
-        font-size: $chip-remove-icon-font-size;
-    }
-
-    .k-chip-avatar {
-        width: $chip-avatar-size;
-        height: $chip-avatar-size;
-        border-radius: 50%;
-        background-size: cover;
-        background-position: center;
-    }
-
-}
-
-
-@include exports("chip/layout/rtl") {
-
-    .k-chip-list {
-        &[dir="rtl"],
-        .k-rtl &,
-        &.k-rtl {
-            > * {
-                margin-right: 0;
-                margin-left: $chips-margin;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
-    }
-
-    .k-chip {
-        &[dir="rtl"],
-        .k-rtl &,
-        &.k-rtl {
-            .k-chip-icon {
-                margin-left: 0;
-                margin-right: $chip-icon-margin;
-            }
-
-            .k-remove-icon {
-                margin-right: 0;
-                margin-left: $chip-remove-icon-margin;
-            }
-
-            .k-selection-multiple & {
-                .k-selected-icon-wrapper {
-                    left: 0;
-                    right: $chip-selected-icon-offset;
-                }
-
-                &:not(.k-chip-has-icon) {
-                    .k-selected-icon-wrapper {
-                        left: 0;
-                        right: $chip-selected-icon-no-icon-offset;
-                    }
-                }
-            }
-        }
-    }
-
-}

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

@@ -1,411 +0,0 @@
-@include exports("chip/theme") {
-
-    .k-selection-multiple .k-chip-has-icon.k-state-selected .k-selected-icon-wrapper,
-    .k-selection-multiple .k-chip-has-icon.k-selected .k-selected-icon-wrapper {
-        @include fill(
-            $color: $chip-multiple-selected-icon-text,
-            $bg: $chip-multiple-selected-icon-bg
-        );
-    }
-
-    // Solid
-    .k-chip-solid {
-        @include fill(
-            $chip-solid-text,
-            $chip-solid-bg,
-            $chip-solid-border
-        );
-
-        &:hover,
-        &.k-state-hover,
-        &.k-hover {
-            @include fill(
-                $bg: $chip-solid-hover-bg,
-                $border: $chip-solid-hover-border
-            );
-        }
-
-        &:focus,
-        &.k-state-focus,
-        &.k-focus {
-            @include box-shadow( $chip-solid-focus-shadow );
-            @include fill( $bg: $chip-solid-focus-bg );
-        }
-
-        &.k-state-selected,
-        &.k-selected {
-            @include fill(
-                $bg: $chip-solid-selected-bg,
-                $border: $chip-solid-selected-border
-            );
-        }
-
-        &.k-chip-success {
-            @include fill(
-                $chip-solid-success-text,
-                $chip-solid-success-bg,
-                $chip-solid-success-border
-            );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-solid-success-hover-text,
-                    $chip-solid-success-hover-bg,
-                    $chip-solid-success-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-solid-success-focus-text,
-                    $chip-solid-success-focus-bg,
-                    $chip-solid-success-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-solid-success-selected-text,
-                    $chip-solid-success-selected-bg,
-                    $chip-solid-success-selected-border
-                );
-            }
-        }
-
-
-        &.k-chip-warning {
-            @include fill(
-                $chip-solid-warning-text,
-                $chip-solid-warning-bg,
-                $chip-solid-warning-border
-            );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-solid-warning-hover-text,
-                    $chip-solid-warning-hover-bg,
-                    $chip-solid-warning-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-solid-warning-focus-text,
-                    $chip-solid-warning-focus-bg,
-                    $chip-solid-warning-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-solid-warning-selected-text,
-                    $chip-solid-warning-selected-bg,
-                    $chip-solid-warning-selected-border
-                );
-            }
-        }
-
-        &.k-chip-error {
-            @include fill(
-                $chip-solid-error-text,
-                $chip-solid-error-bg,
-                $chip-solid-error-border
-            );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-solid-error-hover-text,
-                    $chip-solid-error-hover-bg,
-                    $chip-solid-error-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-solid-error-focus-text,
-                    $chip-solid-error-focus-bg,
-                    $chip-solid-error-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-solid-error-selected-text,
-                    $chip-solid-error-selected-bg,
-                    $chip-solid-error-selected-border
-                );
-            }
-        }
-
-        &.k-chip-info {
-            @include fill(
-                $chip-solid-info-text,
-                $chip-solid-info-bg,
-                $chip-solid-info-border
-            );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-solid-info-hover-text,
-                    $chip-solid-info-hover-bg,
-                    $chip-solid-info-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-solid-info-focus-text,
-                    $chip-solid-info-focus-bg,
-                    $chip-solid-info-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-solid-info-selected-text,
-                    $chip-solid-info-selected-bg,
-                    $chip-solid-info-selected-border
-                );
-            }
-        }
-    }
-
-    .k-chip-outline {
-        @include fill(
-            $chip-outline-text,
-            $chip-outline-bg,
-            $chip-outline-border
-        );
-
-        &:hover,
-        &.k-state-hover,
-        &.k-hover {
-            @include fill(
-                $chip-outline-hover-text,
-                $chip-outline-hover-bg,
-                $chip-outline-hover-border
-            );
-        }
-
-        &:focus,
-        &.k-state-focus,
-        &.k-focus {
-            @include box-shadow( $chip-outline-focus-shadow );
-            @include fill(
-                $chip-outline-focus-text,
-                $chip-outline-focus-bg,
-                $chip-outline-focus-border
-            );
-        }
-
-        &.k-state-selected,
-        &.k-selected {
-            @include fill(
-                $color: $chip-outline-selected-text,
-                $bg: $chip-outline-selected-bg
-            );
-        }
-
-        &.k-chip-success {
-            @include fill(
-                $chip-outline-success-text,
-                $chip-outline-success-bg,
-                $chip-outline-success-border
-            );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-success-hover-text,
-                    $chip-outline-success-hover-bg,
-                    $chip-outline-success-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-success-focus-text,
-                    $chip-outline-success-focus-bg,
-                    $chip-outline-success-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-success-selected-text,
-                    $chip-outline-success-selected-bg,
-                    $chip-outline-success-selected-border
-                );
-            }
-        }
-
-        &.k-chip-warning {
-            @include fill(
-                $chip-outline-warning-text,
-                $chip-outline-warning-bg,
-                $chip-outline-warning-border
-            );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-warning-hover-text,
-                    $chip-outline-warning-hover-bg,
-                    $chip-outline-warning-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-warning-focus-text,
-                    $chip-outline-warning-focus-bg,
-                    $chip-outline-warning-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-warning-selected-text,
-                    $chip-outline-warning-selected-bg,
-                    $chip-outline-warning-selected-border
-                );
-            }
-        }
-
-
-        &.k-chip-error {
-            @include fill(
-                $chip-outline-error-text,
-                $chip-outline-error-bg,
-                $chip-outline-error-border
-            );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-error-hover-text,
-                    $chip-outline-error-hover-bg,
-                    $chip-outline-error-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-error-focus-text,
-                    $chip-outline-error-focus-bg,
-                    $chip-outline-error-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-error-selected-text,
-                    $chip-outline-error-selected-bg,
-                    $chip-outline-error-selected-border
-                );
-            }
-        }
-
-
-        &.k-chip-info {
-            @include fill(
-                $chip-outline-info-text,
-                $chip-outline-info-bg,
-                $chip-outline-info-border
-            );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-info-hover-text,
-                    $chip-outline-info-hover-bg,
-                    $chip-outline-info-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-info-focus-text,
-                    $chip-outline-info-focus-bg,
-                    $chip-outline-info-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-info-selected-text,
-                    $chip-outline-info-selected-bg,
-                    $chip-outline-info-selected-border
-                );
-            }
-        }
-    }
-
-
-    // Chip colors
-    .k-chip-info {
-        &:focus,
-        &.k-state-focus,
-        &.k-focus {
-            @include box-shadow( $chip-info-focus-shadow );
-        }
-    }
-    .k-chip-success {
-        &:focus,
-        &.k-state-focus,
-        &.k-focus {
-            @include box-shadow( $chip-success-focus-shadow );
-        }
-    }
-    .k-chip-warning {
-        &:focus,
-        &.k-state-focus,
-        &.k-focus {
-            @include box-shadow( $chip-warning-focus-shadow );
-        }
-    }
-    .k-chip-error {
-        &:focus,
-        &.k-state-focus,
-        &.k-focus {
-            @include box-shadow( $chip-error-focus-shadow );
-        }
-    }
-
-}