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

package/scss/calendar/_theme.scss

@@ -195,8 +195,7 @@
                     transparent calc(100% - #{$calendar-range-gap})
                 );
 
-            .k-ie &,
-            .k-edge & {
+            .k-ie & {
                 background-image: none;
                 background-color: $calendar-range-bg;
             }
@@ -249,20 +248,3 @@
     }
 
 }
-
-
-
-
-@include exports( "daterangepicker/theme" ) {
-
-    // jQuery DateRangePicker
-    .k-daterangepicker {
-        // Invalid
-        &.k-state-invalid {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-            }
-        }
-    }
-
-}

package/scss/captcha/_layout.scss

@@ -10,6 +10,12 @@
         display: flex;
         flex-flow: column nowrap;
         gap: $captcha-gap;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Image

package/scss/card/_layout.scss

@@ -27,6 +27,12 @@
         overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
     .k-card > .k-card-inner {
         @include border-radius( $card-inner-border-radius );
@@ -201,32 +207,9 @@
     .k-card-actions-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
 
-    // Streched actions
-    .k-card-actions-stretched {
-        padding: 0;
-        gap: 0;
-
-        > .k-card-action {
-            flex: 1 1 auto;
-        }
-
-        .k-card & {
-            border-top-width: $card-actions-border-width;
-        }
-        .k-card-horizontal > & {
-            border-top-width: 0;
-            border-inline-start-width: $card-actions-border-width;
-        }
-        .k-card-vertical > & {
-            border-top-width: $card-actions-border-width;
-        }
-
-        &.k-card-actions-horizontal > .k-card-action + .k-card-action {
-            border-inline-start-width: $card-actions-border-width;
-        }
-        &.k-card-actions-vertical > .k-card-action + .k-card-action {
-            border-top-width: $card-actions-border-width;
-        }
+    // Stretched actions
+    .k-card-actions-stretched > * {
+        flex: 1 1 auto;
     }
 
 
@@ -348,6 +331,7 @@
         height: $card-callout-height;
         border-width: $card-border-width $card-border-width 0 0;
         border-style: solid;
+        box-sizing: border-box;
         position: absolute;
     }
 
@@ -396,33 +380,6 @@
 
 
 
-@include exports("card/layout/rtl") {
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        .k-card-actions-stretched {
-            .k-card-action + .k-card-action {
-                border-right-width: $card-actions-border-width;
-                border-left-width: 0;
-            }
-        }
-
-        .k-card-horizontal {
-            > .k-card-actions-stretched,
-            .k-card-actions-vertical {
-                border-right-width: $card-actions-border-width;
-                border-left-width: 0;
-            }
-        }
-
-    }
-
-}
-
-
-
-
 @include exports("card/layout/ie11") {
 
     .k-ie11 {

package/scss/card/_theme.scss

@@ -40,7 +40,8 @@
 
 
     // Separator
-    .k-card-separator {
+    .k-card-separator,
+    .k-card .k-separator {
         border-color: $card-border;
     }
 

package/scss/card/_variables.scss

@@ -38,15 +38,15 @@ $card-footer-text: $header-text !default;
 $card-footer-border: $header-border !default;
 
 $card-title-margin-bottom: map-get( $spacing, sm ) !default;
-$card-title-font-size: $font-size-md !default;
-$card-title-font-family: inherit !default;
-$card-title-line-height: normal !default;
+$card-title-font-size: $h5-font-size !default;
+$card-title-font-family: null !default;
+$card-title-line-height: 1.25 !default;
 $card-title-font-weight: $font-weight-normal !default;
 $card-title-letter-spacing: null !default;
 
 $card-subtitle-margin-bottom: map-get( $spacing, sm ) !default;
 $card-subtitle-font-size: $font-size-sm !default;
-$card-subtitle-font-family: inherit !default;
+$card-subtitle-font-family: null !default;
 $card-subtitle-line-height: normal !default;
 $card-subtitle-font-weight: $font-weight-normal !default;
 $card-subtitle-letter-spacing: null !default;

package/scss/chat/_layout.scss

@@ -266,21 +266,30 @@
 
     // Message box
     .k-message-box {
-        padding: $chat-message-box-padding-y $chat-message-box-padding-x;
+        width: 100%;
+        height: auto;
+        box-sizing: border-box;
         border-width: 1px 0 0;
         border-style: solid;
-        flex: 0 0 auto;
+        border-color: inherit !important; // sass-lint:disable-line no-important
+        border-radius: 0 !important; // sass-lint:disable-line no-important
+        flex: none;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
 
-        // Input
-        .k-input {
-            padding: 0;
+        &:focus,
+        &.k-state-focus,
+        &:focus-within {
+            outline: 0;
+            box-shadow: none;
         }
 
+        // Input
+        .k-input {}
+
         .k-button {
-            padding: 0;
+            border-width: 0;
             flex-shrink: 0;
 
             svg {
@@ -290,11 +299,6 @@
                 display: inline-block;
             }
 
-            &::before,
-            &::after {
-                display: none;
-            }
-
             .k-rtl &,
             &[dir="rtl"] {
                 transform: scaleX(-1);
@@ -411,11 +415,17 @@
 
     .k-chat-toolbar,
     .k-chat .k-toolbar-box {
+        padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
         width: 100%;
+        border-width: 1px 0 0;
         box-sizing: border-box;
+        flex: none;
         overflow: hidden;
         position: relative;
-        flex: 0 0 auto;
+
+        &::before {
+            display: none;
+        }
 
         .k-button-list {
             // Needed for native scrolling. Will uncoment when it's implemented.
@@ -426,26 +436,26 @@
             overflow: hidden;
             // overflow-x: auto;
             scroll-behavior: smooth;
-            padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
-
-            // fix for flex container disregarding the right padding
-            &::after {
-                content: "";
-                padding-right: $chat-toolbar-padding-x;
-            }
+        }
 
-            .k-button + .k-button {
-                margin-left: $chat-toolbar-spacing;
-                flex-shrink: 0;
-            }
+        .k-button {
+            flex: none;
         }
 
 
         .k-scroll-button {
+            // IMPORTANT: if we don't set padding, the browser will set for us
+            padding: 0 map-get( $spacing, 1 );
+            height: 100%;
+            aspect-ratio: auto;
             position: absolute;
             z-index: 2;
-            top: 50%;
-            transform: translateY(-50%);
+            top: 0;
+
+            .k-button-icon {
+                min-width: auto;
+                min-height: auto;
+            }
         }
         .k-scroll-button-left {
             left: 0;
@@ -454,13 +464,6 @@
             right: 0;
         }
 
-        .k-button {
-            border-width: 0;
-            color: inherit;
-            background: none;
-            flex-shrink: 0;
-        }
-
 
     }
 

package/scss/chat/_theme.scss

@@ -74,22 +74,6 @@
             );
         }
 
-
-        // Message box
-        .k-message-box {
-            @include fill(
-                $chat-message-box-text,
-                $chat-message-box-bg,
-                $chat-message-box-border
-            );
-        }
-        .k-message-box.k-state-focused {
-            @include box-shadow( $chat-message-box-focus-shadow );
-        }
-        .k-message-box .k-button:hover {
-            @include fill( $chat-message-box-button-hover-text );
-        }
-
     }
 
 
@@ -101,21 +85,6 @@
             $chat-toolbar-bg,
             $chat-toolbar-border
         );
-
-        .k-button:hover {
-            @include fill(
-                $chat-toolbar-box-button-hover-text,
-                $chat-toolbar-box-button-hover-bg
-            );
-        }
-
-        .k-scroll-button {
-            @include fill( $bg: $chat-bg );
-            @include box-shadow( $chat-toolbar-box-scroll-button-shadow );
-        }
-        .k-scroll-button:hover {
-            @include fill( $bg: $chat-bg );
-        }
     }
 
 }

package/scss/chat/_variables.scss

@@ -32,12 +32,9 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-message-box-padding-x: $chat-padding-x !default;
-$chat-message-box-padding-y: 10px !default;
-
-$chat-toolbar-padding-x: $chat-padding-x !default;
-$chat-toolbar-padding-y: 10px !default;
-$chat-toolbar-spacing: 20px !default;
+$chat-toolbar-padding-x: $toolbar-padding-x !default;
+$chat-toolbar-padding-y: $toolbar-padding-y !default;
+$chat-toolbar-spacing: $toolbar-spacing !default;
 $chat-toolbar-bg: $toolbar-bg !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;
@@ -73,15 +70,3 @@ $chat-quick-reply-border: $primary !default;
 $chat-quick-reply-hover-bg: $primary !default;
 $chat-quick-reply-hover-text: $primary-contrast !default;
 $chat-quick-reply-hover-border: $primary !default;
-
-$chat-message-box-bg: $kendo-input-bg !default;
-$chat-message-box-text: $kendo-input-text !default;
-$chat-message-box-border: inherit !default;
-$chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
-
-$chat-message-box-button-hover-text: $primary !default;
-
-$chat-toolbar-box-button-hover-text: $primary !default;
-$chat-toolbar-box-button-hover-bg: none !default;
-
-$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;

package/scss/checkbox/_index.scss

@@ -2,6 +2,8 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
+@import "../list/_variables.scss";
 
 
 // Component