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

package/scss/components/filter/_variables.scss

@@ -0,0 +1,14 @@
+// Filter expression builder
+
+$kendo-filter-padding-x: null !default;
+$kendo-filter-padding-y: null !default;
+
+$kendo-filter-bottom-margin: null !default;
+$kendo-filter-line-size: null !default;
+
+$kendo-filter-operator-dropdown-width: null !default;
+
+$kendo-filter-preview-field-text: null !default;
+$kendo-filter-preview-operator-text: null !default;
+
+$kendo-filter-toolbar-focus-shadow: null !default;

package/scss/components/floating-label/_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-floating-label--styles() {
+    @include import-once( "floating-label" ) {
+        @include core-styles();
+        @include kendo-floating-label--layout();
+        @include kendo-floating-label--theme();
+    }
+}

package/scss/components/floating-label/_layout.scss

@@ -0,0 +1,95 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-floating-label--layout-base() {
+
+
+    // Floating label
+    .k-floating-label-container {
+        padding-top: $kendo-floating-label-height;
+        box-sizing: border-box;
+        display: inline-flex;
+        vertical-align: middle;
+        position: relative;
+        flex-direction: column;
+        justify-content: stretch;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        > .k-floating-label {
+            max-width: $kendo-floating-label-max-width;
+            font-size: $kendo-floating-label-font-size;
+            line-height: $kendo-floating-label-line-height;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            position: absolute;
+            top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
+            left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
+            overflow: hidden;
+            cursor: text;
+            transform-origin: left center;
+            transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition;
+        }
+
+
+        &.k-empty {
+            > .k-floating-label {
+                top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
+                left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
+                transform: scale( $kendo-floating-label-scale );
+                pointer-events: none;
+            }
+        }
+
+        > .k-floating-label,
+        &.k-focus > .k-floating-label {
+            top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
+            left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+            transform: scale( $kendo-floating-label-focus-scale );
+        }
+        &:focus-within > .k-floating-label {
+            top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
+            left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+            transform: scale( $kendo-floating-label-focus-scale );
+        }
+
+        &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
+            color: transparent;
+        }
+    }
+
+    [dir="rtl"] .k-floating-label-container,
+    .k-rtl .k-floating-label-container,
+    .k-floating-label-container[dir="rtl"] {
+        > .k-floating-label {
+            transform-origin: right center;
+            transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
+        }
+
+        &.k-empty {
+            > .k-floating-label {
+                left: auto;
+                right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
+            }
+        }
+
+        > .k-floating-label,
+        &.k-focus > .k-floating-label {
+            left: auto;
+            right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+        }
+        &:focus-within > .k-floating-label {
+            left: auto;
+            right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+        }
+    }
+
+}
+
+
+@mixin kendo-floating-label--layout() {
+    @include kendo-floating-label--layout-base();
+}

package/scss/components/floating-label/_theme.scss

@@ -0,0 +1,36 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-floating-label--theme-base() {
+
+    // Floating label
+    .k-floating-label-container {
+
+        > .k-floating-label {
+            @include fill(
+                $color: $kendo-floating-label-text,
+                $bg: $kendo-floating-label-bg
+            );
+        }
+
+        &.k-focus > .k-floating-label {
+            @include fill(
+                $color: $kendo-floating-label-focus-text,
+                $bg: $kendo-floating-label-focus-bg
+            );
+        }
+
+        &.k-invalid > .k-floating-label,
+        &.ng-invalid.ng-touched > .k-floating-label,
+        &.ng-invalid.ng-dirty > .k-floating-label {
+            @include fill ( $color: $kendo-invalid-text );
+        }
+    }
+
+}
+
+
+@mixin kendo-floating-label--theme() {
+    @include kendo-floating-label--theme-base();
+}

package/scss/components/floating-label/_variables.scss

@@ -0,0 +1,21 @@
+// Floating label
+
+$kendo-floating-label-scale: null !default;
+$kendo-floating-label-font-size: null !default;
+$kendo-floating-label-max-width: null !default;
+$kendo-floating-label-line-height: null !default;
+$kendo-floating-label-height: null !default;
+$kendo-floating-label-offset-x: null !default;
+$kendo-floating-label-offset-y: null !default;
+
+$kendo-floating-label-focus-scale: null !default;
+$kendo-floating-label-focus-offset-x: null !default;
+$kendo-floating-label-focus-offset-y: null !default;
+
+$kendo-floating-label-transition: null !default;
+
+$kendo-floating-label-bg: null !default;
+$kendo-floating-label-text: null !default;
+
+$kendo-floating-label-focus-bg: null !default;
+$kendo-floating-label-focus-text: null !default;

package/scss/components/forms/_index.scss

@@ -0,0 +1,25 @@
+// Dependencies // TODO: extract variables
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-form--styles() {
+    @include import-once( "form" ) {
+        @include core-styles();
+        @include kendo-toolbar--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-form--layout();
+        @include kendo-form--theme();
+        @include kendo-utils--layout--display();
+        @include kendo-utils--flex-grid--gap();
+        @include kendo-utils--flex-grid--grid-template-columns();
+        @include kendo-utils--flex-grid--grid-column-start-end();
+    }
+}

package/scss/components/forms/_layout.scss

@@ -0,0 +1,386 @@
+@use "sass:map";
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../spacing/index.import.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;
+        }
+    }
+
+}
+
+
+@mixin kendo-form--layout() {
+    @include kendo-form--layout-base();
+}

package/scss/components/forms/_theme.scss

@@ -0,0 +1,45 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.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 );
+    }
+
+}
+
+
+@mixin kendo-form--theme() {
+    @include kendo-form--theme-base();
+}