diff options
author | Volpeon <git@volpeon.ink> | 2022-02-06 17:17:33 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-06 17:17:33 +0100 |
commit | 3524f1bac11c8a9d1640bfeac5ceb063ff96d623 (patch) | |
tree | 52907b3161045c2d24bba18442c1ece9c12986a6 /src/objects/_switch.scss | |
parent | Updated action button (diff) | |
download | iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.gz iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.bz2 iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.zip |
Improved variable structure
Diffstat (limited to 'src/objects/_switch.scss')
-rw-r--r-- | src/objects/_switch.scss | 114 |
1 files changed, 59 insertions, 55 deletions
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 7d5d16d..0fb95f1 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss | |||
@@ -1,4 +1,5 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | ||
2 | 3 | ||
3 | @include iro.props-namespace('switch') { | 4 | @include iro.props-namespace('switch') { |
4 | @include iro.props-store(( | 5 | @include iro.props-store(( |
@@ -6,61 +7,64 @@ | |||
6 | --width: iro.fn-px-to-rem(26px), | 7 | --width: iro.fn-px-to-rem(26px), |
7 | --height: iro.fn-px-to-rem(15px), | 8 | --height: iro.fn-px-to-rem(15px), |
8 | --label-gap: .6rem, | 9 | --label-gap: .6rem, |
9 | --border-width: iro.props-get(--dims --border-width --medium, $global: true), | 10 | --border-width: fn.dim(--border-width --medium, $global: true), |
10 | --padding-x: .3rem, | 11 | --padding-x: .3rem, |
11 | --padding-y: .3rem, | 12 | --padding-y: .3rem, |
12 | --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), | 13 | --margin-right: fn.dim(--spacing --x --md, $global: true), |
13 | ), | 14 | ), |
15 | ), 'dims'); | ||
16 | |||
17 | @include iro.props-store(( | ||
14 | --colors: ( | 18 | --colors: ( |
15 | --track-bg: iro.props-get(--colors --obj, $global: true), | 19 | --track-bg: fn.color(--obj, $global: true), |
16 | --handle-border: iro.props-get(--colors --fg-hi, $global: true), | 20 | --handle-border: fn.color(--fg-hi, $global: true), |
17 | --handle-bg: iro.props-get(--colors --bg-hi, $global: true), | 21 | --handle-bg: fn.color(--bg-hi, $global: true), |
18 | 22 | ||
19 | --hover: ( | 23 | --hover: ( |
20 | --label: iro.props-get(--colors --fg-lo, $global: true), | 24 | --label: fn.color(--fg-lo, $global: true), |
21 | --handle-border: iro.props-get(--colors --fg, $global: true), | 25 | --handle-border: fn.color(--fg, $global: true), |
22 | ), | 26 | ), |
23 | --accent: ( | 27 | --accent: ( |
24 | --handle-border: iro.props-get(--colors --accent --primary, $global: true), | 28 | --handle-border: fn.color(--accent --primary, $global: true), |
25 | 29 | ||
26 | --hover: ( | 30 | --hover: ( |
27 | --handle-border: iro.props-get(--colors --accent --primary-lo, $global: true), | 31 | --handle-border: fn.color(--accent --primary-lo, $global: true), |
28 | ), | 32 | ), |
29 | ), | 33 | ), |
30 | --key-focus: ( | 34 | --key-focus: ( |
31 | --label: iro.props-get(--colors --focus --text, $global: true), | 35 | --label: fn.color(--focus --text, $global: true), |
32 | --track-bg: iro.props-get(--colors --focus --fill, $global: true), | 36 | --track-bg: fn.color(--focus --fill, $global: true), |
33 | --handle-border: iro.props-get(--colors --focus --fill, $global: true), | 37 | --handle-border: fn.color(--focus --fill, $global: true), |
34 | --shadow: iro.props-get(--colors --focus --shadow, $global: true), | 38 | --shadow: fn.color(--focus --shadow, $global: true), |
35 | ), | 39 | ), |
36 | --disabled: ( | 40 | --disabled: ( |
37 | --label: iro.props-get(--colors --fg-hi3, $global: true), | 41 | --label: fn.color(--fg-hi3, $global: true), |
38 | --track-bg: iro.props-get(--colors --obj, $global: true), | 42 | --track-bg: fn.color(--obj, $global: true), |
39 | --handle-border: iro.props-get(--colors --obj-lo, $global: true), | 43 | --handle-border: fn.color(--obj-lo, $global: true), |
40 | --handle-bg: iro.props-get(--colors --bg-hi, $global: true), | 44 | --handle-bg: fn.color(--bg-hi, $global: true), |
41 | ) | 45 | ) |
42 | ), | 46 | ), |
43 | )); | 47 | ), 'colors'); |
44 | 48 | ||
45 | @include iro.bem-object(iro.props-namespace()) { | 49 | @include iro.bem-object(iro.props-namespace()) { |
46 | display: inline-flex; | 50 | display: inline-flex; |
47 | position: relative; | 51 | position: relative; |
48 | align-items: flex-start; | 52 | align-items: flex-start; |
49 | margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); | 53 | margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); |
50 | margin-left: calc(-1 * iro.props-get(--dims --padding-x)); | 54 | margin-left: calc(-1 * fn.dim(--padding-x)); |
51 | padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values | 55 | padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values |
52 | 56 | ||
53 | @include iro.bem-elem('indicator') { | 57 | @include iro.bem-elem('indicator') { |
54 | display: block; | 58 | display: block; |
55 | position: relative; | 59 | position: relative; |
56 | box-sizing: border-box; | 60 | box-sizing: border-box; |
57 | flex: 0 0 auto; | 61 | flex: 0 0 auto; |
58 | width: iro.props-get(--dims --width); | 62 | width: fn.dim(--width); |
59 | height: iro.props-get(--dims --height); | 63 | height: fn.dim(--height); |
60 | margin-top: calc(.5 * ($line-height * 1em - iro.props-get(--dims --height))); | 64 | margin-top: calc(.5 * ($line-height * 1em - fn.dim(--height))); |
61 | transition: background-color .2s ease; | 65 | transition: background-color .2s ease; |
62 | border-radius: 2em; | 66 | border-radius: 2em; |
63 | background-color: iro.props-get(--colors --track-bg); | 67 | background-color: fn.color(--track-bg); |
64 | 68 | ||
65 | &::after { | 69 | &::after { |
66 | content: ''; | 70 | content: ''; |
@@ -69,19 +73,19 @@ | |||
69 | z-index: 10; | 73 | z-index: 10; |
70 | top: 50%; | 74 | top: 50%; |
71 | left: 0; | 75 | left: 0; |
72 | width: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); | 76 | width: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); |
73 | height: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); | 77 | height: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); |
74 | transform: translateY(-50%); | 78 | transform: translateY(-50%); |
75 | transition: left .2s ease; | 79 | transition: left .2s ease; |
76 | border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --handle-border); | 80 | border: fn.dim(--border-width) solid fn.color(--handle-border); |
77 | border-radius: iro.props-get(--dims --width); | 81 | border-radius: fn.dim(--width); |
78 | background-color: iro.props-get(--colors --handle-bg); | 82 | background-color: fn.color(--handle-bg); |
79 | } | 83 | } |
80 | } | 84 | } |
81 | 85 | ||
82 | @include iro.bem-elem('label') { | 86 | @include iro.bem-elem('label') { |
83 | align-self: baseline; | 87 | align-self: baseline; |
84 | margin-left: iro.props-get(--dims --label-gap); | 88 | margin-left: fn.dim(--label-gap); |
85 | } | 89 | } |
86 | 90 | ||
87 | @include iro.bem-elem('native') { | 91 | @include iro.bem-elem('native') { |
@@ -97,32 +101,32 @@ | |||
97 | 101 | ||
98 | &:hover { | 102 | &:hover { |
99 | @include iro.bem-sibling-elem('label') { | 103 | @include iro.bem-sibling-elem('label') { |
100 | color: iro.props-get(--colors --hover --label); | 104 | color: fn.color(--hover --label); |
101 | } | 105 | } |
102 | 106 | ||
103 | @include iro.bem-sibling-elem('indicator') { | 107 | @include iro.bem-sibling-elem('indicator') { |
104 | &::after { | 108 | &::after { |
105 | border-color: iro.props-get(--colors --hover --handle-border); | 109 | border-color: fn.color(--hover --handle-border); |
106 | } | 110 | } |
107 | } | 111 | } |
108 | } | 112 | } |
109 | 113 | ||
110 | &:checked { | 114 | &:checked { |
111 | @include iro.bem-sibling-elem('indicator') { | 115 | @include iro.bem-sibling-elem('indicator') { |
112 | background-color: iro.props-get(--colors --handle-border); | 116 | background-color: fn.color(--handle-border); |
113 | 117 | ||
114 | &::after { | 118 | &::after { |
115 | left: calc(#{iro.props-get(--dims --width)} - #{iro.props-get(--dims --height)} + .5px); | 119 | left: calc(#{fn.dim(--width)} - #{fn.dim(--height)} + .5px); |
116 | border-color: iro.props-get(--colors --handle-border); | 120 | border-color: fn.color(--handle-border); |
117 | } | 121 | } |
118 | } | 122 | } |
119 | 123 | ||
120 | &:hover { | 124 | &:hover { |
121 | @include iro.bem-sibling-elem('indicator') { | 125 | @include iro.bem-sibling-elem('indicator') { |
122 | background-color: iro.props-get(--colors --hover --handle-border); | 126 | background-color: fn.color(--hover --handle-border); |
123 | 127 | ||
124 | &::after { | 128 | &::after { |
125 | border-color: iro.props-get(--colors --hover --handle-border); | 129 | border-color: fn.color(--hover --handle-border); |
126 | } | 130 | } |
127 | } | 131 | } |
128 | } | 132 | } |
@@ -130,24 +134,24 @@ | |||
130 | 134 | ||
131 | &:disabled { | 135 | &:disabled { |
132 | @include iro.bem-sibling-elem('label') { | 136 | @include iro.bem-sibling-elem('label') { |
133 | color: iro.props-get(--colors --disabled --label); | 137 | color: fn.color(--disabled --label); |
134 | } | 138 | } |
135 | 139 | ||
136 | @include iro.bem-sibling-elem('indicator') { | 140 | @include iro.bem-sibling-elem('indicator') { |
137 | background-color: iro.props-get(--colors --disabled --track-bg); | 141 | background-color: fn.color(--disabled --track-bg); |
138 | 142 | ||
139 | &::after { | 143 | &::after { |
140 | border-color: iro.props-get(--colors --disabled --handle-border); | 144 | border-color: fn.color(--disabled --handle-border); |
141 | background-color: iro.props-get(--colors --disabled --handle-bg); | 145 | background-color: fn.color(--disabled --handle-bg); |
142 | } | 146 | } |
143 | } | 147 | } |
144 | 148 | ||
145 | &:checked { | 149 | &:checked { |
146 | @include iro.bem-sibling-elem('indicator') { | 150 | @include iro.bem-sibling-elem('indicator') { |
147 | background-color: iro.props-get(--colors --disabled --handle-border); | 151 | background-color: fn.color(--disabled --handle-border); |
148 | 152 | ||
149 | &::after { | 153 | &::after { |
150 | border-color: iro.props-get(--colors --disabled --handle-border); | 154 | border-color: fn.color(--disabled --handle-border); |
151 | } | 155 | } |
152 | } | 156 | } |
153 | } | 157 | } |
@@ -156,19 +160,19 @@ | |||
156 | @include iro.bem-at-theme('keyboard') { | 160 | @include iro.bem-at-theme('keyboard') { |
157 | &:focus { | 161 | &:focus { |
158 | @include iro.bem-sibling-elem('label') { | 162 | @include iro.bem-sibling-elem('label') { |
159 | color: iro.props-get(--colors --key-focus --label); | 163 | color: fn.color(--key-focus --label); |
160 | } | 164 | } |
161 | 165 | ||
162 | @include iro.bem-sibling-elem('indicator') { | 166 | @include iro.bem-sibling-elem('indicator') { |
163 | &::after { | 167 | &::after { |
164 | border-color: iro.props-get(--colors --key-focus --handle-border); | 168 | border-color: fn.color(--key-focus --handle-border); |
165 | box-shadow: iro.props-get(--colors --key-focus --shadow); | 169 | box-shadow: fn.color(--key-focus --shadow); |
166 | } | 170 | } |
167 | } | 171 | } |
168 | 172 | ||
169 | &:checked { | 173 | &:checked { |
170 | @include iro.bem-sibling-elem('indicator') { | 174 | @include iro.bem-sibling-elem('indicator') { |
171 | background-color: iro.props-get(--colors --key-focus --track-bg); | 175 | background-color: fn.color(--key-focus --track-bg); |
172 | } | 176 | } |
173 | } | 177 | } |
174 | } | 178 | } |
@@ -179,19 +183,19 @@ | |||
179 | @include iro.bem-elem('native') { | 183 | @include iro.bem-elem('native') { |
180 | &:checked { | 184 | &:checked { |
181 | @include iro.bem-sibling-elem('indicator') { | 185 | @include iro.bem-sibling-elem('indicator') { |
182 | background-color: iro.props-get(--colors --accent --handle-border); | 186 | background-color: fn.color(--accent --handle-border); |
183 | 187 | ||
184 | &::after { | 188 | &::after { |
185 | border-color: iro.props-get(--colors --accent --handle-border); | 189 | border-color: fn.color(--accent --handle-border); |
186 | } | 190 | } |
187 | } | 191 | } |
188 | 192 | ||
189 | &:hover { | 193 | &:hover { |
190 | @include iro.bem-sibling-elem('indicator') { | 194 | @include iro.bem-sibling-elem('indicator') { |
191 | background-color: iro.props-get(--colors --accent --hover --handle-border); | 195 | background-color: fn.color(--accent --hover --handle-border); |
192 | 196 | ||
193 | &::after { | 197 | &::after { |
194 | border-color: iro.props-get(--colors --accent --hover --handle-border); | 198 | border-color: fn.color(--accent --hover --handle-border); |
195 | } | 199 | } |
196 | } | 200 | } |
197 | } | 201 | } |
@@ -199,15 +203,15 @@ | |||
199 | 203 | ||
200 | &:disabled { | 204 | &:disabled { |
201 | @include iro.bem-sibling-elem('label') { | 205 | @include iro.bem-sibling-elem('label') { |
202 | color: iro.props-get(--colors --disabled --label); | 206 | color: fn.color(--disabled --label); |
203 | } | 207 | } |
204 | 208 | ||
205 | &:checked { | 209 | &:checked { |
206 | @include iro.bem-sibling-elem('indicator') { | 210 | @include iro.bem-sibling-elem('indicator') { |
207 | background-color: iro.props-get(--colors --disabled --handle-border); | 211 | background-color: fn.color(--disabled --handle-border); |
208 | 212 | ||
209 | &::after { | 213 | &::after { |
210 | border-color: iro.props-get(--colors --disabled --handle-border); | 214 | border-color: fn.color(--disabled --handle-border); |
211 | } | 215 | } |
212 | } | 216 | } |
213 | } | 217 | } |