summaryrefslogtreecommitdiffstats
path: root/src/objects/_switch.scss
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/objects/_switch.scss
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/objects/_switch.scss')
-rw-r--r--src/objects/_switch.scss217
1 files changed, 217 insertions, 0 deletions
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.52.0) at 2025-12-14 14:41:23 +0000