@progress/kendo-theme-bootstrap 5.0.0-next.4 → 5.0.2-dev.0

package/scss/combobox/_index.scss

@@ -7,6 +7,7 @@
 @import "../floating-label/_index.scss";
 @import "../icons/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/combobox/_layout.scss

@@ -1,15 +1 @@
 @import "~@progress/kendo-theme-default/scss/combobox/_layout.scss";
-
-@include exports("combobox/layout/bootstrap") {
-
-    .k-combobox {
-        .k-dropdown-wrap {
-            transition: $transition;
-
-            .k-select {
-                transition: $transition;
-            }
-        }
-    }
-
-}

package/scss/combobox/_variables.scss

@@ -1,33 +1 @@
-// Comboboxes
-$combobox-select-padding-x: $button-padding-y !default;
-$combobox-select-padding-y: $button-padding-y !default;
-$combobox-select-width: null !default;
-$combobox-select-border-width: 1px !default;
-
-$combobox-bg: $input-bg !default;
-$combobox-text: $input-text !default;
-$combobox-border: $input-border !default;
-
-$combobox-hovered-bg: $input-hovered-bg !default;
-$combobox-hovered-text: $input-hovered-text !default;
-$combobox-hovered-border: $input-hovered-border !default;
-
-$combobox-focused-bg: $input-focused-bg !default;
-$combobox-focused-text: $input-focused-text !default;
-$combobox-focused-border: $input-focused-border !default;
-$combobox-focused-shadow: $input-focused-shadow !default;
-
-$combobox-select-bg: $button-bg !default;
-$combobox-select-text: $button-text !default;
-$combobox-select-border: $button-border !default;
-$combobox-select-gradient: $button-gradient !default;
-
-$combobox-select-hovered-bg: $button-hovered-bg !default;
-$combobox-select-hovered-text: $button-hovered-text !default;
-$combobox-select-hovered-border: $button-hovered-border !default;
-$combobox-select-hovered-gradient: $button-hovered-gradient !default;
-
-$combobox-select-pressed-bg: $button-active-bg !default;
-$combobox-select-pressed-text: $button-active-text !default;
-$combobox-select-pressed-border: $button-active-border !default;
-$combobox-select-pressed-gradient: $button-active-gradient !default;
+// Combobox

package/scss/dataviz/_index.scss

@@ -5,6 +5,7 @@
 @import "../common/_index.scss";
 @import "../popup/_index.scss";
 @import "../tooltip/_index.scss";
+@import "../button/_variables.scss";
 
 
 // Component

package/scss/dataviz/_variables.scss

@@ -1,7 +1,7 @@
 // Chart
 /// The first base series color and its light and dark shades.
 /// @group charts
-$series-a: $teal !default;
+$series-a: $blue !default;
 $series-a-dark: mix(black, $series-a, 25%) !default;
 $series-a-darker: mix(black, $series-a, 50%) !default;
 $series-a-light: mix(white, $series-a, 25%) !default;
@@ -9,7 +9,7 @@ $series-a-lighter: mix(white, $series-a, 50%) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$series-b: $blue !default;
+$series-b: $purple !default;
 $series-b-dark: mix(black, $series-b, 25%) !default;
 $series-b-darker: mix(black, $series-b, 50%) !default;
 $series-b-light: mix(white, $series-b, 25%) !default;
@@ -17,7 +17,7 @@ $series-b-lighter: mix(white, $series-b, 50%) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$series-c: $purple !default;
+$series-c: $teal !default;
 $series-c-dark: mix(black, $series-c, 25%) !default;
 $series-c-darker: mix(black, $series-c, 50%) !default;
 $series-c-light: mix(white, $series-c, 25%) !default;
@@ -25,7 +25,7 @@ $series-c-lighter: mix(white, $series-c, 50%) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$series-d: $red !default;
+$series-d: $green !default;
 $series-d-dark: mix(black, $series-d, 25%) !default;
 $series-d-darker: mix(black, $series-d, 50%) !default;
 $series-d-light: mix(white, $series-d, 25%) !default;
@@ -41,7 +41,7 @@ $series-e-lighter: mix(white, $series-e, 50%) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$series-f: $green !default;
+$series-f: $red !default;
 $series-f-dark: mix(black, $series-f, 25%) !default;
 $series-f-darker: mix(black, $series-f, 50%) !default;
 $series-f-light: mix(white, $series-f, 25%) !default;

package/scss/dateinput/_index.scss

@@ -0,0 +1,11 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/dateinput/_layout.scss

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

package/scss/dateinput/_theme.scss

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

package/scss/dateinput/_variables.scss

@@ -0,0 +1 @@
+// Date input

package/scss/datepicker/_index.scss

@@ -0,0 +1,13 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+@import "../popup/_index.scss";
+@import "../calendar/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/datepicker/_layout.scss

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

package/scss/datepicker/_theme.scss

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

package/scss/datepicker/_variables.scss

@@ -0,0 +1 @@
+// Datepicker

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

@@ -3,11 +3,10 @@
 
 // Dependencies
 @import "../common/_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 "../icons/_index.scss";
 
 
 // Component

package/scss/daterangepicker/_layout.scss

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

package/scss/daterangepicker/_theme.scss

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

package/scss/daterangepicker/_variables.scss

@@ -0,0 +1,2 @@
+// Daterangepicker
+$kendo-daterange-picker-input-width: 10em;

package/scss/datetimepicker/_index.scss

@@ -0,0 +1,17 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+@import "../button/_index.scss";
+@import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../calendar/_index.scss";
+@import "../timeselector/_index.scss";
+@import "../action-buttons/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/datetimepicker/_layout.scss

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

package/scss/datetimepicker/_theme.scss

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

package/scss/datetimepicker/_variables.scss

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

package/scss/drawer/_index.scss

@@ -5,6 +5,7 @@
 @import "../common/_index.scss";
 @import "../overlay/_index.scss";
 @import "../toolbar/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/dropdownlist/_index.scss

@@ -6,6 +6,7 @@
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/dropdownlist/_layout.scss

@@ -1,13 +1 @@
 @import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss";
-
-@include exports("dropdownlist/layout/bootstrap") {
-
-    // Dropdown
-    .k-dropdown {
-
-        .k-dropdown-wrap {
-            transition: $transition;
-        }
-    }
-
-}

package/scss/dropdownlist/_variables.scss

@@ -1,16 +1,16 @@
 // Dropdownlist
-$dropdownlist-bg: $button-bg !default;
-$dropdownlist-text: $button-text !default;
-$dropdownlist-border: $button-border !default;
-$dropdownlist-gradient: $button-gradient !default;
+$dropdownlist-bg: $kendo-button-bg !default;
+$dropdownlist-text: $kendo-button-text !default;
+$dropdownlist-border: $kendo-button-border !default;
+$dropdownlist-gradient: $kendo-button-gradient !default;
 
-$dropdownlist-hovered-bg: $button-hovered-bg !default;
-$dropdownlist-hovered-text: $button-hovered-text !default;
-$dropdownlist-hovered-border: $button-hovered-border !default;
-$dropdownlist-hovered-gradient: $button-hovered-gradient !default;
+$dropdownlist-hovered-bg: $kendo-button-hover-bg !default;
+$dropdownlist-hovered-text: $kendo-button-hover-text !default;
+$dropdownlist-hovered-border: $kendo-button-hover-border !default;
+$dropdownlist-hovered-gradient: $kendo-button-hover-gradient !default;
 
-$dropdownlist-focused-bg: $button-active-bg !default;
-$dropdownlist-focused-text: $button-active-text !default;
-$dropdownlist-focused-border: $button-active-border !default;
-$dropdownlist-focused-gradient: $button-active-gradient !default;
-$dropdownlist-focused-shadow: $button-focused-shadow !default;
+$dropdownlist-focused-bg: $kendo-button-active-bg !default;
+$dropdownlist-focused-text: $kendo-button-active-text !default;
+$dropdownlist-focused-border: $kendo-button-active-border !default;
+$dropdownlist-focused-gradient: $kendo-button-active-gradient !default;
+$dropdownlist-focused-shadow: $kendo-button-focus-shadow !default;

package/scss/dropdowntree/_variables.scss

@@ -1,5 +1,3 @@
 // Dropdowntree
-$dropdowntree-popup-spacer-x: $padding-x !default;
-$dropdowntree-popup-spacer-y: $dropdowntree-popup-spacer-x !default;
-$dropdowntree-filter-shadow: none !default;
-$dropdowntree-filter-spacer: 0px !default;
+$dropdowntree-popup-padding-x: map-get( $spacing, 2 ) !default;
+$dropdowntree-popup-padding-y: map-get( $spacing, 2 ) !default;

package/scss/editor/_variables.scss

@@ -4,8 +4,8 @@ $editor-font-family: $font-family !default;
 $editor-font-size: $font-size !default;
 $editor-line-height: $line-height !default;
 
-$editor-placeholder-text: $input-placeholder-text !default;
-$editor-placeholder-opacity: $input-placeholder-opacity !default;
+$editor-placeholder-text: $kendo-input-placeholder-text !default;
+$editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
 $editor-selected-text: $primary-contrast !default;
 $editor-selected-bg: $primary !default;
@@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
 $editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
 
 $editor-export-tool-icon-margin-x: .25em !default;
+
+$editor-resize-handle-size: 8px !default;
+$editor-resize-handle-border-width: 1px !default;
+$editor-resize-handle-border: #000000 !default;
+$editor-resize-handle-bg: #ffffff !default;
+
+$editor-selectednode-outline-width: 2px !default;
+$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length

package/scss/expansion-panel/_index.scss

@@ -6,6 +6,7 @@
 @import "../utils/_display.scss";
 @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/expansion-panel/_variables.scss

@@ -14,7 +14,7 @@ $expander-bg: $component-bg !default;
 $expander-text: $component-text !default;
 $expander-border: $component-border !default;
 
-$expander-focus-shadow: $list-item-focused-shadow !default;
+$expander-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-header-bg: transparent !default;
 $expander-header-text: $expander-text !default;
@@ -23,7 +23,7 @@ $expander-header-border: null !default;
 $expander-header-hover-bg: rgba(0, 0, 0, .04) !default;
 
 $expander-header-focused-bg: null !default;
-$expander-header-focused-shadow: $list-item-focused-shadow !default;
+$expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-title-text: $primary !default;
 

package/scss/fab/_theme.scss

@@ -1,12 +1,11 @@
 @include exports( "fab/theme/bootstrap" ) {
-    // FAB
-    .k-fab {
-        @include box-shadow($fab-shadow);
-    }
 
     // Normal state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name} {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name} {
+            @include box-shadow($kendo-fab-shadow);
+            outline: $kendo-fab-border-width solid $color;
+            outline-offset: -$kendo-fab-border-width;
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -14,10 +13,9 @@
     }
 
     // Hover state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-hover.k-fab-#{$name},
-        .k-state-hovered.k-fab-#{$name},
-        .k-fab-#{$name}:hover {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-hover.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:hover {
             border-color: try-darken( $color, 10% );
             color: contrast-wcag( try-darken( $color, 7.5% ) );
             background-color: try-darken( $color, 7.5% );
@@ -25,17 +23,21 @@
     }
 
     // Focus state
-    .k-fab.k-state-focus,
-    .k-fab.k-state-focused,
-    .k-fab:focus {
-        @include box-shadow($fab-focus-shadow);
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name}.k-focus,
+        .k-fab-solid-#{$name}:focus {
+            outline-style: solid;
+            outline-width: 3px;
+            outline-color: rgba( $color, .5 );
+        }
     }
 
     // Active state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-active.k-fab-#{$name},
-        .k-state-selected.k-fab-#{$name},
-        .k-fab-#{$name}:active {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-active.k-fab-solid-#{$name},
+        .k-selected.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:active {
+            @include box-shadow($kendo-fab-active-shadow);
             border-color: try-darken( $color, 12.5% );
             color: contrast-wcag( try-darken( $color, 10% ) );
             background-color: try-darken( $color, 10% );
@@ -43,86 +45,78 @@
     }
 
     // Disabled state
-    .k-fab.k-state-disabled,
-    .k-fab:disabled {
-        @include box-shadow($fab-disabled-shadow);
-        opacity: 1;
-    }
-
-    @each $name, $color in $fab-theme-colors {
-        .k-state-disabled.k-fab-#{$name},
-        .k-fab-#{$name}:disabled {
-            background-color: tint( $color, 5 );
-        }
-    }
-
-    // Disabled + Focus state
-    .k-fab-item:focus,
-    .k-fab-item.k-state-focus,
-    .k-fab-item.k-state-focused {
-        &:disabled,
-        &.k-state-disabled {
-            .k-fab-item-text,
-            .k-fab-item-icon {
-                @include box-shadow($fab-item-disabled-focus-shadow);
-            }
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-disabled.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:disabled {
+            @include box-shadow($kendo-fab-disabled-shadow);
+            background-color: try-tint( $color, 4.5 );
+            color: try-tint( contrast-wcag( $color ), 5 );
+            opacity: 1;
         }
     }
 
     // Items
     .k-fab-item-text {
         @include fill(
-            $fab-item-text,
-            $fab-item-bg,
-            $fab-item-border
+            $kendo-fab-item-text,
+            $kendo-fab-item-bg,
+            $kendo-fab-item-border
         );
-        @include box-shadow($fab-item-shadow);
+        @include box-shadow($kendo-fab-item-shadow);
     }
     .k-fab-item-icon {
         @include fill(
-            $fab-item-icon-text,
-            $fab-item-icon-bg,
-            $fab-item-icon-border
+            $kendo-fab-item-icon-text,
+            $kendo-fab-item-icon-bg,
+            $kendo-fab-item-icon-border
         );
-        @include box-shadow($fab-item-shadow);
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid $kendo-button-bg;
+        outline-offset: -$kendo-fab-border-width;
     }
 
     // Hover state
-    .k-fab-item.k-state-hover .k-fab-item-icon,
-    .k-fab-item.k-state-hovered .k-fab-item-icon,
+    .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: try-darken( $fab-item-icon-border, 10% );
-        color: contrast-wcag( try-darken( $fab-item-icon-bg, 7.5% ) );
-        background-color: try-darken( $fab-item-icon-bg, 7.5% );
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
+        outline-offset: -$kendo-fab-border-width;
+        border-color: try-darken( $kendo-fab-item-icon-border, 10% );
+        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
+        background-color: try-darken( $kendo-fab-item-icon-bg, 7.5% );
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
-    .k-fab-item.k-state-focus .k-fab-item-text,
-    .k-fab-item.k-state-focus .k-fab-item-icon,
-    .k-fab-item.k-state-focused .k-fab-item-text,
-    .k-fab-item.k-state-focused .k-fab-item-icon {
-        @include box-shadow($fab-item-focus-shadow);
+    .k-fab-item.k-focus .k-fab-item-text,
+    .k-fab-item.k-focus .k-fab-item-icon {
+        outline-style: solid;
+        outline-width: 3px;
+        outline-color: rgba( $kendo-fab-item-icon-border, .5 );
     }
 
     // Active state
-    .k-fab-item.k-state-active .k-fab-item-icon,
+    .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
-        border-color: try-darken( $fab-item-icon-border, 12.5% );
-        color: contrast-wcag( try-darken( $fab-item-icon-bg, 10% ) );
-        background-color: try-darken( $fab-item-icon-bg, 10% );
+        @include box-shadow($kendo-fab-item-active-shadow);
+        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
+        outline-offset: -$kendo-fab-border-width;
+        border-color: try-darken( $kendo-fab-item-icon-border, 12.5% );
+        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 10% ) );
+        background-color: try-darken( $kendo-fab-item-icon-bg, 10% );
     }
 
     // Disabled state
-    .k-fab-item.k-state-disabled,
+    .k-fab-item.k-disabled,
     .k-fab-item:disabled {
         opacity: 1;
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            color: tint( $fab-item-text, 8 );
-            @include box-shadow($fab-item-disabled-shadow);
+            @include box-shadow($kendo-fab-item-disabled-shadow);
+            background-color: try-tint( $kendo-fab-item-bg, 8 );
+            color: try-tint( $kendo-fab-item-text, 8 );
         }
     }