docs: update aio in support for #BlackLivesMatter

Update angular.io in support for #BlackLivesMatter. The PR updates the
styles of the landing page and changes the current survey notification.
This commit is contained in:
mgechev 2020-06-02 16:22:56 -07:00 committed by Igor Minar
parent 0b96908225
commit 6855396449
3 changed files with 13 additions and 10 deletions

View File

@ -5,13 +5,9 @@
</div> </div>
<mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning"> <mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
<mat-toolbar-row class="notification-container"> <mat-toolbar-row class="notification-container blm-message">
<aio-notification notificationId="survey-march-2020" expirationDate="2020-04-15" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()"> <aio-notification notificationId="blm-2020" expirationDate="2022-04-15" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
<a href="https://goo.gle/angular-survey-2020"> #BlackLivesMatter
<mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
<span class="message">Help Angular by taking a <b>1 minute survey</b>!</span>
<span class="action-button">Go to survey</span>
</a>
</aio-notification> </aio-notification>
</mat-toolbar-row> </mat-toolbar-row>
<mat-toolbar-row> <mat-toolbar-row>

View File

@ -183,8 +183,8 @@ section#intro {
// ANGULAR LINE // ANGULAR LINE
.background-sky { .background-sky {
background-color: $blue; background-color: $black;
background: $bluegradient; background: $black;
color: $white; color: $white;
} }

View File

@ -20,9 +20,16 @@ mat-toolbar.mat-toolbar {
} }
} }
.blm-message {
text-align: center;
justify-content: center;
background: #2d2d2d;
font-size: 0.75em;
}
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
aio-shell.page-home mat-toolbar.mat-toolbar { aio-shell.page-home mat-toolbar.mat-toolbar {
background-color: $blue; background-color: $black;
@media (min-width: 481px) { @media (min-width: 481px) {
&:not(.transitioning) { &:not(.transitioning) {