diff options
author | Volpeon <git@volpeon.ink> | 2022-02-06 10:28:10 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-06 10:28:10 +0100 |
commit | ea8b0bc19219f6f931e3be757c25743c2c828b2e (patch) | |
tree | 056af48e13f84e76cb9a26b8b76d28a4fe48d404 /src/objects/_switch.scss | |
parent | Added radio (diff) | |
download | iro-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.scss | 217 |
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 | } | ||