summaryrefslogtreecommitdiffstats
path: root/src/objects/_radio.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_radio.scss')
-rw-r--r--src/objects/_radio.scss56
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}