diff --git a/packages/fluent/scss/forms/_layout.scss b/packages/fluent/scss/forms/_layout.scss new file mode 100644 index 00000000000..c19702c43f1 --- /dev/null +++ b/packages/fluent/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: 0 var( --kendo-padding-x, #{$kendo-padding-x} ) 0 0; + 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; + } + } +} diff --git a/packages/fluent/scss/forms/_theme.scss b/packages/fluent/scss/forms/_theme.scss new file mode 100644 index 00000000000..44a92226a04 --- /dev/null +++ b/packages/fluent/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} ) ); + } + +} diff --git a/packages/fluent/scss/forms/_variables.scss b/packages/fluent/scss/forms/_variables.scss new file mode 100644 index 00000000000..bd04aab7bdd --- /dev/null +++ b/packages/fluent/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: 0px !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; diff --git a/packages/fluent/scss/forms/index.scss b/packages/fluent/scss/forms/index.scss new file mode 100644 index 00000000000..600c822ca0f --- /dev/null +++ b/packages/fluent/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(); + } +} diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss index 151bc948abf..d068ec51a30 100644 --- a/packages/fluent/scss/index.scss +++ b/packages/fluent/scss/index.scss @@ -39,7 +39,7 @@ // Form helpers -// @use "forms"; +@use "forms"; // @use "validator"; @use "floating-label"; @@ -203,7 +203,7 @@ // Form helpers - // @include forms.styles(); + @include forms.styles(); // @include validator.styles(); @include floating-label.styles();