diff options
Diffstat (limited to 'src/objects/_radio.scss')
-rw-r--r-- | src/objects/_radio.scss | 56 |
1 files changed, 35 insertions, 21 deletions
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 | } |