summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 11:08:53 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 11:08:53 +0100
commitaefacb0a07a9ef66172dfccb24714717585f86b1 (patch)
tree37107453c3da350d7bcbdc7d4d77f4f514b58622 /src
parentAdded checkbox and switch (diff)
downloadiro-design-aefacb0a07a9ef66172dfccb24714717585f86b1.tar.gz
iro-design-aefacb0a07a9ef66172dfccb24714717585f86b1.tar.bz2
iro-design-aefacb0a07a9ef66172dfccb24714717585f86b1.zip
Added form
Diffstat (limited to 'src')
-rw-r--r--src/index.scss2
-rw-r--r--src/layouts/_form.scss46
-rw-r--r--src/objects/_checkbox.scss1
-rw-r--r--src/objects/_radio.scss1
-rw-r--r--src/objects/_switch.scss1
5 files changed, 51 insertions, 0 deletions
diff --git a/src/index.scss b/src/index.scss
index c945321..9f7f85e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -16,6 +16,8 @@
16@import 'objects/checkbox'; 16@import 'objects/checkbox';
17@import 'objects/switch'; 17@import 'objects/switch';
18 18
19@import 'layouts/form';
20
19:root { 21:root {
20 @include iro.props-assign; 22 @include iro.props-assign;
21 @include iro.props-assign('light-palette'); 23 @include iro.props-assign('light-palette');
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}
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 606b717..587321b 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -105,6 +105,7 @@
105 } 105 }
106 106
107 @include iro.bem-elem('label') { 107 @include iro.bem-elem('label') {
108 align-self: baseline;
108 margin-left: iro.props-get(--dims --label-gap); 109 margin-left: iro.props-get(--dims --label-gap);
109 } 110 }
110 111
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index bb32cdf..213b7c4 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -74,6 +74,7 @@
74 } 74 }
75 75
76 @include iro.bem-elem('label') { 76 @include iro.bem-elem('label') {
77 align-self: baseline;
77 margin-left: iro.props-get(--dims --label-gap); 78 margin-left: iro.props-get(--dims --label-gap);
78 } 79 }
79 80
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 25125da..7d5d16d 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -80,6 +80,7 @@
80 } 80 }
81 81
82 @include iro.bem-elem('label') { 82 @include iro.bem-elem('label') {
83 align-self: baseline;
83 margin-left: iro.props-get(--dims --label-gap); 84 margin-left: iro.props-get(--dims --label-gap);
84 } 85 }
85 86