Within my SCSS code, I am looking to implement disabled styles from the .parent class to its child elements.
This is how my current SCSS structure looks:
.parent {
.disabled {
background: grey;
}
> .group {
...
> .input {
background: white;
}
> .icon {
background: blue;
}
}
}
The corresponding HTML structure is as follows:
<div class="parent" ng-class="{disabled: el.isDisabled}">
<div class="group">
...
<textarea class="form-control input">
...
</textarea>
<div class="icon">
...
</div>
</div>
</div>
How can I extend these defined styles to the elements with classes of input and icon?
To provide additional context, my existing implementation appears somewhat redundant:
.parent {
> .group {
...
> .input {
background: white;
&.disabled {
background: grey;
}
}
> .icon {
background: blue;
&.disabled {
background: grey;
}
}
}
}