@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.1

package/scss/fab/_layout.scss

@@ -57,14 +57,6 @@
         padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
     }
 
-    // Shapes
-    .k-fab-rectangle { }
-
-    .k-fab-square {
-        aspect-ratio: 1;
-    }
-
-
     // Items
     .k-fab-items {
         margin: 0;
@@ -88,7 +80,7 @@
 
     .k-fab-item {
         list-style-type: none;
-        margin-bottom: map-get( $spacing, 2 );
+        margin-bottom: k-map-get( $kendo-spacing, 2 );
         outline: none;
         white-space: nowrap;
         display: flex;
@@ -100,14 +92,14 @@
             flex-direction: row;
 
             .k-fab-item-text {
-                margin-right: map-get( $spacing, 2 );
+                margin-right: k-map-get( $kendo-spacing, 2 );
             }
         }
         &.k-text-left {
             flex-direction: row-reverse;
 
             .k-fab-item-text {
-                margin-left: map-get( $spacing, 2 );
+                margin-left: k-map-get( $kendo-spacing, 2 );
             }
         }
     }
@@ -159,4 +151,3 @@
     }
 
 }
-

package/scss/fab/_theme.scss

@@ -7,7 +7,7 @@
             outline: $kendo-fab-border-width solid $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: contrast-wcag( $color );
+            color: k-contrast-legacy( $color );
             background-color: $color;
         }
     }
@@ -16,8 +16,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: try-shade( $color, .5 );
-            background-color: try-shade( $color, .5 );
+            border-color: k-try-shade( $color, .5 );
+            background-color: k-try-shade( $color, .5 );
         }
     }
 
@@ -37,8 +37,8 @@
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
             @include box-shadow($kendo-fab-active-shadow);
-            border-color: try-shade( $color, 1.5);
-            background-color: try-shade( $color, 1.5);
+            border-color: k-try-shade( $color, 1.5);
+            background-color: k-try-shade( $color, 1.5);
         }
     }
 
@@ -47,8 +47,8 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: try-tint( $color, 5 );
-            color: try-tint( contrast-wcag( $color ), 5 );
+            background-color: k-try-tint( $color, 5 );
+            color: k-try-tint( k-contrast-legacy( $color ), 5 );
             opacity: 1;
         }
     }
@@ -77,8 +77,8 @@
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: try-shade( $kendo-fab-item-icon-border, .5 );
-        background-color: try-shade( $kendo-fab-item-icon-bg, .5 );
+        border-color: k-try-shade( $kendo-fab-item-icon-border, .5 );
+        background-color: k-try-shade( $kendo-fab-item-icon-bg, .5 );
     }
 
     // Focus state
@@ -95,8 +95,8 @@
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: try-shade( $kendo-fab-item-icon-border, 1);
-        background-color: try-shade( $kendo-fab-item-icon-bg, 1);
+        border-color: k-try-shade( $kendo-fab-item-icon-border, 1);
+        background-color: k-try-shade( $kendo-fab-item-icon-bg, 1);
     }
 
     // Disabled state
@@ -107,8 +107,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: try-tint( $kendo-fab-item-bg, 5 );
-            color: try-tint( $kendo-fab-item-text, 5 );
+            background-color: k-try-tint( $kendo-fab-item-bg, 5 );
+            color: k-try-tint( $kendo-fab-item-text, 5 );
         }
     }
 

package/scss/fab/_variables.scss

@@ -19,15 +19,15 @@ $kendo-fab-line-height: $line-height !default;
 
 /// Horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: map-get( $spacing, 4 ) !default;
-$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-fab-padding-x-sm: k-math-div( $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-sm: k-math-div( $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;
 
@@ -39,18 +39,18 @@ $kendo-fab-icon-width: 20px !default;
 $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;
+$kendo-fab-icon-spacing: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 /// 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;
+$kendo-fab-items-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 
 /// FAB item text horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-fab-item-text-padding-x: k-map-get( $kendo-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;
@@ -69,7 +69,7 @@ $kendo-fab-item-text-line-height: 1.2 !default;
 
 /// FAB item icon horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-x: k-map-get( $kendo-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;
@@ -95,20 +95,20 @@ $kendo-fab-theme-colors: $kendo-theme-colors !default;
 $kendo-fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
 /// The disabled shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+$kendo-fab-disabled-shadow: 0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-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;
+$kendo-fab-item-text: $kendo-component-text !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-bg: $component-bg !default;
+$kendo-fab-item-bg: $kendo-component-bg !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-border: $component-border !default;
+$kendo-fab-item-border: $kendo-component-border !default;
 
 /// The base text color of the FAB item icon.
 /// @group floating-action-button

package/scss/filemanager/_index.scss

@@ -17,6 +17,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/filemanager/_layout.scss

@@ -105,7 +105,7 @@
 
         // File name
         .k-file-name {
-            margin-top: ($filemanager-spacer / 2);
+            margin-top: k-math-div( $filemanager-spacer, 2 );
             display: block;
             text-align: center;
             overflow: hidden;

package/scss/filemanager/_variables.scss

@@ -1,12 +1,12 @@
 // File manager
-$filemanager-spacer: map-get( $spacing, 4 ) !default;
+$filemanager-spacer: k-map-get( $kendo-spacing, 4 ) !default;
 $filemanager-border-width: 1px !default;
 $filemanager-font-family: $font-family !default;
 $filemanager-font-size: $font-size !default;
 $filemanager-line-height: $line-height !default;
-$filemanager-bg: $component-bg !default;
-$filemanager-text: $component-text !default;
-$filemanager-border: $component-border !default;
+$filemanager-bg: $kendo-component-bg !default;
+$filemanager-text: $kendo-component-text !default;
+$filemanager-border: $kendo-component-border !default;
 
 $filemanager-toolbar-border-width: $filemanager-border-width !default;
 $filemanager-toolbar-bg: null !default;
@@ -22,10 +22,10 @@ $filemanager-navigation-bg: null !default;
 $filemanager-navigation-text: null !default;
 $filemanager-navigation-border: null !default;
 
-$filemanager-breadcrumb-padding-x: map-get( $spacing, 2 ) !default;
-$filemanager-breadcrumb-padding-y: map-get( $spacing, 2 ) !default;
+$filemanager-breadcrumb-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$filemanager-breadcrumb-padding-y: k-map-get( $kendo-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;
 
@@ -33,8 +33,8 @@ $filemanager-listview-bg: null !default;
 $filemanager-listview-text: null !default;
 $filemanager-listview-border: null !default;
 
-$filemanager-listview-item-padding-x: map-get( $spacing, 4 ) !default;
-$filemanager-listview-item-padding-y: map-get( $spacing, 4 ) !default;
+$filemanager-listview-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$filemanager-listview-item-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 $filemanager-listview-item-width: 120px !default;
 $filemanager-listview-item-height: 120px !default;
 $filemanager-listview-item-bg: null !default;
@@ -43,7 +43,7 @@ $filemanager-listview-item-border: null !default;
 
 $filemanager-listview-item-icon-size: ($icon-size * 3) !default;
 $filemanager-listview-item-icon-bg: null !default;
-$filemanager-listview-item-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-listview-item-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-listview-item-icon-border: null !default;
 $filemanager-listview-item-icon-selected-bg: null !default;
 $filemanager-listview-item-icon-selected-text: inherit !default;
@@ -58,12 +58,12 @@ $filemanager-preview-padding-y: $filemanager-spacer !default;
 $filemanager-preview-width: 20% !default;
 $filemanager-preview-border-width: $filemanager-border-width !default;
 $filemanager-preview-spacing: $filemanager-spacer !default;
-$filemanager-preview-column-gap: map-get( $spacing, 1 ) !default;
+$filemanager-preview-column-gap: k-map-get( $kendo-spacing, 1 ) !default;
 $filemanager-preview-bg: null !default;
 $filemanager-preview-text: null !default;
 $filemanager-preview-border: null !default;
 
 $filemanager-preview-icon-size: ($icon-size * 6) !default;
 $filemanager-preview-icon-bg: null !default;
-$filemanager-preview-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-preview-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-preview-icon-border: null !default;

package/scss/filter/_index.scss

@@ -13,6 +13,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/filter/_theme.scss

@@ -1,7 +1,7 @@
 @include exports("filter/theme") {
 
     .k-filter {
-        color: $component-text;
+        color: $kendo-component-text;
 
         .k-filter-preview-field {
             color: $filter-preview-field-text;
@@ -16,7 +16,7 @@
         .k-filter-toolbar::before,
         .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
         .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
-            background-color: $component-border;
+            background-color: $kendo-component-border;
         }
 
         // Focus

package/scss/filter/_variables.scss

@@ -1,13 +1,13 @@
 // Filter expression builder
-$filter-padding-x: $padding-x !default;
-$filter-padding-y: $padding-y !default;
+$filter-padding-x: $kendo-padding-md-x !default;
+$filter-padding-y: $kendo-padding-md-y !default;
 
 $filter-bottom-margin: 30px !default;
 $filter-line-size: 1px !default;
 
 $filter-operator-dropdown-width: 15em !default;
 
-$filter-preview-field-text: $primary !default;
-$filter-preview-operator-text: $subtle-text !default;
+$filter-preview-field-text: $kendo-color-primary !default;
+$filter-preview-operator-text: $kendo-subtle-text !default;
 
 $filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;

package/scss/floating-label/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/forms/_index.scss

@@ -12,6 +12,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/forms/_layout.scss

@@ -3,21 +3,21 @@
     // Common
     .k-form,
     .k-form-inline {
-        font-size: $form-font-size;
-        line-height: $form-line-height;
+        font-size: $kendo-form-font-size;
+        line-height: $kendo-form-line-height;
     }
 
 
     // Fieldset
     .k-fieldset {
-        margin: $fieldset-margin;
+        margin: $kendo-fieldset-margin;
         border-width: 1px 0 0;
         border-style: solid;
         padding: 25px 0 0;
 
         > legend {
             margin-left: 0;
-            padding: 0 $padding-x 0 0;
+            padding: 0 $kendo-padding-md-x 0 0;
             text-transform: uppercase;
         }
     }
@@ -29,9 +29,9 @@
     }
 
     .k-label-optional {
-        margin-left: $label-optional-margin-x;
-        font-size: $label-optional-font-size;
-        font-style: $label-optional-font-style;
+        margin-left: $kendo-label-optional-margin-x;
+        font-size: $kendo-label-optional-font-size;
+        font-style: $kendo-label-optional-font-style;
         align-self: center;
     }
 
@@ -43,7 +43,7 @@
     }
 
     .k-input-label {
-        margin-right: $horizontal-form-label-margin-x;
+        margin-right: $kendo-horizontal-form-label-margin-x;
         z-index: 1;
 
         &:dir(rtl),
@@ -52,7 +52,7 @@
         [dir="rtl"] &,
         &[dir="rtl"] {
             margin-right: 0;
-            margin-left: $horizontal-form-label-margin-x;
+            margin-left: $kendo-horizontal-form-label-margin-x;
         }
     }
 
@@ -64,7 +64,7 @@
         .k-label,
         kendo-label,
         .k-form-label {
-            margin-bottom: $form-label-margin-bottom;
+            margin-bottom: $kendo-form-label-margin-bottom;
             display: flex;
             flex-flow: row nowrap;
         }
@@ -74,8 +74,8 @@
         }
 
         .k-form-fieldset {
-            margin: $form-fieldset-margin;
-            padding: $form-fieldset-padding;
+            margin: $kendo-form-fieldset-margin;
+            padding: $kendo-form-fieldset-padding;
             border: 0;
 
             > * {
@@ -87,13 +87,13 @@
         }
 
         .k-form-legend {
-            margin: $form-legend-margin;
-            padding: $form-legend-padding;
-            border-width: $form-legend-border-width;
-            border-style: $form-legend-border-style;
-            width: $form-legend-width;
-            font-size: $form-legend-font-size;
-            text-transform: $form-legend-text-transform;
+            margin: $kendo-form-legend-margin;
+            padding: $kendo-form-legend-padding;
+            border-width: $kendo-form-legend-border-width;
+            border-style: $kendo-form-legend-border-style;
+            width: $kendo-form-legend-width;
+            font-size: $kendo-form-legend-font-size;
+            text-transform: $kendo-form-legend-text-transform;
         }
 
 
@@ -102,10 +102,6 @@
             padding: 0;
         }
 
-        .k-form-field {
-            margin-top: $form-field-margin-top;
-        }
-
         > * {
             &:not(.k-hidden):first-child,
             &.k-hidden + :not(.k-hidden) {
@@ -123,20 +119,20 @@
         .k-form-field-disabled {
             .k-label,
             .k-form-label {
-                @include disabled( $disabled-styling );
+                @include disabled( $kendo-disabled-styling );
             }
         }
 
         .k-alert-error {
             font-size: $font-size-sm;
-            margin-top: $padding-y * 2;
+            margin-top: $kendo-padding-md-y * 2;
         }
 
         .k-field-info {
             display: inline-block;
             font-size: $font-size-xs;
             line-height: 1;
-            margin: 0 $padding-x;
+            margin: 0 $kendo-padding-md-x;
         }
 
 
@@ -152,7 +148,6 @@
     // Form Buttons Container
     .k-form-buttons {
         @extend .k-actions;
-        margin-top: 2 * $form-field-margin-top;
         padding: 0;
         overflow: visible;
     }
@@ -160,10 +155,10 @@
     // Form Hint/Error Messages
     .k-form-hint,
     .k-form-error {
-        margin-top: $form-hint-margin-top;
+        margin-top: $kendo-form-hint-margin-top;
         display: flex;
-        font-size: $form-hint-font-size;
-        font-style: $form-hint-font-style;
+        font-size: $kendo-form-hint-font-size;
+        font-style: $kendo-form-hint-font-style;
     }
 
     .k-text-start,
@@ -178,7 +173,7 @@
 
     // Form Separator
     .k-form-separator {
-        margin: $form-separator-margin;
+        margin: $kendo-form-separator-margin;
         border-width: 1px 0 0;
         border-style: solid;
         display: block;
@@ -193,12 +188,12 @@
             > .k-label,
             > kendo-label,
             > .k-form-label {
-                margin-right: $horizontal-form-label-margin-x;
-                padding-top: $horizontal-form-label-padding-top;
-                width: $horizontal-form-label-width;
+                margin-right: $kendo-horizontal-form-label-margin-x;
+                padding-top: $kendo-horizontal-form-label-padding-top;
+                width: $kendo-horizontal-form-label-width;
                 text-align: end;
                 flex-direction: column;
-                align-items: $horizontal-form-label-align;
+                align-items: $kendo-horizontal-form-label-align;
                 justify-content: flex-start;
             }
             .k-label-optional {
@@ -208,7 +203,7 @@
         }
 
         .k-form-field-wrap {
-            max-width: $horizontal-form-field-wrap-max-width;
+            max-width: $kendo-horizontal-form-field-wrap-max-width;
             flex: 1 1 auto;
         }
     }
@@ -219,7 +214,7 @@
         .k-rtl & {
             .k-label-optional {
                 margin-left: 0;
-                margin-right: $label-optional-margin-x;
+                margin-right: $kendo-label-optional-margin-x;
             }
         }
     }
@@ -233,21 +228,33 @@
                 > kendo-label,
                 > .k-form-label {
                     margin-right: 0;
-                    margin-left: $horizontal-form-label-margin-x;
+                    margin-left: $kendo-horizontal-form-label-margin-x;
                 }
             }
         }
     }
 
+    // Sizes
+    @each $size, $size-props in $kendo-form-sizes {
+        $_form-rows-spacing: k-map-get($size-props, form-rows-spacing);
+
+        .k-form-#{$size} {
+            .k-form-field,
+            .k-form-buttons {
+                margin-top: $_form-rows-spacing;
+            }
+        }
+    }
+
 
     // Scheduler
     .k-form-inline {
-        padding: $form-spacer;
+        padding: $kendo-form-spacer;
 
         fieldset {
             border-width: 1px 0 0;
             border-style: solid;
-            margin: ($form-spacer * 2) 0;
+            margin: ($kendo-form-spacer * 2) 0;
             padding: 0;
 
             &:first-child:first-of-type {
@@ -264,9 +271,9 @@
             text-align: left;
             font-weight: 600;
             line-height: 1;
-            margin-bottom: $padding-y-lg * 2;
+            margin-bottom: $kendo-padding-lg-y * 2;
             text-transform: uppercase;
-            padding: 0 $padding-x 0 0;
+            padding: 0 $kendo-padding-md-x 0 0;
             width: auto;
         }
 
@@ -274,14 +281,14 @@
             display: flex;
             align-items: flex-start;
             text-align: left;
-            margin-bottom: $padding-y-lg * 2;
+            margin-bottom: $kendo-padding-lg-y * 2;
 
             > span:not(.k-widget) {
-                width: $inline-form-element-width;
+                width: $kendo-inline-form-element-width;
                 text-align: right;
                 line-height: $line-height;
-                padding: calc( #{$padding-y} + #{$kendo-input-border-width} ) 0;
-                padding-right: $padding-x-lg;
+                padding: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} ) 0;
+                padding-right: $kendo-padding-lg-x;
                 align-self: center;
             }
 
@@ -295,7 +302,7 @@
 
             .k-alert-error {
                 font-size: $font-size-sm;
-                margin-top: $padding-y * 2;
+                margin-top: $kendo-padding-md-y * 2;
             }
 
             .k-field-info {
@@ -327,7 +334,7 @@
     // Action buttons
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
-        margin: $spacer (-$window-inner-padding-x) (-$window-inner-padding-y);
+        margin: $spacer (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
     }
 
 
@@ -335,7 +342,7 @@
         margin: 0 0 $spacer-y 0;
         padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         width: 30%;
-        line-height: $form-line-height;
+        line-height: $kendo-form-line-height;
         text-align: right;
         float: left;
         clear: both;
@@ -370,7 +377,7 @@
         }
 
         > .k-reset > li + li {
-            margin-top: ($spacer / 2);
+            margin-top: k-math-div( $spacer, 2 );
         }
 
         .k-reset .k-widget {