feat(aio): marketing design refresh
- Add styling for active TOC item - Add sidenav styles - Change header tags to divs from index marketing page to remove anchors - Fix use of card mixin and create separate card-docs class - Add marketing styling - Topnav styling when on home landing page - Remove hamburger menu on home page - Add fully rounded border to top nav toolbar search input - Add mobile styles - Add title banner to other marketing pages
This commit is contained in:
Stefanie Fluin
Pete Bacon Darwin
parent
0018acfede
commit
b8b91d3418
|
|
@ -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
|
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
|
||||||
|
|
||||||
<div class="card-container">
|
<div class="card-container">
|
||||||
<a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
|
<a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="docs-card"
|
||||||
title="Experience Angular in a live coding environment">
|
title="Experience Angular in a live coding environment">
|
||||||
<section>Experience Angular</section>
|
<section>Experience Angular</section>
|
||||||
<p>A quick look at an Angular application.</p>
|
<p>A quick look at an Angular application.</p>
|
||||||
<p class="card-footer">Angular in Action</p>
|
<p class="card-footer">Angular in Action</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="card">
|
<div class="docs-card">
|
||||||
<section>Get Going with Angular</section>
|
<section>Get Going with Angular</section>
|
||||||
<p>Get going on your own environment with the Quickstart and Tutorial</p>
|
<p>Get going on your own environment with the Quickstart and Tutorial</p>
|
||||||
<p class="card-footer center" >
|
<p class="card-footer center" >
|
||||||
|
|
@ -21,7 +21,7 @@ Angular is a platform that makes it easy to build applications with the web. Ang
|
||||||
<p class="card-footer"><a href="guide/tutorial">Tutorial</a></p>-->
|
<p class="card-footer"><a href="guide/tutorial">Tutorial</a></p>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="guide/architecture" class="card" title="Angular Architecture">
|
<a href="guide/architecture" class="docs-card" title="Angular Architecture">
|
||||||
<section>Fundamentals</section>
|
<section>Fundamentals</section>
|
||||||
<p>Learn Angular application fundamentals, starting with an architecture overview.</p>
|
<p>Learn Angular application fundamentals, starting with an architecture overview.</p>
|
||||||
<p class="card-footer">Architecture</p>
|
<p class="card-footer">Architecture</p>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<h1 class="no-toc">Events</h1>
|
<header class="marketing-banner">
|
||||||
|
<div class="banner-headline no-toc">Events</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<h3>Where we'll be presenting:</h3>
|
|
||||||
<article class="l-content ">
|
<article class="l-content ">
|
||||||
|
<p>Where we'll be presenting:</p>
|
||||||
<table class="is-full-width">
|
<table class="is-full-width">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -11,24 +13,6 @@
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<!-- DEVOXX - UK -->
|
|
||||||
<tr>
|
|
||||||
<th><a href="http://www.devoxx.co.uk/" title="DEVOXX - UK">DEVOXX - UK</a></th>
|
|
||||||
<td>London, United Kingdom</td>
|
|
||||||
<td>May 11, 2017</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Google IO -->
|
|
||||||
<tr>
|
|
||||||
<th><a href="https://events.google.com/io" title="Google IO">Google IO</a></th>
|
|
||||||
<td>Mountain View, California</td>
|
|
||||||
<td>May 17, 2017</td>
|
|
||||||
</tr>
|
|
||||||
<!-- AngleBrackets-->
|
|
||||||
<tr>
|
|
||||||
<th><a href="https://anglebrackets.org" title="AngleBrackets">AngleBrackets</a></th>
|
|
||||||
<td>Orlando, Florida</td>
|
|
||||||
<td>May 21, 2017</td>
|
|
||||||
</tr>
|
|
||||||
<!-- ngJapan -->
|
<!-- ngJapan -->
|
||||||
<tr>
|
<tr>
|
||||||
<th><a href="http://ngjapan.org/" title="ng-Japan">ng-Japan</a></th>
|
<th><a href="http://ngjapan.org/" title="ng-Japan">ng-Japan</a></th>
|
||||||
|
|
|
||||||
|
|
@ -1,88 +1,105 @@
|
||||||
<h1 class="no-toc">Features & Benefit</h1>
|
|
||||||
|
|
||||||
<article class="l-content ">
|
<article class="l-content ">
|
||||||
<div class="flex-center">
|
<div class="flex-center">
|
||||||
<div><h2 class="text-headline">Cross Platform</h2>
|
<div>
|
||||||
<div class="feature-row">
|
<div class="feature-section">
|
||||||
|
<div class="feature-header">
|
||||||
<div class="feature">
|
<div class="text-headline">Cross Platform</div>
|
||||||
<h5>Progressive Web Apps</h5>
|
<img src="../assets/images/icons/feature-icon.svg" height="70px">
|
||||||
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
|
|
||||||
High performance, offline, and zero-step installation.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
|
||||||
<div class="feature">
|
<div class="feature">
|
||||||
<h5>Native</h5>
|
<h5>Progressive Web Apps</h5>
|
||||||
<p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
|
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
|
||||||
</div>
|
High performance, offline, and zero-step installation.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="feature">
|
<div class="feature">
|
||||||
<h5>Desktop</h5>
|
<h5>Native</h5>
|
||||||
<p class="text-body">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.</p>
|
<p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature">
|
||||||
|
<h5>Desktop</h5>
|
||||||
|
<p class="text-body">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.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-headline">Speed and Performance</h2>
|
<div class="feature-section">
|
||||||
<div class="feature-row">
|
<div class="feature-header">
|
||||||
|
<div class="text-headline">Speed and Performance</div>
|
||||||
<div class="feature">
|
<img src="../assets/images/icons/feature-icon.svg" height="70px">
|
||||||
<h5>Code Generation</h5>
|
|
||||||
<p class="text-body">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.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
|
||||||
<div class="feature">
|
<div class="feature">
|
||||||
<h5>Universal</h5>
|
<h5>Code Generation</h5>
|
||||||
<p class="text-body">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.</p>
|
<p class="text-body">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.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature">
|
<div class="feature">
|
||||||
<h5>Code Splitting</h5>
|
<h5>Universal</h5>
|
||||||
<p class="text-body">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.</p>
|
<p class="text-body">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.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="feature">
|
||||||
|
<h5>Code Splitting</h5>
|
||||||
<h2 class="text-headline">Productivity</h2>
|
<p class="text-body">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.</p>
|
||||||
<div class="feature-row">
|
</div>
|
||||||
|
|
||||||
<div class="feature">
|
|
||||||
<h5>Templates</h5>
|
|
||||||
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature">
|
|
||||||
<h5>Angular CLI</h5>
|
|
||||||
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature">
|
|
||||||
<h5>IDEs</h5>
|
|
||||||
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-headline">Full Development Story</h2>
|
<div class="feature-section">
|
||||||
<div class="feature-row">
|
<div class="feature-header">
|
||||||
|
<div class="text-headline">Productivity</div>
|
||||||
<div class="feature">
|
<img src="../assets/images/icons/feature-icon.svg" height="70px">
|
||||||
<h5>Testing</h5>
|
|
||||||
<p class="text-body">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.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
|
||||||
<div class="feature">
|
<div class="feature">
|
||||||
<h5>Animation</h5>
|
<h5>Templates</h5>
|
||||||
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
|
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature">
|
||||||
|
<h5>Angular CLI</h5>
|
||||||
|
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature">
|
||||||
|
<h5>IDEs</h5>
|
||||||
|
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="feature">
|
<div class="feature-section">
|
||||||
<h5>Accessibility</h5>
|
<div class="feature-header">
|
||||||
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
|
<div class="text-headline">Full Development Story</div>
|
||||||
|
<img src="../assets/images/icons/feature-icon.svg" height="70px">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
|
||||||
|
<div class="feature">
|
||||||
|
<h5>Testing</h5>
|
||||||
|
<p class="text-body">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.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature">
|
||||||
|
<h5>Animation</h5>
|
||||||
|
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature">
|
||||||
|
<h5>Accessibility</h5>
|
||||||
|
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cta-bar"><a href="guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
|
<div class="cta-bar"><a href="guide/quickstart" md-button="md-button" class="button button-large hero-cta">Get Started</a></div>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,47 @@
|
||||||
<header class="background-sky l-relative">
|
<!--FULL HEADER BLOCK-->
|
||||||
|
<header class="l-relative">
|
||||||
|
|
||||||
<div class="hero background-superhero-paper is-large">
|
<!--BACKGROUND IMAGE-->
|
||||||
|
<div class="background-sky hero"></div>
|
||||||
|
|
||||||
<img src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
|
<!--INTRO SECTION -->
|
||||||
<h1 class="text-headline no-toc">One framework.<br>Mobile & desktop.</h1>
|
<section id="intro">
|
||||||
<a href="guide/quickstart" md-button="md-button" class="hero-cta mat-raised button button-large button-plain">Get Started</a>
|
|
||||||
|
<!-- LOGO -->
|
||||||
|
<div class="hero-logo">
|
||||||
|
<img src="assets/images/logos/angular/angular.svg"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CONTAINER -->
|
||||||
|
<div class="homepage-container">
|
||||||
|
<!-- container content starts -->
|
||||||
|
|
||||||
|
<div class="hero-headline no-toc">One framework.<br>Mobile & desktop.</div>
|
||||||
|
<button class="button button-large button-plain hero-cta">
|
||||||
|
<a href="guide/quickstart">Get Started</a>
|
||||||
|
</button>
|
||||||
|
</div><!-- CONTAINER END -->
|
||||||
|
</section>
|
||||||
|
|
||||||
<announcement-bar class="announcement-bar">
|
|
||||||
<div class="announcement-bar-slide cleafix is-visible">
|
|
||||||
<img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
|
|
||||||
<p>Angular v4.0 is out! Smaller, faster, no biggie...</p>
|
|
||||||
<a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button mat-button">Learn More</a>
|
|
||||||
</div>
|
|
||||||
</announcement-bar>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<article class="l-content ">
|
<article class="l-content">
|
||||||
|
<div class="home-rows">
|
||||||
|
|
||||||
<div class="home-rows"><!-- Group 1-->
|
<!--Announcement Bar-->
|
||||||
<div layout="row" layout-xs="column" class="home-row">
|
<div class="homepage-container">
|
||||||
|
<div class="announcement-bar">
|
||||||
|
<img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
|
||||||
|
<p>Angular v4.0 is out! Smaller, faster, no biggie...</p>
|
||||||
|
<button class="button">
|
||||||
|
<a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank">Learn More</a><span class="material-icons">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Group 1-->
|
||||||
|
<div layout="row" layout-xs="column" class="home-row homepage-container">
|
||||||
<div class="promo-img-container promo-1">
|
<div class="promo-img-container promo-1">
|
||||||
<div>
|
<div>
|
||||||
<img height="222" src="assets/images/home/responsive-framework.svg" alt="responsive framework">
|
<img height="222" src="assets/images/home/responsive-framework.svg" alt="responsive framework">
|
||||||
|
|
@ -30,17 +50,18 @@
|
||||||
|
|
||||||
<div class="text-container">
|
<div class="text-container">
|
||||||
<div class="text-block promo-1-desc l-pad-top-2">
|
<div class="text-block promo-1-desc l-pad-top-2">
|
||||||
<h2 class="text-headline">Develop Across All Platforms</h2>
|
<div class="text-headline">Develop Across All Platforms</div>
|
||||||
<p class="text-body">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.
|
<p class="text-body">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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- Group 2-->
|
</div>
|
||||||
|
<hr>
|
||||||
|
<!-- Group 2-->
|
||||||
<div layout="row" layout-xs="column" class="home-row">
|
<div layout="row" layout-xs="column" class="home-row">
|
||||||
<div class="text-container">
|
<div class="text-container">
|
||||||
<div class="text-block">
|
<div class="text-block">
|
||||||
<h2 class="text-headline">Speed & Performance</h2>
|
<div class="text-headline">Speed & Performance</div>
|
||||||
<p class="text-body">Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.</p>
|
<p class="text-body">Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.</p>
|
||||||
<p class="text-body">Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
|
<p class="text-body">Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -51,8 +72,10 @@
|
||||||
<img height="222" src="assets/images/home/speed-performance.svg" alt="speed and performance">
|
<img height="222" src="assets/images/home/speed-performance.svg" alt="speed and performance">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- Group 3-->
|
</div>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<!-- Group 3-->
|
||||||
<div layout="row" layout-xs="column" class="home-row">
|
<div layout="row" layout-xs="column" class="home-row">
|
||||||
<div class="promo-img-container promo-3">
|
<div class="promo-img-container promo-3">
|
||||||
<div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
|
<div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
|
||||||
|
|
@ -60,18 +83,21 @@
|
||||||
|
|
||||||
<div class="text-container">
|
<div class="text-container">
|
||||||
<div class="text-block promo-3-desc">
|
<div class="text-block promo-3-desc">
|
||||||
<h2 class="text-headline">Incredible Tooling</h2>
|
<div class="text-headline">Incredible Tooling</div>
|
||||||
<p class="text-body">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.
|
<p class="text-body">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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- Group 4-->
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<!-- Group 4-->
|
||||||
<div layout="row" layout-xs="column" class="home-row">
|
<div layout="row" layout-xs="column" class="home-row">
|
||||||
|
|
||||||
<div class="text-container">
|
<div class="text-container">
|
||||||
<div class="text-block l-pad-top-2">
|
<div class="text-block l-pad-top-2">
|
||||||
<h2 class="text-headline">Loved by Millions</h2>
|
<div class="text-headline">Loved by Millions</div>
|
||||||
<p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
|
<p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -83,9 +109,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cta-bar">
|
<!-- CTA CARDS -->
|
||||||
<a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a>
|
<div layout="row" layout-xs="column" class="home-row">
|
||||||
</div>
|
|
||||||
|
<a href="tutorial">
|
||||||
|
<div class="card">
|
||||||
|
<img src="../assets/images/icons/code-icon.svg" height="70px">
|
||||||
|
<div class="card-text-container">
|
||||||
|
<div class="text-headline">Start Tutorial</div>
|
||||||
|
<p>Start building your Angular application in TypeScript.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- end of home rows -->
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,7 @@
|
||||||
<h1 class="no-toc">Explore Angular Resources</h1>
|
<header class="marketing-banner">
|
||||||
<aio-resource-list></aio-resource-list>
|
<div class="banner-headline no-toc">Explore Angular Resources</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<aio-resource-list></aio-resource-list>
|
||||||
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ describe('site App', function() {
|
||||||
|
|
||||||
// navigate to a different page
|
// navigate to a different page
|
||||||
page.getLink('features').click();
|
page.getLink('features').click();
|
||||||
expect(page.getDocViewerText()).toMatch(/Features/i);
|
expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
|
||||||
|
|
||||||
// Show the menu
|
// Show the menu
|
||||||
page.docsMenuLink.click();
|
page.docsMenuLink.click();
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<md-toolbar color="primary" class="app-toolbar">
|
<md-toolbar color="primary" class="app-toolbar">
|
||||||
<button class="hamburger" md-button
|
<button class="hamburger" md-button
|
||||||
(click)="sidenav.toggle()" title="Docs menu">
|
(click)="sidenav.toggle()" title="Docs menu">
|
||||||
<md-icon svgIcon="menu"></md-icon>
|
<md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
|
||||||
</button>
|
</button>
|
||||||
<a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
|
<a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
|
||||||
<aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
|
<aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,9 @@ import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notificat
|
||||||
import { TocComponent } from 'app/embedded/toc/toc.component';
|
import { TocComponent } from 'app/embedded/toc/toc.component';
|
||||||
import { MdSidenav } from '@angular/material';
|
import { MdSidenav } from '@angular/material';
|
||||||
|
|
||||||
|
const sideBySideBreakPoint = 992;
|
||||||
|
const hideToCBreakPoint = 800;
|
||||||
|
|
||||||
describe('AppComponent', () => {
|
describe('AppComponent', () => {
|
||||||
let component: AppComponent;
|
let component: AppComponent;
|
||||||
let fixture: ComponentFixture<AppComponent>;
|
let fixture: ComponentFixture<AppComponent>;
|
||||||
|
|
@ -42,7 +45,7 @@ describe('AppComponent', () => {
|
||||||
component = fixture.componentInstance;
|
component = fixture.componentInstance;
|
||||||
|
|
||||||
fixture.detectChanges();
|
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;
|
docViewer = fixture.debugElement.query(By.css('aio-doc-viewer')).nativeElement;
|
||||||
hamburger = fixture.debugElement.query(By.css('.hamburger')).nativeElement;
|
hamburger = fixture.debugElement.query(By.css('.hamburger')).nativeElement;
|
||||||
|
|
@ -70,16 +73,16 @@ describe('AppComponent', () => {
|
||||||
|
|
||||||
describe('onResize', () => {
|
describe('onResize', () => {
|
||||||
it('should update `isSideBySide` accordingly', () => {
|
it('should update `isSideBySide` accordingly', () => {
|
||||||
component.onResize(1033);
|
component.onResize(sideBySideBreakPoint + 1);
|
||||||
expect(component.isSideBySide).toBe(true);
|
expect(component.isSideBySide).toBe(true);
|
||||||
component.onResize(500);
|
component.onResize(sideBySideBreakPoint - 1);
|
||||||
expect(component.isSideBySide).toBe(false);
|
expect(component.isSideBySide).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should update `showFloatingToc` accordingly', () => {
|
it('should update `showFloatingToc` accordingly', () => {
|
||||||
component.onResize(801);
|
component.onResize(hideToCBreakPoint + 1);
|
||||||
expect(component.showFloatingToc).toBe(true);
|
expect(component.showFloatingToc).toBe(true);
|
||||||
component.onResize(800);
|
component.onResize(hideToCBreakPoint - 1);
|
||||||
expect(component.showFloatingToc).toBe(false);
|
expect(component.showFloatingToc).toBe(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -96,7 +99,7 @@ describe('AppComponent', () => {
|
||||||
describe('SideNav when side-by-side (wide)', () => {
|
describe('SideNav when side-by-side (wide)', () => {
|
||||||
|
|
||||||
beforeEach(() => {
|
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)', () => {
|
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)', () => {
|
describe('SideNav when NOT side-by-side (narrow)', () => {
|
||||||
|
|
||||||
beforeEach(() => {
|
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)', () => {
|
it('should be closed when nav to a guide page (guide/pipes)', () => {
|
||||||
|
|
@ -219,7 +222,7 @@ describe('AppComponent', () => {
|
||||||
|
|
||||||
describe('SideNav version selector', () => {
|
describe('SideNav version selector', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
component.onResize(1033); // side-by-side
|
component.onResize(sideBySideBreakPoint + 1); // side-by-side
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should pick first (current) version by default', () => {
|
it('should pick first (current) version by default', () => {
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ export class AppComponent implements OnInit {
|
||||||
private isSideNavDoc = false;
|
private isSideNavDoc = false;
|
||||||
private previousNavView: string;
|
private previousNavView: string;
|
||||||
|
|
||||||
private sideBySideWidth = 1032;
|
private sideBySideWidth = 992;
|
||||||
sideNavNodes: NavigationNode[];
|
sideNavNodes: NavigationNode[];
|
||||||
topMenuNodes: NavigationNode[];
|
topMenuNodes: NavigationNode[];
|
||||||
topMenuNarrowNodes: NavigationNode[];
|
topMenuNarrowNodes: NavigationNode[];
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><style>.st0{fill:#C3002F;} .st1{fill:#DD0031;} .st2{fill:#FFFFFF;}</style><path class="st0" d="M140 75c0-35.9-29.1-65-65-65-11.2 0-21.8 2.9-31 7.9l88.2 88.2c4.9-9.3 7.8-19.9 7.8-31.1z"/><path class="st1" d="M44 17.9C23.7 28.9 10 50.3 10 75c0 35.9 29.1 65 65 65 24.7 0 46.1-13.7 57.1-34L44 17.9z"/><path class="st2" d="M77.2 90.2H34c-5 0-9.1-4.1-9.1-9.1V59.2c0-5 4.1-9.1 9.1-9.1h43.2c5 0 9.1 4.1 9.1 9.1v21.9c0 5-4.1 9.1-9.1 9.1zM34 55.2c-2.2 0-4.1 1.8-4.1 4.1v21.9c0 2.2 1.8 4.1 4.1 4.1h43.2c2.2 0 4.1-1.8 4.1-4.1v-22c0-2.2-1.8-4.1-4.1-4.1H34z"/><path class="st2" d="M55.6 99.9c-1.4 0-2.5-1.1-2.5-2.5v-9.7c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v9.7c0 1.3-1.1 2.5-2.5 2.5z"/><path class="st2" d="M69.9 99.9H41.3c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h28.5c1.4 0 2.5 1.1 2.5 2.5.1 1.3-1 2.5-2.4 2.5zM53.5 76.2l-3-5.1c-.4-.6-.2-1.4.5-1.7.6-.4 1.4-.2 1.7.5l1.2 2 4.9-5.8c.4-.5 1.2-.6 1.8-.2.5.4.6 1.2.2 1.8l-7.3 8.5zm66.1 18.9h-15.5c-3 0-5.5-2.5-5.5-5.5V60.5c0-3 2.5-5.5 5.5-5.5h15.5c3 0 5.5 2.5 5.5 5.5v29.1c0 3-2.5 5.5-5.5 5.5zm-15.5-35.9c-.7 0-1.2.6-1.2 1.2v29.1c0 .7.6 1.2 1.2 1.2h15.5c.7 0 1.2-.6 1.2-1.2v-29c0-.7-.6-1.2-1.2-1.2h-15.5z"/><path class="st2" d="M109.7 80.7l-3-5.1c-.4-.6-.2-1.4.5-1.7.6-.4 1.4-.2 1.7.5l1.2 2 4.9-5.8c.4-.5 1.2-.6 1.8-.2.5.4.6 1.2.2 1.8l-7.3 8.5zm13.3 7.8h-21.2c-.4 0-.8-.3-.8-.8s.3-.8.8-.8H123c.4 0 .8.3.8.8s-.4.8-.8.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,168 +1,161 @@
|
||||||
// @mixin docs-site-typography() {
|
body {
|
||||||
// .docs-component-viewer-tabbed-content .docs-component-view-text-content,
|
font-family: $main-font;
|
||||||
// .docs-guide-content {
|
margin: 0;
|
||||||
|
color: $darkgray;
|
||||||
|
font-size: 14px;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
h1 {
|
||||||
font-family: $main-font;
|
display:inline-block;
|
||||||
margin: 0;
|
font-size: 24px;
|
||||||
color: $darkgray;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
margin: 8px 0px;
|
||||||
-webkit-font-smoothing: antialiased;
|
}
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1:after {
|
||||||
display:inline-block;
|
content: "";
|
||||||
font-size: 24px;
|
display: block;
|
||||||
font-weight: 500;
|
height: 1px;
|
||||||
margin: 8px 0px;
|
width: 40%;
|
||||||
}
|
margin: 24px 0px 10px;
|
||||||
|
background: $lightgray;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
h1:after {
|
h2 {
|
||||||
content: "";
|
font-size: 22px;
|
||||||
display: block;
|
font-weight: 500;
|
||||||
height: 1px;
|
margin: 32px 0px 24px;
|
||||||
width: 40%;
|
clear: both;
|
||||||
margin: 24px 0px 10px;
|
}
|
||||||
background: $lightgray;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
h3 {
|
||||||
font-size: 22px;
|
font-size: 20px;
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
margin: 32px 0px 24px;
|
margin: 24px 0px;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h4 {
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin: 24px 0px;
|
margin: 8px 0px;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h5 {
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
margin: 8px 0px;
|
margin: 8px 0px;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h6 {
|
||||||
font-size: 16px;
|
color: $mediumgray;
|
||||||
font-weight: 500;
|
font-size: 16px;
|
||||||
margin: 8px 0px;
|
font-weight: 500;
|
||||||
clear: both;
|
margin: 8px 0px;
|
||||||
}
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
h6 {
|
h1 {
|
||||||
color: $mediumgray;
|
@media screen and (max-width: 600px) {
|
||||||
font-size: 16px;
|
margin: 0;
|
||||||
font-weight: 500;
|
}
|
||||||
margin: 8px 0px;
|
}
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1:after, h2, h3, h4, h5, h6 {
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
margin: 0;
|
margin: 8px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1:after, h2, h3, h4, h5, h6 {
|
.mat-tab-body-wrapper h2 {
|
||||||
@media screen and (max-width: 600px) {
|
margin-top: 0;
|
||||||
margin: 8px 0;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-tab-body-wrapper h2 {
|
p, ol, ul, ol, li, input, a {
|
||||||
margin-top: 0;
|
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 {
|
ol li {
|
||||||
font-size: 14px;
|
margin: 14px 0px;
|
||||||
line-height: 24px;
|
}
|
||||||
letter-spacing: 0.30px;
|
|
||||||
font-weight: 400;
|
|
||||||
& > em {
|
|
||||||
letter-spacing: 0.30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol li {
|
a {
|
||||||
margin: 14px 0px;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.mat-toolbar-row a {
|
||||||
text-decoration: none;
|
font-size: 16px;
|
||||||
}
|
font-weight: 400;
|
||||||
|
color: white;
|
||||||
|
font-family: $main-font;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 21px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.mat-toolbar-row a {
|
strong {
|
||||||
font-size: 16px;
|
font-weight: 500;
|
||||||
font-weight: 300;
|
}
|
||||||
color: white;
|
|
||||||
font-family: $main-font;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 21px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
table {
|
||||||
font-weight: 500;
|
border-collapse: collapse;
|
||||||
}
|
border-radius: 2px;
|
||||||
|
border-spacing: 0;
|
||||||
|
margin: 0 0 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
table {
|
table tbody th {
|
||||||
border-collapse: collapse;
|
max-width: 100px;
|
||||||
border-radius: 2px;
|
padding: 13px 32px;
|
||||||
border-spacing: 0;
|
text-align: left;
|
||||||
margin: 0 0 32px 0;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
table tbody th {
|
td {
|
||||||
max-width: 100px;
|
font-weight: 400;
|
||||||
padding: 13px 32px;
|
padding: 8px 30px;
|
||||||
text-align: left;
|
letter-spacing: 0.30px;
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
p {
|
||||||
font-weight: 400;
|
margin: 0;
|
||||||
padding: 8px 30px;
|
}
|
||||||
letter-spacing: 0.30px;
|
}
|
||||||
|
|
||||||
p {
|
th {
|
||||||
margin: 0;
|
font-size: 16px;
|
||||||
}
|
font-weight: 500;
|
||||||
}
|
padding: 13px 32px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
th {
|
p > code, li > code, table code {
|
||||||
font-size: 16px;
|
font-family: $code-font;
|
||||||
font-weight: 500;
|
font-size: 85%;
|
||||||
padding: 13px 32px;
|
color: $darkgray;
|
||||||
text-align: left;
|
letter-spacing: 0;
|
||||||
}
|
line-height: 1;
|
||||||
|
padding: 2px 6px;
|
||||||
|
background-color: $backgroundgray;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
p > code, li > code, table code {
|
code {
|
||||||
font-family: $code-font;
|
font-family: $code-font;
|
||||||
font-size: 85%;
|
font-size: 90%;
|
||||||
color: $darkgray;
|
}
|
||||||
letter-spacing: 0;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 2px 6px;
|
|
||||||
background-color: $backgroundgray;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
.sidenav-content a {
|
||||||
font-family: $code-font;
|
color: $blue;
|
||||||
font-size: 90%;
|
&:hover {
|
||||||
}
|
color: $mediumgray;
|
||||||
|
}
|
||||||
.sidenav-content a {
|
}
|
||||||
color: $blue;
|
|
||||||
&:hover {
|
|
||||||
color: $mediumgray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
@ -1,16 +1,13 @@
|
||||||
.progress-bar-container {
|
aio-shell.page-docs {
|
||||||
height: 2px;
|
.sidenav-content {
|
||||||
overflow: hidden;
|
// padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
|
||||||
position: fixed;
|
margin: auto;
|
||||||
top: 64px;
|
}
|
||||||
width: 100vw;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav-content {
|
.sidenav-content {
|
||||||
padding: 1rem 3rem 3rem;
|
|
||||||
margin: auto;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
padding: 6rem 3rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill-remaining-space {
|
.fill-remaining-space {
|
||||||
|
|
@ -22,14 +19,9 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-container {
|
|
||||||
top: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-content {
|
.sidenav-content {
|
||||||
min-height: 450px;
|
min-height: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav-container {
|
.sidenav-container {
|
||||||
|
|
|
||||||
|
|
@ -48,4 +48,8 @@ l-relative {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: -9999px !important;
|
top: -9999px !important;
|
||||||
left: -9999px !important;
|
left: -9999px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
@ -2,12 +2,12 @@
|
||||||
LAYOUT STYLES
|
LAYOUT STYLES
|
||||||
============================== */
|
============================== */
|
||||||
|
|
||||||
@import 'sidenav';
|
@import 'api-page';
|
||||||
@import 'content-layout';
|
@import 'content-layout';
|
||||||
@import 'top-menu';
|
|
||||||
@import 'marketing-layout';
|
|
||||||
@import 'footer';
|
@import 'footer';
|
||||||
@import 'layout-global';
|
@import 'layout-global';
|
||||||
|
@import 'marketing-layout';
|
||||||
@import 'not-found';
|
@import 'not-found';
|
||||||
@import 'api-page';
|
@import 'sidenav';
|
||||||
@import 'table-of-contents';
|
@import 'table-of-contents';
|
||||||
|
@import 'top-menu';
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,330 @@
|
||||||
#home {
|
.hero {
|
||||||
padding: 0rem 0rem 3rem;
|
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 {
|
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]{
|
div[layout=row]{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
@ -29,81 +351,50 @@ div[layout=row]{
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-rows {
|
.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%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-superhero-paper {
|
.background-superhero-paper {
|
||||||
background: url('assets/images/backgrounds/super-hero-large.png') no-repeat bottom center , $bluegradient;
|
|
||||||
background-blend-mode: multiply;
|
background-blend-mode: multiply;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-sky {
|
|
||||||
background-color: $blue;
|
|
||||||
background: $bluegradient;
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
header.bckground-sky.l-relative {
|
header.bckground-sky.l-relative {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-rows {
|
|
||||||
// NOTE (ericjim): if a banner is placed on the homescreen, add this margin.
|
|
||||||
margin-top: 112px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-row {
|
.home-row {
|
||||||
max-width: 920px;
|
max-width: 920px;
|
||||||
margin: 0 0 60px 0;
|
margin: 32px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
|
||||||
|
|
||||||
h3.text-headline {
|
.text-headline, .promo-img-container {
|
||||||
font-size: 28px;
|
text-align: center;
|
||||||
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-block {
|
.text-block {
|
||||||
padding-right: 15%;
|
padding-right: 15%;
|
||||||
|
|
||||||
@media(max-width: 599px) {
|
@media(max-width: 600px) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 599px) {
|
@media(max-width: 600px) {
|
||||||
.promo-image-container, .text-container {
|
.promo-img-container, .text-container {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -134,6 +425,29 @@ header.bckground-sky.l-relative {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-uppercase {
|
.marketing-banner {
|
||||||
text-transform: uppercase;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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 {
|
md-sidenav.mat-sidenav.sidenav {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -28,14 +43,10 @@ md-sidenav-container.sidenav-container {
|
||||||
max-width: 82%;
|
max-width: 82%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transform: none;
|
transform: none;
|
||||||
padding-top: 64px;
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
@media (max-width: 600px) {
|
|
||||||
padding-top: 56px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
md-sidenav-container div.mat-sidenav-content {
|
md-sidenav-container div.mat-sidenav-content {
|
||||||
|
|
@ -60,13 +71,11 @@ md-sidenav-container div.mat-sidenav-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $lightgray;
|
text-shadow: 0 0 5px #ffffff;
|
||||||
}
|
color: $blue;
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: $darkgray;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//icons _within_ nav
|
//icons _within_ nav
|
||||||
|
|
@ -80,10 +89,6 @@ md-sidenav-container div.mat-sidenav-content {
|
||||||
|
|
||||||
.vertical-menu-item.selected {
|
.vertical-menu-item.selected {
|
||||||
color: $blue;
|
color: $blue;
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: $blue-900;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button.vertical-menu-item {
|
button.vertical-menu-item {
|
||||||
|
|
@ -122,12 +127,6 @@ button.vertical-menu-item {
|
||||||
transition-timing-function: ease-out;
|
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 {
|
.level-1 {
|
||||||
font-family: $main-font;
|
font-family: $main-font;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -141,7 +140,7 @@ a.selected.level-1,
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $mediumgray;
|
color: $mediumgray;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding-left: 20px;
|
padding-left: 24px;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -149,6 +148,7 @@ a.selected.level-1,
|
||||||
font-family: $main-font;
|
font-family: $main-font;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $mediumgray;
|
color: $mediumgray;
|
||||||
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
|
.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-menu.top-menu {
|
||||||
aio-nav-item:first-child .vertical-menu-item {
|
padding: 24px 0 0;
|
||||||
padding-top: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
aio-nav-item:last-child div {
|
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
|
// Angular Version Selector
|
||||||
md-sidenav .doc-version {
|
md-sidenav .doc-version {
|
||||||
padding: 10px;
|
padding: 8px;
|
||||||
border-top: 1px solid $lightgray;
|
border-top: 1px solid $lightgray;
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
.fill-remaining-space {
|
.fill-remaining-space {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
@ -52,13 +51,12 @@ aio-top-menu {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
padding-bottom: 2px;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
line-height: 64px;
|
|
||||||
height: 64px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $accentblue;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&: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 {
|
md-toolbar.mat-toolbar {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
top: 0;
|
perspective: 2000px;
|
||||||
right: 0;
|
top: 0px;
|
||||||
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
|
|
||||||
padding: 0 16px 0 0;
|
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 {
|
.search-container {
|
||||||
|
|
@ -91,13 +104,20 @@ md-toolbar.mat-toolbar {
|
||||||
aio-search-box input {
|
aio-search-box input {
|
||||||
color: $darkgray;
|
color: $darkgray;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 100px;
|
||||||
background-color: $offwhite;
|
background-color: $offwhite;
|
||||||
padding: 5px 10px;
|
padding: 5px 16px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
width: 200px;
|
width: 150px;
|
||||||
height: 40%;
|
height: 40%;
|
||||||
|
|
||||||
|
@include bp(big) {
|
||||||
|
transition: width 0.4s ease-in-out;
|
||||||
|
&:focus {
|
||||||
|
width: 50%;
|
||||||
|
max-width: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
width: 180px;
|
width: 180px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -103,4 +103,8 @@ a.filter-button {
|
||||||
background-color: $blue;
|
background-color: $blue;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.docs-card {
|
||||||
@include card(194px, 30%);
|
@include card(194px, 30%);
|
||||||
max-width: 340px;
|
max-width: 340px;
|
||||||
min-width: 262px;
|
min-width: 262px;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -2,28 +2,27 @@
|
||||||
MODULE STYLES
|
MODULE STYLES
|
||||||
============================== */
|
============================== */
|
||||||
|
|
||||||
@import 'hamburger';
|
@import 'alert';
|
||||||
@import 'features';
|
@import 'api-info-bar';
|
||||||
|
@import 'api-list';
|
||||||
|
@import 'banner';
|
||||||
|
@import 'buttons';
|
||||||
|
@import 'callout';
|
||||||
|
@import 'card';
|
||||||
@import 'code';
|
@import 'code';
|
||||||
@import 'contributor';
|
@import 'contributor';
|
||||||
@import 'alert';
|
@import 'edit-page-cta';
|
||||||
|
@import 'features';
|
||||||
@import 'filetree';
|
@import 'filetree';
|
||||||
|
@import 'hamburger';
|
||||||
|
@import 'heading-anchors';
|
||||||
|
@import 'hr';
|
||||||
@import 'images';
|
@import 'images';
|
||||||
|
@import 'progress-bar';
|
||||||
@import 'table';
|
@import 'table';
|
||||||
@import 'presskit';
|
@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 'resources';
|
||||||
@import 'edit-page-cta';
|
@import 'scrollbar';
|
||||||
@import 'heading-anchors';
|
@import 'search-results';
|
||||||
@import 'api-info-bar';
|
@import 'subsection';
|
||||||
@import 'toc';
|
@import 'toc';
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -55,10 +55,6 @@ table {
|
||||||
td {
|
td {
|
||||||
letter-spacing: 0.30px;
|
letter-spacing: 0.30px;
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr td:first-child {
|
tr td:first-child {
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
background-color: $lightgray;
|
background-color: $lightgray;
|
||||||
|
|
@ -72,10 +68,6 @@ table {
|
||||||
border-right: 1px solid $lightgray;
|
border-right: 1px solid $lightgray;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:last-child td {
|
tr:last-child td {
|
||||||
|
|
@ -84,7 +76,6 @@ table {
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
border-bottom: 1px solid $lightgray;
|
border-bottom: 1px solid $lightgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,11 @@
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toc-content {
|
||||||
|
border-left: 1px solid $lightgray;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
aio-toc {
|
aio-toc {
|
||||||
&.embedded {
|
&.embedded {
|
||||||
@media (min-width: 801px) {
|
@media (min-width: 801px) {
|
||||||
|
|
@ -17,14 +22,23 @@ aio-toc {
|
||||||
}
|
}
|
||||||
|
|
||||||
.toc-inner {
|
.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;
|
font-size: 13px;
|
||||||
overflow-y: visible;
|
overflow-y: visible;
|
||||||
padding: 4px 0 0 10px;
|
padding: 4px 0 0 10px;
|
||||||
|
|
||||||
.toc-heading p {
|
.toc-heading {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0;
|
margin: 0 0 16px 8px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -107,7 +121,7 @@ aio-toc {
|
||||||
ul.toc-list {
|
ul.toc-list {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0 8px;
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -119,42 +133,77 @@ aio-toc {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
padding: 0;
|
// padding: 0 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.3s ease-in-out;
|
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 {
|
a {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
color: lighten($darkgray, 10);
|
color: lighten($darkgray, 10);
|
||||||
display:table-cell;
|
display:table-cell;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
font-size: 12px;
|
||||||
|
display: table-cell;
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $accentblue;
|
color: $accentblue;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
&.h2 {
|
||||||
a {
|
&:before {
|
||||||
color: $accentblue;
|
content: '';
|
||||||
|
left: -1px;
|
||||||
|
top: 10px;
|
||||||
|
background: red;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 1px;
|
||||||
|
height: calc(100% + 11px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.toc-list li.h3 {
|
// ul.toc-list li.h3 {
|
||||||
margin-left: 15px;
|
// 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.h1:after {
|
||||||
|
// content: "";
|
||||||
|
// display: block;
|
||||||
|
// height: 1px;
|
||||||
|
// width: 40%;
|
||||||
|
// margin: 24px 0px 10px;
|
||||||
|
// background: #DBDBDB;
|
||||||
|
// clear: both;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
aio-toc.embedded > div.collapsed li.secondary {
|
aio-toc.embedded > div.collapsed li.secondary {
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,6 @@
|
||||||
border: 0.5px solid $lightgray;
|
border: 0.5px solid $lightgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@mixin card($height, $width) {
|
@mixin card($height, $width) {
|
||||||
height: $height;
|
height: $height;
|
||||||
width: $width;
|
width: $width;
|
||||||
|
|
|
||||||
|
|
@ -12,22 +12,3 @@
|
||||||
@import './0-base/base-dir';
|
@import './0-base/base-dir';
|
||||||
@import './1-layouts/layouts-dir';
|
@import './1-layouts/layouts-dir';
|
||||||
@import './2-modules/modules-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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
// Alternatively, you can import and @include the theme mixins for each component
|
||||||
// that you are using.
|
// that you are using.
|
||||||
@include angular-material-theme($ng-io-theme);
|
@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;
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue