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

refactor(docs-infra): use Sass mixin to simplify the creation of deployment mode themes (#39470) 

Different deployment modes (such as `archive` and `next`) are identified
by the different colors used in prominent elements of the page, such as
the topbar and the footer.

Previously, the necessary styles for creating such a deployment mode
"theme" were duplicated for each mode.

This commit simplifies the creation/modification of a deployment mode
theme by introducing a Sass mixin that generates the necessary styles
(when provided with necessary theme colors).

PR Close #39470
This commit is contained in:
George Kalpakas 2020-10-28 16:17:50 +02:00 committed by Joey Perrott
parent eaf7d8d69f
commit 0f584694cc
2 changed files with 28 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
aio/src/styles/2-modules/_deploy-theme.scss
View File

@ -1,50 +1,7 @@
aio-shell.mode-archive {
.mat-toolbar.mat-primary, footer {
background: linear-gradient(145deg,#263238,#78909C);
}
.vertical-menu-item {
&.selected, &:hover {
color: #263238;
}
}
.toc-inner ul.toc-list li.active a {
color: #263238;
&:before {
background-color: #263238;
}
}
.toc-inner ul.toc-list li:hover a {
color: #263238;
}
@include deployTheme(#263238, #78909C);
}
aio-shell.mode-next {
.mat-toolbar.mat-primary, footer {
background: linear-gradient(145deg,#DD0031,#C3002F);
}
.vertical-menu-item {
&.selected, &:hover {
color: #DD0031;
}
}
.toc-inner ul.toc-list li.active a {
color: #DD0031;
&:before {
background-color: #DD0031;
}
}
.toc-inner ul.toc-list li:hover a {
color: #DD0031;
}
@include deployTheme(#DD0031, #C3002F);
}

26
aio/src/styles/_mixins.scss
View File

@ -99,3 +99,29 @@
text-decoration: none;
}
}
@mixin deployTheme($mainColor, $gradientTargetColor) {
.mat-toolbar.mat-primary, footer {
background: linear-gradient(145deg, $mainColor, $gradientTargetColor);
}
.vertical-menu-item {
&.selected, &:hover {
color: $mainColor;
}
}
.toc-inner ul.toc-list li {
&.active a {
color: $mainColor;
&:before {
background-color: $mainColor;
}
}
&:hover a {
color: $mainColor;
}
}
}