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

package/dist/all.scss

@@ -914,11 +914,17 @@ $popover-header-padding-y: $spacer !default;
   @return red($value), green($value), blue($value);
 }
 
+// stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
-  @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  @if $identifier == "body" and $target == "bg" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @if $identifier == "body" and $target == "text" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @else {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  }
 }
 
-// stylelint-disable scss/dollar-variable-pattern
 @function map-loop($map, $func, $args...) {
   $_map: ();
 
@@ -1585,23 +1591,33 @@ $body-text-align:           null !default;
 //
 // Extends the default `$theme-colors` maps to help create our utilities.
 
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
 // scss-docs-start utilities-colors
-$utilities-colors: map-merge(
-  $theme-colors-rgb,
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
   (
     "black": to-rgb($black),
     "white": to-rgb($white),
-    "body":  to-rgb($body-color)
+    "body": to-rgb($body-color)
   )
 ) !default;
-// scss-docs-end utilities-colors
-
-// scss-docs-start utilities-text-colors
-$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text") !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
-$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !default;
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors
 
 // Links
@@ -2090,7 +2106,7 @@ $form-check-inline-margin-end:    1rem !default;
 // scss-docs-end form-check-variables
 
 // scss-docs-start form-switch-variables
-$form-switch-color:               rgba(0, 0, 0, .25) !default;
+$form-switch-color:               rgba($black, .25) !default;
 $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
 $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
@@ -2138,7 +2154,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
-$form-select-border-radius:       $border-radius !default;
+$form-select-border-radius:       $input-border-radius !default;
 $form-select-box-shadow:          $box-shadow-inset !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
@@ -2148,10 +2164,12 @@ $form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focu
 $form-select-padding-y-sm:        $input-padding-y-sm !default;
 $form-select-padding-x-sm:        $input-padding-x-sm !default;
 $form-select-font-size-sm:        $input-font-size-sm !default;
+$form-select-border-radius-sm:    $input-border-radius-sm !default;
 
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
+$form-select-border-radius-lg:    $input-border-radius-lg !default;
 
 $form-select-transition:          $input-transition !default;
 // scss-docs-end form-select-variables
@@ -2333,7 +2351,7 @@ $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               $box-shadow !default;
 
 $dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         shade-color($gray-900, 10%) !default;
+$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
 $dropdown-link-hover-bg:            $gray-200 !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
@@ -2538,14 +2556,14 @@ $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
 $toast-border-width:                1px !default;
-$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-color:                rgba($black, .1) !default;
 $toast-border-radius:               $border-radius !default;
 $toast-box-shadow:                  $box-shadow !default;
 $toast-spacing:                     $container-padding-x !default;
 
 $toast-header-color:                $gray-600 !default;
 $toast-header-background-color:     rgba($white, .85) !default;
-$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+$toast-header-border-color:         rgba($black, .05) !default;
 // scss-docs-end toast-variables
 
 
@@ -9088,6 +9106,7 @@ $chip-error-focus-shadow: 0 0 0 3px rgba( $error, .16 ) !default;
             font-size: $chip-selected-icon-font-size;
         }
 
+        .k-chip.k-state-selected .k-selected-icon-wrapper,
         .k-chip.k-selected .k-selected-icon-wrapper {
             width: $chip-selected-icon-size;
             visibility: visible;
@@ -9107,6 +9126,7 @@ $chip-error-focus-shadow: 0 0 0 3px rgba( $error, .16 ) !default;
                 transition: width .2s, opacity .2s;
             }
 
+            &.k-state-selected .k-selected-icon-wrapper,
             &.k-selected .k-selected-icon-wrapper {
                 opacity: 1;
             }
@@ -9230,6 +9250,7 @@ $chip-error-focus-shadow: 0 0 0 3px rgba( $error, .16 ) !default;
 // #region @import "~@progress/kendo-theme-default/scss/chip/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/chip/_theme.scss
 @include exports("chip/theme") {
 
+    .k-selection-multiple .k-chip-has-icon.k-state-selected .k-selected-icon-wrapper,
     .k-selection-multiple .k-chip-has-icon.k-selected .k-selected-icon-wrapper {
         @include fill(
             $color: $chip-multiple-selected-icon-text,
@@ -12456,11 +12477,6 @@ $window-sizes: (
 
 
         .k-multiselect,
-        .k-dateinput,
-        .k-datepicker,
-        .k-datetimepicker,
-        .k-daterangepicker-wrap,
-        .k-timepicker,
         .k-floating-label-container {
             display: inline-flex;
             width: 100%;
@@ -18924,6 +18940,275 @@ $combobox-select-pressed-gradient: $kendo-button-active-gradient !default;
 
 // #endregion
 
+// #endregion
+// #region @import "dateinput/_index.scss"; -> packages/bootstrap/scss/dateinput/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/bootstrap/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/dateinput/_variables.scss
+// Dateinput
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/dateinput/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/dateinput/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dateinput/_layout.scss
+@include exports("dateinput/layout") {
+
+    // Date input
+    .k-dateinput {}
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/dateinput/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/dateinput/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dateinput/_theme.scss
+@include exports("dateinput/theme") {
+
+    // Date input
+    .k-dateinput {}
+
+}
+
+// #endregion
+
+// #endregion
+
+// #endregion
+// #region @import "datepicker/_index.scss"; -> packages/bootstrap/scss/datepicker/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/bootstrap/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/datepicker/_variables.scss
+// Datepicker
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/datepicker/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/datepicker/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datepicker/_layout.scss
+@include exports("datepicker/layout") {
+
+    // Date picker
+    .k-datepicker {}
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/datepicker/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/datepicker/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datepicker/_theme.scss
+@include exports("datepicker/theme") {
+
+    // Date picker
+    .k-datepicker {}
+
+}
+
+// #endregion
+
+// #endregion
+
+// #endregion
+// #region @import "timepicker/_index.scss"; -> packages/bootstrap/scss/timepicker/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/bootstrap/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/timepicker/_variables.scss
+// Timepicker
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/timepicker/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/timepicker/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/timepicker/_layout.scss
+@include exports("timepicker/layout") {
+
+    // Time picker
+    .k-timepicker {}
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/timepicker/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/timepicker/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/timepicker/_theme.scss
+@include exports("timepicker/theme") {
+
+    // Time picker
+    .k-timepicker {}
+
+}
+
+// #endregion
+
+// #endregion
+
+// #endregion
+// #region @import "datetimepicker/_index.scss"; -> packages/bootstrap/scss/datetimepicker/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/bootstrap/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/datetimepicker/_variables.scss
+// Datetimepicker
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/datetimepicker/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/datetimepicker/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datetimepicker/_layout.scss
+@include exports("datetimepicker/layout") {
+
+    // Date time picker
+    .k-datetimepicker {}
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/datetimepicker/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/datetimepicker/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datetimepicker/_theme.scss
+@include exports("datetimepicker/theme") {
+
+    // Date time picker
+    .k-datetimepicker {}
+
+}
+
+// #endregion
+
+// #endregion
+
+// #endregion
+// #region @import "daterangepicker/_index.scss"; -> packages/bootstrap/scss/daterangepicker/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/bootstrap/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/daterangepicker/_variables.scss
+// Daterangepicker
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/daterangepicker/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/daterangepicker/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/daterangepicker/_layout.scss
+@include exports("daterangepicker/layout") {
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/daterangepicker/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/daterangepicker/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/daterangepicker/_theme.scss
+@include exports("daterangepicker/theme") {
+
+}
+
+// #endregion
+
+// #endregion
+
 // #endregion
 // #region @import "datetime/_index.scss"; -> packages/bootstrap/scss/datetime/_index.scss
 // #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
@@ -19512,18 +19797,6 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 
 
-
-@include exports("daterangepicker/layout") {
-
-    // jQuery DateRangePicker
-    .k-widget.k-daterangepicker {
-        border: 0;
-    }
-
-}
-
-
-
 @include exports("calendar/layout/rtl") {
 
     .k-rtl .k-calendar,
@@ -19817,23 +20090,6 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 }
 
-
-
-
-@include exports( "daterangepicker/theme" ) {
-
-    // jQuery DateRangePicker
-    .k-daterangepicker {
-        // Invalid
-        &.k-state-invalid {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-            }
-        }
-    }
-
-}
-
 // #endregion
 
 // #endregion
@@ -19905,258 +20161,6 @@ $datetime-select-pressed-gradient: $kendo-button-active-gradient !default;
 // #region @import "~@progress/kendo-theme-default/scss/datetime/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datetime/_layout.scss
 @include exports("datetime/layout") {
 
-    // Dateinput
-    .k-dateinput {
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-dateinput-wrap {
-            @include border-radius( $kendo-input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: default;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $kendo-input-border-radius );
-            padding: 0;
-            width: $kendo-input-spinner-width;
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-        .k-link {
-            padding: 0 $picker-select-padding-x;
-            min-width: $icon-size;
-            flex: 1 1 auto;
-            display: block;
-            overflow: hidden;
-            position: relative;
-
-            .k-icon {
-                position: absolute;
-                right: 50%;
-                transform: translateX(50%);
-            }
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $kendo-input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-
-
-        // Nested dateinput
-        .k-picker-wrap & {
-            margin: 0 !important; // sass-lint:disable-line no-important
-            width: 100%;
-            flex: 1 1 auto;
-
-            .k-dateinput-wrap {
-                @include border-left-radius-only( $kendo-input-border-radius );
-                border-width: 0;
-                box-shadow: none !important; // sass-lint:disable-line no-important
-            }
-
-            [dir="rtl"] &,
-            .k-rtl & {
-                .k-dateinput-wrap {
-                    @include border-right-radius-only( $kendo-input-border-radius );
-                }
-            }
-
-        }
-    }
-
-
-    // Datepicker / timepicker
-    .k-datepicker,
-    .k-timepicker {
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        white-space: nowrap;
-        background: none;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Wrapper
-        .k-picker-wrap {
-            @include border-radius( $kendo-input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $kendo-input-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $kendo-input-border-radius );
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $picker-select-calc-size, null );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $kendo-input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-    }
-
-
-    // Datetimepicker
-    .k-datetimepicker {
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        background: none;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Wrappers
-        .k-picker-wrap {
-            @include border-radius( $kendo-input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $kendo-input-border-radius );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-        .k-link {
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $kendo-button-inner-calc-size, null );
-            height: 100%;
-            border-width: 0;
-            border-style: solid;
-            border-color: inherit;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $kendo-input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-    }
-
     .k-datetime-container {
 
         .k-datetime-wrap {
@@ -20382,26 +20386,6 @@ $datetime-select-pressed-gradient: $kendo-button-active-gradient !default;
 
 @include exports("datetime/layout/bootstrap") {
 
-    .k-datepicker,
-    .k-datetimepicker,
-    .k-timepicker {
-        .k-picker-wrap,
-        .k-select {
-            transition: $transition;
-        }
-    }
-
-    // Datetimepicker
-    .k-datetimepicker {}
-
-    // Dateinput
-    .k-dateinput {
-        .k-dateinput-wrap,
-        .k-select {
-            transition: $transition;
-        }
-    }
-
     // Timepicker header
     .k-time-header {
         padding: $time-header-padding;
@@ -20429,104 +20413,6 @@ $datetime-select-pressed-gradient: $kendo-button-active-gradient !default;
 // #region @import "~@progress/kendo-theme-default/scss/datetime/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datetime/_theme.scss
 @include exports("datetime/theme") {
 
-    // Common
-    .k-datepicker,
-    .k-timepicker,
-    .k-datetimepicker,
-    .k-dateinput {
-
-        .k-select {
-            @include fill(
-                $datetime-select-text,
-                $datetime-select-bg,
-                $datetime-select-border,
-                $datetime-select-gradient
-            );
-        }
-
-        .k-i-warning {
-            color: $error;
-        }
-    }
-
-
-    .k-datepicker .k-picker-wrap,
-    .k-timepicker .k-picker-wrap,
-    .k-datetimepicker .k-picker-wrap,
-    .k-dateinput .k-dateinput-wrap {
-        @include fill(
-            $datetime-text,
-            $datetime-bg,
-            $datetime-border
-        );
-
-        // Hovered state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $datetime-hovered-text,
-                $datetime-hovered-bg,
-                $datetime-hovered-border
-            );
-        }
-
-        // Selected state
-        &.k-state-focused,
-        &.k-state-active {
-            @include fill(
-                $datetime-focused-text,
-                $datetime-focused-bg,
-                $datetime-focused-border
-            );
-            @include box-shadow($datetime-focused-shadow);
-        }
-    }
-
-    .k-datepicker,
-    .k-timepicker {
-
-        .k-select:hover,
-        .k-select.k-state-hover {
-            @include fill(
-                $datetime-select-hovered-text,
-                $datetime-select-hovered-bg,
-                $datetime-select-hovered-border,
-                $datetime-select-hovered-gradient
-            );
-        }
-    }
-
-
-    .k-dateinput,
-    .k-datetimepicker {
-
-        .k-link:hover,
-        .k-link.k-state-hover {
-            @include fill(
-                $datetime-select-hovered-text,
-                $datetime-select-hovered-bg,
-                $datetime-select-hovered-border,
-                $datetime-select-hovered-gradient
-            );
-        }
-
-        .k-link:active,
-        .k-link.k-state-active,
-        .k-link.k-state-selected {
-            @include fill(
-                $datetime-select-pressed-text,
-                $datetime-select-pressed-bg,
-                $datetime-select-pressed-border,
-                $datetime-select-pressed-gradient
-            );
-        }
-    }
-
-
-    // Timepicker
-    .k-timepicker {}
-
-
     // Timepicker header
     .k-time-header {
 
@@ -20594,135 +20480,6 @@ $datetime-select-pressed-gradient: $kendo-button-active-gradient !default;
         }
     }
 
-    .k-datepicker,
-    .k-datetimepicker,
-    .k-timepicker {
-        .k-picker-wrap {
-            // Invalid
-            &.k-invalid,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-picker-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
-    .k-dateinput {
-        .k-dateinput-wrap {
-            // Invalid
-            &.k-invalid,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
-
-    // Universal rendering
-    .k-datepicker {
-        &.k-state-hover {
-            .k-picker-wrap {
-                @include fill(
-                    $datetime-hovered-text,
-                    $datetime-hovered-bg,
-                    $datetime-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-picker-wrap {
-                @include fill(
-                    $datetime-focused-text,
-                    $datetime-focused-bg,
-                    $datetime-focused-border
-                );
-                @include box-shadow($datetime-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-picker-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-picker-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
-    .k-dateinput,
-    .k-daterangepicker {
-        &.k-state-hover {
-            .k-dateinput-wrap {
-                @include fill(
-                    $datetime-hovered-text,
-                    $datetime-hovered-bg,
-                    $datetime-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-dateinput-wrap {
-                @include fill(
-                    $datetime-focused-text,
-                    $datetime-focused-bg,
-                    $datetime-focused-border
-                );
-                @include box-shadow($datetime-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-dateinput-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
 }
 
 // #endregion