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

package/scss/components/appbar/_layout.scss

@@ -0,0 +1,120 @@
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-appbar--layout-base() {
+
+    // Appbar
+    .k-appbar {
+        margin-block: $kendo-appbar-margin-y;
+        margin-inline: $kendo-appbar-margin-x;
+        padding-block: $kendo-appbar-padding-y;
+        padding-inline: $kendo-appbar-padding-x;
+        border-width: $kendo-appbar-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-appbar-font-family;
+        font-size: $kendo-appbar-font-size;
+        line-height: $kendo-appbar-line-height;
+        list-style: none;
+        display: flex;
+        gap: $kendo-appbar-gap;
+        flex-flow: row wrap;
+        align-items: center;
+        overflow: hidden;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        > * {
+            flex-shrink: 0;
+        }
+
+        // Appbar section
+        .k-appbar-section {
+            display: inline-flex;
+            flex-wrap: nowrap;
+            align-items: center;
+        }
+
+
+        // Appbar Spacer
+        .k-appbar-spacer {
+            flex: 1 0 auto;
+        }
+        .k-appbar-spacer-sized {
+            flex-grow: 0;
+        }
+
+
+        // Separator
+        .k-appbar-separator {
+            margin: 0;
+            width: 0;
+            min-height: 1em;
+            border-style: solid;
+            border-width: 0 0 0 1px;
+            display: inline-block;
+        }
+
+
+        // Input
+        .k-input,
+        .k-picker {
+            width: 10em;
+        }
+        .k-color-picker {
+            width: min-content;
+        }
+
+    }
+
+
+    // Static appbar
+    .k-appbar-static {
+        position: static;
+    }
+
+
+    // Sticky appbar
+    .k-appbar-sticky {
+        width: 100%;
+        position: sticky;
+        top: 0;
+        z-index: $kendo-appbar-zindex;
+    }
+
+
+    // Fixed appbar
+    .k-appbar-fixed {
+        width: 100%;
+        position: fixed;
+        z-index: 1;
+    }
+
+
+    // Appbar position
+    .k-appbar-top {
+        top: 0;
+        bottom: auto;
+    }
+    .k-appbar-bottom {
+        top: auto;
+        bottom: 0;
+
+        &.k-appbar-fixed {
+            bottom: 0;
+        }
+    }
+
+}
+
+
+@mixin kendo-appbar--layout() {
+    @include kendo-appbar--layout-base();
+}

package/scss/components/appbar/_theme.scss

@@ -0,0 +1,39 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-appbar--theme-base() {
+
+    .k-appbar {
+        @include box-shadow( $kendo-appbar-box-shadow );
+    }
+    .k-appbar-bottom {
+        @include box-shadow( $kendo-appbar-bottom-box-shadow );
+    }
+
+
+    // AppBar theme colors
+    @each $name, $color in $kendo-theme-colors {
+        .k-appbar-#{$name} {
+            @if $name == "light" {
+                color: $kendo-appbar-light-text;
+                background-color: $kendo-appbar-light-bg;
+            } @else if $name == "dark" {
+                color: $kendo-appbar-dark-text;
+                background-color: $kendo-appbar-dark-bg;
+            } @else {
+                color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+                background-color: $color;
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-appbar--theme() {
+    @include kendo-appbar--theme-base();
+}

package/scss/components/appbar/_variables.scss

@@ -0,0 +1,22 @@
+// AppBar
+
+$kendo-appbar-margin-x: null !default;
+$kendo-appbar-margin-y: null !default;
+$kendo-appbar-padding-x: null !default;
+$kendo-appbar-padding-y: null !default;
+$kendo-appbar-border-width: null !default;
+$kendo-appbar-zindex: null !default;
+$kendo-appbar-font-family: null !default;
+$kendo-appbar-font-size: null !default;
+$kendo-appbar-line-height: null !default;
+
+$kendo-appbar-gap: null !default;
+
+$kendo-appbar-light-bg: null !default;
+$kendo-appbar-light-text: null !default;
+
+$kendo-appbar-dark-bg: null !default;
+$kendo-appbar-dark-text: null !default;
+
+$kendo-appbar-box-shadow: null !default;
+$kendo-appbar-bottom-box-shadow: null !default;

package/scss/components/autocomplete/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-autocomplete--styles() {
+    @include import-once( "autocomplete" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
+        @include kendo-autocomplete--layout();
+        @include kendo-autocomplete--theme();
+    }
+}

package/scss/components/autocomplete/_layout.scss

@@ -0,0 +1,11 @@
+@mixin kendo-autocomplete--layout-base() {
+
+    // Autocomplete
+    .k-autocomplete {}
+
+}
+
+
+@mixin kendo-autocomplete--layout() {
+    @include kendo-autocomplete--layout-base();
+}

package/scss/components/autocomplete/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-autocomplete--theme-base() {
+
+    // Autocomplete
+    .k-autocomplete {}
+
+}
+
+
+@mixin kendo-autocomplete--theme() {
+    @include kendo-autocomplete--theme-base();
+}

package/scss/components/autocomplete/_variables.scss

@@ -0,0 +1 @@
+// Autocomplete

package/scss/components/avatar/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-avatar--styles() {
+    @include import-once( "avatar" ) {
+        @include core-styles();
+        @include kendo-avatar--layout();
+        @include kendo-avatar--theme();
+    }
+}

package/scss/components/avatar/_layout.scss

@@ -0,0 +1,83 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-avatar--layout-base() {
+
+    // Avatar
+    .k-avatar {
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        vertical-align: middle;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Avatar text
+    .k-avatar-text,
+    .k-avatar-initials {
+        font-size: $kendo-avatar-font-size;
+        font-family: $kendo-avatar-font-family;
+        line-height: $kendo-avatar-line-height;
+    }
+
+
+    // Avatar icon
+    .k-avatar-icon {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+    }
+
+
+    // Avatar image
+    .k-avatar-image {
+        width: 100%;
+        height: 100%;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            vertical-align: top;
+        }
+    }
+
+
+    // Sizes
+    @each $name, $size in $kendo-avatar-sizes {
+        .k-avatar-#{$name} {
+            width: $size;
+            height: $size;
+            flex-basis: $size;
+        }
+    }
+
+    // Shapes
+    .k-avatar-square {}
+
+    // Bordered
+    .k-avatar-bordered {
+        border-width: $kendo-avatar-border-width;
+    }
+
+
+}
+
+
+@mixin kendo-avatar--layout() {
+    @include kendo-avatar--layout-base();
+}

package/scss/components/avatar/_theme.scss

@@ -0,0 +1,33 @@
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-avatar--theme-base() {
+
+    // Solid Avatars
+    @each $name, $color in $kendo-avatar-theme-colors {
+        .k-avatar-solid-#{$name} {
+            border-color: $color;
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            background-color: $color;
+        }
+    }
+
+    // Outline avatars
+    .k-avatar-outline {
+        border-color: currentColor;
+    }
+
+    @each $name, $color in $kendo-avatar-theme-colors {
+        .k-avatar-outline-#{$name} {
+            color: $color;
+        }
+    }
+
+}
+
+
+@mixin kendo-avatar--theme() {
+    @include kendo-avatar--theme-base();
+}

package/scss/components/avatar/_variables.scss

@@ -0,0 +1,11 @@
+// Avatar
+
+$kendo-avatar-border-width: null !default;
+
+$kendo-avatar-font-family: null !default;
+$kendo-avatar-font-size: null !default;
+$kendo-avatar-line-height: null !default;
+
+$kendo-avatar-sizes: null !default;
+
+$kendo-avatar-theme-colors: null !default;

package/scss/components/badge/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-badge--styles() {
+    @include import-once( "badge" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-badge--layout();
+        @include kendo-badge--theme();
+    }
+}

package/scss/components/badge/_layout.scss

@@ -0,0 +1,154 @@
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./_variables.scss" as *;
+@use "sass:map";
+
+@mixin kendo-badge--layout-base() {
+
+    .k-badge {
+        padding: 0;
+        border-width: $kendo-badge-border-width;
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        color: inherit;
+        background-color: transparent;
+        font: inherit;
+        text-align: center;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+    .k-badge > * {
+        color: inherit;
+    }
+
+
+    // Links
+    a.k-badge,
+    .k-badge > a {
+        text-decoration: none;
+    }
+    a.k-badge:hover,
+    .k-badge > a:hover {
+        text-decoration: underline;
+    }
+
+
+    // Icon
+    .k-badge-icon {
+        max-width: 1em;
+        max-height: 1em;
+        font-size: inherit;
+    }
+    .k-badge-icon.k-svg-icon svg {
+        fill: currentColor;
+    }
+
+
+    // Badge sizes
+    @each $size, $size-props in $kendo-badge-sizes {
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_min-width: map.get( $size-props, min-width );
+
+        .k-badge-#{$size} {
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
+            font-size: $_font-size;
+            line-height: $_line-height;
+            min-width: $_min-width;
+
+            &:empty {
+                padding: $_padding-y;
+                min-width: auto;
+             }
+        }
+    }
+
+    kendo-badge-container {
+        display: inline-block;
+    }
+
+    // Badge position
+    .k-badge-container {
+        position: relative;
+        overflow: visible;
+    }
+    @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) {
+
+        .k-badge-#{$placement} {
+            position: absolute;
+            z-index: 9999;
+
+            &.k-top-start {
+                @if $translate {
+                    transform: translate( -1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-top-end {
+                @if $translate {
+                    transform: translate( 1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-bottom-start {
+                @if $translate {
+                    transform: translate( -1% * $translate, 1% * $translate );
+                }
+            }
+            &.k-bottom-end {
+                @if $translate {
+                    transform: translate( 1% * $translate, 1% * $translate );
+                }
+            }
+        }
+
+        .k-rtl .k-badge-#{$placement},
+        [dir="rtl"].k-badge-#{$placement},
+        [dir="rtl"] .k-badge-#{$placement} {
+            &.k-top-start {
+                @if $translate {
+                    transform: translate( 1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-top-end {
+                @if $translate {
+                    transform: translate( -1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-bottom-start {
+                @if $translate {
+                    transform: translate( 1% * $translate, 1% * $translate );
+                }
+            }
+            &.k-bottom-end {
+                @if $translate {
+                    transform: translate( -1% * $translate, 1% * $translate );
+                }
+            }
+        }
+    }
+
+
+    // Border cutout
+    .k-badge-border-cutout {
+        box-shadow: 0 0 0 2px $kendo-component-bg;
+    }
+
+}
+
+
+@mixin kendo-badge--layout() {
+    @include kendo-badge--layout-base();
+}

package/scss/components/badge/_theme.scss

@@ -0,0 +1,34 @@
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../_variables.scss" as *;
+
+@mixin kendo-badge--theme-base() {
+
+    // Solid badges
+    @each $name, $color in $kendo-theme-colors {
+        .k-badge-solid-#{$name} {
+            border-color: $color;
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            background-color: $color;
+        }
+    }
+
+    // Outline badges
+    .k-badge-outline {
+        border-color: currentColor;
+        background-color: transparent;
+    }
+
+    @each $name, $color in $kendo-theme-colors {
+        .k-badge-outline-#{$name} {
+            color: $color;
+        }
+    }
+
+}
+
+
+@mixin kendo-badge--theme() {
+    @include kendo-badge--theme-base();
+}

package/scss/components/badge/_variables.scss

@@ -0,0 +1,33 @@
+// Badge
+
+$kendo-badge-border-width: null !default;
+
+$kendo-badge-border-radius: null !default;
+
+
+$kendo-badge-padding-x: null !default;
+$kendo-badge-sm-padding-x: null !default;
+$kendo-badge-md-padding-x: null !default;
+$kendo-badge-lg-padding-x: null !default;
+
+$kendo-badge-padding-y: null !default;
+$kendo-badge-sm-padding-y: null !default;
+$kendo-badge-md-padding-y: null !default;
+$kendo-badge-lg-padding-y: null !default;
+
+$kendo-badge-font-size: null !default;
+$kendo-badge-sm-font-size: null !default;
+$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit )!default;
+$kendo-badge-lg-font-size: null !default;
+
+$kendo-badge-line-height: null !default;
+$kendo-badge-sm-line-height: null !default;
+$kendo-badge-md-line-height: null !default;
+$kendo-badge-lg-line-height: null !default;
+
+$kendo-badge-min-width: null !default;
+$kendo-badge-sm-min-width: null !default;
+$kendo-badge-md-min-width: null !default;
+$kendo-badge-lg-min-width: null !default;
+
+$kendo-badge-sizes: null !default;

package/scss/components/bottom-navigation/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-bottom-navigation--styles() {
+    @include import-once( "bottom-navigation" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-bottom-navigation--layout();
+        @include kendo-bottom-navigation--theme();
+        @include kendo-utils--layout--position();
+    }
+}