fixup!: decrease specificity in NcCheckboxContent

Signed-off-by: Antreesy <antreesy.web@gmail.com>
nextcloud-libraries · Sep 5, 2024 · 11b4dfe · 11b4dfe
1 parent be97c6d
commit 11b4dfe
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -217,6 +217,7 @@ export default {
 	&__icon > * {
 		width: var(--icon-size);
 		height: var(--icon-size);
+		color: var(--color-primary-element);
 	}
 
 	&--button-variant {
@@ -233,12 +234,6 @@ export default {
 		padding-right: $icon-margin;
 	}
 
-	&:not(&--button-variant) {
-		.checkbox-content__icon > * {
-			color: var(--color-primary-element);
-		}
-	}
-
 	&, * {
 		cursor: pointer;
 		flex-shrink: 0;

diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -650,7 +650,7 @@ export default {
 		outline-offset: -2px;
 	}
 
-	&.checkbox-radio-switch--disabled .checkbox-radio-switch__content {
+	&--disabled &__content {
 		opacity: $opacity_disabled;
 		:deep(.checkbox-radio-switch__icon) > * {
 			color: var(--color-main-text)
@@ -673,12 +673,12 @@ export default {
 	}
 
 	// Switch specific rules
-	&.checkbox-radio-switch-switch:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {
+	&-switch:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {
 		color: var(--color-text-maxcontrast);
 	}
 
 	// If switch is checked AND disabled, use the fade primary colour
-	&.checkbox-radio-switch-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked :deep(.checkbox-radio-switch__icon) > * {
+	&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked :deep(.checkbox-radio-switch__icon) > * {
 		color: var(--color-primary-element-light);
 	}
 
@@ -710,7 +710,7 @@ export default {
 	}
 
 	// Set icon color for non active elements to main text color
-	&.checkbox-radio-switch--button-variant:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {
+	&--button-variant:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {
 		color: var(--color-main-text);
 	}