From e4c64cafbeede63e201db3f66d129f6fc0f938b8 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 12 Nov 2024 13:05:20 +0200 Subject: [PATCH 1/4] feat(ui5-form): add new emptySpan property --- packages/main/src/Form.ts | 65 +- packages/main/src/FormGroup.ts | 4 + packages/main/src/FormItem.ts | 6 +- packages/main/src/themes/FormLabelSpan.css | 1072 +++++++++++++++-- .../main/src/themes/base/Form-parameters.css | 90 +- .../main/test/pages/form/FormEmptySpan.html | 734 +++++++++++ .../_samples/main/Form/EmptySpan/EmptySpan.md | 5 + .../_samples/main/Form/EmptySpan/main.css | 6 + .../docs/_samples/main/Form/EmptySpan/main.js | 29 + .../_samples/main/Form/EmptySpan/sample.html | 99 ++ 10 files changed, 2003 insertions(+), 107 deletions(-) create mode 100644 packages/main/test/pages/form/FormEmptySpan.html create mode 100644 packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md create mode 100644 packages/website/docs/_samples/main/Form/EmptySpan/main.css create mode 100644 packages/website/docs/_samples/main/Form/EmptySpan/main.js create mode 100644 packages/website/docs/_samples/main/Form/EmptySpan/sample.html diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 48c626eac56f..d8561f7abe6e 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -31,6 +31,7 @@ const StepColumn = { */ interface IFormItem extends HTMLElement { labelSpan: string + emptySpan: string itemSpacing: `${FormItemSpacing}`; readonly isGroup: boolean; colsXl?: number; @@ -126,6 +127,19 @@ type ItemsInfo = { * * **For example:** To always place the labels on top set: `labelSpan="S12 M12 L12 XL12"` property. * + * ### Items Empty Span + * + * By default, the entire form item's width is allocated between the label and its field, with no empty space at the end. + * The `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end. + * + * **For example:** Setting "S0 M0 L3 XL3" (or just "L3 XL3") allocates 4 cells for the label, 5 cells for the associated field, + * and leaves 3 cells empty space at the end. + * + * The supported values are between 0 and 10. The empty space can take up to 10 cells, ensuring at least 1 cell each for the label and its field. + * Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field. + * + * *Note:* When both `emptySpan` and `labelSpan` are set, their combined value must not exceed 11, to ensure at least 1 cell remains for the field. + * * ### ES6 Module Import * * - import @ui5/webcomponents/dist/Form.js"; @@ -165,7 +179,7 @@ class Form extends UI5Element { layout = "S1 M1 L2 XL3" /** - * Defines the width proportion of the labels and fields of a FormItem by breakpoint. + * Defines the width proportion of the labels and fields of a form item by breakpoint. * * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes, * and 12/12 in S size, e.g in S the label is on top of its associated field. @@ -173,12 +187,34 @@ class Form extends UI5Element { * The supported values are between 1 and 12. Greater the number, more space the label will use. * * **Note:** If "12" is set, the label will be displayed on top of its assosiated field. + * * @default "S12 M4 L4 XL4" * @public */ @property() labelSpan = "S12 M4 L4 XL4"; + /** + * Defines the number of grid cells that are empty at the end of each form item by breakpoint. + * By default, the entire form item's width is allocated between the label and its field, with no empty space at the end. + * + * The labels occupy 4 out of 12 cells, while fields occupy 8 out of 12 cells within a form item. + * The `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end. + * + * For example: Setting "S0 M0 L3 XL3" (or just "L3 XL3") allocates 4 cells for the label, 5 cells for the associated field, + * and leaves 3 cells empty space at the end. + * + * The supported values are between 0 and 10. The empty space can take up to 10 cells, ensuring at least 1 cell each for the label and its field. + * Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field. + * + * **Note:** When both `emptySpan` and `labelSpan` are set, their combined value must not exceed 11, to ensure at least 1 cell remains for the field. + * + * @default "S0 M0 L0 XL0" + * @public + */ + @property() + emptySpan = "S0 M0 L0 XL0"; + /** * Defines the header text of the component. * @@ -234,28 +270,36 @@ class Form extends UI5Element { columnsS = 1; @property({ type: Number }) labelSpanS = 12 + @property({ type: Number }) + emptySpanS = 0 @property({ type: Number }) columnsM = 1; @property({ type: Number }) labelSpanM = 4; + @property({ type: Number }) + emptySpanM = 0 @property({ type: Number }) columnsL = 2; @property({ type: Number }) labelSpanL = 4; + @property({ type: Number }) + emptySpanL = 0 @property({ type: Number }) columnsXl = 3; @property({ type: Number }) labelSpanXl = 4; + @property({ type: Number }) + emptySpanXl = 0; onBeforeRendering() { // Parse the layout and set it to the FormGroups/FormItems. this.setColumnLayout(); - // Parse the labelSpan and set it to the FormGroups/FormItems. - this.setLabelSpan(); + // Parse the labelSpan and emptySpan and set it to the FormGroups/FormItems. + this.setFormItemLayout(); // Define how many columns a group should take. this.setGroupsColSpan(); @@ -281,7 +325,7 @@ class Form extends UI5Element { }); } - setLabelSpan() { + setFormItemLayout() { this.labelSpan.split(" ").forEach((breakpoint: string) => { if (breakpoint.startsWith("S")) { this.labelSpanS = parseInt(breakpoint.slice(1)); @@ -294,8 +338,21 @@ class Form extends UI5Element { } }); + this.emptySpan.split(" ").forEach((breakpoint: string) => { + if (breakpoint.startsWith("S")) { + this.emptySpanS = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("M")) { + this.emptySpanM = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("L")) { + this.emptySpanL = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("XL")) { + this.emptySpanXl = parseInt(breakpoint.slice(2)); + } + }); + this.items.forEach((item: IFormItem) => { item.labelSpan = this.labelSpan; + item.emptySpan = this.emptySpan; item.itemSpacing = this.itemSpacing; }); } diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index 579cb55deb18..f9307ae6c470 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -86,6 +86,9 @@ class FormGroup extends UI5Element implements IFormItem { @property() labelSpan = "S12 M4 L4 XL4"; + @property() + emptySpan = "S0 M0 L0 XL0"; + onBeforeRendering() { this.processFormItems(); } @@ -93,6 +96,7 @@ class FormGroup extends UI5Element implements IFormItem { processFormItems() { this.items.forEach((item: FormItem) => { item.labelSpan = this.labelSpan; + item.emptySpan = this.emptySpan; item.itemSpacing = this.itemSpacing; }); } diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 4624f47ce21c..5a5f4b1f5e5c 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -86,9 +86,9 @@ class FormItem extends UI5Element implements IFormItem { @property() labelSpan = "S12 M4 L4 XL4"; - /** - * @private - */ + @property() + emptySpan = "S0 M0 L0 XL0"; + @property() itemSpacing: `${FormItemSpacing}` = "Normal" diff --git a/packages/main/src/themes/FormLabelSpan.css b/packages/main/src/themes/FormLabelSpan.css index bfbe6c150755..22d663a1c438 100644 --- a/packages/main/src/themes/FormLabelSpan.css +++ b/packages/main/src/themes/FormLabelSpan.css @@ -6,58 +6,282 @@ /* S - 12 cells */ @container (max-width: 600px) { - :host([label-span-s="1"]) .ui5-form-item, - :host([label-span-s="1"]) .ui5-form-group { + :host([label-span-s="1"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span1); } + :host([label-span-s="1"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-1); + } + :host([label-span-s="1"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-2); + } + :host([label-span-s="1"][empty-span-s="3"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-3); + } + :host([label-span-s="1"][empty-span-s="4"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-4); + } + :host([label-span-s="1"][empty-span-s="5"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-5); + } + :host([label-span-s="1"][empty-span-s="6"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-6); + } + :host([label-span-s="1"][empty-span-s="7"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-7); + } + :host([label-span-s="1"][empty-span-s="8"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="8"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-8); + } + :host([label-span-s="1"][empty-span-s="9"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="9"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-9); + } + :host([label-span-s="1"][empty-span-s="10"]) .ui5-form-item, + :host([label-span-s="1"][empty-span-s="10"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-10); + } - :host([label-span-s="2"]) .ui5-form-item, - :host([label-span-s="2"]) .ui5-form-group { + + :host([label-span-s="2"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span2); } + :host([label-span-s="2"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-1); + } + :host([label-span-s="2"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-2); + } + :host([label-span-s="2"][empty-span-s="3"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-3); + } + :host([label-span-s="2"][empty-span-s="4"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-4); + } + :host([label-span-s="2"][empty-span-s="5"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-5); + } + :host([label-span-s="2"][empty-span-s="6"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-6); + } + :host([label-span-s="2"][empty-span-s="7"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-7); + } + :host([label-span-s="2"][empty-span-s="8"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="8"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-8); + } + :host([label-span-s="2"][empty-span-s="9"]) .ui5-form-item, + :host([label-span-s="2"][empty-span-s="9"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-9); + } - :host([label-span-s="3"]) .ui5-form-item, - :host([label-span-s="3"]) .ui5-form-group { + + :host([label-span-s="3"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="3"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span3); } + :host([label-span-s="3"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="3"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-1); + } + :host([label-span-s="3"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="3"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-2); + } + :host([label-span-s="3"][empty-span-s="3"]) .ui5-form-item, + :host([label-span-s="3"][empty-span-s="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-3); + } + :host([label-span-s="3"][empty-span-s="4"]) .ui5-form-item, + :host([label-span-s="3"][empty-span-s="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-4); + } + :host([label-span-s="3"][empty-span-s="5"]) .ui5-form-item, + :host([label-span-s="3"][empty-span-s="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-5); + } + :host([label-span-s="3"][empty-span-s="6"]) .ui5-form-item, + :host([label-span-s="3"][empty-span-s="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-6); + } + :host([label-span-s="3"][empty-span-s="7"]) .ui5-form-item, + :host([label-span-s="3"][empty-span-s="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-7); + } - :host([label-span-s="4"]) .ui5-form-item, - :host([label-span-s="4"]) .ui5-form-group { + + :host([label-span-s="4"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="4"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span4); } + :host([label-span-s="4"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="4"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-1); + } + :host([label-span-s="4"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="4"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-2); + } + :host([label-span-s="4"][empty-span-s="3"]) .ui5-form-item, + :host([label-span-s="4"][empty-span-s="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-3); + } + :host([label-span-s="4"][empty-span-s="4"]) .ui5-form-item, + :host([label-span-s="4"][empty-span-s="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-4); + } + :host([label-span-s="4"][empty-span-s="5"]) .ui5-form-item, + :host([label-span-s="4"][empty-span-s="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-5); + } + :host([label-span-s="4"][empty-span-s="6"]) .ui5-form-item, + :host([label-span-s="4"][empty-span-s="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-6); + } + :host([label-span-s="4"][empty-span-s="7"]) .ui5-form-item, + :host([label-span-s="4"][empty-span-s="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-7); + } + - :host([label-span-s="5"]) .ui5-form-item, - :host([label-span-s="5"]) .ui5-form-group { + :host([label-span-s="5"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="5"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span5); } + :host([label-span-s="5"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="5"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-1); + } + :host([label-span-s="5"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="5"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-2); + } + :host([label-span-s="5"][empty-span-s="3"]) .ui5-form-item, + :host([label-span-s="5"][empty-span-s="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-3); + } + :host([label-span-s="5"][empty-span-s="4"]) .ui5-form-item, + :host([label-span-s="5"][empty-span-s="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-4); + } + :host([label-span-s="5"][empty-span-s="5"]) .ui5-form-item, + :host([label-span-s="5"][empty-span-s="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-5); + } + :host([label-span-s="5"][empty-span-s="6"]) .ui5-form-item, + :host([label-span-s="5"][empty-span-s="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-6); + } - :host([label-span-s="6"]) .ui5-form-item, - :host([label-span-s="6"]) .ui5-form-group { + + :host([label-span-s="6"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="6"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span6); } + :host([label-span-s="6"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="6"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-1); + } + :host([label-span-s="6"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="6"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-2); + } + :host([label-span-s="6"][empty-span-s="3"]) .ui5-form-item, + :host([label-span-s="6"][empty-span-s="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-3); + } + :host([label-span-s="6"][empty-span-s="4"]) .ui5-form-item, + :host([label-span-s="6"][empty-span-s="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-4); + } + :host([label-span-s="6"][empty-span-s="5"]) .ui5-form-item, + :host([label-span-s="6"][empty-span-s="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-5); + } - :host([label-span-s="7"]) .ui5-form-item, - :host([label-span-s="7"]) .ui5-form-group { + + :host([label-span-s="7"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="7"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span7); } + :host([label-span-s="7"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="7"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-1); + } + :host([label-span-s="7"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="7"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-2); + } + :host([label-span-s="7"][empty-span-s="3"]) .ui5-form-item, + :host([label-span-s="7"][empty-span-s="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-3); + } + :host([label-span-s="7"][empty-span-s="4"]) .ui5-form-item, + :host([label-span-s="7"][empty-span-s="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-4); + } + - :host([label-span-s="8"]) .ui5-form-item, - :host([label-span-s="8"]) .ui5-form-group { + :host([label-span-s="8"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="8"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span8); } + :host([label-span-s="8"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="8"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-1); + } + :host([label-span-s="8"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="8"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-2); + } + :host([label-span-s="8"][empty-span-s="3"]) .ui5-form-item, + :host([label-span-s="8"][empty-span-s="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-3); + } + - :host([label-span-s="9"]) .ui5-form-item, - :host([label-span-s="9"]) .ui5-form-group { + :host([label-span-s="9"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="9"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span9); } + :host([label-span-s="9"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="9"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span9-1); + } + :host([label-span-s="9"][empty-span-s="2"]) .ui5-form-item, + :host([label-span-s="9"][empty-span-s="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span9-2); + } - :host([label-span-s="10"]) .ui5-form-item, - :host([label-span-s="10"]) .ui5-form-group { + :host([label-span-s="10"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="10"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span10); } + :host([label-span-s="10"][empty-span-s="1"]) .ui5-form-item, + :host([label-span-s="10"][empty-span-s="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span10-1); + } - :host([label-span-s="11"]) .ui5-form-item, - :host([label-span-s="11"]) .ui5-form-group { + :host([label-span-s="11"][empty-span-s="0"]) .ui5-form-item, + :host([label-span-s="11"][empty-span-s="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span11); } @@ -73,58 +297,282 @@ /* M - 4 cells by default, up to 12 cells */ @container (width > 600px) and (width <= 1024px) { - :host([label-span-m="1"]) .ui5-form-item, - :host([label-span-m="1"]) .ui5-form-group { + :host([label-span-m="1"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span1); } + :host([label-span-m="1"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-1); + } + :host([label-span-m="1"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-2); + } + :host([label-span-m="1"][empty-span-m="3"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-3); + } + :host([label-span-m="1"][empty-span-m="4"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-4); + } + :host([label-span-m="1"][empty-span-m="5"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-5); + } + :host([label-span-m="1"][empty-span-m="6"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-6); + } + :host([label-span-m="1"][empty-span-m="7"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-7); + } + :host([label-span-m="1"][empty-span-m="8"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="8"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-8); + } + :host([label-span-m="1"][empty-span-m="9"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="9"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-9); + } + :host([label-span-m="1"][empty-span-m="10"]) .ui5-form-item, + :host([label-span-m="1"][empty-span-m="10"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-10); + } - :host([label-span-m="2"]) .ui5-form-item, - :host([label-span-m="2"]) .ui5-form-group { + + :host([label-span-m="2"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span2); } + :host([label-span-m="2"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-1); + } + :host([label-span-m="2"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-2); + } + :host([label-span-m="2"][empty-span-m="3"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-3); + } + :host([label-span-m="2"][empty-span-m="4"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-4); + } + :host([label-span-m="2"][empty-span-m="5"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-5); + } + :host([label-span-m="2"][empty-span-m="6"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-6); + } + :host([label-span-m="2"][empty-span-m="7"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-7); + } + :host([label-span-m="2"][empty-span-m="8"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="8"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-8); + } + :host([label-span-m="2"][empty-span-m="9"]) .ui5-form-item, + :host([label-span-m="2"][empty-span-m="9"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-9); + } - :host([label-span-m="3"]) .ui5-form-item, - :host([label-span-m="3"]) .ui5-form-group { + + :host([label-span-m="3"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="3"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span3); } + :host([label-span-m="3"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="3"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-1); + } + :host([label-span-m="3"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="3"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-2); + } + :host([label-span-m="3"][empty-span-m="3"]) .ui5-form-item, + :host([label-span-m="3"][empty-span-m="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-3); + } + :host([label-span-m="3"][empty-span-m="4"]) .ui5-form-item, + :host([label-span-m="3"][empty-span-m="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-4); + } + :host([label-span-m="3"][empty-span-m="5"]) .ui5-form-item, + :host([label-span-m="3"][empty-span-m="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-5); + } + :host([label-span-m="3"][empty-span-m="6"]) .ui5-form-item, + :host([label-span-m="3"][empty-span-m="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-6); + } + :host([label-span-m="3"][empty-span-m="7"]) .ui5-form-item, + :host([label-span-m="3"][empty-span-m="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-7); + } - :host([label-span-m="4"]) .ui5-form-item, - :host([label-span-m="4"]) .ui5-form-group { + + :host([label-span-m="4"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="4"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span4); } + :host([label-span-m="4"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="4"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-1); + } + :host([label-span-m="4"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="4"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-2); + } + :host([label-span-m="4"][empty-span-m="3"]) .ui5-form-item, + :host([label-span-m="4"][empty-span-m="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-3); + } + :host([label-span-m="4"][empty-span-m="4"]) .ui5-form-item, + :host([label-span-m="4"][empty-span-m="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-4); + } + :host([label-span-m="4"][empty-span-m="5"]) .ui5-form-item, + :host([label-span-m="4"][empty-span-m="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-5); + } + :host([label-span-m="4"][empty-span-m="6"]) .ui5-form-item, + :host([label-span-m="4"][empty-span-m="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-6); + } + :host([label-span-m="4"][empty-span-m="7"]) .ui5-form-item, + :host([label-span-m="4"][empty-span-m="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-7); + } + - :host([label-span-m="5"]) .ui5-form-item, - :host([label-span-m="5"]) .ui5-form-group { + :host([label-span-m="5"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="5"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span5); } + :host([label-span-m="5"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="5"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-1); + } + :host([label-span-m="5"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="5"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-2); + } + :host([label-span-m="5"][empty-span-m="3"]) .ui5-form-item, + :host([label-span-m="5"][empty-span-m="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-3); + } + :host([label-span-m="5"][empty-span-m="4"]) .ui5-form-item, + :host([label-span-m="5"][empty-span-m="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-4); + } + :host([label-span-m="5"][empty-span-m="5"]) .ui5-form-item, + :host([label-span-m="5"][empty-span-m="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-5); + } + :host([label-span-m="5"][empty-span-m="6"]) .ui5-form-item, + :host([label-span-m="5"][empty-span-m="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-6); + } - :host([label-span-m="6"]) .ui5-form-item, - :host([label-span-m="6"]) .ui5-form-group { + + :host([label-span-m="6"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="6"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span6); } + :host([label-span-m="6"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="6"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-1); + } + :host([label-span-m="6"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="6"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-2); + } + :host([label-span-m="6"][empty-span-m="3"]) .ui5-form-item, + :host([label-span-m="6"][empty-span-m="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-3); + } + :host([label-span-m="6"][empty-span-m="4"]) .ui5-form-item, + :host([label-span-m="6"][empty-span-m="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-4); + } + :host([label-span-m="6"][empty-span-m="5"]) .ui5-form-item, + :host([label-span-m="6"][empty-span-m="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-5); + } - :host([label-span-m="7"]) .ui5-form-item, - :host([label-span-m="7"]) .ui5-form-group { + + :host([label-span-m="7"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="7"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span7); } + :host([label-span-m="7"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="7"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-1); + } + :host([label-span-m="7"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="7"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-2); + } + :host([label-span-m="7"][empty-span-m="3"]) .ui5-form-item, + :host([label-span-m="7"][empty-span-m="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-3); + } + :host([label-span-m="7"][empty-span-m="4"]) .ui5-form-item, + :host([label-span-m="7"][empty-span-m="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-4); + } + - :host([label-span-m="8"]) .ui5-form-item, - :host([label-span-m="8"]) .ui5-form-group { + :host([label-span-m="8"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="8"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span8); } + :host([label-span-m="8"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="8"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-1); + } + :host([label-span-m="8"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="8"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-2); + } + :host([label-span-m="8"][empty-span-m="3"]) .ui5-form-item, + :host([label-span-m="8"][empty-span-m="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-3); + } + - :host([label-span-m="9"]) .ui5-form-item, - :host([label-span-m="9"]) .ui5-form-group { + :host([label-span-m="9"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="9"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span9); } + :host([label-span-m="9"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="9"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span9-1); + } + :host([label-span-m="9"][empty-span-m="2"]) .ui5-form-item, + :host([label-span-m="9"][empty-span-m="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span9-2); + } - :host([label-span-m="10"]) .ui5-form-item, - :host([label-span-m="10"]) .ui5-form-group { + :host([label-span-m="10"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="10"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span10); } + :host([label-span-m="10"][empty-span-m="1"]) .ui5-form-item, + :host([label-span-m="10"][empty-span-m="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span10-1); + } - :host([label-span-m="11"]) .ui5-form-item, - :host([label-span-m="11"]) .ui5-form-group { + :host([label-span-m="11"][empty-span-m="0"]) .ui5-form-item, + :host([label-span-m="11"][empty-span-m="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span11); } @@ -138,58 +586,282 @@ /* L - 4 cells by default, up to 12 cells */ @container (width > 1024px) and (width <= 1440px) { - :host([label-span-l="1"]) .ui5-form-item, - :host([label-span-l="1"]) .ui5-form-group { + :host([label-span-l="1"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span1); } + :host([label-span-l="1"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-1); + } + :host([label-span-l="1"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-2); + } + :host([label-span-l="1"][empty-span-l="3"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-3); + } + :host([label-span-l="1"][empty-span-l="4"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-4); + } + :host([label-span-l="1"][empty-span-l="5"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-5); + } + :host([label-span-l="1"][empty-span-l="6"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-6); + } + :host([label-span-l="1"][empty-span-l="7"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-7); + } + :host([label-span-l="1"][empty-span-l="8"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="8"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-8); + } + :host([label-span-l="1"][empty-span-l="9"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="9"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-9); + } + :host([label-span-l="1"][empty-span-l="10"]) .ui5-form-item, + :host([label-span-l="1"][empty-span-l="10"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-10); + } - :host([label-span-l="2"]) .ui5-form-item, - :host([label-span-l="2"]) .ui5-form-group { + + :host([label-span-l="2"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span2); } + :host([label-span-l="2"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-1); + } + :host([label-span-l="2"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-2); + } + :host([label-span-l="2"][empty-span-l="3"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-3); + } + :host([label-span-l="2"][empty-span-l="4"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-4); + } + :host([label-span-l="2"][empty-span-l="5"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-5); + } + :host([label-span-l="2"][empty-span-l="6"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-6); + } + :host([label-span-l="2"][empty-span-l="7"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-7); + } + :host([label-span-l="2"][empty-span-l="8"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="8"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-8); + } + :host([label-span-l="2"][empty-span-l="9"]) .ui5-form-item, + :host([label-span-l="2"][empty-span-l="9"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-9); + } - :host([label-span-l="3"]) .ui5-form-item, - :host([label-span-l="3"]) .ui5-form-group { + + :host([label-span-l="3"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="3"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span3); } + :host([label-span-l="3"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="3"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-1); + } + :host([label-span-l="3"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="3"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-2); + } + :host([label-span-l="3"][empty-span-l="3"]) .ui5-form-item, + :host([label-span-l="3"][empty-span-l="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-3); + } + :host([label-span-l="3"][empty-span-l="4"]) .ui5-form-item, + :host([label-span-l="3"][empty-span-l="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-4); + } + :host([label-span-l="3"][empty-span-l="5"]) .ui5-form-item, + :host([label-span-l="3"][empty-span-l="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-5); + } + :host([label-span-l="3"][empty-span-l="6"]) .ui5-form-item, + :host([label-span-l="3"][empty-span-l="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-6); + } + :host([label-span-l="3"][empty-span-l="7"]) .ui5-form-item, + :host([label-span-l="3"][empty-span-l="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-7); + } - :host([label-span-l="4"]) .ui5-form-item, - :host([label-span-l="4"]) .ui5-form-group { + + :host([label-span-l="4"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="4"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span4); } + :host([label-span-l="4"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="4"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-1); + } + :host([label-span-l="4"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="4"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-2); + } + :host([label-span-l="4"][empty-span-l="3"]) .ui5-form-item, + :host([label-span-l="4"][empty-span-l="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-3); + } + :host([label-span-l="4"][empty-span-l="4"]) .ui5-form-item, + :host([label-span-l="4"][empty-span-l="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-4); + } + :host([label-span-l="4"][empty-span-l="5"]) .ui5-form-item, + :host([label-span-l="4"][empty-span-l="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-5); + } + :host([label-span-l="4"][empty-span-l="6"]) .ui5-form-item, + :host([label-span-l="4"][empty-span-l="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-6); + } + :host([label-span-l="4"][empty-span-l="7"]) .ui5-form-item, + :host([label-span-l="4"][empty-span-l="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-7); + } + - :host([label-span-l="5"]) .ui5-form-item, - :host([label-span-l="5"]) .ui5-form-group { + :host([label-span-l="5"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="5"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span5); } + :host([label-span-l="5"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="5"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-1); + } + :host([label-span-l="5"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="5"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-2); + } + :host([label-span-l="5"][empty-span-l="3"]) .ui5-form-item, + :host([label-span-l="5"][empty-span-l="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-3); + } + :host([label-span-l="5"][empty-span-l="4"]) .ui5-form-item, + :host([label-span-l="5"][empty-span-l="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-4); + } + :host([label-span-l="5"][empty-span-l="5"]) .ui5-form-item, + :host([label-span-l="5"][empty-span-l="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-5); + } + :host([label-span-l="5"][empty-span-l="6"]) .ui5-form-item, + :host([label-span-l="5"][empty-span-l="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-6); + } - :host([label-span-l="6"]) .ui5-form-item, - :host([label-span-l="6"]) .ui5-form-group { + + :host([label-span-l="6"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="6"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span6); } + :host([label-span-l="6"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="6"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-1); + } + :host([label-span-l="6"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="6"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-2); + } + :host([label-span-l="6"][empty-span-l="3"]) .ui5-form-item, + :host([label-span-l="6"][empty-span-l="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-3); + } + :host([label-span-l="6"][empty-span-l="4"]) .ui5-form-item, + :host([label-span-l="6"][empty-span-l="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-4); + } + :host([label-span-l="6"][empty-span-l="5"]) .ui5-form-item, + :host([label-span-l="6"][empty-span-l="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-5); + } - :host([label-span-l="7"]) .ui5-form-item, - :host([label-span-l="7"]) .ui5-form-group { + + :host([label-span-l="7"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="7"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span7); } + :host([label-span-l="7"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="7"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-1); + } + :host([label-span-l="7"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="7"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-2); + } + :host([label-span-l="7"][empty-span-l="3"]) .ui5-form-item, + :host([label-span-l="7"][empty-span-l="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-3); + } + :host([label-span-l="7"][empty-span-l="4"]) .ui5-form-item, + :host([label-span-l="7"][empty-span-l="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-4); + } + - :host([label-span-l="8"]) .ui5-form-item, - :host([label-span-l="8"]) .ui5-form-group { + :host([label-span-l="8"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="8"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span8); } + :host([label-span-l="8"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="8"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-1); + } + :host([label-span-l="8"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="8"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-2); + } + :host([label-span-l="8"][empty-span-l="3"]) .ui5-form-item, + :host([label-span-l="8"][empty-span-l="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-3); + } + - :host([label-span-l="9"]) .ui5-form-item, - :host([label-span-l="9"]) .ui5-form-group { + :host([label-span-l="9"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="9"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span9); } + :host([label-span-l="9"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="9"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span9-1); + } + :host([label-span-l="9"][empty-span-l="2"]) .ui5-form-item, + :host([label-span-l="9"][empty-span-l="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span9-2); + } - :host([label-span-l="10"]) .ui5-form-item, - :host([label-span-l="10"]) .ui5-form-group { + :host([label-span-l="10"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="10"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span10); } + :host([label-span-l="10"][empty-span-l="1"]) .ui5-form-item, + :host([label-span-l="10"][empty-span-l="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span10-1); + } - :host([label-span-l="11"]) .ui5-form-item, - :host([label-span-l="11"]) .ui5-form-group { + :host([label-span-l="11"][empty-span-l="0"]) .ui5-form-item, + :host([label-span-l="11"][empty-span-l="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span11); } @@ -203,58 +875,282 @@ /* XL - 4 cells by default, up to 12 cells */ @container (min-width: 1441px) { - :host([label-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="1"]) .ui5-form-group { + :host([label-span-xl="1"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span1); } + :host([label-span-xl="1"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-1); + } + :host([label-span-xl="1"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-2); + } + :host([label-span-xl="1"][empty-span-xl="3"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-3); + } + :host([label-span-xl="1"][empty-span-xl="4"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-4); + } + :host([label-span-xl="1"][empty-span-xl="5"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-5); + } + :host([label-span-xl="1"][empty-span-xl="6"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-6); + } + :host([label-span-xl="1"][empty-span-xl="7"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-7); + } + :host([label-span-xl="1"][empty-span-xl="8"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="8"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-8); + } + :host([label-span-xl="1"][empty-span-xl="9"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="9"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-9); + } + :host([label-span-xl="1"][empty-span-xl="10"]) .ui5-form-item, + :host([label-span-xl="1"][empty-span-xl="10"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span1-10); + } - :host([label-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="2"]) .ui5-form-group { + + :host([label-span-xl="2"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span2); } + :host([label-span-xl="2"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-1); + } + :host([label-span-xl="2"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-2); + } + :host([label-span-xl="2"][empty-span-xl="3"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-3); + } + :host([label-span-xl="2"][empty-span-xl="4"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-4); + } + :host([label-span-xl="2"][empty-span-xl="5"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-5); + } + :host([label-span-xl="2"][empty-span-xl="6"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-6); + } + :host([label-span-xl="2"][empty-span-xl="7"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-7); + } + :host([label-span-xl="2"][empty-span-xl="8"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="8"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-8); + } + :host([label-span-xl="2"][empty-span-xl="9"]) .ui5-form-item, + :host([label-span-xl="2"][empty-span-xl="9"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span2-9); + } - :host([label-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="3"]) .ui5-form-group { + + :host([label-span-xl="3"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="3"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span3); } + :host([label-span-xl="3"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="3"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-1); + } + :host([label-span-xl="3"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="3"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-2); + } + :host([label-span-xl="3"][empty-span-xl="3"]) .ui5-form-item, + :host([label-span-xl="3"][empty-span-xl="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-3); + } + :host([label-span-xl="3"][empty-span-xl="4"]) .ui5-form-item, + :host([label-span-xl="3"][empty-span-xl="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-4); + } + :host([label-span-xl="3"][empty-span-xl="5"]) .ui5-form-item, + :host([label-span-xl="3"][empty-span-xl="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-5); + } + :host([label-span-xl="3"][empty-span-xl="6"]) .ui5-form-item, + :host([label-span-xl="3"][empty-span-xl="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-6); + } + :host([label-span-xl="3"][empty-span-xl="7"]) .ui5-form-item, + :host([label-span-xl="3"][empty-span-xl="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span3-7); + } - :host([label-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="4"]) .ui5-form-group { + + :host([label-span-xl="4"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="4"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span4); } + :host([label-span-xl="4"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="4"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-1); + } + :host([label-span-xl="4"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="4"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-2); + } + :host([label-span-xl="4"][empty-span-xl="3"]) .ui5-form-item, + :host([label-span-xl="4"][empty-span-xl="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-3); + } + :host([label-span-xl="4"][empty-span-xl="4"]) .ui5-form-item, + :host([label-span-xl="4"][empty-span-xl="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-4); + } + :host([label-span-xl="4"][empty-span-xl="5"]) .ui5-form-item, + :host([label-span-xl="4"][empty-span-xl="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-5); + } + :host([label-span-xl="4"][empty-span-xl="6"]) .ui5-form-item, + :host([label-span-xl="4"][empty-span-xl="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-6); + } + :host([label-span-xl="4"][empty-span-xl="7"]) .ui5-form-item, + :host([label-span-xl="4"][empty-span-xl="7"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span4-7); + } + - :host([label-span-xl="5"]) .ui5-form-item, - :host([label-span-xl="5"]) .ui5-form-group { + :host([label-span-xl="5"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="5"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span5); } + :host([label-span-xl="5"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="5"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-1); + } + :host([label-span-xl="5"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="5"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-2); + } + :host([label-span-xl="5"][empty-span-xl="3"]) .ui5-form-item, + :host([label-span-xl="5"][empty-span-xl="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-3); + } + :host([label-span-xl="5"][empty-span-xl="4"]) .ui5-form-item, + :host([label-span-xl="5"][empty-span-xl="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-4); + } + :host([label-span-xl="5"][empty-span-xl="5"]) .ui5-form-item, + :host([label-span-xl="5"][empty-span-xl="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-5); + } + :host([label-span-xl="5"][empty-span-xl="6"]) .ui5-form-item, + :host([label-span-xl="5"][empty-span-xl="6"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span5-6); + } - :host([label-span-xl="6"]) .ui5-form-item, - :host([label-span-xl="6"]) .ui5-form-group { + + :host([label-span-xl="6"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="6"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span6); } + :host([label-span-xl="6"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="6"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-1); + } + :host([label-span-xl="6"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="6"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-2); + } + :host([label-span-xl="6"][empty-span-xl="3"]) .ui5-form-item, + :host([label-span-xl="6"][empty-span-xl="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-3); + } + :host([label-span-xl="6"][empty-span-xl="4"]) .ui5-form-item, + :host([label-span-xl="6"][empty-span-xl="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-4); + } + :host([label-span-xl="6"][empty-span-xl="5"]) .ui5-form-item, + :host([label-span-xl="6"][empty-span-xl="5"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span6-5); + } - :host([label-span-xl="7"]) .ui5-form-item, - :host([label-span-xl="7"]) .ui5-form-group { + + :host([label-span-xl="7"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="7"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span7); } + :host([label-span-xl="7"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="7"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-1); + } + :host([label-span-xl="7"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="7"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-2); + } + :host([label-span-xl="7"][empty-span-xl="3"]) .ui5-form-item, + :host([label-span-xl="7"][empty-span-xl="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-3); + } + :host([label-span-xl="7"][empty-span-xl="4"]) .ui5-form-item, + :host([label-span-xl="7"][empty-span-xl="4"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span7-4); + } + - :host([label-span-xl="8"]) .ui5-form-item, - :host([label-span-xl="8"]) .ui5-form-group { + :host([label-span-xl="8"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="8"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span8); } + :host([label-span-xl="8"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="8"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-1); + } + :host([label-span-xl="8"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="8"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-2); + } + :host([label-span-xl="8"][empty-span-xl="3"]) .ui5-form-item, + :host([label-span-xl="8"][empty-span-xl="3"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span8-3); + } + - :host([label-span-xl="9"]) .ui5-form-item, - :host([label-span-xl="9"]) .ui5-form-group { + :host([label-span-xl="9"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="9"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span9); } + :host([label-span-xl="9"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="9"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span9-1); + } + :host([label-span-xl="9"][empty-span-xl="2"]) .ui5-form-item, + :host([label-span-xl="9"][empty-span-xl="2"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span9-2); + } - :host([label-span-xl="10"]) .ui5-form-item, - :host([label-span-xl="10"]) .ui5-form-group { + :host([label-span-xl="10"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="10"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span10); } + :host([label-span-xl="10"][empty-span-xl="1"]) .ui5-form-item, + :host([label-span-xl="10"][empty-span-xl="1"]) .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-span10-1); + } - :host([label-span-xl="11"]) .ui5-form-item, - :host([label-span-xl="11"]) .ui5-form-group { + :host([label-span-xl="11"][empty-span-xl="0"]) .ui5-form-item, + :host([label-span-xl="11"][empty-span-xl="0"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span11); } diff --git a/packages/main/src/themes/base/Form-parameters.css b/packages/main/src/themes/base/Form-parameters.css index 958e9fb34292..70722d42e108 100644 --- a/packages/main/src/themes/base/Form-parameters.css +++ b/packages/main/src/themes/base/Form-parameters.css @@ -1,17 +1,83 @@ :root { - --ui5-form-item-layout: 1fr 2fr; - --ui5-form-item-layout-span1: 1fr 11fr; - --ui5-form-item-layout-span2: 2fr 10fr; - --ui5-form-item-layout-span3: 3fr 9fr; - --ui5-form-item-layout-span4: 4fr 8fr; - --ui5-form-item-layout-span5: 5fr 7fr; - --ui5-form-item-layout-span6: 6fr 6fr; - --ui5-form-item-layout-span7: 7fr 5fr; - --ui5-form-item-layout-span8: 8fr 4fr; - --ui5-form-item-layout-span9: 9fr 3fr; - --ui5-form-item-layout-span10: 10fr 2fr; - --ui5-form-item-layout-span11: 11fr 1fr; + --ui5-form-item-layout: 4fr 8fr 0fr; + --ui5-form-item-layout-span1: 1fr 11fr 0fr; + --ui5-form-item-layout-span1-1: 1fr 10fr 1fr; + --ui5-form-item-layout-span1-2: 1fr 9fr 2fr; + --ui5-form-item-layout-span1-3: 1fr 8fr 3fr; + --ui5-form-item-layout-span1-4: 1fr 7fr 4fr; + --ui5-form-item-layout-span1-5: 1fr 6fr 5fr; + --ui5-form-item-layout-span1-6: 1fr 5fr 6fr; + --ui5-form-item-layout-span1-7: 1fr 5fr 7fr; + --ui5-form-item-layout-span1-8: 1fr 5fr 8fr; + --ui5-form-item-layout-span1-9: 1fr 5fr 9fr; + --ui5-form-item-layout-span1-10: 1fr 1fr 10fr; + + --ui5-form-item-layout-span2: 2fr 10fr 0fr; + --ui5-form-item-layout-span2-1: 2fr 9fr 1fr; + --ui5-form-item-layout-span2-2: 2fr 8fr 2fr; + --ui5-form-item-layout-span2-3: 2fr 7fr 3fr; + --ui5-form-item-layout-span2-4: 2fr 6fr 4fr; + --ui5-form-item-layout-span2-5: 2fr 5fr 5fr; + --ui5-form-item-layout-span2-6: 2fr 4fr 6fr; + --ui5-form-item-layout-span2-7: 2fr 3fr 7fr; + --ui5-form-item-layout-span2-8: 2fr 2fr 8fr; + --ui5-form-item-layout-span2-9: 2fr 1fr 9fr; + + --ui5-form-item-layout-span3: 3fr 9fr 0fr; + --ui5-form-item-layout-span3-1: 3fr 8fr 1fr; + --ui5-form-item-layout-span3-2: 3fr 7fr 2fr; + --ui5-form-item-layout-span3-3: 3fr 6fr 3fr; + --ui5-form-item-layout-span3-4: 3fr 5fr 4fr; + --ui5-form-item-layout-span3-5: 3fr 4fr 5fr; + --ui5-form-item-layout-span3-6: 3fr 3fr 6fr; + --ui5-form-item-layout-span3-7: 3fr 2fr 7fr; + --ui5-form-item-layout-span3-8: 3fr 1fr 8fr; + + --ui5-form-item-layout-span4: 4fr 8fr 0fr; + --ui5-form-item-layout-span4-1: 4fr 7fr 1fr; + --ui5-form-item-layout-span4-2: 4fr 6fr 2fr; + --ui5-form-item-layout-span4-3: 4fr 5fr 3fr; + --ui5-form-item-layout-span4-4: 4fr 4fr 4fr; + --ui5-form-item-layout-span4-5: 4fr 3fr 5fr; + --ui5-form-item-layout-span4-6: 4fr 2fr 6fr; + --ui5-form-item-layout-span4-7: 4fr 1fr 7fr; + + --ui5-form-item-layout-span5: 5fr 7fr 0fr; + --ui5-form-item-layout-span5-1: 5fr 6fr 1fr; + --ui5-form-item-layout-span5-2: 5fr 5fr 2fr; + --ui5-form-item-layout-span5-3: 5fr 4fr 3fr; + --ui5-form-item-layout-span5-4: 5fr 3fr 4fr; + --ui5-form-item-layout-span5-5: 5fr 2fr 5fr; + --ui5-form-item-layout-span5-6: 5fr 1fr 6fr; + + --ui5-form-item-layout-span6: 6fr 6fr 0fr; + --ui5-form-item-layout-span6-1: 6fr 5fr 1fr; + --ui5-form-item-layout-span6-2: 6fr 4fr 2fr; + --ui5-form-item-layout-span6-3: 6fr 3fr 3fr; + --ui5-form-item-layout-span6-4: 6fr 2fr 4fr; + --ui5-form-item-layout-span6-5: 6fr 1fr 5fr; + + --ui5-form-item-layout-span7: 7fr 5fr 0fr; + --ui5-form-item-layout-span7-1: 7fr 4fr 1fr; + --ui5-form-item-layout-span7-2: 7fr 3fr 2fr; + --ui5-form-item-layout-span7-3: 7fr 2fr 3fr; + --ui5-form-item-layout-span7-4: 7fr 1fr 4fr; + + --ui5-form-item-layout-span8: 8fr 4fr 0fr; + --ui5-form-item-layout-span8-1: 8fr 3fr 1fr; + --ui5-form-item-layout-span8-2: 8fr 2fr 2fr; + --ui5-form-item-layout-span8-3: 8fr 1fr 3fr; + + --ui5-form-item-layout-span9: 9fr 3fr 0fr; + --ui5-form-item-layout-span9-1: 9fr 2fr 1fr; + --ui5-form-item-layout-span9-2: 9fr 1fr 2fr; + + --ui5-form-item-layout-span10: 10fr 2fr 0fr; + --ui5-form-item-layout-span10-1: 10fr 1fr 1fr; + + --ui5-form-item-layout-span11: 11fr 1fr 0fr; --ui5-form-item-layout-span12: 1fr; + --ui5-form-item-label-justify: end; --ui5-form-item-label-justify-span12: start; --ui5-form-item-label-padding: 0.125rem 0; diff --git a/packages/main/test/pages/form/FormEmptySpan.html b/packages/main/test/pages/form/FormEmptySpan.html new file mode 100644 index 000000000000..bbd9fafe4a71 --- /dev/null +++ b/packages/main/test/pages/form/FormEmptySpan.html @@ -0,0 +1,734 @@ + + + + + + Form + + + + + + + + + + + +
+ + +
+ Label Span + + S12 M1 L1 XL1 + S12 M2 L2 XL2 + S12 M3 L3 XL3 + S12 M4 L4 XL4 + S12 M4 L4 XL5 + S12 M4 L4 XL6 + S12 M4 L5 XL6 + S12 M4 L6 XL6 + S12 M5 L6 XL6 + S12 M6 L6 XL6 + S12 M7 L7 XL7 + S12 M8 L8 XL8 + S12 M12 L12 XL12 + + + Empty Span + + S0 M0 L0 XL0 + S0 M1 L1 XL1 + S0 M1 L2 XL2 + S0 M2 L3 XL3 + S0 M2 L4 XL4 + S0 M2 L5 XL5 + S0 M2 L6 XL6 + S0 M2 L7 XL7 + S0 M2 L8 XL8 + S0 M2 L9 XL9 + S0 M2 L10 XL10 + + + + + Top + Side + +
+ +
+ + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + Delivery address: + Newtown + + +
+ + + +


+ +
+ + + Name: + + + + + ZIP Code/City: + + + + + + Street: + + + + + + Country: + + Australia + Germany + England + + + + + WebSite: + + + + + Delivery address: + + + +
+ +


+ +
+ + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + +
+ +
+


+ +
+ + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + +
+ +
+


+ +
+

Label always Top

+ + + Name: + + + + + ZIP Code/City: + + + + + + Street: + + + + + + Country: + + Australia + Germany + England + + + + + WebSite: + + + + + Delivery address: + + + +
+
+ + + + diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md b/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md new file mode 100644 index 000000000000..ef4652628b4d --- /dev/null +++ b/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md @@ -0,0 +1,5 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; +import css from '!!raw-loader!./main.css'; + + diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/main.css b/packages/website/docs/_samples/main/Form/EmptySpan/main.css new file mode 100644 index 000000000000..42918f8ede52 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/EmptySpan/main.css @@ -0,0 +1,6 @@ +ui5-form-item::part(layout) { + background: var(--sapHoverColor); +} +ui5-form-item::part(content) { + background: var(--sapAvatar_1_Background); +} \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/main.js b/packages/website/docs/_samples/main/Form/EmptySpan/main.js new file mode 100644 index 000000000000..0818d9b83fcb --- /dev/null +++ b/packages/website/docs/_samples/main/Form/EmptySpan/main.js @@ -0,0 +1,29 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Slider.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/sample.html b/packages/website/docs/_samples/main/Form/EmptySpan/sample.html new file mode 100644 index 000000000000..c9cf5061fd1d --- /dev/null +++ b/packages/website/docs/_samples/main/Form/EmptySpan/sample.html @@ -0,0 +1,99 @@ + + + + + + + + Form Label Span Sample + + + + + + + Page SizeL + Label SpanS12 M4 L4 XL4
+ Empty SpanS0 M1 L2 XL3
+ + +
+ + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + +

+ + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + +

+ + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + +
+ + + + + + + + From 56e80ac5ba48fc61d9e83c7252ca3b2d81695212 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Fri, 15 Nov 2024 16:19:57 +0200 Subject: [PATCH 2/4] chore: add tests --- packages/main/cypress/specs/Form.cy.ts | 70 +++++++++++++------ packages/main/src/Form.ts | 2 - packages/main/src/FormGroup.ts | 8 --- packages/main/src/FormItem.ts | 6 -- packages/main/src/themes/Form.css | 2 +- .../{FormLabelSpan.css => FormItemSpan.css} | 0 6 files changed, 48 insertions(+), 40 deletions(-) rename packages/main/src/themes/{FormLabelSpan.css => FormItemSpan.css} (100%) diff --git a/packages/main/cypress/specs/Form.cy.ts b/packages/main/cypress/specs/Form.cy.ts index 01b2d65362fe..550f436ce6af 100644 --- a/packages/main/cypress/specs/Form.cy.ts +++ b/packages/main/cypress/specs/Form.cy.ts @@ -8,7 +8,7 @@ import "../../src/Text.js"; import "../../src/Input.js"; describe("General API", () => { - it("tests calculated state of Form with default layout and label-span", () => { + it("tests calculated state of Form with default layout, label-span and empty-span", () => { cy.mount(html` @@ -36,28 +36,18 @@ describe("General API", () => { .as("form"); cy.get("@form") - .should("have.prop", "columnsS", 1); - - cy.get("@form") - .should("have.prop", "labelSpanS", 12); - - cy.get("@form") - .should("have.prop", "columnsM", 1); - - cy.get("@form") - .should("have.prop", "labelSpanM", 4); - - cy.get("@form") - .should("have.prop", "columnsL", 2); - - cy.get("@form") - .should("have.prop", "labelSpanL", 4); - - cy.get("@form") - .should("have.prop", "columnsXl", 3); - - cy.get("@form") - .should("have.prop", "labelSpanXl", 4); + .should("have.prop", "columnsS", 1) + .and("have.prop", "labelSpanS", 12) + .and("have.prop", "emptySpanS", 0) + .and("have.prop", "columnsM", 1) + .and("have.prop", "labelSpanM", 4) + .and("have.prop", "emptySpanM", 0) + .and("have.prop", "columnsL", 2) + .and("have.prop", "labelSpanL", 4) + .and("have.prop", "emptySpanL", 0) + .and("have.prop", "columnsXl", 3) + .and("have.prop", "emptySpanXl", 0) + .and("have.prop", "labelSpanXl", 4); }); it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => { @@ -175,6 +165,40 @@ describe("General API", () => { .should("have.prop", "labelSpanXl", 12); }); + it("tests calculated state of Form empty-span='S0 M0 L1 XL1'", () => { + cy.mount(html` + + + Name + Red Point Stores + + + + + + Twitter + @sap + + + + + + Name + Red Point Stores + + + `); + + cy.get("[ui5-form]") + .as("form"); + + cy.get("@form") + .should("have.prop", "emptySpanS", 0) + .and("have.prop", "emptySpanM", 0) + .and("have.prop", "emptySpanL", 1) + .and("have.prop", "emptySpanXl", 1); + }); + it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => { cy.mount(html` diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 2fcbce90e467..356e7892796a 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -35,8 +35,6 @@ const MAX_SPAN_VALUE = 11; * @since 2.0.0 */ interface IFormItem extends UI5Element { - labelSpan: string - emptySpan: string itemSpacing: `${FormItemSpacing}`; readonly isGroup: boolean; colsXl?: number; diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index 8dc7a80ae8aa..230525b417ac 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -86,20 +86,12 @@ class FormGroup extends UI5Element implements IFormItem { @property() itemSpacing: `${FormItemSpacing}` = "Normal"; - @property() - labelSpan = "S12 M4 L4 XL4"; - - @property() - emptySpan = "S0 M0 L0 XL0"; - onBeforeRendering() { this.processFormItems(); } processFormItems() { this.items.forEach((item: FormItem) => { - item.labelSpan = this.labelSpan; - item.emptySpan = this.emptySpan; item.itemSpacing = this.itemSpacing; }); } diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 5a5f4b1f5e5c..21228ab73567 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -83,12 +83,6 @@ class FormItem extends UI5Element implements IFormItem { /** * @private */ - @property() - labelSpan = "S12 M4 L4 XL4"; - - @property() - emptySpan = "S0 M0 L0 XL0"; - @property() itemSpacing: `${FormItemSpacing}` = "Normal" diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index ccf84c66e7ee..4434bb83eec1 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -1,5 +1,5 @@ @import "./FormLayout.css"; -@import "./FormLabelSpan.css"; +@import "./FormItemSpan.css"; :host { display: block; diff --git a/packages/main/src/themes/FormLabelSpan.css b/packages/main/src/themes/FormItemSpan.css similarity index 100% rename from packages/main/src/themes/FormLabelSpan.css rename to packages/main/src/themes/FormItemSpan.css From c7a26c9bed7849556a40b16cbc1d922ea2efd381 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Sat, 16 Nov 2024 21:42:21 +0200 Subject: [PATCH 3/4] chore: improve docs --- packages/main/src/Form.ts | 30 +++++++++++-------- .../main/test/pages/form/FormEmptySpan.html | 4 ++- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 356e7892796a..87363b082127 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -240,19 +240,25 @@ class Form extends UI5Element { /** * Defines the number of cells that are empty at the end of each form item, configurable by breakpoint. - * By default, a form item’s width (12 cells) is fully allocated between its label and field, with no empty space at the end. - * Labels occupy 4 cells, and fields occupy 8 cells. + * + * By default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end: + * - **Label:** occupies 4 cells. + * - **Field:** occupies 8 cells. * * The `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end. * - * **For example:** Setting "S0 M0 L3 XL3" (or just "L3 XL3") allocates 4 cells for the label, 5 cells for the associated field, - * and leaves 3 cells empty space at the end. Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field. + * **For example:** Setting "S0 M0 L3 XL3" (or just "L3 XL3") adjusts the layout as follows: + * - **Label:** remains 4 cells. + * - **Field:** is reduced to 5 cells. + * - **Empty space:** 3 cells are added at the end. + * Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field. * - * **Recommended value:** 1 cell for empty space is typically sufficient. + * **Recommended value:** + * Setting `emptySpan` to 1 cell is typically sufficient to achieve a balanced layout. * - * **Note:** The empty space can take up to 10 cells, ensuring at least 1 cell each for the label and its field. - * However, the **recommended** empty space is 1 cell. Moreover, the combined value of `emptySpan` and `labelSpan` must not exceed 11, - * to ensure at least 1 cell remains for the field. + * **Note:** + * - The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field. + * - When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field. * * @default "S0 M0 L0 XL0" * @since 2.5.0 @@ -402,19 +408,19 @@ class Form extends UI5Element { } validatateItemLayout() { - if (this.labelSpanS + this.emptySpanS > MAX_SPAN_VALUE) { + if (this.emptySpanS !== 0 && this.labelSpanS + this.emptySpanS > MAX_SPAN_VALUE) { // eslint-disable-next-line console.warn(`Form :: invalid usage of emptySpan and labelSpan in S size. Their combined values must not exceed ${MAX_SPAN_VALUE} - currently ${this.labelSpanS + this.emptySpanS}.`) } - if (this.labelSpanM + this.emptySpanM > MAX_SPAN_VALUE) { + if (this.emptySpanM !== 0 && this.labelSpanM + this.emptySpanM > MAX_SPAN_VALUE) { // eslint-disable-next-line console.warn(`Form :: invalid usage of emptySpan and labelSpan in M size. Their combined values must not exceed ${MAX_SPAN_VALUE} - currently ${this.labelSpanS + this.emptySpanS}.`) } - if (this.labelSpanL + this.emptySpanL > MAX_SPAN_VALUE) { + if (this.emptySpanL !== 0 && this.labelSpanL + this.emptySpanL > MAX_SPAN_VALUE) { // eslint-disable-next-line console.warn(`Form :: invalid usage of emptySpan and labelSpan in L size. Their combined values must not exceed ${MAX_SPAN_VALUE} - currently ${this.labelSpanS + this.emptySpanS}.`) } - if (this.labelSpanXl + this.emptySpanXl > MAX_SPAN_VALUE) { + if (this.emptySpanXl !== 0 && this.labelSpanXl + this.emptySpanXl > MAX_SPAN_VALUE) { // eslint-disable-next-line console.warn(`Form :: invalid usage of emptySpan and labelSpan in XL size. Their combined values must not exceed 11 - currently ${this.labelSpanS + this.emptySpanS}.`) } diff --git a/packages/main/test/pages/form/FormEmptySpan.html b/packages/main/test/pages/form/FormEmptySpan.html index bbd9fafe4a71..471e34a2f2d3 100644 --- a/packages/main/test/pages/form/FormEmptySpan.html +++ b/packages/main/test/pages/form/FormEmptySpan.html @@ -383,7 +383,7 @@ - +



@@ -427,6 +427,8 @@ +
+


From 35baeec925fc5cb9a6d5da78620f479c73a0ab67 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 19 Nov 2024 18:22:23 +0200 Subject: [PATCH 4/4] chore: calculate css vars instead of hard-coding all combinations --- packages/main/src/Form.ts | 95 +- packages/main/src/themes/FormItemSpan.css | 1134 +---------------- .../main/src/themes/base/Form-parameters.css | 78 -- 3 files changed, 67 insertions(+), 1240 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 87363b082127..279ea3474e56 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -25,9 +25,9 @@ const StepColumn = { }; const breakpoints = ["S", "M", "L", "Xl"]; - -const MAX_SPAN_VALUE = 11; - +const MAX_FORM_ITEM_CELLS = 12; +const DEFAULT_FORM_ITEM_LAYOUT = "4fr 8fr 0fr"; +const DEFAULT_FORM_ITEM_LAYOUT_S = "1fr"; /** * Interface for components that can be slotted inside `ui5-form` as items. * @public @@ -133,15 +133,19 @@ type ItemsInfo = { * * ### Items Empty Span * - * By default, the entire form item's width is allocated between the label and its field, with no empty space at the end. + * By default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end: + * - **Label:** occupies 4 cells. + * - **Field:** occupies 8 cells. + * * The `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end. * - * **For example:** Setting "S0 M0 L3 XL3" (or just "L3 XL3") allocates 4 cells for the label, 5 cells for the associated field, - * and leaves 3 cells empty space at the end. Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field. + * **For example:** Setting "S0 M0 L3 XL3" (or just "L3 XL3") adjusts the layout as follows: + * - **Label:** remains 4 cells. + * - **Field:** is reduced to 5 cells. + * - **Empty space:** 3 cells are added at the end. * - * *Note:* The empty space can take up to 10 cells, ensuring at least 1 cell each for the label and its field. - * However, the **recommended** empty space is 1 cell and you have avoid using big numbers. - * Moreover, the combined value of `emptySpan` and `labelSpan` must not exceed 11, to ensure at least 1 cell remains for the field. + * Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field. + * However, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout. * * ### Navigation flow * @@ -241,20 +245,8 @@ class Form extends UI5Element { /** * Defines the number of cells that are empty at the end of each form item, configurable by breakpoint. * - * By default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end: - * - **Label:** occupies 4 cells. - * - **Field:** occupies 8 cells. - * - * The `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end. - * - * **For example:** Setting "S0 M0 L3 XL3" (or just "L3 XL3") adjusts the layout as follows: - * - **Label:** remains 4 cells. - * - **Field:** is reduced to 5 cells. - * - **Empty space:** 3 cells are added at the end. - * Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field. - * - * **Recommended value:** - * Setting `emptySpan` to 1 cell is typically sufficient to achieve a balanced layout. + * By default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end. + * The `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end. * * **Note:** * - The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field. @@ -379,7 +371,7 @@ class Form extends UI5Element { }); } - setFormItemLayout() { + parseFormItemSpan() { this.labelSpan.split(" ").forEach((breakpoint: string) => { if (breakpoint.startsWith("S")) { this.labelSpanS = parseInt(breakpoint.slice(1)); @@ -403,27 +395,46 @@ class Form extends UI5Element { this.emptySpanXl = parseInt(breakpoint.slice(2)); } }); + } - this.validatateItemLayout(); + setFormItemLayout() { + this.parseFormItemSpan(); + + [ + { + breakpoint: "S", + labelSpan: this.labelSpanS, + emptySpan: this.emptySpanS, + }, + { + breakpoint: "M", + labelSpan: this.labelSpanM, + emptySpan: this.emptySpanM, + }, + { + breakpoint: "L", + labelSpan: this.labelSpanL, + emptySpan: this.emptySpanL, + }, + { + breakpoint: "XL", + labelSpan: this.labelSpanXl, + emptySpan: this.emptySpanXl, + }, + ].forEach(layout => { + if (this.isValidFormItemLayout(layout.labelSpan, layout.emptySpan)) { + const formItemLayout = layout.labelSpan === MAX_FORM_ITEM_CELLS ? `1fr` : `${layout.labelSpan}fr ${MAX_FORM_ITEM_CELLS - (layout.labelSpan + layout.emptySpan)}fr ${layout.emptySpan}fr`; + this.style.setProperty(getScopedVarName(`--ui5-form-item-layout-${layout.breakpoint}`), formItemLayout); + } else { + // eslint-disable-next-line + console.warn(`Form :: invalid usage of emptySpan and/or labelSpan in ${layout.breakpoint} size. The labelSpan must be <=12 and when emptySpace is used - their combined values must not exceed 11.`) + this.style.setProperty(getScopedVarName(`--ui5-form-item-layout-${layout.breakpoint}`), layout.breakpoint === "S" ? DEFAULT_FORM_ITEM_LAYOUT_S : DEFAULT_FORM_ITEM_LAYOUT); + } + }); } - validatateItemLayout() { - if (this.emptySpanS !== 0 && this.labelSpanS + this.emptySpanS > MAX_SPAN_VALUE) { - // eslint-disable-next-line - console.warn(`Form :: invalid usage of emptySpan and labelSpan in S size. Their combined values must not exceed ${MAX_SPAN_VALUE} - currently ${this.labelSpanS + this.emptySpanS}.`) - } - if (this.emptySpanM !== 0 && this.labelSpanM + this.emptySpanM > MAX_SPAN_VALUE) { - // eslint-disable-next-line - console.warn(`Form :: invalid usage of emptySpan and labelSpan in M size. Their combined values must not exceed ${MAX_SPAN_VALUE} - currently ${this.labelSpanS + this.emptySpanS}.`) - } - if (this.emptySpanL !== 0 && this.labelSpanL + this.emptySpanL > MAX_SPAN_VALUE) { - // eslint-disable-next-line - console.warn(`Form :: invalid usage of emptySpan and labelSpan in L size. Their combined values must not exceed ${MAX_SPAN_VALUE} - currently ${this.labelSpanS + this.emptySpanS}.`) - } - if (this.emptySpanXl !== 0 && this.labelSpanXl + this.emptySpanXl > MAX_SPAN_VALUE) { - // eslint-disable-next-line - console.warn(`Form :: invalid usage of emptySpan and labelSpan in XL size. Their combined values must not exceed 11 - currently ${this.labelSpanS + this.emptySpanS}.`) - } + isValidFormItemLayout(labelSpan: number, emptySpan: number) { + return emptySpan === 0 ? labelSpan <= MAX_FORM_ITEM_CELLS : labelSpan + emptySpan <= MAX_FORM_ITEM_CELLS - 1; } setFastNavGroup() { diff --git a/packages/main/src/themes/FormItemSpan.css b/packages/main/src/themes/FormItemSpan.css index 73b8361e4d46..7657b599eec5 100644 --- a/packages/main/src/themes/FormItemSpan.css +++ b/packages/main/src/themes/FormItemSpan.css @@ -3,1163 +3,57 @@ * - in M, L ans XL sizes the Form's labels take 4 cells out 12 of the whole width, e.g 4:8:0 * - in S size, it the Form's labels take the whole width 12/12 cells, e.g the label and the input are displayed vertically. * -* The ratio can be changed trough the labelSpan and the emptySpan properties. +* The ratio can be changed via the labelSpan and the emptySpan properties. */ -/* S - 12 cells */ @container (max-width: 600px) { - :host([label-span-s="1"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1); - } - :host([label-span-s="1"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-1); - } - :host([label-span-s="1"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-2); - } - :host([label-span-s="1"][empty-span-s="3"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-3); - } - :host([label-span-s="1"][empty-span-s="4"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-4); - } - :host([label-span-s="1"][empty-span-s="5"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-5); - } - :host([label-span-s="1"][empty-span-s="6"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-6); - } - :host([label-span-s="1"][empty-span-s="7"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-7); - } - :host([label-span-s="1"][empty-span-s="8"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-8); - } - :host([label-span-s="1"][empty-span-s="9"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-9); - } - :host([label-span-s="1"][empty-span-s="10"]) .ui5-form-item, - :host([label-span-s="1"][empty-span-s="10"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-10); - } - - - :host([label-span-s="2"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2); - } - :host([label-span-s="2"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-1); - } - :host([label-span-s="2"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-2); - } - :host([label-span-s="2"][empty-span-s="3"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-3); - } - :host([label-span-s="2"][empty-span-s="4"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-4); - } - :host([label-span-s="2"][empty-span-s="5"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-5); - } - :host([label-span-s="2"][empty-span-s="6"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-6); - } - :host([label-span-s="2"][empty-span-s="7"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-7); - } - :host([label-span-s="2"][empty-span-s="8"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-8); - } - :host([label-span-s="2"][empty-span-s="9"]) .ui5-form-item, - :host([label-span-s="2"][empty-span-s="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-9); - } - - - :host([label-span-s="3"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="3"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3); - } - :host([label-span-s="3"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="3"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-1); - } - :host([label-span-s="3"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="3"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-2); - } - :host([label-span-s="3"][empty-span-s="3"]) .ui5-form-item, - :host([label-span-s="3"][empty-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-3); - } - :host([label-span-s="3"][empty-span-s="4"]) .ui5-form-item, - :host([label-span-s="3"][empty-span-s="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-4); - } - :host([label-span-s="3"][empty-span-s="5"]) .ui5-form-item, - :host([label-span-s="3"][empty-span-s="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-5); - } - :host([label-span-s="3"][empty-span-s="6"]) .ui5-form-item, - :host([label-span-s="3"][empty-span-s="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-6); - } - :host([label-span-s="3"][empty-span-s="7"]) .ui5-form-item, - :host([label-span-s="3"][empty-span-s="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-7); - } - - - :host([label-span-s="4"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="4"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4); - } - :host([label-span-s="4"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="4"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-1); - } - :host([label-span-s="4"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="4"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-2); - } - :host([label-span-s="4"][empty-span-s="3"]) .ui5-form-item, - :host([label-span-s="4"][empty-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-3); - } - :host([label-span-s="4"][empty-span-s="4"]) .ui5-form-item, - :host([label-span-s="4"][empty-span-s="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-4); - } - :host([label-span-s="4"][empty-span-s="5"]) .ui5-form-item, - :host([label-span-s="4"][empty-span-s="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-5); - } - :host([label-span-s="4"][empty-span-s="6"]) .ui5-form-item, - :host([label-span-s="4"][empty-span-s="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-6); - } - :host([label-span-s="4"][empty-span-s="7"]) .ui5-form-item, - :host([label-span-s="4"][empty-span-s="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-7); + .ui5-form-item, + .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-S); } - - :host([label-span-s="5"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="5"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5); - } - :host([label-span-s="5"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="5"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-1); - } - :host([label-span-s="5"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="5"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-2); - } - :host([label-span-s="5"][empty-span-s="3"]) .ui5-form-item, - :host([label-span-s="5"][empty-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-3); - } - :host([label-span-s="5"][empty-span-s="4"]) .ui5-form-item, - :host([label-span-s="5"][empty-span-s="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-4); - } - :host([label-span-s="5"][empty-span-s="5"]) .ui5-form-item, - :host([label-span-s="5"][empty-span-s="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-5); - } - :host([label-span-s="5"][empty-span-s="6"]) .ui5-form-item, - :host([label-span-s="5"][empty-span-s="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-6); - } - - - :host([label-span-s="6"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="6"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6); - } - :host([label-span-s="6"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="6"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-1); - } - :host([label-span-s="6"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="6"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-2); - } - :host([label-span-s="6"][empty-span-s="3"]) .ui5-form-item, - :host([label-span-s="6"][empty-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-3); - } - :host([label-span-s="6"][empty-span-s="4"]) .ui5-form-item, - :host([label-span-s="6"][empty-span-s="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-4); - } - :host([label-span-s="6"][empty-span-s="5"]) .ui5-form-item, - :host([label-span-s="6"][empty-span-s="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-5); - } - - - :host([label-span-s="7"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="7"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7); - } - :host([label-span-s="7"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="7"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-1); - } - :host([label-span-s="7"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="7"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-2); - } - :host([label-span-s="7"][empty-span-s="3"]) .ui5-form-item, - :host([label-span-s="7"][empty-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-3); - } - :host([label-span-s="7"][empty-span-s="4"]) .ui5-form-item, - :host([label-span-s="7"][empty-span-s="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-4); - } - - - :host([label-span-s="8"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="8"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8); - } - :host([label-span-s="8"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="8"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-1); - } - :host([label-span-s="8"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="8"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-2); - } - :host([label-span-s="8"][empty-span-s="3"]) .ui5-form-item, - :host([label-span-s="8"][empty-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-3); - } - - - :host([label-span-s="9"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="9"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9); - } - :host([label-span-s="9"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="9"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9-1); - } - :host([label-span-s="9"][empty-span-s="2"]) .ui5-form-item, - :host([label-span-s="9"][empty-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9-2); - } - - :host([label-span-s="10"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="10"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10); - } - :host([label-span-s="10"][empty-span-s="1"]) .ui5-form-item, - :host([label-span-s="10"][empty-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10-1); - } - - :host([label-span-s="11"][empty-span-s="0"]) .ui5-form-item, - :host([label-span-s="11"][empty-span-s="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span11); - } - - :host(:not([label-span-s])) .ui5-form-item, - :host(:not([label-span-s])) .ui5-form-group, :host([label-span-s="12"]) .ui5-form-item, :host([label-span-s="12"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span12); --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); } } -/* M - 4 cells by default, up to 12 cells */ @container (width > 600px) and (width <= 1024px) { - :host([label-span-m="1"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1); - } - :host([label-span-m="1"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-1); - } - :host([label-span-m="1"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-2); - } - :host([label-span-m="1"][empty-span-m="3"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-3); - } - :host([label-span-m="1"][empty-span-m="4"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-4); - } - :host([label-span-m="1"][empty-span-m="5"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-5); - } - :host([label-span-m="1"][empty-span-m="6"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-6); - } - :host([label-span-m="1"][empty-span-m="7"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-7); - } - :host([label-span-m="1"][empty-span-m="8"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-8); - } - :host([label-span-m="1"][empty-span-m="9"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-9); - } - :host([label-span-m="1"][empty-span-m="10"]) .ui5-form-item, - :host([label-span-m="1"][empty-span-m="10"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-10); - } - - - :host([label-span-m="2"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2); - } - :host([label-span-m="2"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-1); - } - :host([label-span-m="2"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-2); - } - :host([label-span-m="2"][empty-span-m="3"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-3); - } - :host([label-span-m="2"][empty-span-m="4"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-4); - } - :host([label-span-m="2"][empty-span-m="5"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-5); - } - :host([label-span-m="2"][empty-span-m="6"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-6); - } - :host([label-span-m="2"][empty-span-m="7"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-7); - } - :host([label-span-m="2"][empty-span-m="8"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-8); - } - :host([label-span-m="2"][empty-span-m="9"]) .ui5-form-item, - :host([label-span-m="2"][empty-span-m="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-9); - } - - - :host([label-span-m="3"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="3"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3); - } - :host([label-span-m="3"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="3"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-1); - } - :host([label-span-m="3"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="3"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-2); - } - :host([label-span-m="3"][empty-span-m="3"]) .ui5-form-item, - :host([label-span-m="3"][empty-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-3); - } - :host([label-span-m="3"][empty-span-m="4"]) .ui5-form-item, - :host([label-span-m="3"][empty-span-m="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-4); - } - :host([label-span-m="3"][empty-span-m="5"]) .ui5-form-item, - :host([label-span-m="3"][empty-span-m="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-5); - } - :host([label-span-m="3"][empty-span-m="6"]) .ui5-form-item, - :host([label-span-m="3"][empty-span-m="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-6); - } - :host([label-span-m="3"][empty-span-m="7"]) .ui5-form-item, - :host([label-span-m="3"][empty-span-m="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-7); - } - - - :host([label-span-m="4"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="4"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4); - } - :host([label-span-m="4"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="4"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-1); - } - :host([label-span-m="4"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="4"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-2); - } - :host([label-span-m="4"][empty-span-m="3"]) .ui5-form-item, - :host([label-span-m="4"][empty-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-3); - } - :host([label-span-m="4"][empty-span-m="4"]) .ui5-form-item, - :host([label-span-m="4"][empty-span-m="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-4); - } - :host([label-span-m="4"][empty-span-m="5"]) .ui5-form-item, - :host([label-span-m="4"][empty-span-m="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-5); - } - :host([label-span-m="4"][empty-span-m="6"]) .ui5-form-item, - :host([label-span-m="4"][empty-span-m="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-6); - } - :host([label-span-m="4"][empty-span-m="7"]) .ui5-form-item, - :host([label-span-m="4"][empty-span-m="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-7); - } - - - :host([label-span-m="5"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="5"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5); - } - :host([label-span-m="5"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="5"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-1); - } - :host([label-span-m="5"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="5"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-2); - } - :host([label-span-m="5"][empty-span-m="3"]) .ui5-form-item, - :host([label-span-m="5"][empty-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-3); - } - :host([label-span-m="5"][empty-span-m="4"]) .ui5-form-item, - :host([label-span-m="5"][empty-span-m="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-4); - } - :host([label-span-m="5"][empty-span-m="5"]) .ui5-form-item, - :host([label-span-m="5"][empty-span-m="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-5); - } - :host([label-span-m="5"][empty-span-m="6"]) .ui5-form-item, - :host([label-span-m="5"][empty-span-m="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-6); - } - - - :host([label-span-m="6"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="6"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6); - } - :host([label-span-m="6"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="6"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-1); - } - :host([label-span-m="6"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="6"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-2); - } - :host([label-span-m="6"][empty-span-m="3"]) .ui5-form-item, - :host([label-span-m="6"][empty-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-3); - } - :host([label-span-m="6"][empty-span-m="4"]) .ui5-form-item, - :host([label-span-m="6"][empty-span-m="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-4); - } - :host([label-span-m="6"][empty-span-m="5"]) .ui5-form-item, - :host([label-span-m="6"][empty-span-m="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-5); - } - - - :host([label-span-m="7"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="7"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7); - } - :host([label-span-m="7"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="7"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-1); - } - :host([label-span-m="7"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="7"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-2); - } - :host([label-span-m="7"][empty-span-m="3"]) .ui5-form-item, - :host([label-span-m="7"][empty-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-3); - } - :host([label-span-m="7"][empty-span-m="4"]) .ui5-form-item, - :host([label-span-m="7"][empty-span-m="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-4); - } - - - :host([label-span-m="8"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="8"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8); - } - :host([label-span-m="8"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="8"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-1); - } - :host([label-span-m="8"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="8"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-2); - } - :host([label-span-m="8"][empty-span-m="3"]) .ui5-form-item, - :host([label-span-m="8"][empty-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-3); - } - - - :host([label-span-m="9"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="9"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9); - } - :host([label-span-m="9"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="9"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9-1); - } - :host([label-span-m="9"][empty-span-m="2"]) .ui5-form-item, - :host([label-span-m="9"][empty-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9-2); - } - - :host([label-span-m="10"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="10"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10); - } - :host([label-span-m="10"][empty-span-m="1"]) .ui5-form-item, - :host([label-span-m="10"][empty-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10-1); - } - - :host([label-span-m="11"][empty-span-m="0"]) .ui5-form-item, - :host([label-span-m="11"][empty-span-m="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span11); + .ui5-form-item, + .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-M); } :host([label-span-m="12"]) .ui5-form-item, :host([label-span-m="12"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span12); --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); } } -/* L - 4 cells by default, up to 12 cells */ @container (width > 1024px) and (width <= 1440px) { - :host([label-span-l="1"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1); - } - :host([label-span-l="1"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-1); - } - :host([label-span-l="1"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-2); - } - :host([label-span-l="1"][empty-span-l="3"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-3); - } - :host([label-span-l="1"][empty-span-l="4"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-4); - } - :host([label-span-l="1"][empty-span-l="5"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-5); - } - :host([label-span-l="1"][empty-span-l="6"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-6); - } - :host([label-span-l="1"][empty-span-l="7"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-7); - } - :host([label-span-l="1"][empty-span-l="8"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-8); - } - :host([label-span-l="1"][empty-span-l="9"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-9); - } - :host([label-span-l="1"][empty-span-l="10"]) .ui5-form-item, - :host([label-span-l="1"][empty-span-l="10"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-10); - } - - - :host([label-span-l="2"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2); - } - :host([label-span-l="2"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-1); - } - :host([label-span-l="2"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-2); - } - :host([label-span-l="2"][empty-span-l="3"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-3); - } - :host([label-span-l="2"][empty-span-l="4"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-4); - } - :host([label-span-l="2"][empty-span-l="5"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-5); - } - :host([label-span-l="2"][empty-span-l="6"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-6); - } - :host([label-span-l="2"][empty-span-l="7"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-7); - } - :host([label-span-l="2"][empty-span-l="8"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-8); - } - :host([label-span-l="2"][empty-span-l="9"]) .ui5-form-item, - :host([label-span-l="2"][empty-span-l="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-9); - } - - - :host([label-span-l="3"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="3"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3); - } - :host([label-span-l="3"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="3"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-1); - } - :host([label-span-l="3"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="3"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-2); - } - :host([label-span-l="3"][empty-span-l="3"]) .ui5-form-item, - :host([label-span-l="3"][empty-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-3); - } - :host([label-span-l="3"][empty-span-l="4"]) .ui5-form-item, - :host([label-span-l="3"][empty-span-l="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-4); - } - :host([label-span-l="3"][empty-span-l="5"]) .ui5-form-item, - :host([label-span-l="3"][empty-span-l="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-5); - } - :host([label-span-l="3"][empty-span-l="6"]) .ui5-form-item, - :host([label-span-l="3"][empty-span-l="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-6); - } - :host([label-span-l="3"][empty-span-l="7"]) .ui5-form-item, - :host([label-span-l="3"][empty-span-l="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-7); - } - - - :host([label-span-l="4"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="4"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4); - } - :host([label-span-l="4"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="4"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-1); - } - :host([label-span-l="4"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="4"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-2); - } - :host([label-span-l="4"][empty-span-l="3"]) .ui5-form-item, - :host([label-span-l="4"][empty-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-3); - } - :host([label-span-l="4"][empty-span-l="4"]) .ui5-form-item, - :host([label-span-l="4"][empty-span-l="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-4); - } - :host([label-span-l="4"][empty-span-l="5"]) .ui5-form-item, - :host([label-span-l="4"][empty-span-l="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-5); - } - :host([label-span-l="4"][empty-span-l="6"]) .ui5-form-item, - :host([label-span-l="4"][empty-span-l="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-6); - } - :host([label-span-l="4"][empty-span-l="7"]) .ui5-form-item, - :host([label-span-l="4"][empty-span-l="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-7); - } - - - :host([label-span-l="5"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="5"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5); - } - :host([label-span-l="5"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="5"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-1); - } - :host([label-span-l="5"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="5"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-2); - } - :host([label-span-l="5"][empty-span-l="3"]) .ui5-form-item, - :host([label-span-l="5"][empty-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-3); - } - :host([label-span-l="5"][empty-span-l="4"]) .ui5-form-item, - :host([label-span-l="5"][empty-span-l="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-4); - } - :host([label-span-l="5"][empty-span-l="5"]) .ui5-form-item, - :host([label-span-l="5"][empty-span-l="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-5); - } - :host([label-span-l="5"][empty-span-l="6"]) .ui5-form-item, - :host([label-span-l="5"][empty-span-l="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-6); - } - - - :host([label-span-l="6"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="6"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6); - } - :host([label-span-l="6"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="6"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-1); - } - :host([label-span-l="6"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="6"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-2); - } - :host([label-span-l="6"][empty-span-l="3"]) .ui5-form-item, - :host([label-span-l="6"][empty-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-3); - } - :host([label-span-l="6"][empty-span-l="4"]) .ui5-form-item, - :host([label-span-l="6"][empty-span-l="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-4); - } - :host([label-span-l="6"][empty-span-l="5"]) .ui5-form-item, - :host([label-span-l="6"][empty-span-l="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-5); - } - - - :host([label-span-l="7"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="7"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7); - } - :host([label-span-l="7"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="7"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-1); - } - :host([label-span-l="7"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="7"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-2); - } - :host([label-span-l="7"][empty-span-l="3"]) .ui5-form-item, - :host([label-span-l="7"][empty-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-3); - } - :host([label-span-l="7"][empty-span-l="4"]) .ui5-form-item, - :host([label-span-l="7"][empty-span-l="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-4); - } - - - :host([label-span-l="8"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="8"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8); - } - :host([label-span-l="8"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="8"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-1); - } - :host([label-span-l="8"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="8"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-2); - } - :host([label-span-l="8"][empty-span-l="3"]) .ui5-form-item, - :host([label-span-l="8"][empty-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-3); - } - - - :host([label-span-l="9"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="9"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9); - } - :host([label-span-l="9"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="9"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9-1); - } - :host([label-span-l="9"][empty-span-l="2"]) .ui5-form-item, - :host([label-span-l="9"][empty-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9-2); - } - - :host([label-span-l="10"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="10"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10); - } - :host([label-span-l="10"][empty-span-l="1"]) .ui5-form-item, - :host([label-span-l="10"][empty-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10-1); - } - - :host([label-span-l="11"][empty-span-l="0"]) .ui5-form-item, - :host([label-span-l="11"][empty-span-l="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span11); + .ui5-form-item, + .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-L); } :host([label-span-l="12"]) .ui5-form-item, :host([label-span-l="12"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span12); --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); } } -/* XL - 4 cells by default, up to 12 cells */ @container (min-width: 1441px) { - :host([label-span-xl="1"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1); - } - :host([label-span-xl="1"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-1); - } - :host([label-span-xl="1"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-2); - } - :host([label-span-xl="1"][empty-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-3); - } - :host([label-span-xl="1"][empty-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-4); - } - :host([label-span-xl="1"][empty-span-xl="5"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-5); - } - :host([label-span-xl="1"][empty-span-xl="6"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-6); - } - :host([label-span-xl="1"][empty-span-xl="7"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-7); - } - :host([label-span-xl="1"][empty-span-xl="8"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-8); - } - :host([label-span-xl="1"][empty-span-xl="9"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-9); - } - :host([label-span-xl="1"][empty-span-xl="10"]) .ui5-form-item, - :host([label-span-xl="1"][empty-span-xl="10"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1-10); - } - - - :host([label-span-xl="2"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2); - } - :host([label-span-xl="2"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-1); - } - :host([label-span-xl="2"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-2); - } - :host([label-span-xl="2"][empty-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-3); - } - :host([label-span-xl="2"][empty-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-4); - } - :host([label-span-xl="2"][empty-span-xl="5"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-5); - } - :host([label-span-xl="2"][empty-span-xl="6"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-6); - } - :host([label-span-xl="2"][empty-span-xl="7"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-7); - } - :host([label-span-xl="2"][empty-span-xl="8"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-8); - } - :host([label-span-xl="2"][empty-span-xl="9"]) .ui5-form-item, - :host([label-span-xl="2"][empty-span-xl="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2-9); - } - - - :host([label-span-xl="3"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="3"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3); - } - :host([label-span-xl="3"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="3"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-1); - } - :host([label-span-xl="3"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="3"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-2); - } - :host([label-span-xl="3"][empty-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="3"][empty-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-3); - } - :host([label-span-xl="3"][empty-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="3"][empty-span-xl="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-4); - } - :host([label-span-xl="3"][empty-span-xl="5"]) .ui5-form-item, - :host([label-span-xl="3"][empty-span-xl="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-5); - } - :host([label-span-xl="3"][empty-span-xl="6"]) .ui5-form-item, - :host([label-span-xl="3"][empty-span-xl="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-6); - } - :host([label-span-xl="3"][empty-span-xl="7"]) .ui5-form-item, - :host([label-span-xl="3"][empty-span-xl="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3-7); - } - - - :host([label-span-xl="4"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="4"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4); - } - :host([label-span-xl="4"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="4"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-1); - } - :host([label-span-xl="4"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="4"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-2); - } - :host([label-span-xl="4"][empty-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="4"][empty-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-3); - } - :host([label-span-xl="4"][empty-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="4"][empty-span-xl="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-4); - } - :host([label-span-xl="4"][empty-span-xl="5"]) .ui5-form-item, - :host([label-span-xl="4"][empty-span-xl="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-5); - } - :host([label-span-xl="4"][empty-span-xl="6"]) .ui5-form-item, - :host([label-span-xl="4"][empty-span-xl="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-6); - } - :host([label-span-xl="4"][empty-span-xl="7"]) .ui5-form-item, - :host([label-span-xl="4"][empty-span-xl="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4-7); - } - - - :host([label-span-xl="5"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="5"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5); - } - :host([label-span-xl="5"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="5"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-1); - } - :host([label-span-xl="5"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="5"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-2); - } - :host([label-span-xl="5"][empty-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="5"][empty-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-3); - } - :host([label-span-xl="5"][empty-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="5"][empty-span-xl="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-4); - } - :host([label-span-xl="5"][empty-span-xl="5"]) .ui5-form-item, - :host([label-span-xl="5"][empty-span-xl="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-5); - } - :host([label-span-xl="5"][empty-span-xl="6"]) .ui5-form-item, - :host([label-span-xl="5"][empty-span-xl="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5-6); - } - - - :host([label-span-xl="6"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="6"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6); - } - :host([label-span-xl="6"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="6"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-1); - } - :host([label-span-xl="6"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="6"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-2); - } - :host([label-span-xl="6"][empty-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="6"][empty-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-3); - } - :host([label-span-xl="6"][empty-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="6"][empty-span-xl="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-4); - } - :host([label-span-xl="6"][empty-span-xl="5"]) .ui5-form-item, - :host([label-span-xl="6"][empty-span-xl="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6-5); - } - - - :host([label-span-xl="7"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="7"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7); - } - :host([label-span-xl="7"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="7"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-1); - } - :host([label-span-xl="7"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="7"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-2); - } - :host([label-span-xl="7"][empty-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="7"][empty-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-3); - } - :host([label-span-xl="7"][empty-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="7"][empty-span-xl="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7-4); - } - - - :host([label-span-xl="8"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="8"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8); - } - :host([label-span-xl="8"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="8"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-1); - } - :host([label-span-xl="8"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="8"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-2); - } - :host([label-span-xl="8"][empty-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="8"][empty-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8-3); - } - - - :host([label-span-xl="9"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="9"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9); - } - :host([label-span-xl="9"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="9"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9-1); - } - :host([label-span-xl="9"][empty-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="9"][empty-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9-2); - } - - :host([label-span-xl="10"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="10"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10); - } - :host([label-span-xl="10"][empty-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="10"][empty-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10-1); - } - - :host([label-span-xl="11"][empty-span-xl="0"]) .ui5-form-item, - :host([label-span-xl="11"][empty-span-xl="0"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span11); + .ui5-form-item, + .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-XL); } :host([label-span-xl="12"]) .ui5-form-item, :host([label-span-xl="12"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span12); --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); } -} \ No newline at end of file +} diff --git a/packages/main/src/themes/base/Form-parameters.css b/packages/main/src/themes/base/Form-parameters.css index 70722d42e108..71683d39d005 100644 --- a/packages/main/src/themes/base/Form-parameters.css +++ b/packages/main/src/themes/base/Form-parameters.css @@ -1,83 +1,5 @@ :root { --ui5-form-item-layout: 4fr 8fr 0fr; - --ui5-form-item-layout-span1: 1fr 11fr 0fr; - --ui5-form-item-layout-span1-1: 1fr 10fr 1fr; - --ui5-form-item-layout-span1-2: 1fr 9fr 2fr; - --ui5-form-item-layout-span1-3: 1fr 8fr 3fr; - --ui5-form-item-layout-span1-4: 1fr 7fr 4fr; - --ui5-form-item-layout-span1-5: 1fr 6fr 5fr; - --ui5-form-item-layout-span1-6: 1fr 5fr 6fr; - --ui5-form-item-layout-span1-7: 1fr 5fr 7fr; - --ui5-form-item-layout-span1-8: 1fr 5fr 8fr; - --ui5-form-item-layout-span1-9: 1fr 5fr 9fr; - --ui5-form-item-layout-span1-10: 1fr 1fr 10fr; - - --ui5-form-item-layout-span2: 2fr 10fr 0fr; - --ui5-form-item-layout-span2-1: 2fr 9fr 1fr; - --ui5-form-item-layout-span2-2: 2fr 8fr 2fr; - --ui5-form-item-layout-span2-3: 2fr 7fr 3fr; - --ui5-form-item-layout-span2-4: 2fr 6fr 4fr; - --ui5-form-item-layout-span2-5: 2fr 5fr 5fr; - --ui5-form-item-layout-span2-6: 2fr 4fr 6fr; - --ui5-form-item-layout-span2-7: 2fr 3fr 7fr; - --ui5-form-item-layout-span2-8: 2fr 2fr 8fr; - --ui5-form-item-layout-span2-9: 2fr 1fr 9fr; - - --ui5-form-item-layout-span3: 3fr 9fr 0fr; - --ui5-form-item-layout-span3-1: 3fr 8fr 1fr; - --ui5-form-item-layout-span3-2: 3fr 7fr 2fr; - --ui5-form-item-layout-span3-3: 3fr 6fr 3fr; - --ui5-form-item-layout-span3-4: 3fr 5fr 4fr; - --ui5-form-item-layout-span3-5: 3fr 4fr 5fr; - --ui5-form-item-layout-span3-6: 3fr 3fr 6fr; - --ui5-form-item-layout-span3-7: 3fr 2fr 7fr; - --ui5-form-item-layout-span3-8: 3fr 1fr 8fr; - - --ui5-form-item-layout-span4: 4fr 8fr 0fr; - --ui5-form-item-layout-span4-1: 4fr 7fr 1fr; - --ui5-form-item-layout-span4-2: 4fr 6fr 2fr; - --ui5-form-item-layout-span4-3: 4fr 5fr 3fr; - --ui5-form-item-layout-span4-4: 4fr 4fr 4fr; - --ui5-form-item-layout-span4-5: 4fr 3fr 5fr; - --ui5-form-item-layout-span4-6: 4fr 2fr 6fr; - --ui5-form-item-layout-span4-7: 4fr 1fr 7fr; - - --ui5-form-item-layout-span5: 5fr 7fr 0fr; - --ui5-form-item-layout-span5-1: 5fr 6fr 1fr; - --ui5-form-item-layout-span5-2: 5fr 5fr 2fr; - --ui5-form-item-layout-span5-3: 5fr 4fr 3fr; - --ui5-form-item-layout-span5-4: 5fr 3fr 4fr; - --ui5-form-item-layout-span5-5: 5fr 2fr 5fr; - --ui5-form-item-layout-span5-6: 5fr 1fr 6fr; - - --ui5-form-item-layout-span6: 6fr 6fr 0fr; - --ui5-form-item-layout-span6-1: 6fr 5fr 1fr; - --ui5-form-item-layout-span6-2: 6fr 4fr 2fr; - --ui5-form-item-layout-span6-3: 6fr 3fr 3fr; - --ui5-form-item-layout-span6-4: 6fr 2fr 4fr; - --ui5-form-item-layout-span6-5: 6fr 1fr 5fr; - - --ui5-form-item-layout-span7: 7fr 5fr 0fr; - --ui5-form-item-layout-span7-1: 7fr 4fr 1fr; - --ui5-form-item-layout-span7-2: 7fr 3fr 2fr; - --ui5-form-item-layout-span7-3: 7fr 2fr 3fr; - --ui5-form-item-layout-span7-4: 7fr 1fr 4fr; - - --ui5-form-item-layout-span8: 8fr 4fr 0fr; - --ui5-form-item-layout-span8-1: 8fr 3fr 1fr; - --ui5-form-item-layout-span8-2: 8fr 2fr 2fr; - --ui5-form-item-layout-span8-3: 8fr 1fr 3fr; - - --ui5-form-item-layout-span9: 9fr 3fr 0fr; - --ui5-form-item-layout-span9-1: 9fr 2fr 1fr; - --ui5-form-item-layout-span9-2: 9fr 1fr 2fr; - - --ui5-form-item-layout-span10: 10fr 2fr 0fr; - --ui5-form-item-layout-span10-1: 10fr 1fr 1fr; - - --ui5-form-item-layout-span11: 11fr 1fr 0fr; - --ui5-form-item-layout-span12: 1fr; - --ui5-form-item-label-justify: end; --ui5-form-item-label-justify-span12: start; --ui5-form-item-label-padding: 0.125rem 0;