diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss index 6ecf6ff4e..022c3b683 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss @@ -73,7 +73,7 @@ $checkmark: url("data:image/svg+xml;utf-8,"); - } - } - } - } - &:not(:checked) { - ~ .rose-form-radio-label { - &::after { - opacity: 0.25; + border-color: var(--ui-gray); } } } + &:checked { - ~ .rose-form-radio-label { + ~ .rose-form-checkbox-label { color: var(--action); background-color: var(--action-subtler-1h); } } &:disabled { - ~ .rose-form-radio-label { + ~ .rose-form-checkbox-label { opacity: 0.5; + &::after { + border-color: var(--ui-gray-subtler-2); + background-color: var(--ui-gray-subtler-4); + } + &::before { + background: none; + } } } } diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss index b173d3131..6dd2c6802 100644 --- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss +++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss @@ -44,6 +44,8 @@ height: sizing.rems(m); pointer-events: none; content: ' '; + border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); + border-radius: sizing.rems(xxxs); } &::after {