@progress/kendo-theme-default 4.41.3-dev.3 → 4.42.1-dev.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "4.41.3-dev.3",
+  "version": "4.42.1-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "dart:flat": "gulp dart:flat",
     "prepublishOnly": "echo 'no prebublish for default theme'"
   },
-  "gitHead": "fa5c9603df4ce625274a6478de659303b4d7b871"
+  "gitHead": "0c0e482d04f4474619507a96d33f9e127c116cd1"
 }

package/scss/action-buttons/_layout.scss

@@ -43,7 +43,7 @@
         }
     }
 
-    // Legacy align
+    // Actions align
     .k-actions-start {
         justify-content: flex-start;
     }
@@ -57,4 +57,13 @@
         flex: 1 0 0%;
     }
 
+    // Actions orientation
+    .k-actions-horizontal {
+        width: 100%;
+        flex-flow: row nowrap;
+    }
+    .k-actions-vertical {
+        flex-flow: column nowrap;
+    }
+
 }

package/scss/all.scss

@@ -49,6 +49,10 @@
 
 // Inputs
 @import "autocomplete/_index.scss";
+@import "color-preview/_index.scss";
+@import "colorpalette/_index.scss";
+@import "colorgradient/_index.scss";
+@import "coloreditor/_index.scss";
 @import "colorpicker/_index.scss";
 @import "combobox/_index.scss";
 @import "datetime/_index.scss";

package/scss/autocomplete/_layout.scss

@@ -33,26 +33,6 @@
             height: $input-icon-height;
         }
 
-
-        // Clear value
-        .k-clear-value {
-            visibility: hidden;
-        }
-        &:hover,
-        // &:focus-within,
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-        &:focus-within {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-
     }
 
 

package/scss/button/_index.scss

@@ -2,9 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../badge/_index.scss";
 @import "../icons/_index.scss";
+@import "../typography/_variables.scss";
 
 
 // Component

package/scss/card/_layout.scss

@@ -187,13 +187,6 @@
         flex-shrink: 0;
         flex-basis: auto;
         gap: $card-actions-gap;
-
-        > .k-button {
-            padding-left: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
-            padding-right: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
-            max-width: 100%;
-            white-space: normal;
-        }
     }
 
 
@@ -208,40 +201,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-button,
-        > .k-card-action {
-            flex: 1 1 auto;
-        }
-
-        // TODO: refactor once we have button size
-        .k-button {
-            @include border-radius( 0 );
-            padding-top: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
-            padding-bottom: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
-        }
-
-        .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;
     }
 
 
@@ -367,6 +329,7 @@
         height: $card-callout-height;
         border-width: $card-border-width $card-border-width 0 0;
         border-style: solid;
+        box-sizing: border-box;
         position: absolute;
     }
 
@@ -415,33 +378,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/chat/_layout.scss

@@ -266,14 +266,24 @@
 
     // Message box
     .k-message-box {
+        width: 100%;
+        height: auto;
         padding: $chat-message-box-padding-y $chat-message-box-padding-x;
+        box-sizing: border-box;
         border-width: 1px 0 0;
         border-style: solid;
-        flex: 0 0 auto;
+        flex: none;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
 
+        &:focus,
+        &.k-state-focus,
+        &:focus-within {
+            outline: 0;
+            box-shadow: none;
+        }
+
         // Input
         .k-input {
             padding: 0;
@@ -411,11 +421,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,18 +442,13 @@
             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 {
+            border-color: transparent;
+            color: inherit;
+            background: none;
+            flex: none;
         }
 
 
@@ -454,13 +465,6 @@
             right: 0;
         }
 
-        .k-button {
-            border-width: 0;
-            color: inherit;
-            background: none;
-            flex-shrink: 0;
-        }
-
 
     }
 

package/scss/chat/_variables.scss

@@ -32,12 +32,12 @@ $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-message-box-padding-x: $input-padding-x !default;
+$chat-message-box-padding-y: $input-padding-y !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;

package/scss/checkbox/_theme.scss

@@ -11,7 +11,7 @@
 
 
     // Hover state
-    .k-checkbox:hover
+    .k-checkbox:hover,
     .k-checkbox.k-state-hover {
         @include fill(
             $checkbox-hovered-text,

package/scss/color-preview/_index.scss

@@ -0,0 +1,11 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+
+
+// Component
+@import "../colorgradient/images/alpha-slider-bgr.scss";
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/color-preview/_layout.scss

@@ -0,0 +1,34 @@
+@include exports("color-preview/layout") {
+
+    // Color Preview
+    .k-color-preview {
+        border-width: $color-preview-border-width;
+        border-radius: $color-preview-border-radius;
+        border-style: solid;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
+    }
+    .k-color-preview::before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        display: block;
+        position: relative;
+        z-index: -1;
+    }
+
+    // No Color
+    .k-no-color::after {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+}

package/scss/color-preview/_theme.scss

@@ -0,0 +1,31 @@
+@include exports("color-preview/theme") {
+
+    // Color Preview
+    .k-color-preview {
+        @include fill(
+            $color-preview-text,
+            $color-preview-bg,
+            $color-preview-border
+        );
+
+        &::before {
+            background: url(map-get($data-uris, "alpha-slider-bgr.png"));
+            background-size: contain;
+            background-position: 0;
+        }
+
+        &:hover,
+        &.k-state-hover,
+        &.k-hover {
+            @include fill( $border: $color-preview-hover-border );
+        }
+    }
+
+    // No Color
+    .k-no-color::after {
+        background-color: $color-preview-no-color-bg;
+        background-image: $color-preview-no-color-image;
+        background-size: 100% 100%;
+    }
+
+}

package/scss/color-preview/_variables.scss

@@ -0,0 +1,13 @@
+// Color Preview
+$color-preview-border-radius: $border-radius !default;
+$color-preview-border-width: 1px !default;
+$color-preview-bg: null !default;
+$color-preview-text: null !default;
+$color-preview-border: $component-border !default;
+$color-preview-hover-border: $hovered-border !default;
+
+$color-preview-no-color-bg: $white !default;
+$color-preview-no-color-text: $error !default;
+$color-preview-no-color-border: null !default;
+
+$color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;

package/scss/coloreditor/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../action-buttons/_index.scss";
+@import "../color-preview/_index.scss";
+@import "../colorpalette/_index.scss";
+@import "../colorgradient/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/coloreditor/_layout.scss

@@ -0,0 +1,65 @@
+@include exports("coloreditor/layout") {
+
+    // ColorEditor/FlatColorPicker
+    .k-coloreditor {
+        @include border-radius( $coloreditor-border-radius );
+        min-width: $coloreditor-min-width;
+        border-width: $coloreditor-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: $coloreditor-font-size;
+        font-family: $coloreditor-font-family;
+        line-height: $coloreditor-line-height;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    // Header
+    .k-coloreditor-header {
+        padding: $coloreditor-header-padding-y $coloreditor-header-padding-x 0;
+    }
+
+    .k-coloreditor-header-actions {
+        gap: $coloreditor-header-actions-gap;
+    }
+
+    .k-coloreditor-preview {
+        position: relative;
+        gap: $coloreditor-preview-gap;
+        z-index: 1;
+    }
+    .k-coloreditor-preview .k-color-preview {
+        width: $coloreditor-color-preview-width;
+        height: $coloreditor-color-preview-height;
+    }
+
+    // Views
+    .k-coloreditor-views {
+        min-width: calc( var(--kendo-color-preview-width, #{$colorpalette-tile-width}) * var(--kendo-color-preview-columns, 10) );
+        padding: $coloreditor-views-padding-y $coloreditor-views-padding-x;
+        gap: $coloreditor-views-gap;
+
+        .k-colorgradient {
+            padding: 0;
+            width: auto;
+            border-width: 0;
+        }
+
+        .k-colorpalette {
+            align-self: center;
+        }
+
+        .k-colorpalette-tile {
+            width: var(--kendo-color-preview-width, $colorpalette-tile-width);
+            height: var(--kendo-color-preview-height, $colorpalette-tile-height);
+        }
+    }
+
+    // Footer
+    .k-coloreditor-footer.k-actions {
+        margin: 0;
+    }
+
+}

package/scss/coloreditor/_theme.scss

@@ -0,0 +1,19 @@
+@include exports("coloreditor/theme") {
+
+    // ColorEditor/FlatColorPicker
+    .k-coloreditor {
+        @include fill(
+            $coloreditor-text,
+            $coloreditor-bg,
+            $coloreditor-border
+        );
+    }
+
+    .k-coloreditor:focus,
+    .k-coloreditor.k-state-focus,
+    .k-coloreditor.k-focus {
+        @include fill( $border: $coloreditor-focus-border );
+        @include box-shadow( $coloreditor-focus-shadow );
+    }
+
+}

package/scss/coloreditor/_variables.scss

@@ -0,0 +1,27 @@
+// Coloreditor/FlatColorPicker
+$coloreditor-spacer: map-get( $spacing, 3 ) !default;
+
+$coloreditor-min-width: 272px !default;
+$coloreditor-border-width: 1px !default;
+$coloreditor-border-radius: $border-radius !default;
+$coloreditor-font-family: $font-family !default;
+$coloreditor-font-size: $font-size !default;
+$coloreditor-line-height: $line-height !default;
+$coloreditor-bg: $component-bg !default;
+$coloreditor-text: $component-text !default;
+$coloreditor-border: $component-border !default;
+
+$coloreditor-focus-border: null !default;
+$coloreditor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+
+$coloreditor-header-padding-y: $coloreditor-spacer !default;
+$coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
+$coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
+
+$coloreditor-preview-gap: ( $coloreditor-spacer / 4 ) !default;
+$coloreditor-color-preview-width: 34px !default;
+$coloreditor-color-preview-height: 14px !default;
+
+$coloreditor-views-padding-y: $coloreditor-spacer !default;
+$coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
+$coloreditor-views-gap: $coloreditor-spacer !default;

package/scss/colorgradient/_index.scss

@@ -0,0 +1,18 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../utils/_flex.scss";
+@import "../utils/_spacer.scss";
+@import "../icons/_index.scss";
+@import "../button/_index.scss";
+@import "../slider/_index.scss";
+@import "../textbox/_index.scss";
+@import "../numerictextbox/_index.scss";
+
+// Component
+@import "images/alpha-slider-bgr.scss";
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";