Skip to content

Commit be8884e

Browse files
authored
fix(choice-group): selected disabled choice-group item fixes #27 (#510)
1 parent ddba56a commit be8884e

1 file changed

Lines changed: 29 additions & 3 deletions

File tree

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.module.scss

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,21 +75,32 @@
7575
border-color: var(--form-checkbox-radio-default-border-inverted);
7676
}
7777

78-
[type='radio']:checked + .tedi-choice-group-item__indicator {
78+
[type='radio']:checked:not(:disabled) + .tedi-choice-group-item__indicator {
7979
background-color: var(--form-checkbox-radio-card-primary-selected-background);
8080
border-color: var(--form-checkbox-radio-default-border-inverted);
8181
}
8282

83-
[type='radio']:checked + .tedi-choice-group-item__indicator::after {
83+
[type='radio']:checked:not(:disabled) + .tedi-choice-group-item__indicator::after {
8484
background-color: var(--form-checkbox-radio-default-background-selected-inverted);
8585
border-color: var(--form-checkbox-radio-default-background-inverted);
8686
}
8787

88+
[type='radio']:checked:disabled + .tedi-choice-group-item__indicator::after {
89+
background-color: var(--form-checkbox-radio-default-background-selected-disabled);
90+
border-color: var(--form-checkbox-radio-card-default-disabled-selected-background);
91+
}
92+
8893
label,
8994
.tedi-choice-group-item__label,
9095
.tedi-choice-group-item__feedback-text {
9196
color: var(--form-checkbox-radio-card-primary-selected-text);
9297
}
98+
99+
&.tedi-choice-group-item--disabled {
100+
color: var(--form-checkbox-radio-card-primary-disabled-selected-text);
101+
background-color: var(--form-checkbox-radio-default-background-selected-disabled);
102+
border-color: var(--form-checkbox-radio-default-background-selected-disabled);
103+
}
93104
}
94105
}
95106

@@ -105,15 +116,30 @@
105116
border-right: 2px solid var(--form-checkbox-radio-card-secondary-active-border);
106117
}
107118

108-
[type='radio']:checked + .tedi-choice-group-item__indicator {
119+
[type='radio']:checked:not(:disabled) + .tedi-choice-group-item__indicator {
109120
border-color: var(--form-checkbox-radio-default-border-selected);
110121
}
111122

123+
[type='radio']:checked:disabled + .tedi-choice-group-item__indicator {
124+
border-color: var(--form-checkbox-radio-default-border-selected-disabled);
125+
}
126+
112127
label,
113128
.tedi-choice-group-item__label,
114129
.tedi-choice-group-item__feedback-text {
115130
color: var(--form-checkbox-radio-card-secondary-selected-text);
116131
}
132+
133+
&.tedi-choice-group-item--disabled {
134+
background-color: var(--form-checkbox-radio-card-secondary-disabled-selected-background);
135+
outline-color: var(--form-checkbox-radio-card-secondary-disabled-selected-border);
136+
}
137+
138+
&.tedi-choice-group-item--disabled label,
139+
&.tedi-choice-group-item--disabled .tedi-choice-group-item__label,
140+
&.tedi-choice-group-item--disabled .tedi-choice-group-item__feedback-text {
141+
color: var(--form-checkbox-radio-card-secondary-disabled-selected-text);
142+
}
117143
}
118144

119145
&:has(:focus-visible) {

0 commit comments

Comments
 (0)