@progress/kendo-theme-bootstrap 5.0.0-beta.1 → 5.0.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,8 +49,8 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.0.0-beta.1",
+    "@progress/kendo-theme-default": "^5.0.0-beta.2",
     "bootstrap": "^5.1.0"
   },
-  "gitHead": "5f6c640b397e7dfb0481ea1eecd8fbce7abb967f"
+  "gitHead": "13e32ba172a1fa6fc172c9d989974ebfccef19e6"
 }

package/scss/chip/_index.scss

@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../icons/_index.scss";
+@import "../button/_variables.scss";
 
 
 // Component

package/scss/chip/_variables.scss

@@ -43,50 +43,50 @@ $kendo-chip-sizes: (
     lg: ( font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg, padding: $kendo-chip-padding-x-lg )
 ) !default;
 
+/// The base background color of the chip.
+/// @group chip
+$kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text ) !default;
+
 /// Theme colors map for the chip.
 /// @group chip
 $kendo-chip-theme-colors: (
-    "base": $base-text,
+    "base": $kendo-chip-base-bg,
     "error": map-get( $theme-colors, "error" ),
     "info": map-get( $theme-colors, "info" ),
     "warning": map-get( $theme-colors, "warning" ),
     "success": map-get( $theme-colors, "success" )
 ) !default;
 
-/// The base background color of the chip.
-/// @group chip
-$kendo-chip-base-bg: $base-text !default;
-
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: rgba( $kendo-chip-base-bg, .08 ) !default;
+$kendo-chip-solid-bg: try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of solid chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-chip-base-bg !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: rgba( $kendo-chip-solid-bg, .3 ) !default;
+$kendo-chip-solid-border: try-tint( $kendo-chip-base-bg, 70% ) !default;
 /// The base shadow of solid chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-solid-bg, .16 ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: rgba( $kendo-chip-solid-bg, .08 ) !default;
+$kendo-chip-solid-focus-bg: try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of focused solid chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of hovered solid chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: rgba( $kendo-chip-solid-bg, .16 ) !default;
+$kendo-chip-solid-hover-bg: try-tint( $kendo-chip-base-bg, 84% ) !default;
 /// The base text color of hovered solid chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
 /// The base background color of selected solid chip.
 /// @group chip
-$kendo-chip-solid-selected-bg: rgba( $kendo-chip-solid-bg, .24 ) !default;
+$kendo-chip-solid-selected-bg: try-tint( $kendo-chip-base-bg, 76% ) !default;
 /// The base text color of selected solid chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;

package/scss/color-preview/_variables.scss

@@ -11,3 +11,4 @@ $color-preview-no-color-text: $error !default;
 $color-preview-no-color-border: null !default;
 
 $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
+$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

package/scss/colorpicker/_index.scss

@@ -2,8 +2,7 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
-@import "../utils/_flex.scss";
+@import "../input/_index.scss";
 @import "../button/_index.scss";
 @import "../colorpalette/_index.scss";
 @import "../colorgradient/_index.scss";

package/scss/colorpicker/_variables.scss

@@ -1,20 +1 @@
-// Colorpicker
-$colorpicker-font-family: $font-family !default;
-$colorpicker-font-size: $font-size !default;
-$colorpicker-line-height: $line-height !default;
-
-$colorpicker-bg: $kendo-button-bg !default;
-$colorpicker-text: $kendo-button-text !default;
-$colorpicker-border: $kendo-button-border !default;
-$colorpicker-gradient: $kendo-button-gradient !default;
-
-$colorpicker-hovered-bg: $kendo-button-hover-bg !default;
-$colorpicker-hovered-text: $kendo-button-hover-text !default;
-$colorpicker-hovered-border: $kendo-button-hover-border !default;
-$colorpicker-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$colorpicker-focused-bg: $kendo-button-active-bg !default;
-$colorpicker-focused-text: $kendo-button-active-text !default;
-$colorpicker-focused-border: $kendo-button-active-border !default;
-$colorpicker-focused-gradient: $kendo-button-active-gradient !default;
-$colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
+// Color picker

package/scss/dateinput/_index.scss

@@ -2,11 +2,7 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../popup/_index.scss";
-@import "../icons/_index.scss";
 
 
 // Component

package/scss/dateinput/_variables.scss

@@ -1 +1 @@
-// Dateinput
+// Date input

package/scss/datepicker/_index.scss

@@ -2,11 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
 @import "../popup/_index.scss";
-@import "../icons/_index.scss";
+@import "../calendar/_index.scss";
 
 
 // Component

package/scss/datetimepicker/_index.scss

@@ -2,11 +2,13 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
+@import "../button/_index.scss";
 @import "../popup/_index.scss";
-@import "../icons/_index.scss";
+@import "../list/_index.scss";
+@import "../calendar/_index.scss";
+@import "../timeselector/_index.scss";
+@import "../action-buttons/_index.scss";
 
 
 // Component

package/scss/datetimepicker/_variables.scss

@@ -1 +1,2 @@
-// Datetimepicker
+// DateTime
+$datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;

package/scss/filter/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../checkbox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../toolbar/_index.scss";

package/scss/gantt/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../validator/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../window/_index.scss";
 @import "../splitter/_index.scss";

package/scss/grid/_index.scss

@@ -14,7 +14,7 @@
 @import "../radio/_index.scss";
 @import "../validator/_index.scss";
 @import "../autocomplete/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../menu/_index.scss";

package/scss/grid/_variables.scss

@@ -14,7 +14,7 @@ $grid-header-font-size: null !default;
 $grid-footer-padding-x: $grid-header-padding-x !default;
 $grid-footer-padding-y: $grid-header-padding-y !default;
 
-$grid-grouping-header-padding-x: ($grid-padding-y / 2) !default;
+$grid-grouping-header-padding-x: $grid-padding-y !default;
 $grid-grouping-header-padding-y: $grid-grouping-header-padding-x !default;
 
 $grid-filter-cell-padding-x: $grid-padding-y !default;

package/scss/index.scss

@@ -53,6 +53,7 @@
 
 // Form requirements
 @import "calendar/_index.scss";
+@import "timeselector/_index.scss";
 
 
 // Augmented forms
@@ -68,7 +69,6 @@
 @import "timepicker/_index.scss";
 @import "datetimepicker/_index.scss";
 @import "daterangepicker/_index.scss";
-@import "datetime/_index.scss";
 @import "dropdowngrid/_index.scss";
 @import "dropdownlist/_index.scss";
 @import "dropdowntree/_index.scss";

package/scss/input/_variables.scss

@@ -1,58 +1,52 @@
 // Input
+$kendo-input-default-width: 100% !default;
+
 $kendo-input-border-width: $input-border-width !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
-$kendo-input-border-radius: $input-border-radius !default;
-$kendo-input-border-radius-sm: $input-border-radius-sm !default;
-$kendo-input-border-radius-lg: $input-border-radius-lg !default;
+$kendo-input-border-radius: null !default;
 
 $kendo-input-padding-x: $input-padding-x !default;
 $kendo-input-padding-y: $input-padding-y !default;
 $kendo-input-font-family: $font-family !default;
 $kendo-input-font-size: $font-size !default;
 $kendo-input-line-height: $input-line-height !default;
-$kendo-input-line-height-em: $input-line-height * 1em !default;
 
 $kendo-input-padding-x-sm: $input-padding-x-sm !default;
 $kendo-input-padding-y-sm: $input-padding-y-sm !default;
 $kendo-input-font-size-sm: $input-font-size-sm !default;
-$kendo-input-line-height-sm: $kendo-input-line-height !default;
+$kendo-input-line-height-sm: $line-height-md !default;
 
-$kendo-input-padding-x-md: $kendo-input-padding-x !default;
-$kendo-input-padding-y-md: $kendo-input-padding-y !default;
-$kendo-input-font-size-md: $kendo-input-font-size !default;
-$kendo-input-line-height-md: $kendo-input-line-height !default;
+$kendo-input-padding-x-md: $input-padding-x !default;
+$kendo-input-padding-y-md: $input-padding-y !default;
+$kendo-input-font-size-md: $input-font-size !default;
+$kendo-input-line-height-md: $line-height-md !default;
 
 $kendo-input-padding-x-lg: $input-padding-x-lg !default;
 $kendo-input-padding-y-lg: $input-padding-y-lg !default;
 $kendo-input-font-size-lg: $input-font-size-lg !default;
-$kendo-input-line-height-lg: $kendo-input-line-height !default;
-
-$kendo-input-calc-height: calc( #{$kendo-input-line-height * 1em} + #{$kendo-input-padding-y * 2} + #{$kendo-input-border-height} ) !default;
-$kendo-input-calc-height-sm: calc( #{$kendo-input-line-height-sm * 1em} + #{$kendo-input-padding-y-sm * 2} + #{$kendo-input-border-height} ) !default;
-$kendo-input-calc-height-lg: calc( #{$kendo-input-line-height-lg * 1em} + #{$kendo-input-padding-y-lg * 2} + #{$kendo-input-border-height} ) !default;
-
-$kendo-input-inner-calc-height: calc( #{$kendo-input-line-height * 1em} + #{$kendo-input-padding-y * 2} ) !default;
-$kendo-input-inner-calc-height-sm: calc( #{$kendo-input-line-height-sm * 1em} + #{$kendo-input-padding-y-sm * 2} ) !default;
-$kendo-input-inner-calc-height-lg: calc( #{$kendo-input-line-height-lg * 1em} + #{$kendo-input-padding-y-lg * 2} ) !default;
+$kendo-input-line-height-lg: $line-height-md !default;
 
 $kendo-input-sizes: (
     sm: (
         padding-x: $kendo-input-padding-x-sm,
         padding-y: $kendo-input-padding-y-sm,
         font-size: $kendo-input-font-size-sm,
-        line-height: $kendo-input-line-height-sm
+        line-height: $kendo-input-line-height-sm,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} )
     ),
     md: (
         padding-x: $kendo-input-padding-x-md,
         padding-y: $kendo-input-padding-y-md,
         font-size: $kendo-input-font-size-md,
-        line-height: $kendo-input-line-height-md
+        line-height: $kendo-input-line-height-md,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} )
     ),
     lg: (
         padding-x: $kendo-input-padding-x-lg,
         padding-y: $kendo-input-padding-y-lg,
         font-size: $kendo-input-font-size-lg,
-        line-height: $kendo-input-line-height-lg
+        line-height: $kendo-input-line-height-lg,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} )
     )
 ) !default;
 
@@ -85,6 +79,7 @@ $kendo-input-clear-value-hover-opacity: 1 !default;
 $kendo-input-values-margin-y: map-get( $spacing, thin ) !default;
 $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
 
+
 // Input actions
 $kendo-input-button-width: null !default;
 $kendo-input-button-border-width: 1px !default;
@@ -92,11 +87,6 @@ $kendo-input-spinner-width: null !default;
 $kendo-input-spinner-icon-offset: 2px !default;
 
 
-// Input icon
-$kendo-input-icon-width: calc( #{$icon-size} + #{$kendo-input-padding-y * 2} ) !default;
-$kendo-input-icon-height: calc( #{$kendo-input-line-height * $kendo-input-font-size} + #{$kendo-input-padding-y * 2} ) !default;
-
-
 // Input separator
 $kendo-input-separator-color: $kendo-input-text !default;
 $kendo-input-separator-opacity: .5 !default;

package/scss/panelbar/_variables.scss

@@ -94,3 +94,8 @@ $panelbar-item-selected-hovered-focused-bg: null !default;
 $panelbar-item-selected-hovered-focused-text: null !default;
 $panelbar-item-selected-hovered-focused-border: null !default;
 $panelbar-item-selected-hovered-focused-gradient: null !default;
+
+$panelbar-header-expanded-bg: null !default;
+$panelbar-header-expanded-text: null !default;
+$panelbar-header-expanded-border: null !default;
+$panelbar-header-expanded-gradient: null !default;

package/scss/pivotgrid/_variables.scss

@@ -54,9 +54,6 @@ $pivotgrid-configurator-content-padding-y: .25rem !default;
 $pivotgrid-configurator-fields-margin-x: 0px !default;
 $pivotgrid-configurator-fields-margin-y: ( $pivotgrid-spacer / 2 ) !default;
 
-$pivotgrid-configurator-actions-padding-x: ( $pivotgrid-spacer / 2 ) !default;
-$pivotgrid-configurator-actions-padding-y: ( $pivotgrid-spacer * .75 ) !default;
-
 $pivotgrid-configurator-vertical-width: 320px !default;
 $pivotgrid-configurator-horizontal-height: 420px !default;
 

package/scss/scheduler/_index.scss

@@ -6,7 +6,7 @@
 @import "../icons/_index.scss";
 @import "../adaptive/_index.scss";
 @import "../button/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../dialog/_index.scss";
 @import "../tooltip/_index.scss";

package/scss/spreadsheet/_index.scss

@@ -8,7 +8,7 @@
 @import "../radio/_index.scss";
 @import "../colorpicker/_index.scss";
 @import "../combobox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../upload/_index.scss";

package/scss/taskboard/_variables.scss

@@ -46,8 +46,6 @@ $taskboard-column-cards-padding-y: $taskboard-spacer * .25 !default;
 $taskboard-column-cards-padding-x: 0px !default;
 $taskboard-column-cards-gap: $taskboard-spacer * .75 !default;
 
-$taskboard-column-new-calc-height: calc( #{$kendo-input-calc-height} + #{$taskboard-column-header-padding-y * 2} ) !default;
-
 $taskboard-pane-width: $taskboard-column-width !default;
 $taskboard-pane-padding-y: null !default;
 $taskboard-pane-padding-x: null !default;

package/scss/timepicker/_index.scss

@@ -2,11 +2,11 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
+@import "../button/_index.scss";
 @import "../popup/_index.scss";
-@import "../icons/_index.scss";
+@import "../list/_index.scss";
+@import "../timeselector/_index.scss";
 
 
 // Component

package/scss/timepicker/_variables.scss

@@ -1 +1 @@
-// Timepicker
+// Time picker

package/scss/{datetime → timeselector}/_index.scss

@@ -2,12 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
+@import "../list/_index.scss";
 @import "../action-buttons/_index.scss";
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
-@import "../popup/_index.scss";
+@import "../button/_index.scss";
 
 
 // Component

package/scss/timeselector/_layout.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/timeselector/_layout.scss";

package/scss/timeselector/_theme.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/timeselector/_theme.scss";

package/scss/timeselector/_variables.scss

@@ -0,0 +1,32 @@
+// Time selector
+$time-selector-border-width: 1px !default;
+$time-selector-font-family: $font-family !default;
+$time-selector-font-size: $font-size !default;
+$time-selector-line-height: $line-height !default;
+
+$time-selector-bg: $component-bg !default;
+$time-selector-text: $component-text !default;
+$time-selector-border: $component-border !default;
+
+$time-selector-header-padding-x: map-get( $spacing, 1 ) !default;
+$time-selector-header-padding-y: map-get( $spacing, 1 ) !default;
+$time-selector-header-border-width: 0px !default;
+
+$time-list-width: 4em !default;
+$time-list-height: 240px !default;
+
+$time-list-title-font-size: $font-size-sm !default;
+$time-list-title-line-height: 1.5 !default;
+$time-list-title-height: ( $time-list-title-font-size * $time-list-title-line-height) !default;
+$time-list-title-text: $subtle-text !default;
+$time-list-title-focus-text: $component-text !default;
+
+$time-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$time-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+
+$time-list-highlight-border-width: 1px 0px !default;
+$time-list-highlight-height: calc( #{$time-selector-font-size * $time-selector-line-height} + #{ $time-list-item-padding-y * 2} ) !default;
+$time-list-highlight-bg: $component-bg !default;
+$time-list-highlight-border: $component-border !default;
+
+$time-list-focused-bg: rgba(0, 0, 0, .02) !default;

package/scss/treeview/_layout.scss

@@ -6,19 +6,17 @@
     // Base
     .k-treeview {
 
-        .k-top,
-        .k-mid,
-        .k-bot {
+        .k-treeview-top,
+        .k-treeview-mid,
+        .k-treeview-bot {
             padding-top: 2px;
             padding-bottom: 2px;
         }
 
 
         // Item
-        .k-in {
+        .k-treeview-leaf {
             transition: $transition;
         }
-
     }
-
 }