@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.2

package/scss/bottom-navigation/_theme.scss

@@ -1,60 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-bottom-navigation--theme-base() {
-
-    // Solid
-    @each $name, $color in $kendo-theme-colors {
-        .k-bottom-nav-solid-#{$name} {
-            @include fill(
-                $color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
-                $bg: $color
-            );
-
-            .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item:focus {
-                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
-            }
-
-            .k-bottom-nav-item.k-selected {
-                @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) );
-            }
-        }
-        // TODO: remove when suites update class names
-        .k-bottom-nav-solid.k-bottom-nav-#{$name} {
-            @extend .k-bottom-nav-solid-#{$name} !optional;
-        }
-    }
-
-    // Flat
-    @each $name, $color in $kendo-theme-colors {
-        .k-bottom-nav-flat-#{$name} {
-            @include fill(
-                $kendo-bottom-nav-flat-text,
-                $kendo-bottom-nav-flat-bg,
-                $kendo-bottom-nav-flat-border
-            );
-
-            .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item:focus {
-                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) );
-            }
-
-            .k-bottom-nav-item.k-selected {
-                @if $name == "secondary" or $name == "light" {
-                    @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) );
-                } @else {
-                    @include fill( $color: $color );
-                }
-            }
-        }
-        .k-bottom-nav-flat.k-bottom-nav-#{$name} {
-            @extend .k-bottom-nav-flat-#{$name} !optional;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_theme.scss" as *;
 
 
 @mixin kendo-bottom-navigation--theme() {

package/scss/bottom-navigation/_variables.scss

@@ -63,3 +63,25 @@ $kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
 /// The border color of the flat BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-flat-border: $kendo-component-border !default;
+
+@forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with (
+    $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x,
+    $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-y,
+    $kendo-bottom-nav-gap: $kendo-bottom-nav-gap,
+    $kendo-bottom-nav-border-width: $kendo-bottom-nav-border-width,
+    $kendo-bottom-nav-font-family: $kendo-bottom-nav-font-family,
+    $kendo-bottom-nav-font-size: $kendo-bottom-nav-font-size,
+    $kendo-bottom-nav-line-height: $kendo-bottom-nav-line-height,
+    $kendo-bottom-nav-letter-spacing: $kendo-bottom-nav-letter-spacing,
+    $kendo-bottom-nav-item-padding-x: $kendo-bottom-nav-item-padding-x,
+    $kendo-bottom-nav-item-padding-y: $kendo-bottom-nav-item-padding-y,
+    $kendo-bottom-nav-item-min-width: $kendo-bottom-nav-item-min-width,
+    $kendo-bottom-nav-item-max-width: $kendo-bottom-nav-item-max-width,
+    $kendo-bottom-nav-item-min-height: $kendo-bottom-nav-item-min-height,
+    $kendo-bottom-nav-item-border-radius: $kendo-bottom-nav-item-border-radius,
+    $kendo-bottom-nav-item-gap: $kendo-bottom-nav-item-gap,
+    $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow,
+    $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text,
+    $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg,
+    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border
+);

package/scss/breadcrumb/_layout.scss

@@ -1,136 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-breadcrumb--layout-base() {
-
-    // Breadcrumb
-    .k-breadcrumb {
-        margin-block: $kendo-breadcrumb-margin-y;
-        margin-inline: $kendo-breadcrumb-margin-x;
-        padding-block: $kendo-breadcrumb-padding-y;
-        padding-inline: $kendo-breadcrumb-padding-x;
-        border-width: $kendo-breadcrumb-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-breadcrumb-font-family;
-        display: flex;
-        flex-direction: row;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Breadcrumb container
-    .k-breadcrumb-container,
-    .k-breadcrumb-root-item-container {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        flex-flow: row nowrap;
-        overflow: hidden;
-    }
-
-    .k-breadcrumb-root-item-container {
-        align-items: flex-start;
-        flex-shrink: 0;
-    }
-
-
-    // Breadcrumb item
-    .k-breadcrumb-item {
-        vertical-align: middle;
-        display: inline-flex;
-        flex-direction: row;
-        flex: none;
-        align-items: center;
-        overflow: hidden;
-    }
-
-
-    // Breadcrumb root item
-    .k-breadcrumb-root-item {
-        flex-shrink: 0;
-    }
-
-
-    // Breadcrumb links
-    .k-breadcrumb-link,
-    .k-breadcrumb-root-link {
-        @include border-radius( $kendo-breadcrumb-link-border-radius );
-        color: $kendo-breadcrumb-link-initial-text;
-        text-decoration: none;
-        white-space: nowrap;
-        outline: none;
-        cursor: pointer;
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        align-self: stretch;
-        overflow: hidden;
-        transition: $kendo-transition;
-    }
-
-    .k-breadcrumb-link > .k-image,
-    .k-breadcrumb-icontext-link .k-icon {
-        margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
-    }
-
-
-    // Breadcrumb delimiter
-    .k-breadcrumb-delimiter,
-    .k-breadcrumb-delimiter-icon {
-        color: inherit;
-        opacity: $kendo-disabled-opacity;
-    }
-
-
-    // Editing
-    .k-breadcrumb-input-container {
-        width: 100%;
-
-        .k-breadcrumb-input-container {
-            border-color: transparent;
-        }
-    }
-
-
-    // Sizes
-    @each $size, $size-props in $kendo-breadcrumb-sizes {
-        $_link-padding-x: map.get( $size-props, link-padding-x );
-        $_link-padding-y: map.get( $size-props, link-padding-y );
-        $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
-        $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-
-        .k-breadcrumb-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-
-            .k-breadcrumb-link,
-            .k-breadcrumb-root-link {
-                padding-block: $_link-padding-y;
-                padding-inline: $_link-padding-x;
-            }
-
-            .k-breadcrumb-icon-link {
-                padding-block: $_icon-link-padding-y;
-                padding-inline: $_icon-link-padding-x;
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/breadcrumb/_layout.scss" as *;
 
 
 @mixin kendo-breadcrumb--layout() {

package/scss/breadcrumb/_theme.scss

@@ -1,103 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-breadcrumb--theme-base() {
-
-    // Breadcrumb
-    .k-breadcrumb {
-        @include fill(
-            $kendo-breadcrumb-text,
-            $kendo-breadcrumb-bg,
-            $kendo-breadcrumb-border
-        );
-
-        &:focus,
-        &.k-focus {
-            @include box-shadow( $kendo-breadcrumb-focus-shadow );
-        }
-    }
-
-
-    // Breadcrumb link
-    .k-breadcrumb-link {
-        @include fill(
-            $kendo-breadcrumb-link-text,
-            $kendo-breadcrumb-link-bg,
-            $kendo-breadcrumb-link-border
-        );
-
-        // Hovered state
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-breadcrumb-link-hover-text,
-                $kendo-breadcrumb-link-hover-bg,
-                $kendo-breadcrumb-link-hover-border
-            );
-        }
-
-        // Focused state
-        &:focus,
-        &.k-focus {
-            @include fill(
-                $kendo-breadcrumb-link-focus-text,
-                $kendo-breadcrumb-link-focus-bg,
-                $kendo-breadcrumb-link-focus-border
-            );
-            @include focus-indicator( $kendo-breadcrumb-link-focus-shadow );
-        }
-    }
-
-
-    // Breadcrumb root link
-    .k-breadcrumb-root-link {
-        @include fill(
-            $kendo-breadcrumb-root-link-text,
-            $kendo-breadcrumb-root-link-bg,
-            $kendo-breadcrumb-root-link-border
-        );
-
-        // Hovered state
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-breadcrumb-root-link-hover-text,
-                $kendo-breadcrumb-root-link-hover-bg,
-                $kendo-breadcrumb-root-link-hover-border
-            );
-        }
-
-        // Focused state
-        &:focus,
-        &.k-focus {
-            @include fill(
-                $kendo-breadcrumb-root-link-focus-text,
-                $kendo-breadcrumb-root-link-focus-bg,
-                $kendo-breadcrumb-root-link-focus-border
-            );
-            @include focus-indicator( $kendo-breadcrumb-root-link-focus-shadow );
-        }
-    }
-
-
-    // Breadcrumb current (last) item
-    .k-breadcrumb-current-item {
-        .k-breadcrumb-link {
-            @include fill(
-                $kendo-breadcrumb-current-item-text,
-                $kendo-breadcrumb-current-item-bg,
-                $kendo-breadcrumb-current-item-border
-            );
-        }
-    }
-
-
-    // Alias
-    .k-breadcrumb-last-item {
-        @extend .k-breadcrumb-current-item !optional;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/breadcrumb/_theme.scss" as *;
 
 
 @mixin kendo-breadcrumb--theme() {

package/scss/breadcrumb/_variables.scss

@@ -231,3 +231,67 @@ $kendo-breadcrumb-sizes: (
         line-height: $kendo-breadcrumb-lg-line-height
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/breadcrumb/_variables.scss" with (
+    $kendo-breadcrumb-border-width: $kendo-breadcrumb-border-width,
+    $kendo-breadcrumb-margin-x: $kendo-breadcrumb-margin-x,
+    $kendo-breadcrumb-margin-y: $kendo-breadcrumb-margin-y,
+    $kendo-breadcrumb-padding-x: $kendo-breadcrumb-padding-x,
+    $kendo-breadcrumb-padding-y: $kendo-breadcrumb-padding-y,
+    $kendo-breadcrumb-font-family: $kendo-breadcrumb-font-family,
+    $kendo-breadcrumb-font-size: $kendo-breadcrumb-font-size,
+    $kendo-breadcrumb-sm-font-size: $kendo-breadcrumb-sm-font-size,
+    $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-md-font-size,
+    $kendo-breadcrumb-lg-font-size: $kendo-breadcrumb-lg-font-size,
+    $kendo-breadcrumb-line-height: $kendo-breadcrumb-line-height,
+    $kendo-breadcrumb-sm-line-height: $kendo-breadcrumb-sm-line-height,
+    $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-md-line-height,
+    $kendo-breadcrumb-lg-line-height: $kendo-breadcrumb-lg-line-height,
+    $kendo-breadcrumb-bg: $kendo-breadcrumb-bg,
+    $kendo-breadcrumb-text: $kendo-breadcrumb-text,
+    $kendo-breadcrumb-border: $kendo-breadcrumb-border,
+    $kendo-breadcrumb-focus-shadow: $kendo-breadcrumb-focus-shadow,
+    $kendo-breadcrumb-link-padding-x: $kendo-breadcrumb-link-padding-x,
+    $kendo-breadcrumb-sm-link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
+    $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-md-link-padding-x,
+    $kendo-breadcrumb-lg-link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
+    $kendo-breadcrumb-link-padding-y: $kendo-breadcrumb-link-padding-y,
+    $kendo-breadcrumb-sm-link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
+    $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-md-link-padding-y,
+    $kendo-breadcrumb-lg-link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
+    $kendo-breadcrumb-link-border-radius: $kendo-breadcrumb-link-border-radius,
+    $kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y,
+    $kendo-breadcrumb-sm-icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
+    $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
+    $kendo-breadcrumb-lg-icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
+    $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x,
+    $kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
+    $kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
+    $kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
+    $kendo-breadcrumb-link-initial-text: $kendo-breadcrumb-link-initial-text,
+    $kendo-breadcrumb-link-icon-spacing: $kendo-breadcrumb-link-icon-spacing,
+    $kendo-breadcrumb-link-bg: $kendo-breadcrumb-link-bg,
+    $kendo-breadcrumb-link-text: $kendo-breadcrumb-link-text,
+    $kendo-breadcrumb-link-border: $kendo-breadcrumb-link-border,
+    $kendo-breadcrumb-link-hover-bg: $kendo-breadcrumb-link-hover-bg,
+    $kendo-breadcrumb-link-hover-text: $kendo-breadcrumb-link-hover-text,
+    $kendo-breadcrumb-link-hover-border: $kendo-breadcrumb-link-hover-border,
+    $kendo-breadcrumb-link-focus-bg: $kendo-breadcrumb-link-focus-bg,
+    $kendo-breadcrumb-link-focus-text: $kendo-breadcrumb-link-focus-text,
+    $kendo-breadcrumb-link-focus-border: $kendo-breadcrumb-link-focus-border,
+    $kendo-breadcrumb-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow,
+    $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-root-link-bg,
+    $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-root-link-text,
+    $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-root-link-border,
+    $kendo-breadcrumb-root-link-hover-bg: $kendo-breadcrumb-root-link-hover-bg,
+    $kendo-breadcrumb-root-link-hover-text: $kendo-breadcrumb-root-link-hover-text,
+    $kendo-breadcrumb-root-link-hover-border: $kendo-breadcrumb-root-link-hover-border,
+    $kendo-breadcrumb-root-link-focus-bg: $kendo-breadcrumb-root-link-focus-bg,
+    $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-root-link-focus-text,
+    $kendo-breadcrumb-root-link-focus-border: $kendo-breadcrumb-root-link-focus-border,
+    $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-root-link-focus-shadow,
+    $kendo-breadcrumb-current-item-bg: $kendo-breadcrumb-current-item-bg,
+    $kendo-breadcrumb-current-item-text: $kendo-breadcrumb-current-item-text,
+    $kendo-breadcrumb-current-item-border: $kendo-breadcrumb-current-item-border,
+    $kendo-breadcrumb-sizes: $kendo-breadcrumb-sizes
+);