honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2021-02-05 12:49:13 +02:00 committed by Alex Rickabaugh
parent ae1a00760d
commit defcd50b05
1 changed files with 136 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
aio/src/styles/2-modules/_api-list.scss
View File

@ -1,35 +1,7 @@
/* API LIST STYLES */ /* API LIST STYLES */
aio-api-list { aio-api-list {
.form-search { .api-filter {
.material-icons {
width: 20px;
pointer-events: none;
}
input {
width: 182px;
@media screen and (max-width: 600px) {
width: 100%;
}
}
}
.api-list-container {
display: flex;
flex-direction: column;
margin: 0 auto;
padding-left: 0;
h2 {
margin-top: 16px;
margin-bottom: 16px;
}
}
}
.api-filter {
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
@ -63,18 +35,58 @@ aio-api-list {
} }
.form-search { .form-search {
position: relative;
float: left; 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 */ /* API SEARCH ICON */
.material-icons { .material-icons {
right: 48px; right: 48px;
} }
} }
/* LAYOUT */ /* LAYOUT */
.docs-content { .docs-content {
position: relative; position: relative;
/* API CLASS LIST */ /* API CLASS LIST */
@ -121,9 +133,9 @@ aio-api-list {
} }
} }
} }
} }
.l-content-small { .l-content-small {
padding: 16px; padding: 16px;
margin: 0; margin: 0;
@ -132,42 +144,17 @@ aio-api-list {
screen and (max-width: $tablet-breakpoint) { screen and (max-width: $tablet-breakpoint) {
padding: 24px 0 0; 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 { .api-list-container {
border: 1px solid $blue-400; display: flex;
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12); flex-direction: column;
} margin: 0 auto;
} padding-left: 0;
.material-icons { h2 {
color: $blue-grey-600; margin-top: 16px;
@include font-size(20); margin-bottom: 16px;
left: 8px; }
position: absolute;
top: 12px;
z-index: $layer-1;
} }
} }