feat(toolbar): add toolbar sizes

BREAKING CHANGE: Added `size` appearance property.

The `size` appearance property generates component specific class name `k-toolbar-{size}`.

BREAKING CHANGE: Added kendo prefix to all toolbar variables

Change variable names from `$toolbar-*` to `$kendo-toolbar-*`.

packages/bootstrap/scss/button/_variables.scss

@@ -42,10 +42,16 @@ $kendo-button-line-height-lg: $line-height-md !default;
 /// Calculated height of the button.
 /// @group button
 $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size-sm: calc( #{$kendo-button-line-height-sm * 1em} + #{$kendo-button-padding-y-sm * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size-md: calc( #{$kendo-button-line-height-md * 1em} + #{$kendo-button-padding-y-md * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size-lg: calc( #{$kendo-button-line-height-lg * 1em} + #{$kendo-button-padding-y-lg * 2} + #{$kendo-button-border-width * 2} ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size-sm: calc( #{$kendo-button-line-height-sm * 1em} + #{$kendo-button-padding-y-sm * 2} ) !default;
+$kendo-button-inner-calc-size-md: calc( #{$kendo-button-line-height-md * 1em} + #{$kendo-button-padding-y-md * 2} ) !default;
+$kendo-button-inner-calc-size-lg: calc( #{$kendo-button-line-height-lg * 1em} + #{$kendo-button-padding-y-lg * 2} ) !default;
 
 $kendo-button-sizes: (
     sm: (

packages/bootstrap/scss/chat/_variables.scss

@@ -32,11 +32,11 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-toolbar-padding-x: $toolbar-padding-x !default;
-$chat-toolbar-padding-y: $toolbar-padding-y !default;
-$chat-toolbar-spacing: $toolbar-spacing !default;
-$chat-toolbar-bg: $toolbar-bg !default;
-$chat-toolbar-text: $toolbar-text !default;
+$chat-toolbar-padding-x: $kendo-toolbar-padding-x-md !default;
+$chat-toolbar-padding-y: $kendo-toolbar-padding-y-md !default;
+$chat-toolbar-spacing: $kendo-toolbar-spacing-md !default;
+$chat-toolbar-bg: $kendo-toolbar-bg !default;
+$chat-toolbar-text: $kendo-toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
 $chat-quick-reply-padding-x: 12px !default;

packages/bootstrap/scss/filemanager/_variables.scss

@@ -25,7 +25,7 @@ $filemanager-navigation-border: null !default;
 $filemanager-breadcrumb-padding-x: k-map-get( $spacing, 2 ) !default;
 $filemanager-breadcrumb-padding-y: k-map-get( $spacing, 2 ) !default;
 $filemanager-breadcrumb-border-width: $filemanager-border-width !default;
-$filemanager-breadcrumb-bg: $toolbar-bg !default;
+$filemanager-breadcrumb-bg: $kendo-toolbar-bg !default;
 $filemanager-breadcrumb-text: null !default;
 $filemanager-breadcrumb-border: null !default;
 

packages/bootstrap/scss/grid/_variables.scss

@@ -20,9 +20,6 @@ $grid-grouping-header-padding-y: $grid-grouping-header-padding-x !default;
 $grid-filter-cell-padding-x: $grid-padding-y !default;
 $grid-filter-cell-padding-y: $grid-filter-cell-padding-x !default;
 
-$grid-toolbar-padding-x: $toolbar-padding-x !default;
-$grid-toolbar-padding-y: $toolbar-padding-y !default;
-$grid-toolbar-spacing: $toolbar-spacing !default;
 $grid-toolbar-border-width: $grid-border-width !default;
 
 $grid-cell-padding-x: $grid-padding-x !default;

packages/bootstrap/scss/pdf-viewer/_variables.scss

@@ -24,9 +24,9 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 k-math-div( $pdf-viewer-page-spacing, 2 ) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-padding-x: $toolbar-padding-x !default;
-$pdf-viewer-search-dialog-padding-y: calc( #{$toolbar-padding-x} * 2 ) !default;
-$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
+$pdf-viewer-search-dialog-padding-x: $kendo-toolbar-padding-x-md !default;
+$pdf-viewer-search-dialog-padding-y: calc( #{$kendo-toolbar-padding-x-md} * 2 ) !default;
+$pdf-viewer-search-dialog-spacing: $kendo-toolbar-spacing-md !default;
 
 $pdf-viewer-search-panel-border-width: 1px !default;
 $pdf-viewer-search-panel-border-radius: k-map-get( $spacing, 1 ) !default;

packages/bootstrap/scss/scheduler/_variables.scss

@@ -8,15 +8,15 @@ $scheduler-bg: $component-bg !default;
 $scheduler-text: $component-text !default;
 $scheduler-border: $component-border !default;
 
-$scheduler-toolbar-bg: $toolbar-bg !default;
-$scheduler-toolbar-text: $toolbar-text !default;
-$scheduler-toolbar-border: $toolbar-border !default;
-$scheduler-toolbar-gradient: $toolbar-gradient !default;
-
-$scheduler-footer-bg: $toolbar-bg !default;
-$scheduler-footer-text: $toolbar-text !default;
-$scheduler-footer-border: $toolbar-border !default;
-$scheduler-footer-gradient: $toolbar-gradient !default;
+$scheduler-toolbar-bg: $kendo-toolbar-bg !default;
+$scheduler-toolbar-text: $kendo-toolbar-text !default;
+$scheduler-toolbar-border: $kendo-toolbar-border !default;
+$scheduler-toolbar-gradient: $kendo-toolbar-gradient !default;
+
+$scheduler-footer-bg: $kendo-toolbar-bg !default;
+$scheduler-footer-text: $kendo-toolbar-text !default;
+$scheduler-footer-border: $kendo-toolbar-border !default;
+$scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
 $scheduler-event-min-height: 25px !default;
 $scheduler-event-border-radius: $kendo-border-radius-md !default;

packages/bootstrap/scss/toolbar/_variables.scss

@@ -1,29 +1,87 @@
 // Toolbar
 
-/// The horizontal padding of the container.
+/// The horizontal padding of the toolbar.
 /// @group toolbar
-$toolbar-padding-x: k-map-get( $spacing, 2 ) !default;
-/// The vertical padding of the container.
+$kendo-toolbar-padding-x: null !default;
+$kendo-toolbar-padding-x-sm: map-get( $spacing, 1 ) !default;
+$kendo-toolbar-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-toolbar-padding-x-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+
+/// The vertical padding of the toolbar.
+/// @group toolbar
+$kendo-toolbar-padding-y: null !default;
+$kendo-toolbar-padding-y-sm: map-get( $spacing, 1 ) !default;
+$kendo-toolbar-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-toolbar-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+
+/// The spacing betweem the toolbar tools.
 /// @group toolbar
-$toolbar-padding-y: k-map-get( $spacing, 2 ) !default;
-$toolbar-border-width: 1px !default;
-$toolbar-border-radius: null !default;
-$toolbar-spacing: $toolbar-padding-x !default;
+$kendo-toolbar-spacing: null !default;
+$kendo-toolbar-spacing-sm: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-toolbar-spacing-md: map-get( $spacing, 2 ) !default;
+$kendo-toolbar-spacing-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
 
-$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+/// Width of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-width: 1px !default;
+/// Border radius of the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-radius: null !default;
+
+/// Font family of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-family: $font-family !default;
+/// Font size of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-size: $font-size !default;
+/// Line height of the toolbar.
+/// @group toolbar
+$kendo-toolbar-line-height: $line-height !default;
 
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: $line-height !default;
+/// Background color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-bg: $header-bg !default;
+/// Text color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-text: $header-text !default;
+/// Color of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border: $header-border !default;
+/// Gradient of the toolbar.
+/// @group toolbar
+$kendo-toolbar-gradient: null !default;
+/// Box shadow of the toolbar.
+/// @group toolbar
+$kendo-toolbar-shadow: null !default;
 
-$toolbar-bg: $header-bg !default;
-$toolbar-text: $header-text !default;
-$toolbar-border: $header-border !default;
-$toolbar-gradient: null !default;
-$toolbar-shadow: null !default;
+/// Color of the separator border of the toolbar.
+/// @group toolbar
+$kendo-toolbar-separator-border: inherit !default;
 
-$toolbar-separator-border: inherit !default;
+/// The width of the input in the toolbar.
+/// @group toolbar
+$kendo-toolbar-input-width: 10em !default;
 
-$toolbar-input-width: 10em !default;
+/// Box shadow of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
 
-$toolbar-item-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
+/// Sizes map for the toolbar.
+/// @group toolbar
+$kendo-toolbar-sizes: (
+    sm: (
+        padding-x: $kendo-toolbar-padding-x-sm,
+        padding-y: $kendo-toolbar-padding-y-sm,
+        spacing: $kendo-toolbar-spacing-sm
+    ),
+    md: (
+        padding-x: $kendo-toolbar-padding-x-md,
+        padding-y: $kendo-toolbar-padding-y-md,
+        spacing: $kendo-toolbar-spacing-md
+    ),
+    lg: (
+        padding-x: $kendo-toolbar-padding-x-lg,
+        padding-y: $kendo-toolbar-padding-y-lg,
+        spacing: $kendo-toolbar-spacing-lg
+    )
+) !default;

packages/classic/scss/button/_variables.scss

@@ -42,10 +42,16 @@ $kendo-button-line-height-lg: $line-height-lg !default;
 /// Calculated height of the button.
 /// @group button
 $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size-sm: calc( #{$kendo-button-line-height-sm * 1em} + #{$kendo-button-padding-y-sm * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size-md: calc( #{$kendo-button-line-height-md * 1em} + #{$kendo-button-padding-y-md * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size-lg: calc( #{$kendo-button-line-height-lg * 1em} + #{$kendo-button-padding-y-lg * 2} + #{$kendo-button-border-width * 2} ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size-sm: calc( #{$kendo-button-line-height-sm * 1em} + #{$kendo-button-padding-y-sm * 2} ) !default;
+$kendo-button-inner-calc-size-md: calc( #{$kendo-button-line-height-md * 1em} + #{$kendo-button-padding-y-md * 2} ) !default;
+$kendo-button-inner-calc-size-lg: calc( #{$kendo-button-line-height-lg * 1em} + #{$kendo-button-padding-y-lg * 2} ) !default;
 
 $kendo-button-sizes: (
     sm: (

packages/classic/scss/chat/_variables.scss

@@ -32,11 +32,11 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-toolbar-padding-x: $toolbar-padding-x !default;
-$chat-toolbar-padding-y: $toolbar-padding-y !default;
-$chat-toolbar-spacing: $toolbar-spacing !default;
-$chat-toolbar-bg: $toolbar-bg !default;
-$chat-toolbar-text: $toolbar-text !default;
+$chat-toolbar-padding-x: $kendo-toolbar-padding-x-md !default;
+$chat-toolbar-padding-y: $kendo-toolbar-padding-y-md !default;
+$chat-toolbar-spacing: $kendo-toolbar-spacing-md !default;
+$chat-toolbar-bg: $kendo-toolbar-bg !default;
+$chat-toolbar-text: $kendo-toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
 $chat-quick-reply-padding-x: 12px !default;

packages/classic/scss/filemanager/_variables.scss

@@ -25,7 +25,7 @@ $filemanager-navigation-border: null !default;
 $filemanager-breadcrumb-padding-x: k-map-get( $spacing, 2 ) !default;
 $filemanager-breadcrumb-padding-y: k-map-get( $spacing, 2 ) !default;
 $filemanager-breadcrumb-border-width: $filemanager-border-width !default;
-$filemanager-breadcrumb-bg: $toolbar-bg !default;
+$filemanager-breadcrumb-bg: $kendo-toolbar-bg !default;
 $filemanager-breadcrumb-text: null !default;
 $filemanager-breadcrumb-border: null !default;
 

packages/classic/scss/grid/_variables.scss

@@ -20,9 +20,6 @@ $grid-grouping-header-padding-y: $grid-grouping-header-padding-x !default;
 $grid-filter-cell-padding-x: $grid-padding-y !default;
 $grid-filter-cell-padding-y: $grid-filter-cell-padding-x !default;
 
-$grid-toolbar-padding-x: $toolbar-padding-x !default;
-$grid-toolbar-padding-y: $toolbar-padding-y !default;
-$grid-toolbar-spacing: $toolbar-spacing !default;
 $grid-toolbar-border-width: $grid-border-width !default;
 
 $grid-cell-padding-x: $grid-padding-x !default;

packages/classic/scss/pdf-viewer/_variables.scss

@@ -32,9 +32,9 @@ $pdf-viewer-search-panel-border: $component-border !default;
 $pdf-viewer-search-panel-shadow: $window-shadow !default;
 $pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;
 
-$pdf-viewer-search-dialog-padding-x: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-padding-x: $kendo-toolbar-padding-x-md !default;
 $pdf-viewer-search-dialog-padding-y: k-map-get( $spacing, 3 ) !default;
-$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
+$pdf-viewer-search-dialog-spacing: $kendo-toolbar-spacing-md !default;
 
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 

packages/classic/scss/scheduler/_variables.scss

@@ -8,15 +8,15 @@ $scheduler-bg: $component-bg !default;
 $scheduler-text: $component-text !default;
 $scheduler-border: $component-border !default;
 
-$scheduler-toolbar-bg: $toolbar-bg !default;
-$scheduler-toolbar-text: $toolbar-text !default;
-$scheduler-toolbar-border: $toolbar-border !default;
-$scheduler-toolbar-gradient: $toolbar-gradient !default;
-
-$scheduler-footer-bg: $toolbar-bg !default;
-$scheduler-footer-text: $toolbar-text !default;
-$scheduler-footer-border: $toolbar-border !default;
-$scheduler-footer-gradient: $toolbar-gradient !default;
+$scheduler-toolbar-bg: $kendo-toolbar-bg !default;
+$scheduler-toolbar-text: $kendo-toolbar-text !default;
+$scheduler-toolbar-border: $kendo-toolbar-border !default;
+$scheduler-toolbar-gradient: $kendo-toolbar-gradient !default;
+
+$scheduler-footer-bg: $kendo-toolbar-bg !default;
+$scheduler-footer-text: $kendo-toolbar-text !default;
+$scheduler-footer-border: $kendo-toolbar-border !default;
+$scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
 $scheduler-event-min-height: 25px !default;
 $scheduler-event-border-radius: $kendo-border-radius-md !default;

packages/classic/scss/toolbar/_variables.scss

@@ -1,29 +1,87 @@
 // Toolbar
 
-/// The horizontal padding of the container.
+/// The horizontal padding of the toolbar.
 /// @group toolbar
-$toolbar-padding-x: k-map-get( $spacing, 2 ) !default;
-/// The vertical padding of the container.
+$kendo-toolbar-padding-x: null !default;
+$kendo-toolbar-padding-x-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-toolbar-padding-x-md: k-map-get( $spacing, 2 ) !default;
+$kendo-toolbar-padding-x-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
+
+/// The vertical padding of the toolbar.
+/// @group toolbar
+$kendo-toolbar-padding-y: null !default;
+$kendo-toolbar-padding-y-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-toolbar-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-toolbar-padding-y-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
+
+/// The spacing betweem the toolbar tools.
 /// @group toolbar
-$toolbar-padding-y: k-map-get( $spacing, 2 ) !default;
-$toolbar-border-width: 1px !default;
-$toolbar-border-radius: null !default;
-$toolbar-spacing: $toolbar-padding-x !default;
+$kendo-toolbar-spacing: null !default;
+$kendo-toolbar-spacing-sm: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
+$kendo-toolbar-spacing-md: k-map-get( $spacing, 2 ) !default;
+$kendo-toolbar-spacing-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
 
-$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+/// Width of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-width: 1px !default;
+/// Border radius of the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-radius: null !default;
+
+/// Font family of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-family: $font-family !default;
+/// Font size of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-size: $font-size !default;
+/// Line height of the toolbar.
+/// @group toolbar
+$kendo-toolbar-line-height: $line-height !default;
 
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: $line-height !default;
+/// Background color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-bg: $kendo-button-bg !default;
+/// Text color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-text: $kendo-button-text !default;
+/// Color of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border: $kendo-button-border !default;
+/// Gradient of the toolbar.
+/// @group toolbar
+$kendo-toolbar-gradient: null !default;
+/// Box shadow of the toolbar.
+/// @group toolbar
+$kendo-toolbar-shadow: null !default;
 
-$toolbar-bg: $kendo-button-bg !default;
-$toolbar-text: $kendo-button-text !default;
-$toolbar-border: $kendo-button-border !default;
-$toolbar-gradient: null !default;
-$toolbar-shadow: null !default;
+/// Color of the separator border of the toolbar.
+/// @group toolbar
+$kendo-toolbar-separator-border: inherit !default;
 
-$toolbar-separator-border: inherit !default;
+/// The width of the input in the toolbar.
+/// @group toolbar
+$kendo-toolbar-input-width: 10em !default;
 
-$toolbar-input-width: 10em !default;
+/// Box shadow of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
 
-$toolbar-item-shadow: $kendo-button-focus-shadow !default;
+/// Sizes map for the toolbar.
+/// @group toolbar
+$kendo-toolbar-sizes: (
+    sm: (
+        padding-x: $kendo-toolbar-padding-x-sm,
+        padding-y: $kendo-toolbar-padding-y-sm,
+        spacing: $kendo-toolbar-spacing-sm
+    ),
+    md: (
+        padding-x: $kendo-toolbar-padding-x-md,
+        padding-y: $kendo-toolbar-padding-y-md,
+        spacing: $kendo-toolbar-spacing-md
+    ),
+    lg: (
+        padding-x: $kendo-toolbar-padding-x-lg,
+        padding-y: $kendo-toolbar-padding-y-lg,
+        spacing: $kendo-toolbar-spacing-lg
+    )
+) !default;