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

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,15 @@
             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;
+                // 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;
             }
 
@@ -295,7 +303,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,27 +335,30 @@
     // Action buttons
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
-        margin: $spacer (-$window-inner-padding-x) (-$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: $form-line-height;
+        line-height: $kendo-form-line-height;
         text-align: right;
         float: left;
         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;
         }
     }
@@ -366,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: ($spacer / 2);
+            margin-top: k-map-get( $kendo-spacing, 2 );
         }
 
         .k-reset .k-widget {

package/scss/forms/_theme.scss

@@ -2,35 +2,35 @@
 
     .k-form,
     .k-form-inline {
-        @include fill( $color: $body-text );
+        @include fill( $color: $kendo-body-text );
 
         fieldset {
             legend {
-                @include fill( $color: $fieldset-legend-text );
+                @include fill( $color: $kendo-fieldset-legend-text );
             }
         }
 
         .k-form-legend {
-            @include fill( $border: $form-legend-border-color );
+            @include fill( $border: $kendo-form-legend-border-color );
         }
 
         .k-field-info {
-            @include fill( $color: $subtle-text );
+            @include fill( $color: $kendo-subtle-text );
         }
 
         .k-alert-error {
-            @include fill( $color: $error );
+            @include fill( $color: $kendo-color-error );
         }
     }
 
     .k-form-error,
     .k-text-error,
     .k-form-field-error .k-label {
-        @include fill( $color: $error );
+        @include fill( $color: $kendo-color-error );
     }
 
     .k-form-separator {
-        @include fill( $border: $form-separator-border-color );
+        @include fill( $border: $kendo-form-separator-border-color );
     }
 
 }

package/scss/forms/_variables.scss

@@ -1,63 +1,85 @@
+@import "../input/_variables.scss";
+@import "../tooltip/_variables.scss";
+@import "../typography/_variables.scss";
+@import "../window/_variables.scss";
+
+
 // Forms
-$form-spacer: $padding-x * 2 !default;
 
-$form-font-size: $font-size !default;
-$form-line-height: $line-height !default;
-$form-line-height-em: calc( #{$form-line-height} * 1em ) !default;
-$form-line-height-sm: $line-height-sm !default;
-$form-line-height-lg: $line-height-lg !default;
+$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-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;
 
-$form-fieldset-margin: 2em 0 0 !default;
-$form-fieldset-padding: 0px !default;
+$kendo-form-fieldset-margin: 2em 0 0 !default;
+$kendo-form-fieldset-padding: 0px !default;
 
-$form-legend-margin: 0 0 1em !default;
-$form-legend-padding: 0px !default;
-$form-legend-border-width: 0 0 2px !default;
-$form-legend-border-style: solid !default;
-$form-legend-border-color: $component-border !default;
-$form-legend-width: 100% !default;
-$form-legend-font-size: 14px !default;
-$form-legend-text-transform: uppercase !default;
+$kendo-form-legend-margin: 0 0 1em !default;
+$kendo-form-legend-padding: 0px !default;
+$kendo-form-legend-border-width: 0 0 2px !default;
+$kendo-form-legend-border-style: solid !default;
+$kendo-form-legend-border-color: $kendo-component-border !default;
+$kendo-form-legend-width: 100% !default;
+$kendo-form-legend-font-size: 14px !default;
+$kendo-form-legend-text-transform: uppercase !default;
 
-$form-label-margin-bottom: 0px !default;
+$kendo-form-label-margin-bottom: 0px !default;
 
-$form-button-margin-x: 8px !default;
+$kendo-form-button-margin-x: 8px !default;
 
-$form-hint-font-size: 12px !default;
-$form-hint-font-style: italic !default;
-$form-hint-margin-top: 4px !default;
+$kendo-form-hint-font-size: 12px !default;
+$kendo-form-hint-font-style: italic !default;
+$kendo-form-hint-margin-top: 4px !default;
 
-$form-field-margin-top: 1em !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;
 
-$form-separator-margin: $form-field-margin-top 0 0 !default;
-$form-separator-border-color: $form-legend-border-color !default;
+$kendo-form-separator-margin: $kendo-form-rows-spacing-md 0 0 !default;
+$kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
-$horizontal-form-label-padding-top: 5px !default;
-$horizontal-form-label-margin-x: 10px !default;
-$horizontal-form-label-width: 25% !default;
-$horizontal-form-label-align: flex-end !default;
+$kendo-horizontal-form-label-padding-top: 5px !default;
+$kendo-horizontal-form-label-margin-x: 10px !default;
+$kendo-horizontal-form-label-width: 25% !default;
+$kendo-horizontal-form-label-align: flex-end !default;
 
-$horizontal-form-field-wrap-max-width: calc( ( 100% - #{$horizontal-form-label-width} ) - #{$horizontal-form-label-margin-x} ) !default;
+$kendo-horizontal-form-field-wrap-max-width: calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) !default;
 
-$inline-form-element-width: 25% !default;
+$kendo-inline-form-element-width: 25% !default;
 
-$forms-invalid-color: $error !default;
+$kendo-forms-invalid-color: $kendo-color-error !default;
 
 
 // Label
-$label-optional-margin-x: 6px !default;
-$label-optional-font-size: 12px !default;
-$label-optional-font-style: italic !default;
+$kendo-label-optional-margin-x: 6px !default;
+$kendo-label-optional-font-size: 12px !default;
+$kendo-label-optional-font-style: italic !default;
 
 
 // Fieldset
-$fieldset-margin: 30px !default;
-$fieldset-font-size: $h4-font-size !default;
-
-$fieldset-bg: null !default;
-$fieldset-text: null !default;
-$fieldset-border: null !default;
-
-$fieldset-legend-bg: null !default;
-$fieldset-legend-text: try-shade( $body-text, 2 ) !default;
-$fieldset-legend-border: null !default;
+$kendo-fieldset-margin: 30px !default;
+$kendo-fieldset-font-size: $h4-font-size !default;
+
+$kendo-fieldset-bg: null !default;
+$kendo-fieldset-text: null !default;
+$kendo-fieldset-border: null !default;
+
+$kendo-fieldset-legend-bg: null !default;
+$kendo-fieldset-legend-text: k-try-shade( $kendo-body-text, 2 ) !default;
+$kendo-fieldset-legend-border: null !default;
+
+// Sizes
+$kendo-form-sizes: (
+    sm: (
+        form-rows-spacing: $kendo-form-rows-spacing-sm
+    ),
+    md: (
+        form-rows-spacing: $kendo-form-rows-spacing-md
+    ),
+    lg: (
+        form-rows-spacing: $kendo-form-rows-spacing-lg
+    )
+) !default;

package/scss/gantt/_index.scss

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

package/scss/gantt/_layout.scss

@@ -1,6 +1,6 @@
 @include exports("gantt/layout") {
 
-    $row-height: #{$line-height-em} + #{2 * $table-cell-padding-y} + #{$grid-cell-horizontal-border-width};
+    $row-height: #{$line-height-em} + #{2 * $kendo-table-cell-padding-y-md} + #{$kendo-grid-cell-horizontal-border-width};
 
     .k-gantt {
         border-width: $gantt-border-width;
@@ -15,7 +15,11 @@
         position: relative;
         white-space: nowrap;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        .k-table-td {
+            white-space: nowrap;
+        }
 
         // other
         td {
@@ -24,7 +28,7 @@
             vertical-align: top;
         }
         .k-grid-header tr {
-            height: calc( #{$line-height-em} + #{$grid-header-padding-y * 2} + 1px );
+            height: calc( #{$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} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
+            height: calc( #{$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 + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
+            height: calc( #{$line-height-em} * 1.7 + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-horizontal-border-width} );
         }
 
         // Layout
@@ -73,11 +77,12 @@
             .k-grid-header tr:first-child th:last-child,
             tbody td:last-child {
                 padding: 0;
+                vertical-align: top;
             }
             .k-grid-header th:last-child {
                 .k-header {
-                    padding: $grid-header-padding-y $grid-header-padding-x;
-                    border-width: 0 0 1px $grid-cell-vertical-border-width;
+                    padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+                    border-width: 0 0 1px $kendo-grid-cell-vertical-border-width;
                     white-space: nowrap;
                 }
             }
@@ -109,6 +114,7 @@
                 flex: 1 1 auto;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                white-space: nowrap;
             }
             .k-task-actions {
                 flex-shrink: 0;
@@ -176,12 +182,12 @@
 
     // Header and footer
     .k-gantt-header {
-        border-width: 0 0 $toolbar-border-width;
+        border-width: 0 0 $kendo-toolbar-border-width;
         flex-shrink: 0;
         z-index: 6;
     }
     .k-gantt-footer {
-        border-width: $toolbar-border-width 0 0;
+        border-width: $kendo-toolbar-border-width 0 0;
         flex-shrink: 0;
     }
 
@@ -260,7 +266,7 @@
             padding: 0 !important; // sass-lint:disable-line no-important
         }
         .k-grid-header tr {
-            height: calc( #{$line-height-em} * 2 + #{$grid-header-padding-y * 4} + 2px );
+            height: calc( #{$line-height-em} * 2 + #{$kendo-grid-header-padding-y * 4} + 2px );
             vertical-align: bottom;
         }
         .k-grid-content {
@@ -271,7 +277,7 @@
             vertical-align: middle;
         }
         .k-gantt-treelist-nested-columns .k-grid-header tr {
-            height: calc( #{$line-height-em} + #{$grid-header-padding-y * 2} + 1px );
+            height: calc( #{$line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
         }
 
         &.k-gantt-treelist-scrollable {
@@ -295,8 +301,8 @@
             overflow-x: scroll;
         }
         .k-header {
-            padding: $grid-header-padding-y $grid-header-padding-x;
-            border-width: 0 0 1px $grid-cell-vertical-border-width;
+            padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+            border-width: 0 0 1px $kendo-grid-cell-vertical-border-width;
             white-space: nowrap;
         }
 
@@ -372,7 +378,8 @@
     .k-gantt-tasks {
         position: relative;
 
-        td {
+        td,
+        .k-table-td {
             padding: 0;
             border-width: 0;
             position: relative;
@@ -380,6 +387,7 @@
         }
         td::after { content: "\200b"; }
     }
+
     .k-task-wrap {
         margin: 0 -21px;
         padding: 5px 21px;
@@ -553,6 +561,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        white-space: nowrap;
     }
     .k-task-template {
         padding: $gantt-task-padding-y $gantt-task-padding-x;
@@ -562,7 +571,7 @@
         text-overflow: ellipsis;
     }
     .k-task-actions {
-        padding: $padding-y-sm;
+        padding: $kendo-padding-sm-y;
         white-space: nowrap;
         display: flex;
         flex-direction: row;
@@ -592,7 +601,7 @@
 
     // Task tooltip
     .k-task-details {
-        padding: $padding-y $padding-x;
+        padding: $kendo-padding-md-y $kendo-padding-md-x;
         white-space: nowrap;
 
         strong {
@@ -601,7 +610,7 @@
             display: block;
         }
         .k-task-pct {
-            font-size: $icon-size-lg;
+            font-size: $kendo-icon-size-xxl;
         }
         ul {
             line-height: normal;
@@ -806,7 +815,7 @@
                 text-align: left;
             }
             .k-header {
-                border-width: 0 $grid-cell-vertical-border-width 1px 0;
+                border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
             }
             .k-header:first-child {
                 border-right-width: 0;