@progress/kendo-theme-default 5.2.1-dev.2 → 5.2.1-dev.5

package/dist/all.scss

@@ -7454,8 +7454,6 @@ $popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !d
     }
     .k-animation-container {
         @include border-bottom-radius-only( $kendo-border-radius-md );
-
-        .k-popup {}
     }
 
     .k-animation-container-shown {
@@ -9022,26 +9020,35 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             margin: 0;
         }
 
+        &::placeholder {
+            color: $kendo-input-placeholder-text;
+            opacity: $kendo-input-placeholder-opacity;
+            user-select: none;
+        }
+        &:-ms-input-placeholder {
+            color: $kendo-input-placeholder-text;
+        }
+    }
+
+    // Input and Textarea
+    .k-input {}
+    input.k-input,
+    textarea.k-textarea {
+        padding: $kendo-input-padding-y $kendo-input-padding-x;
+
         &:disabled,
-        &[disabled],
-        &.k-disabled {
+        &[disabled] {
             @include disabled( $disabled-styling );
 
-            [disabled],
-            .k-disabled,
-            .k-state-disabled {
+            [disabled] &,
+            .k-disabled &,
+            .k-state-disabled & {
                 opacity: 1;
                 filter: grayscale(0);
             }
         }
     }
 
-    // Input
-    .k-input {}
-    input.k-input {
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
-    }
-
 
     // Picker
     .k-picker {
@@ -9050,6 +9057,18 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     select.k-picker {
         padding: $kendo-input-padding-y $kendo-input-padding-x;
         appearance: auto;
+
+        &:disabled,
+        &[disabled] {
+            @include disabled( $disabled-styling );
+
+            [disabled] &,
+            .k-disabled &,
+            .k-state-disabled & {
+                opacity: 1;
+                filter: grayscale(0);
+            }
+        }
     }
 
 
@@ -9423,6 +9442,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 $kendo-input-hover-bg,
                 $kendo-input-hover-border
             );
+            @include box-shadow( $kendo-input-hover-shadow );
         }
 
         // Focus
@@ -9497,6 +9517,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 $kendo-picker-hover-border,
                 $kendo-picker-hover-gradient
             );
+            @include box-shadow( $kendo-picker-hover-shadow );
         }
 
         // Focus
@@ -9629,7 +9650,6 @@ $floating-label-focus-text: null !default;
             cursor: text;
             transform-origin: left center;
             transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, left $floating-label-transition;
-            pointer-events: none;
         }
 
         > .k-widget {
@@ -9637,17 +9657,20 @@ $floating-label-focus-text: null !default;
             width: auto;
         }
 
-        &.k-state-empty {
+        &.k-state-empty,
+        &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
                 left: $floating-label-offset-x;
                 transform: scale( $floating-label-scale );
+                pointer-events: none;
             }
         }
 
         > .k-label,
         // &:focus-within > .k-label,
-        &.k-state-focused > .k-label {
+        &.k-state-focused > .k-label,
+        &.k-focus > .k-label {
             top: $floating-label-focus-offset-y;
             left: $floating-label-focus-offset-x;
             transform: scale( $floating-label-focus-scale );
@@ -9668,9 +9691,11 @@ $floating-label-focus-text: null !default;
 
             > .k-label {
                 transform-origin: right center;
+                transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
             }
 
-            &.k-state-empty {
+            &.k-state-empty,
+            &.k-empty {
                 > .k-label {
                     left: auto;
                     right: $floating-label-offset-x;
@@ -9679,11 +9704,12 @@ $floating-label-focus-text: null !default;
 
             > .k-label,
             // &:focus-within > .k-label,
-            &.k-state-focused > .k-label {
+            &.k-state-focused > .k-label,
+            &.k-focus > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
-            &:focus-within {
+            &:focus-within > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
@@ -10962,7 +10988,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the chip.
 /// @group chip
-$kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text ) !default;
+$kendo-chip-base-bg: $kendo-button-text !default;
 
 /// Theme colors map for the chip.
 /// @group chip
@@ -13519,6 +13545,7 @@ $fieldset-legend-border: null !default;
         @extend .k-actions;
         margin-top: 2 * $form-field-margin-top;
         padding: 0;
+        overflow: visible;
     }
 
     // Form Hint/Error Messages
@@ -17419,7 +17446,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
 $colorgradient-input-width: 46px !default;
 $colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
 $colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !default;
-$colorgradient-input-label-text: $disabled-text !default;
+$colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
 $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
@@ -18287,211 +18314,15 @@ $kendo-daterange-picker-input-width: 10em;
 // #region @import "_layout.scss"; -> packages/default/scss/dropdowngrid/_layout.scss
 @include exports("dropdowngrid/layout") {
 
-    // Dropdown grid
+    // DropdownGrid
     .k-dropdown-grid {}
 
+    // DropdowGrid Popup
     .k-dropdowngrid-popup {
         overflow: hidden;
     }
-    .k-dropdowngrid-popup .k-virtual-wrap {
-        margin: 0;
-    }
-
-    .k-dropdowngrid-popup .k-list-scroller {
-        overflow-x: hidden;
-    }
-
-    // Grid list
-    .k-grid-list {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        max-width: none;
-        border-width: 0;
-        border-collapse: collapse;
-        border-spacing: 0;
-        table-layout: fixed;
-        empty-cells: show;
-        outline: none;
-        display: table;
-        list-style: none;
-    }
-
-
-    // Header
-    .k-dropdowngrid-popup .k-grid-header {
-        border-width: 0 0 1px;
-        border-style: solid;
-        border-color: inherit;
-        font-size: $grid-header-font-size;
-        display: block;
-    }
-    .k-dropdowngrid-popup .k-grid-header-wrap {
-        border-width: 0 $grid-cell-vertical-border-width 0 0;
-        border-style: solid;
-        border-color: inherit;
-        vertical-align: top;
-        display: inline-block;
-        overflow: hidden;
-    }
-    .k-dropdowngrid-popup .k-grid-header table {
-        margin-bottom: -1px;
-        width: 100%;
-        max-width: none;
+    .k-dropdowngrid-popup > .k-data-table {
         border-width: 0;
-        border-collapse: collapse;
-        border-spacing: 0;
-        table-layout: fixed;
-        empty-cells: show;
-        outline: none;
-    }
-    .k-dropdowngrid-popup .k-grid-header .k-header {
-        padding: $grid-header-padding-y $grid-header-padding-x;
-        border-width: 0 0 0 $grid-cell-vertical-border-width;
-        border-style: solid;
-        font-weight: normal;
-        text-align: left;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-
-        &:first-child {
-            border-left: 0;
-        }
-    }
-
-
-    // Rows
-    .k-grid-list > .k-item {
-        box-sizing: border-box;
-        display: table-row;
-        position: relative;
-        cursor: pointer;
-    }
-    .k-grid-list > .k-item > .k-cell,
-    .k-grid-list > .k-item > .k-group,
-    .k-grid-list > .k-item > .k-spacer-group {
-        box-sizing: border-box;
-        display: table-cell;
-        vertical-align: middle;
-    }
-    .k-grid-list.k-virtual-list > .k-item > .k-cell,
-    .k-grid-list.k-virtual-list > .k-item > .k-group,
-    .k-grid-list.k-virtual-list > .k-item > .k-spacer-group {
-        display: inline-block;
-    }
-    .k-grid-list > .k-item:last-child > .k-cell,
-    .k-grid-list > .k-item:last-child > .k-group-cell,
-    .k-grid-list > .k-item:last-child > .k-spacer-cell {
-        border-bottom-width: 0;
-    }
-
-
-    // Cells
-    .k-grid-list > .k-item > .k-cell {
-        padding: $grid-cell-padding-y $grid-cell-padding-x;
-        border-width: 0 0 $grid-cell-horizontal-border-width $grid-cell-vertical-border-width;
-        border-style: solid;
-        text-align: left;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-
-        &:first-child {
-            border-left: 0;
-        }
-    }
-
-
-    // Grouping
-    .k-dropdowngrid-popup .k-group-header,
-    .k-dropdowngrid-popup .k-outer-group-header {
-        margin: 0;
-        padding: $grid-header-padding-y $grid-header-padding-x;
-        min-height: auto;
-        font-size: inherit;
-        text-align: left;
-        font-weight: bold;
-    }
-    .k-grid-list > .k-item.k-first {
-        border-top: 1px solid currentColor;
-    }
-    .k-grid-list > .k-item > .k-group-cell,
-    .k-grid-list > .k-item > .k-spacer-cell {
-        padding: 0;
-        width: 0;
-        border-left-width: 0;
-        border-right-width: 0;
-        overflow: visible;
-        position: relative;
-    }
-    .k-grid-list > .k-item > .k-group-cell > span {
-        padding: 0 ($grid-cell-padding-x / 2);
-        font-size: .75em;
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-    .k-grid-list > .k-outer-group-header {
-        height: calc( #{$grid-header-padding-y * 2} + (#{$font-size} * #{$line-height}) );
-        display: table-row;
-        position: relative;
-    }
-    .k-grid-list > .k-outer-group-header > strong {
-        padding: $grid-header-padding-y $grid-header-padding-x;
-        width: 100%;
-        box-sizing: border-box;
-        position: absolute;
-        left: 0;
-    }
-
-
-    // Footer
-    .k-dropdowngrid-popup .k-footer {
-        padding: $grid-footer-padding-y $grid-footer-padding-x;
-        border-width: 1px 0 0;
-        border-style: solid;
-        text-align: left;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        position: relative;
-        flex-shrink: 0;
-    }
-
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        &.k-dropdowngrid-popup .k-grid-header-wrap,
-        .k-dropdowngrid-popup .k-grid-header-wrap {
-            border-right-width: 0;
-            border-left-width: $grid-cell-vertical-border-width;
-        }
-        &.k-dropdowngrid-popup .k-grid-header .k-header,
-        .k-dropdowngrid-popup .k-grid-header .k-header,
-        .k-grid-list > .k-item > .k-cell {
-            border-left-width: 0;
-            border-right-width: $grid-cell-vertical-border-width;
-            text-align: right;
-        }
-        &.k-dropdowngrid-popup .k-grid-header .k-header:first-child,
-        .k-dropdowngrid-popup .k-grid-header .k-header:first-child,
-        .k-grid-list > .k-item > .k-cell:first-child {
-            border-right-width: 0;
-        }
-        div.k-dropdowngrid-popup .k-group-header,
-        div.k-dropdowngrid-popup .k-outer-group-header {
-            text-align: right;
-        }
-        .k-grid-list > .k-item > .k-group-cell > span {
-            right: auto;
-            left: 0;
-        }
-        .k-grid-list > .k-outer-group-header > strong {
-            left: auto;
-            right: 0;
-        }
     }
 
 }
@@ -18503,91 +18334,6 @@ $kendo-daterange-picker-input-width: 10em;
     // Dropdown grid
     .k-dropdown-grid {}
 
-    // Dropdowngrid
-    .k-dropdowngrid-popup {
-        border-color: $grid-border;
-        color: $grid-text;
-        background-color: $grid-bg;
-    }
-
-
-    // Header
-    .k-dropdowngrid-popup .k-header,
-    .k-dropdowngrid-popup .k-grid-header {
-        border-color: $grid-header-border;
-        color: $grid-header-text;
-        background-color: $grid-header-bg;
-    }
-
-
-    // Footer
-    .k-dropdowngrid-popup .k-footer {
-        border-color: $grid-header-border;
-        color: $grid-header-text;
-        background-color: $grid-header-bg;
-    }
-
-
-    // Group header
-    .k-dropdowngrid-popup .k-group-header,
-    .k-dropdowngrid-popup .k-outer-group-header {
-        border-color: $grid-header-border;
-        color: $grid-header-text;
-        background-color: $grid-header-bg;
-    }
-    .k-grid-list > .k-group-header,
-    .k-grid-list > .k-outer-group-header {
-        background: none;
-        box-shadow: none;
-    }
-
-
-    // Alt
-    .k-grid-list > .k-item:nth-child(2n) {
-        background-color: $grid-alt-bg;
-    }
-    .k-grid-list > .k-outer-group-header:nth-child(2n) {
-
-        > strong {
-            background-color: $grid-alt-bg;
-        }
-    }
-
-
-    // Cells
-    .k-dropdowngrid-popup .k-cell {
-        border-color: $grid-border;
-    }
-
-
-    // Interactive states
-    .k-dropdowngrid-popup .k-item.k-state-hover,
-    .k-dropdowngrid-popup .k-item:hover {
-        border-color: $grid-hovered-border;
-        color: $grid-hovered-text;
-        background-color: $grid-hovered-bg;
-    }
-    .k-dropdowngrid-popup .k-item.k-state-selected {
-        border-color: $grid-selected-border;
-        color: $grid-selected-text;
-        background-color: $grid-selected-bg;
-    }
-    .k-dropdowngrid-popup .k-item.k-state-focused {
-        box-shadow: $grid-focused-shadow;
-    }
-
-
-    // Grouping
-    .k-dropdowngrid-popup .k-group-cell span {
-        background-color: $grid-text;
-        color: $grid-bg;
-    }
-    .k-grid-list > .k-item.k-last > .k-cell,
-    .k-grid-list > .k-item.k-last > .k-group-cell,
-    .k-grid-list > .k-item.k-last > .k-spacer-cell {
-        border-bottom-color: $grid-text;
-    }
-
 }
 
 // #endregion
@@ -20091,7 +19837,7 @@ $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;
 $dropzone-note-spacing: null !default;
-$dropzone-note-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-note-text: $subtle-text !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/dropzone/_layout.scss
@@ -21534,8 +21280,9 @@ $actionsheet-item-icon-size: null !default;
 
 $actionsheet-item-title-font-weight: null !default;
 $actionsheet-item-title-text-transform: null !default;
+
 $actionsheet-item-description-font-size: .875em !default;
-$actionsheet-item-description-opacity: .75 !default;
+$actionsheet-item-description-text: $subtle-text !default;
 
 $actionsheet-item-hover-bg: $hovered-bg !default;
 $actionsheet-item-hover-text: null !default;
@@ -21648,7 +21395,6 @@ $actionsheet-item-disabled-shadow: null !default;
     }
     .k-actionsheet-item-description {
         font-size: $actionsheet-item-description-font-size;
-        opacity: $actionsheet-item-description-opacity;
     }
 
 
@@ -21740,6 +21486,12 @@ $actionsheet-item-disabled-shadow: null !default;
     .k-actionsheet-item {}
 
 
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+        @include fill( $color: $actionsheet-item-description-text );
+    }
+
+
     // Actionsheet action
     .k-actionsheet-action {
 
@@ -26054,7 +25806,7 @@ $expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-title-text: $primary !default;
 
-$expander-header-sub-title-opacity: .5 !default;
+$expander-header-sub-title-text: $subtle-text !default;
 
 $expander-content-padding-x: $padding-x * 2 !default;
 $expander-content-padding-y: $padding-y * 4 !default;
@@ -26177,7 +25929,7 @@ $expander-content-padding-y: $padding-y * 4 !default;
     }
 
     .k-expander-sub-title {
-        opacity: $expander-header-sub-title-opacity;
+        color: $expander-header-sub-title-text;
     }
 }
 
@@ -28505,7 +28257,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
         }
 
-        .k-header > .k-link > .k-icon {
+        .k-cell-inner > .k-link > .k-icon {
             &.k-i-sort-desc-sm,
             &.k-i-sort-asc-sm {
                 vertical-align: text-top;
@@ -28938,6 +28690,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
+        justify-content: inherit;
         overflow: hidden;
 
         > .k-link {
@@ -28946,6 +28699,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             display: flex;
             flex-flow: row nowrap;
             align-items: center;
+            justify-content: inherit;
             flex: 1;
             overflow: hidden;
 
@@ -33340,7 +33094,7 @@ $taskboard-card-selected-shadow: none !default;
 
 $taskboard-card-header-text: $primary !default;
 $taskboard-card-header-focus-text: $primary-darker !default;
-$taskboard-card-header-hover-text: $primary-lighter !default;
+$taskboard-card-header-hover-text: $primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;

package/dist/default-ocean-blue.scss

@@ -0,0 +1,43 @@
+$primary: #1274AC;
+$secondary: #757575;
+$tertiary: #226581;
+$info: #0058E9;
+$success: #33a600;
+$warning: #F5A600;
+$error: #D51923;
+$light: #757575;
+$body-text: #424242;
+$body-bg: #ffffff;
+$heading-text: #272727;
+$subtle-text: #666666;
+$disabled-text: #8f8f8f;
+$component-text: #424242;
+$component-bg: #ffffff;
+$base-text: #424242;
+$base-bg: #fafafa;
+$hovered-text: #424242;
+$hovered-bg: #ececec;
+$selected-text: #ffffff;
+$selected-bg: #1274AC;
+$kendo-button-text: #424242;
+$kendo-button-bg: #f5f5f5;
+$kendo-flat-button-hover-opacity: 4%;
+$kendo-flat-button-active-opacity: 6%;
+$kendo-flat-button-selected-opacity: 8%;
+$link-text: #1274AC;
+$link-hover-text: #0f6190;
+$series-a: #1274AC;
+$series-b: #ffd246;
+$series-c: #78d237;
+$series-d: #28b4c8;
+$series-e: #2d73f5;
+$series-f: #aa46be;
+$scheduler-event-bg: #1274AC;
+$scheduler-event-selected-bg: #0f6190;
+$pager-number-text: #424242;
+$pager-number-hover-bg: #ececec;
+$pager-number-hover-text: #424242;
+$pager-number-selected-bg: #1274AC;
+$pager-number-selected-text: #ffffff;
+
+@import "all.scss";

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ff6358",
         "#ffd246",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#000000",
         "#151515",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.2",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#50686e",