The outline is a border around all sides of either a text field or select component. This is used for the Outlined variant of either a Text Field or Select.
NOTE:
Because notched-outline has sibling elements, you need to call the "idle" Sass mixins with parent selectors.
Consider the following example HTML:
<div class="foo-line-ripple-parent">
<div class="mdc-notched-outline foo-line-ripple">
<svg>
<path class="mdc-notched-outline__path"/>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
In order to customize any "non-idle" part of notched-outline, use the .foo-line-ripple CSS selector:
.foo-line-ripple {
@include mdc-notched-outline-color($fooColor);
}
But in order to customize any "idle" part of the notched-outline, you must use the .foo-line-ripple-parent CSS selector:
.foo-line-ripple-parent {
@include mdc-notched-outline-idle-color($fooColor);
}