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

package/scss/components/scheduler/_theme.scss

@@ -0,0 +1,244 @@
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-scheduler--theme-base() {
+
+    // Appearance
+    .k-scheduler {
+        @include fill(
+            $kendo-scheduler-text,
+            $kendo-scheduler-bg,
+            $kendo-scheduler-border
+        );
+    }
+
+    // Header and footer
+    .k-scheduler-toolbar {
+        @include fill(
+            $kendo-scheduler-toolbar-text,
+            $kendo-scheduler-toolbar-bg,
+            $kendo-scheduler-toolbar-border,
+            $kendo-scheduler-toolbar-gradient
+        );
+    }
+    .k-scheduler-footer {
+        @include fill(
+            $kendo-scheduler-footer-text,
+            $kendo-scheduler-footer-bg,
+            $kendo-scheduler-footer-border,
+            $kendo-scheduler-footer-gradient
+        );
+    }
+
+    .k-scheduler-header {
+        background-color: $kendo-base-bg;
+    }
+
+    .k-scheduler-header-wrap {
+        background-color: $kendo-scheduler-bg;
+    }
+
+
+    // Scheduler navigation
+    .k-scheduler-navigation {}
+
+
+    // View switcher
+    .k-scheduler-views {}
+
+
+    // Scheduler footer
+    .k-scheduler-footer {}
+
+
+    // Scheduler content
+    .k-scheduler-content {}
+    .k-scheduler-nonwork,
+    .k-scheduler .k-nonwork-hour {
+        @include fill(
+            $kendo-scheduler-nonwork-text,
+            $kendo-scheduler-nonwork-bg
+        );
+    }
+    .k-scheduler-other-month,
+    .k-scheduler .k-other-month {
+        @include fill(
+            $kendo-scheduler-othermonth-text,
+            $kendo-scheduler-othermonth-bg
+        );
+    }
+
+    .k-scheduler-layout td.k-selected,
+    .k-scheduler-layout .k-scheduler-cell.k-selected {
+        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+    }
+
+    .k-scheduler-layout-flex {
+        .k-scheduler-head,
+        .k-sticky-cell {
+            background-color: $kendo-scheduler-bg;
+        }
+    }
+
+
+    // Events
+    .k-event {
+        @include fill(
+            $kendo-scheduler-event-text,
+            $kendo-scheduler-event-bg,
+            $kendo-scheduler-event-border,
+            $kendo-scheduler-event-gradient
+        );
+        @include box-shadow( $kendo-scheduler-event-shadow );
+
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-scheduler-event-hover-text,
+                $kendo-scheduler-event-hover-bg,
+                $kendo-scheduler-event-hover-border,
+                $kendo-scheduler-event-hover-gradient
+            );
+            @include box-shadow( $kendo-scheduler-event-hover-shadow );
+        }
+
+        &.k-selected {
+            @include fill(
+                $kendo-scheduler-event-selected-text,
+                $kendo-scheduler-event-selected-bg,
+                $kendo-scheduler-event-selected-border,
+                $kendo-scheduler-event-selected-gradient
+            );
+            @include box-shadow( $kendo-scheduler-event-selected-shadow );
+        }
+
+        &.k-event-inverse {
+            color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text ));
+        }
+
+        &.k-event-ongoing {
+            @include box-shadow( $kendo-scheduler-event-ongoing-shadow );
+        }
+    }
+
+
+    // Drag hint
+    .k-event-drag-hint {}
+
+
+    // Resizing
+    .k-scheduler-marquee {}
+    .k-scheduler-marquee::before,
+    .k-scheduler-marquee::after {
+        border-color: $kendo-color-primary;
+    }
+
+    // Edit dialog
+    .k-scheduler-edit-dialog {
+        .k-dialog-actions {
+            border-color: $kendo-scheduler-border;
+        }
+    }
+
+
+
+    // Day view
+    .k-scheduler-dayview {}
+
+
+    // Workweek view
+    .k-scheduler-workWeekview {} // stylelint-disable-line
+
+
+    // Week view
+    .k-scheduler-weekview {}
+
+
+    // Month view
+    .k-scheduler-monthview {}
+
+
+    // Agenda view
+    .k-scheduler-agendaview {
+
+        // Hover
+        .k-scheduler-content tr:hover,
+        .k-scheduler-content tr.k-hover,
+        .k-scheduler-content .k-scheduler-row:hover,
+        .k-scheduler-content .k-scheduler-row.k-hover {
+            @include fill(
+                $kendo-hover-text,
+                $kendo-hover-bg,
+                $kendo-hover-border,
+                $kendo-hover-gradient
+            );
+        }
+
+        .k-scheduler-content tr:hover .k-scheduler-datecolumn,
+        .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
+        .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
+        .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
+            @include fill(
+                $kendo-scheduler-text,
+                $kendo-scheduler-bg,
+                $kendo-scheduler-border
+            );
+        }
+
+        // Selected
+        .k-scheduler-content tr.k-selected {
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+        }
+        .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
+        .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
+            background-color: $kendo-scheduler-bg;
+        }
+    }
+
+
+    // Timeline view
+    .k-scheduler-timelineview {}
+
+
+    // Year view
+    .k-scheduler-yearview {
+
+        .k-day-indicator {
+            @include fill( $bg: $kendo-scheduler-yearview-indicator-bg );
+        }
+
+        .k-selected .k-day-indicator {
+            @include fill( $bg: $kendo-scheduler-yearview-indicator-selected-bg );
+        }
+    }
+
+
+
+    // Scheduler tooltip
+    .k-tooltip.k-scheduler-tooltip {
+        @include fill(
+            $kendo-scheduler-tooltip-text,
+            $kendo-scheduler-tooltip-bg,
+            $kendo-scheduler-tooltip-border
+        );
+        @include box-shadow( $kendo-scheduler-tooltip-shadow );
+
+        .k-callout {
+            @include fill( $color: $kendo-scheduler-tooltip-callout-text );
+        }
+    }
+
+
+    // Scheduler edit form
+    .k-scheduler-edit-form {}
+
+}
+
+
+@mixin kendo-scheduler--theme() {
+    @include kendo-scheduler--theme-base();
+}

package/scss/components/scheduler/_variables.scss

@@ -0,0 +1,106 @@
+// Scheduler
+
+$kendo-scheduler-border-width: null !default;
+$kendo-scheduler-font-family: null !default;
+$kendo-scheduler-font-size: null !default;
+$kendo-scheduler-line-height: null !default;
+
+$kendo-scheduler-bg: null !default;
+$kendo-scheduler-text: null !default;
+$kendo-scheduler-border: null !default;
+
+$kendo-scheduler-toolbar-bg: null !default;
+$kendo-scheduler-toolbar-text: null !default;
+$kendo-scheduler-toolbar-border: null !default;
+$kendo-scheduler-toolbar-gradient: null !default;
+
+$kendo-scheduler-footer-bg: null !default;
+$kendo-scheduler-footer-text: null !default;
+$kendo-scheduler-footer-border: null !default;
+$kendo-scheduler-footer-gradient: null !default;
+
+$kendo-scheduler-event-min-height: null !default;
+$kendo-scheduler-event-border-radius: null !default;
+$kendo-scheduler-event-line-height: null !default;
+
+$kendo-scheduler-event-bg: null !default;
+$kendo-scheduler-event-text: null !default;
+$kendo-scheduler-event-border: null !default;
+$kendo-scheduler-event-gradient: null !default;
+$kendo-scheduler-event-shadow: null !default;
+
+$kendo-scheduler-event-hover-bg: null !default;
+$kendo-scheduler-event-hover-text: null !default;
+$kendo-scheduler-event-hover-border: null !default;
+$kendo-scheduler-event-hover-gradient: null !default;
+$kendo-scheduler-event-hover-shadow: null !default;
+
+$kendo-scheduler-event-selected-bg: null !default;
+$kendo-scheduler-event-selected-text: null !default;
+$kendo-scheduler-event-selected-border: null !default;
+$kendo-scheduler-event-selected-gradient: null !default;
+$kendo-scheduler-event-selected-shadow: null !default;
+
+$kendo-scheduler-event-ongoing-shadow: null !default;
+
+$kendo-scheduler-cell-padding-x: null !default;
+$kendo-scheduler-cell-padding-y: null !default;
+$kendo-scheduler-cell-height: null !default;
+$kendo-scheduler-datecolumn-width: null !default;
+$kendo-scheduler-timecolumn-width: null !default;
+
+$kendo-scheduler-nonwork-bg: null !default;
+$kendo-scheduler-nonwork-text: null !default;
+
+$kendo-scheduler-weekend-bg: null !default;
+$kendo-scheduler-weekend-text: null !default;
+
+$kendo-scheduler-othermonth-bg: null !default;
+$kendo-scheduler-othermonth-text: null !default;
+
+$kendo-scheduler-yearview-padding-x: null !default;
+$kendo-scheduler-yearview-padding-y: null !default;
+
+$kendo-scheduler-yearview-calendar-gap: null !default;
+
+$kendo-scheduler-yearview-indicator-size: null !default;
+$kendo-scheduler-yearview-indicator-calc-offset-top: null !default;
+$kendo-scheduler-yearview-indicator-calc-offset-left: null !default;
+$kendo-scheduler-yearview-indicator-border-radius: null !default;
+$kendo-scheduler-yearview-indicator-bg: null !default;
+$kendo-scheduler-yearview-indicator-selected-bg: null !default;
+
+$kendo-scheduler-tooltip-padding-x: null !default;
+$kendo-scheduler-tooltip-padding-y: null !default;
+$kendo-scheduler-tooltip-border-width: null !default;
+$kendo-scheduler-tooltip-bg: null !default;
+$kendo-scheduler-tooltip-text: null !default;
+$kendo-scheduler-tooltip-border: null !default;
+$kendo-scheduler-tooltip-shadow: null !default;
+
+$kendo-scheduler-tooltip-title-margin-y: null !default;
+$kendo-scheduler-tooltip-month-font-size: null !default;
+$kendo-scheduler-tooltip-day-font-size: null !default;
+
+$kendo-scheduler-tooltip-events-max-height: null !default;
+$kendo-scheduler-tooltip-events-gap: null !default;
+
+$kendo-scheduler-tooltip-event-padding-x: null !default;
+$kendo-scheduler-tooltip-event-padding-y: null !default;
+$kendo-scheduler-tooltip-event-border-radius: null !default;
+$kendo-scheduler-tooltip-event-gap: null !default;
+
+$kendo-scheduler-tooltip-callout-text: null !default;
+
+$kendo-scheduler-appointments-padding: null !default;
+
+$kendo-scheduler-event-template-padding-x: null !default;
+$kendo-scheduler-event-template-padding-y: null !default;
+
+$kendo-scheduler-event-actions-inset-x: null !default;
+
+$kendo-scheduler-indicators-margin: null !default;
+$kendo-scheduler-rtl-indicators-margin: null !default;
+
+$kendo-scheduler-marquee-label-inset-x: null !default;
+$kendo-scheduler-marquee-label-inset-y: null !default;

package/scss/components/scroller/_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-scroller--styles() {
+    @include import-once( "scroller" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-scroller--layout();
+        @include kendo-scroller--theme();
+    }
+}

package/scss/components/scroller/_layout.scss

@@ -0,0 +1,90 @@
+@mixin kendo-scroller--layout-base() {
+
+    // Layout
+    .km-scrollview,
+    .km-scroll-container {
+        user-select: none;
+        border-collapse: separate;
+    }
+    .km-scroll-wrapper {
+        position: relative;
+    }
+    .km-scroll-header {
+        position: absolute;
+        z-index: 1001;
+        width: 100%;
+        top: 0;
+        left: 0;
+    }
+
+
+    // Pull to refresh
+    .km-scroller-pull {
+        width: 100%;
+        display: block;
+        position: absolute;
+        line-height: 3em;
+        font-size: 1.4em;
+        text-align: center;
+        transform: translate3d(0, -3em, 0);
+    }
+    .km-scroller-pull .km-template {
+        display: inline-block;
+        min-width: 200px;
+        text-align: start;
+    }
+    .km-load-more .km-icon,
+    .km-widget .km-scroller-pull .km-icon {
+        display: inline-block;
+        height: 2rem;
+        margin-right: 1rem;
+        vertical-align: middle;
+        width: 2rem;
+        font-size: 2rem;
+        transform: rotate(0deg);
+        transition: transform 300ms linear;
+    }
+    .km-widget .km-scroller-release .km-icon {
+        transform: rotate(180deg);
+    }
+    .km-widget .km-scroller-refresh .km-icon {
+        transition: none;
+    }
+
+
+    // Scrollbar
+    .km-touch-scrollbar {
+        position: absolute;
+        visibility: hidden;
+        z-index: 200000;
+        height: .4em;
+        width: .4em;
+        opacity: 0;
+        transform-origin: 0 0;
+        transition: opacity .3s linear;
+    }
+
+    .k-map,
+    .k-diagram {
+        .km-touch-scrollbar {
+            display: none;
+        }
+    }
+
+    .km-vertical-scrollbar {
+        height: 100%;
+        right: 2px;
+        top: 0;
+    }
+    .km-horizontal-scrollbar {
+        width: 100%;
+        left: 0;
+        bottom: 2px;
+    }
+
+}
+
+
+@mixin kendo-scroller--layout() {
+    @include kendo-scroller--layout-base();
+}

package/scss/components/scroller/_theme.scss

@@ -0,0 +1,12 @@
+@mixin kendo-scroller--theme-base() {
+
+    .km-touch-scrollbar {
+        background-color: #333333;
+    }
+
+}
+
+
+@mixin kendo-scroller--theme() {
+    @include kendo-scroller--theme-base();
+}

package/scss/components/scroller/_variables.scss

@@ -0,0 +1 @@
+// Scroller

package/scss/components/scrollview/_index.scss

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

package/scss/components/scrollview/_layout.scss

@@ -0,0 +1,170 @@
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-scrollview--layout-base() {
+
+    .k-scrollview {
+        border-width: $kendo-scrollview-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-scrollview-font-family;
+        font-size: $kendo-scrollview-font-size;
+        line-height: $kendo-scrollview-line-height;
+        position: relative;
+        overflow: hidden;
+        display: block;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+    }
+
+    .k-scrollview-wrap {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-flow: row nowrap;
+        cursor: default;
+        white-space: nowrap;
+
+        > .k-scrollview-view {
+            display: inline-block;
+            overflow: hidden;
+            flex-shrink: 0;
+        }
+
+        img {
+            user-select: none;
+        }
+
+    }
+
+    .k-scrollview-wrap.k-scrollview-animate {
+        width: calc( var(--kendo-scrollview-views, 1) * 100% );
+        transition-duration: $kendo-scrollview-transition-duration;
+        transition-timing-function: $kendo-scrollview-transition-timing-function;
+        transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+
+        .k-scrollview-view {
+            width: calc( 100% / var(--kendo-scrollview-views, 1) );
+            flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
+        }
+
+    }
+
+    :is([dir="rtl"], .k-rtl) .k-scrollview-wrap.k-scrollview-animate {
+        transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+    }
+
+    .k-scrollview-nav-wrap {
+        padding: 0;
+        margin: 0;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: $kendo-scrollview-pager-offset;
+        height: $kendo-scrollview-pager-height;
+        text-align: center;
+    }
+
+    kendo-scrollview.k-scrollview kendo-scrollview-pager {
+        pointer-events: none;
+    }
+
+    kendo-scrollview.k-scrollview .k-scrollview-nav {
+        pointer-events: initial;
+    }
+
+    .k-scrollview-nav {
+        margin: 0;
+        padding: $kendo-scrollview-pager-item-spacing;
+        max-width: 100%;
+        box-sizing: border-box;
+        line-height: 0;
+        text-align: center;
+        white-space: nowrap;
+        list-style: none;
+        display: inline-flex;
+        align-items: center;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        pointer-events: initial;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .k-scrollview-nav > .k-link {
+        margin-block: 0;
+        margin-inline: calc( #{$kendo-scrollview-pager-item-spacing} / 2 );
+        padding: 0;
+        width: $kendo-scrollview-pagebutton-size;
+        height: $kendo-scrollview-pagebutton-size;
+        border-width: $kendo-scrollview-pager-item-border-width;
+        border-style: solid;
+        border-radius: 50%;
+        box-sizing: content-box;
+        display: inline-block;
+        position: relative;
+        flex: 0 0 auto;
+        cursor: pointer;
+        pointer-events: all;
+        vertical-align: top;
+
+        &::before {
+            content: "";
+            width: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
+            height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: initial;
+            border-radius: 0;
+        }
+    }
+
+    .k-scrollview-next,
+    .k-scrollview-prev {
+        display: table;
+        position: absolute;
+        padding: 0;
+        height: 60%;
+        top: 20%;
+        text-decoration: none;
+        user-select: none;
+        cursor: pointer;
+
+        .k-icon {
+            display: table-cell;
+            overflow: visible;
+            margin: 0;
+            padding: 0;
+            vertical-align: middle;
+            font-weight: normal;
+        }
+    }
+
+    .k-scrollview-prev {
+        inset-inline-start: 0;
+    }
+
+    .k-scrollview-next {
+        inset-inline-end: 0;
+    }
+
+
+    .k-scrollview-animation {
+        transition-duration: .3s;
+        transition-timing-function: ease-in-out;
+    }
+}
+
+
+@mixin kendo-scrollview--layout() {
+    @include kendo-scrollview--layout-base();
+}