refactor(docs-infra): scope select-menu styles to the <aio-select> element (#40704)

This commit ensures that all styles for the select-menu element (which
are defined in `_select-menu.scss`) only apply to elements inside an
`<aio-select>` element. This will prevent the styles accidentally taking
effect on a different part of the app.

PR Close #40704
This commit is contained in:
George Kalpakas 2021-02-05 12:49:08 +02:00 committed by Alex Rickabaugh
parent 862fe82712
commit b0cf35b8ff

View File

@ -1,10 +1,11 @@
/* SELECT MENU */
.form-select-menu {
aio-select {
.form-select-menu {
position: relative;
}
}
.form-select-button {
.form-select-button {
background: $white;
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
box-sizing: border-box;
@ -38,9 +39,9 @@
color: lightgrey;
cursor: not-allowed;
}
}
}
.form-select-dropdown {
.form-select-dropdown {
background: $white;
box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
border-radius: 4px;
@ -86,4 +87,5 @@
z-index: $layer-5;
}
}
}
}