summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 10:28:10 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 10:28:10 +0100
commitea8b0bc19219f6f931e3be757c25743c2c828b2e (patch)
tree056af48e13f84e76cb9a26b8b76d28a4fe48d404 /src
parentAdded radio (diff)
downloadiro-design-ea8b0bc19219f6f931e3be757c25743c2c828b2e.tar.gz
iro-design-ea8b0bc19219f6f931e3be757c25743c2c828b2e.tar.bz2
iro-design-ea8b0bc19219f6f931e3be757c25743c2c828b2e.zip
Added checkbox and switch
Diffstat (limited to 'src')
-rw-r--r--src/index.scss2
-rw-r--r--src/objects/_button.scss11
-rw-r--r--src/objects/_checkbox.scss238
-rw-r--r--src/objects/_radio.scss56
-rw-r--r--src/objects/_switch.scss217
5 files changed, 496 insertions, 28 deletions
diff --git a/src/index.scss b/src/index.scss
index faa053e..c945321 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -13,6 +13,8 @@
13@import 'objects/text-field'; 13@import 'objects/text-field';
14@import 'objects/field-label'; 14@import 'objects/field-label';
15@import 'objects/radio'; 15@import 'objects/radio';
16@import 'objects/checkbox';
17@import 'objects/switch';
16 18
17:root { 19:root {
18 @include iro.props-assign; 20 @include iro.props-assign;
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 5da1fbd..3932575 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -55,7 +55,7 @@
55 --accent: ( 55 --accent: (
56 --bg: iro.props-get(--colors --accent --primary, $global: true), 56 --bg: iro.props-get(--colors --accent --primary, $global: true),
57 --label: iro.props-get(--colors --accent --primary-fg, $global: true), 57 --label: iro.props-get(--colors --accent --primary-fg, $global: true),
58 --outline-label: iro.props-get(--colors --accent --primary-lo2, $global: true), 58 --outline-label: iro.props-get(--colors --accent --primary-lo, $global: true),
59 --shadow: 0 0 0 0 transparent, 59 --shadow: 0 0 0 0 transparent,
60 60
61 --hover: ( 61 --hover: (
@@ -130,12 +130,9 @@
130 130
131 @include button-variant('secondary'); 131 @include button-variant('secondary');
132 132
133 @each $mod in ('accent' 'primary' 'secondary') { 133 @each $mod in ('accent' 'primary') {
134 @if $mod != 'secondary' { 134 @include iro.bem-modifier($mod) {
135 @include iro.bem-modifier($mod) { 135 @include button-variant($mod);
136 // sass-lint:disable-block function-name-format
137 @include button-variant($mod);
138 }
139 } 136 }
140 } 137 }
141 138
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
new file mode 100644
index 0000000..606b717
--- /dev/null
+++ b/src/objects/_checkbox.scss
@@ -0,0 +1,238 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('checkbox') {
4 @include iro.props-store((
5 --dims: (
6 --size: iro.fn-px-to-rem(14px),
7 --label-gap: .6rem,
8 --border-width: iro.props-get(--dims --border-width --medium, $global: true),
9 --padding-x: .3rem,
10 --padding-y: .3rem,
11 --margin-right: iro.props-get(--dims --spacing --x --md, $global: true),
12 ),
13 --colors: (
14 --box-border: iro.props-get(--colors --fg-hi, $global: true),
15 --box-bg: iro.props-get(--colors --bg-hi, $global: true),
16
17 --hover: (
18 --label: iro.props-get(--colors --fg-lo, $global: true),
19 --box-border: iro.props-get(--colors --fg, $global: true),
20 ),
21 --accent: (
22 --box-border: iro.props-get(--colors --accent --primary, $global: true),
23
24 --hover: (
25 --box-border: iro.props-get(--colors --accent --primary-lo, $global: true),
26 ),
27 ),
28 --key-focus: (
29 --label: iro.props-get(--colors --focus --text, $global: true),
30 --box-border: iro.props-get(--colors --focus --fill, $global: true),
31 --shadow: iro.props-get(--colors --focus --shadow, $global: true),
32 ),
33 --disabled: (
34 --label: iro.props-get(--colors --fg-hi3, $global: true),
35 --box-border: iro.props-get(--colors --obj-lo, $global: true),
36 --box-bg: iro.props-get(--colors --bg-hi, $global: true),
37 )
38 ),
39 ));
40
41 @include iro.bem-object(iro.props-namespace()) {
42 display: inline-flex;
43 position: relative;
44 align-items: flex-start;
45 margin-right: calc(-1 * #{iro.props-get(--dims --padding-x)} + #{iro.props-get(--dims --margin-right)});
46 margin-left: calc(-1 * #{iro.props-get(--dims --padding-x)});
47 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values
48
49 @include iro.bem-elem('box') {
50 display: block;
51 position: relative;
52 flex: 0 0 auto;
53 width: iro.props-get(--dims --size);
54 height: iro.props-get(--dims --size);
55 margin-top: calc(.5 * (#{$line-height * 1em} - #{iro.props-get(--dims --size)}));
56 border-radius: iro.props-get(--dims --border-width);
57 background-color: iro.props-get(--colors --box-border);
58
59 &::before,
60 &::after {
61 content: '';
62 display: block;
63 position: absolute;
64 }
65
66 &::before {
67 z-index: 2;
68 top: iro.props-get(--dims --border-width);
69 left: iro.props-get(--dims --border-width);
70 width: calc(iro.props-get(--dims --size) - 2 * iro.props-get(--dims --border-width));
71 height: calc(iro.props-get(--dims --size) - 2 * iro.props-get(--dims --border-width));
72 transition: transform .2s ease;
73 background-color: iro.props-get(--colors --box-bg);
74 }
75
76 &::after {
77 z-index: 3;
78 top: calc(.5 * #{iro.props-get(--dims --size)} - 1px);
79 left: calc(1.5 * #{iro.props-get(--dims --border-width)});
80 box-sizing: border-box;
81 width: calc(iro.props-get(--dims --size) - 3 * iro.props-get(--dims --border-width));
82 height: 0;
83 transform: scale(0);
84 transition: transform .2s ease;
85 border-width: 0 2px 2px 0;
86 border-style: solid;
87 border-radius: 2px;
88 border-color: iro.props-get(--colors --box-bg);
89 }
90 }
91
92 @include iro.bem-elem('check-icon') {
93 display: block;
94 position: absolute;
95 z-index: 2;
96 top: calc(1 * iro.props-get(--dims --border-width));
97 left: calc(1 * iro.props-get(--dims --border-width));
98 width: calc(100% - 2 * iro.props-get(--dims --border-width));
99 height: calc(100% - 2 * iro.props-get(--dims --border-width));
100 transform: scale(0);
101 transform-origin: 40% 90%;
102 transition: transform .2s ease;
103 stroke-width: iro.fn-px-to-rem(3px);
104 color: iro.props-get(--colors --box-bg);
105 }
106
107 @include iro.bem-elem('label') {
108 margin-left: iro.props-get(--dims --label-gap);
109 }
110
111 @include iro.bem-elem('native') {
112 position: absolute;
113 top: 0;
114 left: 0;
115 width: 100%;
116 height: 100%;
117 margin: 0;
118 padding: 0;
119 overflow: hidden;
120 opacity: .0001;
121
122 &:hover {
123 @include iro.bem-sibling-elem('label') {
124 color: iro.props-get(--colors --hover --label);
125 }
126
127 @include iro.bem-sibling-elem('box') {
128 background-color: iro.props-get(--colors --hover --box-border);
129 }
130 }
131
132 &:checked {
133 @include iro.bem-sibling-elem('box') {
134 &::before {
135 transform: scale(0);
136 }
137
138 @include iro.bem-elem('check-icon') {
139 transform: scale(1);
140 }
141 }
142 }
143
144 &:indeterminate {
145 @include iro.bem-sibling-elem('box') {
146 &::before {
147 transform: scale(0);
148 }
149
150 &::after {
151 transform: scale(1);
152 }
153
154 @include iro.bem-elem('check-icon') {
155 transform: scale(0);
156 }
157 }
158 }
159
160 &:disabled {
161 @include iro.bem-sibling-elem('label') {
162 color: iro.props-get(--colors --disabled --label);
163 }
164
165 @include iro.bem-sibling-elem('box') {
166 background-color: iro.props-get(--colors --disabled --box-border);
167
168 &::before {
169 background-color: iro.props-get(--colors --disabled --box-bg);
170 }
171 }
172 }
173
174 @include iro.bem-at-theme('keyboard') {
175 &:focus {
176 @include iro.bem-sibling-elem('label') {
177 color: iro.props-get(--colors --key-focus --label);
178 }
179
180 @include iro.bem-sibling-elem('box') {
181 background-color: iro.props-get(--colors --key-focus --box-border);
182 box-shadow: iro.props-get(--colors --key-focus --shadow);
183 }
184 }
185 }
186 }
187
188 @include iro.bem-modifier('accent') {
189 @include iro.bem-elem('native') {
190 &:checked {
191 @include iro.bem-sibling-elem('box') {
192 background-color: iro.props-get(--colors --accent --box-border);
193 }
194
195 &:hover {
196 @include iro.bem-sibling-elem('box') {
197 background-color: iro.props-get(--colors --accent --hover --box-border);
198 }
199 }
200 }
201
202 &:indeterminate {
203 @include iro.bem-sibling-elem('box') {
204 background-color: iro.props-get(--colors --accent --box-border);
205 }
206
207 &:hover {
208 @include iro.bem-sibling-elem('box') {
209 background-color: iro.props-get(--colors --accent --hover --box-border);
210 }
211 }
212 }
213
214 &:disabled {
215 @include iro.bem-sibling-elem('box') {
216 background-color: iro.props-get(--colors --disabled --box-border);
217
218 &::before {
219 background-color: iro.props-get(--colors --disabled --box-bg);
220 }
221 }
222
223 &:checked {
224 @include iro.bem-sibling-elem('box') {
225 background-color: iro.props-get(--colors --disabled --box-border);
226 }
227 }
228
229 &:indeterminate {
230 @include iro.bem-sibling-elem('box') {
231 background-color: iro.props-get(--colors --disabled --box-border);
232 }
233 }
234 }
235 }
236 }
237 }
238}
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 635a260..bb32cdf 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -11,14 +11,14 @@
11 --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), 11 --margin-right: iro.props-get(--dims --spacing --x --md, $global: true),
12 ), 12 ),
13 --colors: ( 13 --colors: (
14 --circle-border: iro.props-get(--colors --fg-hi2, $global: true), 14 --circle-border: iro.props-get(--colors --fg-hi, $global: true),
15 --circle-bg: iro.props-get(--colors --bg-hi, $global: true), 15 --circle-bg: iro.props-get(--colors --bg-hi, $global: true),
16 16
17 --hover: ( 17 --hover: (
18 --label: iro.props-get(--colors --fg-lo, $global: true), 18 --label: iro.props-get(--colors --fg-lo, $global: true),
19 --circle-border: iro.props-get(--colors --fg-hi, $global: true), 19 --circle-border: iro.props-get(--colors --fg, $global: true),
20 ), 20 ),
21 --active: ( 21 --accent: (
22 --circle-border: iro.props-get(--colors --accent --primary, $global: true), 22 --circle-border: iro.props-get(--colors --accent --primary, $global: true),
23 23
24 --hover: ( 24 --hover: (
@@ -34,10 +34,6 @@
34 --label: iro.props-get(--colors --fg-hi3, $global: true), 34 --label: iro.props-get(--colors --fg-hi3, $global: true),
35 --circle-border: iro.props-get(--colors --obj-lo, $global: true), 35 --circle-border: iro.props-get(--colors --obj-lo, $global: true),
36 --circle-bg: iro.props-get(--colors --bg-hi, $global: true), 36 --circle-bg: iro.props-get(--colors --bg-hi, $global: true),
37
38 --active: (
39 --circle-border: iro.props-get(--colors --obj-lo, $global: true),
40 ),
41 ) 37 )
42 ), 38 ),
43 )); 39 ));
@@ -104,18 +100,10 @@
104 100
105 &:checked { 101 &:checked {
106 @include iro.bem-sibling-elem('circle') { 102 @include iro.bem-sibling-elem('circle') {
107 background-color: iro.props-get(--colors --active --circle-border);
108
109 &::after { 103 &::after {
110 transform: translateY(-50%) scale(.44); 104 transform: translateY(-50%) scale(.44);
111 } 105 }
112 } 106 }
113
114 &:hover {
115 @include iro.bem-sibling-elem('circle') {
116 background-color: iro.props-get(--colors --active --hover --circle-border);
117 }
118 }
119 } 107 }
120 108
121 &:disabled { 109 &:disabled {
@@ -130,12 +118,6 @@
130 background-color: iro.props-get(--colors --disabled --circle-bg); 118 background-color: iro.props-get(--colors --disabled --circle-bg);
131 } 119 }
132 } 120 }
133
134 &:checked {
135 @include iro.bem-sibling-elem('circle') {
136 background-color: iro.props-get(--colors --disabled --active --circle-border);
137 }
138 }
139 } 121 }
140 122
141 @include iro.bem-at-theme('keyboard') { 123 @include iro.bem-at-theme('keyboard') {
@@ -151,5 +133,37 @@
151 } 133 }
152 } 134 }
153 } 135 }
136
137 @include iro.bem-modifier('accent') {
138 @include iro.bem-elem('native') {
139 &:checked {
140 @include iro.bem-sibling-elem('circle') {
141 background-color: iro.props-get(--colors --accent --circle-border);
142 }
143
144 &:hover {
145 @include iro.bem-sibling-elem('circle') {
146 background-color: iro.props-get(--colors --accent --hover --circle-border);
147 }
148 }
149 }
150
151 &:disabled {
152 @include iro.bem-sibling-elem('circle') {
153 background-color: iro.props-get(--colors --disabled --circle-border);
154
155 &::after {
156 background-color: iro.props-get(--colors --disabled --circle-bg);
157 }
158 }
159
160 &:checked {
161 @include iro.bem-sibling-elem('circle') {
162 background-color: iro.props-get(--colors --disabled --circle-border);
163 }
164 }
165 }
166 }
167 }
154 } 168 }
155} 169}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
new file mode 100644
index 0000000..25125da
--- /dev/null
+++ b/src/objects/_switch.scss
@@ -0,0 +1,217 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('switch') {
4 @include iro.props-store((
5 --dims: (
6 --width: iro.fn-px-to-rem(26px),
7 --height: iro.fn-px-to-rem(15px),
8 --label-gap: .6rem,
9 --border-width: iro.props-get(--dims --border-width --medium, $global: true),
10 --padding-x: .3rem,
11 --padding-y: .3rem,
12 --margin-right: iro.props-get(--dims --spacing --x --md, $global: true),
13 ),
14 --colors: (
15 --track-bg: iro.props-get(--colors --obj, $global: true),
16 --handle-border: iro.props-get(--colors --fg-hi, $global: true),
17 --handle-bg: iro.props-get(--colors --bg-hi, $global: true),
18
19 --hover: (
20 --label: iro.props-get(--colors --fg-lo, $global: true),
21 --handle-border: iro.props-get(--colors --fg, $global: true),
22 ),
23 --accent: (
24 --handle-border: iro.props-get(--colors --accent --primary, $global: true),
25
26 --hover: (
27 --handle-border: iro.props-get(--colors --accent --primary-lo, $global: true),
28 ),
29 ),
30 --key-focus: (
31 --label: iro.props-get(--colors --focus --text, $global: true),
32 --track-bg: iro.props-get(--colors --focus --fill, $global: true),
33 --handle-border: iro.props-get(--colors --focus --fill, $global: true),
34 --shadow: iro.props-get(--colors --focus --shadow, $global: true),
35 ),
36 --disabled: (
37 --label: iro.props-get(--colors --fg-hi3, $global: true),
38 --track-bg: iro.props-get(--colors --obj, $global: true),
39 --handle-border: iro.props-get(--colors --obj-lo, $global: true),
40 --handle-bg: iro.props-get(--colors --bg-hi, $global: true),
41 )
42 ),
43 ));
44
45 @include iro.bem-object(iro.props-namespace()) {
46 display: inline-flex;
47 position: relative;
48 align-items: flex-start;
49 margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right));
50 margin-left: calc(-1 * iro.props-get(--dims --padding-x));
51 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values
52
53 @include iro.bem-elem('indicator') {
54 display: block;
55 position: relative;
56 box-sizing: border-box;
57 flex: 0 0 auto;
58 width: iro.props-get(--dims --width);
59 height: iro.props-get(--dims --height);
60 margin-top: calc(.5 * ($line-height * 1em - iro.props-get(--dims --height)));
61 transition: background-color .2s ease;
62 border-radius: 2em;
63 background-color: iro.props-get(--colors --track-bg);
64
65 &::after {
66 content: '';
67 display: block;
68 position: absolute;
69 z-index: 10;
70 top: 50%;
71 left: 0;
72 width: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width));
73 height: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width));
74 transform: translateY(-50%);
75 transition: left .2s ease;
76 border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --handle-border);
77 border-radius: iro.props-get(--dims --width);
78 background-color: iro.props-get(--colors --handle-bg);
79 }
80 }
81
82 @include iro.bem-elem('label') {
83 margin-left: iro.props-get(--dims --label-gap);
84 }
85
86 @include iro.bem-elem('native') {
87 position: absolute;
88 top: 0;
89 left: 0;
90 width: 100%;
91 height: 100%;
92 margin: 0;
93 padding: 0;
94 overflow: hidden;
95 opacity: .0001;
96
97 &:hover {
98 @include iro.bem-sibling-elem('label') {
99 color: iro.props-get(--colors --hover --label);
100 }
101
102 @include iro.bem-sibling-elem('indicator') {
103 &::after {
104 border-color: iro.props-get(--colors --hover --handle-border);
105 }
106 }
107 }
108
109 &:checked {
110 @include iro.bem-sibling-elem('indicator') {
111 background-color: iro.props-get(--colors --handle-border);
112
113 &::after {
114 left: calc(#{iro.props-get(--dims --width)} - #{iro.props-get(--dims --height)} + .5px);
115 border-color: iro.props-get(--colors --handle-border);
116 }
117 }
118
119 &:hover {
120 @include iro.bem-sibling-elem('indicator') {
121 background-color: iro.props-get(--colors --hover --handle-border);
122
123 &::after {
124 border-color: iro.props-get(--colors --hover --handle-border);
125 }
126 }
127 }
128 }
129
130 &:disabled {
131 @include iro.bem-sibling-elem('label') {
132 color: iro.props-get(--colors --disabled --label);
133 }
134
135 @include iro.bem-sibling-elem('indicator') {
136 background-color: iro.props-get(--colors --disabled --track-bg);
137
138 &::after {
139 border-color: iro.props-get(--colors --disabled --handle-border);
140 background-color: iro.props-get(--colors --disabled --handle-bg);
141 }
142 }
143
144 &:checked {
145 @include iro.bem-sibling-elem('indicator') {
146 background-color: iro.props-get(--colors --disabled --handle-border);
147
148 &::after {
149 border-color: iro.props-get(--colors --disabled --handle-border);
150 }
151 }
152 }
153 }
154
155 @include iro.bem-at-theme('keyboard') {
156 &:focus {
157 @include iro.bem-sibling-elem('label') {
158 color: iro.props-get(--colors --key-focus --label);
159 }
160
161 @include iro.bem-sibling-elem('indicator') {
162 &::after {
163 border-color: iro.props-get(--colors --key-focus --handle-border);
164 box-shadow: iro.props-get(--colors --key-focus --shadow);
165 }
166 }
167
168 &:checked {
169 @include iro.bem-sibling-elem('indicator') {
170 background-color: iro.props-get(--colors --key-focus --track-bg);
171 }
172 }
173 }
174 }
175 }
176
177 @include iro.bem-modifier('accent') {
178 @include iro.bem-elem('native') {
179 &:checked {
180 @include iro.bem-sibling-elem('indicator') {
181 background-color: iro.props-get(--colors --accent --handle-border);
182
183 &::after {
184 border-color: iro.props-get(--colors --accent --handle-border);
185 }
186 }
187
188 &:hover {
189 @include iro.bem-sibling-elem('indicator') {
190 background-color: iro.props-get(--colors --accent --hover --handle-border);
191
192 &::after {
193 border-color: iro.props-get(--colors --accent --hover --handle-border);
194 }
195 }
196 }
197 }
198
199 &:disabled {
200 @include iro.bem-sibling-elem('label') {
201 color: iro.props-get(--colors --disabled --label);
202 }
203
204 &:checked {
205 @include iro.bem-sibling-elem('indicator') {
206 background-color: iro.props-get(--colors --disabled --handle-border);
207
208 &::after {
209 border-color: iro.props-get(--colors --disabled --handle-border);
210 }
211 }
212 }
213 }
214 }
215 }
216 }
217}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 08:10:24 +0000