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

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;
@@ -54,7 +54,7 @@ $card-subtitle-text: $subtle-text !default;
 
 $card-img-max-width: 100px !default;
 $card-avatar-size: 45px !default;
-$card-avatar-spacing:  $card-header-padding-x !default;
+$card-avatar-spacing: $card-header-padding-x !default;
 
 $card-actions-padding-x: map-get( $spacing, 2 ) !default;
 $card-actions-padding-y: map-get( $spacing, 2 ) !default;
@@ -62,7 +62,7 @@ $card-actions-border-width: 1px !default;
 $card-actions-gap: map-get( $spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 0px !default;
-$card-deck-scroll-button-offset: -$button-border-width !default;
+$card-deck-scroll-button-offset: -$kendo-button-border-width !default;
 
 $card-callout-width: 20px !default;
 $card-callout-height: 20px !default;

package/scss/chat/_layout.scss

@@ -246,8 +246,7 @@
         padding-left: $chat-message-list-padding-y;
         padding-right: $chat-message-list-padding-y;
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         flex: 0 0 auto;
         overflow-x: auto;
         overflow-y: hidden;
@@ -267,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 {
@@ -291,11 +299,6 @@
                 display: inline-block;
             }
 
-            &::before,
-            &::after {
-                display: none;
-            }
-
             .k-rtl &,
             &[dir="rtl"] {
                 transform: scaleX(-1);
@@ -347,8 +350,7 @@
     // Deck
     .k-chat .k-card-deck .k-card-wrap {
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         align-items: stretch;
         flex: 0 0 auto;
         padding-bottom: 5px; // accommodate for focused box shadow on OSX
@@ -377,8 +379,7 @@
         padding: 0;
         border-radius: 50px;
         display: inline-flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
 
         span {
             width: $chat-typing-indicator-dot-size;
@@ -414,42 +415,47 @@
 
     .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.
             // margin-bottom: -20px;
             // padding-bottom: 20px;
             display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
+            flex-flow: row nowrap;
             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;
@@ -458,13 +464,6 @@
             right: 0;
         }
 
-        .k-button {
-            border-width: 0;
-            color: inherit;
-            background: none;
-            flex-shrink: 0;
-        }
-
 
     }
 

package/scss/chat/_theme.scss

@@ -14,7 +14,7 @@
             @include fill(
                 $chat-timestamp-text,
                 $chat-timestamp-bg
-            )
+            );
         }
         .k-author {
             font-weight: bold;
@@ -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: $input-bg !default;
-$chat-message-box-text: $input-text !default;
-$chat-message-box-border: inherit !default;
-$chat-message-box-focus-shadow: 0 0 40px rgba( $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

package/scss/checkbox/_layout.scss

@@ -2,48 +2,33 @@
 
     // Checkbox
     .k-checkbox {
-        @include border-radius( $checkbox-radius );
         margin: 0;
         padding: 0;
-        width: $checkbox-size;
-        height: $checkbox-size;
         line-height: initial;
-        border-width: $checkbox-border-width;
+        border-width: $kendo-checkbox-border-width;
         border-style: solid;
         outline: 0;
-        box-sizing: border-box;
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;
         display: inline-block;
+        flex: none;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
         -webkit-appearance: none;
     }
 
+
     // Checkbox indicator
     .k-checkbox::before {
-        @if $checkbox-icon-type == "glyph" {
-            content: $checkbox-checked-glyph;
-            width: $checkbox-glyph-size;
-            height: $checkbox-glyph-size;
-            font-size: $checkbox-glyph-size;
-            font-family: $checkbox-glyph-font-family;
+        @if $kendo-checkbox-indicator-type == "glyph" {
+            content: $kendo-checkbox-checked-glyph;
+            width: 1em;
+            height: 1em;
+            font-family: $kendo-checkbox-glyph-font-family;
             line-height: 1;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-
-        @if $checkbox-icon-type == "marker" {
-            content: "";
-            width: $checkbox-marker-checked-width;
-            height: $checkbox-marker-checked-height;
-            background-color: currentColor;
-            transform: scale(0) translate(-50%, -50%);
+            transform: translate(-50%, -50%) scale(0);
             overflow: hidden;
             position: absolute;
             top: 50%;
@@ -55,19 +40,13 @@
     // Checked state
     .k-checkbox:checked,
     .k-checkbox.k-checked {
-        @if $checkbox-icon-type == "image" {
-            background-image: $checkbox-checked-image;
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: $kendo-checkbox-checked-image;
         }
 
-        @if $checkbox-icon-type == "glyph" {
+        @if $kendo-checkbox-indicator-type == "glyph" {
             &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $checkbox-icon-type == "marker" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
+                transform: translate(-50%, -50%) scale(1);
             }
         }
     }
@@ -75,23 +54,14 @@
 
     // Indeterminate state
     .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate,
-    .k-checkbox.k-state-indeterminate {
-        @if $checkbox-icon-type == "image" {
-            background-image: $checkbox-indeterminate-image;
-        }
-
-        @if $checkbox-icon-type == "glyph" {
-            &::before {
-                content: $checkbox-indeterminate-glyph;
-                transform: scale(1) translate(-50%, -50%);
-            }
+    .k-checkbox.k-indeterminate {
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: $kendo-checkbox-indeterminate-image;
         }
 
-        @if $checkbox-icon-type == "marker" {
+        @if $kendo-checkbox-indicator-type == "glyph" {
             &::before {
-                width: $checkbox-maker-indeterminate-width;
-                height: $checkbox-marker-indeterminate-height;
+                content: $kendo-checkbox-indeterminate-glyph;
                 transform: scale(1) translate(-50%, -50%);
             }
         }
@@ -100,79 +70,62 @@
 
     // Disabled state
     .k-checkbox:disabled,
-    .k-checkbox.k-disabled,
-    .k-checkbox:disabled + .k-checkbox-label,
-    .k-checkbox.k-disabled + .k-checkbox-label {
+    .k-checkbox.k-disabled {
         @include disabled( $disabled-styling );
     }
 
+
+    // Checkbox wrap
+    .k-checkbox-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+        align-self: flex-start;
+        vertical-align: middle;
+        position: relative;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+
     // Checkbox label
     .k-checkbox-label {
         margin: 0;
         padding: 0;
-        line-height: $checkbox-line-height;
         display: inline-flex;
         align-items: flex-start;
+        gap: $kendo-checkbox-label-margin-x;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
 
-        .k-label {
-            cursor: pointer;
-        }
-
         .k-ripple {
-            top: $checkbox-size / 2;
-            left: $checkbox-size / 2;
-            right: auto;
-            bottom: auto;
-            width: $checkbox-size * 5 / 2;
-            height: $checkbox-size * 5 / 2;
-            transform: translate(-50%, -50%);
-            border-radius: 50%;
-
             // Hide ripple temporarily
             visibility: hidden !important; // sass-lint:disable-line no-important
         }
-
-        .k-ripple-blob {
-            // sass-lint:disable-block no-important
-            // use !important until ripple can apply these styles from the script
-            top: 50% !important;
-            left: 50% !important;
-            width: 200% !important;
-            height: 200% !important;
-        }
-    }
-    .k-checkbox + .k-checkbox-label {
-        display: inline;
     }
+    .k-checkbox + .k-label,
+    .k-checkbox-wrap + .k-label,
     .k-checkbox + .k-checkbox-label,
-    .k-checkbox-label + .k-checkbox {
-        margin-left: $checkbox-label-margin-x;
-    }
-    .k-checkbox-label > .k-checkbox {
-        margin-right: $checkbox-label-margin-x;
-        flex-shrink: 0;
-    }
-    kendo-label.k-checkbox-label > .k-checkbox:last-child {
-        margin-right: 0;
-    }
-    kendo-label.k-checkbox-label > .k-label:first-child {
-        margin-right: $checkbox-label-margin-x;
-    }
-    kendo-label.k-checkbox-label > .k-label {
+    .k-checkbox-wrap + .k-checkbox-label {
         display: inline;
+        margin-inline-start: $kendo-checkbox-label-margin-x;
     }
 
 
     // Empty label
     .k-checkbox-label:empty {
-        display: none;
+        display: none !important; // sass-lint:disable-line no-important
     }
-
-
-    // Label with no text
     .k-checkbox-label.k-no-text {
         min-width: 1px;
     }
@@ -180,73 +133,56 @@
 
     // Checkbox list
     .k-checkbox-list {
-        margin: $checkbox-list-margin;
-        padding: $checkbox-list-padding;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
         list-style: none;
-
-        .k-checkbox-item {
-            padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
-        }
     }
+    .k-checkbox-item,
+    .k-checkbox-list-item {
+        padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: map-get( $spacing, 1 );
 
-    .k-list-horizontal {
-        .k-checkbox-item {
-            display: inline-block;
-            margin: 0 $checkbox-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
+        .k-checkbox-label {
+            margin: 0;
         }
     }
-
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        .k-checkbox + .k-checkbox-label,
-        .k-checkbox-label + .k-checkbox {
-            margin-left: 0;
-            margin-right: $checkbox-label-margin-x;
-        }
-        .k-checkbox-label > .k-checkbox {
-            margin-right: 0;
-            margin-left: $checkbox-label-margin-x;
-        }
-        kendo-label.k-checkbox-label > .k-checkbox:last-child {
-            margin-left: 0;
-        }
-        kendo-label.k-checkbox-label > .k-label:first-child {
-            margin-right: 0;
-            margin-left: $checkbox-label-margin-x;
-        }
-
-        .k-list-horizontal {
-            .k-checkbox-item {
-                margin-right: 0;
-                margin-left: $checkbox-list-horizontal-item-margin-x;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
+    .k-checkbox-list-horizontal,
+    .k-checkbox-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-checkbox-list-spacing;
     }
 
+
+    // Ripple
     .k-ripple-container {
         .k-checkbox::after {
             content: "";
             display: block;
             position: absolute;
-            left: 0;
-            top: 0;
-            width: $checkbox-ripple-size;
-            height: $checkbox-ripple-size;
-            margin-left: $checkbox-ripple-margin;
-            margin-top: $checkbox-ripple-margin;
+            left: 50%;
+            top: 50%;
             border-radius: 100%;
-            z-index: 1;
-            transform: scale(0);
+            z-index: -1;
+            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
+            transform: translate(-50%, -50%) scale(0);
+            transform-origin: center center;
+        }
+
+        .k-checkbox:focus,
+        .k-checkbox.k-focus {
+            box-shadow: none !important; // sass-lint:disable-line no-important
+
+            &::after {
+                transform: translate(-50%, -50%) scale(1);
+            }
         }
 
         .k-checkbox:disabled::after,
@@ -255,18 +191,27 @@
         }
     }
 
-}
-
 
+    // Checkbox size
+    @each $size, $size-props in $kendo-checkbox-sizes {
+        $_size: map-get( $size-props, size );
+        $_glyph-size: map-get( $size-props, glyph-size );
+        $_ripple-size: map-get( $size-props, ripple-size );
 
+        .k-checkbox-#{$size} {
+            width: $_size;
+            height: $_size;
 
-@include exports( "checkbox/layout/edge" ) {
-
-    .k-checkbox::-ms-check {
-        border-width: 1px;
-        border-color: inherit;
-        color: inherit;
-        background-color: inherit;
+            &::before {
+                font-size: $_glyph-size;
+            }
+        }
+        .k-ripple-container {
+            .k-checkbox-#{size}::after {
+                width: $_ripple-size;
+                height: $_ripple-size;
+            }
+        }
     }
 
 }