refactor(docs-infra): scope API list styles to the `<aio-api-list>` element (#40704)
This commit ensures that all styles for the API list page (which are defined in `_api-list.scss`) only apply to elements inside an `<aio-api-list>` 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
Alex Rickabaugh
parent
ae1a00760d
commit
defcd50b05
|
|
@ -1,19 +1,149 @@
|
||||||
/* API LIST STYLES */
|
/* API LIST STYLES */
|
||||||
|
|
||||||
aio-api-list {
|
aio-api-list {
|
||||||
.form-search {
|
.api-filter {
|
||||||
.material-icons {
|
display: flex;
|
||||||
width: 20px;
|
margin: 0 auto;
|
||||||
pointer-events: none;
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 16px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
/* API FILTER MENU */
|
||||||
width: 182px;
|
aio-select {
|
||||||
|
width: 200px;
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-select-menu,
|
||||||
|
.form-search {
|
||||||
|
margin: 8px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
aio-select:first-child {
|
||||||
|
.form-select-menu {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-search {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
input {
|
||||||
|
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid $white;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: $darkgray;
|
||||||
|
@include font-size(14);
|
||||||
|
@include line-height(32);
|
||||||
|
outline: none;
|
||||||
|
padding: 4px 16px 4px 32px;
|
||||||
|
transition: all .2s;
|
||||||
|
width: 182px;
|
||||||
|
|
||||||
|
@include placeholder {
|
||||||
|
@include font-size(14);
|
||||||
|
color: $mediumgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid $blue-400;
|
||||||
|
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
color: $blue-grey-600;
|
||||||
|
@include font-size(20);
|
||||||
|
left: 8px;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
width: 20px;
|
||||||
|
z-index: $layer-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* API SEARCH ICON */
|
||||||
|
.material-icons {
|
||||||
|
right: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LAYOUT */
|
||||||
|
|
||||||
|
.docs-content {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
/* API CLASS LIST */
|
||||||
|
.api-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 0 32px -8px;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
margin: 0 0 0 -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
@include font-size(14);
|
||||||
|
margin: 8px 0;
|
||||||
|
@include line-height(14);
|
||||||
|
padding: 0;
|
||||||
|
float: left;
|
||||||
|
width: 33%;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 220px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $blue-grey-600;
|
||||||
|
display: inline-block;
|
||||||
|
@include line-height(16);
|
||||||
|
padding: 0 16px 0;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all .3s;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $blue-grey-50;
|
||||||
|
color: $blue-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.deprecated-api-item {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.l-content-small {
|
||||||
|
padding: 16px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@media handheld and (max-width: $phone-breakpoint),
|
||||||
|
screen and (max-device-width: $phone-breakpoint),
|
||||||
|
screen and (max-width: $tablet-breakpoint) {
|
||||||
|
padding: 24px 0 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.api-list-container {
|
.api-list-container {
|
||||||
|
|
@ -28,146 +158,3 @@ aio-api-list {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.api-filter {
|
|
||||||
display: flex;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
flex-direction: column;
|
|
||||||
margin: 16px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* API FILTER MENU */
|
|
||||||
aio-select {
|
|
||||||
width: 200px;
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select-menu,
|
|
||||||
.form-search {
|
|
||||||
margin: 8px;
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
aio-select:first-child {
|
|
||||||
.form-select-menu {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-search {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* API SEARCH ICON */
|
|
||||||
.material-icons {
|
|
||||||
right: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* LAYOUT */
|
|
||||||
|
|
||||||
.docs-content {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
/* API CLASS LIST */
|
|
||||||
.api-list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 0 32px -8px;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
margin: 0 0 0 -8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
@include font-size(14);
|
|
||||||
margin: 8px 0;
|
|
||||||
@include line-height(14);
|
|
||||||
padding: 0;
|
|
||||||
float: left;
|
|
||||||
width: 33%;
|
|
||||||
overflow: hidden;
|
|
||||||
min-width: 220px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $blue-grey-600;
|
|
||||||
display: inline-block;
|
|
||||||
@include line-height(16);
|
|
||||||
padding: 0 16px 0;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all .3s;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $blue-grey-50;
|
|
||||||
color: $blue-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.deprecated-api-item {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-content-small {
|
|
||||||
padding: 16px;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@media handheld and (max-width: $phone-breakpoint),
|
|
||||||
screen and (max-device-width: $phone-breakpoint),
|
|
||||||
screen and (max-width: $tablet-breakpoint) {
|
|
||||||
padding: 24px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SEARCH BAR */
|
|
||||||
|
|
||||||
.form-search {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
input {
|
|
||||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid $white;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: $darkgray;
|
|
||||||
@include font-size(14);
|
|
||||||
@include line-height(32);
|
|
||||||
outline: none;
|
|
||||||
padding: 4px 16px 4px 32px;
|
|
||||||
transition: all .2s;
|
|
||||||
|
|
||||||
@include placeholder {
|
|
||||||
@include font-size(14);
|
|
||||||
color: $mediumgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border: 1px solid $blue-400;
|
|
||||||
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-icons {
|
|
||||||
color: $blue-grey-600;
|
|
||||||
@include font-size(20);
|
|
||||||
left: 8px;
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
z-index: $layer-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue