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)

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