@progress/kendo-theme-default 5.12.1-dev.2 → 5.12.1-dev.3

package/scss/pager/_variables.scss

@@ -6,40 +6,40 @@
 /// Horizontal padding of the pager according to the pager size.
 /// @group pager
 $kendo-pager-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-pager-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-pager-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-pager-padding-x-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-pager-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-pager-md-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-pager-lg-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
 /// Vertical padding of the pager according to the pager size.
 /// @group pager
 $kendo-pager-padding-y: $kendo-pager-padding-x !default;
-$kendo-pager-padding-y-sm: $kendo-pager-padding-x-sm !default;
-$kendo-pager-padding-y-md: $kendo-pager-padding-x-md !default;
-$kendo-pager-padding-y-lg: $kendo-pager-padding-x-lg !default;
+$kendo-pager-sm-padding-y: $kendo-pager-sm-padding-x !default;
+$kendo-pager-md-padding-y: $kendo-pager-md-padding-x !default;
+$kendo-pager-lg-padding-y: $kendo-pager-lg-padding-x !default;
 
 /// Minimum width of the pager items according to the pager size.
 /// @group pager
-$kendo-pager-item-min-width-sm: $kendo-button-calc-size-sm !default;
-$kendo-pager-item-min-width-md: $kendo-button-calc-size-md !default;
-$kendo-pager-item-min-width-lg: $kendo-button-calc-size-lg !default;
+$kendo-pager-sm-item-min-width: $kendo-button-sm-calc-size !default;
+$kendo-pager-md-item-min-width: $kendo-button-md-calc-size !default;
+$kendo-pager-lg-item-min-width: $kendo-button-lg-calc-size !default;
 
 /// Margin between pager item groups according to the pager size.
 /// @group pager
-$kendo-pager-item-group-spacing-sm: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-pager-item-group-spacing-md: k-map-get( $kendo-spacing, 3.5 ) !default;
-$kendo-pager-item-group-spacing-lg: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-pager-sm-item-group-spacing: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-pager-md-item-group-spacing: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-pager-lg-item-group-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 
 /// Border width of the pager.
 /// @group pager
 $kendo-pager-border-width: 1px !default;
 /// Font family of the pager.
 /// @group pager
-$kendo-pager-font-family: $font-family !default;
+$kendo-pager-font-family: $kendo-font-family !default;
 /// Font size of the pager.
 /// @group pager
-$kendo-pager-font-size: $font-size !default;
+$kendo-pager-font-size: $kendo-font-size-md !default;
 /// Line height of the pager.
 /// @group pager
-$kendo-pager-line-height: $line-height !default;
+$kendo-pager-line-height: $kendo-line-height-md !default;
 /// Background color of the pager.
 /// @group pager
 $kendo-pager-bg: $kendo-component-header-bg !default;
@@ -118,32 +118,32 @@ $kendo-pager-input-width: 5em !default;
 
 /// Width of the pager dropdowns according to the pager size.
 /// @group pager
-$kendo-pager-dropdown-width-sm: 5em !default;
-$kendo-pager-dropdown-width-md: 5em !default;
-$kendo-pager-dropdown-width-lg: 5em !default;
+$kendo-pager-sm-dropdown-width: 5em !default;
+$kendo-pager-md-dropdown-width: 5em !default;
+$kendo-pager-lg-dropdown-width: 5em !default;
 
 /// Sizes map of the pager.
 /// @group pager
 $kendo-pager-sizes: (
     sm: (
-        padding-x: $kendo-pager-padding-x-sm,
-        padding-y: $kendo-pager-padding-y-sm,
-        item-group-spacing: $kendo-pager-item-group-spacing-sm,
-        item-min-width: $kendo-pager-item-min-width-sm,
-        pager-dropdown-width: $kendo-pager-dropdown-width-sm
+        padding-x: $kendo-pager-sm-padding-x,
+        padding-y: $kendo-pager-sm-padding-y,
+        item-group-spacing: $kendo-pager-sm-item-group-spacing,
+        item-min-width: $kendo-pager-sm-item-min-width,
+        pager-dropdown-width: $kendo-pager-sm-dropdown-width
     ),
     md: (
-        padding-x: $kendo-pager-padding-x-md,
-        padding-y: $kendo-pager-padding-y-md,
-        item-group-spacing: $kendo-pager-item-group-spacing-md,
-        item-min-width: $kendo-pager-item-min-width-md,
-        pager-dropdown-width: $kendo-pager-dropdown-width-md
+        padding-x: $kendo-pager-md-padding-x,
+        padding-y: $kendo-pager-md-padding-y,
+        item-group-spacing: $kendo-pager-md-item-group-spacing,
+        item-min-width: $kendo-pager-md-item-min-width,
+        pager-dropdown-width: $kendo-pager-md-dropdown-width
     ),
     lg: (
-        padding-x: $kendo-pager-padding-x-lg,
-        padding-y: $kendo-pager-padding-y-lg,
-        item-group-spacing: $kendo-pager-item-group-spacing-lg,
-        item-min-width: $kendo-pager-item-min-width-lg,
-        pager-dropdown-width: $kendo-pager-dropdown-width-lg
+        padding-x: $kendo-pager-lg-padding-x,
+        padding-y: $kendo-pager-lg-padding-y,
+        item-group-spacing: $kendo-pager-lg-item-group-spacing,
+        item-min-width: $kendo-pager-lg-item-min-width,
+        pager-dropdown-width: $kendo-pager-lg-dropdown-width
     )
 ) !default;

package/scss/panelbar/_layout.scss

@@ -4,13 +4,13 @@
     .k-panelbar {
         margin: 0;
         padding: 0;
-        border-width: $panelbar-border-width;
-        border-style: $panelbar-border-style;
+        border-width: $kendo-panelbar-border-width;
+        border-style: $kendo-panelbar-border-style;
         box-sizing: border-box;
         outline: 0;
-        font-family: $panelbar-font-family;
-        font-size: $panelbar-font-size;
-        line-height: $panelbar-line-height;
+        font-family: $kendo-panelbar-font-family;
+        font-size: $kendo-panelbar-font-size;
+        line-height: $kendo-panelbar-line-height;
         list-style: none;
         display: block;
         -webkit-touch-callout: none;
@@ -28,12 +28,12 @@
         > .k-panelbar-header {
             // TODO
             border-width: 0;
-            border-style: $panelbar-item-border-style;
+            border-style: $kendo-panelbar-item-border-style;
             border-color: inherit;
             display: block;
 
             > .k-link {
-                padding: $panelbar-header-padding-y $panelbar-header-padding-x;
+                padding: $kendo-panelbar-header-padding-y $kendo-panelbar-header-padding-x;
                 color: inherit;
                 background: none;
                 text-decoration: none;
@@ -51,7 +51,7 @@
         }
         > .k-item + .k-item,
         > .k-panelbar-header + .k-panelbar-header {
-            border-top-width: $panelbar-item-border-width;
+            border-top-width: $kendo-panelbar-item-border-width;
         }
 
 
@@ -71,7 +71,7 @@
             display: block;
 
             > .k-link {
-                padding: $panelbar-item-padding-y $panelbar-item-padding-x;
+                padding: $kendo-panelbar-item-padding-y $kendo-panelbar-item-padding-x;
                 color: inherit;
                 text-decoration: none;
                 display: flex;
@@ -86,10 +86,10 @@
             }
 
             // Hierarchy items
-            @for $i from 1 through $panelbar-item-level-count {
+            @for $i from 1 through $kendo-panelbar-item-level-count {
                 &.k-level-#{$i} {
                     .k-link {
-                        padding-left: ( $panelbar-item-padding-x * $i );
+                        padding-left: ( $kendo-panelbar-item-padding-x * $i );
                     }
                 }
             }
@@ -115,7 +115,7 @@
         .k-group .k-panelbar-expand,
         .k-group .k-panelbar-collapse,
         .k-panelbar-group .k-panelbar-toggle {
-            margin-inline-end: calc( #{$panelbar-header-padding-x} - #{$panelbar-item-padding-x} );
+            margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
         }
 
 
@@ -125,11 +125,11 @@
             .k-group > .k-item,
             .k-panelbar-group > .k-panelbar-item {
                 // Hierarchy items
-                @for $i from 1 through $panelbar-item-level-count {
+                @for $i from 1 through $kendo-panelbar-item-level-count {
                     &.k-level-#{$i} {
                         .k-link {
-                            padding-left: $panelbar-item-padding-x;
-                            padding-right: ( $panelbar-item-padding-x * $i );
+                            padding-left: $kendo-panelbar-item-padding-x;
+                            padding-right: ( $kendo-panelbar-item-padding-x * $i );
                         }
                     }
                 }

package/scss/panelbar/_theme.scss

@@ -2,9 +2,9 @@
 
     .k-panelbar {
         @include fill(
-            $panelbar-text,
-            $panelbar-bg,
-            $panelbar-border
+            $kendo-panelbar-text,
+            $kendo-panelbar-bg,
+            $kendo-panelbar-border
         );
 
 
@@ -14,25 +14,25 @@
 
             &.k-expanded.k-level-0 > .k-link  {
                 @include fill(
-                    $panelbar-header-expanded-text,
-                    $panelbar-header-expanded-bg,
-                    $panelbar-header-expanded-border,
-                    $panelbar-header-expanded-gradient
+                    $kendo-panelbar-header-expanded-text,
+                    $kendo-panelbar-header-expanded-bg,
+                    $kendo-panelbar-header-expanded-border,
+                    $kendo-panelbar-header-expanded-gradient
                 );
             }
 
             // Normal
             > .k-link {
                 @include fill(
-                    $panelbar-header-text,
-                    $panelbar-header-bg,
-                    $panelbar-header-border,
-                    $panelbar-header-gradient
+                    $kendo-panelbar-header-text,
+                    $kendo-panelbar-header-bg,
+                    $kendo-panelbar-header-border,
+                    $kendo-panelbar-header-gradient
                 );
 
                 .k-icon,
                 .k-panelbar-item-icon {
-                    color: $panelbar-text;
+                    color: $kendo-panelbar-text;
                 }
             }
 
@@ -40,10 +40,10 @@
             > .k-link:hover,
             > .k-link.k-hover {
                 @include fill(
-                    $panelbar-header-hover-text,
-                    $panelbar-header-hover-bg,
-                    $panelbar-header-hover-border,
-                    $panelbar-header-hover-gradient
+                    $kendo-panelbar-header-hover-text,
+                    $kendo-panelbar-header-hover-bg,
+                    $kendo-panelbar-header-hover-border,
+                    $kendo-panelbar-header-hover-gradient
                 );
             }
 
@@ -51,32 +51,32 @@
             > .k-link:focus,
             > .k-link.k-focus {
                 @include fill(
-                    $panelbar-header-focus-text,
-                    $panelbar-header-focus-bg,
-                    $panelbar-header-focus-border,
-                    $panelbar-header-focus-gradient
+                    $kendo-panelbar-header-focus-text,
+                    $kendo-panelbar-header-focus-bg,
+                    $kendo-panelbar-header-focus-border,
+                    $kendo-panelbar-header-focus-gradient
                 );
-                @include focus-indicator( $panelbar-header-focus-shadow, true );
+                @include focus-indicator( $kendo-panelbar-header-focus-shadow, true );
             }
 
             // Focus & Hover
             > .k-link:focus:hover,
             > .k-link.k-focus.k-hover {
                 @include fill(
-                    $panelbar-header-hover-focus-text,
-                    $panelbar-header-hover-focus-bg,
-                    $panelbar-header-hover-focus-border,
-                    $panelbar-header-hover-focus-gradient
+                    $kendo-panelbar-header-hover-focus-text,
+                    $kendo-panelbar-header-hover-focus-bg,
+                    $kendo-panelbar-header-hover-focus-border,
+                    $kendo-panelbar-header-hover-focus-gradient
                 );
             }
 
             // Selected
             > .k-link.k-selected {
                 @include fill(
-                    $panelbar-header-selected-text,
-                    $panelbar-header-selected-bg,
-                    $panelbar-header-selected-border,
-                    $panelbar-header-selected-gradient
+                    $kendo-panelbar-header-selected-text,
+                    $kendo-panelbar-header-selected-bg,
+                    $kendo-panelbar-header-selected-border,
+                    $kendo-panelbar-header-selected-gradient
                 );
 
                 .k-icon,
@@ -89,10 +89,10 @@
             > .k-link.k-selected:hover,
             > .k-link.k-selected.k-hover {
                 @include fill(
-                    $panelbar-header-selected-hover-text,
-                    $panelbar-header-selected-hover-bg,
-                    $panelbar-header-selected-hover-border,
-                    $panelbar-header-selected-hover-gradient
+                    $kendo-panelbar-header-selected-hover-text,
+                    $kendo-panelbar-header-selected-hover-bg,
+                    $kendo-panelbar-header-selected-hover-border,
+                    $kendo-panelbar-header-selected-hover-gradient
                 );
             }
 
@@ -100,10 +100,10 @@
             > .k-link.k-selected:focus,
             > .k-link.k-selected.k-focus {
                 @include fill(
-                    $panelbar-header-selected-focus-text,
-                    $panelbar-header-selected-focus-bg,
-                    $panelbar-header-selected-focus-border,
-                    $panelbar-header-selected-focus-gradient
+                    $kendo-panelbar-header-selected-focus-text,
+                    $kendo-panelbar-header-selected-focus-bg,
+                    $kendo-panelbar-header-selected-focus-border,
+                    $kendo-panelbar-header-selected-focus-gradient
                 );
             }
 
@@ -111,10 +111,10 @@
             > .k-link.k-selected:hover:focus,
             > .k-link.k-selected.k-hover.k-focus {
                 @include fill(
-                    $panelbar-header-selected-hover-focus-text,
-                    $panelbar-header-selected-hover-focus-bg,
-                    $panelbar-header-selected-hover-focus-border,
-                    $panelbar-header-selected-hover-focus-gradient
+                    $kendo-panelbar-header-selected-hover-focus-text,
+                    $kendo-panelbar-header-selected-hover-focus-bg,
+                    $kendo-panelbar-header-selected-hover-focus-border,
+                    $kendo-panelbar-header-selected-hover-focus-gradient
                 );
             }
         }
@@ -130,10 +130,10 @@
             > .k-panelbar-item > .k-link:hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
-                    $panelbar-item-hover-text,
-                    $panelbar-item-hover-bg,
-                    $panelbar-item-hover-border,
-                    $panelbar-item-hover-gradient
+                    $kendo-panelbar-item-hover-text,
+                    $kendo-panelbar-item-hover-bg,
+                    $kendo-panelbar-item-hover-border,
+                    $kendo-panelbar-item-hover-gradient
                 );
             }
 
@@ -143,12 +143,12 @@
             > .k-panelbar-item > .k-link:focus,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
-                    $panelbar-item-focus-text,
-                    $panelbar-item-focus-bg,
-                    $panelbar-item-focus-border,
-                    $panelbar-item-focus-gradient
+                    $kendo-panelbar-item-focus-text,
+                    $kendo-panelbar-item-focus-bg,
+                    $kendo-panelbar-item-focus-border,
+                    $kendo-panelbar-item-focus-gradient
                 );
-                @include focus-indicator( $panelbar-item-focus-shadow, true );
+                @include focus-indicator( $kendo-panelbar-item-focus-shadow, true );
             }
 
             // Focus & Hover
@@ -157,10 +157,10 @@
             > .k-panelbar-item > .k-link:focus:hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
-                    $panelbar-item-hover-focus-text,
-                    $panelbar-item-hover-focus-bg,
-                    $panelbar-item-hover-focus-border,
-                    $panelbar-item-hover-focus-gradient
+                    $kendo-panelbar-item-hover-focus-text,
+                    $kendo-panelbar-item-hover-focus-bg,
+                    $kendo-panelbar-item-hover-focus-border,
+                    $kendo-panelbar-item-hover-focus-gradient
                 );
             }
 
@@ -168,10 +168,10 @@
             > .k-item > .k-link.k-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
-                    $panelbar-item-selected-text,
-                    $panelbar-item-selected-bg,
-                    $panelbar-item-selected-border,
-                    $panelbar-item-selected-gradient
+                    $kendo-panelbar-item-selected-text,
+                    $kendo-panelbar-item-selected-bg,
+                    $kendo-panelbar-item-selected-border,
+                    $kendo-panelbar-item-selected-gradient
                 );
             }
 
@@ -181,10 +181,10 @@
             > .k-panelbar-item > .k-link.k-selected:hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
-                    $panelbar-item-selected-hover-text,
-                    $panelbar-item-selected-hover-bg,
-                    $panelbar-item-selected-hover-border,
-                    $panelbar-item-selected-hover-gradient
+                    $kendo-panelbar-item-selected-hover-text,
+                    $kendo-panelbar-item-selected-hover-bg,
+                    $kendo-panelbar-item-selected-hover-border,
+                    $kendo-panelbar-item-selected-hover-gradient
                 );
             }
 
@@ -194,10 +194,10 @@
             > .k-panelbar-item > .k-link.k-selected:focus,
             > .k-panelbar-item > .k-link.k-selected.k-focus {
                 @include fill(
-                    $panelbar-item-selected-focus-text,
-                    $panelbar-item-selected-focus-bg,
-                    $panelbar-item-selected-focus-border,
-                    $panelbar-item-selected-focus-gradient
+                    $kendo-panelbar-item-selected-focus-text,
+                    $kendo-panelbar-item-selected-focus-bg,
+                    $kendo-panelbar-item-selected-focus-border,
+                    $kendo-panelbar-item-selected-focus-gradient
                 );
             }
 
@@ -207,10 +207,10 @@
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
             > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
                 @include fill(
-                    $panelbar-item-selected-hover-focus-text,
-                    $panelbar-item-selected-hover-focus-bg,
-                    $panelbar-item-selected-hover-focus-border,
-                    $panelbar-item-selected-hover-focus-gradient
+                    $kendo-panelbar-item-selected-hover-focus-text,
+                    $kendo-panelbar-item-selected-hover-focus-bg,
+                    $kendo-panelbar-item-selected-hover-focus-border,
+                    $kendo-panelbar-item-selected-hover-focus-gradient
                 );
             }
         }

package/scss/panelbar/_variables.scss

@@ -1,108 +1,105 @@
-@import "../typography/_variables.scss";
-
-
 // Panelbar
 
-$panelbar-padding-x: 0px !default;
-$panelbar-padding-y: 0px !default;
-$panelbar-font-family: $font-family !default;
-$panelbar-font-size: $font-size !default;
-$panelbar-line-height: $line-height !default;
-$panelbar-border-width: 1px !default;
-$panelbar-border-style: solid !default;
-$panelbar-item-border-width: 1px !default;
-$panelbar-item-border-style: solid !default;
-
-$panelbar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$panelbar-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
-
-$panelbar-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$panelbar-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-
-$panelbar-item-level-count: 4 !default;
-
-$panelbar-bg: $kendo-component-bg !default;
-$panelbar-text: $kendo-component-text !default;
-$panelbar-border: $kendo-component-border !default;
-
-$panelbar-header-bg: $panelbar-bg !default;
-$panelbar-header-text: $link-text !default;
-$panelbar-header-border: null !default;
-$panelbar-header-gradient: null !default;
-
-$panelbar-header-hover-bg: k-try-shade( $panelbar-header-bg, .5 ) !default;
-$panelbar-header-hover-text: null !default;
-$panelbar-header-hover-border: null !default;
-$panelbar-header-hover-gradient: null !default;
-
-$panelbar-header-focus-bg: null !default;
-$panelbar-header-focus-text: null !default;
-$panelbar-header-focus-border: null !default;
-$panelbar-header-focus-gradient: null !default;
-$panelbar-header-focus-shadow: $kendo-list-item-focus-shadow !default;
-
-$panelbar-header-hover-focus-bg: null !default;
-$panelbar-header-hover-focus-text: null !default;
-$panelbar-header-hover-focus-border: null !default;
-$panelbar-header-hover-focus-gradient: null !default;
-
-$panelbar-header-selected-bg: $kendo-selected-bg !default;
-$panelbar-header-selected-text: $kendo-selected-text !default;
-$panelbar-header-selected-border: null !default;
-$panelbar-header-selected-gradient: null !default;
-
-$panelbar-header-selected-hover-bg: k-try-shade( $panelbar-header-selected-bg ) !default;
-$panelbar-header-selected-hover-text: null !default;
-$panelbar-header-selected-hover-border: null !default;
-$panelbar-header-selected-hover-gradient: null !default;
-
-$panelbar-header-selected-focus-bg: null !default;
-$panelbar-header-selected-focus-text: null !default;
-$panelbar-header-selected-focus-border: null !default;
-$panelbar-header-selected-focus-gradient: null !default;
-
-$panelbar-header-selected-hover-focus-bg: null !default;
-$panelbar-header-selected-hover-focus-text: null !default;
-$panelbar-header-selected-hover-focus-border: null !default;
-$panelbar-header-selected-hover-focus-gradient: null !default;
-
-$panelbar-item-hover-bg: k-try-shade( $panelbar-bg, .5 ) !default;
-$panelbar-item-hover-text: null !default;
-$panelbar-item-hover-border: null !default;
-$panelbar-item-hover-gradient: null !default;
-
-$panelbar-item-focus-bg: null !default;
-$panelbar-item-focus-text: null !default;
-$panelbar-item-focus-border: null !default;
-$panelbar-item-focus-gradient: null !default;
-$panelbar-item-focus-shadow: $kendo-list-item-focus-shadow !default;
-
-$panelbar-item-hover-focus-bg: null !default;
-$panelbar-item-hover-focus-text: null !default;
-$panelbar-item-hover-focus-border: null !default;
-$panelbar-item-hover-focus-gradient: null !default;
-
-$panelbar-item-selected-bg: $kendo-selected-bg !default;
-$panelbar-item-selected-text: $kendo-selected-text !default;
-$panelbar-item-selected-border: null !default;
-$panelbar-item-selected-gradient: null !default;
-
-$panelbar-item-selected-hover-bg: k-try-shade( $panelbar-item-selected-bg ) !default;
-$panelbar-item-selected-hover-text: null !default;
-$panelbar-item-selected-hover-border: null !default;
-$panelbar-item-selected-hover-gradient: null !default;
-
-$panelbar-item-selected-focus-bg: null !default;
-$panelbar-item-selected-focus-text: null !default;
-$panelbar-item-selected-focus-border: null !default;
-$panelbar-item-selected-focus-gradient: null !default;
-
-$panelbar-item-selected-hover-focus-bg: null !default;
-$panelbar-item-selected-hover-focus-text: null !default;
-$panelbar-item-selected-hover-focus-border: null !default;
-$panelbar-item-selected-hover-focus-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;
+$kendo-panelbar-padding-x: 0px !default;
+$kendo-panelbar-padding-y: 0px !default;
+$kendo-panelbar-font-family: $kendo-font-family !default;
+$kendo-panelbar-font-size: $kendo-font-size-md !default;
+$kendo-panelbar-line-height: $kendo-line-height-md !default;
+$kendo-panelbar-border-width: 1px !default;
+$kendo-panelbar-border-style: solid !default;
+$kendo-panelbar-item-border-width: 1px !default;
+$kendo-panelbar-item-border-style: solid !default;
+
+$kendo-panelbar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-panelbar-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+
+$kendo-panelbar-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-panelbar-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+
+$kendo-panelbar-item-level-count: 4 !default;
+
+$kendo-panelbar-bg: $kendo-component-bg !default;
+$kendo-panelbar-text: $kendo-component-text !default;
+$kendo-panelbar-border: $kendo-component-border !default;
+
+$kendo-panelbar-header-bg: $kendo-panelbar-bg !default;
+$kendo-panelbar-header-text: $kendo-link-text !default;
+$kendo-panelbar-header-border: null !default;
+$kendo-panelbar-header-gradient: null !default;
+
+$kendo-panelbar-header-hover-bg: k-try-shade( $kendo-panelbar-header-bg, .5 ) !default;
+$kendo-panelbar-header-hover-text: null !default;
+$kendo-panelbar-header-hover-border: null !default;
+$kendo-panelbar-header-hover-gradient: null !default;
+
+$kendo-panelbar-header-focus-bg: null !default;
+$kendo-panelbar-header-focus-text: null !default;
+$kendo-panelbar-header-focus-border: null !default;
+$kendo-panelbar-header-focus-gradient: null !default;
+$kendo-panelbar-header-focus-shadow: $kendo-list-item-focus-shadow !default;
+
+$kendo-panelbar-header-hover-focus-bg: null !default;
+$kendo-panelbar-header-hover-focus-text: null !default;
+$kendo-panelbar-header-hover-focus-border: null !default;
+$kendo-panelbar-header-hover-focus-gradient: null !default;
+
+$kendo-panelbar-header-selected-bg: $kendo-selected-bg !default;
+$kendo-panelbar-header-selected-text: $kendo-selected-text !default;
+$kendo-panelbar-header-selected-border: null !default;
+$kendo-panelbar-header-selected-gradient: null !default;
+
+$kendo-panelbar-header-selected-hover-bg: k-try-shade( $kendo-panelbar-header-selected-bg ) !default;
+$kendo-panelbar-header-selected-hover-text: null !default;
+$kendo-panelbar-header-selected-hover-border: null !default;
+$kendo-panelbar-header-selected-hover-gradient: null !default;
+
+$kendo-panelbar-header-selected-focus-bg: null !default;
+$kendo-panelbar-header-selected-focus-text: null !default;
+$kendo-panelbar-header-selected-focus-border: null !default;
+$kendo-panelbar-header-selected-focus-gradient: null !default;
+
+$kendo-panelbar-header-selected-hover-focus-bg: null !default;
+$kendo-panelbar-header-selected-hover-focus-text: null !default;
+$kendo-panelbar-header-selected-hover-focus-border: null !default;
+$kendo-panelbar-header-selected-hover-focus-gradient: null !default;
+
+$kendo-panelbar-item-hover-bg: k-try-shade( $kendo-panelbar-bg, .5 ) !default;
+$kendo-panelbar-item-hover-text: null !default;
+$kendo-panelbar-item-hover-border: null !default;
+$kendo-panelbar-item-hover-gradient: null !default;
+
+$kendo-panelbar-item-focus-bg: null !default;
+$kendo-panelbar-item-focus-text: null !default;
+$kendo-panelbar-item-focus-border: null !default;
+$kendo-panelbar-item-focus-gradient: null !default;
+$kendo-panelbar-item-focus-shadow: $kendo-list-item-focus-shadow !default;
+
+$kendo-panelbar-item-hover-focus-bg: null !default;
+$kendo-panelbar-item-hover-focus-text: null !default;
+$kendo-panelbar-item-hover-focus-border: null !default;
+$kendo-panelbar-item-hover-focus-gradient: null !default;
+
+$kendo-panelbar-item-selected-bg: $kendo-selected-bg !default;
+$kendo-panelbar-item-selected-text: $kendo-selected-text !default;
+$kendo-panelbar-item-selected-border: null !default;
+$kendo-panelbar-item-selected-gradient: null !default;
+
+$kendo-panelbar-item-selected-hover-bg: k-try-shade( $kendo-panelbar-item-selected-bg ) !default;
+$kendo-panelbar-item-selected-hover-text: null !default;
+$kendo-panelbar-item-selected-hover-border: null !default;
+$kendo-panelbar-item-selected-hover-gradient: null !default;
+
+$kendo-panelbar-item-selected-focus-bg: null !default;
+$kendo-panelbar-item-selected-focus-text: null !default;
+$kendo-panelbar-item-selected-focus-border: null !default;
+$kendo-panelbar-item-selected-focus-gradient: null !default;
+
+$kendo-panelbar-item-selected-hover-focus-bg: null !default;
+$kendo-panelbar-item-selected-hover-focus-text: null !default;
+$kendo-panelbar-item-selected-hover-focus-border: null !default;
+$kendo-panelbar-item-selected-hover-focus-gradient: null !default;
+
+$kendo-panelbar-header-expanded-bg: null !default;
+$kendo-panelbar-header-expanded-text: null !default;
+$kendo-panelbar-header-expanded-border: null !default;
+$kendo-panelbar-header-expanded-gradient: null !default;