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

package/scss/components/tilelayout/_layout.scss

@@ -0,0 +1,53 @@
+@use "../../color-system/_constants.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-tile-layout--layout-base() {
+
+    .k-tilelayout {
+        border-width: $kendo-tile-layout-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        display: grid;
+        position: relative;
+        padding: $kendo-tile-layout-padding-y $kendo-tile-layout-padding-x;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        .k-card {
+            @include box-shadow( none );
+            border-width: $kendo-tile-layout-card-border-width;
+        }
+    }
+
+    .k-tilelayout-item {
+        position: relative;
+        z-index: 0;
+    }
+
+    .k-layout-item-hint {
+        @include border-radius( $kendo-tile-layout-hint-border-radius );
+        border-width: $kendo-tile-layout-hint-border-width;
+        border-style: solid;
+        position: relative;
+
+        &.k-layout-item-hint-resize {
+            z-index: 3;
+        }
+    }
+
+    .k-tilelayout-item-header.k-card-header {
+        z-index: 0;
+    }
+
+    .k-tilelayout-item-body {
+        min-height: 0;
+    }
+
+}
+
+
+@mixin kendo-tile-layout--layout() {
+    @include kendo-tile-layout--layout-base();
+}

package/scss/components/tilelayout/_theme.scss

@@ -0,0 +1,29 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-tile-layout--theme-base() {
+
+    .k-tilelayout {
+        @include fill(
+            $bg: $kendo-tile-layout-bg
+        );
+    }
+
+    .k-tilelayout-item:focus,
+    .k-tilelayout-item.k-focus {
+        @include focus-indicator($kendo-tile-layout-card-focus-shadow);
+    }
+
+    .k-layout-item-hint {
+        @include fill(
+            $bg: $kendo-tile-layout-hint-bg,
+            $border: $kendo-tile-layout-hint-border
+        );
+    }
+
+}
+
+
+@mixin kendo-tile-layout--theme() {
+    @include kendo-tile-layout--theme-base();
+}

package/scss/components/tilelayout/_variables.scss

@@ -0,0 +1,19 @@
+// TileLayout
+
+$kendo-tile-layout-border-width: null !default;
+$kendo-tile-layout-bg: null !default;
+
+$kendo-tile-layout-padding-x: null !default;
+
+$kendo-tile-layout-padding-y: null !default;
+
+$kendo-tile-layout-card-border-width: null !default;
+$kendo-tile-layout-card-focus-shadow: null !default;
+
+$kendo-tile-layout-hint-border-width: null !default;
+$kendo-tile-layout-hint-border-radius: null !default;
+$kendo-tile-layout-hint-border: null !default;
+$kendo-tile-layout-hint-bg: null !default;
+
+
+

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

package/scss/components/time-marker/_layout.scss

@@ -0,0 +1,23 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-time-marker--layout-base() {
+
+    .k-current-time {
+        width: $kendo-current-time-width;
+        position: absolute;
+
+        &.k-current-time-arrow-left,
+        &.k-current-time-arrow-right,
+        &.k-current-time-arrow-down {
+            width: 0;
+            height: 0;
+            background: transparent;
+            border: 4px solid transparent;
+        }
+    }
+
+}
+
+@mixin kendo-time-marker--layout() {
+    @include kendo-time-marker--layout-base();
+}

package/scss/components/time-marker/_theme.scss

@@ -0,0 +1,26 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-time-marker--theme-base() {
+
+    .k-current-time {
+        background: $kendo-current-time-color;
+
+        &.k-current-time-arrow-left {
+            border-right-color: $kendo-current-time-color;
+        }
+
+        &.k-current-time-arrow-right {
+            border-left-color: $kendo-current-time-color;
+        }
+
+        &.k-current-time-arrow-down {
+            border-top-color: $kendo-current-time-color;
+        }
+    }
+
+}
+
+
+@mixin kendo-time-marker--theme() {
+    @include kendo-time-marker--theme-base();
+}

package/scss/components/time-marker/_variables.scss

@@ -0,0 +1,2 @@
+$kendo-current-time-width: null !default;
+$kendo-current-time-color: null !default;

package/scss/components/timedurationpicker/_index.scss

@@ -0,0 +1,28 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../timeselector/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-time-duration-picker--styles() {
+    @include import-once( "time-duration-picker" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-time-selector--styles();
+        @include kendo-time-duration-picker--layout();
+        @include kendo-time-duration-picker--theme();
+    }
+}

package/scss/components/timedurationpicker/_layout.scss

@@ -0,0 +1,17 @@
+@mixin kendo-time-duration-picker--layout-base() {
+
+    // Time duration picker
+    .k-time-duration-picker {}
+
+
+    // Legacy aliases
+    .k-timedurationpicker {
+        @extend .k-time-duration-picker;
+    }
+
+}
+
+
+@mixin kendo-time-duration-picker--layout() {
+    @include kendo-time-duration-picker--layout-base();
+}

package/scss/components/timedurationpicker/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-time-duration-picker--theme-base() {
+
+    // Time duration picker
+    .k-time-duration-picker {}
+
+}
+
+
+@mixin kendo-time-duration-picker--theme() {
+    @include kendo-time-duration-picker--theme-base();
+}

package/scss/components/timedurationpicker/_variables.scss

@@ -0,0 +1 @@
+// Timedurationpicker

package/scss/components/timeline/_index.scss

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