feat(docs-infra): create typography and layout theme files (#41129)
creates theming files for the aio typography styles; done as part of the effort to make aio themeable PR Close #41129
This commit is contained in:
AleksanderBodurri
Andrew Kushnir
parent
d429029074
commit
ab7e8dc99d
|
|
@ -0,0 +1,52 @@
|
|||
@use '../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin typography-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
body {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: if($is-dark-theme, $offwhite, $mediumgray);
|
||||
}
|
||||
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
input,
|
||||
a {
|
||||
color: if($is-dark-theme, $white, $darkgray);
|
||||
}
|
||||
|
||||
.app-toolbar a {
|
||||
color: if($is-dark-theme, $darkgray, $white);
|
||||
}
|
||||
|
||||
code {
|
||||
color: if($is-dark-theme, $white, $darkgray);
|
||||
}
|
||||
|
||||
.sidenav-content a {
|
||||
color: if($is-dark-theme, lighten($blue, 20), $blue);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: $brightred;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,14 +8,12 @@ html {
|
|||
body {
|
||||
font-family: $main-font;
|
||||
margin: 0;
|
||||
color: $darkgray;
|
||||
@include font-size(16);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $deepgray;
|
||||
margin-bottom: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -64,7 +62,6 @@ h5 {
|
|||
|
||||
h6 {
|
||||
@include font-size(16);
|
||||
color: $mediumgray;
|
||||
margin-top: 2rem;
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -97,7 +94,6 @@ a {
|
|||
@include line-height(32);
|
||||
font-family: inherit;
|
||||
font-weight: 400;
|
||||
color: $darkgray;
|
||||
|
||||
& > em {
|
||||
@include letter-spacing(0.3);
|
||||
|
|
@ -143,7 +139,6 @@ a {
|
|||
.app-toolbar a {
|
||||
@include font-size(16);
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
font-family: $main-font;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -190,12 +185,9 @@ th {
|
|||
code {
|
||||
font-family: $code-font;
|
||||
font-size: 90%;
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
.sidenav-content a {
|
||||
color: $blue;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -227,8 +219,4 @@ code {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: $brightred;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
LAYOUT STYLES
|
||||
============================== */
|
||||
|
||||
@forward 'content-layout/content-layout';
|
||||
@forward 'doc-viewer/doc-viewer';
|
||||
@forward 'footer/footer';
|
||||
@forward 'layout-global';
|
||||
@forward 'marketing-layout/marketing-layout';
|
||||
@forward 'not-found';
|
||||
@forward 'sidenav';
|
||||
@forward 'top-menu';
|
||||
@forward 'content-layout/content-layout';
|
||||
@forward 'doc-viewer/doc-viewer';
|
||||
@forward 'footer/footer';
|
||||
@forward 'layout-global/layout-global';
|
||||
@forward 'marketing-layout/marketing-layout';
|
||||
@forward 'not-found/not-found';
|
||||
@forward 'sidenav/sidenav';
|
||||
@forward 'top-menu/top-menu';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
@use 'footer/footer-theme' as *;
|
||||
@use 'layout-global/layout-global-theme' as *;
|
||||
@use 'marketing-layout/marketing-layout-theme' as *;
|
||||
@use 'not-found/not-found-theme' as *;
|
||||
@use 'sidenav/sidenav-theme' as *;
|
||||
@use 'top-menu/top-menu-theme' as *;
|
||||
|
||||
@mixin layout-themes($theme) {
|
||||
@include footer-theme($theme);
|
||||
@include layout-global-theme($theme);
|
||||
@include marketing-layout-theme($theme);
|
||||
@include not-found-theme($theme);
|
||||
@include sidenav-theme($theme);
|
||||
@include top-menu-theme($theme);
|
||||
}
|
||||
|
|
@ -8,19 +8,19 @@
|
|||
|
||||
footer {
|
||||
background-color: $blue;
|
||||
|
||||
aio-footer {
|
||||
|
||||
aio-footer {
|
||||
& > * {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../constants';
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
footer {
|
||||
|
|
@ -37,7 +37,7 @@ footer {
|
|||
|
||||
&:focus {
|
||||
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
|
||||
outline: 1px solid rgba(constants.$white, 0.8);
|
||||
outline: 1px solid rgba($white, 0.8);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin layout-global-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
html,
|
||||
body,
|
||||
.content {
|
||||
background: if($is-dark-theme, mat-color($background, background), $white);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,7 @@
|
|||
@use '../constants' as *;
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body,
|
||||
.content {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.center-layout {
|
||||
margin: 0 auto;
|
||||
max-width: 62.5em;
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin marketing-layout-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
|
@ -14,28 +15,38 @@
|
|||
|
||||
section#intro {
|
||||
color: $white;
|
||||
|
||||
@if $is-dark-theme {
|
||||
.hero-logo {
|
||||
img {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.announcement-bar {
|
||||
background-color: $white;
|
||||
|
||||
|
||||
.button {
|
||||
color: $white;
|
||||
background-color: $blue;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-row .card {
|
||||
.card-text-container {
|
||||
.home-row .card {
|
||||
background-color: if($is-dark-theme, $darkgray, $white);
|
||||
|
||||
.card-text-container {
|
||||
p {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
h2 {
|
||||
color: $blue;
|
||||
|
|
@ -64,6 +75,4 @@
|
|||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin not-found-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.nf-response {
|
||||
h1 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.nf-icon.material-icons {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.nf-container {
|
||||
align-items: center;
|
||||
|
|
@ -12,15 +12,13 @@
|
|||
flex-direction: column;
|
||||
|
||||
h1 {
|
||||
@include font-size(48);
|
||||
color: $blue;
|
||||
@include font-size(48);
|
||||
text-transform: uppercase;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nf-icon.material-icons {
|
||||
color: $blue;
|
||||
@include font-size(100);
|
||||
position: static;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin sidenav-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
mat-sidenav-container.sidenav-container {
|
||||
background-color: if($is-dark-theme, mat-color($background, background), $white);
|
||||
|
||||
mat-sidenav.sidenav {
|
||||
background-color: if($is-dark-theme, $deepgray, $superlightgray);
|
||||
border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
|
||||
.doc-version {
|
||||
border-top: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aio-nav-menu {
|
||||
aio-nav-item {
|
||||
.vertical-menu-item {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
|
||||
&:hover {
|
||||
background-color: if($is-dark-theme, $darkgray, $lightgray);
|
||||
color: if($is-dark-theme, $powderblue, $blue);
|
||||
text-shadow: 0 0 5px if($is-dark-theme, $black, $white);
|
||||
|
||||
&.selected {
|
||||
color: if($is-dark-theme, $powderblue, $darkblue);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: if($is-dark-theme, $lightblue, $darkblue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
// Disable sidenav animations for the initial render.
|
||||
.starting.mat-drawer-transition .mat-drawer-content {
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
}
|
||||
|
||||
mat-sidenav-container.sidenav-container {
|
||||
background-color: $white;
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
max-width: 100%;
|
||||
|
|
@ -28,8 +27,6 @@ mat-sidenav-container.sidenav-container {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
min-width: 260px;
|
||||
background-color: $superlightgray;
|
||||
border-right: 1px solid $lightgray;
|
||||
|
||||
@media (max-width: 599px) {
|
||||
top: 56px;
|
||||
|
|
@ -38,7 +35,6 @@ mat-sidenav-container.sidenav-container {
|
|||
// Angular Version Selector
|
||||
.doc-version {
|
||||
padding: 8px;
|
||||
border-top: 1px solid $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -63,7 +59,6 @@ aio-nav-menu {
|
|||
aio-nav-item {
|
||||
.vertical-menu-item {
|
||||
box-sizing: border-box;
|
||||
color: $darkgray;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -75,20 +70,10 @@ aio-nav-menu {
|
|||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:hover {
|
||||
background-color: $lightgray;
|
||||
color: $blue;
|
||||
text-shadow: 0 0 5px $white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: $focus-outline-onlight auto 2px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $darkblue;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin top-menu-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
mat-toolbar.app-toolbar {
|
||||
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
|
||||
.page-home & {
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// HAMBURGER BUTTON
|
||||
.hamburger {
|
||||
&:hover {
|
||||
color: $offwhite;
|
||||
}
|
||||
|
||||
& .mat-icon {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// HOME NAV-LINK
|
||||
.nav-link.home {
|
||||
&:focus {
|
||||
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
|
||||
outline: 1px solid $focus-outline-ondark;
|
||||
}
|
||||
}
|
||||
|
||||
// TOP MENU
|
||||
aio-top-menu {
|
||||
ul {
|
||||
li {
|
||||
a.nav-link {
|
||||
.nav-link-inner {
|
||||
&:hover {
|
||||
background: rgba($white, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
box-shadow: 0 0 1px 2px $focus-outline-ondark;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
a.nav-link {
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SEARCH BOX
|
||||
aio-search-box.search-container {
|
||||
input {
|
||||
color: $darkgray;
|
||||
background-color: $white;
|
||||
|
||||
@include placeholder {
|
||||
color: $mediumgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// THEME PICKER
|
||||
|
||||
aio-theme-picker {
|
||||
button {
|
||||
color: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
// EXTERNAL LINK ICONS
|
||||
.toolbar-external-icons-container {
|
||||
a {
|
||||
&:focus {
|
||||
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
|
||||
outline: 1px solid $focus-outline-ondark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
// VARIABLES
|
||||
$showTopMenuWidth: 1048px;
|
||||
|
|
@ -18,8 +18,6 @@ mat-toolbar.app-toolbar {
|
|||
|
||||
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
|
||||
.page-home & {
|
||||
background-color: $blue;
|
||||
|
||||
@media (min-width: 481px) {
|
||||
&:not(.transitioning) {
|
||||
background-color: transparent;
|
||||
|
|
@ -44,10 +42,6 @@ mat-toolbar.app-toolbar {
|
|||
padding: 0 16px 0 0;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// HAMBURGER BUTTON
|
||||
.hamburger {
|
||||
height: 100%;
|
||||
|
|
@ -70,12 +64,7 @@ mat-toolbar.app-toolbar {
|
|||
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $offwhite;
|
||||
}
|
||||
|
||||
& .mat-icon {
|
||||
color: $white;
|
||||
position: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -88,7 +77,6 @@ mat-toolbar.app-toolbar {
|
|||
|
||||
&:focus {
|
||||
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
|
||||
outline: 1px solid $focus-outline-ondark;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -146,33 +134,13 @@ mat-toolbar.app-toolbar {
|
|||
.nav-link-inner {
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
|
||||
&:hover {
|
||||
background: rgba($white, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 0 1px 2px $focus-outline-ondark;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
a.nav-link {
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -191,10 +159,8 @@ mat-toolbar.app-toolbar {
|
|||
margin-right: 16px;
|
||||
|
||||
input {
|
||||
color: $darkgray;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
background-color: $white;
|
||||
padding: 5px 16px;
|
||||
margin-left: 8px;
|
||||
width: 180px;
|
||||
|
|
@ -208,7 +174,6 @@ mat-toolbar.app-toolbar {
|
|||
|
||||
@include placeholder {
|
||||
@include font-size(14);
|
||||
color: $mediumgray;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
|
|
@ -239,8 +204,6 @@ mat-toolbar.app-toolbar {
|
|||
margin: 0 -16px;
|
||||
|
||||
&:focus {
|
||||
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
|
||||
outline: 1px solid $focus-outline-ondark;
|
||||
outline-offset: -16px;
|
||||
}
|
||||
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
@import '~@angular/material/theming';
|
||||
@import '1-layouts/marketing-layout/marketing-layout-theme';
|
||||
@use '0-base/typography-theme' as *;
|
||||
@use '1-layouts' as *;
|
||||
|
||||
@mixin app-theme($theme) {
|
||||
@include marketing-layout-theme($theme);
|
||||
}
|
||||
@include typography-theme($theme);
|
||||
@include layout-theme($theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import '../app-theme';
|
||||
@use '../app-theme' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
|
||||
$ng-io-primary: mat-palette($mat-red, 700, 600, 800);
|
||||
$ng-io-accent: mat-palette($mat-blue, 700, 600, 800);
|
||||
$ng-io-warn: mat-palette($mat-blue);
|
||||
$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
|
||||
$ng-io-accent: mat-palette($mat-red, 700, 600, 800);
|
||||
$ng-io-warn: mat-palette($mat-red);
|
||||
$ng-io-theme: mat-dark-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
|
||||
|
||||
@include angular-material-theme($ng-io-theme);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import '../app-theme';
|
||||
@use '../app-theme' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
|
||||
$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
@use './2-modules' as modules;
|
||||
|
||||
// import print styles
|
||||
@import './print';
|
||||
@use './print';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material/theming' as *;
|
||||
@import 'app-theme';
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue