summaryrefslogtreecommitdiffstats
path: root/src/layouts/_form.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_form.scss')
-rw-r--r--src/layouts/_form.scss46
1 files changed, 46 insertions, 0 deletions
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
new file mode 100644
index 0000000..9e6520f
--- /dev/null
+++ b/src/layouts/_form.scss
@@ -0,0 +1,46 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('form') {
4 @include iro.props-store((
5 --dims: (
6 --item-spacing-y: iro.props-get(--dims --spacing --y --md, $global: true),
7 --label-spacing-x: iro.props-get(--dims --spacing --x --md, $global: true),
8 --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true),
9 ),
10 ));
11
12 @include iro.bem-layout(iro.props-namespace()) {
13 display: grid;
14 grid-template-columns: auto 1fr;
15 grid-template-rows: auto;
16 align-items: baseline;
17 gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
18
19 @include iro.bem-elem('item') {
20 display: contents;
21 }
22
23 @include iro.bem-elem('item-label') {
24 grid-column: 1;
25 }
26
27 @include iro.bem-elem('item-content') {
28 grid-column: 2;
29 }
30
31 @include iro.bem-modifier('labels-right') {
32 @include iro.bem-elem('item-label') {
33 text-align: right;
34 }
35 }
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 }
46}