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