diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md index 8fcd47d77b..cecb1920ed 100644 --- a/aio/content/marketing/docs.md +++ b/aio/content/marketing/docs.md @@ -3,14 +3,14 @@ Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
-
Experience Angular

A quick look at an Angular application.

Angular in Action

 -
+
Get Going with Angular

Get going on your own environment with the Quickstart and Tutorial

@@ -21,7 +21,7 @@ Angular is a platform that makes it easy to build applications with the web. Ang

Tutorial

-->
- +
Fundamentals

Learn Angular application fundamentals, starting with an architecture overview.

Architecture

diff --git a/aio/content/marketing/events.html b/aio/content/marketing/events.html index b491a33fd4..b5c939c087 100755 --- a/aio/content/marketing/events.html +++ b/aio/content/marketing/events.html @@ -1,7 +1,9 @@ -

Events

+
+ +
-

Where we'll be presenting:

+

Where we'll be presenting:

@@ -11,24 +13,6 @@ - - - - - - - - - - - - - - - - - - diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html index c36c7b78d0..ce9f7041b7 100755 --- a/aio/content/marketing/features.html +++ b/aio/content/marketing/features.html @@ -1,88 +1,105 @@ -

Features & Benefit

-
-

Cross Platform

-
- -
-
Progressive Web Apps
-

Use modern web platform capabilities to deliver app-like experiences. - High performance, offline, and zero-step installation.

+
+
+
+
Cross Platform
+
+
-
-
Native
-

Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.

-
+
+
Progressive Web Apps
+

Use modern web platform capabilities to deliver app-like experiences. + High performance, offline, and zero-step installation.

+
-
-
Desktop
-

Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

+
+
Native
+

Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.

+
+ +
+
Desktop
+

Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

+
-

Speed and Performance

-
- -
-
Code Generation
-

Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

+
+
+
Speed and Performance
+
+
-
-
Universal
-

Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.

-
+
+
Code Generation
+

Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

+
-
-
Code Splitting
-

Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

-
+
+
Universal
+

Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.

+
-
- -

Productivity

-
- -
-
Templates
-

Quickly create UI views with simple and powerful template syntax.

-
- -
-
Angular CLI
-

Command line tools: start building fast, add components and tests, then instantly deploy.

-
- -
-
IDEs
-

Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.

+
+
Code Splitting
+

Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

+
-

Full Development Story

-
- -
-
Testing
-

With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.

+
+
+
Productivity
+
+
-
-
Animation
-

Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

+
+
Templates
+

Quickly create UI views with simple and powerful template syntax.

+
+ +
+
Angular CLI
+

Command line tools: start building fast, add components and tests, then instantly deploy.

+
+ +
+
IDEs
+

Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.

+
+
-
-
Accessibility
-

Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

+
+
+
Full Development Story
+
+
+
+
Testing
+

With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.

+
+ +
+
Animation
+

Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

+
+ +
+
Accessibility
+

Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

+
+
-
Get Started
+
Get Started
diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html index 17d4c88a69..0886474317 100755 --- a/aio/content/marketing/index.html +++ b/aio/content/marketing/index.html @@ -1,27 +1,47 @@ -
+ +
-
+ +
- -

One framework.
Mobile & desktop.

- Get Started + +
+ + + + + +
+ + +
One framework.
Mobile & desktop.
+ +
+
- -
- -

Angular v4.0 is out! Smaller, faster, no biggie...

- Learn More -
- -
-
+
+
-
-
+ +
+
+ +

Angular v4.0 is out! Smaller, faster, no biggie...

+ +
+
+ +
responsive framework @@ -30,17 +50,18 @@
-

Develop Across All Platforms

+
Develop Across All Platforms

Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.

-
- +
+
+
-

Speed & Performance

+
Speed & Performance

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.

@@ -51,8 +72,10 @@ speed and performance
-
+
+
+
IDE example
@@ -60,18 +83,21 @@
-

Incredible Tooling

+
Incredible Tooling

Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.

-
+
+
+ +
-

Loved by Millions

+
Loved by Millions

From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.

@@ -83,9 +109,20 @@
-
- Get Started -
+ +
+ + +
+ +
+
Start Tutorial
+

Start building your Angular application in TypeScript.

+
+
+
+
+
diff --git a/aio/content/marketing/resources.html b/aio/content/marketing/resources.html index 0c13cf89c9..d0922af6f2 100644 --- a/aio/content/marketing/resources.html +++ b/aio/content/marketing/resources.html @@ -1,2 +1,7 @@ -

Explore Angular Resources

- +
+ +
+ +
+ +
diff --git a/aio/e2e/app.e2e-spec.ts b/aio/e2e/app.e2e-spec.ts index c9417e76e9..991e1ec9ab 100644 --- a/aio/e2e/app.e2e-spec.ts +++ b/aio/e2e/app.e2e-spec.ts @@ -22,7 +22,7 @@ describe('site App', function() { // navigate to a different page page.getLink('features').click(); - expect(page.getDocViewerText()).toMatch(/Features/i); + expect(page.getDocViewerText()).toMatch(/Progressive web apps/i); // Show the menu page.docsMenuLink.click(); diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html index 51f523014e..2c510b6056 100644 --- a/aio/src/app/app.component.html +++ b/aio/src/app/app.component.html @@ -5,7 +5,7 @@ Home diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts index 14ff9fdf96..bb8df3d63e 100644 --- a/aio/src/app/app.component.spec.ts +++ b/aio/src/app/app.component.spec.ts @@ -28,6 +28,9 @@ import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notificat import { TocComponent } from 'app/embedded/toc/toc.component'; import { MdSidenav } from '@angular/material'; +const sideBySideBreakPoint = 992; +const hideToCBreakPoint = 800; + describe('AppComponent', () => { let component: AppComponent; let fixture: ComponentFixture; @@ -42,7 +45,7 @@ describe('AppComponent', () => { component = fixture.componentInstance; fixture.detectChanges(); - component.onResize(1033); // wide by default + component.onResize(sideBySideBreakPoint + 1); // wide by default docViewer = fixture.debugElement.query(By.css('aio-doc-viewer')).nativeElement; hamburger = fixture.debugElement.query(By.css('.hamburger')).nativeElement; @@ -70,16 +73,16 @@ describe('AppComponent', () => { describe('onResize', () => { it('should update `isSideBySide` accordingly', () => { - component.onResize(1033); + component.onResize(sideBySideBreakPoint + 1); expect(component.isSideBySide).toBe(true); - component.onResize(500); + component.onResize(sideBySideBreakPoint - 1); expect(component.isSideBySide).toBe(false); }); it('should update `showFloatingToc` accordingly', () => { - component.onResize(801); + component.onResize(hideToCBreakPoint + 1); expect(component.showFloatingToc).toBe(true); - component.onResize(800); + component.onResize(hideToCBreakPoint - 1); expect(component.showFloatingToc).toBe(false); }); }); @@ -96,7 +99,7 @@ describe('AppComponent', () => { describe('SideNav when side-by-side (wide)', () => { beforeEach(() => { - component.onResize(1033); // side-by-side + component.onResize(sideBySideBreakPoint + 1); // side-by-side }); it('should open when nav to a guide page (guide/pipes)', () => { @@ -155,7 +158,7 @@ describe('AppComponent', () => { describe('SideNav when NOT side-by-side (narrow)', () => { beforeEach(() => { - component.onResize(1000); // NOT side-by-side + component.onResize(sideBySideBreakPoint - 1); // NOT side-by-side }); it('should be closed when nav to a guide page (guide/pipes)', () => { @@ -219,7 +222,7 @@ describe('AppComponent', () => { describe('SideNav version selector', () => { beforeEach(() => { - component.onResize(1033); // side-by-side + component.onResize(sideBySideBreakPoint + 1); // side-by-side }); it('should pick first (current) version by default', () => { diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index 185b51fa4e..aedd009f1b 100644 --- a/aio/src/app/app.component.ts +++ b/aio/src/app/app.component.ts @@ -61,7 +61,7 @@ export class AppComponent implements OnInit { private isSideNavDoc = false; private previousNavView: string; - private sideBySideWidth = 1032; + private sideBySideWidth = 992; sideNavNodes: NavigationNode[]; topMenuNodes: NavigationNode[]; topMenuNarrowNodes: NavigationNode[]; diff --git a/aio/src/assets/images/icons/code-icon.svg b/aio/src/assets/images/icons/code-icon.svg new file mode 100644 index 0000000000..1ee77261ef --- /dev/null +++ b/aio/src/assets/images/icons/code-icon.svg @@ -0,0 +1 @@ +code-icon \ No newline at end of file diff --git a/aio/src/assets/images/icons/feature-icon.svg b/aio/src/assets/images/icons/feature-icon.svg new file mode 100644 index 0000000000..ae6cf46eb0 --- /dev/null +++ b/aio/src/assets/images/icons/feature-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index 49fd716c0e..edc017a6de 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -1,168 +1,161 @@ -// @mixin docs-site-typography() { -// .docs-component-viewer-tabbed-content .docs-component-view-text-content, -// .docs-guide-content { +body { + font-family: $main-font; + margin: 0; + color: $darkgray; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} - body { - font-family: $main-font; - margin: 0; - color: $darkgray; - font-size: 14px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } +h1 { + display:inline-block; + font-size: 24px; + font-weight: 500; + margin: 8px 0px; +} - h1 { - display:inline-block; - font-size: 24px; - font-weight: 500; - margin: 8px 0px; - } +h1:after { + content: ""; + display: block; + height: 1px; + width: 40%; + margin: 24px 0px 10px; + background: $lightgray; + clear: both; +} - h1:after { - content: ""; - display: block; - height: 1px; - width: 40%; - margin: 24px 0px 10px; - background: $lightgray; - clear: both; - } +h2 { + font-size: 22px; + font-weight: 500; + margin: 32px 0px 24px; + clear: both; +} - h2 { - font-size: 22px; - font-weight: 500; - margin: 32px 0px 24px; - clear: both; - } +h3 { + font-size: 20px; + font-weight: 400; + margin: 24px 0px; + clear: both; +} - h3 { - font-size: 20px; - font-weight: 400; - margin: 24px 0px; - clear: both; - } +h4 { + font-size: 18px; + font-weight: 400; + margin: 8px 0px; + clear: both; +} - h4 { - font-size: 18px; - font-weight: 400; - margin: 8px 0px; - clear: both; - } +h5 { + font-size: 16px; + font-weight: 500; + margin: 8px 0px; + clear: both; +} - h5 { - font-size: 16px; - font-weight: 500; - margin: 8px 0px; - clear: both; - } +h6 { + color: $mediumgray; + font-size: 16px; + font-weight: 500; + margin: 8px 0px; + clear: both; +} - h6 { - color: $mediumgray; - font-size: 16px; - font-weight: 500; - margin: 8px 0px; - clear: both; - } +h1 { + @media screen and (max-width: 600px) { + margin: 0; + } +} - h1 { - @media screen and (max-width: 600px) { - margin: 0; - } - } +h1:after, h2, h3, h4, h5, h6 { + @media screen and (max-width: 600px) { + margin: 8px 0; + } +} - h1:after, h2, h3, h4, h5, h6 { - @media screen and (max-width: 600px) { - margin: 8px 0; - } - } +.mat-tab-body-wrapper h2 { + margin-top: 0; +} - .mat-tab-body-wrapper h2 { - margin-top: 0; - } +p, ol, ul, ol, li, input, a { + font-size: 14px; + line-height: 24px; + letter-spacing: 0.30px; + font-weight: 400; + & > em { + letter-spacing: 0.30px; + } +} - p, ol, ul, ol, li, input, a { - font-size: 14px; - line-height: 24px; - letter-spacing: 0.30px; - font-weight: 400; - & > em { - letter-spacing: 0.30px; - } - } +ol li { + margin: 14px 0px; +} - ol li { - margin: 14px 0px; - } +a { + text-decoration: none; +} - a { - text-decoration: none; - } +.mat-toolbar-row a { + font-size: 16px; + font-weight: 400; + color: white; + font-family: $main-font; + text-transform: uppercase; + padding: 21px 0; +} - .mat-toolbar-row a { - font-size: 16px; - font-weight: 300; - color: white; - font-family: $main-font; - text-transform: uppercase; - padding: 21px 0; - } +strong { + font-weight: 500; +} - strong { - font-weight: 500; - } +table { + border-collapse: collapse; + border-radius: 2px; + border-spacing: 0; + margin: 0 0 32px 0; +} - table { - border-collapse: collapse; - border-radius: 2px; - border-spacing: 0; - margin: 0 0 32px 0; - } +table tbody th { + max-width: 100px; + padding: 13px 32px; + text-align: left; +} - table tbody th { - max-width: 100px; - padding: 13px 32px; - text-align: left; - } +td { + font-weight: 400; + padding: 8px 30px; + letter-spacing: 0.30px; - td { - font-weight: 400; - padding: 8px 30px; - letter-spacing: 0.30px; + p { + margin: 0; + } +} - p { - margin: 0; - } - } +th { + font-size: 16px; + font-weight: 500; + padding: 13px 32px; + text-align: left; +} - th { - font-size: 16px; - font-weight: 500; - padding: 13px 32px; - text-align: left; - } +p > code, li > code, table code { + font-family: $code-font; + font-size: 85%; + color: $darkgray; + letter-spacing: 0; + line-height: 1; + padding: 2px 6px; + background-color: $backgroundgray; + border-radius: 4px; +} - p > code, li > code, table code { - font-family: $code-font; - font-size: 85%; - color: $darkgray; - letter-spacing: 0; - line-height: 1; - padding: 2px 6px; - background-color: $backgroundgray; - border-radius: 4px; - } +code { + font-family: $code-font; + font-size: 90%; +} - code { - font-family: $code-font; - font-size: 90%; - } - - .sidenav-content a { - color: $blue; - &:hover { - color: $mediumgray; - } - } - -// } -// } +.sidenav-content a { + color: $blue; + &:hover { + color: $mediumgray; + } +} \ No newline at end of file diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss index 8dc7b91fe7..95d6e188d1 100644 --- a/aio/src/styles/1-layouts/_content-layout.scss +++ b/aio/src/styles/1-layouts/_content-layout.scss @@ -1,16 +1,13 @@ -.progress-bar-container { - height: 2px; - overflow: hidden; - position: fixed; - top: 64px; - width: 100vw; - z-index: 5; +aio-shell.page-docs { + .sidenav-content { + // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES + margin: auto; + } } .sidenav-content { - padding: 1rem 3rem 3rem; - margin: auto; min-height: 100vh; + padding: 6rem 3rem 1rem; } .fill-remaining-space { @@ -22,14 +19,9 @@ display: none; } - .progress-bar-container { - top: 56px; - } - .sidenav-content { min-height: 450px; } - } .sidenav-container { diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss index 7707bcffe9..1e4e65a2b1 100644 --- a/aio/src/styles/1-layouts/_layout-global.scss +++ b/aio/src/styles/1-layouts/_layout-global.scss @@ -48,4 +48,8 @@ l-relative { position: absolute !important; top: -9999px !important; left: -9999px !important; +} + +.text-uppercase { + text-transform: uppercase; } \ No newline at end of file diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss index fb97863de8..f6269f1f95 100644 --- a/aio/src/styles/1-layouts/_layouts-dir.scss +++ b/aio/src/styles/1-layouts/_layouts-dir.scss @@ -2,12 +2,12 @@ LAYOUT STYLES ============================== */ -@import 'sidenav'; +@import 'api-page'; @import 'content-layout'; -@import 'top-menu'; -@import 'marketing-layout'; @import 'footer'; @import 'layout-global'; +@import 'marketing-layout'; @import 'not-found'; -@import 'api-page'; +@import 'sidenav'; @import 'table-of-contents'; +@import 'top-menu'; diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss index 224088d131..f6553aa78d 100644 --- a/aio/src/styles/1-layouts/_marketing-layout.scss +++ b/aio/src/styles/1-layouts/_marketing-layout.scss @@ -1,9 +1,330 @@ -#home { - padding: 0rem 0rem 3rem; +.hero { + width: 100%; + min-height: 480px; + height: 80vh; + max-height: 560px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-sizing: border-box; + padding: 48px 48px 32px 48px; + position: absolute; + width: 100%; + overflow: hidden; + transform: skewY(8deg); + transform-origin: 100%; - @media (max-width: 800px) { + @media (max-width: 480px) { + padding-top: 40px; + transform: none; + } + + h1:after { + content: none; + } + + .hero-title { + display: inline-block; + font-size: 28px; + font-weight: 400; + line-height: 48px; + margin: 0 $unit 0 0; + text-transform: uppercase; + + &.is-standard-case { + text-transform: none; + } + } +} + +section#intro { + display: flex; + width: 900px; + height: 480px; + margin: 0 auto; + padding: 48px 0 0; + align-items: center; + position: relative; + color: white; + + @media (max-width: 780px) { + flex-direction: column; + max-width: 100vw; + width: 100%; + justify-content: center; + padding: 64px 0 32px; + + button { + margin: 0; + display: inline-block; + } + } + + .homepage-container { + margin-top: -7%; + padding-top: 0; + padding-bottom: 0; + max-width: 1040px; + width: 100%; + margin: 0 auto; + + @media (max-width: 780px) { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: 100%; + padding: 0; + } + } + + .hero-headline { + font-size: 40px; + line-height: 64px; + font-weight: 500; + margin: 32px 0; + + &:after { + display: none; + } + + @media (max-width: 780px) { + text-align: center; + } + } + + .hero-logo { + width: 400px; + display: flex; + + @media (max-width: 780px) { + width: 250px; + } + + img { + filter: drop-shadow(0 2px 2px rgba($black, 0.24)); + margin-bottom: 8px; + padding: 0; + width: 400px; + height: 400px; + + @media (max-width: 780px) { + width: 250px; + height: 250px; + } + } + } +} + +.announcement-bar { + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 16px; + margin: 0 auto; + max-width: 50vw; + background-color: $white; + border-radius: 4px; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + box-sizing: border-box; + align-items: center; + transition: all 0.3s ease-in; + + @media (max-width: 600px) { + flex-direction: column; + text-align: center; + min-width: 100%; + padding: 32px 16px; + } + + button { + min-width: 160px; + background-color: $blue; + border-radius: 48px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + cursor: pointer; + + &:hover { + .material-icons { + display: inline-block; + color: $white; + opacity: 0.7; + } + + a { + color: $white; + opacity: 0.7; + } + } + + a { + color: $white; + font-size: 16px; + } + } + + .material-icons { + right: 0; + position: static; + display: none; + transition: all 0.3s ease-in; + font-size: 16px; + } + + p { + font-size: 16px; + margin: 8px; + } +} + +// ANGULAR LINE +.background-sky { + background-color: $blue; + background: $bluegradient; + color: $white; +} + +.home-row .card { + @include card(70%, auto); + min-width: 350px; + width: 70%; + height: auto; + padding: 24px; + margin: auto; + display: flex; + flex-direction: row; + align-items: center; + box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12); + position: relative; + + @media (max-width: 600px) { + margin: 16px auto 0; + + h2 { + margin: 0; + } + + img { + max-width: none; + height: 70px; + } + } + + @media (max-width: 1300px) { + img { + max-width: none; + height: 70px; + } + } + + img { + margin: 16px ; + } + + .card-text-container { + margin: 0 16px; + + p { + text-align: left; + padding: 8px 0; + color: $darkgray; + margin: 0; + } + } + + + &:hover { + h2 { + color: $blue; + } + } +} + +button.hero-cta { + border-radius: 48px; + display: block; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + cursor: pointer; + + &:hover { + opacity: 0.9; + } + + a { + font-size: 18px; + font-weight: 600; + text-transform: uppercase; + } +} + +aio-shell { + &.page-resources, &.page-events { + section { + padding: 0rem 0rem 3rem; + } + } + + &.page-home { + section { + padding: 0; + } + } + + &.page-home, &.page-resources, &.page-events { article { - padding: 0 30px; + padding: 32px; + + @media (max-width: 800px) { + padding: auto; + } + } + } + + &.page-home, &.page-resources, &.page-events, &.page-features { + + .content img { + @media (max-width: 1300px) { + max-width: none; + } + } + + @media (max-width: 600px) { + md-sidenav-container.sidenav-container { + padding-top: 0; + } + } + + @media (min-width: 992px) { + md-toolbar { + padding-left: 24px; + + button.hamburger { + display: none; + } + } + } + } + + .cta-bar .hero-cta { + color: $blue; + } +} + +.text-headline { + font-size: 20px; + margin-top: 10px; + text-transform: uppercase; + color: $blue; + font-weight: 500; +} + +.feature-section { + .feature-header { + text-align: center; + + .text-headline { + text-align: center; } } } @@ -16,6 +337,7 @@ aio-shell:not(.view-SideNav) { div[layout=row]{ display: flex; + justify-content: center; box-sizing: border-box; align-items: center; @@ -29,81 +351,50 @@ div[layout=row]{ } .home-rows { - margin-top: 112px; + overflow: hidden; + @media (max-width: 600px) { + margin: 0; + } } -.home-row .promo-image-container, .home-row .text-container { +.home-row .promo-img-container, .home-row .text-container { max-width: 50%; } .background-superhero-paper { - background: url('assets/images/backgrounds/super-hero-large.png') no-repeat bottom center , $bluegradient; background-blend-mode: multiply; background-size: 100%; } -.background-sky { - background-color: $blue; - background: $bluegradient; - color: $white; -} - header.bckground-sky.l-relative { display: flex; flex-direction: column; } -.home-rows { - // NOTE (ericjim): if a banner is placed on the homescreen, add this margin. - margin-top: 112px; -} - .home-row { max-width: 920px; - margin: 0 0 60px 0; + margin: 32px; margin-left: auto; margin-right: auto; @media (max-width: 480px) { display: block; - } - h3.text-headline { - font-size: 28px; - margin-top: 10px; - } - - // NOTE (ericjim): remove if graphic changes. - .promo-3 { - margin-top: 15px; - - @media(max-width: 599px) { - margin-top: 0; - } - } - - // -- Utility margins for promos - .promo-1-desc, .promo-3-desc { - padding-left: 5px; - } - - // -- Reset margins for the utility margins - @media(max-width: 599px) { - .promo-1, .promo-2, .promo-3, .promo-4 { - margin: 0; - } + .text-headline, .promo-img-container { + text-align: center; + } } .text-block { padding-right: 15%; - @media(max-width: 599px) { + @media(max-width: 600px) { padding: 0; } } - @media(max-width: 599px) { - .promo-image-container, .text-container { + @media(max-width: 600px) { + .promo-img-container, .text-container { max-width: 100%; } @@ -134,6 +425,29 @@ header.bckground-sky.l-relative { } } -.text-uppercase { - text-transform: uppercase; +.marketing-banner { + background-color: lighten($blue, 10); + margin-top: 64px; + padding: 32px; + + @media (max-width: 600px) { + margin-top: 56px; + padding: 18px; + } + + .banner-headline { + text-transform: uppercase; + font-size: 24px; + font-weight: 300; + color: white; + + @media (max-width: 600px) { + font-size: 18px; + font-weight: 400; + } + + &:after { + display: none; + } + } } \ No newline at end of file diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss index 212080f18f..686ec4fe3a 100644 --- a/aio/src/styles/1-layouts/_sidenav.scss +++ b/aio/src/styles/1-layouts/_sidenav.scss @@ -8,6 +8,21 @@ } } +aio-nav-menu { + display: block; + padding: 16px 0 0; + margin: 0 auto; + font-size: 13px; + ul, a { + padding: 0; + margin: 0; + } + + aio-nav-item div a { + padding-left: 16px; + } +} + md-sidenav.mat-sidenav.sidenav { position: fixed; bottom: 0; @@ -28,14 +43,10 @@ md-sidenav-container.sidenav-container { max-width: 82%; margin: 0; transform: none; - padding-top: 64px; @media (max-width: 800px) { max-width: 100%; } - @media (max-width: 600px) { - padding-top: 56px; - } } md-sidenav-container div.mat-sidenav-content { @@ -60,13 +71,11 @@ md-sidenav-container div.mat-sidenav-content { width: 100%; word-wrap: break-word; outline: none; + transition: all 0.3s ease-in-out; &:hover { - background-color: $lightgray; - } - - &:focus { - color: $darkgray; + text-shadow: 0 0 5px #ffffff; + color: $blue; } //icons _within_ nav @@ -80,10 +89,6 @@ md-sidenav-container div.mat-sidenav-content { .vertical-menu-item.selected { color: $blue; - - &:focus { - color: $blue-900; - } } button.vertical-menu-item { @@ -122,12 +127,6 @@ button.vertical-menu-item { transition-timing-function: ease-out; } -a.selected.level-1, -.heading.selected.level-1, -.heading-children.selected.level-1 { - border-left: 3px $blue solid; -} - .level-1 { font-family: $main-font; font-size: 14px; @@ -141,7 +140,7 @@ a.selected.level-1, font-size: 14px; color: $mediumgray; font-weight: 400; - padding-left: 20px; + padding-left: 24px; text-transform: none; } @@ -149,6 +148,7 @@ a.selected.level-1, font-family: $main-font; font-size: 14px; color: $mediumgray; + padding-left: 8px; } .level-1.expanded .mat-icon, .level-2.expanded .mat-icon { @@ -168,19 +168,20 @@ a.selected.level-1, } aio-nav-menu.top-menu { - aio-nav-item:first-child .vertical-menu-item { - padding-top: 48px; - } + padding: 24px 0 0; aio-nav-item:last-child div { - border-bottom: 2px solid rgba($mediumgray, 0.5); + border-bottom: 1px solid rgba($mediumgray, 0.5); } + aio-nav-item:first-child div { + border-top: 1px solid rgba($mediumgray, 0.5); + } } // Angular Version Selector md-sidenav .doc-version { - padding: 10px; + padding: 8px; border-top: 1px solid $lightgray; select { diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index 2c24074110..e4736a8952 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -1,4 +1,3 @@ - .fill-remaining-space { flex: 1 1 auto; } @@ -52,13 +51,12 @@ aio-top-menu { margin: 0px; li { + padding-bottom: 2px; list-style-type: none; - line-height: 64px; - height: 64px; cursor: pointer; &:hover { - background-color: $accentblue; + opacity: 0.7; } &:focus { @@ -69,14 +67,29 @@ aio-top-menu { } } +aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar { + background-color: transparent; +} + md-toolbar.mat-toolbar { - position: fixed; - top: 0; - right: 0; + position: absolute; + perspective: 2000px; + top: 0px; + right: 0; left: 0; z-index: 10; - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30); padding: 0 16px 0 0; + + .mat-toolbar-row { + @media (max-width: 600px) { + } + } +} + +aio-shell.sidenav-open { + md-toolbar.mat-toolbar md-icon { + color: $mediumgray; + } } .search-container { @@ -91,13 +104,20 @@ md-toolbar.mat-toolbar { aio-search-box input { color: $darkgray; border: none; - border-radius: 5px; + border-radius: 100px; background-color: $offwhite; - padding: 5px 10px; + padding: 5px 16px; margin-left: 8px; - width: 200px; + width: 150px; height: 40%; + @include bp(big) { + transition: width 0.4s ease-in-out; + &:focus { + width: 50%; + max-width: 240px; + } + } @media (max-width: 480px) { width: 180px; } diff --git a/aio/src/styles/2-modules/_announcement-bar.scss b/aio/src/styles/2-modules/_announcement-bar.scss deleted file mode 100644 index f692a23020..0000000000 --- a/aio/src/styles/2-modules/_announcement-bar.scss +++ /dev/null @@ -1,180 +0,0 @@ -/* Announcment Bar Module */ -/* A module displaying time senstive announcemnts */ - - -/* VARIABLES */ - -$announcement-bar: '.announcement-bar'; -$announcement-bar-height: 104px; -$announcement-bar-width: 784px; - -/* CLASS */ - -#{$announcement-bar} { - height: 104px; - width: $announcement-bar-width; - position: absolute; - margin-left: auto; - top: 500px; - color: $darkgray; - background: $white; - border-radius: 4px; - overflow: hidden; - box-sizing: border-box; - box-shadow: 0 4px 4px rgba(0,0,0,0.24), 0 0 4px rgba(0,0,0,0.12); - - @media (max-width: $announcement-bar-width) { - height: auto; - margin: 0; - position: static; - text-align: center; - width: 100%; - } -} - -// SLIDES CONTAINER -#{$announcement-bar}-slides { - position: relative; - overflow: hidden; - color: $darkgray; - background: $white; - height: $announcement-bar-height; - width: $announcement-bar-width; - box-sizing: border-box; - box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12); - - @media (max-width: 480px) { - box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); - height: 240px; - margin: 0; - padding: 32px 48px; - text-align: center; - width: auto; - } -} - -// INDIVIDUAL SLIDE -#{$announcement-bar}-slide { - bottom: 0; - box-sizing: border-box; - height: $announcement-bar-height; - left: 0; - margin-bottom: -$announcement-bar-height; - opacity: 0; - padding: 32px; - position: absolute; - right: 0; - transition: all .8s; - width: $announcement-bar-width; - z-index: 1; - - @media (max-width: 480px) { - height: auto; - margin: 0; - padding:0; - width: auto; - transition: opacity .8s; - visibility: hidden; - } - - img, p { - float: left; - - @media (max-width: 480px) { - display: block; - float: none; - } - } - - img { - height: 40px; - margin: 0 0 8px; - } - - p { - font-size: 18px; - line-height: 40px; - margin: 0; - padding: 0; - - @media (max-width: 480px) { - line-height: 24px; - margin: auto; - } - - } - - .button, - .button.md-button { - margin: 0; - padding: 0 40px; - background: $mediumgray; - color: $white; - float: right; - font-size: 14px; - line-height: 40px; - transition: all .3s ease-in-out; - - &:hover { - background: $blue; - box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); - color: $white; - } - - @media (max-width: $announcement-bar-width) { - float: none; - margin: 16px auto; - } - } - - &.is-visible { - margin-bottom: 0; - opacity: 1; - z-index: 2; - - @media (max-width: $announcement-bar-width) { - position: static; - visibility: visible; - justify-content: center; - display: flex !important; - flex-direction: column; - padding: 8px; - height: auto; - width: 100%; - margin: 0; - } - - @media (max-width: 480px) { - padding: 16px; - align-items: center; - } - } -} - -// NAV BAR -#{$announcement-bar} nav { - bottom: -40px; - color: $lightgray; - left: 0; - position: absolute; - right: 0; - text-align: center; - z-index: 1; - - button { - background: $lightgray; - border: none; - border-radius: 100px; - height: 12px; - margin: 0 4px; - outline: none; - overflow: hidden; - text-indent: -3000px; - width: 12px; - - &.is-selected, - &.selected { - background: $lightgray; - } - } -} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss index 0538332a23..fc3a8fd3fc 100644 --- a/aio/src/styles/2-modules/_buttons.scss +++ b/aio/src/styles/2-modules/_buttons.scss @@ -103,4 +103,8 @@ a.filter-button { background-color: $blue; color: white; } +} + +[md-button], [md-raised-button], [mat-button], [mat-raised-button] { + text-transform: uppercase; } \ No newline at end of file diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss index 31aaded6b7..e2d12ce0a7 100644 --- a/aio/src/styles/2-modules/_card.scss +++ b/aio/src/styles/2-modules/_card.scss @@ -5,7 +5,7 @@ margin: 24px 0; } -.card { +.docs-card { @include card(194px, 30%); max-width: 340px; min-width: 262px; diff --git a/aio/src/styles/2-modules/_hero.scss b/aio/src/styles/2-modules/_hero.scss deleted file mode 100644 index 4a2abd0acc..0000000000 --- a/aio/src/styles/2-modules/_hero.scss +++ /dev/null @@ -1,113 +0,0 @@ -/* -* Hero Module -* -* A hero banner located at the top of each page that displays the -* title of the page and sometimes a decorative background. -* -*/ - - -/* -* Class -*/ - -.hero { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - box-sizing: border-box; - padding: 48px 48px 32px 48px; - position: relative; - - @media (max-width: 480px) { - height: auto; - padding-top: 40px; - } - - h1:after { - content: none; - } - - .hero-title { - display: inline-block; - font-size: 28px; - font-weight: 400; - float: left; - line-height: 48px; - margin: 0 $unit 0 0; - text-transform: uppercase; - - &.is-standard-case { - text-transform: none; - } - } - - .hero-subtitle { - font-size: 14px; - font-weight: 400; - line-height: $unit * 3; - margin: 0; - text-transform: uppercase; - } - - - // CTA BUTTONS - .button { - margin: 0px $unit; - - // @include respond-to('mobile') { - // margin: 16px 0; - // display: block; - // } - } - - button { - // Override md-button from angular material to align language select with hero title. - margin: 0 !important; - } - - - /* - * Large Banner - */ - - &.is-large { - padding-top: 32px; - text-align: center; - - // @include respond-to('mobile') { - // height: auto; - // } - - // LARGE SHEILD LOGO - .hero-logo { - filter: drop-shadow(0 2px 2px rgba($black, 0.24)); - margin-bottom: 8px; - opacity: 1; - padding: 0; - width: 240px; - - // @include respond-to('mobile') { - // width: 192px; - // } - } - - .hero-cta, - .hero-cta.md-button { - background: rgba($white, .87); - border-radius: 2px; - color: $blue; - font-weight: 500; - padding: 0 64px; - margin: 40px 0; - transition: all .3s; - - &:hover { - background: $white; - box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12); - color: $blue; - } - } - } -} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss index 3f371d24a9..fa1ad0b637 100644 --- a/aio/src/styles/2-modules/_modules-dir.scss +++ b/aio/src/styles/2-modules/_modules-dir.scss @@ -2,28 +2,27 @@ MODULE STYLES ============================== */ - @import 'hamburger'; - @import 'features'; + @import 'alert'; + @import 'api-info-bar'; + @import 'api-list'; + @import 'banner'; + @import 'buttons'; + @import 'callout'; + @import 'card'; @import 'code'; @import 'contributor'; - @import 'alert'; + @import 'edit-page-cta'; + @import 'features'; @import 'filetree'; + @import 'hamburger'; + @import 'heading-anchors'; + @import 'hr'; @import 'images'; + @import 'progress-bar'; @import 'table'; @import 'presskit'; - @import 'card'; - @import 'subsection'; - @import 'buttons'; - @import 'hero'; - @import 'announcement-bar'; - @import 'banner'; - @import 'search-results'; - @import 'api-list'; - @import 'hr'; - @import 'scrollbar'; - @import 'callout'; @import 'resources'; - @import 'edit-page-cta'; - @import 'heading-anchors'; - @import 'api-info-bar'; + @import 'scrollbar'; + @import 'search-results'; + @import 'subsection'; @import 'toc'; diff --git a/aio/src/styles/2-modules/_progress-bar.scss b/aio/src/styles/2-modules/_progress-bar.scss new file mode 100644 index 0000000000..36a4c751f0 --- /dev/null +++ b/aio/src/styles/2-modules/_progress-bar.scss @@ -0,0 +1,12 @@ +.progress-bar-container { + height: 2px; + overflow: hidden; + position: fixed; + top: 64px; + width: 100vw; + z-index: 5; + + @media (max-width: 600px) { + top: 56px; + } +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss index bc88868cc3..f83e7fb68c 100644 --- a/aio/src/styles/2-modules/_table.scss +++ b/aio/src/styles/2-modules/_table.scss @@ -55,10 +55,6 @@ table { td { letter-spacing: 0.30px; - @media (max-width: 480px) { - display: block; - } - tr td:first-child { @media (max-width: 480px) { background-color: $lightgray; @@ -72,10 +68,6 @@ table { border-right: 1px solid $lightgray; font-weight: 600; max-width: 100px; - - @media (max-width: 480px) { - display: none; - } } tr:last-child td { @@ -84,7 +76,6 @@ table { @media (max-width: 480px) { border-bottom: 1px solid $lightgray; } - } } } diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss index 2f983f8e29..f0d99d5499 100644 --- a/aio/src/styles/2-modules/_toc.scss +++ b/aio/src/styles/2-modules/_toc.scss @@ -8,6 +8,11 @@ overflow-x: hidden; } +.toc-content { + border-left: 1px solid $lightgray; + margin-left: 8px; +} + aio-toc { &.embedded { @media (min-width: 801px) { @@ -17,14 +22,23 @@ aio-toc { } .toc-inner { - border-left: 4px solid #4285f4; + + &:not(.embedded) { + @media (max-width: 800px) { + border-left: 4px solid #4285f4; + display: none; + } + } +} + +aio-toc > div { font-size: 13px; overflow-y: visible; padding: 4px 0 0 10px; - .toc-heading p { + .toc-heading { font-weight: 500; - margin: 0; + margin: 0 0 16px 8px; padding: 0; } @@ -107,7 +121,7 @@ aio-toc { ul.toc-list { list-style-type: none; margin: 0; - padding: 0; + padding: 0 8px; @media (max-width: 800px) { width: auto; @@ -119,42 +133,77 @@ aio-toc { font-size: 12px; line-height: 16px; margin: 6px 0; - padding: 0; + // padding: 0 16px; position: relative; transition: all 0.3s ease-in-out; + &.active { + a { + color: $blue; + font-weight: 500; + } + + &:before { + content: ''; + border-radius: 50%; + left: -16px; + top: 10px; + background: $blue; + position: absolute; + width: 6px; + height: 6px; + } + } + + &.h3 { + margin-left: 8px; + } + + &:last-child a:before { + width: 0; + } + a { font-size: inherit; color: lighten($darkgray, 10); display:table-cell; overflow: visible; + font-size: 12px; + display: table-cell; + &:hover { color: $accentblue; } - } - &.active { - a { - color: $accentblue; + &.h2 { + &:before { + content: ''; + left: -1px; + top: 10px; + background: red; + position: absolute; + display: block; + width: 1px; + height: calc(100% + 11px); + } } } } - ul.toc-list li.h3 { - margin-left: 15px; - } - - ul.toc-list li.h1:after { - content: ""; - display: block; - height: 1px; - width: 40%; - margin: 24px 0px 10px; - background: #DBDBDB; - clear: both; - } + // ul.toc-list li.h3 { + // margin-left: 15px; + // } + // ul.toc-list li.h1:after { + // content: ""; + // display: block; + // height: 1px; + // width: 40%; + // margin: 24px 0px 10px; + // background: #DBDBDB; + // clear: both; + // } } aio-toc.embedded > div.collapsed li.secondary { diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss index 761d6d3c67..667f9c0287 100644 --- a/aio/src/styles/_mixins.scss +++ b/aio/src/styles/_mixins.scss @@ -58,7 +58,6 @@ border: 0.5px solid $lightgray; } - @mixin card($height, $width) { height: $height; width: $width; diff --git a/aio/src/styles/main.scss b/aio/src/styles/main.scss index d516cddf12..2809816ed8 100755 --- a/aio/src/styles/main.scss +++ b/aio/src/styles/main.scss @@ -12,22 +12,3 @@ @import './0-base/base-dir'; @import './1-layouts/layouts-dir'; @import './2-modules/modules-dir'; - -// import additional scss - -// ********************************************************* // - -[md-button], [md-raised-button], [mat-button], [mat-raised-button] { - text-transform: uppercase; -} - -.docs-primary-header { - padding-left: 20px; -} - -h1.docs-primary-header, h1 .docs-primary-header{ - font-size: 30px; - font-weight: 300; - margin: 0; - padding: 30px; -} diff --git a/aio/src/styles/ng-io-theme.scss b/aio/src/styles/ng-io-theme.scss index 26ebce0455..1b1cca8604 100644 --- a/aio/src/styles/ng-io-theme.scss +++ b/aio/src/styles/ng-io-theme.scss @@ -21,14 +21,3 @@ $ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn); // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($ng-io-theme); - -//TODO: define custom theme, old values from Style guide: -// @material-header: #455A64; -// @material-header-darker: #37474F; -// @material-header-dark: #263238; -// @material-200: #EEEEEE; -// @material-700: #616161; -// @material-800: #424242; -// @material-900: #212121; -// @black: #000000; -// @white: #FFFFFF;
DEVOXX - UKLondon, United KingdomMay 11, 2017
Google IOMountain View, CaliforniaMay 17, 2017
AngleBracketsOrlando, FloridaMay 21, 2017
ng-Japan