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

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,78 @@
 // Forms
-$form-spacer: $padding-x * 2 !default;
+$kendo-form-spacer: $kendo-padding-md-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-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

@@ -11,9 +11,9 @@
 @import "../window/_index.scss";
 @import "../splitter/_index.scss";
 @import "../treelist/_index.scss";
-
+@import "../table/_variables.scss";
 
 // 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,7 @@
         position: relative;
         white-space: nowrap;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // other
         td {
@@ -24,7 +24,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 +33,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 +73,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 +110,7 @@
                 flex: 1 1 auto;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                white-space: nowrap;
             }
             .k-task-actions {
                 flex-shrink: 0;
@@ -176,12 +178,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 +262,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 +273,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 +297,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 +374,8 @@
     .k-gantt-tasks {
         position: relative;
 
-        td {
+        td,
+        .k-table-td {
             padding: 0;
             border-width: 0;
             position: relative;
@@ -380,6 +383,7 @@
         }
         td::after { content: "\200b"; }
     }
+
     .k-task-wrap {
         margin: 0 -21px;
         padding: 5px 21px;
@@ -553,6 +557,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 +567,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 +597,7 @@
 
     // Task tooltip
     .k-task-details {
-        padding: $padding-y $padding-x;
+        padding: $kendo-padding-md-y $kendo-padding-md-x;
         white-space: nowrap;
 
         strong {
@@ -806,7 +811,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;

package/scss/gantt/_theme.scss

@@ -98,7 +98,7 @@
         );
 
         &.k-task-delayed {
-            @include repeating-striped-gradient($gantt-delayed-bg, $body-bg, 90deg, 4px, 2px);
+            @include repeating-striped-gradient($gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px);
         }
 
         &.k-task-advanced {
@@ -222,7 +222,7 @@
 
     // Delay offset
     .k-task-offset {
-        @include repeating-striped-gradient($gantt-delayed-bg, $body-bg, 135deg, 4px, 2px);
+        @include repeating-striped-gradient($gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px);
 
         .k-resize-e::before {
             @include fill(
@@ -236,7 +236,7 @@
     }
 
     .k-task-offset:hover {
-        @include repeating-striped-gradient($gantt-delayed-bg-lighter, $body-bg, 135deg, 4px, 2px);
+        @include repeating-striped-gradient($gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px);
     }
 
     .k-pdf-export .k-task-offset {

package/scss/gantt/_variables.scss

@@ -4,21 +4,21 @@ $gantt-font-family: $font-family !default;
 $gantt-font-size: $font-size !default;
 $gantt-line-height: $line-height !default;
 
-$gantt-bg: $component-bg !default;
-$gantt-text: $component-text !default;
-$gantt-border: $component-border !default;
+$gantt-bg: $kendo-component-bg !default;
+$gantt-text: $kendo-component-text !default;
+$gantt-border: $kendo-component-border !default;
 
 $gantt-treelist-bg: null !default;
 $gantt-treelist-text: null !default;
 $gantt-treelist-border: null !default;
 
-$gantt-nonwork-bg: rgba( contrast-wcag( $gantt-bg ), .025 ) !default;
+$gantt-nonwork-bg: rgba( k-contrast-legacy( $gantt-bg ), .025 ) !default;
 $gantt-nonwork-text: null !default;
 $gantt-nonwork-border: null !default;
 
 $gantt-line-size: 2px !default;
-$gantt-line-fill: contrast-wcag( $gantt-bg ) !default;
-$gantt-line-selected-fill: $primary !default;
+$gantt-line-fill: k-contrast-legacy( $gantt-bg ) !default;
+$gantt-line-selected-fill: $kendo-color-primary !default;
 
 $gantt-dot-size: 8px !default;
 $gantt-dot-spacing: 4px !default;
@@ -29,25 +29,25 @@ $gantt-dot-hover-border: $gantt-text !default;
 
 $gantt-milestone-bg: $gantt-text !default;
 $gantt-milestone-border: $gantt-border !default;
-$gantt-milestone-selected-bg: $selected-bg !default;
-$gantt-milestone-selected-border: $selected-border !default;
+$gantt-milestone-selected-bg: $kendo-selected-bg !default;
+$gantt-milestone-selected-border: $kendo-selected-border !default;
 
-$gantt-summary-bg: try-tint( $gantt-text, 1 ) !default;
-$gantt-summary-progress-bg: try-shade( $gantt-text, 5 ) !default;
-$gantt-summary-selected-bg: try-tint( $selected-bg, 6 ) !default;
-$gantt-summary-progress-selected-bg: $selected-bg !default;
+$gantt-summary-bg: k-try-tint( $gantt-text, 1 ) !default;
+$gantt-summary-progress-bg: k-try-shade( $gantt-text, 5 ) !default;
+$gantt-summary-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
 
 $gantt-task-border-width: 0px !default;
-$gantt-task-padding-x: map-get( $spacing, 2 ) !default;
-$gantt-task-padding-y: map-get( $spacing, 1 ) !default;
-$gantt-task-bg: try-tint( $gantt-text, 2 ) !default;
-$gantt-task-text: contrast-wcag( $gantt-text ) !default;
+$gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$gantt-task-bg: k-try-tint( $gantt-text, 2 ) !default;
+$gantt-task-text: k-contrast-legacy( $gantt-text ) !default;
 $gantt-task-border: null !default;
 $gantt-task-progress-bg: $gantt-text !default;
-$gantt-task-selected-bg: try-tint( $selected-bg, 6 ) !default;
-$gantt-task-selected-text: $selected-text !default;
+$gantt-task-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$gantt-task-selected-text: $kendo-selected-text !default;
 $gantt-task-selected-border: null !default;
-$gantt-task-progress-selected-bg: $selected-bg !default;
+$gantt-task-progress-selected-bg: $kendo-selected-bg !default;
 
 $gantt-planned-margin-y: .35em !default;
 $gantt-planned-border-width: 2px !default;
@@ -58,8 +58,8 @@ $gantt-planned-dependency-margin-y: .55em !default;
 $gantt-planned-moment-width: 6px !default;
 $gantt-planned-moment-height: $gantt-planned-moment-width !default;
 $gantt-planned-moment-border-radius: calc( ( #{$gantt-planned-border-width * 2} + #{$gantt-planned-moment-width} ) / 2 ) !default;
-$gantt-planned-moment-left-margin-x: calc( #{$gantt-planned-border-width} / 2 - #{$gantt-planned-moment-border-radius} ) !default;
-$gantt-planned-milestone-moment-margin-x: calc( #{$gantt-planned-moment-width} / 2) !default;
+$gantt-planned-moment-left-margin-x: calc( #{k-math-div( $gantt-planned-border-width, 2 )} - #{$gantt-planned-moment-border-radius} ) !default;
+$gantt-planned-milestone-moment-margin-x: k-math-div( $gantt-planned-moment-width, 2 ) !default;
 
 $gantt-planned-duration-height: $gantt-planned-border-width !default;
 $gantt-planned-duration-hover-height: calc( #{$gantt-planned-border-width} + 1px ) !default;
@@ -74,14 +74,14 @@ $gantt-rtl-milestone-dot-start-margin-x: -.1em !default;
 
 $gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
-$gantt-planned-bg: $primary !default;
+$gantt-planned-bg: $kendo-color-primary !default;
 $gantt-planned-border: $gantt-planned-bg !default;
 
-$gantt-delayed-bg: $error !default;
-$gantt-delayed-bg-lighter: tint($gantt-delayed-bg, 5) !default;
+$gantt-delayed-bg: $kendo-color-error !default;
+$gantt-delayed-bg-lighter: k-color-tint($gantt-delayed-bg, 5) !default;
 
-$gantt-advanced-bg: $success !default;
-$gantt-advanced-bg-lighter: tint($gantt-advanced-bg, 5) !default;
+$gantt-advanced-bg: $kendo-color-success !default;
+$gantt-advanced-bg-lighter: k-color-tint($gantt-advanced-bg, 5) !default;
 
 $gantt-action-on-offset-text: #000000 !default;
 $gantt-offset-resize-handler-top: 50% !default;
@@ -89,5 +89,5 @@ $gantt-offset-resize-handler-top: 50% !default;
 $gantt-validation-tooltip-width: 200px !default;
 $gantt-validation-tooltip-label-width: 50px !default;
 $gantt-validation-tooltip-border: #656565 !default;
-$gantt-validation-tooltip-valid-border: $success !default;
-$gantt-validation-tooltip-invalid-border: $error !default;
+$gantt-validation-tooltip-valid-border: $kendo-color-success !default;
+$gantt-validation-tooltip-invalid-border: $kendo-color-error !default;

package/scss/grid/_index.scss

@@ -20,13 +20,15 @@
 @import "../menu/_index.scss";
 @import "../dialog/_index.scss";
 @import "../pager/_index.scss";
+@import "../chip/_index.scss";
 @import "../skeleton/_index.scss";
 @import "../utils/_float.scss";
 @import "../utils/_spacer.scss";
 @import "../list/_index.scss";
+@import "../table/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";