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

package/scss/bottom-navigation/_layout.scss

@@ -2,20 +2,20 @@
 
     // Bottom Navigation
     .k-bottom-nav {
-        padding: $bottom-nav-padding-y $bottom-nav-padding-x;
+        padding: $kendo-bottom-nav-padding-y $kendo-bottom-nav-padding-x;
         width: 100%;
         border-width: 0;
         border-style: solid;
         border-color: transparent;
         box-sizing: border-box;
-        font-size: $bottom-nav-font-size;
-        line-height: $bottom-nav-line-height;
-        font-family: $bottom-nav-font-family;
-        letter-spacing: $bottom-nav-letter-spacing;
+        font-size: $kendo-bottom-nav-font-size;
+        line-height: $kendo-bottom-nav-line-height;
+        font-family: $kendo-bottom-nav-font-family;
+        letter-spacing: $kendo-bottom-nav-letter-spacing;
         display: flex;
         flex-flow: row nowrap;
         white-space: nowrap;
-        gap: $bottom-nav-gap;
+        gap: $kendo-bottom-nav-gap;
         overflow: hidden;
         outline: none;
         -webkit-touch-callout: none;
@@ -29,28 +29,28 @@
     }
 
     .k-bottom-nav-border {
-        border-width: $bottom-nav-border-width;
+        border-width: $kendo-bottom-nav-border-width;
     }
 
     .k-bottom-nav-shadow {
-        box-shadow: $bottom-nav-shadow;
+        box-shadow: $kendo-bottom-nav-shadow;
     }
 
     // Items
     .k-bottom-nav-item {
-        padding: $bottom-nav-item-padding-y $bottom-nav-item-padding-x;
-        min-width: $bottom-nav-item-min-width;
-        max-width: $bottom-nav-item-max-width;
-        min-height: $bottom-nav-item-min-height;
+        padding: $kendo-bottom-nav-item-padding-y $kendo-bottom-nav-item-padding-x;
+        min-width: $kendo-bottom-nav-item-min-width;
+        max-width: $kendo-bottom-nav-item-max-width;
+        min-height: $kendo-bottom-nav-item-min-height;
         border-width: 0;
-        border-radius: $bottom-nav-item-border-radius;
+        border-radius: $kendo-bottom-nav-item-border-radius;
         box-sizing: border-box;
         font: inherit;
         display: inline-flex;
         flex: 1 1 auto;
         align-items: center;
         justify-content: center;
-        gap: $bottom-nav-item-gap;
+        gap: $kendo-bottom-nav-item-gap;
         text-decoration: none;
         cursor: pointer;
         color: inherit;
@@ -68,8 +68,8 @@
         }
 
         > .k-bottom-nav-link {
-            margin: (-$bottom-nav-item-padding-y) (-$bottom-nav-item-padding-x);
-            padding: $bottom-nav-item-padding-y $bottom-nav-item-padding-x;
+            margin: (-$kendo-bottom-nav-item-padding-y) (-$kendo-bottom-nav-item-padding-x);
+            padding: $kendo-bottom-nav-item-padding-y $kendo-bottom-nav-item-padding-x;
             width: 100%;
             color: inherit;
             display: flex;
@@ -85,7 +85,7 @@
     }
 
     .k-bottom-nav-item-icon {
-        font-size: $bottom-nav-item-icon-size;
+        font-size: $kendo-bottom-nav-item-icon-size;
     }
 
     .k-bottom-nav-item-text {

package/scss/bottom-navigation/_theme.scss

@@ -22,14 +22,14 @@
     // Flat
     .k-bottom-nav-flat {
         @include fill(
-            $bottom-nav-flat-text,
-            $bottom-nav-flat-bg,
-            $bottom-nav-flat-border
+            $kendo-bottom-nav-flat-text,
+            $kendo-bottom-nav-flat-bg,
+            $kendo-bottom-nav-flat-border
         );
 
         .k-bottom-nav-item.k-focus,
         .k-bottom-nav-item:focus {
-            @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
+            @include fill( $bg: rgba($kendo-bottom-nav-flat-text, .05) );
         }
 
         @each $name, $color in $kendo-theme-colors {

package/scss/bottom-navigation/_variables.scss

@@ -1,29 +1,29 @@
 // Bottom-navigation
-$bottom-nav-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
-$bottom-nav-padding-y: $bottom-nav-padding-x !default;
-$bottom-nav-gap: $bottom-nav-padding-x !default;
-$bottom-nav-border-width: 1px 0px 0px 0px !default;
+$kendo-bottom-nav-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
+$kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
+$kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
 
-$bottom-nav-font-family: $font-family !default;
-$bottom-nav-font-size: $font-size !default;
-$bottom-nav-line-height: normal !default;
-$bottom-nav-letter-spacing: .2px !default;
+$kendo-bottom-nav-font-family: $kendo-font-family !default;
+$kendo-bottom-nav-font-size: $kendo-font-size-md !default;
+$kendo-bottom-nav-line-height: normal !default;
+$kendo-bottom-nav-letter-spacing: .2px !default;
 
-$bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$bottom-nav-item-padding-y: 0 !default;
-$bottom-nav-item-min-width: 72px !default;
-$bottom-nav-item-max-width: null !default;
-$bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + #{$kendo-padding-md-x * 2} - #{$bottom-nav-padding-x * 2} ) !default;
-$bottom-nav-item-border-radius: $kendo-border-radius-md !default;
-$bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-bottom-nav-item-padding-y: 0 !default;
+$kendo-bottom-nav-item-min-width: 72px !default;
+$kendo-bottom-nav-item-max-width: null !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + #{$kendo-padding-md-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+$kendo-bottom-nav-item-border-radius: $kendo-border-radius-md !default;
+$kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
 
-$bottom-nav-item-icon-margin-y: k-map-get( $kendo-spacing, 2 ) !default;
-$bottom-nav-item-icon-margin-x: $bottom-nav-item-icon-margin-y !default;
-$bottom-nav-item-icon-size: k-map-get( $kendo-spacing, 6 ) !default;
-$bottom-nav-item-disabled-opacity: .5 !default;
+$kendo-bottom-nav-item-icon-margin-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-bottom-nav-item-icon-margin-x: $kendo-bottom-nav-item-icon-margin-y !default;
+$kendo-bottom-nav-item-icon-size: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-bottom-nav-item-disabled-opacity: .5 !default;
 
-$bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
+$kendo-bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
 
-$bottom-nav-flat-bg: $kendo-component-bg !default;
-$bottom-nav-flat-text: $kendo-component-text !default;
-$bottom-nav-flat-border: $kendo-component-border !default;
+$kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
+$kendo-bottom-nav-flat-text: $kendo-component-text !default;
+$kendo-bottom-nav-flat-border: $kendo-component-border !default;

package/scss/breadcrumb/_layout.scss

@@ -2,15 +2,15 @@
 
     // Breadcrumb
     .k-breadcrumb {
-        margin: $breadcrumb-margin-y $breadcrumb-margin-x;
-        padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-        border-width: $breadcrumb-border-width;
+        margin: $kendo-breadcrumb-margin-y $kendo-breadcrumb-margin-x;
+        padding: $kendo-breadcrumb-padding-y $kendo-breadcrumb-padding-x;
+        border-width: $kendo-breadcrumb-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $breadcrumb-font-family;
-        font-size: $breadcrumb-font-size;
-        line-height: $breadcrumb-line-height;
+        font-family: $kendo-breadcrumb-font-family;
+        font-size: $kendo-breadcrumb-font-size;
+        line-height: $kendo-breadcrumb-line-height;
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -36,7 +36,7 @@
     }
 
     .k-breadcrumb-container {
-
+        // TODO: use !k-flex-wrap in rendering
         &.k-flex-wrap {
             flex-wrap: wrap;
         }
@@ -66,9 +66,9 @@
     // Breadcrumb links
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
-        @include border-radius( $breadcrumb-link-border-radius );
-        padding: $breadcrumb-link-padding-y $breadcrumb-link-padding-x;
-        color: $breadcrumb-link-initial-text;
+        @include border-radius( $kendo-breadcrumb-link-border-radius );
+        padding: $kendo-breadcrumb-link-padding-y $kendo-breadcrumb-link-padding-x;
+        color: $kendo-breadcrumb-link-initial-text;
         text-decoration: none;
         white-space: nowrap;
         outline: none;
@@ -82,16 +82,16 @@
     }
 
     .k-breadcrumb-root-link {
-        margin-right: $breadcrumb-root-link-spacing;
+        margin-right: $kendo-breadcrumb-root-link-spacing;
     }
 
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon {
-        margin-right: $breadcrumb-link-icon-spacing;
+        margin-right: $kendo-breadcrumb-link-icon-spacing;
     }
 
     .k-breadcrumb-icon-link {
-        padding: $breadcrumb-icon-link-padding-y $breadcrumb-icon-link-padding-x;
+        padding: $kendo-breadcrumb-icon-link-padding-y $kendo-breadcrumb-icon-link-padding-x;
     }
 
 
@@ -99,7 +99,7 @@
     .k-breadcrumb-delimiter,
     .k-breadcrumb-delimiter-icon {
         color: inherit;
-        font-size: $breadcrumb-delimiter-icon-font-size;
+        font-size: $kendo-breadcrumb-delimiter-icon-font-size;
         opacity: $kendo-disabled-opacity;
     }
 
@@ -120,13 +120,13 @@
             .k-rtl & {
                 .k-breadcrumb-root-link {
                     margin-right: 0;
-                    margin-left: $breadcrumb-root-link-spacing;
+                    margin-left: $kendo-breadcrumb-root-link-spacing;
                 }
 
                 .k-breadcrumb-link > .k-image,
                 .k-breadcrumb-icontext-link .k-icon {
                     margin-right: 0;
-                    margin-left: $breadcrumb-link-icon-spacing;
+                    margin-left: $kendo-breadcrumb-link-icon-spacing;
                 }
             }
         }

package/scss/breadcrumb/_theme.scss

@@ -3,14 +3,14 @@
     // Breadcrumb
     .k-breadcrumb {
         @include fill(
-            $breadcrumb-text,
-            $breadcrumb-bg,
-            $breadcrumb-border
+            $kendo-breadcrumb-text,
+            $kendo-breadcrumb-bg,
+            $kendo-breadcrumb-border
         );
 
         &:focus,
         &.k-focus {
-            @include box-shadow( $breadcrumb-focus-shadow );
+            @include box-shadow( $kendo-breadcrumb-focus-shadow );
         }
     }
 
@@ -18,18 +18,18 @@
     // Breadcrumb link
     .k-breadcrumb-link {
         @include fill(
-            $breadcrumb-link-text,
-            $breadcrumb-link-bg,
-            $breadcrumb-link-border
+            $kendo-breadcrumb-link-text,
+            $kendo-breadcrumb-link-bg,
+            $kendo-breadcrumb-link-border
         );
 
         // Hovered state
         &:hover,
         &.k-hover {
             @include fill(
-                $breadcrumb-link-hover-text,
-                $breadcrumb-link-hover-bg,
-                $breadcrumb-link-hover-border
+                $kendo-breadcrumb-link-hover-text,
+                $kendo-breadcrumb-link-hover-bg,
+                $kendo-breadcrumb-link-hover-border
             );
         }
 
@@ -37,11 +37,11 @@
         &:focus,
         &.k-focus {
             @include fill(
-                $breadcrumb-link-focus-text,
-                $breadcrumb-link-focus-bg,
-                $breadcrumb-link-focus-border
+                $kendo-breadcrumb-link-focus-text,
+                $kendo-breadcrumb-link-focus-bg,
+                $kendo-breadcrumb-link-focus-border
             );
-            @include focus-indicator( $breadcrumb-link-focus-shadow, true );
+            @include focus-indicator( $kendo-breadcrumb-link-focus-shadow );
         }
     }
 
@@ -49,18 +49,18 @@
     // Breadcrumb root link
     .k-breadcrumb-root-link {
         @include fill(
-            $breadcrumb-root-link-text,
-            $breadcrumb-root-link-bg,
-            $breadcrumb-root-link-border
+            $kendo-breadcrumb-root-link-text,
+            $kendo-breadcrumb-root-link-bg,
+            $kendo-breadcrumb-root-link-border
         );
 
         // Hovered state
         &:hover,
         &.k-hover {
             @include fill(
-                $breadcrumb-root-link-hover-text,
-                $breadcrumb-root-link-hover-bg,
-                $breadcrumb-root-link-hover-border
+                $kendo-breadcrumb-root-link-hover-text,
+                $kendo-breadcrumb-root-link-hover-bg,
+                $kendo-breadcrumb-root-link-hover-border
             );
         }
 
@@ -68,12 +68,30 @@
         &:focus,
         &.k-focus {
             @include fill(
-                $breadcrumb-root-link-focus-text,
-                $breadcrumb-root-link-focus-bg,
-                $breadcrumb-root-link-focus-border
+                $kendo-breadcrumb-root-link-focus-text,
+                $kendo-breadcrumb-root-link-focus-bg,
+                $kendo-breadcrumb-root-link-focus-border
             );
-            @include focus-indicator( $breadcrumb-root-link-focus-shadow, true );
+            @include focus-indicator( $kendo-breadcrumb-root-link-focus-shadow );
         }
     }
 
+
+    // Breadcrumb current (last) item
+    .k-breadcrumb-current-item {
+        .k-breadcrumb-link {
+            @include fill(
+                $kendo-breadcrumb-current-item-text,
+                $kendo-breadcrumb-current-item-bg,
+                $kendo-breadcrumb-current-item-border
+            );
+        }
+    }
+
+
+    // Alias
+    .k-breadcrumb-last-item {
+        @extend .k-breadcrumb-current-item !optional;
+    }
+
 }

package/scss/breadcrumb/_variables.scss

@@ -1,60 +1,61 @@
-@import "../typography/_variables.scss";
-
-
 // Breadcrumb
 
-$breadcrumb-margin-x: null !default;
-$breadcrumb-margin-y: null !default;
-$breadcrumb-padding-x: null !default;
-$breadcrumb-padding-y: null !default;
-$breadcrumb-border-width: 0px !default;
+$kendo-breadcrumb-margin-x: null !default;
+$kendo-breadcrumb-margin-y: null !default;
+$kendo-breadcrumb-padding-x: null !default;
+$kendo-breadcrumb-padding-y: null !default;
+$kendo-breadcrumb-border-width: 0px !default;
+
+$kendo-breadcrumb-font-family: $kendo-font-family !default;
+$kendo-breadcrumb-font-size: $kendo-font-size-md !default;
+$kendo-breadcrumb-line-height: $kendo-line-height-md !default;
 
-$breadcrumb-font-family: $font-family !default;
-$breadcrumb-font-size: $font-size !default;
-$breadcrumb-line-height: $line-height !default;
+$kendo-breadcrumb-bg: $kendo-component-bg !default;
+$kendo-breadcrumb-text: $kendo-component-text !default;
+$kendo-breadcrumb-border: $kendo-component-border !default;
 
-$breadcrumb-bg: $kendo-component-bg !default;
-$breadcrumb-text: $kendo-component-text !default;
-$breadcrumb-border: $kendo-component-border !default;
+$kendo-breadcrumb-delimiter-icon-font-size: $kendo-icon-size * .75 !default;
 
-$breadcrumb-delimiter-icon-font-size: $kendo-icon-size * .75 !default;
+$kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-$breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-$breadcrumb-link-border-radius: $kendo-border-radius-md !default;
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
 
-$breadcrumb-icon-link-padding-x: $breadcrumb-link-padding-x !default;
-$breadcrumb-icon-link-padding-y: $breadcrumb-icon-link-padding-x !default;
+$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-$breadcrumb-root-link-spacing: $breadcrumb-link-padding-x !default;
-$breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
+$kendo-breadcrumb-link-initial-text: inherit !default;
 
-$breadcrumb-link-initial-text: inherit !default;
+$kendo-breadcrumb-link-bg: null !default;
+$kendo-breadcrumb-link-text: $kendo-link-text !default;
+$kendo-breadcrumb-link-border: null !default;
 
-$breadcrumb-link-bg: null !default;
-$breadcrumb-link-text: $link-text !default;
-$breadcrumb-link-border: null !default;
+$kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default;
+$kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
+$kendo-breadcrumb-link-hover-border: null !default;
 
-$breadcrumb-link-hover-bg: $base-bg !default;
-$breadcrumb-link-hover-text: $link-hover-text !default;
-$breadcrumb-link-hover-border: null !default;
+$kendo-breadcrumb-link-focus-bg: null !default;
+$kendo-breadcrumb-link-focus-text: $kendo-link-text !default;
+$kendo-breadcrumb-link-focus-border: null !default;
+$kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
 
-$breadcrumb-link-focus-bg: null !default;
-$breadcrumb-link-focus-text: $link-text !default;
-$breadcrumb-link-focus-border: null !default;
-$breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
+$kendo-breadcrumb-root-link-bg: null !default;
+$kendo-breadcrumb-root-link-text: null !default;
+$kendo-breadcrumb-root-link-border: null !default;
 
-$breadcrumb-root-link-bg: null !default;
-$breadcrumb-root-link-text: null !default;
-$breadcrumb-root-link-border: null !default;
+$kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default;
+$kendo-breadcrumb-root-link-hover-text: null !default;
+$kendo-breadcrumb-root-link-hover-border: null !default;
 
-$breadcrumb-root-link-hover-bg: $base-bg !default;
-$breadcrumb-root-link-hover-text: null !default;
-$breadcrumb-root-link-hover-border: null !default;
+$kendo-breadcrumb-root-link-focus-bg: null !default;
+$kendo-breadcrumb-root-link-focus-text: null !default;
+$kendo-breadcrumb-root-link-focus-border: null !default;
+$kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
 
-$breadcrumb-root-link-focus-bg: null !default;
-$breadcrumb-root-link-focus-text: null !default;
-$breadcrumb-root-link-focus-border: null !default;
-$breadcrumb-root-link-focus-shadow: $breadcrumb-link-focus-shadow !default;
+$kendo-breadcrumb-current-item-bg: null !default;
+$kendo-breadcrumb-current-item-text: null !default;
+$kendo-breadcrumb-current-item-border: null !default;
 
-$breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;

package/scss/button/_layout.scss

@@ -88,6 +88,45 @@
             > .k-button-icon {
                 min-width: calc( #{$_font-size} * #{$_line-height} );
                 min-height: calc( #{$_font-size} * #{$_line-height} );
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+
+                &.k-svg-icon > svg,
+                &.k-icon-md > svg {
+                    width: $kendo-icon-size-md;
+                    height: $kendo-icon-size-md;
+                }
+
+                &.k-icon-xs > svg {
+                    width: $kendo-icon-size-xs;
+                    height: $kendo-icon-size-xs;
+                }
+
+                &.k-icon-sm > svg {
+                    width: $kendo-icon-size-sm;
+                    height: $kendo-icon-size-sm;
+                }
+
+                &.k-icon-lg > svg {
+                    width: $kendo-icon-size-lg;
+                    height: $kendo-icon-size-lg;
+                }
+
+                &.k-icon-xl > svg {
+                    width: $kendo-icon-size-xl;
+                    height: $kendo-icon-size-xl;
+                }
+
+                &.k-icon-xxl > svg {
+                    width: $kendo-icon-size-xxl;
+                    height: $kendo-icon-size-xxl;
+                }
+
+                &.k-icon-xxxl > svg {
+                    width: $kendo-icon-size-xxxl;
+                    height: $kendo-icon-size-xxxl;
+                }
             }
         }
     }

package/scss/button/_theme.scss

@@ -142,7 +142,7 @@
 
 
     // Outline button
-    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
         .k-button-outline-#{$name} {
             @include box-shadow( none );
             border-color: currentColor;
@@ -210,7 +210,7 @@
 
 
     // Link button
-    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
         .k-button-link-#{$name} {
             color: $color;
 
@@ -249,7 +249,7 @@
 
 
     // Clear button
-    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
         .k-button-clear-#{$name} {
             color: $color;
 

package/scss/button/_variables.scss

@@ -16,61 +16,61 @@ $kendo-button-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 /// Font family of the button.
 /// @group button
-$kendo-button-font-family: $font-family !default;
+$kendo-button-font-family: $kendo-font-family !default;
 /// Font sizes of the button.
 /// @group button
-$kendo-button-font-size: $font-size-md !default;
-/// Line heights used along with $font-size.
+$kendo-button-font-size: $kendo-font-size-md !default;
+/// Line heights used along with $kendo-font-size.
 /// @group button
-$kendo-button-line-height: $line-height-md !default;
+$kendo-button-line-height: $kendo-line-height-md !default;
 
-$kendo-button-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-button-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-button-font-size-sm: $font-size-md !default;
-$kendo-button-line-height-sm: $line-height-md !default;
+$kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-button-sm-font-size: $kendo-font-size-md !default;
+$kendo-button-sm-line-height: $kendo-line-height-md !default;
 
-$kendo-button-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-button-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-button-font-size-md: $font-size-md !default;
-$kendo-button-line-height-md: $line-height-md !default;
+$kendo-button-md-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-md-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-button-md-font-size: $kendo-font-size-md !default;
+$kendo-button-md-line-height: $kendo-line-height-md !default;
 
-$kendo-button-padding-x-lg: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-button-padding-y-lg: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-button-font-size-lg: $font-size-lg !default;
-$kendo-button-line-height-lg: $line-height-lg !default;
+$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-button-lg-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-lg-font-size: $kendo-font-size-lg !default;
+$kendo-button-lg-line-height: $kendo-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;
+$kendo-button-sm-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-md-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-lg-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 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-sm-inner-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} ) !default;
+$kendo-button-md-inner-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} ) !default;
+$kendo-button-lg-inner-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} ) !default;
 
 $kendo-button-sizes: (
     sm: (
-        padding-x: $kendo-button-padding-x-sm,
-        padding-y: $kendo-button-padding-y-sm,
-        font-size: $kendo-button-font-size-sm,
-        line-height: $kendo-button-line-height-sm
+        padding-x: $kendo-button-sm-padding-x,
+        padding-y: $kendo-button-sm-padding-y,
+        font-size: $kendo-button-sm-font-size,
+        line-height: $kendo-button-sm-line-height
     ),
     md: (
-        padding-x: $kendo-button-padding-x-md,
-        padding-y: $kendo-button-padding-y-md,
-        font-size: $kendo-button-font-size-md,
-        line-height: $kendo-button-line-height-md
+        padding-x: $kendo-button-md-padding-x,
+        padding-y: $kendo-button-md-padding-y,
+        font-size: $kendo-button-md-font-size,
+        line-height: $kendo-button-md-line-height
     ),
     lg: (
-        padding-x: $kendo-button-padding-x-lg,
-        padding-y: $kendo-button-padding-y-lg,
-        font-size: $kendo-button-font-size-lg,
-        line-height: $kendo-button-line-height-lg
+        padding-x: $kendo-button-lg-padding-x,
+        padding-y: $kendo-button-lg-padding-y,
+        font-size: $kendo-button-lg-font-size,
+        line-height: $kendo-button-lg-line-height
     )
 ) !default;