diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 7a35fd6884..11ffff1887 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -27,6 +27,12 @@
+
diff --git a/aio/src/assets/images/logos/github-icon.svg b/aio/src/assets/images/logos/github-icon.svg
new file mode 100644
index 0000000000..6fe590f967
--- /dev/null
+++ b/aio/src/assets/images/logos/github-icon.svg
@@ -0,0 +1,14 @@
+
+
+
diff --git a/aio/src/assets/images/logos/twitter-icon.svg b/aio/src/assets/images/logos/twitter-icon.svg
new file mode 100644
index 0000000000..4928d64d03
--- /dev/null
+++ b/aio/src/assets/images/logos/twitter-icon.svg
@@ -0,0 +1,13 @@
+
+
+
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 928541791b..d90ffa25e6 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -2,7 +2,6 @@
$hamburgerShownMargin: 0 8px 0 0;
$hamburgerHiddenMargin: 0 16px 0 -88px;
-
// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
mat-toolbar.mat-toolbar {
position: fixed;
@@ -10,7 +9,7 @@ mat-toolbar.mat-toolbar {
right: 0;
left: 0;
z-index: 10;
- box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
mat-toolbar-row {
padding: 0 16px 0 0;
@@ -21,7 +20,6 @@ mat-toolbar.mat-toolbar {
}
}
-
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
aio-shell.page-home mat-toolbar.mat-toolbar {
background-color: $blue;
@@ -29,12 +27,11 @@ aio-shell.page-home mat-toolbar.mat-toolbar {
@media (min-width: 481px) {
&:not(.transitioning) {
background-color: transparent;
- transition: background-color .2s linear;
+ transition: background-color 0.2s linear;
}
}
}
-
// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
aio-shell.page-home mat-toolbar.mat-toolbar,
aio-shell.page-features mat-toolbar.mat-toolbar,
@@ -48,7 +45,6 @@ aio-shell.page-resources mat-toolbar.mat-toolbar {
}
}
-
// DOCS PAGES OVERRIDE: HAMBURGER
aio-shell.folder-api mat-toolbar.mat-toolbar,
aio-shell.folder-docs mat-toolbar.mat-toolbar,
@@ -62,7 +58,6 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
}
}
-
// HAMBURGER BUTTON
.hamburger.mat-button {
height: 100%;
@@ -70,9 +65,9 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
padding: 0;
&:not(.starting) {
- transition-duration: .4s;
+ transition-duration: 0.4s;
transition-property: color, margin;
- transition-timing-function: cubic-bezier(.25, .8, .25, 1);
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (min-width: 992px) {
@@ -91,7 +86,6 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
}
}
-
// HOME NAV-LINK
.nav-link.home {
cursor: pointer;
@@ -104,7 +98,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
top: 12px;
height: 40px;
- @media(max-width: 992px) {
+ @media (max-width: 992px) {
&:hover {
transform: scale(1.1);
}
@@ -112,7 +106,6 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
}
}
-
// TOP MENU
aio-top-menu {
display: flex;
@@ -158,7 +151,6 @@ aio-top-menu {
}
}
-
// SEARCH BOX
aio-search-box.search-container {
display: flex;
@@ -181,7 +173,7 @@ aio-search-box.search-container {
-webkit-appearance: none;
&:focus {
- outline: none;
+ outline: none;
}
@include bp(big) {
@@ -196,3 +188,25 @@ aio-search-box.search-container {
}
}
}
+
+// EXTERNAL LINK ICONS
+.app-toolbar {
+ .toolbar-external-icons-container {
+ display: flex;
+ flex-direction: row;
+
+ a {
+ display: flex;
+ align-items: center;
+ margin-left: 16px;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ img {
+ height: 24px;
+ }
+ }
+ }
+}