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

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

This commit ensures that all styles for the page footer (which are
defined in `_footer.scss`) only apply to elements inside an
`<aio-footer>` 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:48:53 +02:00 committed by Alex Rickabaugh
parent 568ecf352b
commit 7777bc5018
1 changed files with 60 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
aio/src/styles/1-layouts/_footer.scss
View File

@ -15,80 +15,80 @@ footer {
color: $white;
max-width: 50em;
}
}
.footer-block {
margin: 0 24px;
vertical-align: top;
}
a {
color: $white;
text-decoration: none;
z-index: 20;
position: relative;
&:hover {
text-decoration: underline;
.footer-block {
margin: 0 24px;
vertical-align: top;
}
&:visited {
a {
color: $white;
text-decoration: none;
z-index: 20;
position: relative;
&:hover {
text-decoration: underline;
}
&:visited {
text-decoration: none;
}
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid rgba($white, 0.8);
outline-offset: 2px;
}
}
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid rgba($white, 0.8);
outline-offset: 2px;
h3 {
@include font-size(16);
text-transform: uppercase;
font-weight: 400;
margin: 8px 0 12px;
color: $white;
@media (max-width: 600px) {
@include font-size(14);
}
}
}
h3 {
@include font-size(16);
text-transform: uppercase;
font-weight: 400;
margin: 8px 0 12px;
color: $white;
p {
text-align: center;
margin: 10px auto 5px;
@media (max-width: 600px) {
@include font-size(14);
}
}
p {
text-align: center;
margin: 10px auto 5px;
@media (max-width: 480px) {
text-align: left;
}
}
div.grid-fluid {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
text-align: left;
margin: 0 auto 40px;
ul {
list-style-position: inside;
padding: 0px;
margin: 0px;
li {
list-style-type: none;
padding: 4px 0;
@media (max-width: 480px) {
text-align: left;
}
}
@media (max-width: 480px) {
flex-direction: column;
div.grid-fluid {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
text-align: left;
margin: 0 auto 40px;
.footer-block {
margin: 8px 24px;
ul {
list-style-position: inside;
padding: 0px;
margin: 0px;
li {
list-style-type: none;
padding: 4px 0;
text-align: left;
}
}
@media (max-width: 480px) {
flex-direction: column;
.footer-block {
margin: 8px 24px;
}
}
}
}