@progress/kendo-theme-fluent 5.7.0

package/scss/floating-label/_variables.scss

@@ -0,0 +1,67 @@
+@use "../core/" as *;
+@use "../core/color-system" as *;
+@use "../input/_variables.scss" as *;
+
+/// The resize scale of the floating label
+/// @group floating-label
+$kendo-floating-label-scale: 1 !default;
+
+/// The font size of the floating label
+/// @group floating-label
+$kendo-floating-label-font-size: var( --kendo-font-size, inherit ) !default;
+
+/// The font weight of the floating label
+/// @group floating-label
+$kendo-floating-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default;
+
+/// The line height of the floating label
+/// @group floating-label
+$kendo-floating-label-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The height of the floating label
+/// @group floating-label
+$kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;
+
+/// The horizontal offset of the floating label
+/// @group floating-label
+$kendo-floating-label-offset-x: calc( #{$kendo-input-padding-x-md} + #{$kendo-input-border-width} ) !default;
+
+/// The vertical offset of the floating label
+/// @group floating-label
+$kendo-floating-label-offset-y: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y-md} ) !default;
+
+/// The focus resize scale of the floating label
+/// @group floating-label
+$kendo-floating-label-focus-scale: 1 !default;
+
+/// The horizontal focus offset of the floating label
+/// @group floating-label
+$kendo-floating-label-focus-offset-x: 0 !default;
+
+/// The vertical focus offset of the floating label
+/// @group floating-label
+$kendo-floating-label-focus-offset-y: 0 !default;
+
+/// The transition of the floating label
+/// @group floating-label
+$kendo-floating-label-transition: .2s ease-out !default;
+
+/// The background color of the floating label
+/// @group floating-label
+$kendo-floating-label-bg: inherit !default;
+
+/// The text color of the floating label
+/// @group floating-label
+$kendo-floating-label-text: inherit !default;
+
+/// The focus background color of the floating label
+/// @group floating-label
+$kendo-floating-label-focus-bg: inherit !default;
+
+/// The focus text color of the floating label
+/// @group floating-label
+$kendo-floating-label-focus-text: inherit !default;
+
+/// The invalid text color of the floating label
+/// @group floating-label
+$kendo-floating-label-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;

package/scss/floating-label/index.scss

@@ -0,0 +1,24 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "floating-label",
+    dependencies: (
+        "input"
+    )
+);
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "floating-label" ) {
+        @include kendo-floating-label--layout();
+        @include kendo-floating-label--theme();
+    }
+}

package/scss/forms/_layout.scss

@@ -0,0 +1,326 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+@use "../input/_variables.scss" as *;
+@use "../window/_variables.scss" as *;
+
+@mixin kendo-forms--layout() {
+
+    // Common
+    .k-form,
+    .k-form-inline {
+        font-size: var( --kendo-form-font-size, #{$kendo-form-font-size} );
+        line-height: var( --kendo-form-line-height, #{$kendo-form-line-height} );
+
+        .k-form-field > .k-label {
+            font-weight: var( --kendo-form-label-font-weight, #{$kendo-form-label-font-weight} );
+        }
+    }
+
+    // Label
+    kendo-label > .k-label {
+        margin: 0;
+    }
+
+    .k-label-optional {
+        margin-inline-start: var( --kendo-label-optional-margin-x, #{$kendo-label-optional-margin-x} );
+        font-size: var(--kendo-label-optional-font-size, #{$kendo-label-optional-font-size} );
+        font-style: var( --kendo-label-optional-font-style, #{$kendo-label-optional-font-style} );
+        align-self: center;
+    }
+
+    .k-label-empty {
+        &::before {
+            content: "";
+            display: inline-block;
+        }
+    }
+
+    .k-input-label {
+        margin-inline-end: var( --kendo-horizontal-form-label-margin-x, #{$kendo-horizontal-form-label-margin-x} );
+        z-index: 1;
+    }
+
+
+    // Vertical Form
+    .k-form {
+        border: 0;
+
+        .k-label,
+        kendo-label,
+        .k-form-label {
+            margin-block-end: var( --kendo-form-label-margin-bottom, #{$kendo-form-label-margin-bottom} );
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
+        .k-label + .k-radio {
+            margin-inline-start: 0;
+        }
+
+        .k-form-fieldset {
+            margin: var( --kendo-form-fieldset-margin, #{$kendo-form-fieldset-margin} );
+            padding: var( --kendo-form-fieldset-padding, #{$kendo-form-fieldset-padding} );
+            border: 0;
+
+            > * {
+                &:not(.k-hidden):first-child,
+                &.k-hidden + :not(.k-hidden) {
+                    margin-block-start: 0;
+                }
+            }
+        }
+
+        .k-form-legend {
+            margin: var( --kendo-form-legend-margin, #{$kendo-form-legend-margin} );
+            padding: var( --kendo-form-legend-padding, #{$kendo-form-legend-padding} );
+            border-width: var( --kendo-form-legend-border-width, #{$kendo-form-legend-border-width} );
+            border-style: var( --kendo-form-legend-border-style, #{$kendo-form-legend-border-style} );
+            width: var( --kendo-form-legend-width, #{$kendo-form-legend-width} );
+            font-size: var( --kendo-form-legend-font-size, #{$kendo-form-legend-font-size} );
+            text-transform: var( --kendo-form-legend-text-transform, #{$kendo-form-legend-text-transform} );
+        }
+
+
+        // Form group
+        .k-form-group {
+            padding: 0;
+        }
+
+        .k-form-field {
+            margin-block-start: var( --kendo-form-field-margin-top, #{$kendo-form-field-margin-top} );
+        }
+
+        > * {
+            &:not(.k-hidden):first-child,
+            &.k-hidden + :not(.k-hidden) {
+                margin-block-start: 0;
+            }
+        }
+
+        // Form field
+        .k-form-field,
+        .k-form-field-wrap {
+            display: block;
+        }
+
+
+        .k-alert-error {
+            font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
+            margin-block-start: calc( var( --kendo-padding-y, #{$kendo-padding-y} )  * 2 );
+        }
+
+        .k-field-info {
+            display: inline-block;
+            font-size: var( --kendo-font-size-xs, #{$kendo-font-size-xs} );
+            line-height: 1;
+            margin-inline: var( --kendo-padding-x, #{$kendo-padding-x} );
+        }
+
+
+        .k-multiselect,
+        .k-floating-label-container,
+        .k-daterangepicker .k-dateinput,
+        .k-signature {
+            display: inline-flex;
+            width: 100%;
+        }
+    }
+
+    // Form Buttons Container
+    .k-form-buttons {
+        @extend .k-actions;
+        margin-block-start: calc( var( --kendo-form-field-margin-top, #{$kendo-form-field-margin-top} ) * 2 );
+        padding: 0;
+        overflow: visible;
+    }
+
+    // Form Hint/Error Messages
+    .k-form-hint,
+    .k-form-error {
+        margin-block-start: var( --kendo-form-hint-margin-top, #{$kendo-form-hint-margin-top} );
+        display: flex;
+        font-size: var( --kendo-form-hint-font-size, #{$kendo-form-hint-font-size} );
+        font-style: var( --kendo-form-hint-font-style, #{$kendo-form-hint-font-style} );
+    }
+
+    .k-text-start,
+    .k-buttons-start {
+        justify-content: flex-start;
+    }
+
+    .k-text-end,
+    .k-buttons-end {
+        justify-content: flex-end;
+    }
+
+    // Form Separator
+    .k-form-separator {
+        margin: var( --kendo-form-separator-margin, #{$kendo-form-separator-margin} );
+        border-width: 1px 0 0;
+        border-style: solid;
+        display: block;
+        flex: 0 0 auto;
+    }
+
+    // Horizontal Form
+    .k-form-horizontal {
+        .k-form-field {
+            display: flex;
+
+            > .k-label,
+            > kendo-label,
+            > .k-form-label {
+                margin-inline-end: var( --kendo-horizontal-form-label-margin-x, #{$kendo-horizontal-form-label-margin-x} );
+                padding-block-start: var( --kendo-horizontal-form-label-padding-top, #{$kendo-horizontal-form-label-padding-top} );
+                width: var( --kendo-horizontal-form-label-width, #{$kendo-horizontal-form-label-width} );
+                text-align: end;
+                flex-direction: column;
+                align-items: var( --kendo-horizontal-form-label-align, #{$kendo-horizontal-form-label-align} );
+                justify-content: flex-start;
+            }
+            .k-label-optional {
+                margin: 0;
+                align-self: inherit;
+            }
+        }
+
+        .k-form-field-wrap {
+            max-width: var( --kendo-horizontal-form-field-wrap-max-width, #{$kendo-horizontal-form-field-wrap-max-width} );
+            flex: 1 1 auto;
+        }
+    }
+
+    // Scheduler
+    .k-form-inline {
+        padding: var( --kendo-form-spacer #{$kendo-form-spacer} );
+
+        fieldset {
+            border-width: 1px 0 0;
+            border-style: solid;
+            margin-block: calc( var( --kendo-form-spacer, #{$kendo-form-spacer}) * 2 );
+            padding: 0;
+
+            &:first-child:first-of-type {
+                margin-block-start: 0;
+            }
+
+            &:last-child:last-of-type {
+                margin-block-end: 0;
+            }
+        }
+
+        legend {
+            font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
+            text-align: left;
+            font-weight: 600;
+            line-height: 1;
+            margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-y-lg} ) * 2 );
+            text-transform: uppercase;
+            padding-inline-end: var( --kendo-padding-x, #{$kendo-padding-x} );
+            width: auto;
+        }
+
+        .k-form-field {
+            display: flex;
+            align-items: flex-start;
+            text-align: left;
+            margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-y-lg} ) * 2 );
+
+            > span:not(.k-widget) {
+                width: var( --kendo-inline-form-element-width, #{$kendo-inline-form-element-width} );
+                text-align: right;
+                line-height: var( --kendo-line-height, #{$kendo-line-height} );
+                padding-block: calc( #{$kendo-padding-y} + #{$kendo-input-border-width} );
+                padding-inline-end: var( --kendo-padding-x-lg, #{$kendo-padding-x-lg} );
+                align-self: center;
+            }
+
+            > input {
+                align-self: center;
+            }
+
+            > input:not(.k-checkbox):not(.k-radio) {
+                flex: 1 1 auto;
+            }
+
+            .k-alert-error {
+                font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
+                margin-block-start: calc( var( --kendo-padding-y, #{$kendo-padding-y} ) * 2 );
+            }
+
+            .k-field-info {
+                display: block;
+                font-size: var( --kendo-font-size-xs, #{$kendo-font-size-xs} );
+                line-height: 1;
+                margin: 0;
+            }
+
+            &:last-child {
+                margin-block-end: 0;
+            }
+        }
+    }
+
+    // Edit form
+    .k-edit-form-container {
+        width: 400px;
+        min-width: 400px;
+        border-color: inherit;
+        position: relative;
+    }
+
+
+    // Action buttons
+    .k-popup-edit-form > .k-actions,
+    .k-edit-form-container .k-actions {
+        margin: map-get( $kendo-spacing, 4 ) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
+    }
+
+
+    .k-edit-label {
+        margin-block-end: map-get( $kendo-spacing, 4 );
+        padding-block: calc( #{$kendo-input-padding-y-md} + #{$kendo-input-border-width} );
+        width: 30%;
+        line-height: var( --kendo-form-line-height, #{$kendo-form-line-height} );
+        text-align: right;
+        float: left;
+        clear: both;
+    }
+    .k-edit-field {
+        margin-block-end: map-get( $kendo-spacing, 4 );
+        width: 65%;
+        float: right;
+        clear: right;
+        position: relative;
+
+        &.k-no-editor {
+            padding-block: calc( #{$kendo-input-padding-y-md} + #{$kendo-input-border-width} );
+        }
+    }
+
+    .k-edit-field {
+
+        > .k-widget {
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        input[type="radio"]:not(.k-radio),
+        input[type="checkbox"]:not(.k-checkbox) {
+            margin-inline-end: .4ex;
+        }
+
+        .k-radio-label,
+        .k-checkbox-label {
+            margin-inline-end: map-get( $kendo-spacing, 4 );
+        }
+
+        > .k-reset > li + li {
+            margin-block-start: calc( map-get( $kendo-spacing, 4 ) / 2 );
+        }
+
+        .k-reset .k-widget {
+            margin: 0 .4ex 0 1ex;
+        }
+    }
+}

package/scss/forms/_theme.scss

@@ -0,0 +1,44 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-forms--theme() {
+
+    .k-form,
+    .k-form-inline {
+        @include fill( $color: var( --kendo-form-text, #{$kendo-body-text} ) );
+
+        fieldset {
+            legend {
+                @include fill( $color: var( --kendo-fieldset-legend-text, #{$kendo-fieldset-legend-text} ) );
+            }
+        }
+
+        .k-form-legend {
+            @include fill( $border: var( --kendo-form-legend-border-color, #{$kendo-form-legend-border-color} ) );
+        }
+
+        .k-field-info {
+            @include fill( $color: var( --kendo-field-info-text, #{$kendo-subtle-text} ) );
+        }
+
+        .k-alert-error {
+            @include fill( $color: var( --kendo-forms-invalid-color, #{$kendo-forms-invalid-color} ) );
+        }
+    }
+
+    .k-form-error,
+    .k-text-error,
+    .k-form-field-error .k-label {
+        @include fill( $color: var( --kendo-forms-invalid-color, #{$kendo-forms-invalid-color} ) );
+    }
+
+    .k-form-separator {
+        @include fill( $border: var( --kendo-form-separator-border-color, #{$kendo-form-separator-border-color} ) );
+    }
+
+    .k-form-hint,
+    .k-label-optional {
+        @include fill( $color: var( --kendo-form-hint-text, #{$kendo-form-hint-text} ) );
+    }
+
+}

package/scss/forms/_variables.scss

@@ -0,0 +1,143 @@
+@use "../core/" as *;
+
+/// The padding of the inline form
+/// @group form
+$kendo-form-spacer: calc( #{$kendo-padding-x} * 2 ) !default;
+
+/// The font size of the form
+/// @group form
+$kendo-form-font-size: var( --kendo-font-size, inherit ) !default;
+
+/// The line heights of the form
+/// @group form
+$kendo-form-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-form-line-height-em: $kendo-line-height-em !default;
+$kendo-form-line-height-sm: var( --kendo-line-height-sm, normal ) !default;
+$kendo-form-line-height-lg: var( --kendo-line-height-lg, normal ) !default;
+
+/// The margin of the form fieldset
+/// @group form
+$kendo-form-fieldset-margin: 2em 0 0 !default;
+
+/// The padding of the form fieldset
+/// @group form
+$kendo-form-fieldset-padding: 0px !default;
+
+/// The margin of the form legend
+/// @group form
+$kendo-form-legend-margin: 0 0 map-get( $kendo-spacing, 3 ) !default;
+
+/// The padding of the form legend
+/// @group form
+$kendo-form-legend-padding: 0px !default;
+
+/// The border width of the form legend
+/// @group form
+$kendo-form-legend-border-width: 0 0 map-get( $kendo-spacing, thin ) !default;
+
+/// The border style of the form legend
+/// @group form
+$kendo-form-legend-border-style: solid !default;
+
+/// The border color of the form legend
+/// @group form
+$kendo-form-legend-border-color: var( --kendo-component-border, initial ) !default;
+
+/// The width of the form legend
+/// @group form
+$kendo-form-legend-width: 100% !default;
+
+/// The font size of the form legend
+/// @group form
+$kendo-form-legend-font-size: var( --kendo-font-size, inherit ) !default;
+
+/// The text capitalization of the form legend
+/// @group form
+$kendo-form-legend-text-transform: uppercase !default;
+
+
+/// The bottom margin of the form label
+/// @group form
+$kendo-form-label-margin-bottom: map-get( $kendo-spacing, 2 ) !default;
+
+/// The font weight of the form label
+/// @group form
+$kendo-form-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default;
+
+/// The horizontal margin of the form button
+/// @group form
+$kendo-form-button-margin-x: map-get( $kendo-spacing, 2 ) !default;
+
+/// The font size of the form hint
+/// @group form
+$kendo-form-hint-font-size: var( --kendo-font-size-sm, inherit ) !default;
+
+/// The font style of the form hint
+/// @group form
+$kendo-form-hint-font-style: normal !default;
+
+/// The top margin of the form hint
+/// @group form
+$kendo-form-hint-margin-top: map-get( $kendo-spacing, 1 ) !default;
+
+/// The text color of the font hint
+/// @group form
+$kendo-form-hint-text: get-theme-color-var( neutral-130 );
+
+/// The top margin of the form field
+/// @group form
+$kendo-form-field-margin-top: map-get( $kendo-spacing, 3 ) !default;
+
+/// The margin of the form separator
+/// @group form
+$kendo-form-separator-margin: $kendo-form-field-margin-top 0 0 !default;
+
+/// The border color of the form separator
+/// @group form
+$kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
+
+/// The top padding of the horizontal form label
+/// @group form
+$kendo-horizontal-form-label-padding-top: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+
+/// The horizontal margin of the horizontal form
+/// @group form
+$kendo-horizontal-form-label-margin-x: map-get( $kendo-spacing, 2 ) !default;
+
+/// The width of the horizontal form label
+/// @group form
+$kendo-horizontal-form-label-width: 25% !default;
+
+/// The horizontal alignment of the form label
+$kendo-horizontal-form-label-align: flex-end !default;
+
+/// The max-width of the horizontal form
+/// @group form
+$kendo-horizontal-form-field-wrap-max-width: calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) !default;
+
+/// The width of the element of the inline form
+/// @group form
+$kendo-inline-form-element-width: 25% !default;
+
+/// The invalid text color of the form
+/// @group form
+$kendo-forms-invalid-color: var( --kendo-invalid-text, initial ) !default;
+
+
+// Label
+$kendo-label-optional-margin-x: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-label-optional-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-label-optional-font-style: normal !default;
+
+
+// Fieldset
+$kendo-fieldset-margin: map-get( $kendo-spacing, 8 ) - map-get( $kendo-spacing, thin ) !default;
+$kendo-fieldset-font-size: var( --kendo-font-size-xl, inherit ) !default;
+
+$kendo-fieldset-bg: transparent !default;
+$kendo-fieldset-text: inherit !default;
+$kendo-fieldset-border: initial !default;
+
+$kendo-fieldset-legend-bg: transparent !default;
+$kendo-fieldset-legend-text: get-theme-color-var( neutral-130 ) !default;
+$kendo-fieldset-legend-border: initial !default;

package/scss/forms/index.scss

@@ -0,0 +1,30 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "forms",
+    dependencies: (
+        "tooltip",
+        "button",
+        "input",
+        "toolbar",
+        "action-buttons",
+        "window"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "forms" ) {
+        @include kendo-forms--layout();
+        @include kendo-forms--theme();
+    }
+}