+
+ Choose a person
-
-
-
-
- Textfield
-
-
-
+
-
+ Cancel
+
+
+
diff --git a/projects/demo/src/modules/components/form/examples/2/index.less b/projects/demo/src/modules/components/form/examples/2/index.less
index 67edd78faf28..8710a452a216 100644
--- a/projects/demo/src/modules/components/form/examples/2/index.less
+++ b/projects/demo/src/modules/components/form/examples/2/index.less
@@ -1,127 +1,24 @@
@import '@taiga-ui/core/styles/taiga-ui-local';
-@fields-space: 1.25rem;
-@fields-space-mobile: 1rem;
-@fields-space-large: 0.75rem;
-@fields-space-large-mobile: 1.5rem;
-
-:host {
- display: block;
-}
-
.stepper {
margin-bottom: 2rem;
}
-.uppercase-name {
- text-transform: uppercase;
+.grid {
+ display: grid;
+ gap: inherit;
+ grid-template-columns: 1fr 1fr;
}
-.account {
+.stack {
display: flex;
- flex: 1;
- justify-content: space-between;
+ gap: inherit;
+ flex-direction: column;
}
.ticks-labels {
.tui-slider-ticks-labels();
color: var(--tui-text-secondary);
- margin-top: 0.25rem;
-}
-
-.example2-form {
- .multi-fields {
- display: flex;
-
- @media @tui-mobile {
- flex-wrap: wrap;
- }
-
- .multi-field {
- flex: 1 1 0;
- min-inline-size: 0;
- margin-left: @fields-space;
-
- &:first-child {
- margin-left: 0;
- }
-
- @media @tui-mobile {
- flex-basis: 100%;
- margin-top: @fields-space-mobile;
- margin-left: 0;
-
- &:first-child {
- margin-top: 0;
- }
- }
- }
- }
-
- .field-note {
- font: var(--tui-font-text-s);
- margin-top: 0.25rem;
- color: var(--tui-text-secondary);
- }
-
- .half-width {
- inline-size: ~'calc(50% - (@{fields-space} / 2))';
-
- @media @tui-mobile {
- inline-size: 100%;
- }
- }
-
- .checkboxes {
- display: flex;
- flex-wrap: wrap;
-
- .checkbox {
- flex: ~'1 1 calc(50% - 0.625rem)';
-
- &:nth-child(even) {
- margin-left: 1.25rem;
- }
-
- &:nth-child(n + 3) {
- margin-top: 1rem;
- }
- }
- }
-
- .text-normal {
- font: var(--tui-font-text-s);
- }
-
- .buttons {
- display: flex;
- margin-top: @fields-space-large;
-
- &_align_end {
- justify-content: flex-end;
- }
-
- &_align_center {
- justify-content: center;
- }
-
- @media @tui-mobile {
- flex-direction: column;
- margin-top: @fields-space-large-mobile;
- }
-
- .button {
- margin-left: 0.75rem;
-
- &:first-child {
- margin-left: 0;
- }
-
- @media @tui-mobile {
- margin-top: 0.5rem;
- margin-left: 0;
- }
- }
- }
+ margin-block-start: -1rem;
}
diff --git a/projects/demo/src/modules/components/form/examples/2/index.ts b/projects/demo/src/modules/components/form/examples/2/index.ts
index e77bbf869053..3d22eb12aae7 100644
--- a/projects/demo/src/modules/components/form/examples/2/index.ts
+++ b/projects/demo/src/modules/components/form/examples/2/index.ts
@@ -125,7 +125,7 @@ export default class Example {
periodValue: new FormControl(new TuiDay(2017, 2, 15), Validators.required),
timeValue: new FormControl(new TuiTime(12, 30), Validators.required),
personValue: new FormControl(this.persons[0]),
- quantityValue: new FormControl(50_000, Validators.required),
+ quantityValue: new FormControl(50_000),
radioValue: new FormControl('with-commission'),
accountWherefrom: new FormControl
(null),
accountWhere: new FormControl(null),
diff --git a/projects/demo/src/modules/components/form/index.ts b/projects/demo/src/modules/components/form/index.ts
index ef62ae263633..845d6eded67f 100644
--- a/projects/demo/src/modules/components/form/index.ts
+++ b/projects/demo/src/modules/components/form/index.ts
@@ -10,5 +10,5 @@ import {TuiDemo} from '@demo/utils';
changeDetection,
})
export default class Page {
- protected readonly examples = ['Basic', 'Custom Layout'];
+ protected readonly examples = ['Basic', 'Expansive'];
}