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 | } | 
