@progress/kendo-theme-material 4.42.1-dev.4 → 4.43.1-dev.2

package/scss/tabstrip/_variables.scss

@@ -86,10 +86,10 @@ $tabstrip-indicator-color: $primary !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-x: $tabstrip-item-padding-x !default;
+$tabstrip-content-padding-x: map-get( $spacing, 4 ) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-y: $tabstrip-item-padding-y !default;
+$tabstrip-content-padding-y: map-get( $spacing, 4 ) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $tabstrip-content-border-width: 0px !default;

package/scss/textarea/_layout.scss

@@ -4,23 +4,9 @@
 
     // Textarea
     .k-textarea {
-        @include border-radius( $border-radius );
-        border-width: 0 0 1px;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-
-        // Focus state
-        &:focus,
-        // &:focus-within,
-        &.k-state-focus,
-        &.k-state-focused {
-            border-bottom-left-radius: $textarea-border-radius;
-            border-bottom-right-radius: $textarea-border-radius;
-        }
-        &:focus-within {
-            border-bottom-left-radius: $textarea-border-radius;
-            border-bottom-right-radius: $textarea-border-radius;
-        }
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
+        border-width: $input-border-width 0;
+        border-top-color: transparent !important; // sass-lint:disable-line no-important
     }
 
     // Textarea Floating label

package/scss/textarea/_variables.scss

@@ -7,11 +7,11 @@ $textarea-border-radius: $input-border-radius !default;
 $textarea-border-radius-sm: $input-border-radius-sm !default;
 $textarea-border-radius-lg: $input-border-radius-lg !default;
 
-$textarea-padding-x: 16px !default;
-$textarea-padding-y: 6px !default;
+$textarea-padding-x: $input-padding-x !default;
+$textarea-padding-y: $input-padding-y !default;
 $textarea-font-family: $input-font-family !default;
 $textarea-font-size: $input-font-size !default;
-$textarea-line-height: 24px !default;
+$textarea-line-height: $input-line-height !default;
 $textarea-line-height-em: $input-line-height-em !default;
 
 $textarea-padding-x-sm: $input-padding-x-sm !default;
@@ -30,20 +30,20 @@ $textarea-calc-height-lg: $input-calc-height-lg !default;
 
 $textarea-floating-label-padding: 3px !default;
 
-$textarea-bg: try-shade( $body-bg, .5 ) !default;
+$textarea-bg: $input-bg !default;
 $textarea-text: $input-text !default;
 $textarea-border: $input-border !default;
 $textarea-shadow: $input-shadow !default;
 
 $textarea-hover-text: $input-hovered-text !default;
-$textarea-hover-bg: try-shade( $body-bg, 1 ) !default;
-$textarea-hover-border: $input-border !default;
+$textarea-hover-bg: $input-hovered-bg !default;
+$textarea-hover-border: $input-hovered-border !default;
 $textarea-hover-shadow: $input-hovered-shadow !default;
 
 $textarea-focus-text: $input-focused-text !default;
 $textarea-focus-bg: $input-focused-bg !default;
 $textarea-focus-border: $input-focused-border !default;
-$textarea-focus-shadow: 0 0 0 1px $primary !default;
+$textarea-focus-shadow: $input-focused-shadow !default;
 
 $textarea-placeholder-text: $input-placeholder-text !default;
 $textarea-placeholder-opacity: $input-placeholder-opacity !default;
@@ -51,4 +51,4 @@ $textarea-placeholder-opacity: $input-placeholder-opacity !default;
 $textarea-selected-bg: $input-selected-bg !default;
 $textarea-selected-text: $input-selected-text !default;
 
-$textarea-invalid-focus-shadow: 0 0 0 1px $error !default;
+$textarea-invalid-focus-shadow: null !default;

package/scss/textbox/_layout.scss

@@ -4,12 +4,9 @@
 
     // Textbox
     .k-textbox {
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
         border-width: $input-border-width 0;
         border-top-color: transparent !important; // sass-lint:disable-line no-important
-
-        &:disabled {
-            border-style: dashed;
-        }
     }
 
 }

package/scss/timepicker/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+@import "../button/_index.scss";
+@import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../timeselector/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/timepicker/_layout.scss

@@ -0,0 +1,12 @@
+@import "../../modules/@progress/kendo-theme-default/scss/timepicker/_layout.scss";
+
+@include exports("timepicker/layout/material") {
+
+    // Time picker
+    .k-timepicker {
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
+        border-width: $input-border-width 0;
+        border-top-color: transparent !important; // sass-lint:disable-line no-important
+    }
+
+}

package/scss/timepicker/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/timepicker/_theme.scss";

package/scss/timepicker/_variables.scss

@@ -0,0 +1 @@
+// Time picker

package/scss/timeselector/_index.scss

@@ -0,0 +1,13 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../list/_index.scss";
+@import "../action-buttons/_index.scss";
+@import "../button/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/timeselector/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/timeselector/_layout.scss";

package/scss/timeselector/_theme.scss

@@ -0,0 +1,19 @@
+@import "../../modules/@progress/kendo-theme-default/scss/timeselector/_theme.scss";
+
+@include exports( "timeselector/theme/material" ) {
+
+    // Time selector
+    .k-timeselector {}
+
+
+    // Time list
+    .k-time-list {
+        .k-item:hover {
+            @include fill(
+                $list-item-hovered-text,
+                $list-item-hovered-bg
+            );
+        }
+    }
+
+}

package/scss/timeselector/_variables.scss

@@ -0,0 +1,32 @@
+// Time selector
+$time-selector-border-width: 1px !default;
+$time-selector-font-family: $font-family !default;
+$time-selector-font-size: $font-size !default;
+$time-selector-line-height: (20 / 14) !default;
+
+$time-selector-bg: $component-bg !default;
+$time-selector-text: $component-text !default;
+$time-selector-border: $component-border !default;
+
+$time-selector-header-padding-x: map-get( $spacing, 1 ) !default;
+$time-selector-header-padding-y: map-get( $spacing, 1 ) !default;
+$time-selector-header-border-width: 0px !default;
+
+$time-list-width: 4em !default;
+$time-list-height: 240px !default;
+
+$time-list-title-font-size: $font-size-sm !default;
+$time-list-title-line-height: 1.5 !default;
+$time-list-title-height: ( $time-list-title-font-size * $time-list-title-line-height) !default;
+$time-list-title-text: $subtle-text !default;
+$time-list-title-focus-text: $component-text !default;
+
+$time-list-item-padding-x: $list-item-padding-x !default;
+$time-list-item-padding-y: $list-item-padding-y !default;
+
+$time-list-highlight-border-width: 1px 0px !default;
+$time-list-highlight-height: calc( #{$time-selector-font-size * $time-selector-line-height} + #{ $time-list-item-padding-y * 2} ) !default;
+$time-list-highlight-bg: $component-bg !default;
+$time-list-highlight-border: $component-border !default;
+
+$time-list-focused-bg: null !default;

package/scss/utils/_border.scss

@@ -4,8 +4,7 @@ $utils-border-radius: (
     sm: .125rem,
     md: .25rem,
     lg: .375rem,
-    circle: 50%,
-    pill: 9999px
+    full: 9999px
 ) !default;
 
 @import "../../modules/@progress/kendo-theme-default/scss/utils/_border.scss";

package/modules/@progress/kendo-theme-default/scss/datetime/_layout.scss

@@ -1,483 +0,0 @@
-@include exports("datetime/layout") {
-
-    // Dateinput
-    .k-dateinput {
-        width: $input-default-width;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-dateinput-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: default;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            padding: 0;
-            width: if( $use-picker-select-width, $spinner-width, null );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-        .k-link {
-            padding: 0 $picker-select-padding-x;
-            min-width: $icon-size;
-            flex: 1 1 auto;
-            display: block;
-            overflow: hidden;
-            position: relative;
-
-            .k-icon {
-                position: absolute;
-                right: 50%;
-                transform: translateX(50%);
-            }
-        }
-        .k-link-increase .k-icon {
-            bottom: -$spinner-icon-offset;
-        }
-        .k-link-decrease .k-icon {
-            top: -$spinner-icon-offset;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-
-
-        // Nested dateinput
-        .k-picker-wrap & {
-            margin: 0 !important; // sass-lint:disable-line no-important
-            width: 100%;
-            flex: 1 1 auto;
-
-            .k-dateinput-wrap {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0;
-                box-shadow: none !important; // sass-lint:disable-line no-important
-            }
-
-            [dir="rtl"] &,
-            .k-rtl & {
-                .k-dateinput-wrap {
-                    @include border-right-radius-only( $input-border-radius );
-                }
-            }
-
-        }
-    }
-
-
-    // Datepicker / timepicker
-    .k-datepicker,
-    .k-timepicker {
-        width: $input-default-width;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        white-space: nowrap;
-        background: none;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Wrapper
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $input-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $picker-select-calc-size, null );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-    }
-
-
-    // Datetimepicker
-    .k-datetimepicker {
-        width: $input-default-width;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        background: none;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Wrappers
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-        .k-link {
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $button-inner-calc-size, null );
-            height: 100%;
-            border-width: 0;
-            border-style: solid;
-            border-color: inherit;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-    }
-
-    .k-datetime-container {
-
-        .k-datetime-wrap {
-            width: $datetime-width;
-            overflow: hidden;
-        }
-
-        .k-datetime-buttongroup {
-            padding: $button-padding-x;
-        }
-
-        .k-datetime-selector {
-            display: flex;
-            transition: transform .2s;
-        }
-
-        .k-datetime-calendar-wrap,
-        .k-datetime-time-wrap {
-            text-align: center;
-            flex: 0 0 $datetime-width;
-        }
-
-        .k-timeselector {
-            outline: none;
-        }
-
-        .k-time-list-container {
-            justify-content: center;
-        }
-
-        .k-time-tab {
-
-            .k-datetime-selector {
-                transform: translateX(-100%);
-            }
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-time-tab {
-
-                .k-datetime-selector {
-                    transform: translateX(100%);
-                }
-            }
-        }
-    }
-
-    // Infinite timepicker
-    .k-timeselector {}
-
-
-    // Header
-    .k-time-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 2 * $padding-y $padding-x * 2;
-        line-height: $timepicker-header-height;
-
-        .k-title {
-            font-weight: bold;
-        }
-
-        .k-time-now {
-            border-width: 0;
-            line-height: inherit;
-            cursor: pointer;
-        }
-    }
-
-    // Content
-    .k-time-list-wrapper {
-        display: inline-block;
-        overflow: hidden;
-        box-sizing: content-box;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: relative;
-        padding: $time-list-padding 0;
-        text-align: center;
-        min-width: $time-list-width;
-        height: $time-list-height;
-        flex: 1 1 auto;
-
-        .k-title {
-            display: block;
-            text-align: center;
-            font-size: $font-size-xs;
-            position: absolute;
-            text-transform: capitalize;
-            font-weight: bold;
-            min-width: 100%;
-            height: 1.5em;
-            line-height: 1.5em;
-            margin-top: -$time-list-padding;
-            z-index: 12;
-        }
-
-        &.k-state-focused {
-            &::before,
-            &::after {
-                display: block;
-                content: " ";
-                position: absolute;
-                width: 100%;
-                left: 0;
-                pointer-events: none;
-                height: calc(50% - 1em);
-                box-sizing: border-box;
-                border-width: 0;
-                border-style: solid;
-            }
-
-            &::before {
-                top: 0;
-            }
-
-            &::after {
-                bottom: 0;
-            }
-        }
-    }
-
-    .k-time-container {
-        position: absolute;
-        display: block;
-        overflow-x: hidden;
-        overflow-y: scroll;
-        line-height: $line-height;
-        left: 0;
-        right: 0;
-        top: $time-list-padding;
-        bottom: $time-list-padding;
-
-        @include hide-scrollbar("right");
-
-        > ul {
-            height: auto;
-            width: $time-list-width;
-            margin: auto;
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            @include hide-scrollbar("left");
-        }
-    }
-
-    .k-time-list-container {
-        display: flex;
-        position: relative;
-    }
-
-    .k-time-list {
-        position: absolute;
-        display: flex;
-        z-index: 10;
-        outline: 0;
-        bottom: 0;
-        right: 0;
-        left: 0;
-        top: 0;
-
-        &::before,
-        &::after {
-            display: block;
-            position: absolute;
-            content: " ";
-            height: 0;
-            line-height: 0;
-            z-index: 1;
-            width: 200%;
-            left: -50%;
-        }
-
-        &::before { top: 0; }
-        &::after { bottom: 0; }
-    }
-
-    .k-time-list .k-item {
-        padding: $time-list-item-padding-y $time-list-item-padding-x;
-        min-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
-        line-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
-    }
-
-    .k-time-highlight {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        transform: translateY(-50%);
-        width: 100%;
-        height: $button-inner-calc-size;
-        z-index: 1;
-        border-width: $time-highlight-size 0;
-        border-style: solid;
-        border-radius: .1px; // workaround for https://bugs.webkit.org/show_bug.cgi?id=175117
-    }
-
-    .k-time-container .k-scrollable-placeholder {
-        position: absolute;
-        width: 1px;
-        top: 0;
-        right: 0;
-    }
-
-    .k-time-separator {
-        width: 0;
-        height: 100%;
-        display: inline-flex;
-        align-self: center;
-        justify-content: center;
-        z-index: 11;
-    }
-}