@progress/kendo-theme-fluent 5.7.0

package/scss/core/helpers/_base.scss

@@ -0,0 +1,146 @@
+@use "../mixins" as *;
+@use "../variables" as *;
+@use "../color-system" as *;
+
+// Disabled state
+.k-disabled,
+.k-widget[disabled],
+.k-disabled {
+    @include disabled(
+        var( --kendo-disabled-text, inherit ),
+        var( --kendo-disabled-bg, inherit ),
+        var( --kendo-disabled-border, inherit )
+    );
+
+    .k-link {
+        cursor: default;
+        outline: 0;
+    }
+}
+
+// Horizontal line
+.k-hr {
+    margin-block: 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;
+    -ms-high-contrast-adjust: none;
+}
+
+.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 {
+    // sass-lint:disable-block no-important
+    display: none !important;
+}
+
+// Placeholder
+.k-placeholder-line {
+    width: 100%;
+    height: 10px;
+    background-color: get-theme-color-var( neutral-20 );
+    display: inline-block;
+}
+
+// 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/core/helpers/_extra.scss

@@ -0,0 +1,22 @@
+// Hidden
+.k-hidden {
+    display: none !important; // sass-lint:disable-line no-important
+}
+
+
+// RTL
+.k-rtl {
+    direction: rtl;
+}
+
+
+/// @name k-sr-only
+/// @description This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+/// @group extra
+.k-sr-only {
+    position: absolute;
+    left: -1px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}

package/scss/core/helpers/_index.scss

@@ -0,0 +1,11 @@
+@use "asp-fallback";
+@use "animations";
+@use "base";
+@use "extra";
+@use "reset";
+@use "normalize";
+@use "layout";
+@use "loading";
+@use "resizing";
+@use "selection";
+@use "spacer";

package/scss/core/helpers/_layout.scss

@@ -0,0 +1,64 @@
+// Basic layout
+.k-hbox,
+.k-hstack {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.k-vbox,
+.k-vstack {
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+.k-flex,
+.k-spacer {
+    flex: 1 0 0%;
+}
+
+
+// Stack layout
+.k-stack-layout {}
+
+
+// Flex layout
+.k-flex-layout {
+    display: flex;
+}
+
+
+// Grid layout
+.k-grid-layout {
+    display: grid;
+}
+
+
+// Separator
+.k-separator {
+    width: auto;
+    height: 0;
+    border-width: 1px 0 0;
+    border-style: solid;
+    border-color: inherit;
+    display: block;
+    flex-grow: 0 !important; // sass-lint:disable-line no-important
+    flex-shrink: 0 !important; // sass-lint:disable-line no-important
+    align-self: stretch;
+}
+.k-separator-horizontal,
+.k-vstack > .k-separator {
+    width: auto;
+    height: 0;
+    border-width: 1px 0 0;
+}
+.k-separator-vertical,
+.k-hstack > .k-separator {
+    width: 0;
+    height: auto;
+    border-width: 0 0 0 1px;
+}
+
+hr.k-separator {
+    margin: 0;
+    padding: 0;
+}

package/scss/core/helpers/_loading.scss

@@ -0,0 +1,120 @@
+@use "../variables" as *;
+@use "../color-system" as *;
+
+// 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 ); // sass-lint:disable-line no-duplicate-properties
+    font-size: 4em;
+}
+
+// Loading animation
+@keyframes k-loading-animation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/scss/core/helpers/_normalize.scss

@@ -0,0 +1,11 @@
+// Hidden attribute
+[hidden] {
+    display: none !important; // sass-lint:disable-line no-important
+}
+
+
+// Hide script tags
+// see https://github.com/telerik/kendo-themes/issues/2360
+script {
+    display: none !important; // sass-lint:disable-line no-important
+}

package/scss/core/helpers/_reset.scss

@@ -0,0 +1,19 @@
+// Layout
+.k-reset {
+    margin: 0;
+    padding: 0;
+    border-width: 0;
+    outline: 0;
+    text-decoration: none;
+    font: inherit;
+    list-style: none;
+}
+
+// Links
+.k-link,
+.k-link:hover {
+    color: inherit;
+    text-decoration: none;
+    outline: 0;
+    cursor: pointer;
+}

package/scss/core/helpers/_resizing.scss

@@ -0,0 +1,120 @@
+// Resize handle
+.k-resize-handle,
+.k-resize-hint {
+    position: absolute;
+    border-color: inherit;
+    z-index: 200;
+}
+.k-resize-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.k-resize-handle::before {
+    content: "";
+    border: 0 solid;
+    border-color: inherit;
+}
+.k-resize-n {
+    width: 100%;
+    height: 6px;
+    flex-direction: row;
+    left: 0;
+    top: -3px;
+    cursor: n-resize;
+}
+.k-resize-s {
+    width: 100%;
+    height: 6px;
+    flex-direction: row;
+    left: 0;
+    bottom: -3px;
+    cursor: s-resize;
+}
+.k-resize-w {
+    width: 6px;
+    height: 100%;
+    flex-direction: column;
+    top: 0;
+    left: -3px;
+    cursor: w-resize;
+}
+.k-resize-e {
+    width: 6px;
+    height: 100%;
+    flex-direction: column;
+    top: 0;
+    right: -3px;
+    cursor: e-resize;
+}
+
+.k-resize-sw,
+.k-resize-se,
+.k-resize-nw,
+.k-resize-ne {
+    width: 5px;
+    height: 5px;
+}
+
+.k-resize-sw {
+    cursor: sw-resize;
+    bottom: 0;
+    left: 0;
+}
+.k-resize-se {
+    cursor: se-resize;
+    bottom: 0;
+    right: 0;
+}
+.k-resize-nw {
+    cursor: nw-resize;
+    top: 0;
+    left: 0;
+}
+.k-resize-ne {
+    cursor: ne-resize;
+    top: 0;
+    right: 0;
+}
+
+.k-vertical-resize {
+    cursor: row-resize;
+}
+.k-horizontal-resize {
+    cursor: col-resize;
+}
+
+
+.k-resize-hint {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .k-resize-hint-handle {
+        width: auto;
+        height: 20px;
+        align-self: stretch;
+    }
+    .k-resize-hint-marker {
+        width: 2px;
+        height: auto;
+        flex: 1 1 auto;
+    }
+}
+.k-resize-hint-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .k-resize-hint-handle {
+        width: 20px;
+        height: auto;
+        align-self: stretch;
+    }
+
+    .k-resize-hint-marker {
+        width: auto;
+        height: 2px;
+        flex: 1 1 auto;
+    }
+}

package/scss/core/helpers/_selection.scss

@@ -0,0 +1,27 @@
+@use "../color-system" as *;
+
+.k-marquee {
+    border-width: 1px;
+    border-style: solid;
+    border-color: get-theme-color-var( primary-100 );
+    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: $white;
+    background-color: get-theme-color-var( primary-100 );
+    opacity: .3;
+}
+.k-marquee-text {
+    color: $white;
+}

package/scss/core/helpers/_spacer.scss

@@ -0,0 +1,13 @@
+/// @name k-spacer
+/// @description This is equivalent to `flex: 1 0 auto;`. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.
+/// @group spacer
+.k-spacer {
+    flex: 1 0 auto;
+}
+
+/// @name k-spacer-sized
+/// @description This is equivalent to `flex-grow: 0;`. The spacer will not take any of the remaining space in a flex container.
+/// @group spacer
+.k-spacer-sized {
+    flex-grow: 0;
+}

package/scss/core/mixins/_border-radius.scss

@@ -0,0 +1,60 @@
+@use "../_variables.scss" as *;
+
+// Border radius
+@mixin border-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: $radius;
+    }
+}
+
+@mixin border-top-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-top-left-radius: $radius;
+        border-top-right-radius: $radius;
+    }
+}
+
+@mixin border-right-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-top-right-radius: $radius;
+        border-bottom-right-radius: $radius;
+    }
+}
+
+@mixin border-bottom-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-bottom-right-radius: $radius;
+        border-bottom-left-radius: $radius;
+    }
+}
+
+@mixin border-left-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-top-left-radius: $radius;
+        border-bottom-left-radius: $radius;
+    }
+}
+
+@mixin border-top-radius-only( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: $radius $radius 0 0;
+    }
+}
+
+@mixin border-right-radius-only( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: 0 $radius $radius 0;
+    }
+}
+
+@mixin border-bottom-radius-only( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: 0 0 $radius $radius;
+    }
+}
+
+@mixin border-left-radius-only( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: $radius 0 0 $radius;
+    }
+}

package/scss/core/mixins/_box-shadow.scss

@@ -0,0 +1,7 @@
+@use "../_variables.scss" as *;
+
+@mixin box-shadow( $shadow... ) {
+    @if $enable-shadows and nth($shadow, 1) {
+        box-shadow: $shadow;
+    }
+}

package/scss/core/mixins/_decoration.scss

@@ -0,0 +1,27 @@
+@use "../_variables.scss" as *;
+
+@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 $enable-gradients {
+        @if $gradient == none {
+            background-image: none;
+        }
+        @else {
+            background-image: linear-gradient( $gradient );
+        }
+    }
+}

package/scss/core/mixins/_disabled.scss

@@ -0,0 +1,10 @@
+// Disabled
+@mixin disabled( $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/core/mixins/_hide-scrollbar.scss

@@ -0,0 +1,13 @@
+// Infinite calendar and timepicker
+@mixin hide-scrollbar($max-scrollbar: 100px) {
+    // anything larger than the scrollbar width will do
+    $scrollbar-size: 17px;
+    $margin: -$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/core/mixins/_index.scss

@@ -0,0 +1,6 @@
+@forward "decoration";
+@forward "disabled";
+@forward "box-shadow";
+@forward "border-radius";
+@forward "typography";
+@forward "hide-scrollbar";

package/scss/core/mixins/_typography.scss

@@ -0,0 +1,17 @@
+@mixin typography($font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null) {
+    @if $font-size {
+        font-size: $font-size;
+    }
+    @if $font-family {
+        font-family: $font-family;
+    }
+    @if $line-height {
+        line-height: $line-height;
+    }
+    @if $font-weight {
+        font-weight: $font-weight;
+    }
+    @if $letter-spacing {
+        letter-spacing: $letter-spacing;
+    }
+}