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

package/scss/fab/_variables.scss

@@ -1,74 +1,130 @@
 // Floating Action Button
-$fab-padding-x: $padding-x !default;
-$fab-padding-y: $fab-padding-x !default;
-$fab-border-width: 1px !default;
-$fab-border-radius: $border-radius / 2 !default;
-$fab-font-family: $font-family !default;
-$fab-font-size: $font-size !default;
-$fab-line-height: $line-height !default;
 
-$fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
-$fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
-
-$fab-padding-x-md: $fab-padding-x !default;
-$fab-padding-y-md: $fab-padding-y !default;
-
-$fab-padding-x-lg: ( $fab-padding-x * 1.5 ) !default;
-$fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
-
-$fab-icon-width: 24px !default;
-$fab-icon-height: $fab-icon-width !default;
-$fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
-
-$fab-items-padding-x: 0px !default;
-$fab-items-padding-y: map-get( $spacing, 4 ) !default;
-
-$fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
-$fab-item-text-padding-y: $fab-item-text-padding-x !default;
-$fab-item-text-border-width: 1px !default;
-$fab-item-text-border-radius: 4px !default;
-$fab-item-text-font-size: $font-size-xs !default;
-$fab-item-text-line-height: 14px !default;
-
-$fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
-$fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
-$fab-item-icon-border-width: 0 !default;
-$fab-item-icon-border-radius: 50% !default;
-$fab-item-icon-width: 24px !default;
-$fab-item-icon-height: $fab-item-icon-width !default;
-
-$fab-sizes: (
-    sm: map-get( $spacing, 4 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
-) !default;
-
-$fab-theme-colors: $theme-colors !default;
-
-$fab-shadow: 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2) !default;
-$fab-disabled-shadow: 0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
-$fab-active-shadow: null !default;
-
-$fab-item-text: $component-text !default;
-$fab-item-bg: $component-bg !default;
-$fab-item-border: $component-border !default;
-
-$fab-item-icon-text: $kendo-button-text !default;
-$fab-item-icon-bg: $kendo-button-bg !default;
-$fab-item-icon-border: $kendo-button-border !default;
-
-$fab-item-shadow: $fab-shadow !default;
-$fab-item-disabled-shadow: $fab-disabled-shadow !default;
-$fab-item-active-shadow: $fab-active-shadow !default;
-
-$fab-border-width-sm: $fab-border-width !default;
-$fab-line-height-sm: $fab-line-height !default;
-$fab-size-sm: calc( #{$fab-line-height-sm * 1em} + #{$fab-padding-y-sm * 2} + #{$fab-border-width-sm * 2} ) !default;
-
-$fab-border-width-md: $fab-border-width !default;
-$fab-line-height-md: $fab-line-height !default;
-$fab-size-md: calc( #{$fab-line-height-md * 1em} + #{$fab-padding-y-md * 2} + #{$fab-border-width-md * 2} ) !default;
-
-$fab-border-width-lg: $fab-border-width !default;
-$fab-line-height-lg: $fab-line-height !default;
-$fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{$fab-border-width-lg * 2} ) !default;
+/// Width of the border around the FAB.
+/// @group floating-action-button
+$kendo-fab-border-width: 1px !default;
+/// Border radius of the FAB.
+/// @group floating-action-button
+$kendo-fab-border-radius: $border-radius / 2 !default;
+/// Font family of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-family: $font-family !default;
+/// Font size of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-size: $font-size !default;
+/// Line height of the FAB.
+/// @group floating-action-button
+$kendo-fab-line-height: $line-height !default;
+
+/// Horizontal padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-x: $padding-x !default;
+$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
+$kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
+
+/// Vertical padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-y: $kendo-fab-padding-x !default;
+$kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
+$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
+$kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
+
+/// FAB icon width.
+/// @group floating-action-button
+$kendo-fab-icon-width: 24px !default;
+/// FAB icon height.
+/// @group floating-action-button
+$kendo-fab-icon-height: $kendo-fab-icon-width !default;
+/// FAB icon spacing.
+/// @group floating-action-button
+$kendo-fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
+
+/// FAB items horizontal padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-x: 0px !default;
+/// FAB items vertical padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
+
+/// FAB item text horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+/// FAB item text vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
+/// Width of the FAB item text border.
+/// @group floating-action-button
+$kendo-fab-item-text-border-width: 1px !default;
+/// Border radius of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-border-radius: 4px !default;
+/// Font size of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-font-size: $font-size-xs !default;
+/// Line height of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-line-height: 14px !default;
+
+/// FAB item icon horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+/// FAB item icon vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
+/// Width of the FAB item icon border.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-width: 0 !default;
+/// Border radius of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-radius: 50% !default;
+/// Width of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-width: 24px !default;
+/// height of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
+
+/// Theme colors map for the FAB.
+/// @group floating-action-button
+$kendo-fab-theme-colors: $theme-colors !default;
+
+/// The base shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-shadow: 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2) !default;
+/// The disabled shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-disabled-shadow: 0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+/// The active shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-active-shadow: null !default;
+
+/// The base text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-text: $component-text !default;
+/// The base background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-bg: $component-bg !default;
+/// The base border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-border: $component-border !default;
+
+/// The base text color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-text: $kendo-button-text !default;
+/// The base background color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-bg: $kendo-button-bg !default;
+/// The base border color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border: $kendo-button-border !default;
+
+/// The base shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-shadow: $kendo-fab-shadow !default;
+/// The disabled shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
+/// The active shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;

package/scss/grid/_theme.scss

@@ -82,12 +82,6 @@
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
 
-            // Hovered state
-            .k-state-hover td,
-            tr:hover td {
-                @include fill( $bg: $grid-sticky-hovered-bg );
-            }
-
             // Selected hover
             .k-state-selected:hover td,
             .k-state-selected.k-state-hover td {

package/scss/grid/_variables.scss

@@ -132,21 +132,21 @@ $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
 $grid-sticky-hovered-bg: try-shade( $grid-bg ) !default;
 $grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
 
-$grid-filter-menu-width: 250px !default;
+$grid-column-menu-width: 250px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 1px !default;
 
 $grid-filter-menu-item-spacing-x: map-get( $spacing, 6 ) !default;
 $grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
 
-$grid-column-menu-popup-padding-x: 0 !default;
-$grid-column-menu-popup-padding-y: $padding-y !default;
+$grid-column-menu-popup-padding-x: null !default;
+$grid-column-menu-popup-padding-y: null !default;
 
-$grid-column-menu-item-padding-x: $padding-x-lg !default;
-$grid-column-menu-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x !default;
+$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !default;
 
-$grid-column-menu-list-item-padding-x: $padding-x-lg !default;
-$grid-column-menu-list-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
 $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;

package/scss/imageeditor/_variables.scss

@@ -13,6 +13,7 @@ $imageeditor-content-border-width: 1px !default;
 
 $imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
 $imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
+$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
 
 $imageeditor-crop-border-width: 1px !default;
 $imageeditor-crop-border-style: dashed !default;

package/scss/index.scss

@@ -21,6 +21,7 @@
 @import "popup/_index.scss";
 @import "ripple/_index.scss";
 @import "table/_index.scss";
+@import "virtual-scroller/_index.scss";
 
 
 // Indicators

package/scss/input/_variables.scss

@@ -13,17 +13,17 @@ $kendo-input-line-height: $input-line-height !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-font-size-sm: $font-size-md !default;
 $kendo-input-line-height-sm: $line-height-md !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-font-size-md: $font-size-md !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-font-size-lg: $font-size-md !default;
 $kendo-input-line-height-lg: $line-height-md !default;
 
 $kendo-input-sizes: (
@@ -32,28 +32,34 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-padding-y-sm,
         font-size: $kendo-input-font-size-sm,
         line-height: $kendo-input-line-height-sm,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} ),
+        button-padding-x: $kendo-input-padding-y-sm,
+        button-padding-y: $kendo-input-padding-y-sm
     ),
     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,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} ),
+        button-padding-x: $kendo-input-padding-y-md,
+        button-padding-y: $kendo-input-padding-y-md
     ),
     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,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} ),
+        button-padding-x: $kendo-input-padding-y-lg,
+        button-padding-y: $kendo-input-padding-y-lg
     )
 ) !default;
 
 $kendo-input-bg: $input-bg !default;
 $kendo-input-text: $input-color !default;
 $kendo-input-border: $input-border-color !default;
-$kendo-input-shadow: none !default;
+$kendo-input-shadow: null !default;
 
 $kendo-input-hover-bg: null !default;
 $kendo-input-hover-text: null !default;
@@ -65,6 +71,24 @@ $kendo-input-focus-text: $input-focus-color !default;
 $kendo-input-focus-border: $input-focus-border-color !default;
 $kendo-input-focus-shadow: $input-focus-box-shadow !default;
 
+$kendo-picker-bg: $kendo-button-bg !default;
+$kendo-picker-text: $kendo-button-text !default;
+$kendo-picker-border: $kendo-button-border !default;
+$kendo-picker-gradient: $kendo-button-gradient !default;
+$kendo-picker-shadow: $kendo-button-shadow !default;
+
+$kendo-picker-hover-bg: $kendo-button-hover-bg !default;
+$kendo-picker-hover-text: $kendo-button-hover-text !default;
+$kendo-picker-hover-border: $kendo-button-hover-border !default;
+$kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
+$kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
+
+$kendo-picker-focus-bg: $kendo-button-focus-bg !default;
+$kendo-picker-focus-text: $kendo-button-focus-text !default;
+$kendo-picker-focus-border: $kendo-button-focus-border !default;
+$kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
+$kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
+
 $kendo-input-placeholder-text: $input-placeholder-color !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

package/scss/list/_index.scss

@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../checkbox/_index.scss";
 
 
 // Component

package/scss/list/_theme.scss

@@ -1,21 +1 @@
 @import "~@progress/kendo-theme-default/scss/list/_theme.scss";
-
-@include exports( "list/theme/bootstrap" ) {
-
-    .k-list {}
-
-    .k-list-item:focus,
-    .k-list-item.k-focus,
-    .k-list-optionlabel:focus,
-    .k-list-optionlabel.k-focus {
-        &:hover,
-        &.k-hover {
-            box-shadow: inset 0 0 0 3px rgba($kendo-list-item-hover-text, .15);
-        }
-
-        &.k-selected {
-            box-shadow: inset 0 0 0 3px rgba($kendo-list-item-selected-text, .15);
-        }
-    }
-
-}

package/scss/list/_variables.scss

@@ -18,17 +18,17 @@ $kendo-list-line-height-lg: null !default;
 /// @group list
 $kendo-list-header-padding-x: null !default;
 $kendo-list-header-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-header-padding-x-sm: ( $kendo-list-header-padding-x-base * .75 ) !default;
-$kendo-list-header-padding-x-md: ( $kendo-list-header-padding-x-base * 1 ) !default;
-$kendo-list-header-padding-x-lg: ( $kendo-list-header-padding-x-base * 1.25 ) !default;
+$kendo-list-header-padding-x-sm: map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-lg: map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list header, if no size is set.
 /// @group list
 $kendo-list-header-padding-y: null !default;
 $kendo-list-header-padding-y-base: map-get( $spacing, 1 ) !default;
-$kendo-list-header-padding-y-sm: ( $kendo-list-header-padding-y-base * .75 ) !default;
-$kendo-list-header-padding-y-md: ( $kendo-list-header-padding-y-base * 1 ) !default;
-$kendo-list-header-padding-y-lg: ( $kendo-list-header-padding-y-base * 1.25 ) !default;
+$kendo-list-header-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-list-header-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-list-header-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// Border width of list header.
 /// @group list
@@ -56,17 +56,17 @@ $kendo-list-header-font-weight: bold !default;
 /// @group list
 $kendo-list-item-padding-x: null !default;
 $kendo-list-item-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-item-padding-x-sm: ( $kendo-list-item-padding-x-base * .75 ) !default;
-$kendo-list-item-padding-x-md: ( $kendo-list-item-padding-x-base * 1 ) !default;
-$kendo-list-item-padding-x-lg: ( $kendo-list-item-padding-x-base * 1.25 ) !default;
+$kendo-list-item-padding-x-sm: map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-lg: map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list
 $kendo-list-item-padding-y: null !default;
 $kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
-$kendo-list-item-padding-y-sm: ( $kendo-list-item-padding-y-base * .75 ) !default;
-$kendo-list-item-padding-y-md: ( $kendo-list-item-padding-y-base * 1 ) !default;
-$kendo-list-item-padding-y-lg: ( $kendo-list-item-padding-y-base * 1.25 ) !default;
+$kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// Font size of list items, if no size is set.
 /// @group list
@@ -86,17 +86,17 @@ $kendo-list-item-line-height-lg: null !default;
 /// @group list
 $kendo-list-group-item-padding-x: null !default;
 $kendo-list-group-item-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-group-item-padding-x-sm: ( $kendo-list-group-item-padding-x-base * .75 ) !default;
-$kendo-list-group-item-padding-x-md: ( $kendo-list-group-item-padding-x-base * 1 ) !default;
-$kendo-list-group-item-padding-x-lg: ( $kendo-list-group-item-padding-x-base * 1.25 ) !default;
+$kendo-list-group-item-padding-x-sm: map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-lg: map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-y: null !default;
 $kendo-list-group-item-padding-y-base: map-get( $spacing, 1 ) !default;
-$kendo-list-group-item-padding-y-sm: ( $kendo-list-group-item-padding-y-base * .75 ) !default;
-$kendo-list-group-item-padding-y-md: ( $kendo-list-group-item-padding-y-base * 1 ) !default;
-$kendo-list-group-item-padding-y-lg: ( $kendo-list-group-item-padding-y-base * 1.25 ) !default;
+$kendo-list-group-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-list-group-item-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-list-group-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// Border width of list group items.
 /// @group list

package/scss/listbox/_variables.scss

@@ -1,7 +1,7 @@
 // Listbox
 $listbox-margin: 5px !default;
 $listbox-button-margin: $padding-x !default;
-$listbox-width: 12.4em !default;
+$listbox-width: 10em !default;
 $listbox-default-height: 200px !default;
 
 $listbox-border-width: 1px !default;

package/scss/menu/_theme.scss

@@ -1,11 +1 @@
 @import "~@progress/kendo-theme-default/scss/menu/_theme.scss";
-
-@include exports("menu/theme/bootstrap") {
-
-    .k-context-menu-popup {
-        .k-header {
-            color: inherit;
-        }
-    }
-
-}