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

package/scss/components/radio/_layout.scss

@@ -0,0 +1,233 @@
+@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-radio--layout-base() {
+
+    // Radio
+    .k-radio {
+        @include border-radius( $kendo-radio-radius );
+        margin: 0;
+        padding: 0;
+        line-height: initial;
+        border-width: $kendo-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;
+        flex: none;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+        -webkit-appearance: none;
+    }
+
+
+    // Radio indicator
+    .k-radio::before {
+        @if $kendo-radio-indicator-type == "glyph" {
+            content: $kendo-radio-checked-glyph;
+            width: 1em;
+            height: 1em;
+            font-family: $kendo-radio-glyph-font-family;
+            line-height: 1;
+            transform: scale(0) translate(-50%, -50%);
+            overflow: hidden;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+
+        @if $kendo-radio-indicator-type == "image" {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            mask-repeat: no-repeat;
+        }
+    }
+
+
+    // Checked state
+    .k-radio:checked,
+    .k-radio.k-checked {
+        @if $kendo-radio-indicator-type == "image" {
+            &::before {
+                background-color: currentColor;
+                mask-image: $kendo-radio-checked-image;
+            }
+        }
+
+        @if $kendo-radio-indicator-type == "glyph" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+    }
+
+
+    // Disabled state
+    .k-radio:disabled,
+    .k-radio.k-disabled {
+        @include disabled( $kendo-disabled-styling... );
+    }
+    .k-radio:disabled:checked,
+    .k-radio.k-disabled.k-checked {
+        @if $kendo-radio-indicator-type == "image" {
+            background-image: $kendo-radio-disabled-checked-image;
+        }
+    }
+
+
+    // Radio wrap
+    .k-radio-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+        align-self: start;
+        vertical-align: middle;
+        position: relative;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+
+    // Radio label
+    .k-radio-label {
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        align-items: flex-start;
+        gap: $kendo-radio-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-radio + .k-label,
+    .k-radio-wrap + .k-label,
+    .k-radio + .k-radio-label,
+    .k-radio-wrap + .k-radio-label {
+        display: inline;
+        margin-inline-start: $kendo-radio-label-margin-x;
+    }
+
+
+    // Empty label
+    .k-radio-label:empty {
+        display: none !important; // stylelint-disable-line declaration-no-important
+    }
+    .k-radio-label.k-no-text {
+        min-width: 1px;
+    }
+
+
+    // Radio list
+    .k-radio-list {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
+        list-style: none;
+    }
+    .k-radio-item,
+    .k-radio-list-item {
+        padding-block: $kendo-radio-list-item-padding-y;
+        padding-inline: $kendo-radio-list-item-padding-x;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: k-spacing(1);
+
+        .k-radio-label {
+            margin: 0;
+        }
+    }
+    .k-radio-list-horizontal,
+    .k-radio-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-radio-list-spacing;
+    }
+
+
+    // Ripple
+    .k-ripple-container {
+        .k-radio::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-radio:focus,
+        .k-radio.k-focus {
+            box-shadow: none !important; // stylelint-disable-line declaration-no-important
+        }
+
+        .k-radio:disabled::after,
+        .k-radio.k-disabled::after {
+            display: none;
+        }
+
+        .k-radio:disabled::after,
+        .k-radio.k-disabled::after {
+            display: none;
+        }
+    }
+
+
+    // Radio size
+    @each $size, $size-props in $kendo-radio-sizes {
+        $_size: map.get( $size-props, size );
+        $_glyph-size: map.get( $size-props, glyph-size );
+        $_ripple-size: map.get( $size-props, ripple-size );
+
+        .k-radio-#{$size} {
+            width: $_size;
+            height: $_size;
+
+            &::before {
+                font-size: $_glyph-size;
+            }
+        }
+        .k-ripple-container {
+            .k-radio-#{$size}::after {
+                width: $_ripple-size;
+                height: $_ripple-size;
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-radio--layout() {
+    @include kendo-radio--layout-base();
+}

package/scss/components/radio/_theme.scss

@@ -0,0 +1,96 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-radio--theme-base() {
+
+    // Radio
+    .k-radio {
+        @include fill(
+            $kendo-radio-text,
+            $kendo-radio-bg,
+            $kendo-radio-border
+        );
+    }
+
+
+    // Hover state
+    .k-radio:hover,
+    .k-radio.k-hover {
+        @include fill(
+            $kendo-radio-hover-text,
+            $kendo-radio-hover-bg,
+            $kendo-radio-hover-border
+        );
+    }
+
+
+    // Focus state
+    .k-radio:focus,
+    .k-radio.k-focus {
+        @include fill( $border: $kendo-radio-focus-border );
+        @include focus-indicator( $kendo-radio-focus-shadow );
+    }
+
+
+    // Invalid state
+    .k-radio.k-invalid,
+    .k-radio.ng-invalid.ng-touched,
+    .k-radio.ng-invalid.ng-dirty {
+        @include fill( $border: $kendo-radio-invalid-border );
+    }
+    .k-radio.k-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: $kendo-radio-invalid-text );
+    }
+
+
+    // Checked
+    .k-radio:checked,
+    .k-radio.k-checked {
+        @include fill(
+            $kendo-radio-checked-text,
+            $kendo-radio-checked-bg,
+            $kendo-radio-checked-border
+        );
+    }
+    .k-radio:checked:focus,
+    .k-radio.k-checked.k-focus {
+        @include fill( $border: $kendo-radio-focus-checked-border );
+        @include focus-indicator( $kendo-radio-focus-checked-shadow );
+    }
+
+
+    // Disabled
+    .k-radio:disabled,
+    .k-radio.k-disabled {
+        @include fill(
+            $kendo-radio-disabled-text,
+            $kendo-radio-disabled-bg,
+            $kendo-radio-disabled-border
+        );
+    }
+    .k-radio:checked:disabled,
+    .k-radio.k-checked.k-disabled {
+        @include fill(
+            $kendo-radio-disabled-checked-text,
+            $kendo-radio-disabled-checked-bg,
+            $kendo-radio-disabled-checked-border
+        );
+    }
+
+
+    // Ripple
+    .k-ripple-container {
+        .k-radio::after {
+            background: $kendo-radio-ripple-bg;
+            opacity: $kendo-radio-ripple-opacity;
+        }
+    }
+
+}
+
+
+@mixin kendo-radio--theme() {
+    @include kendo-radio--theme-base();
+}

package/scss/components/radio/_variables.scss

@@ -0,0 +1,77 @@
+// Radio button
+
+$kendo-radio-radius: null !default;
+$kendo-radio-border-width: null !default;
+
+$kendo-radio-sm-size: null !default;
+$kendo-radio-md-size: null !default;
+$kendo-radio-lg-size: null !default;
+
+$kendo-radio-sm-glyph-size: null !default;
+$kendo-radio-md-glyph-size: null !default;
+$kendo-radio-lg-glyph-size: null !default;
+
+$kendo-radio-sm-ripple-size: null !default;
+$kendo-radio-md-ripple-size: null !default;
+$kendo-radio-lg-ripple-size: null !default;
+
+$kendo-radio-sizes: null !default;
+
+$kendo-radio-bg: null !default;
+$kendo-radio-text: null !default;
+$kendo-radio-border: null !default;
+
+$kendo-radio-hover-bg: null !default;
+$kendo-radio-hover-text: null !default;
+$kendo-radio-hover-border: null !default;
+
+$kendo-radio-checked-bg: null !default;
+$kendo-radio-checked-text: null !default;
+$kendo-radio-checked-border: null !default;
+
+$kendo-radio-focus-border: null !default;
+$kendo-radio-focus-shadow: null !default;
+
+$kendo-radio-focus-checked-border: null !default;
+$kendo-radio-focus-checked-shadow: null !default;
+
+$kendo-radio-disabled-bg: null !default;
+$kendo-radio-disabled-text: null !default;
+$kendo-radio-disabled-border: null !default;
+
+$kendo-radio-disabled-checked-bg: null !default;
+$kendo-radio-disabled-checked-text: null !default;
+$kendo-radio-disabled-checked-border: null !default;
+
+$kendo-radio-invalid-bg: null !default;
+$kendo-radio-invalid-text: null !default;
+$kendo-radio-invalid-border: null !default;
+
+
+// Radio indicator
+
+$kendo-radio-indicator-type: null !default;
+
+$kendo-radio-glyph-font-family: null !default;
+$kendo-radio-checked-glyph: null !default;
+
+$kendo-radio-checked-image: null !default;
+$kendo-radio-disabled-checked-image: null !default;
+
+
+// Radio label
+
+$kendo-radio-label-margin-x: null !default;
+
+
+// Radio list
+
+$kendo-radio-list-spacing: null !default;
+$kendo-radio-list-item-padding-x: null !default;
+$kendo-radio-list-item-padding-y: null !default;
+
+
+// Radio ripple
+
+$kendo-radio-ripple-bg: null !default;
+$kendo-radio-ripple-opacity: null !default;

package/scss/components/rating/_index.scss

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

package/scss/components/rating/_layout.scss

@@ -0,0 +1,98 @@
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-rating--layout-base() {
+
+    .k-rating {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        box-sizing: border-box;
+        outline: 0;
+        background: none;
+        font-family: $kendo-rating-font-family;
+        font-size: $kendo-rating-font-size;
+        line-height: $kendo-rating-line-height;
+        display: inline-flex;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        &.k-readonly {
+            pointer-events: none;
+        }
+    }
+
+    .k-rating-container {
+        flex: 0 1 auto;
+        position: relative;
+        margin-block: 0;
+        margin-inline: $kendo-rating-container-margin-x;
+
+        .k-rating-item {
+            display: inline-flex;
+            position: relative;
+            padding-block: $kendo-rating-item-padding-y;
+            padding-inline: $kendo-rating-item-padding-x;
+            align-items: center;
+            vertical-align: middle;
+            margin: 0;
+            outline: 0;
+            overflow: hidden;
+            transition: color 200ms ease-out 0s;
+
+            * {
+                pointer-events: none;
+            }
+
+            .k-rating-precision-part,
+            .k-rating-precision-complement {
+                display: inherit;
+                position: absolute;
+                top: $kendo-rating-item-padding-y;
+                left: $kendo-rating-item-padding-x;
+                overflow: hidden;
+            }
+
+            .k-rating-precision-complement {
+                direction: rtl;
+            }
+
+            svg {
+                fill: currentColor;
+            }
+        }
+    }
+
+    .k-rating-label {
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        line-height: $kendo-rating-label-line-height;
+        margin-block: $kendo-rating-label-margin-y;
+        margin-inline: $kendo-rating-label-margin-x;
+    }
+
+    .k-rtl,
+    [dir="rtl"] {
+        .k-rating-precision-part {
+            left: auto;
+            right: $kendo-rating-item-padding-x;
+        }
+
+        .k-rating-item .k-rating-precision-complement {
+            direction: ltr;
+        }
+    }
+
+}
+
+
+@mixin kendo-rating--layout() {
+    @include kendo-rating--layout-base();
+}

package/scss/components/rating/_theme.scss

@@ -0,0 +1,48 @@
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-rating--theme-base() {
+
+    .k-rating {
+        color: $kendo-component-text;
+
+        &:focus,
+        &.k-focus {
+
+            .k-rating-item {
+                > .k-icon {
+                    filter: drop-shadow( $kendo-rating-icon-focus-shadow );
+                }
+
+                &.k-selected > .k-icon {
+                    filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow );
+                }
+            }
+        }
+    }
+
+    .k-rating-item {
+        color: $kendo-rating-icon-text;
+
+        &.k-selected {
+            color: $kendo-rating-icon-selected-text;
+
+            &:focus,
+            &.k-focus {
+                color: $kendo-rating-icon-focus-text;
+            }
+        }
+
+        &:hover,
+        &.k-hover {
+            color: $kendo-rating-icon-hover-text;
+            cursor: pointer;
+        }
+    }
+
+}
+
+
+@mixin kendo-rating--theme() {
+    @include kendo-rating--theme-base();
+}

package/scss/components/rating/_variables.scss

@@ -0,0 +1,24 @@
+// Rating
+
+$kendo-rating-font-family: null !default;
+$kendo-rating-font-size: null !default;
+$kendo-rating-line-height: null !default;
+
+$kendo-rating-container-margin-x: null !default;
+
+$kendo-rating-item-padding-x: null !default;
+$kendo-rating-item-padding-y: null !default;
+
+$kendo-rating-label-margin-x: null !default;
+$kendo-rating-label-margin-y: null !default;
+$kendo-rating-label-line-height: null !default;
+
+$kendo-rating-icon-size: null !default;
+
+$kendo-rating-icon-text: null !default;
+$kendo-rating-icon-selected-text: null !default;
+$kendo-rating-icon-hover-text: null !default;
+$kendo-rating-icon-focus-text: null !default;
+
+$kendo-rating-icon-focus-shadow: null !default;
+$kendo-rating-icon-focus-selected-shadow: null !default;

package/scss/components/responsivepanel/_index.scss

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

package/scss/components/responsivepanel/_layout.scss

@@ -0,0 +1,52 @@
+@mixin kendo-responsive-panel--layout-base() {
+
+    .k-rpanel {}
+
+    // Variants
+    .k-rpanel-left,
+    .k-rpanel-right {
+        position: fixed;
+        display: block;
+        overflow: auto;
+        min-width: 320px;
+        height: 100%;
+        top: 0;
+
+        & + * {
+            overflow: auto;
+        }
+
+        &.k-rpanel-expanded {
+            transform: translateX(0) translateZ(0);
+        }
+    }
+    .k-rpanel-left {
+        transform: translateX(-100%) translateZ(0);
+        left: 0;
+    }
+    .k-rpanel-right {
+        transform: translateX(100%) translateZ(0);
+        right: 0;
+    }
+
+    // Top
+    .k-rpanel-top {
+        position: static;
+        max-height: 0;
+    }
+    .k-rpanel-top.k-rpanel-expanded {
+        max-height: 568px;
+        overflow: visible !important; // stylelint-disable-line declaration-no-important
+    }
+
+    // Toggle button
+    .k-rpanel-toggle {
+        touch-action: manipulation;
+    }
+
+}
+
+
+@mixin kendo-responsive-panel--layout() {
+    @include kendo-responsive-panel--layout-base();
+}

package/scss/components/responsivepanel/_theme.scss

@@ -0,0 +1,10 @@
+@mixin kendo-responsive-panel--theme-base() {
+
+    .k-rpanel {}
+
+}
+
+
+@mixin kendo-responsive-panel--theme() {
+    @include kendo-responsive-panel--theme-base();
+}

package/scss/components/responsivepanel/_variables.scss

@@ -0,0 +1 @@
+// Responsive panel

package/scss/components/ripple/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-ripple--styles() {
+    @include import-once( "ripple" ) {
+        @include core-styles();
+        @include kendo-ripple--layout();
+        @include kendo-ripple--theme();
+    }
+}