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

package/scss/floating-label/_layout.scss

@@ -3,7 +3,7 @@
 
     // Floating label
     .k-floating-label-container {
-        padding-top: $floating-label-height;
+        padding-top: $kendo-floating-label-height;
         box-sizing: border-box;
         display: inline-flex;
         vertical-align: middle;
@@ -19,17 +19,17 @@
 
         > .k-label {
             max-width: 90%;
-            font-size: $floating-label-font-size;
-            line-height: $floating-label-line-height;
+            font-size: $kendo-floating-label-font-size;
+            line-height: $kendo-floating-label-line-height;
             white-space: nowrap;
             text-overflow: ellipsis;
             position: absolute;
-            top: $floating-label-offset-y;
-            left: $floating-label-offset-x;
+            top: $kendo-floating-label-offset-y;
+            left: $kendo-floating-label-offset-x;
             overflow: hidden;
             cursor: text;
             transform-origin: left center;
-            transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, left $floating-label-transition;
+            transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition;
         }
 
         > .k-widget {
@@ -39,23 +39,23 @@
 
         &.k-empty {
             > .k-label {
-                top: $floating-label-offset-y;
-                left: $floating-label-offset-x;
-                transform: scale( $floating-label-scale );
+                top: $kendo-floating-label-offset-y;
+                left: $kendo-floating-label-offset-x;
+                transform: scale( $kendo-floating-label-scale );
                 pointer-events: none;
             }
         }
 
         > .k-label,
         &.k-focus > .k-label {
-            top: $floating-label-focus-offset-y;
-            left: $floating-label-focus-offset-x;
-            transform: scale( $floating-label-focus-scale );
+            top: $kendo-floating-label-focus-offset-y;
+            left: $kendo-floating-label-focus-offset-x;
+            transform: scale( $kendo-floating-label-focus-scale );
         }
         &:focus-within > .k-label {
-            top: $floating-label-focus-offset-y;
-            left: $floating-label-focus-offset-x;
-            transform: scale( $floating-label-focus-scale );
+            top: $kendo-floating-label-focus-offset-y;
+            left: $kendo-floating-label-focus-offset-x;
+            transform: scale( $kendo-floating-label-focus-scale );
         }
 
         &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
@@ -68,24 +68,24 @@
 
             > .k-label {
                 transform-origin: right center;
-                transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
+                transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
             }
 
             &.k-empty {
                 > .k-label {
                     left: auto;
-                    right: $floating-label-offset-x;
+                    right: $kendo-floating-label-offset-x;
                 }
             }
 
             > .k-label,
             &.k-focus > .k-label {
                 left: auto;
-                right: $floating-label-focus-offset-x;
+                right: $kendo-floating-label-focus-offset-x;
             }
             &:focus-within > .k-label {
                 left: auto;
-                right: $floating-label-focus-offset-x;
+                right: $kendo-floating-label-focus-offset-x;
             }
         }
     }

package/scss/floating-label/_theme.scss

@@ -5,15 +5,15 @@
 
         > .k-label {
             @include fill(
-                $color: $floating-label-text,
-                $bg: $floating-label-bg
+                $color: $kendo-floating-label-text,
+                $bg: $kendo-floating-label-bg
             );
         }
 
         &.k-focus > .k-label {
             @include fill(
-                $color: $floating-label-focus-text,
-                $bg: $floating-label-focus-bg
+                $color: $kendo-floating-label-focus-text,
+                $bg: $kendo-floating-label-focus-bg
             );
         }
 

package/scss/floating-label/_variables.scss

@@ -1,19 +1,19 @@
 // Floating label
-$floating-label-scale: 1 !default;
-$floating-label-font-size: $kendo-input-font-size !default;
-$floating-label-line-height: $kendo-input-line-height !default;
-$floating-label-height: calc( #{$floating-label-line-height} * #{$floating-label-font-size} ) !default;
-$floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
-$floating-label-offset-y: calc( #{$floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
+$kendo-floating-label-scale: 1 !default;
+$kendo-floating-label-font-size: $kendo-input-font-size !default;
+$kendo-floating-label-line-height: $kendo-input-line-height !default;
+$kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;
+$kendo-floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
+$kendo-floating-label-offset-y: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
 
-$floating-label-focus-scale: 1 !default;
-$floating-label-focus-offset-x: 0 !default;
-$floating-label-focus-offset-y: 0 !default;
+$kendo-floating-label-focus-scale: 1 !default;
+$kendo-floating-label-focus-offset-x: 0 !default;
+$kendo-floating-label-focus-offset-y: 0 !default;
 
-$floating-label-transition: .2s ease-out !default;
+$kendo-floating-label-transition: .2s ease-out !default;
 
-$floating-label-bg: null !default;
-$floating-label-text: null !default;
+$kendo-floating-label-bg: null !default;
+$kendo-floating-label-text: null !default;
 
-$floating-label-focus-bg: null !default;
-$floating-label-focus-text: null !default;
+$kendo-floating-label-focus-bg: null !default;
+$kendo-floating-label-focus-text: null !default;

package/scss/forms/_index.scss

@@ -3,12 +3,8 @@
 
 // Dependencies // TODO: extract variables
 @import "../common/_index.scss";
-@import "../tooltip/_variables.scss";
-@import "../button/_variables.scss";
-@import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
 @import "../action-buttons/_index.scss";
-@import "../window/_variables.scss";
 
 
 // Component

package/scss/forms/_layout.scss

@@ -124,13 +124,13 @@
         }
 
         .k-alert-error {
-            font-size: $font-size-sm;
+            font-size: $kendo-font-size-sm;
             margin-top: $kendo-padding-md-y * 2;
         }
 
         .k-field-info {
             display: inline-block;
-            font-size: $font-size-xs;
+            font-size: $kendo-font-size-xs;
             line-height: 1;
             margin: 0 $kendo-padding-md-x;
         }
@@ -267,7 +267,7 @@
         }
 
         legend {
-            font-size: $font-size-sm;
+            font-size: $kendo-font-size-sm;
             text-align: left;
             font-weight: 600;
             line-height: 1;
@@ -286,7 +286,8 @@
             > span:not(.k-widget) {
                 width: $kendo-inline-form-element-width;
                 text-align: right;
-                line-height: $line-height;
+                line-height: $kendo-line-height-md;
+                // TODO: do we need the input variable?
                 padding: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} ) 0;
                 padding-right: $kendo-padding-lg-x;
                 align-self: center;
@@ -301,13 +302,13 @@
             }
 
             .k-alert-error {
-                font-size: $font-size-sm;
+                font-size: $kendo-font-size-sm;
                 margin-top: $kendo-padding-md-y * 2;
             }
 
             .k-field-info {
                 display: block;
-                font-size: $font-size-xs;
+                font-size: $kendo-font-size-xs;
                 line-height: 1;
                 margin: 0;
             }
@@ -334,12 +335,14 @@
     // Action buttons
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
-        margin: $spacer (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
+        // TODO: refactor
+        margin: k-map-get( $kendo-spacing, 4 ) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
     }
 
 
     .k-edit-label {
-        margin: 0 0 $spacer-y 0;
+        margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
+        // TODO: do we need the input variable?
         padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         width: 30%;
         line-height: $kendo-form-line-height;
@@ -348,13 +351,14 @@
         clear: both;
     }
     .k-edit-field {
-        margin: 0 0 $spacer-y 0;
+        margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
         width: 65%;
         float: right;
         clear: right;
         position: relative;
 
         &.k-no-editor {
+            // TODO: do we need the input variable?
             padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         }
     }
@@ -373,11 +377,11 @@
 
         .k-radio-label,
         .k-checkbox-label {
-            margin-right: ($spacer);
+            margin-right: k-map-get( $kendo-spacing, 4 );
         }
 
         > .k-reset > li + li {
-            margin-top: k-math-div( $spacer, 2 );
+            margin-top: k-map-get( $kendo-spacing, 2 );
         }
 
         .k-reset .k-widget {

package/scss/forms/_variables.scss

@@ -1,11 +1,18 @@
+@import "../input/_variables.scss";
+@import "../tooltip/_variables.scss";
+@import "../typography/_variables.scss";
+@import "../window/_variables.scss";
+
+
 // Forms
+
 $kendo-form-spacer: $kendo-padding-md-x * 2 !default;
 
-$kendo-form-font-size: $font-size !default;
-$kendo-form-line-height: $line-height !default;
+$kendo-form-font-size: $kendo-font-size-md !default;
+$kendo-form-line-height: $kendo-line-height-md !default;
 $kendo-form-line-height-em: calc( #{$kendo-form-line-height} * 1em ) !default;
-$kendo-form-line-height-sm: $line-height-sm !default;
-$kendo-form-line-height-lg: $line-height-lg !default;
+$kendo-form-sm-line-height: $kendo-line-height-sm !default;
+$kendo-form-lg-line-height: $kendo-line-height-lg !default;
 
 $kendo-form-fieldset-margin: 2em 0 0 !default;
 $kendo-form-fieldset-padding: 0px !default;
@@ -27,11 +34,11 @@ $kendo-form-hint-font-size: 12px !default;
 $kendo-form-hint-font-style: italic !default;
 $kendo-form-hint-margin-top: 4px !default;
 
-$kendo-form-rows-spacing-sm: k-map-get( $kendo-spacing, 2.5 ) !default;
-$kendo-form-rows-spacing-md: k-map-get( $kendo-spacing, 3.5 ) !default;
-$kendo-form-rows-spacing-lg: k-map-get( $kendo-spacing, 4.5 ) !default;
+$kendo-form-sm-rows-spacing: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-form-md-rows-spacing: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-form-lg-rows-spacing: k-map-get( $kendo-spacing, 4.5 ) !default;
 
-$kendo-form-separator-margin: $kendo-form-rows-spacing-md 0 0 !default;
+$kendo-form-separator-margin: $kendo-form-md-rows-spacing 0 0 !default;
 $kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
 $kendo-horizontal-form-label-padding-top: 5px !default;
@@ -54,7 +61,7 @@ $kendo-label-optional-font-style: italic !default;
 
 // Fieldset
 $kendo-fieldset-margin: 30px !default;
-$kendo-fieldset-font-size: $h4-font-size !default;
+$kendo-fieldset-font-size: $kendo-h4-font-size !default;
 
 $kendo-fieldset-bg: null !default;
 $kendo-fieldset-text: null !default;
@@ -67,12 +74,12 @@ $kendo-fieldset-legend-border: null !default;
 // Sizes
 $kendo-form-sizes: (
     sm: (
-        form-rows-spacing: $kendo-form-rows-spacing-sm
+        form-rows-spacing: $kendo-form-sm-rows-spacing
     ),
     md: (
-        form-rows-spacing: $kendo-form-rows-spacing-md
+        form-rows-spacing: $kendo-form-md-rows-spacing
     ),
     lg: (
-        form-rows-spacing: $kendo-form-rows-spacing-lg
+        form-rows-spacing: $kendo-form-lg-rows-spacing
     )
 ) !default;

package/scss/gantt/_index.scss

@@ -11,7 +11,7 @@
 @import "../window/_index.scss";
 @import "../splitter/_index.scss";
 @import "../treelist/_index.scss";
-@import "../table/_variables.scss";
+
 
 // Component
 @import "./_variables.scss";

package/scss/gantt/_layout.scss

@@ -1,15 +1,15 @@
 @include exports("gantt/layout") {
 
-    $row-height: #{$line-height-em} + #{2 * $kendo-table-cell-padding-y-md} + #{$kendo-grid-cell-horizontal-border-width};
+    $row-height: #{$kendo-line-height-em} + #{2 * $kendo-table-md-cell-padding-y} + #{$kendo-grid-cell-horizontal-border-width};
 
     .k-gantt {
-        border-width: $gantt-border-width;
+        border-width: $kendo-gantt-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $gantt-font-family;
-        font-size: $gantt-font-size;
-        line-height: $gantt-line-height;
+        font-family: $kendo-gantt-font-family;
+        font-size: $kendo-gantt-font-size;
+        line-height: $kendo-gantt-line-height;
         display: flex;
         flex-flow: column nowrap;
         position: relative;
@@ -17,6 +17,10 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
+        .k-table-td {
+            white-space: nowrap;
+        }
+
         // other
         td {
             overflow: hidden;
@@ -24,7 +28,7 @@
             vertical-align: top;
         }
         .k-grid-header tr {
-            height: calc( #{$line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
+            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
         }
         .k-grid-header .k-header {
             position: static;
@@ -33,11 +37,11 @@
             position: relative;
         }
         .k-grid-content tr {
-            height: calc( #{$line-height-em} + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-horizontal-border-width} );
+            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-horizontal-border-width} );
         }
 
         &.k-gantt-planned .k-grid-content tr {
-            height: calc( #{$line-height-em} * 1.7 + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-horizontal-border-width} );
+            height: calc( #{$kendo-line-height-em} * 1.7 + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-horizontal-border-width} );
         }
 
         // Layout
@@ -104,7 +108,7 @@
                 }
             }
             .k-task-content {
-                padding: $gantt-task-padding-y $gantt-task-padding-x;
+                padding: $kendo-gantt-task-padding-y $kendo-gantt-task-padding-x;
                 display: block;
                 line-height: normal;
                 flex: 1 1 auto;
@@ -171,7 +175,7 @@
             z-index: 2;
 
             polyline {
-                stroke-width: $gantt-line-size;
+                stroke-width: $kendo-gantt-line-size;
             }
         }
     }
@@ -262,7 +266,7 @@
             padding: 0 !important; // sass-lint:disable-line no-important
         }
         .k-grid-header tr {
-            height: calc( #{$line-height-em} * 2 + #{$kendo-grid-header-padding-y * 4} + 2px );
+            height: calc( #{$kendo-line-height-em} * 2 + #{$kendo-grid-header-padding-y * 4} + 2px );
             vertical-align: bottom;
         }
         .k-grid-content {
@@ -273,7 +277,7 @@
             vertical-align: middle;
         }
         .k-gantt-treelist-nested-columns .k-grid-header tr {
-            height: calc( #{$line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
+            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
         }
 
         &.k-gantt-treelist-scrollable {
@@ -358,11 +362,11 @@
     }
 
     .k-gantt-line-h {
-        height: $gantt-line-size;
+        height: $kendo-gantt-line-size;
     }
 
     .k-gantt-line-v {
-        width: $gantt-line-size;
+        width: $kendo-gantt-line-size;
     }
 
     .k-gantt-dependency-hint {
@@ -401,8 +405,8 @@
         flex: 1 1 auto;
     }
     .k-task-dot {
-        width: calc( #{$gantt-dot-size} + #{$gantt-dot-spacing * 2} );
-        height: calc( #{$gantt-dot-size} + #{$gantt-dot-spacing * 2} );
+        width: calc( #{$kendo-gantt-dot-size} + #{$kendo-gantt-dot-spacing * 2} );
+        height: calc( #{$kendo-gantt-dot-size} + #{$kendo-gantt-dot-spacing * 2} );
         line-height: 1;
         cursor: pointer;
         display: none;
@@ -416,8 +420,8 @@
     }
     .k-task-dot::before {
         content: "";
-        width: $gantt-dot-size;
-        height: $gantt-dot-size;
+        width: $kendo-gantt-dot-size;
+        height: $kendo-gantt-dot-size;
         border-width: 0;
         border-style: solid;
         border-radius: 100%;
@@ -511,7 +515,7 @@
     .k-single-wrap {}
     .k-task-single {
         @include border-radius( $kendo-border-radius-md );
-        border-width: $gantt-task-border-width;
+        border-width: $kendo-gantt-task-border-width;
         border-style: solid;
         box-sizing: border-box;
         cursor: default;
@@ -560,7 +564,7 @@
         white-space: nowrap;
     }
     .k-task-template {
-        padding: $gantt-task-padding-y $gantt-task-padding-x;
+        padding: $kendo-gantt-task-padding-y $kendo-gantt-task-padding-x;
         line-height: normal;
         flex: 1;
         overflow: hidden;
@@ -601,12 +605,12 @@
         white-space: nowrap;
 
         strong {
-            font-size: $font-size-lg;
+            font-size: $kendo-font-size-lg;
             font-weight: normal;
             display: block;
         }
         .k-task-pct {
-            font-size: $icon-size-lg;
+            font-size: $kendo-icon-size-xxl;
         }
         ul {
             line-height: normal;
@@ -618,7 +622,7 @@
         .k-gantt-dependencies,
         .k-task-dot,
         .k-resources-wrap {
-            margin-top: $gantt-planned-dependency-margin-y;
+            margin-top: $kendo-gantt-planned-dependency-margin-y;
         }
 
         .k-task-wrap {
@@ -631,48 +635,48 @@
         }
 
         .k-task-wrap.k-drag-hint {
-            top: $gantt-planned-single-drag-hint-top;
+            top: $kendo-gantt-planned-single-drag-hint-top;
         }
 
         .k-summary-wrap.k-drag-hint {
-            top: $gantt-planned-summary-drag-hint-top;
+            top: $kendo-gantt-planned-summary-drag-hint-top;
         }
 
         .k-milestone-wrap.k-drag-hint {
-            top: $gantt-planned-milestone-drag-hint-top;
+            top: $kendo-gantt-planned-milestone-drag-hint-top;
         }
     }
 
     // Planned element
     .k-task-planned {
-        margin: 0 0 $gantt-planned-margin-y;
-        line-height: $gantt-planned-line-height;
+        margin: 0 0 $kendo-gantt-planned-margin-y;
+        line-height: $kendo-gantt-planned-line-height;
         display: flex;
         align-items: center;
 
         .k-task-moment {
-            border-width: $gantt-planned-border-width;
-            border-radius: $gantt-planned-moment-border-radius;
+            border-width: $kendo-gantt-planned-border-width;
+            border-radius: $kendo-gantt-planned-moment-border-radius;
             border-style: solid;
-            height: $gantt-planned-moment-height;
-            width: $gantt-planned-moment-width;
+            height: $kendo-gantt-planned-moment-height;
+            width: $kendo-gantt-planned-moment-width;
         }
 
         .k-task-duration {
-            height: $gantt-planned-duration-height;
+            height: $kendo-gantt-planned-duration-height;
         }
 
         .k-task-moment.k-moment-left {
-            margin-left: $gantt-planned-moment-left-margin-x;
+            margin-left: $kendo-gantt-planned-moment-left-margin-x;
         }
 
         &:hover .k-task-duration {
-            height: $gantt-planned-duration-hover-height;
+            height: $kendo-gantt-planned-duration-hover-height;
         }
     }
 
     .k-milestone-wrap .k-task-moment {
-        margin-left: $gantt-planned-milestone-moment-margin-x;
+        margin-left: $kendo-gantt-planned-milestone-moment-margin-x;
     }
 
     // Planned Tooltip
@@ -695,13 +699,13 @@
             right: 0;
             z-index: 2;
             visibility: hidden;
-            margin-right: $gantt-planned-offset-resize-handler-margin-x;
+            margin-right: $kendo-gantt-planned-offset-resize-handler-margin-x;
         }
 
         .k-resize-handle::before {
             border-left-width: 1px;
             position: absolute;
-            top: $gantt-offset-resize-handler-top;
+            top: $kendo-gantt-offset-resize-handler-top;
             bottom: .5em;
             margin-right: 2px;
         }
@@ -717,7 +721,7 @@
 
     // Dependency Validation Tooltip
     .k-gantt-tooltip-validation {
-        max-width: $gantt-validation-tooltip-width;
+        max-width: $kendo-gantt-validation-tooltip-width;
         display: block;
 
         &::before {
@@ -736,10 +740,11 @@
     }
     .k-gantt-tooltip-validation-label {
         display: inline-flex;
-        min-width: $gantt-validation-tooltip-label-width;
+        min-width: $kendo-gantt-validation-tooltip-label-width;
     }
     .k-gantt-tooltip-validation-value {
-        font-weight: $font-weight-bold;
+        // TODO: extract to variable
+        font-weight: $kendo-font-weight-bold;
     }
     .k-gantt-tooltip-validation-label,
     .k-gantt-tooltip-validation-value {
@@ -862,15 +867,15 @@
         }
 
         .k-milestone-wrap {
-            margin-left: $gantt-rtl-milestone-wrap-margin-x;
+            margin-left: $kendo-gantt-rtl-milestone-wrap-margin-x;
         }
 
         .k-milestone-wrap .k-task-moment {
-            margin-right: $gantt-rtl-milestone-planned-moment-margin-x;
+            margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x;
         }
 
         .k-gantt-timeline .k-milestone-wrap .k-task-start {
-            right: $gantt-rtl-milestone-dot-start-margin-x;
+            right: $kendo-gantt-rtl-milestone-dot-start-margin-x;
         }
 
         .k-gantt-tooltip-validation::before {