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; + } + } + } +}