@progress/kendo-theme-fluent 5.7.0 → 5.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,11 +44,11 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-font-icons": "^0.2.0",
-    "@progress/kendo-theme-utils": "^5.7.0"
+    "@progress/kendo-font-icons": "^0.3.0",
+    "@progress/kendo-theme-utils": "^5.8.0"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "5e316441f8406d4e3ef94f189ae71304cf7f6a15"
+  "gitHead": "2e623d96036e764e51218c1b9d8b97d17eb036b5"
 }

package/scss/adaptive/_layout.scss

@@ -0,0 +1,475 @@
+@use "../core/_variables.scss" as *;
+@use "../core/color-system/_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+@use "../listgroup/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-adaptive--layout() {
+
+    .k-pane-wrapper {
+        border-width: var( --kendo-adaptive-border-width, #{$kendo-adaptive-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-adaptive-font-family, #{$kendo-adaptive-font-family} );
+        font-size: var( --kendo-adaptive-font-size, #{$kendo-adaptive-font-size} );
+        line-height: var( --kendo-adaptive-line-height, #{$kendo-adaptive-line-height} );
+        display: block;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        .k-pane {
+            width: 100%;
+            height: 100%;
+            user-select: none;
+            box-sizing: border-box;
+            font-family: sans-serif;
+            overflow-x: hidden;
+        }
+
+        .k-view {
+            top: 0;
+            left: 0;
+            position: relative;
+            border: 0;
+            box-sizing: border-box;
+            outline: 0;
+            font-family: var( --kendo-adaptive-font-family, #{$kendo-adaptive-font-family} );
+            font-size: var( --kendo-adaptive-font-size, #{$kendo-adaptive-font-size} );
+            line-height: var( --kendo-adaptive-line-height, #{$kendo-adaptive-line-height} );
+            display: flex;
+            height: 100%;
+            width: 100%;
+            flex-direction: column;
+            align-items: stretch;
+            align-content: stretch;
+            vertical-align: top;
+            -webkit-touch-callout: none;
+            -webkit-tap-highlight-color: $rgba-transparent;
+        }
+
+        .k-content {
+            min-height: 1px;
+            flex: 1;
+            align-items: stretch;
+            display: block;
+            width: auto;
+            overflow: hidden;
+            position: relative;
+        }
+    }
+
+}
+
+@mixin kendo-adaptive-grid--layout() {
+
+    .k-pane-wrapper {
+
+        > div.k-pane {
+            box-shadow: none;
+            font-weight: normal;
+        }
+
+        .k-popup-edit-form,
+        .k-grid-edit-form,
+        .k-grid-header-menu,
+        .k-grid-filter-menu {
+
+            .k-content {
+                overflow-y: auto;
+
+                > .k-scroll-container {
+                    position: absolute;
+                    width: 100%;
+                    min-height: 100%;
+                    box-sizing: border-box;
+                }
+            }
+        }
+
+        .k-grid-edit-form {
+
+            .k-popup-edit-form,
+            .k-edit-form-container {
+                width: auto;
+                min-width: auto;
+            }
+        }
+    }
+
+    .k-grid.k-grid-mobile {
+        border-width: 0;
+    }
+
+    .k-grid-mobile {
+        .k-resize-handle-inner::before {
+            content: "\e01e";
+            position: absolute;
+            font: 16px/1 "WebComponentsIcons"; // stylelint-disable-line
+            // The Calc is needed due to the the negative margin
+            // that removes the double bottom border of the header
+            top: calc( 50% - 1px);
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: .2em;
+        }
+
+        .k-header a {
+            -webkit-touch-callout: none;
+
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+
+            -webkit-user-drag: none;
+            -moz-user-drag: none;
+        }
+    }
+
+}
+
+@mixin kendo-adaptive-scheduler--layout() {
+
+    .k-pane-wrapper {
+
+        .k-scheduler-edit-form {
+
+            .k-recur-view {
+                padding: 0;
+                flex-direction: column;
+                align-items: stretch;
+
+                > .k-listgroup-form-row {
+                    margin: 0;
+                }
+            }
+
+            .k-recur-items-wrap {
+                width: 100%;
+                margin: -1px 0;
+            }
+
+            .k-scheduler-recur-end-wrap {
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .k-scheduler {
+        &.k-scheduler-mobile {
+            border-width: 0;
+        }
+    }
+
+    .k-scheduler-mobile {
+
+        th {
+            font-weight: normal;
+        }
+
+        .k-event:hover .k-resize-handle {
+            visibility: hidden;
+        }
+
+        .k-scheduler-toolbar {
+            padding: $kendo-toolbar-padding-y $kendo-toolbar-padding-x;
+
+            > * {
+                margin: 0;
+            }
+
+            &::before {
+                display: none;
+            }
+
+            .k-scheduler-navigation {
+                width: 100%;
+                display: flex;
+                flex-flow: row nowrap;
+                justify-content: space-between;
+                margin: 0;
+
+                .k-nav-current {
+                    line-height: 1;
+                    display: flex;
+                    flex-flow: column nowrap;
+                    align-items: center;
+                    justify-content: space-evenly;
+                    gap: 0;
+                }
+                .k-m-date-format {}
+                .k-y-date-format {
+                    font-size: 12px;
+                }
+            }
+
+            .k-scheduler-views-wrapper {
+                .k-views-dropdown {
+                    display: inline-block;
+                }
+            }
+        }
+
+        .k-scheduler-footer {
+            padding: $kendo-toolbar-padding-y $kendo-toolbar-padding-x;
+            display: flex;
+            justify-content: space-between;
+
+            > * {
+                margin: 0;
+            }
+
+            &::before {
+                display: none;
+            }
+        }
+
+        .k-scheduler-monthview {
+
+            .k-hidden {
+                height: 40px;
+            }
+
+            .k-scheduler-table td {
+                height: 40px;
+                vertical-align: top;
+                text-align: center;
+            }
+
+            .k-events-container {
+                position: absolute;
+                text-align: center;
+                height: 6px;
+                line-height: 6px;
+            }
+
+            .k-event {
+                position: static;
+                padding: 4px;
+                border-radius: 50%;
+                display: inline-block;
+                width: 4px;
+                height: 4px;
+                min-height: 0;
+                margin: 1px;
+            }
+        }
+
+        // Removing the "Days" header from the Mobile Scheduler will break the Web Scheduler
+        // Thus, the below selector is needed
+        .k-scheduler-dayview .k-mobile-header {
+
+            &.k-mobile-horizontal-header .k-scheduler-times table tr:first-child {
+                display: none;
+            }
+
+            .k-scheduler-header .k-scheduler-date-group {
+                display: none;
+            }
+        }
+
+        .k-scheduler-header-wrap > div {
+            overflow: visible;
+        }
+
+        .k-scheduler-agendaview {
+            .k-mobile-header {
+                display: none;
+            }
+
+            .k-scheduler-table {
+                table-layout: auto;
+
+                .k-scheduler-groupcolumn {
+                    width: 1%;
+                }
+
+                td {
+                    white-space: normal;
+                }
+            }
+        }
+
+        .k-mobile-header {
+            .k-scheduler-table td,
+            .k-scheduler-table th {
+                height: 1.5em;
+            }
+        }
+
+        .k-time-text,
+        .k-time-period {
+            display: block;
+            line-height: 1;
+        }
+
+        .k-time-period {
+            font-size: .7em;
+        }
+
+        .k-scheduler-table td,
+        .k-scheduler-table th {
+            height: 2em;
+            vertical-align: middle;
+        }
+
+        .k-scheduler-datecolumn-wrap {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .k-task {
+            display: flex;
+            align-items: center;
+
+            .k-scheduler-mark {
+                border-radius: 50%;
+            }
+
+            .k-i-reload,
+            .k-i-arrow-rotate-cw {
+                font-size: 1em;
+                margin-right: .5em;
+            }
+
+            .k-scheduler-task-text {
+                flex: 1 1 0%;
+            }
+        }
+
+        .k-scheduler-times,
+        .k-scheduler-agenda {
+
+            .k-scheduler-group-cell,
+            .k-scheduler-groupcolumn {
+                vertical-align: top;
+
+                .k-scheduler-group-text {
+                    writing-mode: vertical-lr;
+                    transform: rotate(180deg);
+                    white-space: nowrap;
+                }
+            }
+        }
+
+        .k-scrollbar-h tr + tr .k-scheduler-times {
+            border-bottom-width: 0;
+        }
+    }
+
+}
+
+@mixin kendo-adaptive-common--layout() {
+
+    .k-pane-wrapper {
+
+        .k-appbar {
+            padding: map-get( $kendo-spacing, 1 );
+        }
+
+        .k-list-title,
+        .k-filter-help-text {
+            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            display: block;
+        }
+
+        .k-listgroup-title {
+            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
+        .k-listgroup {
+
+            .k-listgroup-item {
+                border-color: inherit;
+            }
+        }
+        .k-listgroup + .k-listgroup {
+            margin-top: map-get( $kendo-spacing, 4 );
+        }
+
+        // Column menu
+        .k-column-menu {
+            padding: map-get( $kendo-spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $kendo-spacing, 2 );
+
+            .k-filter-item .k-filterable * {
+                pointer-events: none;
+            }
+
+            .k-list-title,
+            .k-listgroup-title {
+                padding: 0;
+            }
+
+            .k-listgroup {
+                margin-inline: -#{map-get( $kendo-spacing, 2 )};
+            }
+        }
+
+        // Filter menu
+        .k-filter-menu {
+            padding: map-get( $kendo-spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $kendo-spacing, 2 );
+
+            .k-list-title {
+                padding: 0;
+            }
+
+            .k-list-filter {
+                padding: 0;
+                display: flex;
+                flex-flow: column nowrap;
+                gap: inherit;
+            }
+
+            .k-filter-tools {
+                display: flex;
+                flex-flow: row nowrap;
+                gap: inherit;
+            }
+
+            .k-listgroup {
+                margin-inline: -#{map-get( $kendo-spacing, 2 )};
+            }
+        }
+
+        .k-popup-edit-form {
+
+            .k-recur-editor-wrap {
+                display: flex;
+            }
+
+            .k-mobiletimezoneeditor {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                position: relative;
+                flex: 1 1 auto;
+            }
+        }
+
+        .k-multicheck-wrap.k-listgroup {
+            overflow-y: auto;
+        }
+
+        // Pager
+        .k-pager-wrap.k-pager-sm,
+        .k-pager.k-pager-sm {
+            justify-content: center;
+
+            .k-pager-refresh {
+                display: none;
+            }
+
+        }
+    }
+
+}

package/scss/adaptive/_theme.scss

@@ -0,0 +1,92 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-adaptive--theme() {
+
+    .k-pane-wrapper,
+    .k-view {
+        @include fill(
+            var( --kendo-adaptive-text, #{$kendo-adaptive-text} ),
+            var( --kendo-adaptive-bg, #{$kendo-adaptive-bg} ),
+            var( --kendo-adaptive-border, #{$kendo-adaptive-border} )
+        );
+    }
+
+    .k-pane-wrapper .k-pane {
+        > .k-view > .k-content {
+            background-position: 50% 50%;
+            background-color: var( --kendo-adaptive-content-bg, #{$kendo-adaptive-content-bg} );
+        }
+
+        .k-grid-mobile {
+            .k-column-active + th.k-header {
+                border-left-color: var( --kendo-component-bg, inherit );
+            }
+
+            .k-resize-handle-inner::before {
+                background-color: var( --kendo-component-bg, inherit );
+            }
+        }
+
+        .k-scheduler-mobile {
+            .k-nav-current {
+                color: var( --kendo-adaptive-scheduler-current-text, #{$kendo-adaptive-scheduler-current-text} );
+            }
+
+            .k-scheduler-times,
+            .k-scheduler-header,
+            .k-scheduler-groupcolumn,
+            .k-mobile-scheduler-agendadate {
+                color: var( --kendo-adaptive-scheduler-base-text, #{$kendo-adaptive-scheduler-base-text} );
+            }
+
+            .k-time-period,
+            .k-mobile-scheduler-agendaweekday {
+                color: var( --kendo-adaptive-scheduler-subtle-text, #{$kendo-adaptive-scheduler-subtle-text} );
+            }
+
+            .k-scheduler-times,
+            .k-scheduler-header,
+            .k-scheduler-header-wrap,
+            .k-scheduler-datecolumn,
+            .k-scheduler-groupcolumn,
+            .k-scheduler-group-cell,
+            .k-scheduler-header-all-day {
+                background-color: var( --kendo-adaptive-content-bg, #{$kendo-adaptive-content-bg} );
+            }
+
+            .k-scheduler-toolbar .k-scheduler-tools > li {
+                display: inline-block;
+                background-color: inherit;
+            }
+        }
+
+        .k-grid-edit-form,
+        .k-grid-header-menu,
+        .k-grid-filter-menu,
+        .k-scheduler-edit-form {
+            .k-item,
+            .k-link {
+                color: var( --kendo-component-text, inherit );
+            }
+
+            .k-clear,
+            .k-select-all,
+            .k-scheduler-delete,
+            .k-scheduler-resetSeries { // sass-lint:disable-line class-name-format
+                color: var( --kendo-adaptive-menu-clear-text, #{$kendo-adaptive-menu-clear-text} );
+            }
+        }
+
+        .k-column-menu {
+            .k-listgroup-item.k-selected {
+                color: var( --kendo-adaptive-grid-sort-text, #{$kendo-adaptive-grid-sort-text} );
+                background: none;
+            }
+            .k-listgroup-item.k-selected .k-link {
+                color: inherit;
+            }
+        }
+    }
+
+}

package/scss/adaptive/_variables.scss

@@ -0,0 +1,33 @@
+@use "../core/color-system" as *;
+
+
+// Adaptive
+$kendo-adaptive-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-adaptive-text: var( --kendo-component-text, inherit ) !default;
+$kendo-adaptive-border: var( --kendo-component-border, inherit ) !default;
+
+$kendo-adaptive-content-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-adaptive-content-text: var( --kendo-component-text, inherit ) !default;
+
+$kendo-adaptive-menu-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-menu-text: $white !default;
+
+$kendo-adaptive-menu-clear-text: get-theme-color-var( primary-100 ) !default;
+
+$kendo-adaptive-menu-item-border: var( --kendo-component-border, inherit ) !default;
+$kendo-adaptive-menu-title-text: var( --kendo-component-text, inherit ) !default;
+
+$kendo-adaptive-border-width: 1px !default;
+$kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-adaptive-font-size: var( --kendo-font-size, 1rem ) !default;
+$kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
+
+
+// Adaptive Grid
+$kendo-adaptive-grid-sort-text: get-theme-color-var( primary-100 ) !default;
+
+
+// Adaptive Scheduler
+$kendo-adaptive-scheduler-current-text: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-scheduler-base-text: inherit !default;
+$kendo-adaptive-scheduler-subtle-text: var( --kendo-subtle-text, inherit ) !default;

package/scss/adaptive/index.scss

@@ -0,0 +1,32 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "adaptive",
+    dependencies: (
+        "checkbox",
+        "radio",
+        "switch",
+        "toolbar",
+        "listgroup"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "adaptive" ) {
+        @include kendo-adaptive--layout();
+        @include kendo-adaptive-grid--layout();
+        @include kendo-adaptive-scheduler--layout();
+        @include kendo-adaptive-common--layout();
+        @include kendo-adaptive--theme();
+    }
+}

package/scss/badge/_variables.scss

@@ -24,13 +24,13 @@ $kendo-badge-font-weight: var( --kendo-font-weight, normal ) !default;
 /// @group badge
 $kendo-badge-padding-x-sm: map-get( $kendo-spacing, thin ) !default;
 $kendo-badge-padding-x-md: map-get( $kendo-spacing, 1 ) !default;
-$kendo-badge-padding-x-lg: calc( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+$kendo-badge-padding-x-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
 
 /// Vertical padding of the badge.
 /// @group badge
 $kendo-badge-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
 $kendo-badge-padding-y-md: map-get( $kendo-spacing, 1 ) !default;
-$kendo-badge-padding-y-lg: calc( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+$kendo-badge-padding-y-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
 
 /// Font sizes of the badge.
 /// @group badge

package/scss/button/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../core" as *;
 @use "_variables.scss" as *;
 
@@ -76,7 +77,7 @@
         $_font-size: map-get( $size-props, font-size );
         $_line-height: map-get( $size-props, line-height );
 
-        $_icon-button-padding: calc( $_padding-x / 2 );
+        $_icon-button-padding: math.div( $_padding-x, 2 );
 
         .k-button-#{$size} {
             --INTERNAL--kendo-button-padding-x: var( --kendo-button-#{$size}-padding-x, #{$_padding-x} );

package/scss/button/_variables.scss

@@ -22,8 +22,8 @@ $kendo-button-padding-y-lg: map-get( $kendo-spacing, 2 ) !default;
 /// Font sizes of the button.
 /// @group button
 $kendo-button-font-size-sm: var( --kendo-font-size, inherit ) !default;
-$kendo-button-font-size-md: var(--kendo-font-size, inherit) !default;
-$kendo-button-font-size-lg: var(--kendo-font-size, inherit) !default;
+$kendo-button-font-size-md: var( --kendo-font-size, inherit) !default;
+$kendo-button-font-size-lg: var( --kendo-font-size, inherit) !default;
 
 /// Line heights used along with $font-size.
 /// @group button