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

package/scss/components/calendar/_theme.scss

@@ -0,0 +1,218 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-calendar--theme-base() {
+
+    .k-calendar {
+        @include fill(
+            $kendo-calendar-text,
+            $kendo-calendar-bg,
+            $kendo-calendar-border
+        );
+
+
+        // TODO: do we even use this?
+        // Header / footer
+        .k-header {
+            @include fill(
+                $kendo-calendar-header-text,
+                $kendo-calendar-header-bg,
+                inherit,
+                $kendo-calendar-header-gradient
+            );
+            @include box-shadow( $kendo-calendar-header-shadow );
+        }
+
+
+        // Header cells
+        .k-calendar-th,
+        .k-calendar-caption,
+        .k-meta-header,
+        .k-month-header {
+            color: $kendo-calendar-header-cell-text;
+        }
+
+
+        // Special days
+        .k-calendar-view .k-today {
+            @if $kendo-calendar-today-style == box {
+                .k-calendar-cell-inner {
+                    box-shadow: inset 0 0 0 1px $kendo-calendar-today-color;
+                }
+                &.k-focus .k-calendar-cell-inner {
+                    @include focus-indicator( $indicator: ( inset 0 0 0 1px $kendo-calendar-today-color, $kendo-calendar-cell-focus-shadow ), $inset: true );
+                }
+            } @else if $kendo-calendar-today-style == color {
+                color: $kendo-calendar-today-color;
+            }
+        }
+        .k-other-month {
+            @include fill(
+                $kendo-calendar-other-month-text,
+                $kendo-calendar-other-month-bg
+            );
+        }
+        .k-weekend {
+            @include fill(
+                $kendo-calendar-weekend-text,
+                $kendo-calendar-weekend-bg
+            );
+        }
+        .k-alt {
+            // remove default k-alt background color
+            background-color: transparent;
+            @include fill(
+                $kendo-calendar-week-number-text,
+                $kendo-calendar-week-number-bg
+            );
+        }
+
+
+        // Interactive states
+        .k-calendar-td:hover .k-calendar-cell-inner,
+        .k-calendar-td.k-hover .k-calendar-cell-inner {
+            @include fill(
+                $kendo-calendar-cell-hover-text,
+                $kendo-calendar-cell-hover-bg,
+                $kendo-calendar-cell-hover-border,
+                $kendo-calendar-cell-hover-gradient
+            );
+        }
+        .k-calendar-td.k-selected .k-calendar-cell-inner {
+            @include fill(
+                $kendo-calendar-cell-selected-text,
+                $kendo-calendar-cell-selected-bg,
+                $kendo-calendar-cell-selected-border,
+                $kendo-calendar-cell-selected-gradient
+            );
+        }
+        .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
+        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
+            @include fill(
+                $kendo-calendar-cell-selected-hover-text,
+                $kendo-calendar-cell-selected-hover-bg,
+                $kendo-calendar-cell-selected-hover-border,
+                $kendo-calendar-cell-selected-hover-gradient
+            );
+        }
+        .k-calendar-td:focus .k-calendar-cell-inner,
+        .k-calendar-td.k-focus .k-calendar-cell-inner {
+            @include focus-indicator( $kendo-calendar-cell-focus-shadow, true );
+        }
+        .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
+        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
+            @include focus-indicator( $kendo-calendar-cell-selected-focus-shadow, true );
+        }
+
+
+        // Calendar navigation
+        .k-calendar-navigation {
+            @include fill(
+                $kendo-calendar-navigation-text,
+                $kendo-calendar-navigation-bg
+            );
+            box-shadow: inset -1px 0 $kendo-calendar-navigation-border;
+
+            li:hover,
+            li.k-hover {
+                color: $kendo-calendar-navigation-hover-text;
+            }
+        }
+        .k-calendar-navigation-highlight {
+            @include fill(
+                $kendo-calendar-text,
+                $kendo-calendar-bg,
+                $kendo-calendar-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.k-invalid:hover,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            border-color: $kendo-invalid-border;
+        }
+    }
+
+    .k-rtl .k-calendar,
+    .k-calendar[dir="rtl"] {
+        .k-calendar-navigation {
+            box-shadow: inset 1px 0 $kendo-calendar-navigation-border;
+        }
+    }
+
+    // Scheduler integration
+    .k-scheduler .k-calendar .k-other-month {
+        @include fill(
+            $kendo-calendar-other-month-text,
+            transparent
+        );
+    }
+
+
+
+
+    // Multiview calendar
+    .k-calendar { // stylelint-disable-line
+
+        $kendo-calendar-range-gap: k-spacing(1px) !default;
+        $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 ));
+        $kendo-calendar-range-split-size: 5px !default;
+
+        .k-range-start,
+        .k-range-end,
+        .k-range-mid {
+            background-color: $kendo-calendar-range-bg;
+        }
+
+        .k-range-start,
+        .k-range-end {
+            .k-calendar-cell-inner {
+                background-color: $kendo-calendar-cell-selected-bg;
+            }
+        }
+
+        .k-range-start.k-active,
+        .k-range-end.k-active {
+            .k-calendar-cell-inner {
+                box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
+            }
+        }
+
+        .k-range-split-start,
+        .k-range-split-end {
+            position: relative;
+
+            &::after {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: $kendo-calendar-range-split-size;
+            }
+        }
+
+        .k-range-split-start::after {
+            left: -$kendo-calendar-range-split-size;
+            right: auto;
+            background-image: linear-gradient(to left, $kendo-calendar-range-bg, transparent 100%);
+        }
+
+        .k-range-split-end::after {
+            right: -$kendo-calendar-range-split-size;
+            left: auto;
+            background-image: linear-gradient(to right, $kendo-calendar-range-bg, transparent 100%);
+        }
+    }
+
+}
+
+
+@mixin kendo-calendar--theme() {
+    @include kendo-calendar--theme-base();
+}

package/scss/components/calendar/_variables.scss

@@ -0,0 +1,142 @@
+// Calendar
+
+$kendo-calendar-border-width: null !default;
+
+$kendo-calendar-font-family: null !default;
+$kendo-calendar-font-size: null !default;
+$kendo-calendar-line-height: null !default;
+
+$kendo-calendar-cell-size: null !default;
+
+$kendo-calendar-bg: null !default;
+$kendo-calendar-text: null !default;
+$kendo-calendar-border: null !default;
+
+$kendo-calendar-header-padding-x: null !default;
+$kendo-calendar-header-padding-y: null !default;
+
+$kendo-calendar-header-border-width: null !default;
+
+$kendo-calendar-header-bg: null !default;
+$kendo-calendar-header-text: null !default;
+$kendo-calendar-header-border: null !default;
+$kendo-calendar-header-gradient: null !default;
+// TODO: variable is used, but the selector using it is not! Potentially remove;
+$kendo-calendar-header-shadow: null !default;
+
+$kendo-calendar-nav-gap: null !default;
+
+$kendo-calendar-footer-padding-x: null !default;
+$kendo-calendar-footer-padding-y: null !default;
+
+$kendo-calendar-cell-padding-x: null !default;
+$kendo-calendar-cell-padding-y: null !default;
+
+$kendo-calendar-cell-line-height: null !default;
+
+$kendo-calendar-cell-border-radius: null !default;
+
+$kendo-calendar-header-cell-padding-x: null !default;
+$kendo-calendar-header-cell-padding-y: null !default;
+$kendo-calendar-header-cell-width: null !default;
+$kendo-calendar-header-cell-height: null !default;
+$kendo-calendar-header-cell-font-size: null !default;
+$kendo-calendar-header-cell-line-height: null !default;
+
+$kendo-calendar-header-cell-bg: null !default;
+$kendo-calendar-header-cell-text: null !default;
+$kendo-calendar-header-cell-opacity: null !default;
+
+$kendo-calendar-caption-padding-x: null !default;
+$kendo-calendar-caption-padding-y: null !default;
+$kendo-calendar-caption-height: null !default;
+$kendo-calendar-caption-font-size: null !default;
+$kendo-calendar-caption-line-height: null !default;
+$kendo-calendar-caption-font-weight: null !default;
+
+$kendo-calendar-week-number-font-size: null !default;
+
+$kendo-calendar-view-width: null !default;
+$kendo-calendar-view-height: null !default;
+
+$kendo-calendar-view-gap: null !default;
+
+$kendo-calendar-weekend-bg: null !default;
+$kendo-calendar-weekend-text: null !default;
+
+$kendo-calendar-today-style: null !default;
+$kendo-calendar-today-color: null !default;
+
+$kendo-calendar-week-number-bg: null !default;
+$kendo-calendar-week-number-text: null !default;
+
+$kendo-calendar-other-month-bg: null !default;
+$kendo-calendar-other-month-text: null !default;
+
+$kendo-calendar-cell-bg: null !default;
+$kendo-calendar-cell-text: null !default;
+$kendo-calendar-cell-border: null !default;
+$kendo-calendar-cell-gradient: null !default;
+
+$kendo-calendar-cell-hover-bg: null !default;
+$kendo-calendar-cell-hover-text: null !default;
+$kendo-calendar-cell-hover-border: null !default;
+$kendo-calendar-cell-hover-gradient: null !default;
+
+$kendo-calendar-cell-selected-bg: null !default;
+$kendo-calendar-cell-selected-text: null !default;
+$kendo-calendar-cell-selected-border: null !default;
+$kendo-calendar-cell-selected-gradient: null !default;
+
+$kendo-calendar-cell-selected-hover-bg: null !default;
+$kendo-calendar-cell-selected-hover-text: null !default;
+$kendo-calendar-cell-selected-hover-border: null !default;
+$kendo-calendar-cell-selected-hover-gradient: null !default;
+
+$kendo-calendar-cell-focus-shadow: null !default;
+$kendo-calendar-cell-selected-focus-shadow: null !default;
+
+
+$kendo-calendar-navigation-width: null !default;
+$kendo-calendar-navigation-item-height: null !default;
+
+$kendo-calendar-navigation-bg: null !default;
+$kendo-calendar-navigation-text: null !default;
+$kendo-calendar-navigation-border: null !default;
+
+$kendo-calendar-navigation-hover-text: null !default;
+
+$kendo-infinite-calendar-header-padding-x: null !default;
+$kendo-infinite-calendar-header-padding-y: null !default;
+
+$kendo-infinite-calendar-view-padding-x: null !default;
+$kendo-infinite-calendar-view-padding-y: null !default;
+
+$kendo-infinite-calendar-view-height: null !default;
+
+
+// Multiview calendar
+
+$kendo-calendar-range-cell-border-radius: null !default;
+
+// Calendar sizes
+
+$kendo-calendar-sm-font-size: null !default;
+$kendo-calendar-sm-line-height: null !default;
+$kendo-calendar-sm-cell-size: null !default;
+$kendo-calendar-sm-cell-padding-x: null !default;
+$kendo-calendar-sm-cell-padding-y: null !default;
+
+$kendo-calendar-md-font-size: null !default;
+$kendo-calendar-md-line-height: null !default;
+$kendo-calendar-md-cell-size: null !default;
+$kendo-calendar-md-cell-padding-x: null !default;
+$kendo-calendar-md-cell-padding-y: null !default;
+
+$kendo-calendar-lg-font-size: null !default;
+$kendo-calendar-lg-line-height: null !default;
+$kendo-calendar-lg-cell-size: null !default;
+$kendo-calendar-lg-cell-padding-x: null !default;
+$kendo-calendar-lg-cell-padding-y: null !default;
+
+$kendo-calendar-sizes: null !default;

package/scss/components/captcha/_index.scss

@@ -0,0 +1,29 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../slider/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-captcha--styles() {
+    @include import-once( "captcha" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-textbox--styles();
+        @include kendo-slider--styles();
+        @include kendo-captcha--layout();
+        @include kendo-captcha--theme();
+        @include kendo-utils--typography--text-color();
+        @include kendo-utils--layout--position();
+    }
+}

package/scss/components/captcha/_layout.scss

@@ -0,0 +1,69 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-captcha--layout-base() {
+
+    // Captcha
+    .k-captcha {
+        width: $kendo-captcha-width;
+        box-sizing: border-box;
+        font-size: $kendo-captcha-font-size;
+        font-family: $kendo-captcha-font-family;
+        line-height: $kendo-captcha-line-height;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: $kendo-captcha-gap;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Image
+    .k-captcha-image-wrap {
+        position: relative;
+        gap: $kendo-captcha-image-wrap-gap;
+    }
+
+    .k-captcha-image-controls {
+        position: relative;
+        gap: $kendo-captcha-image-controls-gap;
+    }
+
+    .k-captcha-image {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .k-captcha-image > img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+    }
+
+    // Loading
+    .k-captcha-loading .k-captcha-image {
+        height: auto;
+    }
+
+    // Volume Control
+    .k-captcha-volume-control {
+        height: 100%;
+    }
+
+    // Verification Success
+    .k-captcha-validation-message {
+        margin-top: $kendo-captcha-validation-message-margin-top;
+        font-size: $kendo-captcha-validation-message-font-size;
+        font-style: $kendo-captcha-validation-message-font-style;
+    }
+
+}
+
+
+@mixin kendo-captcha--layout() {
+    @include kendo-captcha--layout-base();
+}

package/scss/components/captcha/_theme.scss

@@ -0,0 +1,20 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-captcha--theme-base() {
+
+    // Captcha
+    .k-captcha {
+        @include fill(
+            $kendo-captcha-text,
+            $kendo-captcha-bg,
+            $kendo-captcha-border
+        );
+    }
+
+}
+
+
+@mixin kendo-captcha--theme() {
+    @include kendo-captcha--theme-base();
+}

package/scss/components/captcha/_variables.scss

@@ -0,0 +1,19 @@
+// Captcha
+
+$kendo-captcha-spacer: null !default;
+
+$kendo-captcha-width: null !default;
+$kendo-captcha-font-family: null !default;
+$kendo-captcha-font-size: null !default;
+$kendo-captcha-line-height: null !default;
+$kendo-captcha-gap: null !default;
+$kendo-captcha-bg: null !default;
+$kendo-captcha-text: null !default;
+$kendo-captcha-border: null !default;
+
+$kendo-captcha-image-wrap-gap: null !default;
+$kendo-captcha-image-controls-gap: null !default;
+
+$kendo-captcha-validation-message-margin-top: null !default;
+$kendo-captcha-validation-message-font-size: null !default;
+$kendo-captcha-validation-message-font-style: null !default;

package/scss/components/card/_index.scss

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