@progress/kendo-theme-default 5.0.0-beta.2 → 5.0.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "prepublishOnly": "echo 'no prebublish for default theme'",
     "postpublish": "echo 'no postpublish for default theme'"
   },
-  "gitHead": "13e32ba172a1fa6fc172c9d989974ebfccef19e6"
+  "gitHead": "a508e10c60c1c14b569a908ef7f8584cf449a421"
 }

package/scss/adaptive/_layout.scss

@@ -100,9 +100,6 @@
             }
         }
 
-        .k-grid .k-grid-search {
-            width: 100%;
-        }
     }
 
     .k-grid.k-grid-mobile {

package/scss/appbar/_layout.scss

@@ -22,7 +22,6 @@
 
         > * {
             flex-shrink: 0;
-
         }
 
         // Appbar section
@@ -32,15 +31,16 @@
             align-items: center;
         }
 
+
         // Appbar Spacer
         .k-appbar-spacer {
             flex: 1 0 auto;
         }
-
         .k-appbar-spacer-sized {
             flex-grow: 0;
         }
 
+
         // Separator
         .k-appbar-separator {
             margin: 0;
@@ -50,12 +50,24 @@
             border-width: 0 0 0 1px;
             display: inline-block;
         }
+
+
+        // Input
+        .k-input,
+        .k-picker:not(.k-colorpicker) {
+            width: 10em;
+        }
+
     }
 
+
+    // Static appbar
     .k-appbar-static {
         position: static;
     }
 
+
+    // Sticky appbar
     .k-appbar-sticky {
         width: 100%;
         position: sticky;
@@ -63,17 +75,20 @@
         z-index: $appbar-zindex;
     }
 
+
+    // Fixed appbar
     .k-appbar-fixed {
         width: 100%;
         position: fixed;
         z-index: 1;
     }
 
+
+    // Appbar position
     .k-appbar-top {
         top: 0;
         bottom: auto;
     }
-
     .k-appbar-bottom {
         top: auto;
         bottom: 0;
@@ -82,4 +97,5 @@
             bottom: 0;
         }
     }
+
 }

package/scss/button/_layout.scss

@@ -361,7 +361,7 @@
     .k-button {
 
         &::after {
-            @include border-radius( $kendo-button-border-radius );
+            @include border-radius( inherit );
             content: "";
             opacity: 0;
             display: none;
@@ -376,40 +376,3 @@
         }
     }
 }
-
-
-
-
-@include exports( "button/ie-compat" ) {
-
-    .k-ie {
-
-        .k-button,
-        .k-button-group {
-            display: inline-block;
-            overflow: visible; // IE9
-        }
-
-        .k-button-icontext {
-
-            .k-icon,
-            .k-image,
-            .k-sprite {
-                margin: 0 $icon-spacing 0 0;
-            }
-
-            &.k-rtl,
-            .k-rtl &,
-            &[dir="rtl"],
-            [dir="rtl"] & {
-                .k-icon,
-                .k-image,
-                .k-sprite {
-                    margin: 0 0 0 $icon-spacing;
-                }
-            }
-        }
-
-    }
-
-}

package/scss/card/_variables.scss

@@ -38,15 +38,15 @@ $card-footer-text: $header-text !default;
 $card-footer-border: $header-border !default;
 
 $card-title-margin-bottom: map-get( $spacing, sm ) !default;
-$card-title-font-size: $font-size-md !default;
-$card-title-font-family: inherit !default;
-$card-title-line-height: normal !default;
+$card-title-font-size: $h5-font-size !default;
+$card-title-font-family: null !default;
+$card-title-line-height: 1.25 !default;
 $card-title-font-weight: $font-weight-normal !default;
 $card-title-letter-spacing: null !default;
 
 $card-subtitle-margin-bottom: map-get( $spacing, sm ) !default;
 $card-subtitle-font-size: $font-size-sm !default;
-$card-subtitle-font-family: inherit !default;
+$card-subtitle-font-family: null !default;
 $card-subtitle-line-height: normal !default;
 $card-subtitle-font-weight: $font-weight-normal !default;
 $card-subtitle-letter-spacing: null !default;

package/scss/chat/_layout.scss

@@ -288,6 +288,7 @@
         .k-input {}
 
         .k-button {
+            border-width: 0;
             flex-shrink: 0;
 
             svg {
@@ -442,9 +443,6 @@
         }
 
         .k-button {
-            border-color: transparent;
-            color: inherit;
-            background: none;
             flex: none;
         }
 

package/scss/chat/_theme.scss

@@ -98,14 +98,6 @@
             $chat-toolbar-bg,
             $chat-toolbar-border
         );
-
-        .k-scroll-button {
-            @include fill( $bg: $chat-bg );
-            @include box-shadow( $chat-toolbar-box-scroll-button-shadow );
-        }
-        .k-scroll-button:hover {
-            @include fill( $bg: $chat-bg );
-        }
     }
 
 }

package/scss/chat/_variables.scss

@@ -75,5 +75,3 @@ $chat-message-box-bg: $kendo-input-bg !default;
 $chat-message-box-text: $kendo-input-text !default;
 $chat-message-box-border: inherit !default;
 $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
-
-$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;

package/scss/checkbox/_index.scss

@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 
 

package/scss/checkbox/_layout.scss

@@ -12,6 +12,7 @@
         background-repeat: no-repeat;
         background-size: contain;
         display: inline-block;
+        flex: none;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
@@ -119,6 +120,26 @@
         @include disabled( $disabled-styling );
     }
 
+
+    // Checkbox wrap
+    .k-checkbox-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+
     // Checkbox label
     .k-checkbox-label {
         margin: 0;
@@ -177,7 +198,7 @@
 
     // Empty label
     .k-checkbox-label:empty {
-        display: none;
+        display: none !important; // sass-lint:disable-line no-important
     }
 
 
@@ -189,25 +210,32 @@
 
     // Checkbox list
     .k-checkbox-list {
-        margin: $kendo-checkbox-list-margin;
-        padding: $kendo-checkbox-list-padding;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
         list-style: none;
-
-        .k-checkbox-item {
-            padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
-        }
     }
-
-    .k-list-horizontal {
-        .k-checkbox-item {
-            display: inline-block;
-            margin: 0 $kendo-checkbox-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
+    .k-checkbox-item,
+    .k-checkbox-list-item {
+        padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: map-get( $spacing, 1 );
+
+        .k-checkbox-label {
+            line-height: inherit;
         }
     }
+    .k-checkbox-list-horizontal,
+    .k-checkbox-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-checkbox-list-spacing;
+    }
 
 
     // RTL
@@ -228,17 +256,6 @@
             margin-right: 0;
             margin-left: $kendo-checkbox-label-margin-x;
         }
-
-        .k-list-horizontal {
-            .k-checkbox-item {
-                margin-right: 0;
-                margin-left: $kendo-checkbox-list-horizontal-item-margin-x;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 
     .k-ripple-container {

package/scss/checkbox/_variables.scss

@@ -132,21 +132,15 @@ $kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 // Checkbox list
 
-/// The list margin checkbox.
-/// @group checkbox
-$kendo-checkbox-list-margin: 0px !default;
-/// The list padding checkbox.
+/// The horizontal margin of list item of checkbox.
 /// @group checkbox
-$kendo-checkbox-list-padding: 0px !default;
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
 /// The horizontal list item padding of checkbox.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
 /// The vertical list item padding of checkbox.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-/// The horizontal margin of list item of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-horizontal-item-margin-x: 32px !default;
 
 
 // Checkbox ripple

package/scss/color-preview/_layout.scss

@@ -6,31 +6,16 @@
         height: 100%;
         border-width: $color-preview-border-width;
         border-radius: $color-preview-border-radius;
+        box-sizing: border-box;
         border-style: solid;
         display: inline-flex;
         flex-direction: row;
         flex-wrap: nowrap;
         position: relative;
         overflow: hidden;
-
-        > .k-color-preview-mask {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        &::before {
-            content: "";
-            width: 100%;
-            height: 100%;
-            display: block;
-            position: relative;
-            z-index: -1;
-        }
     }
 
+
     // Current Color
     .k-coloreditor-current-color {
         cursor: pointer;
@@ -50,23 +35,37 @@
         .k-color-preview-mask {
             width: calc( #{$icon-size} - 2px );
             height: 2px;
-            position: static;
-        }
-
-        &::before {
-            display: none;
         }
     }
 
 
-    // No Color
-    .k-no-color::before {
+    // Color Preview Mask
+    .k-color-preview-mask {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+    .k-color-preview-mask::before {
         content: "";
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
+        z-index: -1;
+        background: $color-preview-transparent-color-image;
+        background-size: contain;
+        background-position: 0 0;
+    }
+
+
+    // No Color
+    .k-no-color .k-color-preview-mask::before {
+        content: "";
+        background-color: $color-preview-no-color-bg;
+        background-image: $color-preview-no-color-image;
+        background-size: 100% 100%;
+        background-position: 0 0;
     }
 
 }

package/scss/color-preview/_theme.scss

@@ -8,24 +8,10 @@
             $color-preview-border
         );
 
-        &::before {
-            background: $color-preview-transparent-color-image;
-            background-size: contain;
-            background-position: 0;
-        }
-
         &:hover,
         &.k-hover {
             @include fill( $border: $color-preview-hover-border );
         }
     }
 
-    // No Color
-    .k-no-color::before {
-        background-color: $color-preview-no-color-bg;
-        background-image: $color-preview-no-color-image;
-        background-size: 100% 100%;
-        background-position: 0 0;
-    }
-
 }

package/scss/coloreditor/_layout.scss

@@ -26,8 +26,12 @@
     }
 
     .k-coloreditor-preview {
-        position: relative;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        justify-content: center;
         gap: $coloreditor-preview-gap;
+        position: relative;
         z-index: 1;
     }
     .k-coloreditor-preview .k-color-preview {

package/scss/coloreditor/_variables.scss

@@ -18,9 +18,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
 $coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
 
-$coloreditor-preview-gap: ( $coloreditor-spacer / 4 ) !default;
-$coloreditor-color-preview-width: 34px !default;
-$coloreditor-color-preview-height: 14px !default;
+$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-color-preview-width: 32px !default;
+$coloreditor-color-preview-height: 12px !default;
 
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;

package/scss/combobox/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("combobox/layout") {
+@include exports( "combobox/layout" ) {
 
     // Combobox
     .k-combobox {}

package/scss/combobox/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("combobox/theme") {
+@include exports( "combobox/theme" ) {
 
     // Combobox
     .k-combobox {}

package/scss/combobox/_variables.scss

@@ -1,31 +1 @@
-// Comboboxes
-$combobox-select-padding-x: 0px !default;
-$combobox-select-padding-y: 0px !default;
-
-$combobox-bg: $kendo-input-bg !default;
-$combobox-text: $kendo-input-text !default;
-$combobox-border: $kendo-input-border !default;
-
-$combobox-hovered-bg: $kendo-input-hover-bg !default;
-$combobox-hovered-text: $kendo-input-hover-text !default;
-$combobox-hovered-border: $kendo-input-hover-border !default;
-
-$combobox-focused-bg: $kendo-input-focus-bg !default;
-$combobox-focused-text: $kendo-input-focus-text !default;
-$combobox-focused-border: $kendo-input-focus-border !default;
-$combobox-focused-shadow: $kendo-input-focus-shadow !default;
-
-$combobox-select-bg: $kendo-button-bg !default;
-$combobox-select-text: $kendo-button-text !default;
-$combobox-select-border: $kendo-button-border !default;
-$combobox-select-gradient: $kendo-button-gradient !default;
-
-$combobox-select-hovered-bg: $kendo-button-hover-bg !default;
-$combobox-select-hovered-text: $kendo-button-hover-text !default;
-$combobox-select-hovered-border: $kendo-button-hover-border !default;
-$combobox-select-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$combobox-select-pressed-bg: $kendo-button-active-bg !default;
-$combobox-select-pressed-text: $kendo-button-active-text !default;
-$combobox-select-pressed-border: $kendo-button-active-border !default;
-$combobox-select-pressed-gradient: $kendo-button-active-gradient !default;
+// Combobox

package/scss/daterangepicker/_layout.scss

@@ -1,3 +1,18 @@
-@include exports("daterangepicker/layout") {
+@include exports( "daterangepicker/layout" ) {
+
+    // Daterange picker
+    .k-daterange-picker {
+        width: $kendo-input-default-width;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
+    }
+
+
+    // Alias
+    .k-daterangepicker {
+        @extend .k-daterange-picker;
+    }
 
 }

package/scss/datetimepicker/_layout.scss

@@ -1,6 +1,43 @@
 @include exports( "datetimepicker/layout" ) {
 
-    // Datetime picker
-    .k-datetimepicker {}
+    // Datetime selector
+    .k-datetime-selector {
+        display: flex;
+        transition: transform .2s;
+    }
+
+    // Wrap
+    .k-datetime-wrap {
+        width: $datetime-width;
+        overflow: hidden;
+    }
+
+    // Inner wrap
+    .k-datetime-calendar-wrap,
+    .k-datetime-time-wrap {
+        text-align: center;
+        flex: 0 0 $datetime-width;
+    }
+
+    // Tabs
+    .k-date-tab .k-datetime-selector {
+        transform: translateX(0);
+    }
+    .k-time-tab .k-datetime-selector {
+        transform: translateX(-100%);
+    }
+
+}
+
+@include exports( "datetimepicker/layout/rtl" ) {
+
+    .k-datetimepicker {
+        &[dir="rtl"],
+        .k-rtl & {
+            .k-time-tab .k-datetime-selector {
+                transform: translateX(100%);
+            }
+        }
+    }
 
 }

package/scss/editor/_layout.scss

@@ -153,6 +153,7 @@
     }
 
     // Toolbar
+    .k-editor-toolbar,
     .k-editor > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
         flex-shrink: 0;
@@ -180,13 +181,10 @@
             top: 0;
             right: 0;
             visibility: hidden;
-        }
-        .k-overflow-anchor {
-            border-width: 0;
-            padding: $toolbar-padding-y;
-            width: $toolbar-inner-calc-size;
-            height: $toolbar-inner-calc-size;
-            position: relative;
+
+            .k-overflow-anchor {
+                position: relative;
+            }
         }
 
         .k-editor-export {
@@ -304,6 +302,7 @@
         }
     }
 
+
     // Find and replace dialog
     .k-editor-find-replace {
         .k-content {
@@ -560,6 +559,24 @@
             }
         }
 
+        // Generic widgets
+        .k-numerictextbox {
+            width: 10em;
+
+            & + .k-dropdown-list {
+                width: 5em;
+            }
+
+            & + .k-colorpicker,
+            & + .k-dropdown-list {
+                margin-left: map-get( $spacing, 2 );
+            }
+        }
+
+        .k-colorpicker {
+            vertical-align: middle;
+        }
+
         .k-edit-field > .k-checkbox {
             position: relative; // fix scrolling
         }