diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-06 11:24:41 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-06 11:24:41 +0100 |
| commit | f932673fb4f6e6444cfdb50f5df4a4ab8465a038 (patch) | |
| tree | 75052efa371dacce844180e43dc929602b571d6d /src/layouts | |
| parent | Added form (diff) | |
| download | iro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.tar.gz iro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.tar.bz2 iro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.zip | |
Improved form
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/_form.scss | 44 |
1 files changed, 21 insertions, 23 deletions
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index 9e6520f..3c7edcb 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss | |||
| @@ -10,22 +10,29 @@ | |||
| 10 | )); | 10 | )); |
| 11 | 11 | ||
| 12 | @include iro.bem-layout(iro.props-namespace()) { | 12 | @include iro.bem-layout(iro.props-namespace()) { |
| 13 | display: grid; | 13 | display: flex; |
| 14 | grid-template-columns: auto 1fr; | 14 | flex-direction: column; |
| 15 | grid-template-rows: auto; | 15 | align-items: baseline; |
| 16 | align-items: baseline; | 16 | gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x); |
| 17 | gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x); | ||
| 18 | 17 | ||
| 19 | @include iro.bem-elem('item') { | 18 | @include iro.bem-modifier('labels-left', 'labels-right') { |
| 20 | display: contents; | 19 | display: grid; |
| 21 | } | 20 | grid-template-columns: auto 1fr; |
| 22 | 21 | grid-template-rows: auto; | |
| 23 | @include iro.bem-elem('item-label') { | ||
| 24 | grid-column: 1; | ||
| 25 | } | ||
| 26 | 22 | ||
| 27 | @include iro.bem-elem('item-content') { | 23 | @include iro.bem-elem('item') { |
| 28 | grid-column: 2; | 24 | display: contents; |
| 25 | } | ||
| 26 | |||
| 27 | @include iro.bem-elem('item-label') { | ||
| 28 | grid-column: 1; | ||
| 29 | padding-right: 0; | ||
| 30 | } | ||
| 31 | |||
| 32 | @include iro.bem-elem('item-content') { | ||
| 33 | grid-column: 2; | ||
| 34 | margin-top: 0; | ||
| 35 | } | ||
| 29 | } | 36 | } |
| 30 | 37 | ||
| 31 | @include iro.bem-modifier('labels-right') { | 38 | @include iro.bem-modifier('labels-right') { |
| @@ -33,14 +40,5 @@ | |||
| 33 | text-align: right; | 40 | text-align: right; |
| 34 | } | 41 | } |
| 35 | } | 42 | } |
| 36 | |||
| 37 | @include iro.bem-modifier('labels-above') { | ||
| 38 | display: flex; | ||
| 39 | flex-direction: column; | ||
| 40 | |||
| 41 | @include iro.bem-elem('item') { | ||
| 42 | display: block; | ||
| 43 | } | ||
| 44 | } | ||
| 45 | } | 43 | } |
| 46 | } | 44 | } |