@progress/kendo-theme-material 4.42.1-dev.2 → 5.0.0-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "4.42.1-dev.2",
+  "version": "5.0.0-alpha.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -15,7 +15,6 @@
   "files": [
     "dist/",
     "scss/",
-    "modules/",
     "lib/"
   ],
   "homepage": "https://github.com/telerik/kendo-themes/tree/master/packages/material",
@@ -47,11 +46,11 @@
     "dart:watch": "gulp dart:watch",
     "dart:swatches": "gulp dart:swatches",
     "dart:flat": "gulp dart:flat",
-    "prepublishOnly": "./build/embed-dependencies '@progress/kendo-theme-default'",
-    "postpublish": "rm -rf modules && git checkout scss"
+    "prepublishOnly": "echo 'no prebublish for material theme'",
+    "postpublish": "echo 'no postpublish for material theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^4.42.1-dev.2"
+    "@progress/kendo-theme-default": "^5.0.0-alpha.2"
   },
-  "gitHead": "7594d845144b5289cc2484b488f2bc9418387f12"
+  "gitHead": "f7a672c3f60bdfa52a6fb04262352b0a45ac7029"
 }

package/scss/_variables.scss

@@ -11,6 +11,8 @@ $enable-flex-classes: true !default;
 $enable-grid-classes: true !default;
 
 $use-calc-badge-size: true !default;
+$use-input-button-width: false !default;
+$use-input-spinner-width: false !default;
 $use-picker-select-width: false !default;
 
 

package/scss/action-buttons/_layout.scss

@@ -1,11 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/action-buttons/_layout.scss";
-
-@include exports("action-buttons/layout/material") {
-
-    .k-actions {
-        .k-button {
-            @include box-shadow( none );
-        }
-    }
-
-}
+@import "~@progress/kendo-theme-default/scss/action-buttons/_layout.scss";

package/scss/action-buttons/_theme.scss

@@ -1,12 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/action-buttons/_theme.scss";
-
-@include exports("action-buttons/theme/material") {
-
-    .k-actions {
-        .k-button:not(.k-primary),
-        .k-button-secondary {
-            background-color: try-shade( $button-bg );
-        }
-    }
-
-}
+@import "~@progress/kendo-theme-default/scss/action-buttons/_theme.scss";

package/scss/action-sheet/_layout.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/action-sheet/_layout.scss";
+@import "~@progress/kendo-theme-default/scss/action-sheet/_layout.scss";

package/scss/action-sheet/_theme.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/action-sheet/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/action-sheet/_theme.scss";

package/scss/adaptive/_layout.scss

@@ -1,4 +1,4 @@
-@import "../../modules/@progress/kendo-theme-default/scss/adaptive/_layout.scss";
+@import "~@progress/kendo-theme-default/scss/adaptive/_layout.scss";
 
 @include exports("adaptive/layout/material") {
 

package/scss/adaptive/_theme.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/adaptive/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/adaptive/_theme.scss";

package/scss/all.scss

@@ -55,6 +55,11 @@
 @import "coloreditor/_index.scss";
 @import "colorpicker/_index.scss";
 @import "combobox/_index.scss";
+@import "dateinput/_index.scss";
+@import "datepicker/_index.scss";
+@import "timepicker/_index.scss";
+@import "datetimepicker/_index.scss";
+@import "daterangepicker/_index.scss";
 @import "datetime/_index.scss";
 @import "dropdowngrid/_index.scss";
 @import "dropdownlist/_index.scss";

package/scss/appbar/_layout.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/appbar/_layout.scss";
+@import "~@progress/kendo-theme-default/scss/appbar/_layout.scss";

package/scss/appbar/_theme.scss

@@ -1,2 +1,2 @@
-@import "../../modules/@progress/kendo-theme-default/scss/appbar/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/appbar/_theme.scss";
 

package/scss/autocomplete/_layout.scss

@@ -1,17 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/autocomplete/_layout.scss";
-
-@include exports( "autocomplete/layout/material" ) {
-
-    .k-autocomplete {
-        border-width: $input-border-width 0;
-        border-top-color: transparent !important; // sass-lint:disable-line no-important
-
-        // Disabled
-        &[disabled],
-        &.k-state-disabled {
-            border-bottom-style: dashed;
-        }
-
-    }
-
-}
+@import "~@progress/kendo-theme-default/scss/autocomplete/_layout.scss";

package/scss/autocomplete/_theme.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/autocomplete/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/autocomplete/_theme.scss";

package/scss/autocomplete/_variables.scss

@@ -1,18 +1,18 @@
 // Autocomplete
-$autocomplete-bg: $input-bg !default;
-$autocomplete-text: $input-text !default;
-$autocomplete-border: $input-border !default;
-$autocomplete-shadow: $input-shadow !default;
+$autocomplete-bg: $kendo-input-bg !default;
+$autocomplete-text: $kendo-input-text !default;
+$autocomplete-border: $kendo-input-border !default;
+$autocomplete-shadow: $kendo-input-shadow !default;
 
-$autocomplete-hovered-bg: $input-hovered-bg !default;
-$autocomplete-hovered-text: $input-hovered-text !default;
-$autocomplete-hovered-border: $input-hovered-border !default;
-$autocomplete-hovered-shadow: $input-hovered-shadow !default;
+$autocomplete-hovered-bg: $kendo-input-hover-bg !default;
+$autocomplete-hovered-text: $kendo-input-hover-text !default;
+$autocomplete-hovered-border: $kendo-input-hover-border !default;
+$autocomplete-hovered-shadow: $kendo-input-hover-shadow !default;
 
-$autocomplete-focused-bg: $input-focused-bg !default;
-$autocomplete-focused-text: $input-focused-text !default;
-$autocomplete-focused-border: $input-focused-border !default;
-$autocomplete-focused-shadow: $input-focused-shadow !default;
+$autocomplete-focused-bg: $kendo-input-focus-bg !default;
+$autocomplete-focused-text: $kendo-input-focus-text !default;
+$autocomplete-focused-border: $kendo-input-focus-border !default;
+$autocomplete-focused-shadow: $kendo-input-focus-shadow !default;
 
 $autocomplete-disabled-bg: null !default;
 $autocomplete-disabled-text: null !default;

package/scss/avatar/_layout.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/avatar/_layout.scss";
+@import "~@progress/kendo-theme-default/scss/avatar/_layout.scss";

package/scss/avatar/_theme.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/avatar/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/avatar/_theme.scss";

package/scss/badge/_layout.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/badge/_layout.scss";
+@import "~@progress/kendo-theme-default/scss/badge/_layout.scss";

package/scss/badge/_theme.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/badge/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/badge/_theme.scss";

package/scss/bottom-navigation/_layout.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/bottom-navigation/_layout.scss";
+@import "~@progress/kendo-theme-default/scss/bottom-navigation/_layout.scss";

package/scss/bottom-navigation/_theme.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/bottom-navigation/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/bottom-navigation/_theme.scss";

package/scss/breadcrumb/_layout.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/breadcrumb/_layout.scss";
+@import "~@progress/kendo-theme-default/scss/breadcrumb/_layout.scss";

package/scss/breadcrumb/_theme.scss

@@ -1 +1 @@
-@import "../../modules/@progress/kendo-theme-default/scss/breadcrumb/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/breadcrumb/_theme.scss";

package/scss/breadcrumb/_variables.scss

@@ -14,7 +14,7 @@ $breadcrumb-text: $component-text !default;
 $breadcrumb-border: $component-border !default;
 
 $breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
-$breadcrumb-delimiter-icon-padding-x: $button-padding-y !default;
+$breadcrumb-delimiter-icon-padding-x: $kendo-button-padding-y !default;
 $breadcrumb-delimiter-icon-padding-y: 0px !default;
 
 $breadcrumb-link-padding-x: ( $padding-x * 1.25 ) / 2 !default;

package/scss/button/_layout.scss

@@ -1,4 +1,4 @@
-@import "../../modules/@progress/kendo-theme-default/scss/button/_layout.scss";
+@import "~@progress/kendo-theme-default/scss/button/_layout.scss";
 
 @include exports("button/layout/material") {
 
@@ -6,7 +6,7 @@
     .k-button {
         text-transform: uppercase;
         font-weight: 500;
-        transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
+        transition: $kendo-button-color-transition;
 
         &::before {
             display: block;
@@ -17,16 +17,7 @@
         }
     }
 
-
-    // Button group
-    .k-button-group {}
-
-
-    // Split button
-    .k-split-button {}
-
-
-    // Outline button
+    // Outline Buttons
     .k-button-outline {
         background-color: transparent !important; // sass-lint:disable-line no-important
 
@@ -38,24 +29,25 @@
     }
 
 
-    // Clear button
-    .k-button-clear,
-    .k-button.k-clear {
+    // Link Buttons
+    .k-button-link {
         &::before {
-            display: none;
+            display: none !important; // sass-lint:disable-line no-important
         }
-
-
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            &::before {
-                display: block;
-            }
+        &::after {
+            display: block !important; // sass-lint:disable-line no-important
         }
     }
 
 
+    // Button group
+    .k-button-group {}
+
+
+    // Split button
+    .k-split-button {}
+
+
     // Popup button group
     .k-overflow-button,
     .k-overflow-group {

package/scss/button/_theme.scss

@@ -1,86 +1,138 @@
-@import "../../modules/@progress/kendo-theme-default/scss/button/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/button/_theme.scss";
 
 @include exports( "button/theme/material" ) {
 
-    // Flat button
-    .k-button-flat {
-
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+    // Solid Buttons
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-solid-#{$name} {
+            @if ($name != "base") {
+                background-image: none;
+                @include box-shadow( $kendo-button-shadow );
+
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    background-color: $color;
+                    border-color: $color;
+                }
+
+                // Focus state
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( $kendo-button-shadow );
+                }
+
+                // Active state
+                &:active,
+                &.k-active {
+                    @include box-shadow( $kendo-button-active-shadow );
+                    background-color: $color;
+                    border-color: $color;
+                }
+
+                // Selected
+                &.k-selected {
+                    background-color: $color;
+                    border-color: $color;
+                }
+            }
         }
     }
-    .k-button-flat.k-primary {
-        color: $primary-button-bg;
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+
+    // Outline Buttons
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-outline-#{$name} {
+            @if ($name == "base") {
+
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    color: $kendo-button-text;
+                }
+
+                // Active state
+                &:active,
+                &.k-active {
+                    color: $kendo-button-text;
+                }
+
+                // Selected state
+                &.k-selected {
+                    color: $kendo-button-text;
+                }
+            } @else {
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    color: $color;
+                }
+
+                // Active state
+                &:active,
+                &.k-active {
+                    color: $color;
+                }
+
+                // Selected state
+                &.k-selected {
+                    color: $color;
+                }
+            }
         }
     }
 
 
-    // Outline button
-    .k-button-outline {
-        @include box-shadow( none );
-        color: $button-text;
-
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &.k-state-selected,
-        &:focus,
-        &.k-state-focus {
-            color: $button-text;
-        }
+    // Link Buttons
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-link-#{$name} {
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                background: none;
+            }
         }
     }
-    .k-button-outline.k-primary {
-        color: $primary-button-bg;
-
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &.k-state-selected,
-        &:focus,
-        &.k-state-focus {
-            color: $primary-button-bg;
-        }
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
-        }
-    }
 
+    // Menu button
+    .k-menu-button {}
 
-    // Clear button
-    .k-button-clear,
-    .k-button.k-clear {
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+    // Button group
+    .k-button-group {
+
+        .k-button:focus,
+        .k-button.k-focus,
+        .k-button-outline:focus,
+        .k-button-outline.k-focus {
+            @include box-shadow( $kendo-button-group-focus-shadow );
         }
+
     }
 
 
+    // Split button
+    .k-split-button:focus,
+    .k-split-button.k-focus {
+        @include box-shadow( $kendo-button-focus-shadow );
+    }
+
+}
+
+
+@include exports( "button/theme/material/legacy" ) {
     // Button group
     .k-button-group {
-        @include box-shadow( $button-shadow );
+        @include box-shadow( $kendo-button-shadow );
 
         .k-button {
             @include box-shadow( none );
         }
 
         &:disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include box-shadow( none );
             opacity: 1;
         }
@@ -89,7 +141,7 @@
 
     // Split button
     .k-split-button {
-        @include box-shadow( $button-shadow );
+        @include box-shadow( $kendo-button-shadow );
 
         .k-button {
             @include box-shadow( none );
@@ -102,11 +154,11 @@
 
         > .k-button:last-child:hover,
         > .k-split-button-arrow:hover {
-            color: $button-text;
+            color: $kendo-button-text;
         }
 
         &:disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include box-shadow( none );
             opacity: 1;
         }
@@ -119,53 +171,8 @@
 
     // Variant button group
     .k-button-group-flat,
-    .k-button-group-bare,
     .k-button-group-outline {
         @include box-shadow( none );
     }
 
 }
-
-
-
-
-@include exports( "clear-button/theme" ) {
-    .k-button.k-button-clear {
-        border-color: transparent !important; // sass-lint:disable-line no-important
-        color: $clear-button-text;
-        background: none !important; // sass-lint:disable-line no-important
-        box-shadow: none !important; // sass-lint:disable-line no-important
-
-        &::after {
-            display: block;
-        }
-
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focused {
-            color: $clear-button-hover-text;
-        }
-
-        &:active,
-        &.k-state-active {
-            &::after {
-                background: transparent;
-            }
-        }
-
-        &.k-state-focused,
-        &.k-state-focused:active {
-            &::after {
-                background-color: currentColor;
-                opacity: $clear-button-focused-opacity;
-            }
-        }
-
-        &.k-state-disabled {
-            color: $button-disabled-text;
-        }
-    }
-}