diff --git a/projects/demo/src/modules/components/form/examples/2/index.html b/projects/demo/src/modules/components/form/examples/2/index.html index b8dc70016d7e..a24c03341e92 100644 --- a/projects/demo/src/modules/components/form/examples/2/index.html +++ b/projects/demo/src/modules/components/form/examples/2/index.html @@ -1,315 +1,206 @@ -
-
- - - - - - -
+ + + + + + -
+
+

+ A header + Form with large controls +

+
+ + -
-

A header

-
+ Textfield + +
+ - - Textfield - - - - + Input date + + + - - Input date - +
+ Input password + - - - -
-
- Input password - -
-
- - Input money - - -
-
- + - Some slider - -
- from 50 000 ₽ - to 3 000 000 ₽ -
-
Some additional text
+ Input money +
-
-
- - Choose a person - - - -
{{ data.firstName }} {{ data.lastName }}
-
- -
-
- Input phone - -
-
-
-

Header

-
-
- - -
-
- Input time -
-
- - - - -
-
-

Header

-
- -
+ + + Some slider + +
+ from 50 000 ₽ + to 3 000 000 ₽ +
+ +
+
+ + Choose a person - -
-

Header

-
-
- - Textfield - - - +
-
- - +
+ Input phone +
- +
+ + +
+
+ + + + +
+ +
+ +
+ 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']; }