@progress/kendo-theme-default 5.0.0-next.2 → 5.0.0

package/scss/taskboard/_layout.scss

@@ -10,6 +10,12 @@
         display: flex;
         flex-direction: column;
         position: relative;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Toolbar
@@ -78,7 +84,6 @@
     .k-taskboard-column-cards {
         padding: $taskboard-column-cards-padding-y $taskboard-column-cards-padding-x;
         min-height: 100%;
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         gap: $taskboard-column-cards-gap 0;
@@ -86,7 +91,8 @@
 
     // Edit/New Columns
     .k-taskboard-column-new {
-        max-height: $taskboard-column-new-calc-height;
+        // TODO: we need better way
+        // max-height: $taskboard-column-new-calc-height;
     }
 
     .k-taskboard-column-new,
@@ -98,10 +104,6 @@
         .k-taskboard-column-header-text {
             flex: 1 1 100%;
         }
-
-        .k-textbox {
-            width: 100%;
-        }
     }
 
     // Preview/Edit Pane
@@ -110,7 +112,6 @@
         width: $taskboard-pane-width;
         border-width: $taskboard-pane-border-width;
         border-style: solid;
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: absolute;

package/scss/taskboard/_theme.scss

@@ -46,7 +46,7 @@
             $taskboard-pane-text,
             $taskboard-pane-bg,
             $taskboard-pane-border
-        )
+        );
     }
 
     .k-taskboard-pane-header {

package/scss/taskboard/_variables.scss

@@ -46,8 +46,6 @@ $taskboard-column-cards-padding-y: null !default;
 $taskboard-column-cards-padding-x: null !default;
 $taskboard-column-cards-gap: ( $taskboard-spacer / 2 ) !default;
 
-$taskboard-column-new-calc-height: calc( #{$input-calc-height} + #{$taskboard-column-header-padding-y * 2} ) !default;
-
 $taskboard-pane-width: $taskboard-column-width !default;
 $taskboard-pane-padding-y: null !default;
 $taskboard-pane-padding-x: null !default;

package/scss/textarea/_layout.scss

@@ -2,95 +2,7 @@
 
     // Textarea
     .k-textarea {
-        @include border-radius( $textarea-border-radius );
-        margin: 0;
-        padding: 0;
-        width: $textarea-default-width;
-        border-width: $textarea-border-width;
-        border-style: solid;
-        outline: 0;
-        font-family: $textarea-font-family;
-        font-size: $textarea-font-size;
-        line-height: $textarea-line-height;
-        box-sizing: border-box;
-        // Targets https://github.com/telerik/kendo-react/issues/638.
-        box-shadow: none;
-        background: none;
-        display: inline-flex;
-        flex-wrap: nowrap;
-        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;
-        }
-
-        > .k-input {
-            padding: $textarea-padding-y $textarea-padding-x;
-            height: auto;
-            min-height: $textarea-calc-height;
-            overflow-y: auto;
-            resize: vertical;
-        }
-
-        // Disabled state
-        &:disabled,
-        &[disabled],
-        &.k-state-disabled {
-            @include disabled( $disabled-styling );
-
-            // Disabled selection
-            &::selection {
-                @include fill (
-                    $color: $input-text,
-                    $bg: transparent
-                    // $bg: rgba( contrast-wcag( $input-bg ), .1 )
-                );
-            }
-        }
-    }
-
-    .k-textarea-suffix {
-        flex-shrink: 0;
-    }
-
-    // Textarea old rendering
-    textarea.k-textarea {
-        padding: $textarea-padding-y $textarea-padding-x;
-        min-height: $textarea-calc-height;
-        display: inline-block;
-        resize: both;
+        display: flex;
     }
 
-    // Floating label
-    .k-textbox-container,
-    .k-floating-label-container {
-        > .k-textarea {
-            flex: 1 1 auto;
-            width: 100%;
-        }
-    }
-}
-
-
-
-
-@include exports("textarea/layout/IE") {
-    // TODO: Remove once we drop IE support
-
-    .k-ie {
-        .k-textarea {
-            :-ms-input-placeholder,
-            &:-ms-input-placeholder {
-                color: $input-placeholder-text;
-            }
-        }
-    }
 }

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/_layout.scss

@@ -11,6 +11,14 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+
         ul {
             margin: 0;
             padding: 0;
@@ -28,7 +36,6 @@
             line-height: $timeline-flag-line-height;
             min-width: $timeline-flag-min-width;
             max-width: $timeline-flag-max-width;
-            box-sizing: border-box;
             position: relative;
             z-index: 1;
         }
@@ -108,12 +115,11 @@
         margin: $timeline-spacing-y 0;
         width: 100%;
         position: relative;
-        box-sizing: border-box;
         border: 0;
     }
 
     .k-timeline-vertical,
-    .k-timeline-horizontal .k-timeline-track-wrap  {
+    .k-timeline-horizontal .k-timeline-track-wrap {
         &::after {
             content: "";
             position: absolute;
@@ -130,7 +136,7 @@
             padding-left: $timeline-vertical-padding-calc;
         }
 
-        &::after  {
+        &::after {
             height: 100%;
             width: $timeline-track-size;
             transform: translateX(-50%);
@@ -218,7 +224,7 @@
         &.k-timeline-alternating {
             padding-left: $timeline-spacing-x;
 
-            &::after  {
+            &::after {
                 left: 50%;
             }
 
@@ -298,12 +304,10 @@
 
         .k-timeline-card {
             height: 100%;
-            box-sizing: border-box;
         }
 
         .k-card {
             max-height: 100%;
-            box-sizing: border-box;
         }
 
         .k-timeline-events-list {
@@ -348,7 +352,7 @@
                 }
             }
 
-            .k-timeline-flag  {
+            .k-timeline-flag {
                 margin-bottom: $timeline-flag-margin-bottom-calc;
                 position: relative;
                 min-width: $timeline-horizontal-flag-min-width;

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 "../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,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 @@
+// 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";