@progress/kendo-theme-core 6.5.0-dev.0 → 6.5.0-dev.2

package/scss/functions/_map.import.scss

@@ -47,6 +47,36 @@
     @return $map;
 }
 
+/// Returns a deep-map with the keys and values from `$map` and `$args`.
+/// @param {Map} $maps - The maps to deep-merge.
+/// @return {Map} - A map with the keys and values from `$map` and `$args`.
+///
+/// @example scss - Usage
+///   @debug k-map-deep-merge( ( "foo": ("bar": "baz", "baz": "qux" ) ), ( "foo": ("bar": "foo") ) ); // => ( "foo": ("bar": "foo", "baz": "qux" ))
+@function k-map-deep-merge($maps...) {
+    $merged: ();
+  
+    @each $map in $maps {
+      @each $key, $val in $map {
+        @if (k-meta-type-of($val) == 'map') {
+          $current: k-map-get($merged, $key);
+          @if (k-meta-type-of($current) == 'map') {
+            $val: k-map-deep-merge($current, $val);
+            $map: k-map-merge(
+              $map,
+              (
+                $key: $val
+              )
+            );
+          }
+        }
+      }
+      $merged: k-map-merge($merged, $map);
+    }
+  
+    @return $merged;
+  }
+
 /// Returns a map with the keys and values from `$map` except for `$keys`.
 /// @param {Map} $map - The map to remove keys from.
 /// @param {Any} $keys - The keys to remove from `$map`.

package/scss/functions/_meta.import.scss

@@ -20,6 +20,10 @@
 /// @example scss - Usage
 ///   @debug k-meta-function-exists( "k-string-replace" ); // => true
 @function k-meta-function-exists( $name ) {
+    @if $name == "" {
+        @return false;
+    }
+
     @return function-exists( $name );
 }
 

package/scss/functions/_string.import.scss

@@ -1,3 +1,12 @@
+$svg-escaped-characters: (
+    ("%", "%25"),
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+) !default;
+
 /// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
 /// @param {String} $string - The string to process.
 /// @param {String} $substring - The substring to look for.
@@ -116,3 +125,31 @@
 @function k-string-unquote( $string ) {
     @return unquote( $string );
 }
+
+
+// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function str-replace($string, $search, $replace: "") {
+    $index: k-string-index($string, $search);
+
+    @if $index {
+        @return k-string-slice($string, 1, $index - 1) + $replace + str-replace(k-string-slice($string, $index + k-string-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function escape-svg($string) {
+    @if k-string-index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $svg-escaped-characters {
+            // Do not escape the url brackets
+            @if k-string-index($string, "url(") == 1 {
+                $string: url("#{str-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: str-replace($string, $char, $encoded);
+            }
+        }
+    }
+
+    @return $string;
+}

package/scss/functions/index.import.scss

@@ -1,5 +1,3 @@
-@import "../_variables.scss";
-
 @import "./_color.import.scss";
 @import "./_color-contrast.import.scss";
 @import "./_color-manipulation.import.scss";

package/scss/mixins/_decoration.scss

@@ -0,0 +1,28 @@
+@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
+    @if $border {
+        border-color: $border;
+    }
+    @if $color {
+        color: $color;
+    }
+    @if $bg {
+        background-color: $bg;
+    }
+    @if $gradient {
+        @include linear-gradient( $gradient );
+    }
+}
+
+@mixin linear-gradient( $gradient: null ) {
+    @if $gradient and $kendo-enable-gradients {
+        @if $gradient == none {
+            background-image: none;
+        } @else {
+            background-image: linear-gradient( $gradient );
+        }
+    }
+}
+
+@mixin repeating-striped-gradient( $color: rgba(255,255,255,.15), $background: #FFF, $angle: 45deg, $largeStep: 2px, $smallStep: 1px) {
+    background-image: repeating-linear-gradient($angle, $background, $background $smallStep, $color $smallStep, $color $largeStep);
+}

package/scss/mixins/_disabled.scss

@@ -7,3 +7,13 @@
     pointer-events: none;
     box-shadow: none;
 }
+
+@mixin disabled-color( $color: null, $bg: null, $border: null ) {
+    outline: none;
+    cursor: default;
+    background-color: $bg;
+    color: $color;
+    border-color: $border;
+    pointer-events: none;
+    box-shadow: none;
+}

package/scss/mixins/_hide-scrollbar.scss

@@ -1,6 +1,6 @@
 $kendo-scrollbar-width: 17px !default;
 
-@mixin hide-scrollbar( $dir: "right", $max-scrollbar: 100px ) {
+@mixin hide-scrollbar( $dir: "right", $max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
     $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
     $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
@@ -16,3 +16,15 @@ $kendo-scrollbar-width: 17px !default;
         margin-right: -$max-scrollbar;
     }
 }
+
+@mixin hide-scrollbar-dir-agnostic($max-scrollbar: 100px) {
+    // anything larger than the scrollbar width will do
+    $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
+    $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
+
+    padding-inline-end: $max-scrollbar;
+    padding-inline-start: $max-scrollbar;
+
+    margin-inline-start: -$max-scrollbar;
+    margin-inline-end: $margin;
+}

package/scss/mixins/index.import.scss

@@ -2,19 +2,13 @@
 @import "./_box-shadow.scss";
 @import "./_data-uri.scss";
 @import "./_disabled.scss";
+@import "./_decoration.scss";
 @import "./_focus-indicator.scss";
 @import "./_gradient.scss";
 @import "./_hide-scrollbar.scss";
 @import "./_import-once.scss";
 @import "./_typography.scss";
 
-@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
-    border-color: $border;
-    color: $color;
-    background-color: $bg;
-    @include linear-gradient( $gradient );
-}
-
 @mixin background-image( $background-image: null ) {
     @if $background-image {
         background-image: url(#{$background-image});

package/scss/styles/_base.scss

@@ -0,0 +1,133 @@
+@mixin kendo-core--styles--base() {
+    // Disabled state
+    .k-disabled,
+    .k-widget[disabled],
+    .k-disabled {
+        @include disabled-color(
+            $color: var( --kendo-disabled-text, inherit ),
+            $border: var( --kendo-disabled-border, inherit )
+        );
+
+        .k-link {
+            cursor: default;
+            outline: 0;
+        }
+    }
+
+    // Horizontal line
+    .k-hr {
+        margin-block: k-map-get( $kendo-spacing, 4 );
+        padding: 0;
+        height: 0;
+        border-width: 1px 0 0;
+        border-style: solid;
+        border-color: var( --kendo-component-border, inherit );
+        display: block;
+        float: none;
+        clear: both;
+    }
+
+    // Horizontal rule
+    .k-d-flex-row > .k-hr {
+        margin: 0;
+        width: 0;
+        height: auto;
+        border-width: 0 0 0 1px;
+        flex: 0 0 auto;
+    }
+
+    // Vertical rule
+    .k-d-flex-col > .k-hr {
+        margin: 0;
+        flex: 0 0 auto;
+    }
+
+    .k-sprite {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        overflow: hidden;
+        background-repeat: no-repeat;
+        font-size: 0;
+        line-height: 0;
+        text-align: center;
+    }
+
+    .k-image {
+        display: inline-block;
+    }
+
+    // Layout
+    .k-reset {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        outline: 0;
+        text-decoration: none;
+        font: inherit;
+        list-style: none;
+    }
+
+    kendo-sortable {
+        display: block;
+    }
+
+
+    // Links
+    .k-link,
+    .k-link:hover {
+        color: inherit;
+        text-decoration: none;
+        outline: 0;
+        cursor: pointer;
+    }
+
+    // Outline
+    .k-content {
+        outline: 0;
+    }
+
+    // Centering
+    .k-centered {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    // Disable mouse events
+    .k-no-click {
+        pointer-events: none;
+    }
+
+    // Off-screen container used during PDF export
+    .k-pdf-export-shadow {
+        position: absolute;
+        overflow: hidden;
+        left: -15000px;
+        width: 14400px;
+    }
+
+    // PDF export icons fix
+    .kendo-pdf-hide-pseudo-elements::before,
+    .kendo-pdf-hide-pseudo-elements::after {
+        display: none !important; // stylelint-disable-line declaration-no-important
+    }
+
+    // Dirty indicator
+    .k-dirty {
+        margin: 0;
+        padding: 0;
+        width: 0;
+        height: 0;
+        border-width: 3px;
+        border-style: solid;
+        border-block-start-color: currentColor;
+        border-block-end-color: transparent;
+        border-inline-start-color: transparent;
+        border-inline-end-color: currentColor;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+    }
+}

package/scss/styles/_layout.scss

@@ -1,4 +1,18 @@
 @mixin kendo-core--styles--layout() {
+    .k-body {
+        @include typography(
+            var( --kendo-font-size, inherit ),
+            var( --kendo-font-family, inherit ),
+            var( --kendo-line-height, normal ),
+            var( --kendo-font-weight, normal ),
+            var( --kendo-letter-spacing, normal ),
+        );
+        @include fill(
+            var( --kendo-body-text, initial ),
+            var( --kendo-body-bg, initial )
+        );
+        margin: 0;
+    }
 
     // Basic layout
     .k-hstack {

package/scss/styles/_loading.scss

@@ -0,0 +1,119 @@
+@mixin kendo-core--styles--loading() {
+    // Loading mask
+    .k-loading-mask,
+    .k-loading-image,
+    .k-loading-color {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-loading-mask {
+        z-index: $kendo-zindex-loading;
+
+        &.k-opaque {
+            .k-loading-color {
+                opacity: 1;
+            }
+        }
+    }
+    .k-loading-text {
+        text-indent: -4000px;
+        text-align: center;
+        position: absolute;
+        color: $kendo-loading-text;
+    }
+    .k-loading-image {
+        z-index: 2;
+        color: $kendo-loading-text;
+    }
+    .k-loading-color {
+        background-color: $kendo-loading-bg;
+        opacity: $kendo-loading-opacity;
+    }
+
+    // Loading indicator
+    .k-i-loading {
+        position: relative;
+        background-color: transparent;
+        box-sizing: border-box;
+        color: $kendo-loading-text;
+
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-i-loading::before,
+    .k-i-loading::after,
+    .k-loading-image::before,
+    .k-loading-image::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: inline-block;
+        content: "";
+        box-sizing: inherit;
+        border-radius: 50%;
+        border-width: .05em;
+        border-style: solid;
+        border-color: currentColor;
+        border-top-color: transparent;
+        border-bottom-color: transparent;
+        background-color: transparent;
+    }
+
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
+
+    .k-i-loading::before,
+    .k-loading-image::before {
+        margin-top: -.5em;
+        margin-left: -.5em;
+        width: 1em;
+        height: 1em;
+        animation: k-loading-animation .7s linear infinite;
+    }
+
+    .k-i-loading::after,
+    .k-loading-image::after {
+        margin-top: -.25em;
+        margin-left: -.25em;
+        width: .5em;
+        height: .5em;
+        animation: k-loading-animation reverse 1.4s linear infinite;
+    }
+
+    .k-loading-image::before,
+    .k-loading-image::after {
+        content: "";
+        // See https://github.com/telerik/kendo-themes/issues/1925
+        border-width: 1px; // TODO: Remove once we drop IE support
+        border-width: clamp( .015em, 1px, 1px );
+        font-size: 4em;
+    }
+
+    // Loading animation
+    @keyframes k-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}

package/scss/styles/_selection.scss

@@ -0,0 +1,25 @@
+@mixin kendo-core--styles--selection() {
+    .k-marquee {
+        position: absolute;
+        z-index: 100000;
+    }
+
+    .k-marquee-color,
+    .k-marquee-text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .k-marquee-color {
+        color: $kendo-selected-text;
+        background-color: k-get-theme-color-var( primary-60, #{$kendo-selected-bg} );
+        border-color: k-get-theme-color-var( primary-100, #{$kendo-selected-border} );
+        opacity: .6;
+    }
+    .k-marquee-text {
+        color: $kendo-selected-text;
+    }
+}

package/scss/styles/index.import.scss

@@ -2,6 +2,9 @@
 @import "./_asp-fallback.scss";
 @import "./_layout.scss";
 @import "./_normalize.scss";
+@import "./_base.scss";
+@import "./_loading.scss";
+@import "./_selection.scss";
 
 
 @mixin kendo-core--styles() {
@@ -9,4 +12,7 @@
     @include kendo-core--styles--asp-fallback();
     @include kendo-core--styles--layout();
     @include kendo-core--styles--normalize();
+    @include kendo-core--styles--base();
+    @include kendo-core--styles--loading();
+    @include kendo-core--styles--selection();
 }