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

package/scss/toolbar/_theme.scss

@@ -3,24 +3,25 @@
     // Theme
     .k-toolbar {
         @include fill(
-            $toolbar-text,
-            $toolbar-bg,
-            $toolbar-border,
-            $toolbar-gradient
+            $kendo-toolbar-text,
+            $kendo-toolbar-bg,
+            $kendo-toolbar-border,
+            $kendo-toolbar-gradient
         );
-        @include box-shadow( $toolbar-shadow );
+        @include box-shadow( $kendo-toolbar-shadow );
 
 
         // Separator
-        .k-separator {
-            border-color: $toolbar-separator-border;
+        .k-separator,
+        .k-toolbar-separator {
+            border-color: $kendo-toolbar-separator-border;
         }
 
 
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
-            @include box-shadow( $toolbar-item-shadow );
+            @include box-shadow( $kendo-toolbar-item-shadow );
         }
 
 
@@ -29,6 +30,32 @@
 
     }
 
+}
+
+
+
+
+@include exports("floating-toolbar/theme") {
+
+    // sass-lint:disable-block class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        @include fill(
+            $kendo-toolbar-text,
+            $kendo-toolbar-bg,
+            $kendo-toolbar-border,
+            $kendo-toolbar-gradient
+        );
+    }
+
+}
+
+
+
+
+// Remove once the Overflow Popup uses
+// the proper Menu rendering in all suites.
+@include exports("toolbar/theme/legacy") {
 
     // Overflow container
     .k-overflow-container {
@@ -71,21 +98,3 @@
     }
 
 }
-
-
-
-
-@include exports("floating-toolbar/theme") {
-
-    // sass-lint:disable-block class-name-format
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        @include fill(
-            $toolbar-text,
-            $toolbar-bg,
-            $toolbar-border,
-            $toolbar-gradient
-        );
-    }
-
-}

package/scss/toolbar/_variables.scss

@@ -1,29 +1,87 @@
 // Toolbar
 
-/// The horizontal padding of the container.
+/// The horizontal padding of the toolbar.
 /// @group toolbar
-$toolbar-padding-x: map-get( $spacing, 2 ) !default;
-/// The vertical padding of the container.
+$kendo-toolbar-padding-x: null !default;
+$kendo-toolbar-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-padding-x-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The vertical padding of the toolbar.
+/// @group toolbar
+$kendo-toolbar-padding-y: null !default;
+$kendo-toolbar-padding-y-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-padding-y-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-padding-y-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The spacing between the toolbar tools.
 /// @group toolbar
-$toolbar-padding-y: map-get( $spacing, 2 ) !default;
-$toolbar-border-width: 1px !default;
-$toolbar-border-radius: null !default;
-$toolbar-spacing: $toolbar-padding-x !default;
+$kendo-toolbar-spacing: null !default;
+$kendo-toolbar-spacing-sm: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-toolbar-spacing-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-spacing-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
 
-$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+/// Width of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-width: 1px !default;
+/// Border radius of the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-radius: null !default;
+
+/// Font family of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-family: $font-family !default;
+/// Font size of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-size: $font-size !default;
+/// Line height of the toolbar.
+/// @group toolbar
+$kendo-toolbar-line-height: $line-height !default;
 
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: $line-height !default;
+/// Background color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-bg: $base-bg !default;
+/// Text color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-text: $base-text !default;
+/// Color of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border: $base-border !default;
+/// Gradient of the toolbar.
+/// @group toolbar
+$kendo-toolbar-gradient: null !default;
+/// Box shadow of the toolbar.
+/// @group toolbar
+$kendo-toolbar-shadow: null !default;
 
-$toolbar-bg: $base-bg !default;
-$toolbar-text: $base-text !default;
-$toolbar-border: $base-border !default;
-$toolbar-gradient: null !default;
-$toolbar-shadow: null !default;
+/// Color of the separator border of the toolbar.
+/// @group toolbar
+$kendo-toolbar-separator-border: inherit !default;
 
-$toolbar-separator-border: inherit !default;
+/// The width of the input in the toolbar.
+/// @group toolbar
+$kendo-toolbar-input-width: 10em !default;
 
-$toolbar-input-width: 10em !default;
+/// Box shadow of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
 
-$toolbar-item-shadow: $kendo-button-focus-shadow !default;
+/// Sizes map for the toolbar.
+/// @group toolbar
+$kendo-toolbar-sizes: (
+    sm: (
+        padding-x: $kendo-toolbar-padding-x-sm,
+        padding-y: $kendo-toolbar-padding-y-sm,
+        spacing: $kendo-toolbar-spacing-sm
+    ),
+    md: (
+        padding-x: $kendo-toolbar-padding-x-md,
+        padding-y: $kendo-toolbar-padding-y-md,
+        spacing: $kendo-toolbar-spacing-md
+    ),
+    lg: (
+        padding-x: $kendo-toolbar-padding-x-lg,
+        padding-y: $kendo-toolbar-padding-y-lg,
+        spacing: $kendo-toolbar-spacing-lg
+    )
+) !default;

package/scss/tooltip/_index.scss

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

package/scss/tooltip/_layout.scss

@@ -19,7 +19,7 @@
         position: absolute;
         z-index: 12000;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/tooltip/_variables.scss

@@ -1,6 +1,6 @@
 // Tooltip
-$tooltip-padding-y: $padding-y !default;
-$tooltip-padding-x: $padding-x !default;
+$tooltip-padding-y: $kendo-padding-md-y !default;
+$tooltip-padding-x: $kendo-padding-md-x !default;
 $tooltip-max-width: null !default;
 $tooltip-border-width: 0px !default;
 $tooltip-border-radius: $kendo-border-radius-md !default;
@@ -14,22 +14,22 @@ $tooltip-title-line-height: 1 !default;
 
 $tooltip-callout-size: 6px !default;
 
-$tooltip-bg: rgba( contrast-wcag( $body-bg ), .75 ) !default;
-$tooltip-text: contrast-wcag( $tooltip-bg ) !default;
+$tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
+$tooltip-text: k-contrast-legacy( $tooltip-bg ) !default;
 $tooltip-border: $tooltip-bg !default;
 
-$tooltip-primary-bg: $primary !default;
-$tooltip-primary-text: contrast-wcag( $tooltip-primary-bg ) !default;
+$tooltip-primary-bg: $kendo-color-primary !default;
+$tooltip-primary-text: k-contrast-legacy( $tooltip-primary-bg ) !default;
 $tooltip-primary-border: $tooltip-primary-bg !default;
-$tooltip-info-bg: $info !default;
-$tooltip-info-text: contrast-wcag( $tooltip-info-bg ) !default;
+$tooltip-info-bg: $kendo-color-info !default;
+$tooltip-info-text: k-contrast-legacy( $tooltip-info-bg ) !default;
 $tooltip-info-border: $tooltip-info-bg !default;
-$tooltip-success-bg: $success !default;
-$tooltip-success-text: contrast-wcag( $tooltip-success-bg ) !default;
+$tooltip-success-bg: $kendo-color-success !default;
+$tooltip-success-text: k-contrast-legacy( $tooltip-success-bg ) !default;
 $tooltip-success-border: $tooltip-success-bg !default;
-$tooltip-warning-bg: $warning !default;
-$tooltip-warning-text: contrast-wcag( $tooltip-warning-bg ) !default;
+$tooltip-warning-bg: $kendo-color-warning !default;
+$tooltip-warning-text: k-contrast-legacy( $tooltip-warning-bg ) !default;
 $tooltip-warning-border: $tooltip-warning-bg !default;
-$tooltip-error-bg: $error !default;
-$tooltip-error-text: contrast-wcag( $tooltip-error-bg ) !default;
+$tooltip-error-bg: $kendo-color-error !default;
+$tooltip-error-text: k-contrast-legacy( $tooltip-error-bg ) !default;
 $tooltip-error-border: $tooltip-error-bg !default;

package/scss/treelist/_index.scss

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

package/scss/treelist/_layout.scss

@@ -33,14 +33,14 @@
             transform: translate(0, -50%);
         }
 
-        tr.k-footer td,
-        tr.k-footer-template td {
-            border-width: $treelist-footer-row-border-width 0;
+        .k-table-row.k-footer .k-table-td,
+        .k-table-row.k-footer-template .k-table-td {
+            border-width: $kendo-treelist-footer-row-border-width 0;
             border-style: solid;
             font-weight: bold;
         }
 
-        tr.k-footer + tr.k-footer td {
+        .k-table-row.k-footer + .k-table-row.k-footer .k-table-td {
             border-top-width: 0;
         }
     }
@@ -48,9 +48,9 @@
 
     // Sticky headers
     .k-treelist-scrollable {
-        > table,
-        .k-grid-header tr,
-        .k-grid-header th {
+        > .k-table,
+        .k-grid-header .k-table-row,
+        .k-grid-header .k-table-th {
             background-color: inherit;
         }
 
@@ -61,12 +61,12 @@
             left: 0;
         }
 
-        .k-grid-header th {
+        .k-grid-header .k-table-th {
             position: sticky;
             z-index: 1;
         }
 
-        .k-grid-header th.k-grid-header-sticky {
+        .k-grid-header .k-table-th.k-grid-header-sticky {
             z-index: 3;
         }
 
@@ -74,7 +74,7 @@
             padding-right: 0;
         }
 
-        tr.k-group-footer + tr.k-group-footer td {
+        .k-table-row.k-group-footer + .k-table-row.k-group-footer td {
             border-top-width: 0;
         }
 

package/scss/treelist/_theme.scss

@@ -4,7 +4,7 @@
     .k-treelist {
         tr.k-footer,
         tr.k-footer-template {
-            background-color: $treelist-footer-row-bg;
+            background-color: $kendo-treelist-footer-row-bg;
         }
     }
 

package/scss/treelist/_variables.scss

@@ -1,3 +1,3 @@
 // Treelist
-$treelist-footer-row-bg: $grid-hovered-bg !default;
-$treelist-footer-row-border-width: 1px !default;
+$kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
+$kendo-treelist-footer-row-border-width: 1px !default;

package/scss/treeview/_index.scss

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

package/scss/treeview/_layout.scss

@@ -15,7 +15,7 @@
         overflow: auto;
         white-space: nowrap;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -27,7 +27,7 @@
 
     // Treeview filter
     .k-treeview-filter {
-        padding: map-get( $spacing, 2 );
+        padding: k-map-get( $kendo-spacing, 2 );
         display: block;
         position: relative;
         flex: none;
@@ -42,7 +42,7 @@
         position: relative;
         outline: 0;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         &.ng-animating {
             overflow: hidden;
@@ -169,10 +169,10 @@
     }
 
     @each $size, $size-props in $kendo-treeview-sizes {
-        $_font-size: map-get( $size-props, font-size);
-        $_line-height: map-get( $size-props, line-height);
-        $_item-padding-x: map-get( $size-props, item-padding-x);
-        $_item-padding-y: map-get( $size-props, item-padding-y);
+        $_font-size: k-map-get( $size-props, font-size);
+        $_line-height: k-map-get( $size-props, line-height);
+        $_item-padding-x: k-map-get( $size-props, item-padding-x);
+        $_item-padding-y: k-map-get( $size-props, item-padding-y);
 
         .k-treeview-#{$size} {
             font-size: $_font-size;

package/scss/treeview/_variables.scss

@@ -21,16 +21,16 @@ $kendo-treeview-indent: 16px !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-treeview-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: k-map-get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
-$kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-treeview-item-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-lg: k-map-get( $kendo-spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -68,17 +68,17 @@ $kendo-treeview-sizes: (
 $kendo-treeview-bg: null !default;
 /// Text color of the treeview component.
 /// @group treeview
-$kendo-treeview-text: $component-text !default;
+$kendo-treeview-text: $kendo-component-text !default;
 /// Border color of the treeview component.
 /// @group treeview
 $kendo-treeview-border: null !default;
 
 /// Background color of hovered treeview items.
 /// @group treeview
-$kendo-treeview-item-hover-bg: $hovered-bg !default;
+$kendo-treeview-item-hover-bg: $kendo-hover-bg !default;
 /// Text color of hovered treeview items.
 /// @group treeview
-$kendo-treeview-item-hover-text: $hovered-text !default;
+$kendo-treeview-item-hover-text: $kendo-hover-text !default;
 /// Border color of hovered treeview items.
 /// @group treeview
 $kendo-treeview-item-hover-border: null !default;
@@ -88,10 +88,10 @@ $kendo-treeview-item-hover-gradient: null !default;
 
 /// Background color of selected treeview items.
 /// @group treeview
-$kendo-treeview-item-selected-bg: $selected-bg !default;
+$kendo-treeview-item-selected-bg: $kendo-selected-bg !default;
 /// Text color of selected treeview items.
 /// @group treeview
-$kendo-treeview-item-selected-text: $selected-text !default;
+$kendo-treeview-item-selected-text: $kendo-selected-text !default;
 /// Border color of selected treeview items.
 /// @group treeview
 $kendo-treeview-item-selected-border: null !default;
@@ -101,7 +101,7 @@ $kendo-treeview-item-selected-gradient: null !default;
 
 /// Box shadow of focused treeview items.
 /// @group treeview
-$kendo-treeview-item-focus-shadow: $focused-shadow !default;
+$kendo-treeview-item-focus-shadow: $kendo-focus-shadow !default;
 
 /// Background color of load more.
 /// @group treeview

package/scss/typography/_index.scss

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

package/scss/typography/_theme.scss

@@ -2,8 +2,8 @@
 
     .k-body {
         @include fill(
-            $body-text,
-            $body-bg
+            $kendo-body-text,
+            $kendo-body-bg
         );
     }
 

package/scss/typography/_variables.scss

@@ -23,7 +23,7 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
 
 /// Line height used along with $font-size.
 /// @group typography
-$line-height: (20 / 14) !default;
+$line-height: k-math-div( 20, 14 ) !default;
 $line-height-xs: 1 !default;
 $line-height-sm: 1.25 !default;
 $line-height-md: $line-height !default;
@@ -108,12 +108,12 @@ $pre-padding-y: 16px !default;
 $code-border-width: 1px !default;
 
 $code-bg: $base-bg !default;
-$code-text: $component-text !default;
-$code-border: $component-border !default;
+$code-text: $kendo-component-text !default;
+$code-border: $kendo-component-border !default;
 
 // Link
-$link-text: $primary !default;
-$link-hover-text: $primary-darker !default;
+$link-text: $kendo-color-primary !default;
+$link-hover-text: $kendo-color-primary-darker !default;
 
 
 // Display

package/scss/upload/_index.scss

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