@progress/kendo-theme-core 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/components/checkbox/_layout.scss

@@ -0,0 +1,237 @@
+@use "sass:map";
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../spacing/index.import.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;
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-checkbox--layout() {
+    @include kendo-checkbox--layout-base();
+}

package/scss/components/checkbox/_theme.scss

@@ -0,0 +1,109 @@
+@use "../../mixins/index.import.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;
+        }
+    }
+
+}
+
+
+@mixin kendo-checkbox--theme() {
+    @include kendo-checkbox--theme-base();
+}

package/scss/components/checkbox/_variables.scss

@@ -0,0 +1,81 @@
+// CheckBox
+
+$kendo-checkbox-border-width: null !default;
+
+$kendo-checkbox-sm-size: null !default;
+$kendo-checkbox-md-size: null !default;
+$kendo-checkbox-lg-size: null !default;
+
+$kendo-checkbox-sm-glyph-size: null !default;
+$kendo-checkbox-md-glyph-size: null !default;
+$kendo-checkbox-lg-glyph-size: null !default;
+
+$kendo-checkbox-sm-ripple-size: null !default;
+$kendo-checkbox-md-ripple-size: null !default;
+$kendo-checkbox-lg-ripple-size: null !default;
+
+// A map with the different CheckBox sizes.
+$kendo-checkbox-sizes: null !default;
+
+$kendo-checkbox-bg: null !default;
+$kendo-checkbox-text: null !default;
+$kendo-checkbox-border: null !default;
+
+$kendo-checkbox-hover-bg: null !default;
+$kendo-checkbox-hover-text: null !default;
+$kendo-checkbox-hover-border: null !default;
+
+$kendo-checkbox-checked-bg: null !default;
+$kendo-checkbox-checked-text: null !default;
+$kendo-checkbox-checked-border: null !default;
+
+$kendo-checkbox-indeterminate-bg: null !default;
+$kendo-checkbox-indeterminate-text: null !default;
+$kendo-checkbox-indeterminate-border: null !default;
+
+$kendo-checkbox-focus-border: null !default;
+$kendo-checkbox-focus-shadow: null !default;
+$kendo-checkbox-focus-checked-border: null !default;
+$kendo-checkbox-focus-checked-shadow: null !default;
+
+$kendo-checkbox-disabled-bg: null !default;
+$kendo-checkbox-disabled-text: null !default;
+$kendo-checkbox-disabled-border: null !default;
+
+$kendo-checkbox-disabled-checked-bg: null !default;
+$kendo-checkbox-disabled-checked-text: null !default;
+$kendo-checkbox-disabled-checked-border: null !default;
+
+$kendo-checkbox-invalid-bg: null !default;
+$kendo-checkbox-invalid-text: null !default;
+$kendo-checkbox-invalid-border: null !default;
+
+
+// CheckBox indicator
+
+$kendo-checkbox-indicator-type: null !default;
+
+$kendo-checkbox-glyph-font-family: null !default;
+$kendo-checkbox-checked-glyph: null !default;
+$kendo-checkbox-indeterminate-glyph: null !default;
+
+$kendo-checkbox-checked-image: null !default;
+$kendo-checkbox-indeterminate-image: null !default;
+
+
+// CheckBox label
+
+$kendo-checkbox-label-margin-x: null !default;
+
+
+// CheckBox list
+
+$kendo-checkbox-list-spacing: null !default;
+$kendo-checkbox-list-item-padding-x: null !default;
+$kendo-checkbox-list-item-padding-y: null !default;
+
+
+// CheckBox ripple
+
+$kendo-checkbox-ripple-bg: null !default;
+$kendo-checkbox-ripple-opacity: null !default;

package/scss/components/chip/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-chip--styles() {
+    @include import-once( "chip" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-chip--layout();
+        @include kendo-chip--theme();
+        @include kendo-utils--typography--text-overflow();
+    }
+}

package/scss/components/chip/_layout.scss

@@ -0,0 +1,169 @@
+@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;
+        }
+    }
+
+}
+
+
+@mixin kendo-chip--layout() {
+    @include kendo-chip--layout-base();
+}