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

package/scss/action-sheet/_layout.scss

@@ -1,400 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-action-sheet--layout-base() {
-
-    // Action sheet container
-    .k-actionsheet-container {
-        width: 100%;
-        height: 100%;
-        max-width: clamp(100vw, 100%, 100%);
-        max-height: clamp(100vh, 100%, 100%);
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 9999;
-        overflow: hidden;
-        transform: translateZ(0);
-
-        // Overlay
-        > .k-overlay {
-            position: absolute;
-            z-index: 1;
-        }
-
-        // Nested animation container
-        > .k-animation-container {
-            width: 100%;
-            height: 100%;
-            border-radius: 0;
-            overflow: hidden;
-            position: absolute;
-            z-index: 2;
-            top: 0;
-            left: 0;
-            pointer-events: none;
-
-            > .k-child-animation-container {
-                position: absolute;
-            }
-        }
-
-        // No animation container
-        > .k-actionsheet {
-            position: absolute;
-            z-index: 2;
-        }
-
-        // Enable mouse events for action sheet
-        .k-actionsheet {
-            pointer-events: all;
-        }
-    }
-
-
-    // Actionsheet
-    .k-actionsheet {
-        padding-block: $kendo-actionsheet-padding-y;
-        padding-inline: $kendo-actionsheet-padding-y;
-        width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
-        height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} );
-        max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
-        max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
-        border-width: 0;
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-        font-size: $kendo-actionsheet-font-size;
-        font-family: $kendo-actionsheet-font-family;
-        line-height: $kendo-actionsheet-line-height;
-        overflow: hidden;
-        position: relative;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Actionsheet titlebar
-    .k-actionsheet-titlebar {
-        padding-block: $kendo-actionsheet-titlebar-padding-y;
-        padding-inline: $kendo-actionsheet-titlebar-padding-x;
-        border-width: 0;
-        border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
-        border-style: solid;
-        border-color: transparent;
-        font-size: $kendo-actionsheet-titlebar-font-size;
-        font-family: $kendo-actionsheet-titlebar-font-family;
-        line-height: $kendo-actionsheet-titlebar-line-height;
-        flex: none;
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        gap: $kendo-actionsheet-titlebar-gap;
-    }
-    .k-actionsheet-titlebar-group {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        width: 100%;
-    }
-    .k-actionsheet-title {
-        flex: 1;
-    }
-    .k-actionsheet-subtitle {
-        font-size: $kendo-actionsheet-subtitle-font-size;
-        line-height: $kendo-actionsheet-subtitle-line-height;
-    }
-    .k-actionsheet-actions {
-        flex: none;
-    }
-
-
-    // Actionsheet content
-    .k-actionsheet-content {
-        flex: 1;
-        overflow: auto;
-        position: relative;
-    }
-
-
-    // Actionsheet footer
-    .k-actionsheet-footer {
-        flex: none;
-    }
-
-
-    // Actionsheet items
-    .k-actionsheet-items {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        flex: none;
-    }
-
-
-    // Actionsheet item
-    .k-actionsheet-item {
-        padding: 0;
-        box-sizing: border-box;
-        display: flex;
-        flex-flow: row nowrap;
-        outline: none;
-    }
-    .k-actionsheet-action {
-        margin: 0;
-        padding-block: $kendo-actionsheet-item-padding-y;
-        padding-inline: $kendo-actionsheet-item-padding-x;
-        min-height: $kendo-actionsheet-item-min-height;
-        box-sizing: border-box;
-        color: inherit;
-        text-decoration: none;
-        outline: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: flex-start;
-        gap: $kendo-actionsheet-item-spacing;
-    }
-    .k-actionsheet-item-text {
-        display: flex;
-        flex-flow: column nowrap;
-    }
-    .k-actionsheet-item-title {
-        font-weight: $kendo-actionsheet-item-title-font-weight;
-        text-transform: $kendo-actionsheet-item-title-text-transform;
-    }
-    .k-actionsheet-item-description {
-        font-size: $kendo-actionsheet-item-description-font-size;
-    }
-
-
-    // Actionsheet separator
-    .k-actionsheet .k-hr {
-        margin: 0;
-        flex: none;
-    }
-
-
-    // Action sheet position
-    .k-actionsheet-top {
-        @include border-bottom-radius( $kendo-actionsheet-border-radius );
-        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
-        border-top-width: if( $kendo-actionsheet-border-width, 0, null );
-        top: 0;
-        inset-inline-start: 50%;
-        transform: translateX( -50% );
-    }
-    .k-actionsheet-bottom {
-        @include border-top-radius( $kendo-actionsheet-border-radius );
-        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
-        border-bottom-width: if( $kendo-actionsheet-border-width, 0, null );
-        bottom: 0;
-        inset-inline-start: 50%;
-        transform: translateX( -50% );
-    }
-    .k-actionsheet-left {
-        @include border-right-radius( $kendo-actionsheet-border-radius );
-        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
-        border-left-width: if( $kendo-actionsheet-border-width, 0, null );
-        left: 0;
-        top: 50%;
-        transform: translateY( -50% );
-    }
-    .k-actionsheet-right {
-        @include border-left-radius( $kendo-actionsheet-border-radius );
-        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
-        border-right-width: if( $kendo-actionsheet-border-width, 0, null );
-        right: 0;
-        top: 50%;
-        transform: translateY( -50% );
-    }
-    .k-actionsheet-fullscreen {
-        width: 100%;
-        max-width: 100%;
-        max-height: 100%;
-        height: 100%;
-    }
-
-
-    // Action sheet in popup
-    .k-animation-container > .k-actionsheet {
-        top: auto;
-        right: auto;
-        bottom: auto;
-        left: auto;
-        transform: none;
-    }
-
-
-    // Adaptive action sheet
-    .k-adaptive-actionsheet {
-        max-width: 100%;
-        width: 100%;
-        font-size: $kendo-adaptive-actionsheet-font-size;
-
-        // TMP: this should be moved to action sheet
-        display: flex;
-        flex-flow: column nowrap;
-
-        .k-actionsheet-titlebar {
-            padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y;
-            padding-inline: $kendo-adaptive-actionsheet-titlebar-padding-x;
-            border-bottom-width: $kendo-adaptive-actionsheet-titlebar-border-width;
-        }
-
-        .k-actionsheet-content {
-            padding-block: $kendo-adaptive-actionsheet-content-padding-y;
-            padding-inline: $kendo-adaptive-actionsheet-content-padding-x;
-        }
-
-        .k-actionsheet-footer {
-            padding-block: $kendo-adaptive-actionsheet-footer-padding-y;
-            padding-inline: $kendo-adaptive-actionsheet-footer-padding-x;
-        }
-
-        .k-actionsheet-filter {
-            width: calc( 360px - #{$kendo-adaptive-actionsheet-titlebar-padding-x} * 2 );
-        }
-        .k-actionsheet-content,
-        .k-actionsheet-footer {
-            margin-inline: auto;
-            width: min(100%, 360px);
-        }
-
-        .k-list-container,
-        .k-treeview {
-            height: 100%;
-        }
-        .k-list-filter {
-            width: 100%;
-            padding-inline: 0;
-        }
-
-        .k-menu-group {
-            height: 100%;
-            overflow: auto;
-            position: static;
-        }
-
-        .k-calendar {
-            margin-inline: auto;
-            border-width: 0;
-            display: flex;
-        }
-
-        .k-timeselector {
-            height: 100%;
-            border-width: 0;
-            overflow: hidden;
-
-            .k-time-part {
-                display: contents;
-            }
-
-            .k-time-list-wrapper {
-                height: 100%;
-            }
-        }
-
-        .k-datetime-wrap {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-flow: column nowrap;
-        }
-        .k-datetime-selector {
-            flex: 1 1 auto;
-        }
-
-        .k-datetime-calendar-wrap {
-            width: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            flex: 0 0 100%;
-        }
-
-        .k-datetime-time-wrap {
-            width: 100%;
-            position: absolute;
-            top: 0;
-            left: 100%;
-            bottom: 0;
-            flex: 0 0 100%;
-        }
-
-        .k-scrollable-wrap {
-            height: 100%;
-            overflow-y: auto;
-        }
-
-        .k-data-table {
-            max-height: 100%;
-            overflow: hidden;
-            display: flex;
-            flex-flow: column nowrap;
-        }
-
-        .k-coloreditor {
-            min-width: 100%;
-            height: 100%;
-            border: 0;
-            overflow: auto;
-            scrollbar-width: none;
-
-            &::-webkit-scrollbar {
-                display: none;
-            }
-
-            .k-coloreditor-header {
-                padding: 0;
-            }
-
-            .k-coloreditor-views {
-                padding-inline: 0;
-            }
-        }
-
-        .k-colorgradient-canvas {
-            .k-hsv-gradient {
-                aspect-ratio: 1;
-                height: 100%;
-            }
-        }
-    }
-
-
-    // Legacy action sheet
-    // TODO: remove when kendo-jquery migrate
-    .k-actionsheet-jq {
-        &.k-actionsheet {
-            height: auto;
-        }
-
-        .k-actionsheet-header {
-            @extend .k-actionsheet-titlebar !optional;
-            align-items: flex-start;
-        }
-
-        .k-actionsheet-action {
-            align-items: center;
-        }
-    }
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        .k-actionsheet-top,
-        .k-actionsheet-bottom {
-            transform: translateX( 50% );
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/action-sheet/_layout.scss" as *;
 
 
 @mixin kendo-action-sheet--layout() {

package/scss/action-sheet/_theme.scss

@@ -1,103 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-action-sheet--theme-base() {
-
-    // Actionsheet
-    .k-actionsheet {
-        @include fill(
-            $kendo-actionsheet-text,
-            $kendo-actionsheet-bg,
-            $kendo-actionsheet-border
-        );
-        @include box-shadow( $kendo-actionsheet-shadow );
-    }
-
-
-    // Actionsheet header
-    .k-actionsheet-titlebar {
-        @include fill(
-            $kendo-actionsheet-titlebar-text,
-            $kendo-actionsheet-titlebar-bg,
-            $kendo-actionsheet-titlebar-border,
-            $kendo-actionsheet-titlebar-gradient
-        );
-        @include box-shadow( $kendo-actionsheet-titlebar-shadow );
-    }
-    .k-actionsheet-subtitle {
-        @include fill( $color: $kendo-actionsheet-subtitle-text );
-    }
-
-
-    // Actionsheet items
-    .k-actionsheet-items {}
-
-
-    // Actionsheet item
-    .k-actionsheet-item {
-
-
-        // Hover state
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-actionsheet-item-hover-text,
-                $kendo-actionsheet-item-hover-bg,
-                $kendo-actionsheet-item-hover-border,
-                $kendo-actionsheet-item-hover-gradient
-            );
-            @include box-shadow( $kendo-actionsheet-item-hover-shadow );
-        }
-
-
-        // Focus state
-        &:focus,
-        &.k-focus {
-            @include fill(
-                $kendo-actionsheet-item-focus-text,
-                $kendo-actionsheet-item-focus-bg,
-                $kendo-actionsheet-item-focus-border,
-                $kendo-actionsheet-item-focus-gradient
-            );
-            @include focus-indicator( $kendo-actionsheet-item-focus-shadow );
-        }
-
-
-        // Disabled state
-        &:disabled,
-        &.k-disabled {
-            @include fill(
-                $kendo-actionsheet-item-disabled-text,
-                $kendo-actionsheet-item-disabled-bg,
-                $kendo-actionsheet-item-disabled-border,
-                $kendo-actionsheet-item-disabled-gradient
-            );
-            @include box-shadow( $kendo-actionsheet-item-disabled-shadow );
-        }
-    }
-
-
-    // Actionsheet item description
-    .k-actionsheet-item-description {
-        @include fill( $color: $kendo-actionsheet-item-description-text );
-    }
-
-
-    // Actionsheet action
-    .k-actionsheet-action {}
-
-    // Actionsheet separator
-    .k-actionsheet .k-hr {
-        border-color: $kendo-actionsheet-border;
-    }
-
-
-    // Adaptive Actionsheet
-    .k-adaptive-actionsheet .k-actionsheet-titlebar {
-        @include fill( $border: $kendo-adaptive-actionsheet-titlebar-border );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/action-sheet/_theme.scss" as *;
 
 
 @mixin kendo-action-sheet--theme() {

package/scss/action-sheet/_variables.scss

@@ -89,3 +89,72 @@ $kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;
 
 $kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default;
 $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/action-sheet/_variables.scss" with (
+    $kendo-actionsheet-padding-x: $kendo-actionsheet-padding-x,
+    $kendo-actionsheet-padding-y: $kendo-actionsheet-padding-y,
+    $kendo-actionsheet-width: $kendo-actionsheet-width,
+    $kendo-actionsheet-max-width: $kendo-actionsheet-max-width,
+    $kendo-actionsheet-height: $kendo-actionsheet-height,
+    $kendo-actionsheet-max-height: $kendo-actionsheet-max-height,
+    $kendo-actionsheet-border-width: $kendo-actionsheet-border-width,
+    $kendo-actionsheet-border-radius: $kendo-actionsheet-border-radius,
+    $kendo-actionsheet-font-size: $kendo-actionsheet-font-size,
+    $kendo-actionsheet-font-family: $kendo-actionsheet-font-family,
+    $kendo-actionsheet-line-height: $kendo-actionsheet-line-height,
+    $kendo-actionsheet-bg: $kendo-actionsheet-bg,
+    $kendo-actionsheet-text: $kendo-actionsheet-text,
+    $kendo-actionsheet-border: $kendo-actionsheet-border,
+    $kendo-actionsheet-shadow: $kendo-actionsheet-shadow,
+    $kendo-actionsheet-titlebar-padding-x: $kendo-actionsheet-titlebar-padding-x,
+    $kendo-actionsheet-titlebar-padding-y: $kendo-actionsheet-titlebar-padding-y,
+    $kendo-actionsheet-titlebar-border-width: $kendo-actionsheet-titlebar-border-width,
+    $kendo-actionsheet-titlebar-font-size: $kendo-actionsheet-titlebar-font-size,
+    $kendo-actionsheet-titlebar-font-family: $kendo-actionsheet-titlebar-font-family,
+    $kendo-actionsheet-titlebar-line-height: $kendo-actionsheet-titlebar-line-height,
+    $kendo-actionsheet-titlebar-gap: $kendo-actionsheet-titlebar-gap,
+    $kendo-actionsheet-titlebar-bg: $kendo-actionsheet-titlebar-bg,
+    $kendo-actionsheet-titlebar-text: $kendo-actionsheet-titlebar-text,
+    $kendo-actionsheet-titlebar-border: $kendo-actionsheet-titlebar-border,
+    $kendo-actionsheet-titlebar-gradient: $kendo-actionsheet-titlebar-gradient,
+    $kendo-actionsheet-titlebar-shadow: $kendo-actionsheet-titlebar-shadow,
+    $kendo-actionsheet-subtitle-font-size: $kendo-actionsheet-subtitle-font-size,
+    $kendo-actionsheet-subtitle-line-height: $kendo-actionsheet-subtitle-line-height,
+    $kendo-actionsheet-subtitle-text: $kendo-actionsheet-subtitle-text,
+    $kendo-actionsheet-item-min-height: $kendo-actionsheet-item-min-height,
+    $kendo-actionsheet-item-padding-x: $kendo-actionsheet-item-padding-x,
+    $kendo-actionsheet-item-padding-y: $kendo-actionsheet-item-padding-y,
+    $kendo-actionsheet-item-border-width: $kendo-actionsheet-item-border-width,
+    $kendo-actionsheet-item-spacing: $kendo-actionsheet-item-spacing,
+    $kendo-actionsheet-item-title-font-weight: $kendo-actionsheet-item-title-font-weight,
+    $kendo-actionsheet-item-title-text-transform: $kendo-actionsheet-item-title-text-transform,
+    $kendo-actionsheet-item-description-font-size: $kendo-actionsheet-item-description-font-size,
+    $kendo-actionsheet-item-description-text: $kendo-actionsheet-item-description-text,
+    $kendo-actionsheet-item-hover-bg: $kendo-actionsheet-item-hover-bg,
+    $kendo-actionsheet-item-hover-text: $kendo-actionsheet-item-hover-text,
+    $kendo-actionsheet-item-hover-border: $kendo-actionsheet-item-hover-border,
+    $kendo-actionsheet-item-hover-gradient: $kendo-actionsheet-item-hover-gradient,
+    $kendo-actionsheet-item-hover-shadow: $kendo-actionsheet-item-hover-shadow,
+    $kendo-actionsheet-item-focus-bg: $kendo-actionsheet-item-focus-bg,
+    $kendo-actionsheet-item-focus-text: $kendo-actionsheet-item-focus-text,
+    $kendo-actionsheet-item-focus-border: $kendo-actionsheet-item-focus-border,
+    $kendo-actionsheet-item-focus-gradient: $kendo-actionsheet-item-focus-gradient,
+    $kendo-actionsheet-item-focus-shadow: $kendo-actionsheet-item-focus-shadow,
+    $kendo-actionsheet-item-disabled-bg: $kendo-actionsheet-item-disabled-bg,
+    $kendo-actionsheet-item-disabled-text: $kendo-actionsheet-item-disabled-text,
+    $kendo-actionsheet-item-disabled-border: $kendo-actionsheet-item-disabled-border,
+    $kendo-actionsheet-item-disabled-gradient: $kendo-actionsheet-item-disabled-gradient,
+    $kendo-actionsheet-item-disabled-shadow: $kendo-actionsheet-item-disabled-shadow,
+    $kendo-actionsheet-item-hover-background: $kendo-actionsheet-item-hover-background,
+    $kendo-actionsheet-item-focus-background: $kendo-actionsheet-item-focus-background,
+    $kendo-actionsheet-item-disabled-opacity: $kendo-actionsheet-item-disabled-opacity,
+    $kendo-adaptive-actionsheet-font-size: $kendo-adaptive-actionsheet-font-size,
+    $kendo-adaptive-actionsheet-titlebar-border-width: $kendo-adaptive-actionsheet-titlebar-border-width,
+    $kendo-adaptive-actionsheet-titlebar-padding-y: $kendo-adaptive-actionsheet-titlebar-padding-y,
+    $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-x,
+    $kendo-adaptive-actionsheet-titlebar-border: $kendo-adaptive-actionsheet-titlebar-border,
+    $kendo-adaptive-actionsheet-content-padding-y: $kendo-adaptive-actionsheet-content-padding-y,
+    $kendo-adaptive-actionsheet-content-padding-x: $kendo-adaptive-actionsheet-content-padding-x,
+    $kendo-adaptive-actionsheet-footer-padding-y: $kendo-adaptive-actionsheet-footer-padding-y,
+    $kendo-adaptive-actionsheet-footer-padding-x: $kendo-adaptive-actionsheet-footer-padding-x
+);