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

package/scss/floating-label/_variables.scss

@@ -51,3 +51,21 @@ $kendo-floating-label-focus-bg: null !default;
 /// The text color of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-text: null !default;
+
+@forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
+    $kendo-floating-label-scale: $kendo-floating-label-scale,
+    $kendo-floating-label-font-size: $kendo-floating-label-font-size,
+    $kendo-floating-label-max-width: $kendo-floating-label-max-width,
+    $kendo-floating-label-line-height: $kendo-floating-label-line-height,
+    $kendo-floating-label-height: $kendo-floating-label-height,
+    $kendo-floating-label-offset-x: $kendo-floating-label-offset-x,
+    $kendo-floating-label-offset-y: $kendo-floating-label-offset-y,
+    $kendo-floating-label-focus-scale: $kendo-floating-label-focus-scale,
+    $kendo-floating-label-focus-offset-x: $kendo-floating-label-focus-offset-x,
+    $kendo-floating-label-focus-offset-y: $kendo-floating-label-focus-offset-y,
+    $kendo-floating-label-transition: $kendo-floating-label-transition,
+    $kendo-floating-label-bg: $kendo-floating-label-bg,
+    $kendo-floating-label-text: $kendo-floating-label-text,
+    $kendo-floating-label-focus-bg: $kendo-floating-label-focus-bg,
+    $kendo-floating-label-focus-text: $kendo-floating-label-focus-text
+);

package/scss/forms/_layout.scss

@@ -1,382 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-@use "../input/_variables.scss" as *;
-
-@mixin kendo-form--layout-base() {
-
-    // Common
-    .k-form,
-    .k-form-inline {
-        font-size: $kendo-form-font-size;
-        line-height: $kendo-form-line-height;
-    }
-
-
-    // Fieldset
-    .k-fieldset {
-        margin: $kendo-fieldset-margin;
-        border-width: 1px 0 0;
-        border-style: solid;
-        padding: 25px 0 0;
-
-        > legend {
-            margin-left: 0;
-            padding: $kendo-fieldset-legend-padding;
-            text-transform: uppercase;
-        }
-    }
-
-
-    // Label
-    kendo-label > .k-label {
-        margin: 0;
-    }
-
-    .k-label-optional {
-        margin-left: $kendo-label-optional-margin-x;
-        font-size: $kendo-label-optional-font-size;
-        font-style: $kendo-label-optional-font-style;
-        align-self: center;
-    }
-
-    .k-label-empty {
-        &::before {
-            content: "";
-            display: inline-block;
-        }
-    }
-
-
-
-    // Vertical Form
-    .k-form {
-        border: 0;
-
-        .k-form-field > .k-label,
-        .k-form-field > kendo-label,
-        .k-form-label {
-            margin-bottom: $kendo-form-label-margin-bottom;
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-        .k-label + .k-radio {
-            margin-left: 0;
-        }
-
-        .k-form-fieldset {
-            margin: $kendo-form-fieldset-margin;
-            padding: $kendo-form-fieldset-padding;
-            border: 0;
-
-            > * {
-                &:not(.k-hidden):first-child,
-                &.k-hidden + :not(.k-hidden) {
-                    margin-top: 0;
-                }
-            }
-        }
-
-        .k-form-legend {
-            margin: $kendo-form-legend-margin;
-            padding: $kendo-form-legend-padding;
-            border-width: $kendo-form-legend-border-width;
-            border-style: $kendo-form-legend-border-style;
-            width: $kendo-form-legend-width;
-            font-size: $kendo-form-legend-font-size;
-            text-transform: $kendo-form-legend-text-transform;
-        }
-
-
-        // Form group
-        .k-form-group {
-            padding: 0;
-        }
-
-        > * {
-            &:not(.k-hidden):first-child,
-            &.k-hidden + :not(.k-hidden) {
-                margin-top: 0;
-            }
-        }
-
-
-        // Form field
-        .k-form-field,
-        .k-form-field-wrap {
-            display: block;
-        }
-
-        .k-form-field-disabled {
-            .k-label,
-            .k-form-label {
-                @include disabled( $kendo-disabled-styling... );
-            }
-        }
-
-        .k-alert-error {
-            font-size: var( --kendo-font-size-sm, inherit );
-            margin-top: $kendo-form-alert-error-margin;
-        }
-
-        .k-field-info {
-            display: inline-block;
-            font-size: var( --kendo-font-size-xs, inherit );
-            line-height: 1;
-            margin-block: 0;
-            margin-inline: $kendo-form-field-info-margin;
-        }
-
-
-        .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 !optional;
-        padding: 0;
-        overflow: visible;
-    }
-
-    // Form Hint/Error Messages
-    .k-form-hint,
-    .k-form-error {
-        margin-top: $kendo-form-hint-margin-top;
-        display: flex;
-        font-size: $kendo-form-hint-font-size;
-        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: $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-right: $kendo-horizontal-form-label-margin-x;
-                padding-top: $kendo-horizontal-form-label-padding-top;
-                width: $kendo-horizontal-form-label-width;
-                text-align: end;
-                flex-direction: column;
-                align-items: $kendo-horizontal-form-label-align;
-                justify-content: flex-start;
-            }
-            .k-label-optional {
-                margin: 0;
-                align-self: inherit;
-            }
-        }
-
-        .k-form-field-wrap {
-            max-width: $kendo-horizontal-form-field-wrap-max-width;
-            flex: 1 1 auto;
-        }
-    }
-
-    // RTL Adjustments
-    .k-form [dir="rtl"],
-    .k-rtl .k-form {
-        .k-label-optional {
-            margin-left: 0;
-            margin-right: $kendo-label-optional-margin-x;
-        }
-    }
-
-    .k-form-horizontal [dir="rtl"],
-    .k-rtl .k-form-horizontal {
-        &.k-form-field,
-        .k-form-field {
-            > .k-label,
-            > kendo-label,
-            > .k-form-label {
-                margin-right: 0;
-                margin-left: $kendo-horizontal-form-label-margin-x;
-            }
-        }
-    }
-
-    // Sizes
-    @each $size, $size-props in $kendo-form-sizes {
-        $_form-rows-spacing: map.get($size-props, form-rows-spacing);
-
-        .k-form-#{$size} {
-            .k-form-field,
-            .k-form-buttons {
-                margin-top: $_form-rows-spacing;
-            }
-        }
-    }
-
-
-    // Scheduler
-    .k-form-inline {
-        padding: $kendo-form-spacer;
-
-        fieldset {
-            border-width: 1px 0 0;
-            border-style: solid;
-            margin: calc( #{$kendo-form-spacer} * 2 ) 0;
-            padding: 0;
-
-            &:first-child:first-of-type {
-                margin-top: 0;
-            }
-
-            &:last-child:last-of-type {
-                margin-bottom: 0;
-            }
-        }
-
-        legend {
-            font-size: var( --kendo-font-size-sm, inherit );
-            text-align: start;
-            font-weight: 600;
-            line-height: 1;
-            margin-bottom: $kendo-fieldset-legend-margin;
-            text-transform: uppercase;
-            padding: $kendo-fieldset-legend-padding;
-            width: auto;
-        }
-
-        .k-form-field {
-            display: flex;
-            align-items: flex-start;
-            text-align: start;
-            margin-bottom: $kendo-fieldset-legend-margin;
-
-            > span:not(.k-widget) {
-                width: $kendo-inline-form-element-width;
-                text-align: end;
-                line-height: var( --kendo-line-height, normal );
-                padding-block: $kendo-inline-form-field-padding-y;
-                padding-inline: $kendo-inline-form-field-padding-x;
-                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, inherit );
-                margin-top: $kendo-form-alert-error-margin;
-            }
-
-            .k-field-info {
-                display: block;
-                font-size: var( --kendo-font-size-xs, inherit );
-                line-height: 1;
-                margin: 0;
-            }
-
-            &:last-child {
-                margin-bottom: 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 {
-        // TODO: refactor
-        margin: k-spacing(4) calc(#{k-spacing(4)} * -1) calc(#{k-spacing(4)} * -1);
-    }
-
-
-    .k-edit-label {
-        margin: 0 0 k-spacing(4);
-        // TODO: do we need the input variable?
-        padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
-        width: 30%;
-        line-height: $kendo-form-line-height;
-        text-align: end;
-        float: left;
-        clear: both;
-    }
-    .k-edit-field {
-        margin: 0 0 k-spacing(4);
-        width: 65%;
-        float: right;
-        clear: right;
-        position: relative;
-
-        &.k-no-editor {
-            // TODO: do we need the input variable?
-            padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
-        }
-    }
-
-    .k-edit-field {
-
-        > .k-widget {
-            width: 100%;
-            box-sizing: border-box;
-        }
-
-        input[type="radio"]:not(.k-radio),
-        input[type="checkbox"]:not(.k-checkbox) {
-            margin-right: .4ex;
-        }
-
-        .k-radio-label,
-        .k-checkbox-label {
-            margin-right: k-spacing(4);
-        }
-
-        > .k-reset > li + li {
-            margin-top: k-spacing(2);
-        }
-
-        .k-reset .k-widget {
-            margin: 0 .4ex 0 1ex;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/forms/_layout.scss" as *;
 
 
 @mixin kendo-form--layout() {

package/scss/forms/_theme.scss

@@ -1,42 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-form--theme-base() {
-
-    .k-form,
-    .k-form-inline {
-        @include fill( $color: $kendo-body-text );
-
-        fieldset {
-            legend {
-                @include fill( $color: $kendo-fieldset-legend-text );
-            }
-        }
-
-        .k-form-legend {
-            @include fill( $border: $kendo-form-legend-border-color );
-        }
-
-        .k-field-info {
-            @include fill( $color: $kendo-subtle-text );
-        }
-
-        .k-alert-error {
-            @include fill( $color: $kendo-color-error );
-        }
-    }
-
-    .k-form-error,
-    .k-text-error,
-    .k-form-field-error .k-label {
-        @include fill( $color: $kendo-color-error );
-    }
-
-    .k-form-separator {
-        @include fill( $border: $kendo-form-separator-border-color );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/forms/_theme.scss" as *;
 
 
 @mixin kendo-form--theme() {

package/scss/forms/_variables.scss

@@ -194,3 +194,57 @@ $kendo-form-sizes: (
     )
 ) !default;
 
+
+@forward "@progress/kendo-theme-core/scss/components/forms/_variables.scss" with (
+    $kendo-form-spacer: $kendo-form-spacer,
+    $kendo-form-font-size: $kendo-form-font-size,
+    $kendo-form-line-height: $kendo-form-line-height,
+    $kendo-form-line-height-em: $kendo-form-line-height-em,
+    $kendo-form-sm-line-height: $kendo-form-sm-line-height,
+    $kendo-form-lg-line-height: $kendo-form-lg-line-height,
+    $kendo-form-fieldset-margin: $kendo-form-fieldset-margin,
+    $kendo-form-fieldset-padding: $kendo-form-fieldset-padding,
+    $kendo-form-legend-margin: $kendo-form-legend-margin,
+    $kendo-form-legend-padding: $kendo-form-legend-padding,
+    $kendo-form-legend-border-width: $kendo-form-legend-border-width,
+    $kendo-form-legend-border-style: $kendo-form-legend-border-style,
+    $kendo-form-legend-border-color: $kendo-form-legend-border-color,
+    $kendo-form-legend-width: $kendo-form-legend-width,
+    $kendo-form-legend-font-size: $kendo-form-legend-font-size,
+    $kendo-form-legend-text-transform: $kendo-form-legend-text-transform,
+    $kendo-form-label-margin-bottom: $kendo-form-label-margin-bottom,
+    $kendo-form-button-margin-x: $kendo-form-button-margin-x,
+    $kendo-form-hint-font-size: $kendo-form-hint-font-size,
+    $kendo-form-hint-font-style: $kendo-form-hint-font-style,
+    $kendo-form-hint-margin-top: $kendo-form-hint-margin-top,
+    $kendo-form-sm-rows-spacing: $kendo-form-sm-rows-spacing,
+    $kendo-form-md-rows-spacing: $kendo-form-md-rows-spacing,
+    $kendo-form-lg-rows-spacing: $kendo-form-lg-rows-spacing,
+    $kendo-form-separator-margin: $kendo-form-separator-margin,
+    $kendo-form-separator-border-color: $kendo-form-separator-border-color,
+    $kendo-horizontal-form-label-padding-top: $kendo-horizontal-form-label-padding-top,
+    $kendo-horizontal-form-label-margin-x: $kendo-horizontal-form-label-margin-x,
+    $kendo-horizontal-form-label-width: $kendo-horizontal-form-label-width,
+    $kendo-horizontal-form-label-align: $kendo-horizontal-form-label-align,
+    $kendo-horizontal-form-field-wrap-max-width: $kendo-horizontal-form-field-wrap-max-width,
+    $kendo-inline-form-element-width: $kendo-inline-form-element-width,
+    $kendo-inline-form-field-padding-x: $kendo-inline-form-field-padding-x,
+    $kendo-inline-form-field-padding-y: $kendo-inline-form-field-padding-y,
+    $kendo-forms-invalid-color: $kendo-forms-invalid-color,
+    $kendo-label-optional-margin-x: $kendo-label-optional-margin-x,
+    $kendo-label-optional-font-size: $kendo-label-optional-font-size,
+    $kendo-label-optional-font-style: $kendo-label-optional-font-style,
+    $kendo-fieldset-margin: $kendo-fieldset-margin,
+    $kendo-fieldset-font-size: $kendo-fieldset-font-size,
+    $kendo-fieldset-bg: $kendo-fieldset-bg,
+    $kendo-fieldset-text: $kendo-fieldset-text,
+    $kendo-fieldset-border: $kendo-fieldset-border,
+    $kendo-fieldset-legend-padding: $kendo-fieldset-legend-padding,
+    $kendo-fieldset-legend-margin: $kendo-fieldset-legend-margin,
+    $kendo-form-alert-error-margin: $kendo-form-alert-error-margin,
+    $kendo-form-field-info-margin: $kendo-form-field-info-margin,
+    $kendo-fieldset-legend-bg: $kendo-fieldset-legend-bg,
+    $kendo-fieldset-legend-text: $kendo-fieldset-legend-text,
+    $kendo-fieldset-legend-border: $kendo-fieldset-legend-border,
+    $kendo-form-sizes: $kendo-form-sizes
+);