@progress/kendo-theme-default 4.42.1-dev.4 → 5.0.0-alpha.3

package/scss/textarea/_theme.scss

@@ -1,71 +1,6 @@
 @include exports("textarea/theme") {
 
     // Textarea
-    .k-textarea {
-        @include fill(
-            $textarea-text,
-            $textarea-bg,
-            $textarea-border
-        );
-
-        // Selection
-        &::selection,
-        .k-input::selection {
-            @include fill (
-                $color: $textarea-selected-text, // $primary-contrast,
-                $bg: $textarea-selected-bg // $primary
-            );
-        }
-
-        // Hovered
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $textarea-hover-text,
-                $textarea-hover-bg,
-                $textarea-hover-border
-            );
-        }
-
-        // Focused
-        &:focus,
-        // &:focus-within,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include fill(
-                $textarea-focus-text,
-                $textarea-focus-bg,
-                $textarea-focus-border
-            );
-            @include box-shadow( $textarea-focus-shadow );
-        }
-        &:focus-within {
-            @include fill(
-                $textarea-focus-text,
-                $textarea-focus-bg,
-                $textarea-focus-border
-            );
-            @include box-shadow( $textarea-focus-shadow );
-        }
-
-        // Invalid
-        &.k-invalid,
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            border-color: $invalid-border;
-
-            &:focus,
-            // &:focus-within,
-            &.k-state-focus,
-            &.k-state-focused {
-                @include box-shadow( $textarea-invalid-focus-shadow );
-            }
-
-            &:focus-within {
-                @include box-shadow( $textarea-invalid-focus-shadow );
-            }
-        }
-    }
+    .k-textarea {}
 
 }

package/scss/textarea/_variables.scss

@@ -1,54 +1 @@
 // Textarea
-$textarea-default-width: 18em !default;
-
-$textarea-border-width: $input-border-width !default;
-$textarea-border-height: $input-border-height !default;
-$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: $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: $input-line-height !default;
-$textarea-line-height-em: $input-line-height-em !default;
-
-$textarea-padding-x-sm: $input-padding-x-sm !default;
-$textarea-padding-y-sm: $input-padding-y-sm !default;
-$textarea-font-size-sm: $input-font-size-sm !default;
-$textarea-line-height-sm: $input-line-height-sm !default;
-
-$textarea-padding-x-lg: $input-padding-x-lg !default;
-$textarea-padding-y-lg: $input-padding-y-lg !default;
-$textarea-font-size-lg: $input-font-size-lg !default;
-$textarea-line-height-lg: $input-line-height-lg !default;
-
-$textarea-calc-height: $input-calc-height !default;
-$textarea-calc-height-sm: $input-calc-height-sm !default;
-$textarea-calc-height-lg: $input-calc-height-lg !default;
-
-$textarea-floating-label-padding: null !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: $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: $input-focused-shadow !default;
-
-$textarea-placeholder-text: $input-placeholder-text !default;
-$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: $invalid-shadow !default;

package/scss/textbox/_layout.scss

@@ -1,78 +1,6 @@
 @include exports( "textbox/layout" ) {
 
     // Textbox
-    .k-textbox {
-        @include border-radius( $input-border-radius );
-        margin: 0;
-        padding: 0;
-        width: $input-default-width;
-        height: $input-calc-height;
-        border-width: $input-border-width;
-        border-style: solid;
-        outline: 0;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        box-sizing: border-box;
-        // Targets https://github.com/telerik/kendo-react/issues/638.
-        box-shadow: none;
-        background: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        vertical-align: middle;
-        position: relative;
-        -webkit-appearance: none;
-
-        // Hide clear icon
-        &::-ms-clear { display: none; }
-
-        // Placeholder text
-        &::placeholder {
-            color: $input-placeholder-text;
-            opacity: $input-placeholder-opacity;
-            user-select: none;
-        }
-        &:-ms-input-placeholder {
-            color: $input-placeholder-text;
-        }
-
-        .k-input {}
-
-        .k-button-clear {
-            width: $button-inner-calc-size;
-            height: $button-inner-calc-size;
-            border: 0;
-        }
-
-        .k-textbox-separator {
-            margin: 0;
-            width: 0;
-            height: $icon-size;
-            border-width: 0 0 0 1px;
-            border-style: solid;
-        }
-
-        // Disabled state
-        &:disabled,
-        &[disabled],
-        &.k-state-disabled {
-            @include disabled( $disabled-styling );
-
-            // Disabled selection
-            &::selection {
-                @include fill (
-                    $color: $input-text,
-                    $bg: transparent
-                );
-            }
-        }
-    }
-
-
-    // Textbox
-    input.k-textbox {
-        padding: $input-padding-y $input-padding-x;
-    }
+    .k-textbox {}
 
 }

package/scss/textbox/_theme.scss

@@ -1,74 +1,5 @@
 @include exports("textbox/theme") {
 
     // Textbox
-    .k-textbox {
-        @include fill(
-            $input-text,
-            $input-bg,
-            $input-border
-        );
-
-        // Selection
-        &::selection,
-        .k-input::selection {
-            @include fill (
-                $color: $input-selected-text, // $primary-contrast,
-                $bg: $input-selected-bg // $primary
-            );
-        }
-
-        .k-textbox-separator {
-            border-color: $input-separator-color;
-            opacity: $input-separator-opacity;
-        }
-
-        // Focused
-        &:focus,
-        // &:focus-within,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include fill (
-                $input-focused-text,
-                $input-focused-bg,
-                $input-focused-border
-            );
-            @include box-shadow( $input-focused-shadow );
-        }
-        &:focus-within {
-            @include fill (
-                $input-focused-text,
-                $input-focused-bg,
-                $input-focused-border
-            );
-            @include box-shadow( $input-focused-shadow );
-        }
-
-        // Hovered
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $input-hovered-text,
-                $input-hovered-bg,
-                $input-hovered-border
-            );
-        }
-
-        // Invalid
-        &.k-invalid,
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
-
-            &:focus,
-            // &:focus-within,
-            &.k-state-focus,
-            &.k-state-focused {
-                @include box-shadow($invalid-shadow);
-            }
-            &:focus-within {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
+    .k-textbox {}
 }

package/scss/textbox/_variables.scss

@@ -1,2 +1 @@
-// Textboxe
-$textbox-line-height: $input-line-height !default;
+// Textbox

package/scss/timeline/_variables.scss

@@ -13,8 +13,8 @@ $timeline-mobile-spacing-y: 16px !default;
 $timeline-track-arrow-width: 30px !default;
 $timeline-track-arrow-height: 30px !default;
 
-$timeline-track-arrow-disabled-bg: true-mix($button-bg, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-text: true-mix($button-text, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-bg: true-mix($kendo-button-bg, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
 $timeline-track-arrow-disabled-border: true-mix(#000000, $body-bg, 4.8%) !default;
 
 $timeline-track-size: 6px !default;
@@ -24,16 +24,16 @@ $timeline-track-margin-bottom: 16px !default;
 $timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
 $timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
 $timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
-$timeline-track-bg: $button-bg !default;
-$timeline-track-border-color: $button-border !default;
+$timeline-track-bg: $kendo-button-bg !default;
+$timeline-track-border-color: $kendo-button-border !default;
 
 $timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($primary, .4) !default;
 
 $timeline-track-event-offset: 36px !default;
 
-$timeline-flag-padding-x: $button-padding-x !default;
-$timeline-flag-padding-y: $button-padding-y !default;
-$timeline-flag-line-height: $button-line-height !default;
+$timeline-flag-padding-x: $kendo-button-padding-x !default;
+$timeline-flag-padding-y: $kendo-button-padding-y !default;
+$timeline-flag-line-height: $kendo-button-line-height !default;
 $timeline-flag-min-width: 80px !default;
 $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;

package/scss/timepicker/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../input/_index.scss";
+@import "../floating-label/_index.scss";
+@import "../popup/_index.scss";
+@import "../icons/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/timepicker/_layout.scss

@@ -0,0 +1,6 @@
+@include exports("timepicker/layout") {
+
+    // Time picker
+    .k-timepicker {}
+
+}

package/scss/timepicker/_theme.scss

@@ -0,0 +1,6 @@
+@include exports("timepicker/theme") {
+
+    // Time picker
+    .k-timepicker {}
+
+}

package/scss/timepicker/_variables.scss

@@ -0,0 +1 @@
+// Timepicker

package/scss/toolbar/_layout.scss

@@ -25,7 +25,7 @@
         // Remove once we decide to not size empty containers
         &::before {
             content: "";
-            height: $button-calc-size;
+            height: $kendo-button-calc-size;
             margin-inline-start: -$toolbar-spacing;
         }
 
@@ -143,7 +143,7 @@
             flex-direction: column;
 
             .k-button {
-                margin: if( $button-border-width == 0, null, 0);
+                margin: if( $kendo-button-border-width == 0, null, 0);
             }
         }
 

package/scss/toolbar/_variables.scss

@@ -10,7 +10,7 @@ $toolbar-border-width: 1px !default;
 $toolbar-border-radius: null !default;
 $toolbar-spacing: $toolbar-padding-x !default;
 
-$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
 
 $toolbar-font-family: $font-family !default;
 $toolbar-font-size: $font-size !default;

package/scss/treeview/_variables.scss

@@ -29,7 +29,7 @@ $treeview-item-selected-gradient: null !default;
 $treeview-item-focused-shadow: $focused-shadow !default;
 $treeview-item-selected-focused-shadow: null !default;
 
-$treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{$checkbox-size} + #{$treeview-indent} ) !default;
+$treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{map-get( $kendo-checkbox-sizes, "md" )} + #{$treeview-indent} ) !default;
 $treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$treeview-indent}) ) !default;
 $treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;
 

package/scss/window/_layout.scss

@@ -143,17 +143,6 @@
         overflow: hidden;
     }
 
-
-    // Prompt
-    .k-prompt-container {
-
-        > .k-textbox,
-        > .k-textarea {
-            width: 100%;
-        }
-
-    }
-
     // Resize Handles
     .k-window {
         .k-resize-n { top: 0; }