@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/checkbox/_layout.scss

@@ -1,233 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-checkbox--layout-base() {
-
-    // Checkbox
-    .k-checkbox {
-        margin: 0;
-        padding: 0;
-        line-height: initial;
-        border-width: $kendo-checkbox-border-width;
-        border-style: solid;
-        outline: 0;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        display: inline-block;
-        flex: none;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
-
-    // Checkbox indicator
-    .k-checkbox::before {
-        @if $kendo-checkbox-indicator-type == "image" {
-            content: "";
-            display: block;
-            width: 100%;
-            height: 100%;
-            mask-repeat: no-repeat;
-        }
-        @if $kendo-checkbox-indicator-type == "glyph" {
-            content: $kendo-checkbox-checked-glyph;
-            width: 1em;
-            height: 1em;
-            font-family: $kendo-checkbox-glyph-font-family;
-            line-height: 1;
-            transform: translate(-50%, -50%) scale(0);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-    }
-
-    // Checked state
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @if $kendo-checkbox-indicator-type == "image" {
-            &::before {
-                background-color: currentColor;
-                mask-image: $kendo-checkbox-checked-image;
-            }
-        }
-
-        @if $kendo-checkbox-indicator-type == "glyph" {
-            &::before {
-                transform: translate(-50%, -50%) scale(1);
-            }
-        }
-    }
-
-
-    // Indeterminate state
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate {
-        @if $kendo-checkbox-indicator-type == "image" {
-            &::before {
-                background-color: currentColor;
-                mask-image: $kendo-checkbox-indeterminate-image;
-            }
-        }
-
-        @if $kendo-checkbox-indicator-type == "glyph" {
-            &::before {
-                content: $kendo-checkbox-indeterminate-glyph;
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-    }
-
-
-    // Disabled state
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled {
-        @include disabled( $kendo-disabled-styling... );
-    }
-
-
-    // Checkbox wrap
-    .k-checkbox-wrap {
-        flex: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        gap: 0;
-        align-items: center;
-        align-self: flex-start;
-        vertical-align: middle;
-        position: relative;
-
-        &::before {
-            content: "\200b";
-            width: 0px;
-            overflow: hidden;
-            flex: none;
-            display: inline-block;
-            vertical-align: top;
-        }
-    }
-
-
-    // Checkbox label
-    .k-checkbox-label {
-        margin: 0;
-        padding: 0;
-        display: inline-flex;
-        align-items: flex-start;
-        gap: $kendo-checkbox-label-margin-x;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-
-        .k-ripple {
-            // Hide ripple temporarily
-            visibility: hidden !important; // stylelint-disable-line declaration-no-important
-        }
-    }
-    .k-checkbox + .k-label,
-    .k-checkbox-wrap + .k-label,
-    .k-checkbox + .k-checkbox-label,
-    .k-checkbox-wrap + .k-checkbox-label {
-        display: inline;
-        margin-inline-start: $kendo-checkbox-label-margin-x;
-    }
-
-
-    // Empty label
-    .k-checkbox-label:empty {
-        display: none !important; // stylelint-disable-line declaration-no-important
-    }
-    .k-checkbox-label.k-no-text {
-        min-width: 1px;
-    }
-
-
-    // Checkbox list
-    .k-checkbox-list {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 0;
-        list-style: none;
-    }
-    .k-checkbox-item,
-    .k-checkbox-list-item {
-        padding-block: $kendo-checkbox-list-item-padding-y;
-        padding-inline: $kendo-checkbox-list-item-padding-x;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-content: center;
-        gap: k-spacing(1);
-
-        .k-checkbox-label {
-            margin: 0;
-        }
-    }
-    .k-checkbox-list-horizontal,
-    .k-checkbox-list.k-list-horizontal {
-        display: flex;
-        flex-flow: row wrap;
-        gap: $kendo-checkbox-list-spacing;
-    }
-
-
-    // Ripple
-    .k-ripple-container {
-        .k-checkbox::after {
-            content: "";
-            display: block;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            border-radius: 100%;
-            z-index: -1;
-            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
-            transform: translate(-50%, -50%) scale(0);
-            transform-origin: center center;
-        }
-
-        .k-checkbox:focus,
-        .k-checkbox.k-focus {
-            box-shadow: none !important; // stylelint-disable-line declaration-no-important
-        }
-
-        .k-checkbox:disabled::after,
-        .k-checkbox.k-disabled::after {
-            display: none;
-        }
-    }
-
-
-    // Checkbox size
-    @each $size, $size-props in $kendo-checkbox-sizes {
-        $_size: map.get( $size-props, size );
-        $_glyph-size: map.get( $size-props, glyph-size );
-        $_ripple-size: map.get( $size-props, ripple-size );
-
-        .k-checkbox-#{$size} {
-            width: $_size;
-            height: $_size;
-
-            &::before {
-                font-size: $_glyph-size;
-            }
-        }
-        .k-ripple-container {
-            .k-checkbox-#{$size}::after {
-                width: $_ripple-size;
-                height: $_ripple-size;
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *;
 
 
 @mixin kendo-checkbox--layout() {

package/scss/checkbox/_theme.scss

@@ -1,107 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-checkbox--theme-base() {
-
-    // Checkbox
-    .k-checkbox {
-        @include fill(
-            $kendo-checkbox-text,
-            $kendo-checkbox-bg,
-            $kendo-checkbox-border
-        );
-    }
-
-
-    // Hover state
-    .k-checkbox:hover,
-    .k-checkbox.k-hover {
-        @include fill(
-            $kendo-checkbox-hover-text,
-            $kendo-checkbox-hover-bg,
-            $kendo-checkbox-hover-border
-        );
-    }
-
-
-    // Focus state
-    .k-checkbox:focus,
-    .k-checkbox.k-focus {
-        @include fill( $border: $kendo-checkbox-focus-border );
-        @include focus-indicator( $kendo-checkbox-focus-shadow );
-    }
-
-
-    // Indeterminate
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate {
-        @include fill(
-            $kendo-checkbox-indeterminate-text,
-            $kendo-checkbox-indeterminate-bg,
-            $kendo-checkbox-indeterminate-border
-        );
-    }
-
-
-    // Checked
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @include fill(
-            $kendo-checkbox-checked-text,
-            $kendo-checkbox-checked-bg,
-            $kendo-checkbox-checked-border
-        );
-    }
-    .k-checkbox:checked:focus,
-    .k-checkbox.k-checked.k-focus {
-        @include fill( $border: $kendo-checkbox-focus-checked-border );
-        @include focus-indicator( $kendo-checkbox-focus-checked-shadow );
-    }
-
-
-    // Disabled
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled {
-        @include fill(
-            $kendo-checkbox-disabled-text,
-            $kendo-checkbox-disabled-bg,
-            $kendo-checkbox-disabled-border
-        );
-    }
-    .k-checkbox:checked:disabled,
-    .k-checkbox:indeterminate:disabled,
-    .k-checkbox.k-checked.k-disabled,
-    .k-checkbox.k-indeterminate.k-disabled {
-        @include fill(
-            $kendo-checkbox-disabled-checked-text,
-            $kendo-checkbox-disabled-checked-bg,
-            $kendo-checkbox-disabled-checked-border
-        );
-    }
-
-
-    // Invalid
-    .k-checkbox.k-invalid {
-        @include fill( $border: $kendo-checkbox-invalid-border );
-    }
-    .k-checkbox.k-invalid + .k-checkbox-label {
-        @include fill( $color: $kendo-checkbox-invalid-text );
-    }
-
-
-    // Ripple
-    .k-checkbox-wrap .k-ripple-blob {
-        color: $kendo-checkbox-ripple-bg;
-        opacity: $kendo-checkbox-ripple-opacity;
-    }
-    .k-ripple-container {
-        .k-checkbox::after {
-            background: $kendo-checkbox-ripple-bg;
-            opacity: $kendo-checkbox-ripple-opacity;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/checkbox/_theme.scss" as *;
 
 
 @mixin kendo-checkbox--theme() {

package/scss/checkbox/_variables.scss

@@ -194,3 +194,54 @@ $kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .25 !default;
+
+@forward "@progress/kendo-theme-core/scss/components/checkbox/_variables.scss" with (
+    $kendo-checkbox-border-width: $kendo-checkbox-border-width,
+    $kendo-checkbox-sm-size: $kendo-checkbox-sm-size,
+    $kendo-checkbox-md-size: $kendo-checkbox-md-size,
+    $kendo-checkbox-lg-size: $kendo-checkbox-lg-size,
+    $kendo-checkbox-sm-glyph-size: $kendo-checkbox-sm-glyph-size,
+    $kendo-checkbox-md-glyph-size: $kendo-checkbox-md-glyph-size,
+    $kendo-checkbox-lg-glyph-size: $kendo-checkbox-lg-glyph-size,
+    $kendo-checkbox-sm-ripple-size: $kendo-checkbox-sm-ripple-size,
+    $kendo-checkbox-md-ripple-size: $kendo-checkbox-md-ripple-size,
+    $kendo-checkbox-lg-ripple-size: $kendo-checkbox-lg-ripple-size,
+    $kendo-checkbox-sizes: $kendo-checkbox-sizes,
+    $kendo-checkbox-bg: $kendo-checkbox-bg,
+    $kendo-checkbox-text: $kendo-checkbox-text,
+    $kendo-checkbox-border: $kendo-checkbox-border,
+    $kendo-checkbox-hover-bg: $kendo-checkbox-hover-bg,
+    $kendo-checkbox-hover-text: $kendo-checkbox-hover-text,
+    $kendo-checkbox-hover-border: $kendo-checkbox-hover-border,
+    $kendo-checkbox-checked-bg: $kendo-checkbox-checked-bg,
+    $kendo-checkbox-checked-text: $kendo-checkbox-checked-text,
+    $kendo-checkbox-checked-border: $kendo-checkbox-checked-border,
+    $kendo-checkbox-indeterminate-bg: $kendo-checkbox-indeterminate-bg,
+    $kendo-checkbox-indeterminate-text: $kendo-checkbox-indeterminate-text,
+    $kendo-checkbox-indeterminate-border: $kendo-checkbox-indeterminate-border,
+    $kendo-checkbox-focus-border: $kendo-checkbox-focus-border,
+    $kendo-checkbox-focus-shadow: $kendo-checkbox-focus-shadow,
+    $kendo-checkbox-focus-checked-border: $kendo-checkbox-focus-checked-border,
+    $kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow,
+    $kendo-checkbox-disabled-bg: $kendo-checkbox-disabled-bg,
+    $kendo-checkbox-disabled-text: $kendo-checkbox-disabled-text,
+    $kendo-checkbox-disabled-border: $kendo-checkbox-disabled-border,
+    $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg,
+    $kendo-checkbox-disabled-checked-text: $kendo-checkbox-disabled-checked-text,
+    $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-border,
+    $kendo-checkbox-invalid-bg: $kendo-checkbox-invalid-bg,
+    $kendo-checkbox-invalid-text: $kendo-checkbox-invalid-text,
+    $kendo-checkbox-invalid-border: $kendo-checkbox-invalid-border,
+    $kendo-checkbox-indicator-type: $kendo-checkbox-indicator-type,
+    $kendo-checkbox-glyph-font-family: $kendo-checkbox-glyph-font-family,
+    $kendo-checkbox-checked-glyph: $kendo-checkbox-checked-glyph,
+    $kendo-checkbox-indeterminate-glyph: $kendo-checkbox-indeterminate-glyph,
+    $kendo-checkbox-checked-image: $kendo-checkbox-checked-image,
+    $kendo-checkbox-indeterminate-image: $kendo-checkbox-indeterminate-image,
+    $kendo-checkbox-label-margin-x: $kendo-checkbox-label-margin-x,
+    $kendo-checkbox-list-spacing: $kendo-checkbox-list-spacing,
+    $kendo-checkbox-list-item-padding-x: $kendo-checkbox-list-item-padding-x,
+    $kendo-checkbox-list-item-padding-y: $kendo-checkbox-list-item-padding-y,
+    $kendo-checkbox-ripple-bg: $kendo-checkbox-ripple-bg,
+    $kendo-checkbox-ripple-opacity: $kendo-checkbox-ripple-opacity
+);

package/scss/chip/_layout.scss

@@ -1,167 +1,4 @@
-@use "./_variables.scss" as *;
-@use "sass:map";
-
-@mixin kendo-chip--layout-base() {
-
-    // Chip
-    .k-chip {
-        padding-block: $kendo-chip-padding-y;
-        padding-inline: $kendo-chip-padding-x;
-        border-width: $kendo-chip-border-width;
-        border-style: solid;
-        outline: 0;
-        font-family: var( --kendo-font-family, inherit );
-        font-size: $kendo-chip-font-size;
-        line-height: $kendo-chip-line-height;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: center;
-        gap: $kendo-chip-spacing;
-        position: relative;
-        overflow: hidden;
-        cursor: pointer;
-        user-select: none;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        .k-selected-icon-wrapper {
-            display: none !important; // stylelint-disable-line declaration-no-important
-        }
-    }
-
-
-    // Chip content
-    .k-chip-content {
-        padding-block: .5em;
-        padding-inline: 0;
-        margin-block: -.5em;
-        margin-inline: 0;
-        min-width: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        overflow: hidden;
-        flex: 1 1 auto;
-
-        // Adjustment for kendo-icon-wrapper
-        .k-icon-wrapper-host {
-            display: initial;
-        }
-    }
-    .k-chip-content:first-child {
-        margin-inline-start: $kendo-chip-spacing;
-    }
-    .k-chip-content:last-child {
-        margin-inline-end: $kendo-chip-spacing;
-    }
-
-
-    // Chip text
-    .k-chip-text,
-    .k-chip-label {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        flex: 1 1 auto;
-    }
-
-
-    // Chip avatar
-    .k-chip-avatar {
-        border-radius: 50%;
-        background-size: cover;
-        background-position: center;
-        flex: none;
-    }
-
-
-    // Chip icon
-    .k-chip-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: none;
-    }
-
-
-    // Actions
-    .k-chip-actions {
-        margin-block: -5em;
-        margin-inline: 0;
-        flex: none;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-self: center;
-    }
-    .k-chip-action {
-        flex: none;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-self: center;
-    }
-
-
-    // Legacy chip icons
-    .k-remove-icon {
-        font-size: inherit;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: none;
-    }
-
-
-    // Chip list
-    .k-chip-list {
-        min-width: 0px;
-        display: inline-flex;
-        flex-wrap: wrap;
-        align-items: center;
-        position: relative;
-    }
-
-    // Sizes
-    @each $size, $size-props in $kendo-chip-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_avatar-size: 1em;
-
-        .k-chip-#{$size} {
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            .k-chip-action {
-                padding: $_padding-y;
-            }
-        }
-
-        .k-chip-avatar {
-            width: $_avatar-size;
-            height: $_avatar-size;
-            flex-basis: $_avatar-size;
-        }
-
-    }
-
-    // Sizes
-    @each $name, $size in $kendo-chip-list-sizes {
-        .k-chip-list-#{$name} {
-            gap: $size;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/chip/_layout.scss" as *;
 
 
 @mixin kendo-chip--layout() {