diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_badge.scss | 8 | ||||
-rw-r--r-- | src/objects/_button.scss | 30 | ||||
-rw-r--r-- | src/objects/_field-label.scss | 86 | ||||
-rw-r--r-- | src/objects/_text-field.scss | 209 |
4 files changed, 323 insertions, 10 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 0d95751..23ae305 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -12,19 +12,19 @@ $themes: accent positive negative warning; | |||
12 | --rounding: fn.global-dim(--rounding), | 12 | --rounding: fn.global-dim(--rounding), |
13 | --font-size: fn.global-dim(--font-size --100), | 13 | --font-size: fn.global-dim(--font-size --100), |
14 | 14 | ||
15 | --50: ( | 15 | --sm: ( |
16 | --pad-b: fn.global-dim(--size --50), | 16 | --pad-b: fn.global-dim(--size --50), |
17 | --pad-i: fn.global-dim(--size --115), | 17 | --pad-i: fn.global-dim(--size --115), |
18 | --pad-i-pill: fn.global-dim(--size --150), | 18 | --pad-i-pill: fn.global-dim(--size --150), |
19 | --font-size: fn.global-dim(--font-size --75), | 19 | --font-size: fn.global-dim(--font-size --75), |
20 | ), | 20 | ), |
21 | --200: ( | 21 | --lg: ( |
22 | --pad-b: fn.global-dim(--size --125), | 22 | --pad-b: fn.global-dim(--size --125), |
23 | --pad-i: fn.global-dim(--size --175), | 23 | --pad-i: fn.global-dim(--size --175), |
24 | --pad-i-pill: fn.global-dim(--size --225), | 24 | --pad-i-pill: fn.global-dim(--size --225), |
25 | --font-size: fn.global-dim(--font-size --150), | 25 | --font-size: fn.global-dim(--font-size --150), |
26 | ), | 26 | ), |
27 | --300: ( | 27 | --xl: ( |
28 | --pad-b: fn.global-dim(--size --160), | 28 | --pad-b: fn.global-dim(--size --160), |
29 | --pad-i: fn.global-dim(--size --225), | 29 | --pad-i: fn.global-dim(--size --225), |
30 | --pad-i-pill: fn.global-dim(--size --300), | 30 | --pad-i-pill: fn.global-dim(--size --300), |
@@ -179,7 +179,7 @@ $themes: accent positive negative warning; | |||
179 | border-radius: 10em; | 179 | border-radius: 10em; |
180 | } | 180 | } |
181 | 181 | ||
182 | @each $size in '50' '200' '300' { | 182 | @each $size in sm lg xl { |
183 | @include iro.bem-modifier($size) { | 183 | @include iro.bem-modifier($size) { |
184 | padding-block: fn.dim(--#{$size} --pad-b); | 184 | padding-block: fn.dim(--#{$size} --pad-b); |
185 | padding-inline: fn.dim(--#{$size} --pad-i); | 185 | padding-inline: fn.dim(--#{$size} --pad-i); |
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index d3588f6..a823f17 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -47,11 +47,24 @@ $themes: primary accent positive negative warning; | |||
47 | --line-height: 1.4, | 47 | --line-height: 1.4, |
48 | --pad-i: fn.global-dim(--size --225), | 48 | --pad-i: fn.global-dim(--size --225), |
49 | --pad-b: fn.global-dim(--size --65), | 49 | --pad-b: fn.global-dim(--size --65), |
50 | --border: fn.global-dim(--border --medium), | ||
50 | --rounding: 10em, | 51 | --rounding: 10em, |
52 | --font-size: fn.global-dim(--font-size --100), | ||
51 | 53 | ||
54 | --sm: ( | ||
55 | --pad-i: fn.global-dim(--size --150), | ||
56 | --pad-b: fn.global-dim(--size --25), | ||
57 | --font-size: fn.global-dim(--font-size --75), | ||
58 | ), | ||
52 | --lg: ( | 59 | --lg: ( |
53 | --pad-i: fn.global-dim(--size --300), | 60 | --pad-i: fn.global-dim(--size --300), |
54 | --pad-b: fn.global-dim(--size --100), | 61 | --pad-b: fn.global-dim(--size --100), |
62 | --font-size: fn.global-dim(--font-size --150), | ||
63 | ), | ||
64 | --xl: ( | ||
65 | --pad-i: fn.global-dim(--size --400), | ||
66 | --pad-b: fn.global-dim(--size --150), | ||
67 | --font-size: fn.global-dim(--font-size --200), | ||
55 | ), | 68 | ), |
56 | ), | 69 | ), |
57 | --colors: ( | 70 | --colors: ( |
@@ -121,11 +134,12 @@ $themes: primary accent positive negative warning; | |||
121 | display: inline-block; | 134 | display: inline-block; |
122 | padding-block: fn.dim(--pad-b); | 135 | padding-block: fn.dim(--pad-b); |
123 | padding-inline: fn.dim(--pad-i); | 136 | padding-inline: fn.dim(--pad-i); |
124 | border: 2px solid transparent; | 137 | border: fn.dim(--border) solid transparent; |
125 | border-radius: fn.dim(--rounding); | 138 | border-radius: fn.dim(--rounding); |
126 | border-color: fn.color(--disabled --bg); | 139 | border-color: fn.color(--disabled --bg); |
127 | background-color: fn.color(--disabled --bg); | 140 | background-color: fn.color(--disabled --bg); |
128 | color: fn.color(--disabled --label); | 141 | color: fn.color(--disabled --label); |
142 | font-size: fn.dim(--font-size); | ||
129 | font-weight: 500; | 143 | font-weight: 500; |
130 | line-height: fn.dim(--line-height); | 144 | line-height: fn.dim(--line-height); |
131 | text-align: center; | 145 | text-align: center; |
@@ -141,9 +155,12 @@ $themes: primary accent positive negative warning; | |||
141 | box-shadow: none; | 155 | box-shadow: none; |
142 | } | 156 | } |
143 | 157 | ||
144 | @include iro.bem-modifier('lg') { | 158 | @each $size in sm lg xl { |
145 | padding-block: fn.dim(--lg --pad-b); | 159 | @include iro.bem-modifier($size) { |
146 | padding-inline: fn.dim(--lg --pad-i); | 160 | padding-block: fn.dim(--#{$size} --pad-b); |
161 | padding-inline: fn.dim(--#{$size} --pad-i); | ||
162 | font-size: fn.dim(--#{$size} --font-size); | ||
163 | } | ||
147 | } | 164 | } |
148 | 165 | ||
149 | @include button-variant(); | 166 | @include button-variant(); |
@@ -160,6 +177,7 @@ $themes: primary accent positive negative warning; | |||
160 | &:focus-visible { | 177 | &:focus-visible { |
161 | border-color: fn.color(--key-focus --border); | 178 | border-color: fn.color(--key-focus --border); |
162 | background-color: fn.color(--key-focus --bg); | 179 | background-color: fn.color(--key-focus --bg); |
180 | box-shadow: 0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border); | ||
163 | color: fn.color(--key-focus --label); | 181 | color: fn.color(--key-focus --label); |
164 | } | 182 | } |
165 | } | 183 | } |
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss new file mode 100644 index 0000000..9f267cb --- /dev/null +++ b/src/objects/_field-label.scss | |||
@@ -0,0 +1,86 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('field-label') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --spacing-i: fn.global-dim(--size --150), | ||
8 | --spacing-b: fn.global-dim(--size --85), | ||
9 | --label-font-size: fn.global-dim(--font-size --75), | ||
10 | --hint-font-size: fn.global-dim(--font-size --75), | ||
11 | ), | ||
12 | --colors: ( | ||
13 | --label: fn.global-color(--text-mute), | ||
14 | --hint: fn.global-color(--text-mute), | ||
15 | --error-hint: fn.global-color(--negative --900), | ||
16 | --disabled: fn.global-color(--text-disabled), | ||
17 | ), | ||
18 | )); | ||
19 | |||
20 | @include iro.bem-object(iro.props-namespace()) { | ||
21 | display: block; | ||
22 | |||
23 | @include iro.bem-elem('label') { | ||
24 | display: block; | ||
25 | flex: 0 0 auto; | ||
26 | padding-inline-end: fn.dim(--spacing-i); | ||
27 | color: fn.color(--label); | ||
28 | font-size: fn.dim(--label-font-size); | ||
29 | font-weight: 400; | ||
30 | line-height: 1.3; | ||
31 | |||
32 | @include iro.bem-next-elem('content') { | ||
33 | margin-block-start: fn.dim(--spacing-b); | ||
34 | } | ||
35 | } | ||
36 | |||
37 | @include iro.bem-elem('content') { | ||
38 | display: block; | ||
39 | inline-size: 100%; | ||
40 | } | ||
41 | |||
42 | @include iro.bem-elem('hint') { | ||
43 | display: block; | ||
44 | margin-block-start: fn.dim(--spacing-b); | ||
45 | color: fn.color(--hint); | ||
46 | font-size: fn.dim(--hint-font-size); | ||
47 | } | ||
48 | |||
49 | @include iro.bem-is('invalid') { | ||
50 | @include iro.bem-elem('hint') { | ||
51 | color: fn.color(--error-hint); | ||
52 | } | ||
53 | } | ||
54 | |||
55 | @include iro.bem-is('disabled') { | ||
56 | @include iro.bem-elem('label', 'hint') { | ||
57 | color: fn.color(--disabled); | ||
58 | } | ||
59 | } | ||
60 | |||
61 | @include iro.bem-modifier('align-start', 'align-end') { | ||
62 | display: flex; | ||
63 | align-items: baseline; | ||
64 | |||
65 | @include iro.bem-elem('label') { | ||
66 | display: inline-block; | ||
67 | |||
68 | @include iro.bem-next-elem('content') { | ||
69 | margin-block-start: 0; | ||
70 | } | ||
71 | } | ||
72 | } | ||
73 | |||
74 | @include iro.bem-modifier('align-start') { | ||
75 | @include iro.bem-elem('label') { | ||
76 | text-align: start; | ||
77 | } | ||
78 | } | ||
79 | |||
80 | @include iro.bem-modifier('align-end') { | ||
81 | @include iro.bem-elem('label') { | ||
82 | text-align: end; | ||
83 | } | ||
84 | } | ||
85 | } | ||
86 | } | ||
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss new file mode 100644 index 0000000..de5bcd1 --- /dev/null +++ b/src/objects/_text-field.scss | |||
@@ -0,0 +1,209 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @mixin invalid { | ||
5 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); | ||
6 | |||
7 | @include iro.bem-sibling-elem('bg') { | ||
8 | inset-block: $focus-border-offset; | ||
9 | inset-inline: $focus-border-offset; | ||
10 | border: fn.dim(--focus --border) solid fn.color(--error --border); | ||
11 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); | ||
12 | } | ||
13 | |||
14 | &:hover { | ||
15 | @include iro.bem-sibling-elem('bg') { | ||
16 | border-color: fn.color(--error --hover --border); | ||
17 | } | ||
18 | } | ||
19 | |||
20 | &:focus { | ||
21 | @include iro.bem-sibling-elem('bg') { | ||
22 | border-color: fn.color(--error --focus --border); | ||
23 | } | ||
24 | } | ||
25 | } | ||
26 | |||
27 | @mixin keyboard-focus { | ||
28 | @include iro.bem-sibling-elem('bg') { | ||
29 | border: fn.dim(--key-focus --border) solid fn.color(--key-focus --border); | ||
30 | } | ||
31 | } | ||
32 | |||
33 | @include iro.props-namespace('text-field') { | ||
34 | @include iro.props-store(( | ||
35 | --dims: ( | ||
36 | --line-height: 1.4, | ||
37 | --pad-i: fn.global-dim(--size --125), | ||
38 | --pad-b: fn.global-dim(--size --125), | ||
39 | --border: fn.global-dim(--border --thin), | ||
40 | --rounding: fn.global-dim(--rounding), | ||
41 | |||
42 | --extended: ( | ||
43 | --pad: fn.global-dim(--size --50), | ||
44 | ), | ||
45 | |||
46 | --focus: ( | ||
47 | --border: fn.global-dim(--border --medium), | ||
48 | ), | ||
49 | --key-focus: ( | ||
50 | --border: fn.global-dim(--border --thick), | ||
51 | ) | ||
52 | ), | ||
53 | --colors: ( | ||
54 | --bg: fn.global-color(--base --50), | ||
55 | --placeholder: fn.global-color(--text-mute-more), | ||
56 | --text: fn.global-color(--text), | ||
57 | --border: fn.global-color(--border-strong), | ||
58 | |||
59 | --hover: ( | ||
60 | --border: fn.global-color(--text-mute-more), | ||
61 | ), | ||
62 | --focus: ( | ||
63 | --border: fn.global-color(--accent --900), | ||
64 | ), | ||
65 | --key-focus: ( | ||
66 | --border: fn.global-color(--yellow-static --400), | ||
67 | ), | ||
68 | --error: ( | ||
69 | --border: fn.global-color(--negative --900), | ||
70 | |||
71 | --hover: ( | ||
72 | --border: fn.global-color(--negative --800), | ||
73 | ), | ||
74 | --focus: ( | ||
75 | --border: fn.global-color(--negative --800), | ||
76 | ), | ||
77 | ), | ||
78 | --disabled: ( | ||
79 | --bg: fn.global-color(--border-mute), | ||
80 | --placeholder: fn.global-color(--text-disabled), | ||
81 | --text: fn.global-color(--text-disabled), | ||
82 | --border: fn.global-color(--border-mute), | ||
83 | ), | ||
84 | ), | ||
85 | )); | ||
86 | |||
87 | @include iro.bem-object(iro.props-namespace()) { | ||
88 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); | ||
89 | |||
90 | position: relative; | ||
91 | min-inline-size: 0; | ||
92 | border-radius: fn.dim(--rounding); | ||
93 | background-color: fn.color(--bg); | ||
94 | |||
95 | @include iro.bem-elem('bg') { | ||
96 | display: block; | ||
97 | position: absolute; | ||
98 | inset-block: 0; | ||
99 | inset-inline: 0; | ||
100 | border: fn.dim(--border) solid fn.color(--border); | ||
101 | border-radius: fn.dim(--rounding); | ||
102 | pointer-events: none; | ||
103 | } | ||
104 | |||
105 | @include iro.bem-elem('native') { | ||
106 | box-sizing: border-box; | ||
107 | inline-size: 100%; | ||
108 | padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); | ||
109 | padding-inline: fn.dim(--pad-i); | ||
110 | border: 1px solid transparent; | ||
111 | background-color: transparent; | ||
112 | color: fn.color(--text); | ||
113 | font: inherit; | ||
114 | line-height: fn.dim(--line-height); | ||
115 | resize: none; | ||
116 | appearance: none; | ||
117 | |||
118 | &::placeholder { | ||
119 | opacity: 1; | ||
120 | color: fn.color(--placeholder); | ||
121 | font-style: italic; | ||
122 | } | ||
123 | |||
124 | &:hover { | ||
125 | @include iro.bem-sibling-elem('bg') { | ||
126 | border-color: fn.color(--hover --border); | ||
127 | } | ||
128 | } | ||
129 | |||
130 | &:focus { | ||
131 | outline: 0; | ||
132 | |||
133 | @include iro.bem-sibling-elem('bg') { | ||
134 | inset-block: $focus-border-offset; | ||
135 | inset-inline: $focus-border-offset; | ||
136 | border: fn.dim(--focus --border) solid fn.color(--focus --border); | ||
137 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); | ||
138 | } | ||
139 | } | ||
140 | |||
141 | &:invalid { | ||
142 | @include invalid; | ||
143 | } | ||
144 | |||
145 | &:focus-visible, | ||
146 | &:invalid:focus-visible { | ||
147 | @include keyboard-focus; | ||
148 | } | ||
149 | } | ||
150 | |||
151 | @include iro.bem-modifier('extended') { | ||
152 | padding: fn.dim(--extended --pad); | ||
153 | |||
154 | @include iro.bem-multi('&', 'elem' 'bg') { | ||
155 | border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); | ||
156 | } | ||
157 | |||
158 | @include iro.bem-elem('native') { | ||
159 | &:focus { | ||
160 | @include iro.bem-sibling-elem('bg') { | ||
161 | border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); | ||
162 | } | ||
163 | } | ||
164 | } | ||
165 | } | ||
166 | |||
167 | @include iro.bem-is('invalid') { | ||
168 | @include iro.bem-elem('native') { | ||
169 | @include invalid; | ||
170 | |||
171 | &:focus-visible { | ||
172 | @include keyboard-focus; | ||
173 | } | ||
174 | } | ||
175 | } | ||
176 | |||
177 | @include iro.bem-is('disabled') { | ||
178 | background-color: fn.color(--disabled --bg); | ||
179 | |||
180 | @include iro.bem-elem('native') { | ||
181 | color: fn.color(--disabled --text); | ||
182 | |||
183 | &::placeholder { | ||
184 | color: fn.color(--disabled --placeholder); | ||
185 | } | ||
186 | } | ||
187 | |||
188 | @include iro.bem-elem('bg') { | ||
189 | border-color: fn.color(--disabled --border); | ||
190 | } | ||
191 | |||
192 | @include iro.bem-is('invalid') { | ||
193 | @include iro.bem-elem('native') { | ||
194 | @include iro.bem-sibling-elem('bg') { | ||
195 | border-color: fn.color(--disabled --border); | ||
196 | } | ||
197 | } | ||
198 | } | ||
199 | |||
200 | @include iro.bem-elem('native') { | ||
201 | &:invalid { | ||
202 | @include iro.bem-sibling-elem('bg') { | ||
203 | border-color: fn.color(--disabled --border); | ||
204 | } | ||
205 | } | ||
206 | } | ||
207 | } | ||
208 | } | ||
209 | } | ||