diff --git a/package.json b/package.json index 83806a42b3..96040cee6b 100644 --- a/package.json +++ b/package.json @@ -77,4 +77,4 @@ "jstransformer-marked": "^1.0.1" }, "homepage": "http://angular.io/" -} +} \ No newline at end of file diff --git a/public/_data.json b/public/_data.json index 1232f0a1de..29ba83dab4 100644 --- a/public/_data.json +++ b/public/_data.json @@ -2,7 +2,7 @@ "index": { "hero": "home", "title": "One framework.", - "subtitle": "Mobile and desktop." + "subtitle": "Mobile & desktop." }, "features": { diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index 7f77d739f3..659591edb8 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -8,7 +8,7 @@ else - var styleguide = "/docs/ts/latest/styleguide.html" .main-footer - nav.background-blue-grey-900.grid-fluid + nav.background-midnight.grid-fluid .c3.main-footer-branding .logo-inverse-large @@ -51,7 +51,7 @@ else ul.text-body li 中文版 - footer(class="background-steel") + footer(class="background-midnight") small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. - a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button) + a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow") span.icon-favorite diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index d1b8291a76..02e548d3c7 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -1,13 +1,17 @@ -header(class="background-sky") - .hero.background-superhero-paper.is-large - h1.text-headline.hero-logo #{title}
#{subtitle} +header(class="background-sky l-relative") - .hero-cta - a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started + .hero.background-superhero-paper.is-large + img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg') + h1.text-headline #{title}
#{subtitle} + a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started - .banner.banner-floaty - .banner-ng-annoucement - div(class="banner-text" align="center") - p Join us for ng-europe in Paris, France this October! - div(class="banner-button") + .announcement-bar.shadow-2.clearfix + img(src="/resources/images/logos/ng-europe/ng-europe-logo.png") + p Join us for ng-europe in Paris, France this October! a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now + + //- ANGULAR FINAL RELEASE ANNOUCEMENT + //- .announcement-bar.shadow-2.clearfix + //- img(src="/resources/images/logos/angular2/angular.svg") + //- p Angular 2.0 Final Release Now Live! + //- a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Learn More \ No newline at end of file diff --git a/public/_includes/_hero.jade b/public/_includes/_hero.jade index 1a4c88e05d..efeb8b0480 100644 --- a/public/_includes/_hero.jade +++ b/public/_includes/_hero.jade @@ -13,30 +13,27 @@ if current.path[4] && current.path[3] == 'api' - var textFormat = 'is-standard-case' -header(class="hero background-sky", style=fixHeroCss ? "height:auto" : "") - div(class="inner-header") - h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle} - if useBadges - span(class="badges") - if docType - span(class="status-badge"). - #{renamer(capitalize(docType))} - if stability - span(layout="row" class="status-badge") - // badge circle is filled based on stability by matching a css selector in _hero.scss - span(class="status-circle status-#{stability}") - span Stability: #{capitalize(stability)} - if security - span(class="status-badge security-risk-badge"). - Security Risk +header.hero.background-sky + h1(class="hero-title #{textFormat}") #{headerTitle} + + if useBadges + if stability + span(class="badge is-#{stability}"). + #{capitalize(stability)} + if security + span(class="badge is-deprecated"). + Security Risk + + //CLEAR FLOAT ELEMENTS + .clear if subtitle - h2.hero-subtitle.text-subhead #{subtitle} + h2.hero-subtitle #{subtitle} + + else if docType + h2.hero-subtitle #{renamer(capitalize(docType))} + + +if current.path[3] == 'api' && current.path[1] == 'dart' + block breadcrumbs - else if current.path[3] == 'api' && current.path[1] == 'dart' - block breadcrumbs - //- Show cross-language menu for top-level API page (but not entry pages) - if ! public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]] - != partial("_version-dropdown") - else if current.path[0] == "docs" - != partial("_version-dropdown") diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade index 272a54d702..9b6942dd7f 100644 --- a/public/_includes/_main-nav.jade +++ b/public/_includes/_main-nav.jade @@ -1,15 +1,14 @@ - var language = current.path[1] || 'ts' - if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; } -md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-offset-element) - nav - h1 Angular by Google +nav.main-nav.l-pinned-top.l-layer-5 + h1 Angular by Google - button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu + button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu - ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''") - li.l-left Features - li.l-left Docs - li.l-left Events - li.l-left News - li.l-right Get Started + ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''") + li.l-left Features + li.l-left Docs + li.l-left Events + li.l-left News + li.l-right Get Started diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade index c667f8d925..0d10a5b301 100644 --- a/public/_includes/_util-fns.jade +++ b/public/_includes/_util-fns.jade @@ -83,14 +83,14 @@ mixin makeExample(_filePath, region, _title, stylePatterns) - var format = attributes.format || defaultFormat; - if (attributes.format === '.') format = ''; - var avoid = !!attributes.avoid; + - var avoidClass = avoid ? 'is-anti-pattern' : ''; - if (title) - if (avoid) - .example-title.avoid AVOID: #{title} - else - .example-title #{title} - code-example(language="#{language}" format="#{format}") - != styleString(frag, stylePatterns) + div(class="code-example #{avoidClass}") + if (title) + header + h4 #{title} + code-example(language="#{language}" format="#{format}") + != styleString(frag, stylePatterns) //- Like makeExample, but: (1) doesn't show line numbers. (2) If region //- is omitted and title is 'foo (r)' then region is taken as 'r'. @@ -142,17 +142,17 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns) - var json = unescapeHtml(frag); - var jsonExtract = extractJson(json, jsonConfig); - var avoid = !!attributes.avoid; + - var avoidClass = avoid ? 'is-anti-pattern' : ''; - if (title) - if (avoid) - .example-title.avoid #{title} - else - .example-title #{title} - code-example(language="#{language}" format="#{format}") - if (jsonExtract == 'ERROR') - err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}" - else - != styleString(jsonExtract, stylePatterns) + div(class="code-example #{avoidClass}") + if (title) + header + h4 #{title} + code-example(language="#{language}" format="#{format}") + if (jsonExtract == 'ERROR') + err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}" + else + != styleString(jsonExtract, stylePatterns) if !jade2ng //- Open (and close) an explanation
. See QuickStart diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade index 5bbb3ce468..5d61619ae7 100644 --- a/public/_includes/_version-dropdown.jade +++ b/public/_includes/_version-dropdown.jade @@ -35,11 +35,10 @@ else if current.path[3] //- VERSION TREE CREATOR MIXIN mixin tree(directory, urlPrefix, name, latest) - ul - for val, semvar in directory - if semvar !== '.git' && semvar !== '_data' - - var libVersion = (semvar == "latest") ? latest : semvar.replace(/\_+/gm, ".") - li #{name} #{libVersion} + for val, semvar in directory + if semvar !== '.git' && semvar !== '_data' + - var libVersion = (semvar == "latest") ? latest : semvar.replace(/\_+/gm, ".") + li #{name} #{libVersion} //- BUTTON TITLE GENERATION @@ -69,7 +68,7 @@ nav.dropdown div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu") - div(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''") + ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''") mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript") mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript") //- Disable cross-language link for API entry pages (but keep for top API search page): diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade index d1b8bbb5f7..0f3fedb90f 100644 --- a/public/docs/_includes/_side-nav.jade +++ b/public/docs/_includes/_side-nav.jade @@ -40,53 +40,71 @@ - var reference = sections('', function(item) { return item.reference; }); - var anyItemSelected = function(items) { - var selectedCount = items.filter(function(item) { return !!item.class; }).length; -- return selectedCount > 0 ? 'is-nav-title-selected' : ''; +- return selectedCount > 0 ? 'is-selected' : ''; - } - var isQuickstartSelected = function() { - var splitted = cur.split('/'); - var bit = splitted[splitted.length - 1].replace('.html', ''); -- return bit === 'quickstart' ? 'is-nav-title-selected' : ''; +- return bit === 'quickstart' ? 'is-selected' : ''; -} - var isApiReferenceSelected = function() { - var splitted = cur.split('/'); - var bit = splitted[splitted.length - 2]; -- return bit === 'api' ? 'is-nav-title-selected' : ''; +- return bit === 'api' ? 'is-selected' : ''; -} - var isCollapsed = function(titleStyle) { -- return titleStyle === 'is-nav-title-selected' ? '' : 'is-hidden'; +- return titleStyle === 'is-selected' ? '' : 'is-hidden'; - } -nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav +- var language = current.path[1] || 'ts' +- if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; } + + +nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''") // SEARCH BAR - header.side-nav-search.st-input-wrapper + header.sidenav-search.st-input-wrapper form.st-input-inner label(for="search-io" class="is-hidden") Search Docs input(type="search" id="search-io" placeholder="SEARCH DOCS...") button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs - div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''") - .nav-blocks + ul(class="sidenav-links") + li.sidenav-section.no-border + a(class="nav-title" href="/docs/#{current.path[1]}/latest/") Docs Home + + // CORE DOCUMENTATION + li.sidenav-section-divider + h3 Core Documentation + + li.sidenav-section a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart - .nav-blocks - a(class="nav-title #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial - img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") - .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}") - ul - each item, index in tutorial - li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle} - .nav-blocks - a(class="nav-title #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Basics + li.sidenav-section + a(class="nav-title is-parent #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Guide img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(basics))}") ul each item, index in basics li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle} + li.sidenav-section.no-border + a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference - .nav-blocks - a(class="nav-title #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Developer Guide + // ADVANCED DOCUMENATION + li.sidenav-section-divider + h3 Additional Documentation + + li.sidenav-section + a(class="nav-title is-parent #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial + img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") + .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}") + ul + each item, index in tutorial + li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle} + + li.sidenav-section + a(class="nav-title is-parent #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Advanced Documentation img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(guide))}") @@ -94,8 +112,8 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav each item in guide li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} - .nav-blocks - a(class="nav-title #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook + li.sidenav-section + a(class="nav-title is-parent #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(cookbook))}") @@ -103,13 +121,17 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav each item in cookbook li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} - .nav-blocks - a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference + + + + if current.path[0] == "docs" + != partial("../../_includes/_version-dropdown") + script. // Could put in appCtrl but only needed here and clear here (function scrollToSelectedLink() { - var sideNav = document.getElementsByClassName('side-nav')[0]; + var sideNav = document.getElementsByClassName('sidenav')[0]; var link = sideNav.getElementsByClassName('is-selected')[0]; if(link && link.offsetTop > window.innerHeight){ sideNav.scrollTop = link.offsetTop - (window.innerHeight/2); diff --git a/public/docs/_layout.jade b/public/docs/_layout.jade index 936c478fee..1baf14d66c 100644 --- a/public/docs/_layout.jade +++ b/public/docs/_layout.jade @@ -29,12 +29,9 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame != yield else article(class="l-content-small grid-fluid docs-content") - div(class="c10") - .showcase - .showcase-content - != yield - if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4] - != partial("../_includes/_next-item") + != yield + if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4] + != partial("../_includes/_next-item") != partial("../_includes/_footer") != partial("../_includes/_scripts-include") \ No newline at end of file diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json index ed39df4605..3c702053da 100644 --- a/public/docs/dart/latest/_data.json +++ b/public/docs/dart/latest/_data.json @@ -2,8 +2,9 @@ "index": { "icon": "home", "title": "Angular Docs", + "subtitle": "Dart", "menuTitle": "Docs Home", - "banner": "Welcome to angular.io/dart! The current Angular 2 Dart release is beta.21. Consult the Change Log about recent enhancements, fixes, and breaking changes." + "banner": "Current release is beta.21. Consult the Change Log about recent enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/dart/latest/index.jade b/public/docs/dart/latest/index.jade index 9628c62f4d..1781aa6eba 100644 --- a/public/docs/dart/latest/index.jade +++ b/public/docs/dart/latest/index.jade @@ -1,38 +1,25 @@ -div.card-row(layout='row' layout-align="space-around center" +.clearfix + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") + h2.text-headline.text-uppercase Quickstart + p A short beginner guide explaining the basic concepts of Angular -class="docs-landing") - div(class="card-row-container") - md-card(class="card") - md-card-content(flex layout="column" layout-align="space-between center") - div - h2(class="text-headline text-uppercase") 5 Minute Quickstart - p A short beginner guide explaining the basic concepts of Angular + footer View Quickstart - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button md-button") View Quickstart + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") + h2.text-headline.text-uppercase Developer Guide + p An intermediate development guide covering all major features of Angular + + footer View Guide + + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") + h2.text-headline.text-uppercase API Reference + p An advanced reference of all Angular Classes, Methods, etc. + + footer View API - div(class="card-row-container") - md-card(class="card") - md-card-content(flex layout="column" layout-align="space-between center") - div - h2(class="text-headline text-uppercase") Developer Guide - p An intermediate development guide covering all major features of Angular +div.c12.l-space-top-3 + .alert.is-helpful. + Not using Angular 2 yet? Perhaps you need the + API docs for the original AngularDart. - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary md-button") View Guide - - - div(class="card-row-container") - md-card(class="card") - md-card-content(flex layout="column" layout-align="space-between center") - div - h2(class="text-headline text-uppercase") API Reference - p An advanced reference of all Angular Classes, Methods, etc. - - footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button md-button") View API - -.alert.is-helpful. - Not using Angular 2 yet? Perhaps you need the - API docs for the original AngularDart. diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 80528fdf7e..3d48f658b9 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -41,7 +41,7 @@ block install-packages From the project folder, run `pub get` to install the angular2 and browser packages (along with the packages they depend on). - code-example(language="sh"). + code-example(language="sh" class="code-shell"). > pub get Resolving dependencies... @@ -90,7 +90,7 @@ block build-app Before deploying the app, we need to generate JavaScript files. The `pub build` command makes that easy. - code-example(language="sh"). + code-example(language="sh" class="code-shell"). > pub build Loading source assets... diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index e61260abf7..9343c3b22b 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -2,8 +2,9 @@ "index": { "icon": "home", "title": "Angular Docs", + "subtitle": "JavaScript", "menuTitle": "Docs Home", - "banner": "Welcome to Angular in JavaScript! The current Angular 2 release is rc.7. Please consult the Change Log about recent enhancements, fixes, and breaking changes." + "banner": "The current release is rc.7. View the Change Log for enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/js/latest/index.jade b/public/docs/js/latest/index.jade index ef50209c3e..1f20647815 100644 --- a/public/docs/js/latest/index.jade +++ b/public/docs/js/latest/index.jade @@ -1,33 +1,67 @@ -div.card-row.docs-landing.layout-align-space-around-center.layout-row.flex - div.card-row-container - md-card.card - md-card-content.layout-align-space-between-center.layout-column.flex - div - h2.text-headline.text-uppercase 5 Minute Quickstart - p A short beginner guide explaining the basic concepts of Angular +.clearfix + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") + h2.text-headline.text-uppercase Quickstart + p A short beginner guide explaining the basic concepts of Angular - footer - a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") View Quickstart + footer View Quickstart + + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") + h2.text-headline.text-uppercase Developer Guide + p An intermediate development guide covering all major features of Angular + + footer View Guide + + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") + h2.text-headline.text-uppercase API Reference + p An advanced reference of all Angular Classes, Methods, etc. + + footer View API - div.card-row-container - md-card.card - md-card-content.layout-align-space-between-center.layout-column.flex - div - h2.text-headline.text-uppercase Developer Guide - p An intermediate development guide covering all major features of Angular +.c4.secondary-content-list + h4 Advanced Documentation + ul + li + a(href="/docs/js/latest/guide/ngmodule.html") Angular Modules + li + a(href="/docs/js/latest/guide/animations.html") Animations + li + a(href="/docs/js/latest/guide/attribute-directives.html") Attribute Directives + li + a(href="/docs/js/latest/guide/browser-support.html") Browser Support + li + a(href="/docs/js/latest/guide/component-styles.html") Component Styles + li + a(href="/docs/js/latest/guide/ngmodule.html") View All... - footer - a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") View Guide - - - div.card-row-container - md-card.card - md-card-content.layout-align-space-between-center.layout-column.flex - div - h2.text-headline.text-uppercase API Reference - p An advanced reference of all Angular Classes, Methods, etc. - - footer - a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") View API +.c4.secondary-content-list + h4 Cookbook + ul + li + a(href="/docs/js/latest/cookbook/a1-a2-quick-reference.html") Angular 1 to Angular 2 + li + a(href="/docs/js/latest/cookbook/ngmodule-faq.html") Angular Module FAQ + li + a(href="/docs/js/latest/cookbook/component-communication.html") Component Interaction + li + a(href="/docs/js/latest/cookbook/component-relative-paths.html") Component-Relative Paths + li + a(href="/docs/js/latest/cookbook/dependency-injection.html") Dependency Injection + li + a(href="/docs/js/latest/cookbook/") View All... +.c4.secondary-content-list + h4 Tools & Libraries + ul + li + a(target="_blank" href="https://github.com/angular/universal") Angular Universal + li + a(target="_blank" href="https://augury.angular.io/") Augury + li + a(target="_blank" href="https://github.com/jaxio/celerio-angular-quickstart") Celerio Angular Quickstart + li + a(target="_blank" href="https://github.com/mgechev/codelyzer") Codelyzer + li + a(target="_blank" href="https://github.com/johnpapa/lite-server") Lite-server + li + a(target="_blank" href="/resources/") View All... diff --git a/public/docs/ts/_cache/quickstart.jade b/public/docs/ts/_cache/quickstart.jade index 20ff1a90b7..1e01b8f64d 100644 --- a/public/docs/ts/_cache/quickstart.jade +++ b/public/docs/ts/_cache/quickstart.jade @@ -104,7 +104,7 @@ button(class="verbose on md-primary md-button md-ink-ripple", type="button", onc ### (a) Create the project folder - var _ = _docsFor == 'dart' ? '_' : '-'; -code-example(language="sh"). +code-example(language="sh" class="code-shell"). mkdir angular2!{_}quickstart cd angular2!{_}quickstart @@ -148,14 +148,14 @@ block install-packages We install the packages listed in `package.json` using `npm`. Enter the following command in a terminal window (command window in Windows): - code-example(language="sh"). + code-example(language="sh" class="code-shell"). npm install .l-sub-section :marked The `typings` folder could not show up after `npm install`. If so, please install them manually. - code-example(language="sh"). + code-example(language="sh" class="code-shell"). npm run typings install .alert.is-important @@ -365,7 +365,7 @@ block create-main ### Bootstrapping is platform-specific - Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function + Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function from `#{_angular_browser_uri}`, not `#{_angular_core_uri}`. Bootstrapping isn't core because there isn't a single way to bootstrap the app. True, most applications that run in a browser call the bootstrap function from @@ -509,7 +509,7 @@ h2#index Step !{step++}: Add #[code index.html] a#my-app :marked When Angular calls the `!{_bootstrapModule}` function in main.ts, - it reads the `!{_AppModuleVsAppComp}` metadata, sees that + it reads the `!{_AppModuleVsAppComp}` metadata, sees that `AppComponent` is the bootstrap component, finds the `my-app` selector, locates an element tag named `my-app`, and renders our application's view between those tags. diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 3d7abd05b0..0dbb85b75e 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -2,6 +2,7 @@ "index": { "icon": "home", "title": "Angular Docs", + "subtitle": "TypeScript", "menuTitle": "Docs Home", "banner": "Welcome to Angular in TypeScript! The current Angular 2 release is rc.7. Please consult the Change Log about recent enhancements, fixes, and breaking changes." }, @@ -9,48 +10,56 @@ "cli-quickstart": { "icon": "query-builder", "title": "CLI Quickstart", + "subtitle": "TypeScript", "description": "Use the CLI tool to build apps quickly in Angular 2", "hide": true }, "quickstart": { "icon": "query-builder", - "title": "Quickstart", - "description": "Get up and running with Angular 2" + "subtitle": "TypeScript", + "description": "Get up and running with Angular 2", + "banner": "This QuickStart guide demonstrates how to build and run a simple Angular 2 application in TypeScript." }, "tutorial": { "icon": "list", "title": "Tutorial", + "subtitle": "TypeScript", "banner": "Angular 2 is currently in Release Candidate." }, "guide": { "icon": "list", "title": "Developer Guides", + "subtitle": "TypeScript", "banner": "Angular 2 is currently in Release Candidate." }, "cookbook": { "icon": "list", "title": "Cookbook", + "subtitle": "TypeScript", "banner": "How to solve common implementation challenges." }, "api/": { "icon": "book", "title": "API Preview", + "subtitle": "TypeScript", "reference": true }, "cheatsheet": { "title": "Angular Cheat Sheet", + "subtitle": "TypeScript", "intro": "A quick guide to Angular syntax. (Content is provisional and may change.)", "reference": false }, "glossary": { "title": "Glossary", + "subtitle": "TypeScript", "intro": "Brief definitions of the most important words in the Angular 2 vocabulary", "reference": false }, @@ -58,6 +67,7 @@ "resources": { "icon": "play-circle-fill", "title": "Angular Resources", + "subtitle": "TypeScript", "banner": "Angular 2 is currently in Release Candidate.", "resources": true }, @@ -65,11 +75,13 @@ "help": { "icon": "chat", "title": "Help & Support", + "subtitle": "From our team & community", "resources": true }, "styleguide": { "title": "Docs Style Guide", + "subtitle": "TypeScript", "intro": "Design & Layout Patterns For Documentation" } } diff --git a/public/docs/ts/latest/index.jade b/public/docs/ts/latest/index.jade index fe6c8a9e6c..9a272cd874 100644 --- a/public/docs/ts/latest/index.jade +++ b/public/docs/ts/latest/index.jade @@ -1,33 +1,66 @@ -div.card-row.docs-landing.layout-align-space-around-center.layout-row.flex - div.card-row-container - md-card.card - md-card-content.layout-align-space-between-center.layout-column.flex - div - h2.text-headline.text-uppercase Quickstart - p A short beginner guide explaining the basic concepts of Angular +.clearfix + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") + h2.text-headline.text-uppercase Quickstart + p A short beginner guide explaining the basic concepts of Angular - footer - a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") View Quickstart + footer View Quickstart + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") + h2.text-headline.text-uppercase Developer Guide + p An intermediate development guide covering all major features of Angular - div.card-row-container - md-card.card - md-card-content.layout-align-space-between-center.layout-column.flex - div - h2.text-headline.text-uppercase Developer Guide - p An intermediate development guide covering all major features of Angular + footer View Guide - footer - a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") View Guide + a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") + h2.text-headline.text-uppercase API Reference + p An advanced reference of all Angular Classes, Methods, etc. + footer View API - div.card-row-container - md-card.card - md-card-content.layout-align-space-between-center.layout-column.flex - div - h2.text-headline.text-uppercase API Reference - p An advanced reference of all Angular Classes, Methods, etc. +.c4.secondary-content-list + h4 Advanced Documentation + ul + li + a(href="/docs/ts/latest/guide/ngmodule.html") Angular Modules + li + a(href="/docs/ts/latest/guide/animations.html") Animations + li + a(href="/docs/ts/latest/guide/attribute-directives.html") Attribute Directives + li + a(href="/docs/ts/latest/guide/browser-support.html") Browser Support + li + a(href="/docs/ts/latest/guide/component-styles.html") Component Styles + li + a(href="/docs/ts/latest/guide/ngmodule.html") View All... - footer - a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") View API +.c4.secondary-content-list + h4 Cookbook + ul + li + a(href="/docs/ts/latest/cookbook/a1-a2-quick-reference.html") Angular 1 to Angular 2 + li + a(href="/docs/ts/latest/cookbook/ngmodule-faq.html") Angular Module FAQ + li + a(href="/docs/ts/latest/cookbook/component-communication.html") Component Interaction + li + a(href="/docs/ts/latest/cookbook/component-relative-paths.html") Component-Relative Paths + li + a(href="/docs/ts/latest/cookbook/dependency-injection.html") Dependency Injection + li + a(href="/docs/ts/latest/cookbook/") View All... +.c4.secondary-content-list + h4 Tools & Libraries + ul + li + a(target="_blank" href="https://github.com/angular/universal") Angular Universal + li + a(target="_blank" href="https://augury.angular.io/") Augury + li + a(target="_blank" href="https://github.com/jaxio/celerio-angular-quickstart") Celerio Angular Quickstart + li + a(target="_blank" href="https://github.com/mgechev/codelyzer") Codelyzer + li + a(target="_blank" href="https://github.com/johnpapa/lite-server") Lite-server + li + a(target="_blank" href="/resources/") View All... diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index fa896d1f3e..17b90f4314 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -10,17 +10,12 @@ block includes //- TS/Dart shared step counter - var step = _stepInit -:marked - This QuickStart guide demonstrates how to build and run a simple Angular 2 application in #{_Lang}. - It also establishes a common development environment used throughout the code examples in these - guides. - .callout.is-helpful header Don't want #{_Lang}? p. Although you're getting started in #{_Lang}, you can also write Angular 2 applications in JavaScript and #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}. Use the language selector in the - banner to switch development languages for this guide. + left nav to switch development languages for this guide. .l-main-section h1 Overview @@ -68,12 +63,6 @@ block setup-tooling npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v` in a terminal window. -aside.is-right - :marked - To easily copy text from a code example, click the *Copy to Clipboard* icon (content_copy ) in the upper right corner of - the example box. - .l-main-section h1#create-and-configure Step 1: Create and configure the project @@ -91,7 +80,7 @@ h2 Create the project folder directory. - var _ = _docsFor == 'dart' ? '_' : '-'; -code-example(language="sh"). +code-example(language="sh" class="code-shell"). mkdir angular2!{_}quickstart cd angular2!{_}quickstart @@ -151,7 +140,7 @@ block install-packages :marked Using npm from the command line, install the packages listed in `package.json` with the command: - code-example(language="sh"). + code-example(language="sh" class="code-shell"). npm install :marked @@ -174,7 +163,7 @@ block install-packages :marked If the `typings` folder doesn't show up after running `npm install`, you'll need to install it manually with the command: - code-example(language="sh"). + code-example(language="sh" class="code-shell"). npm run typings install :marked @@ -192,7 +181,7 @@ block install-packages **Create #{_an} #{_appDir} subfolder** off the project root directory: - code-example. + code-example.code-shell. mkdir #{_appDir} :marked @@ -334,7 +323,7 @@ h1 Step !{step++}: Build and run the application block run-app :marked Open a terminal window and enter this command: - code-example. + code-example.code-shell. npm start aside.is-right :marked diff --git a/public/index.jade b/public/index.jade index 4ce2d906c3..771aa7057a 100644 --- a/public/index.jade +++ b/public/index.jade @@ -19,7 +19,6 @@ div(class="home-rows") h3(class="text-headline") Speed & Performance 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. - br 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. div(class="promo-img-container promo-2") @@ -47,7 +46,7 @@ div(class="home-rows") div(class="promo-img-container promo-4") div img(src="resources/images/home/loved-by-millions.png") - + .cta-bar a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" md-button) Get Started diff --git a/public/resources/css/_options.scss b/public/resources/css/_options.scss index 1cc9f429ff..88ef1dfa7c 100644 --- a/public/resources/css/_options.scss +++ b/public/resources/css/_options.scss @@ -34,61 +34,4 @@ $layer-6: 6; $layer-7: 7; $layer-8: 8; $layer-9: 9; -$layer-10: 10; - - -/* -* Colors -* -* Colors are ordered from light to dark (top to bottom). -* Do not use hex codes directly in other Sass files. The -* following colors are the only approved colors for this site. -*/ - -// GREEN COLORS -$cactus: #8BC34A; - -// YELLOW -$sunshine: #FFF59D; -$olive: #647f11; - -// ORANGE -$sand: #FFF8E1; -$citrus: #FF8F00; - -// RED COLORS -$peach: #ffebee; -$squid: #EF3872; -$cardinal: #E23237; -$ruby: #B52E31; -$pink: #D43669; - -// BLUE COLORS -$light: #E3F2FD; -$sky: #0085D3; -$regal: #0273D4; -$blueberry: #0262C2; -$ocean: #0143A3; - -//PURPLE -$grape: #9575CD; - -// DARK GRAY COLORS -$coal: #000000; -$steel: #253238; -$silver: #36474F; -$platinum: #445A64; -$metal: #536E7A; -$tin: #8FA4AE; -$darkgrey: #5C707A; -$bismark: #7a8b94; -$grey: #B0BEC5; - -// LIGHT GRAY COLORS -$cloud: #AFBEC5; -$fog: #CFD8DC; -$mist: #ECEFF1; -$snow: #FFFFFF; -$heather: #546E7A; -$lightgrey: #F5F6F7; -$storm: #E0E0E0; +$layer-10: 10; \ No newline at end of file diff --git a/public/resources/css/_theme.scss b/public/resources/css/_theme.scss index 3e40af70a0..08c400632f 100644 --- a/public/resources/css/_theme.scss +++ b/public/resources/css/_theme.scss @@ -5,64 +5,24 @@ */ .background-sky { - background-color: $ocean; - background: linear-gradient($ocean, $regal); + background-color: $blue-700; + background: linear-gradient(145deg, $blue-900, $blue-400); color: $snow; } -.background-regal { - background: $regal; +.background-midnight { + background: $blue-grey-900; color: $snow; } -.background-coal { - background: $coal; - color: $snow; -} - -.background-steel { - background: $steel; - color: $snow; -} - -.background-silver { - background: $silver; - color: $snow; -} - -.background-blue-grey-900 { - background: #263238; - color: $snow; -} /* * Background Images * */ -.background-lon-paper { - background: url('/resources/images/backgrounds/lon-paper.png') bottom center no-repeat; - background-size: 100%; - background-position: fixed; -} .background-superhero-paper { - background: url('/resources/images/backgrounds/superhero-paper.png') bottom center no-repeat; + background: url('/resources/images/backgrounds/super-hero-large.png') no-repeat bottom center , linear-gradient(145deg, $blue-900, $blue-400); + background-blend-mode: multiply; background-size: 100%; - background-position: fixed; - @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - background-image: url('/resources/images/backgrounds/superhero-paper-large.png'); - } -} - - - - -/* -* Text Colors -* -* Text color utility color classes -*/ - -.text-snow { - color: $snow; } \ No newline at end of file diff --git a/public/resources/css/base/_colors.scss b/public/resources/css/base/_colors.scss new file mode 100644 index 0000000000..0af5c8a6d0 --- /dev/null +++ b/public/resources/css/base/_colors.scss @@ -0,0 +1,279 @@ +/* +* Material Design Colors +* +* Colors based off the material design palette +* https://material.google.com/style/color.html#color-color-palette +* +*/ + + +/* +* Black & White +* +*/ + +$white: #FFFFFF; +$black: #000000; + + +/* +* Amber +* +*/ + +$amber-50: #FFF8E1; +$amber-100: #FFECB3; +$amber-200: #FFE082; +$amber-300: #FFD54F; +$amber-400: #FFCA28; +$amber-500: #FFC107; +$amber-600: #FFB300; +$amber-700: #FFA000; +$amber-800: #FF8F00; +$amber-900: #FF6F00; +$amber-A100: #FFE57F; +$amber-A200: #FFD740; +$amber-A400: #FFC400; +$amber-A700: #FFAB00; + + +/* +* Blue Grey +* +*/ + +$blue-grey-50: #ECEFF1; +$blue-grey-100: #CFD8DC; +$blue-grey-200: #B0BEC5; +$blue-grey-300: #90A4AE; +$blue-grey-400: #78909C; +$blue-grey-500: #607D8B; +$blue-grey-600: #546E7A; +$blue-grey-700: #455A64; +$blue-grey-800: #37474F; +$blue-grey-900: #263238; + + +/* +* Blue +* +*/ + +$blue-50: #E3F2FD; +$blue-100: #BBDEFB; +$blue-200: #90CAF9; +$blue-300: #64B5F6; +$blue-400: #42A5F5; +$blue-500: #2196F3; +$blue-600: #1E88E5; +$blue-700: #1976D2; +$blue-800: #1565C0; +$blue-900: #0D47A1; +$blue-A100: #82B1FF; +$blue-A200: #448AFF; +$blue-A400: #2979FF; +$blue-A700: #2962FF; + + +/* +* Cyan +* +*/ + +$cyan-50: #E0F7FA; +$cyan-100: #B2EBF2; +$cyan-200: #80DEEA; +$cyan-300: #4DD0E1; +$cyan-400: #26C6DA; +$cyan-500: #00BCD4; +$cyan-600: #00ACC1; +$cyan-700: #0097A7; +$cyan-800: #00838F; +$cyan-900: #006064; +$cyan-A100: #84FFFF; +$cyan-A200: #18FFFF; +$cyan-A400: #00E5FF; +$cyan-A700: #00B8D4; + + +/* +* Green +* +*/ + +$green-50: #E8F5E9; +$green-100: #C8E6C9; +$green-200: #A5D6A7; +$green-300: #81C784; +$green-400: #66BB6A; +$green-500: #4CAF50; +$green-600: #43A047; +$green-700: #388E3C; +$green-800: #2E7D32; +$green-900: #1B5E20; +$green-A100: #B9F6CA; +$green-A200: #69F0AE; +$green-A400: #00E676; +$green-A700: #00C853; + + +/* +* Light Green +* +*/ + +$light-green-50: #F1F8E9; +$light-green-100: #DCEDC8; +$light-green-200: #C5E1A5; +$light-green-300: #AED581; +$light-green-400: #9CCC65; +$light-green-500: #8BC34A; +$light-green-600: #7CB342; +$light-green-700: #689F38; +$light-green-800: #558B2F; +$light-green-900: #33691E; +$light-green-A100: #CCFF90; +$light-green-A200: #B2FF59; +$light-green-A400: #76FF03; +$light-green-A700: #64DD17; + + +/* +* Red +* +*/ + +$red-50: #FFEBEE; +$red-100: #FFCDD2; +$red-200: #EF9A9A; +$red-300: #E57373; +$red-400: #EF5350; +$red-500: #F44336; +$red-600: #E53935; +$red-700: #D32F2F; +$red-800: #C62828; +$red-900: #B71C1C; +$red-A100: #FF8A80; +$red-A200: #FF5252; +$red-A400: #FF1744; +$red-A700: #D50000; + + +/* +* Pink +* +*/ + +$pink-50: #FCE4EC; +$pink-100: #F8BBD0; +$pink-200: #F48FB1; +$pink-300: #F06292; +$pink-400: #EC407A; +$pink-500: #E91E63; +$pink-600: #D81B60; +$pink-700: #C2185B; +$pink-800: #AD1457; +$pink-900: #880E4F; +$pink-A100: #FF80AB; +$pink-A200: #FF4081; +$pink-A400: #F50057; +$pink-A700: #C51162; + + +/* +* Purple +* +*/ + +$purple-50: #F3E5F5; +$purple-100: #E1BEE7; +$purple-200: #CE93D8; +$purple-300: #BA68C8; +$purple-400: #AB47BC; +$purple-500: #9C27B0; +$purple-600: #8E24AA; +$purple-700: #7B1FA2; +$purple-800: #6A1B9A; +$purple-900: #4A148C; +$purple-A100: #EA80FC; +$purple-A200: #E040FB; +$purple-A400: #D500F9; +$purple-A700: #AA00FF; + + +/* +* Teal +* +*/ + +$teal-50: #E0F2F1; +$teal-100: #B2DFDB; +$teal-200: #80CBC4; +$teal-300: #4DB6AC; +$teal-400: #26A69A; +$teal-500: #009688; +$teal-600: #00897B; +$teal-700: #00796B; +$teal-800: #00695C; +$teal-900: #004D40; +$teal-A100: #A7FFEB; +$teal-A200: #64FFDA; +$teal-A400: #1DE9B6; +$teal-A700: #00BFA5; + + +/* +* Orginial Colors +* +* Colors are ordered from light to dark (top to bottom). +* Do not use hex codes directly in other Sass files. The +* following colors are the only approved colors for this site. +*/ + +// GREEN COLORS +$cactus: #8BC34A; + +// YELLOW +$sunshine: #FFF59D; +$olive: #647f11; + +// ORANGE +$sand: #FFF8E1; +$citrus: #FF8F00; + +// RED COLORS +$peach: #ffebee; +$squid: #EF3872; +$cardinal: #E23237; +$ruby: #B52E31; +$pink: #D43669; + +// BLUE COLORS +$light: #E3F2FD; +$sky: #0085D3; +$regal: #0273D4; +$blueberry: #0262C2; +$ocean: #0143A3; + +//PURPLE +$grape: #9575CD; + +// DARK GRAY COLORS +$coal: #000000; +$steel: #253238; +$silver: #36474F; +$platinum: #445A64; +$metal: #536E7A; +$tin: #8FA4AE; +$darkgrey: #5C707A; +$bismark: #7a8b94; +$grey: #B0BEC5; + +// LIGHT GRAY COLORS +$cloud: #AFBEC5; +$fog: #CFD8DC; +$mist: #ECEFF1; +$snow: #FFFFFF; +$heather: #546E7A; +$lightgrey: #F5F6F7; +$storm: #E0E0E0; diff --git a/public/resources/css/base/_mixins.scss b/public/resources/css/base/_mixins.scss new file mode 100644 index 0000000000..883adc063a --- /dev/null +++ b/public/resources/css/base/_mixins.scss @@ -0,0 +1,24 @@ +$phone-breakpoint: 480px !default; +$tablet-breakpoint: 800px !default; + + +@mixin respond-to($media) { + @if $media == mobile { + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + @content; + } + } + @else if $media == phones { + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint) { + @content; + } + } + @else if $media == tablets { + @media screen and (max-width: $tablet-breakpoint) { + @content; + } + } +} diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index 9523cea9b0..e58d5fbd08 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -1,34 +1,44 @@ /* * Typographic Styles * -* Material Design Typographic Styles +* General Typographic Styles for content displayed in the body of a page */ body { font-family: $brand-font; font-size: 14px; - color: #1a2326; + color: $blue-grey-600; &.ng-cloak { display: none; } } -// NOTE: (ericjim) the new api docs use material design blue 600 links in this fashion. + +/* +* Text Colors +* +* Text color utility color classes +*/ + +.text-snow { + color: $white; +} + a { - color: #1E88E5; + color: $blue-600; text-decoration: none; &:hover { - text-decoration-color: #1E88E5; + color: $blue-600; text-decoration: underline; } } code { - background: $lightgrey; + background: $blue-grey-50; border-radius: 2px; font-family: $mono-font; - color: $darkgrey; + color: $teal-500; padding: 0px 4px; font-size: 90%; } @@ -43,6 +53,11 @@ code { } +/* +* Utility Classes +* +*/ + .text-center { text-align: center; } @@ -52,6 +67,11 @@ code { } +/* +* Text Styles +* +*/ + .text-display-4 { margin: 0px 0px ($unit * 2) 0px; font-size: 112px; @@ -90,7 +110,7 @@ code { .docs-content h3 { margin: 0px 0px ($unit * 2) 0px; font-size: 24px; - font-weight: 450; + font-weight: 400; opacity: .87; line-height: 32px; } @@ -106,17 +126,33 @@ code { .docs-content { h1 { - font-size: 24px; + font-size: 34px; + line-height: 40px; + margin: ($unit * 6) 0 ($unit * 3) 0; opacity: 0.87; + + &:first-of-type { + margin-top: 0; + } } h2 { - font-size: 20px; + font-size: 24px; + font-weight: 600; + line-height: 32px; + margin: ($unit * 6) 0 ($unit * 2) 0; } h3 { - font-size: 16px; + font-size: 18px; + font-weight: 600; + line-height: 28px; + margin: ($unit * 6) 0 ($unit * 1) 0; } h4 { font-size: 16px; + font-weight: 600; + line-height: 28px; + margin: ($unit * 6) 0 ($unit * 1) 0; + text-transform: uppercase; } } @@ -126,7 +162,7 @@ table th, .docs-content p, .docs-content ul, .docs-content ol { - margin: 0px 0px ($unit * 2) 0px; + margin: 0px 0px ($unit * 3) 0px; font-size: 16px; font-weight: 400; opacity: .87; @@ -144,7 +180,6 @@ table th, padding-left: ($unit * 4); } -.l-sub-section p, table td { font-size: 14px; font-weight: 400; @@ -163,17 +198,25 @@ table td { .text-aside, .docs-content aside { @extend .text-caption; - box-shadow: 0px 2px 5px rgba($coal, 0.3); + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + color: $blue-grey-700; font-weight: 400; font-size: 13px; - opacity: .54; line-height: 24px; - background: $mist; + opacity: 1; + background: rgba($blue-grey-50, .56); border-radius: 2px; padding: $unit * 3; margin-bottom: $unit * 2; width: $unit * 30; + p { + color: $blue-grey-700; + font-weight: 400; + font-size: 13px; + line-height: 24px; + } + .l-sub-section & { background: $fog; } @@ -195,10 +238,6 @@ table td { } .docs-content .l-sub-section { - padding: ($unit * 2) ($unit * 3); - h3 { - line-height: 1em; - } pre:last-child { margin-bottom: 0; } @@ -215,7 +254,7 @@ table td { margin-right: 0; } } -@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { +@include respond-to('mobile') { .docs-content .card-row { &[layout="row"] { -webkit-flex-direction: column; diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss index f241808e39..9ed82abf1a 100644 --- a/public/resources/css/layout/_layout.scss +++ b/public/resources/css/layout/_layout.scss @@ -25,6 +25,12 @@ .l-fixed { position: fixed; } +.l-clearfix:after, +.clearfix:after { + content: ""; + display: table; + clear: both; +} /* @@ -51,6 +57,7 @@ * Page & Element Specific Layouts * */ + .l-hr { margin: 0 ($unit * 0.5) ($unit * 5); padding: ($unit * 2) 0; @@ -63,7 +70,7 @@ } .l-offset-side-nav { - padding-left: 232px; + padding-left: 240px; @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), @@ -83,6 +90,10 @@ } } +.l-docs-content { + padding: $unit * 6; +} + .l-content { padding: ($unit * 8) ($unit * 12); max-width: 1200px; @@ -117,11 +128,11 @@ } .l-sub-section { + color: $blue-grey-700; margin: 0px 0px ($unit * 4) 0px; - padding: ($unit * 4) ($unit * 6); - background: lighten($mist, 3%); - border-left: ($unit / 2) solid $cactus; - border-radius: ($unit / 2); + padding: $unit * 4; + background: rgba($blue-grey-50, .24); + border-left: 4px solid $cyan-500; @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), @@ -130,8 +141,16 @@ } code { - background: $fog; - color: $steel; + background: rgba($blue-grey-100, .56); + color: $cyan-700; + } + + p:last-child { + margin: 0; + } + + h3:first-child { + margin-top: 0; } &:last-child { @@ -152,13 +171,13 @@ button.verbose { screen and (max-device-width: $phone-breakpoint), screen and (max-width: $tablet-breakpoint) { font-size: ($unit * 2); - } + } } button.verbose.on {display: none} .l-verbose-section { margin: 0px 0px ($unit * 4) 0px; - padding-left: ($unit * 2); + padding-left: ($unit * 2); //background: lighten($light, 5%); border-left: ($unit / 6) solid $grey; border-radius: ($unit / 6); @@ -270,5 +289,5 @@ button.verbose.on {display: none} display: block; font-size: $unit * 2; margin-bottom: $unit; - margin-top: $unit * 4; + margin-top: $unit * 4; } \ No newline at end of file diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index f066ab6f72..f755527f14 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -2,13 +2,17 @@ * BASE FILES * */ - @import 'options'; + +@import 'base/colors'; +@import 'base/reset'; +@import 'base/mixins'; +@import 'base/type'; + + @import 'state'; @import 'layout/layout'; @import 'theme'; -@import 'base/reset'; -@import 'base/type'; @import 'angular'; @@ -17,6 +21,8 @@ * */ +@import 'module/announcement-bar'; +@import 'module/badge'; @import 'module/main-nav'; @import 'module/side-nav'; @import 'module/jump-nav'; @@ -26,8 +32,10 @@ @import 'module/banner'; @import 'module/cta-bar'; @import 'module/buttons'; +@import 'module/form'; @import 'module/table'; @import 'module/code'; +@import 'module/code-shell'; @import 'module/heading-code'; @import 'module/code-box'; @import 'module/sticker'; @@ -36,13 +44,14 @@ @import 'module/alert'; @import 'module/callout'; @import 'module/images'; +@import 'module/lists'; @import 'module/card'; @import 'module/hover-card'; @import 'module/modal'; @import 'module/shadow'; @import 'module/showcase'; @import 'module/statement'; -@import 'module/example-title'; +@import 'module/symbol'; @import 'module/api'; @import 'module/cheatsheet'; @import 'module/filetree'; @@ -54,7 +63,6 @@ @import 'module/press-kit'; @import 'module/features'; @import 'module/docs-landing'; -@import 'module/copy'; @import 'module/embedded-plunker'; /* diff --git a/public/resources/css/module/_alert.scss b/public/resources/css/module/_alert.scss index 86397900dc..2268fb7046 100644 --- a/public/resources/css/module/_alert.scss +++ b/public/resources/css/module/_alert.scss @@ -1,26 +1,26 @@ .alert { - box-shadow: 0px 2px 5px rgba($coal, 0.3); + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); border-width: 2px; border-style: solid; padding: $unit ($unit * 2); - line-height: $unit * 4; + line-height: $unit * 3; font-size: 14px; border-radius: 4px; - color: $steel; + color: $blue-grey-700; margin-bottom: $unit * 3; &.is-critical { - border-color: $cardinal; - background: $peach; + border-color: $red-700; + background: rgba($red-50, .24); } &.is-important { - border-color: $citrus; - background: $sand; + border-color: $amber-700; + background: rgba($amber-50, .24); } &.is-helpful { - border-color: $blueberry; - background: $light; + border-color: $blue-600; + background: rgba($blue-50, .24); } } \ No newline at end of file diff --git a/public/resources/css/module/_announcement-bar.scss b/public/resources/css/module/_announcement-bar.scss new file mode 100644 index 0000000000..77565fb213 --- /dev/null +++ b/public/resources/css/module/_announcement-bar.scss @@ -0,0 +1,97 @@ +/* +* Announcment Bar Module +* +* A module displaying time senstive announcemnts +* +*/ + + +/* +* Variables +*/ + +$announcement-bar-height: 104px; +$announcement-bar-width: 752px; + + +/* +* Class +*/ + +.announcement-bar { + background: $white; + bottom: 0; + box-sizing: border-box; + color: $blue-grey-500; + height: $announcement-bar-height; + left: 50%; + margin-bottom: -($announcement-bar-height / 2); + margin-left: -($announcement-bar-width / 2); + overflow: hidden; + padding: $unit * 4; + position: absolute; + width: $announcement-bar-width; + + img, p { + float: left; + } + + img { + height: 40px; + margin: 0 ($unit) 0 0; + } + + p { + font-size: 18px; + line-height: $unit * 5; + margin: 0; + padding: 0; + } + + .button, + .button.md-button { + background: rgba($blue-grey-50, .87); + border-radius: 2px; + color: $blue-grey-500; + float: right; + font-size: 14px; + line-height: $unit * 5; + margin: 0; + padding: 0 ($unit * 5); + transition: all .3s; + + &:hover { + background: $blue-grey-50; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + color: $blue-500; + } + } + + /* + * Mobile Styles + * + */ + + @include respond-to('mobile') { + height: auto; + margin: 0; + padding: ($unit * 4) ($unit * 6); + position: static; + text-align: center; + width: auto; + + &.shadow-2 { + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + } + + img, p { + float: none; + } + + .button { + float: none; + display: block; + margin-top: $unit * 2; + } + } +} \ No newline at end of file diff --git a/public/resources/css/module/_api.scss b/public/resources/css/module/_api.scss index 00adfe2a33..0ecf4baaff 100644 --- a/public/resources/css/module/_api.scss +++ b/public/resources/css/module/_api.scss @@ -1,246 +1,173 @@ -@mixin icon { - line-height: 14px; - &.decorator:before { - content: '@'; - background: $blueberry; - } - &.directive:before { - content: 'D'; - background: #db4437; - } - &.pipe:before { - content: 'P'; - background: #78909C; - } - &.class:before { - content: 'C'; - background: #4285f4; - } - &.interface:before { - content: 'I'; - background: #0097a7; - } - &.function:before { - content: 'F'; - background: #0f9d58; - } - &.enum:before { - content: 'E'; - background: #757575; +/* +* API Home Page +* +*/ + + + +/* +* API Filter Menu +* +*/ + +.api-filter { + .form-select-menu { + float: left; } - // NOTE: (ericjim): `var`, `let`, and `const` are considered Const - &.var:before, - &.let:before, - &.const:before { - content: 'K'; // Use K for const, since C is already used for Class - background: #9575cd; - } - &:before { - display: inline-block; - border-radius: 50%; - width: 14px; - height: 14px; - text-align: center; - color: white; - font-family: Roboto, sans-serif; - font-size: 10px; - margin-right: $unit; + .form-search { float: left; } } -.api-key { - dt, dd { - display: inline-block; + +/* +* API Class List +* +*/ + +.docs-content .api-list { + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; + + li { font-size: 14px; - font-family: Roboto, sans-serif; - padding: $unit; - } - dt { - padding-left: 0; - } - dd { - @include icon; - margin: 0 0 0 ($unit); - cursor: pointer; - &.active { - background: #d5d9dc; - border-radius: 3px; + margin: 0 0 ($unit * 2) 0; + line-height: 14px; + padding: 0; + float: left; + width: 33%; + min-width: 220px; + text-overflow: ellipsis; + white-space: nowrap; + + .symbol { + margin-right: $unit; } - } -} -input.api-filter { - display: block; - max-width: ($unit * 100); - width: 100%; - line-height: 18px; - padding: $unit; - position: relative; - left: ($unit * -1); -} - -.docs-content { - .anchor-offset { - display: block; - position: relative; - top: -250px; - visibility: hidden; - } - - .anchor-focused { - background-color: transparent !important; - - -moz-animation: fade 1s linear; /* Firefox */ - -webkit-animation: fade 1s linear; /* Safari and Chrome */ - -o-animation: fade 1s linear; /* Opera */ - animation: fade 1s linear; - } - - @keyframes fade { - 0% { background-color: $sunshine } - } - - .h2-api-docs { - font-size: 15px !important; - line-height: 20px; - text-transform: uppercase !important; - color: #78909C !important; - } - - .api-list { - list-style: none; - padding: 0 0 ($unit * 4); - overflow: hidden; - .api-item { - font-size: 14px; - font-family: Roboto, sans-serif; - margin: 0; - line-height: 14px; - padding: $unit $unit $unit 0; - float: left; - width: 33%; - min-width: 220px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - box-sizing: border-box; - a { - text-decoration: none; - color: black; - } - .symbol { - @include icon; - } - } - } - - .code-links { a { - code, .api-doc-code { - color: #1E88E5 !important; + color: $blue-grey-600; + display: inline-block; + line-height: $unit * 2; + padding: 0 ($unit * 2) 0 0; + text-decoration: none; + transition: all .3s; + + &:hover { + background: $blue-grey-50; + color: $blue-500; } } } +} - .openParens { - margin-top: 15px; - } - - .endParens { - margin-bottom: 20px !important; - } - - p { - - &.selector { - margin: 0; - } - - &.location-badge { - margin: 0 0 16px 16px !important; - } - - .api-doc-code { - border-bottom: 0px; - - :hover { - border-bottom: none; - } - } - } - - .row-margin { - margin-bottom: 36px; - h2 { - line-height: 28px; - } - } - - .code-margin { - margin-bottom: $unit; - } - - .hr-margin { - display: block; - height: 1px; - border: 0; - border-top: 1px solid $lightgrey; - margin-top: 15px; - margin-bottom: 20px; - padding: 0; - } - - .no-bg { - background: none; - padding: 0; - } - - .no-bg-with-indent { - padding-top: 0; - padding-bottom: 0; - padding-left: 16px; - margin-top: 6px; - margin-bottom: 0; - background: none; - } - - .code-background { - padding: 0 5px 0; - - span.pln { +.code-links { + a { + code, .api-doc-code { color: #1E88E5 !important; } } +} - .code-anchor { - cursor: pointer; - text-decoration: none; +.openParens { + margin-top: 15px; +} - // Override highlight.js - .kwd { - color: #1E88E5 !important; - } +.endParens { + margin-bottom: 20px !important; +} - &:hover { - text-decoration: underline; - } +p { + + &.selector { + margin: 0; + } + + &.location-badge { + margin: 0 0 16px 16px !important; } .api-doc-code { - font-size: 14px; - color: #1a2326; + border-bottom: 0px; - // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it. - &.no-pln { - .pln:last-child { - display: none; - } + :hover { + border-bottom: none; } } } +.row-margin { + margin-bottom: 36px; + h2 { + line-height: 28px; + } +} + +.code-margin { + margin-bottom: $unit; +} + +.hr-margin { + display: block; + height: 1px; + border: 0; + border-top: 1px solid $lightgrey; + margin-top: 15px; + margin-bottom: 20px; + padding: 0; +} + +.no-bg { + background: none; + padding: 0; +} + +.no-bg-with-indent { + padding-top: 0; + padding-bottom: 0; + padding-left: 16px; + margin-top: 6px; + margin-bottom: 0; + background: none; +} + +.code-background { + padding: 0 5px 0; + + span.pln { + color: #1E88E5 !important; + } +} + +.code-anchor { + cursor: pointer; + text-decoration: none; + + // Override highlight.js + .kwd { + color: #1E88E5 !important; + } + + &:hover { + text-decoration: underline; + } +} + +.api-doc-code { + font-size: 14px; + color: #1a2326; + + // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it. + &.no-pln { + .pln:last-child { + display: none; + } + } +} + + @media screen and (max-width: 600px) { .docs-content { // Overrides display flex from angular material. diff --git a/public/resources/css/module/_badge.scss b/public/resources/css/module/_badge.scss new file mode 100644 index 0000000000..960c6fd724 --- /dev/null +++ b/public/resources/css/module/_badge.scss @@ -0,0 +1,60 @@ +/* +* Badge Module +* +* Badges that indicate the current status of a page/lib/api +* +* Usage: Experimental +*/ + +/* +* Badge Types +*/ + +$badges: ( + beta: ( + border: $amber-700, + color: $amber-900 + ), + deprecated: ( + border: $pink-600, + color: $pink-600 + ), + experimental: ( + border: $purple-600, + color: $purple-600 + ), + stable: ( + border: $green-600, + color: $green-600 + ), +); + + +/* +* Class Definition +*/ + +.badge { + background: $white; + border: 2px solid $blue-grey-500; + border-radius: 2px; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + box-sizing: border-box; + color: $blue-grey-500; + display: inline-block; + font-size: 11px; + height: $unit * 3; + line-height: ($unit * 3) - 2; + margin: ($unit + 4) 0; + padding: 0 $unit; + text-align: center; + text-transform: uppercase; + + // BADGE TYPES + @each $name, $badge in $badges { + &.is-#{$name} { + border-color: map-get($badge, border); + color: map-get($badge, color); + } + } +} \ No newline at end of file diff --git a/public/resources/css/module/_banner.scss b/public/resources/css/module/_banner.scss index 610f084a23..45b8bcc6ab 100644 --- a/public/resources/css/module/_banner.scss +++ b/public/resources/css/module/_banner.scss @@ -1,128 +1,31 @@ /* * Banner * -* Addtional announcements that generally follow a hero +* Addtional information about the page located below the hero */ -.banner-floaty { - width: 920px; - height: 112px; - background-color: rgba(255, 255, 255, 1) !important; - -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5); - -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5); - box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5); - position: absolute; - margin-top: -50px; - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; - z-index: 1; - display: table; - padding: 0 !important; - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - padding: 0; - } - - @media(max-width: 959px) { - width: 100%; - height: 56px; - padding: 16px 0 !important; - } - - .banner-ng-annoucement { - display: flex; - justify-content: space-around; - align-content: space-around; - align-items: center; - height: 100%; - - @media(max-width: 959px) { - flex-direction: column; - justify-content: space-between; - align-content: space-between; - - .banner-text { - padding: 16px 0; - margin: 0 16px; - } - } - - .banner-text { - font-size: 16px; - color: #607D8B; - } - - .banner-button { - a { - color: #607D8B; - background-color: #ECEFF1; - padding: 0; - line-height: 36px; - padding-left: 20px; - padding-right: 20px; - } - } - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - background: none; - padding-left: 0px; - margin: 0px 0px $unit 0px; - text-align: center; - } - } -} - .banner { - background: $mist; - padding: ($unit * 2) ($unit * 6); - min-height: $unit * 1; + background: rgba($blue-grey-50, .24); + border-bottom: 1px solid $blue-grey-50; + box-sizing: border-box; + font-size: 18px; + font-weight: 200; + padding: ($unit * 4) ($unit * 6); + height: 97px; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + include respond-to('mobile') { padding: ($unit * 2); } - &.is-centered { - text-align: center; + &.is-plain { + background: $white; + height: auto; + overflow: visible; } - .button.button-large { - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - display: block; - } - } - .ng-conf-logo { - background: url('/resources/images/logos/ng-conf/ng-conf-shield.png') left no-repeat; - padding: $unit 68px; - } - - .angularconnect-logo { - background: url('/resources/images/logos/angularconnect/angularconnect-logo-med.png') left no-repeat; - padding: $unit 0 $unit 108px; - } - - h3 { - opacity: .87; - line-height: 34px; - margin: 0; - } - - h4 { - line-height: 24px; - } - - p, - h4 { - margin: 0px; + p, .text-body { + color: $blue-grey-500; + font-size: 18px; } } \ No newline at end of file diff --git a/public/resources/css/module/_buttons.scss b/public/resources/css/module/_buttons.scss index 57d5142a21..bc51e3c377 100644 --- a/public/resources/css/module/_buttons.scss +++ b/public/resources/css/module/_buttons.scss @@ -3,7 +3,8 @@ * */ -.button { +.button, +a.button.md-button { display: inline-block; line-height: $unit * 4; padding: 0px ($unit * 2); @@ -39,11 +40,11 @@ &.button-secondary { background: $fog; - color: rgba($snow, .87); + color: rgba($white, .87); } &.button-plain { - background: $snow; + background: $white; color: rgba($steel, .87); } @@ -54,21 +55,23 @@ &.button-navy { background: $ocean; - color: rgba($snow, .87); + color: rgba($white, .87); } &.button-banner { background: $metal; - color: rgba($snow, .87); + color: rgba($white, .87); } - &.button-shield { - background: $regal url('/resources/images/logos/inverse/shield/22.png') 24px 13px no-repeat; - color: rgba($snow, .87); + &.button-shield, + &.button-shield.md-button { + background-color: $blue-600; + background: $blue-600 url('/resources/images/logos/inverse/shield/22.png') 24px 13px no-repeat; + color: rgba($white, .87); padding-left: 54px; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { - background: $regal url('/resources/images/logos/inverse/shield/22@2x.png') 24px 13px no-repeat; + background: $blue-600 url('/resources/images/logos/inverse/shield/22@2x.png') 24px 13px no-repeat; background-size: 22px 22px; } } diff --git a/public/resources/css/module/_callout.scss b/public/resources/css/module/_callout.scss index 91bf12333b..f29599c6bc 100644 --- a/public/resources/css/module/_callout.scss +++ b/public/resources/css/module/_callout.scss @@ -3,10 +3,10 @@ padding: 0px; header { - color: $snow; + color: $white; padding: 0px ($unit * 2); - line-height: $unit * 4; - font-size: 14px; + line-height: $unit * 3; + font-size: 13px; font-weight: 500; text-transform: uppercase; } @@ -18,29 +18,29 @@ } &.is-critical { - border-color: $cardinal; - background: $peach; + border-color: $red-700; + background: rgba($red-50, .24); header { - background: $cardinal; + background: $red-700; } } &.is-important { - border-color: $citrus; - background: $sand; + border-color: $amber-700; + background: rgba($amber-50, .24); header { - background: $citrus; + background: $amber-700; } } &.is-helpful { - border-color: $blueberry; - background: $light; + border-color: $blue-600; + background: rgba($blue-50, .24); header { - background: $blueberry; + background: $blue-600; } } } \ No newline at end of file diff --git a/public/resources/css/module/_card.scss b/public/resources/css/module/_card.scss index 05844f4138..1df0b56433 100644 --- a/public/resources/css/module/_card.scss +++ b/public/resources/css/module/_card.scss @@ -1,55 +1,66 @@ .card { - margin-bottom: $unit * 4; - box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); - border-radius: 2px; + background: $white; + border-radius: 4px; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + box-sizing: border-box; + float: left; + height: 194px; + margin-bottom: $unit * 3; + min-width: 216px; + padding-bottom: $unit * 6; + position: relative; + transition: box-shadow .5s; - header { - background: $mist; - padding: $unit * 2; - border-radius: 2px 2px 0px 0px; + &:hover { + border: 2px solid $blue-500; + box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12); + text-decoration: none; h2 { - margin: ($unit * 2) 0px 0px 0px; + color: $blue-500; + padding: (($unit * 2) - 2) (($unit * 2) - 2) 0 (($unit * 2) - 2); } + + p { + color: $blue-grey-600; + padding: 0 (($unit * 2) - 2); + } + + footer { + line-height: ($unit * 6) - 4; + padding: 0 (($unit * 2) - 2); + } + } + + + h2 { + color: $blue-grey-600; + font-size: 20px; + font-weight: 400; + line-height: $unit * 3; + margin: 0 0 $unit 0; + padding: ($unit * 2) ($unit * 2) 0 ($unit * 2); + text-transform: none; } p { + color: $blue-grey-400; + font-size: 13px; + line-height: $unit * 3; padding: 0px ($unit * 2); - margin-bottom: 0px; - } - - .card-content { - border-bottom: 1px solid $mist; - padding: $unit * 2; - - &:last-child { - border-bottom: none; - } - - h3 { - margin: 0px; - } - - ul { - padding: 0px; - margin: 0px 0px 0px ($unit * 4); - - a { - font-size: 14px; - display: block; - line-height: 24px; - text-decoration: none; - padding: 0px 4px; - - &:hover { - text-decoration: underline; - background: $mist; - } - } - } + margin: 0; } footer { + bottom: 0; + border-top: 1px solid $blue-grey-50; + box-sizing: border-box; + line-height: $unit * 6; + left: 0; + padding: 0 ($unit * 2); + position: absolute; + right: 0; + a { color: $blueberry; font-size: 13px; diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss index 849868cb1c..cdabec146c 100644 --- a/public/resources/css/module/_code-box.scss +++ b/public/resources/css/module/_code-box.scss @@ -1,66 +1,77 @@ -.code-box { +/* +* Code Box Module +* +* Code examples with multiple sections (tabs) +* +*/ + + +/* +* Variables +*/ + +$codebox-anti-pattern-color: $red-700; +$codebox-primary-color: $blue-600; +$codebox-selected: $white; + + +/* +* Class +*/ + +.code-box, +.code-example { + background: $white; + border: 2px solid $codebox-primary-color; border-radius: 4px; - background: $lightgrey; - margin-bottom: $unit * 2; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + margin-bottom: $unit * 3; + + &.is-anti-pattern { + border: 2px solid $codebox-anti-pattern-color; + + header { + background: $codebox-anti-pattern-color; + } + } header { - background: #1976D2; - color: $snow; - padding: $unit $unit 0px $unit; - border-radius: 4px 4px 0px 0px; + background: $codebox-primary-color; + color: $white; + padding: $unit $unit 0 $unit; } - &__live-code { - background-color: #cfd8dc; - height: 36px; - color: $snow; - padding: 0 $unit; - border-radius: 4px 4px 0px 0px; - margin-bottom: 0; - - & a { - font-size: 14px; - text-decoration: none; - border-bottom: 1px $regal dotted; - - &:hover { - border-bottom: 1px $regal solid; - } - } - - &--icon { - font-size: 14px; - color: $regal; - } + h4 { + color: $white; + font-size: 13px; + font-weight: 600; + line-height: $unit * 3; + margin: 0; + outline: none; + padding: 0 0 $unit $unit; + text-transform: none; } - nav { - button { - line-height: $unit * 3.5; - height: $unit * 3.5; - padding: 0px ($unit * 3); - margin-right: $unit; - font-size: 13px; - background: #3F94E9; - color: $snow; - border-radius: 4px 4px 0px 0px; - text-transform: none; + nav button { + background: $blue-400; + border-radius: 2px 2px 0 0; + color: $white; + font-size: 13px; + height: $unit * 4; + line-height: $unit * 4; + margin-right: $unit; + outline: none; + padding: 0 ($unit * 3); + text-transform: none; - &.is-selected, - &.selected - { - background: $lightgrey; - color: $darkgrey; - } + &.is-selected, + &.selected { + background: $white; + color: $blue-grey-600; } } .prettyprint { - box-shadow: none; - margin: 0px; + background: $codebox-selected; } -} - -pre { - margin-top: 0; } \ No newline at end of file diff --git a/public/resources/css/module/_code-shell.scss b/public/resources/css/module/_code-shell.scss new file mode 100644 index 0000000000..befd3c027a --- /dev/null +++ b/public/resources/css/module/_code-shell.scss @@ -0,0 +1,40 @@ +/* +* Code Shell Module +* +* Style +* +*/ + + +/* +* Variables +*/ + +$code-shell-background: $blue-grey-800; +$code-shell-color: $light-green-A400; + + +/* +* Class +*/ + +.code-shell { + background: $code-shell-background; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + border-radius: 2px; + display: block; + margin-bottom: $unit * 2; + min-height: $unit * 8; + overflow: hidden; + + .prettyprint { + background: $code-shell-background; + color: $code-shell-color; + padding: $unit * 3; + + .pln, + .pun { + color: $code-shell-color; + } + } +} \ No newline at end of file diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss index 3f66dcbb31..c929211cee 100644 --- a/public/resources/css/module/_code.scss +++ b/public/resources/css/module/_code.scss @@ -1,43 +1,76 @@ /* -* Embedded Code +* Code Syntax Highlighting & Formatting * -* Style for embedded code examples */ -.cp_embed_iframe { - overflow: hidden; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - width: 240px !important; +/* +* Variables +*/ + +$prettyprint-background: $white; +$prettyprint-color: $blue-grey-700; + + +/* +* Copy Code Button +*/ + +.copy-container-template { + position: relative; + + &:hover .copy-button .md-button { + opacity: 1; + } + + .copy-button { + &.is-copied .md-button { + background: $blue-grey-50; + box-shadow: none; + color: $cyan-500; + min-width: 98px; + } + + .md-button { + background: $cyan-500; + border-radius: 2px; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + color: $white; + font-size: 12px; + height: $unit * 4; + line-height: $unit * 4; + min-height: $unit * 4; + min-width: 98px; + margin: 0; + opacity: 0; + right: $unit * 2; + padding: 0 ($unit * 2); + position: absolute; + top: $unit * 2; + z-index: 1; + transition: all .2s; + } } } /* -* Code Snippets -* -* These Code snippets are transformed by prettify and the code -* below represents a custom theme that works with their formatting. +* Pretty Print Styles */ .prettyprint { + background: $prettyprint-background; white-space: pre-wrap; - background: $lightgrey; + color: $prettyprint-color; font-family: $mono-font; - color: $darkgrey; - width: auto; + font-size: 14px; + line-height: 24px; + margin: 0; overflow: auto; position: relative; padding: 0px; - font-size: 13px; - // font-weight: 600; - line-height: 24px; - margin-bottom: $unit * 3; - // box-shadow: 0px 2px 5px rgba($coal, .3); - border-radius: 4px; padding: ($unit * 2) ($unit * 4); + width: auto; &.linenums, &[class^="linenums:"], @@ -46,7 +79,7 @@ } &.is-showcase { - border: 4px solid $regal; + border: 4px solid $blue-600; } code { @@ -56,27 +89,31 @@ } ol { - background: $lightgrey; - padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7); + background: rgba($blue-grey-50, .24); + color: $blue-grey-200; + padding: 0 0 0 ($unit * 5); margin: 0px; overflow: auto; - // font-weight: 600; - font-size: 13px; + font-size: 11px; li { - color: $bismark; - background: none; - margin-bottom: 5px; - line-height: normal; + background: $white; + margin: 0; + line-height: $unit * 3; list-style-type: decimal; - font-size: 12px; + padding: 0 0 0 ($unit * 2); + &:first-child { + padding-top: $unit * 3; + } &:last-child { - margin-bottom: 0px; + margin-bottom: 0; + padding-bottom: $unit * 3; } code { background: none; + color: $blue-grey-700; font-size: 13px; } } @@ -94,43 +131,43 @@ padding: 2px 4px; } .pnk { - background: $fog; - color: $darkgrey; + background: $blue-grey-50; + color: $blue-grey-900; } .blk { - background: $storm; + background: $blue-grey-900; } .otl { - outline: 1px solid rgba(darkgrey, .56); + outline: 1px solid rgba($blue-grey-700, .56); } .kwd { - color: $pink; + color: $pink-600; } .typ, .tag { - color: $pink; + color: $pink-600; } .str, .atv { - color: $olive; + color: $teal-600; } .atn { - color: $olive; + color: $teal-600; } .com { - color: $olive; + color: $teal-600; } .lit { - color: $olive; + color: $teal-600; } .pun { - color: $bismark; + color: $blue-grey-700; } .pln { - color: $darkgrey; + color: $blue-grey-700; } .dec { - color: $olive; + color: $teal-600; } @@ -140,42 +177,56 @@ */ @media print { - background: $lightgrey; border: none; box-shadow: none; ol { - background: $lightgrey; + background: $white; } .kwd { - color: $pink; + color: $pink-600; } .typ, .tag { - color: $pink; + color: $pink-600; } .str, .atv { - color: $olive; + color: $teal-600; } .atn { - color: $olive; + color: $teal-600; } .com { - color: $olive; + color: $teal-600; } .lit { - color: $olive; + color: $teal-600; } .pun { - color: $bismark; + color: $blue-grey-700; } .pln { - color: $darkgrey; + color: $blue-grey-700; } .dec { - color: $olive; + color: $teal-600; } } } + + +/* +* Embedded Code +* +* Style for embedded code examples +*/ + +.cp_embed_iframe { + overflow: hidden; + + @include respond-to('mobile') { + width: 240px !important; + } +} diff --git a/public/resources/css/module/_copy.scss b/public/resources/css/module/_copy.scss deleted file mode 100644 index b1a295c96a..0000000000 --- a/public/resources/css/module/_copy.scss +++ /dev/null @@ -1,10 +0,0 @@ -.copy-container-template { - position: relative; - - & > .copy-button { - margin-top: 8px; - right: 0; - z-index: 1; - position: absolute; - } -} \ No newline at end of file diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss index 65d9197dc9..4713b58685 100644 --- a/public/resources/css/module/_dropdown.scss +++ b/public/resources/css/module/_dropdown.scss @@ -1,77 +1,104 @@ .dropdown { - position: relative; + background: $blue-grey-50; + bottom: 0; + box-sizing: border-box; + box-shadow: 0 -1px 2px rgba($black, 0.12); + left: 0; + margin: 0; + padding: $unit * 2; + position: fixed; + width: $sidenav-width; z-index: $layer-1; - margin: ($unit * 2) 0 0 0; + + @include respond-to('mobile') { + display: none; + width: 100%; + + .is-visible & { + display: block; + } + } .dropdown-button { - background: rgba($snow, .1); + background: rgba($blue-grey-100, .56); border: none; - border-radius: 3px; + border-radius: 2px; + box-sizing: border-box; + color: $blue-grey-600; + display: block; text-transform: none; font-weight: normal; font-size: 14px; - line-height: $unit * 4; + line-height: $unit * 5; padding: 0px ($unit * 4) 0px ($unit * 2); - margin: (1.25 * $unit) 0; + margin: 0; cursor: pointer; position: relative; + width: 100%; z-index: $layer-1; opacity: 0.87; - letter-spacing: .010em; - min-height:4.5 * $unit; - white-space:nowrap; - -webkit-font-smoothing:antialiased; - -webkit-user-select:none; .icon { + color: $blue-grey-200; + font-size: 24px; position: absolute; - top: 50%; + top: $unit; right: $unit; - -ms-transform: translateY(-50%); - -webkit-transform: translateY(-50%); - transform: translateY(-50%); z-index: $layer-1; - font-size: 20px; opacity: .87; } + + &:hover { + background: $white; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + color: $blue-600; + + .icon { + color: $blue-600; + } + } } .dropdown-menu { - background: $snow; - box-shadow: 0px 2px 5px rgba($coal, .3); - position: absolute; - top: 1.25 * $unit; - left: 0px; - z-index: $layer-5; + background: $white; + bottom: $unit * 2; + border-radius: 2px; + box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12); display: none; - border-radius: 3px; + left: $unit * 2; + list-style-type: none; + margin: 0; overflow: hidden; - - ul { - list-style-type: none; - border-bottom: 1px solid $fog; - margin: 0px; - padding: 0px; - - &:last-child { - margin: 0; - } - } + padding: 0; + position: absolute; + right: $unit * 2; + z-index: $layer-5; li { + border-bottom: 1px solid $blue-grey-50; margin: 0px; + padding: 0; + + &:last-child { + border: none; + } } a { display: block; - line-height: $unit * 5; + font-size: 12px; + line-height: $unit * 7; + margin: 0; padding: 0px ($unit * 2); - font-size: 14px; text-decoration: none; text-align: left; font-weight: 400; - text-transform: uppercase; - color: $metal; + color: $blue-grey-600; + + &:hover { + background: $white; + color: $blue-600; + } } } } \ No newline at end of file diff --git a/public/resources/css/module/_example-title.scss b/public/resources/css/module/_example-title.scss deleted file mode 100644 index 5c39fdd0bf..0000000000 --- a/public/resources/css/module/_example-title.scss +++ /dev/null @@ -1,21 +0,0 @@ -.example-title { - @extend .alert; - - color: $snow; - padding: 0 ($unit * 2); - font-size: 14px; - // font-weight: 500; - border-color: #1976D2; - background: #1976D2; - box-shadow: none; - // temporary hack to remove space between example title and code-example - margin-bottom: -5px; - z-index: 1; - position: relative; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} -.example-title.avoid { - background: #E0343D; - border-color: #E0343D; -} diff --git a/public/resources/css/module/_filetree.scss b/public/resources/css/module/_filetree.scss index ac9531d4e7..c1b4ec5128 100644 --- a/public/resources/css/module/_filetree.scss +++ b/public/resources/css/module/_filetree.scss @@ -1,28 +1,45 @@ +/* +* File Tree Module +* +*/ + + +/* +* Class +*/ + .filetree { - padding: 12px 24px; - background: $mist; + background: $white; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + border: 4px solid $blue-grey-50; + margin: 0 0 ($unit * 3) 0; + padding: $unit * 3; + .file { display: block; font-family: $mono-font; line-height: 32px; - color: $platinum; + color: $blue-grey-600; } + .children { - padding-left: 24px; + padding-left: $unit * 3; position: relative; overflow: hidden; + .file { position: relative; + &:before { content: ''; left: -18px; bottom: 16px; - width: 12px; + width: $unit * 2; height: 9999px; position: absolute; - border-width: 0 0 2px 2px; + border-width: 0 0 1px 1px; border-style: solid; - border-color: #bccad1; + border-color: $blue-grey-100; border-radius: 0 0 0 3px; } } diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index d0376f476c..14ab30a64c 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -19,9 +19,7 @@ padding: $unit * 6; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + @include respond-to('mobile') { padding: ($unit * 3) 0px; } } @@ -31,9 +29,7 @@ height: 200px; width: 200px; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + @include respond-to('mobile') { display: none; } } @@ -41,9 +37,7 @@ h3 { font-size: 20px; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + @include respond-to('mobile') { margin-bottom: $unit; } } @@ -53,9 +47,7 @@ margin: 0px; list-style-type: none; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + @include respond-to('mobile') { margin-bottom: $unit * 5; } @@ -67,9 +59,7 @@ color: $snow; text-decoration: none; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + @include respond-to('mobile') { display: block; text-decoration: none; padding: 0px ($unit * 2); @@ -87,18 +77,33 @@ } footer { - text-align: center; - padding: $unit * 2; + text-align: left; + padding: ($unit * 2) ($unit * 6); position: relative; .styleguide-trigger { + box-sizing: border-box; position: absolute; - top: $unit * 2; + display: inline-block; + bottom: $unit * 2; right: $unit * 2; font-size: 14px; - line-height: 20px; - padding: 0px $unit; + line-height: 24px; + height: 24px; + margin: 0; + padding: 0 ($unit * 3); opacity: .24; + transition: all .3s; + + &:hover { + background: $blue-grey-700; + text-decoration: none; + } + + .icon-favorite { + display: inline-block; + line-height: 24px; + } } } } \ No newline at end of file diff --git a/public/resources/css/module/_form.scss b/public/resources/css/module/_form.scss new file mode 100644 index 0000000000..d06630a6dd --- /dev/null +++ b/public/resources/css/module/_form.scss @@ -0,0 +1,154 @@ +/* +* Form Module +* +*/ + + +/* +* Variables +*/ + +$form: '.form'; + + +/* +* SEARCH BAR +*/ + +#{$form}-search { + position: relative; + + input { + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + box-sizing: border-box; + border: 1px solid $white; + color: $blue-600; + font-size: 16px; + height: $unit * 4; + line-height: $unit * 4; + outline: none; + padding: 0 ($unit *2) 0 ($unit * 4); + transition: all .2s; + + // PLACEHOLDER TEXT + &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: $blue-grey-100; + font-size: 14px; + } + &::-moz-placeholder { /* Firefox 19+ */ + color: $blue-grey-100; + font-size: 14px; + } + &:-ms-input-placeholder { /* IE 10+ */ + color: $blue-grey-100; + font-size: 14px; + } + &:-moz-placeholder { /* Firefox 18- */ + color: $blue-grey-100; + font-size: 14px; + } + + &:active, + &:focus { + border: 1px solid $blue-400; + box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12); + } + } + + .material-icons { + color: $blue-grey-100; + font-size: 20px; + left: $unit; + position: absolute; + top: 6px; + z-index: $layer-1; + } +} + +/* +* Select Menu +*/ + +$form-select-width: 200px; + +#{$form}-select-menu { + position: relative; + width: $form-select-width; + + .overlay { + display: none; + z-index: $layer-1; + + &.visible { + display: block; + } + } + + #{$form}-select-button { + background: $white; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + box-sizing: border-box; + border: 1px solid $white; + color: $blue-grey-600; + font-size: 12px; + font-weight: 400; + height: $unit * 4; + line-height: $unit * 4; + outline: none; + padding: 0 ($unit * 2); + text-align: left; + width: $form-select-width - ($unit * 2); + + strong { + font-weight: 600; + margin-right: $unit; + text-transform: uppercase; + } + + &.has-symbol { + .symbol { + margin-right: $unit; + } + } + } + + #{$form}-select-dropdown { + background: $white; + box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12); + border-radius: 4px; + display: none; + left: -$unit; + list-style-type: none; + margin: 0; + padding: $unit 0; + position: absolute; + top: -$unit; + width: 200px; + z-index: $layer-2; + + &.visible { + display: block; + } + + li { + cursor: pointer; + font-size: 14px; + line-height: $unit * 4; + margin: 0; + padding: 0 ($unit * 2) 0 ($unit * 5); + position: relative; + transition: all .2s; + + &:hover { + background: $blue-grey-50; + } + + .symbol { + left: $unit * 2; + position: absolute; + top: $unit; + z-index: $layer-5; + } + } + } +} diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index 1a86ed9d0a..398599042d 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -1,21 +1,129 @@ -$hero-padding: ($unit * 10) ($unit * 6) ($unit * 7); +/* +* 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 { + box-sizing: border-box; + box-shadow: none; + padding: ($unit * 6) ($unit * 6) ($unit * 4) ($unit * 6); position: relative; - padding: $hero-padding; - height: $unit * 10; + height: 168px; - .hero-cta { - a { - padding-left: 48px; - padding-right: 48px; + @include respond-to('mobile') { + height: auto; + padding-top: 40px; + } + + .hero-title { + display: inline-block; + font-size: 28px; + font-weight: 400; + float: left; + line-height: 48px; + margin: 0 $unit 0 0; + opacity: .87; + text-transform: uppercase; + + &.is-standard-case { + text-transform: none; } } + .hero-subtitle { + font-size: 14px; + font-weight: 400; + line-height: $unit * 3; + margin: 0; + opacity: .87; + text-transform: uppercase; + } + + + // CTA BUTTONS + .button { + margin: 0px $unit; + + @include respond-to('mobile') { + margin: ($unit * 2) 0px; + display: block; + } + } + + button { + // Override md-button from angular material to align language select with hero title. + margin: 0 !important; + } + + + /* + * Large Banner + */ + + &.is-large { + height: $unit * 70; + padding-top: ($unit * 4); + text-align: center; + + @include respond-to('mobile') { + height: auto; + } + + h1 { + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: $unit * 4; + } + + // LARGE SHEILD LOGO + .hero-logo { + filter: drop-shadow(0 2px 2px rgba($black, 0.24)); + margin-bottom: $unit; + opacity: 1; + padding: 0; + width: $unit * 30; + + @include respond-to('mobile') { + width: $unit * 24; + } + } + + .hero-cta, + .hero-cta.md-button { + background: rgba($white, .87); + border-radius: 2px; + color: $blue-800; + font-weight: 500; + padding: 0 ($unit * 8); + transition: all .3s; + + &:hover { + background: $white; + box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12); + color: $blue-600; + } + } + } + + + + + /* + * Badges + */ + .hero-title-with-badges { margin-bottom: $unit; } - .status-circle { margin-right: 4px; border-radius: 50%; @@ -23,48 +131,17 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7); height: 10px; display: inline-block; } - // status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade .status-deprecated { background: #E53935; } - .status-stable { background: #558b2f; } - .status-experimental { background: #9575cd; } - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - height: auto; - padding-top: 40px; - } - - &.is-large { - height: 478px; - padding-top: ($unit * 2); - text-align: center; - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - height: auto; - } - } - - .inner-header { - display: flex; - justify-items: center; - flex-wrap: wrap; - - @media screen and (max-width: 599px) { - margin: ($unit * 6) 0px 0px 0px; - } - } .badges { display: flex; @@ -105,82 +182,4 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7); margin-bottom: $unit * 2; } } - - button { - // Override md-button from angular material to align language select with hero title. - margin: 0 !important; - } - - .hero-title { - display: inline; // title will be inline with badges - text-transform: uppercase; - margin: 0; - margin-right: 8px; - opacity: .87; - - &.is-standard-case { - text-transform: none; - } - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - // reduce size of api doc title on small screens, prevents cut text on long titles - font-size: 28px; - } - } - - .hero-subtitle { - margin: 0; - opacity: 1; - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - margin: 0px; - } - } - - // LARGE SHEILD LOGO - .hero-logo { - position: relative; - padding-top: 224px; - opacity: 1; - width: $unit * 70; - margin: ($unit * 3) auto ($unit * 5) auto; - font-weight: 400; - - &:after { - content: ''; - background: url('/resources/images/logos/angular2/angular.svg') top center no-repeat; - background-size: contain; - position: absolute; - left: 0; - top: 0; - right: 0; - height: 224px; - } - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - width: auto; - font-size: 20px; - line-height: 28px; - margin: ($unit * 2) auto; - padding-top: 208px; - } - } - - // CTA BUTTONS - .button { - margin: 0px $unit; - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - margin: ($unit * 2) 0px; - display: block; - } - } } diff --git a/public/resources/css/module/_lists.scss b/public/resources/css/module/_lists.scss new file mode 100644 index 0000000000..030d699bc1 --- /dev/null +++ b/public/resources/css/module/_lists.scss @@ -0,0 +1,53 @@ +/* +* List Styles +* +*/ + + + +/* +* Secondary List Class +* +*/ + +.secondary-content-list, +.docs-content .secondary-content-list { + margin-top: $unit * 6; + + h4 { + color: $blue-grey-400; + font-size: 14px; + font-weight: 400; + line-height: $unit * 4; + border-bottom: 1px solid $blue-grey-50; + margin: 0; + text-transform: uppercase; + } + + ul { + list-style-type: none; + padding: $unit 0; + } + + li { + margin: 0; + padding: 0; + } + + li a { + background: $white; + color: $blue-grey-400; + display: block; + font-size: 12px; + line-height: $unit * 4; + padding: 0 $unit; + text-decoration: none; + transition: all .3s; + + &:hover { + background: rgba($blue-grey-50, .56); + color: $blue-500; + transition: none; + } + } +} \ No newline at end of file diff --git a/public/resources/css/module/_main-nav.scss b/public/resources/css/module/_main-nav.scss index 0b4f135283..bd2f56e4cb 100644 --- a/public/resources/css/module/_main-nav.scss +++ b/public/resources/css/module/_main-nav.scss @@ -1,46 +1,58 @@ -.main-nav { - height: 56px; - min-height: 56px; - padding: 0px ($unit * 2); - box-shadow: 0px 2px 5px 0 rgba($coal, 0.26); +/* +* Main Navigation +* +* Top main navigation for website +*/ - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - padding: 0px 0px 0px ($unit * 2); - } + +/* +* Variables +*/ + +$main-nav-height: $unit * 7; +$main-nav-background: $blue-700; + + +/* +* Class +*/ + +.main-nav { + background: $main-nav-background; + height: $main-nav-height; + min-height: $main-nav-height; + padding: 0px; + box-shadow: 0px 2px 5px 0 rgba($black, 0.24); .feedback-button { margin-top: 10px; } h1 { - margin: 0px ($unit * 10) 0px 0px; + margin: 0 ($unit * 9) 0 0; padding: 0px; - height: 36px; - width: 136px; + height: $main-nav-height; + width: 168px; float: left; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - margin: 0; - } - - a { - background: url('/resources/images/logos/standard/logo-nav.png') 0px 8px no-repeat; + .md-button, a { + background: url('/resources/images/logos/standard/logo-nav.png') 16px 8px no-repeat; + border-radius: 0; display: block; - height: 56px; - width: 135px; + height: $main-nav-height; overflow: hidden; text-indent: -3000px; margin:0; padding: 0; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { - background: url('/resources/images/logos/standard/logo-nav@2x.png') 0px 8px no-repeat; + background: url('/resources/images/logos/standard/logo-nav@2x.png') 16px 8px no-repeat; background-size: 135px 36px; } + + &:hover { + background-color: $blue-600; + } } } @@ -53,11 +65,9 @@ margin: 0px 0px 0px 0px; } - .main-nav-button { - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint), - screen and (max-width: 960px) { + .main-nav-button, + .main-nav-button.md-button { + @include respond-to('mobile') { display: block; float: none; line-height: $unit * 6; @@ -77,10 +87,8 @@ } // Make main nav icons disappear in favor of site map menu - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint), - screen and (max-width: 960px) { + @include respond-to('mobile') { + background: $main-nav-background; box-shadow: 0px 2px 5px rgba(0, 0, 0, .3); float: none; position: absolute; @@ -88,7 +96,6 @@ right: 0px; left: 0px; z-index: $layer-6; - background: $ocean; display: none; li { @@ -100,10 +107,11 @@ // NAV BUTTON STYLES - .main-nav-button { + .main-nav-button, + .main-nav-button.md-button { line-height: 56px; display: inline-block; - color: $snow; + color: $white; text-decoration: none; padding: 0px ($unit * 2); text-transform: uppercase; @@ -117,9 +125,10 @@ letter-spacing: 0.16px; margin: 0; min-width: auto; + transition: all .3s; &:hover { - background: $ocean; + background-color: $blue-600; } // ICONS @@ -138,7 +147,7 @@ } // DROPDOWN TRIGGER BUTTON - .main-nav-mobile-trigger { + .main-nav-button.main-nav-mobile-trigger { display: none; padding: 0px (24px + $unit) 0px $unit; font-size: 14px; @@ -150,10 +159,7 @@ } // Show sitemap menu - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint), - screen and (max-width: 960px) { + @include respond-to('mobile') { display: inline-block; } } diff --git a/public/resources/css/module/_shadow.scss b/public/resources/css/module/_shadow.scss index c6da606ce9..3951bef85d 100644 --- a/public/resources/css/module/_shadow.scss +++ b/public/resources/css/module/_shadow.scss @@ -12,21 +12,21 @@ } .shadow-1 { - box-shadow: 0 1px 4px 0 rgba($coal, 0.37); + box-shadow: 0 1px 4px 0 rgba($black, 0.37); } .shadow-2 { - box-shadow: 0 2px 2px 0 rgba($coal, 0.2), 0 6px 10px 0 rgba($coal, 0.3); + box-shadow: 0 2px 2px 0 rgba($black, 0.2), 0 6px 10px 0 rgba($black, 0.3); } .shadow-3 { - box-shadow: 0 11px 7px 0 rgba($coal, 0.19),0 13px 25px 0 rgba($coal, 0.3); + box-shadow: 0 11px 7px 0 rgba($black, 0.19),0 13px 25px 0 rgba($black, 0.3); } .shadow-4 { - box-shadow: 0 14px 12px 0 rgba($coal, 0.17), 0 20px 40px 0 rgba($coal, 0.3); + box-shadow: 0 14px 12px 0 rgba($black, 0.17), 0 20px 40px 0 rgba($black, 0.3); } .shadow-5 { - box-shadow: 0 17px 17px 0 rgba($coal, 0.15), 0 27px 55px 0 rgba($coal, 0.3); + box-shadow: 0 17px 17px 0 rgba($black, 0.15), 0 27px 55px 0 rgba($black, 0.3); } \ No newline at end of file diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index 0372c5de84..468e5cb101 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -1,281 +1,287 @@ /* * Side Navigation * +* Left Navigation used in Documenation */ -.side-nav { - background: $mist; - box-shadow: 3px 0px 6px rgba($coal, .3); - width: 232px; + +/* +* Variables +*/ + +$sidenav: '.sidenav'; // Classname +$sidenav-background: $blue-grey-50; +$sidenav-background-dark: $blue-grey-200; +$sidenav-color: $blue-grey-400; +$sidenav-color-selected: $blue-600; +$sidenav-width: 240px; + + + +/* +* Class +*/ + +#{$sidenav} { + background: $sidenav-background; + box-shadow: 3px 0px 6px rgba($black, .24); + padding-bottom: 72px; + width: $sidenav-width; bottom: 0px; overflow: auto; - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - box-shadow: 0px 3px 6px rgba($coal, .3); + // MOBILE STYLE FOR DROPDOWN & TOGGLE + @include respond-to('mobile') { + box-shadow: 0px 3px 6px rgba($black, .24); width: auto; - left: 0px; - right: 0px; + left: 0; + right: 0; bottom: auto; + padding-bottom: 0; + + #{$sidenav}-links { + display: none; + } + + &.is-visible { + bottom: 0; + padding-bottom: 72px; + + #{$sidenav}-links { + display: block; + } + } } .is-hidden { display: none; } +} - // SEARCH BOX - .side-nav-search { - background: $tin; - padding: $unit; - height: $unit * 6; - border-bottom: 1px solid $fog; - position: relative; - height: auto; /* flat nav asked for it. why? */ - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - border-bottom: none; - padding-right: $unit * 14; - overflow: hidden; +/* +* Side Nav Search +*/ + +#{$sidenav}-search { + background: $sidenav-background-dark; + box-sizing: border-box; + box-shadow: none; + padding: $unit; + height: $unit * 6; + position: relative; + + @include respond-to('mobile') { + border-bottom: none; + padding-right: $unit * 14; + overflow: hidden; + } + + input { + border: none; + border-radius: 200px; + box-sizing: border-box; + color: $sidenav-color; + display: inline-block; + font-size: 14px; + height: 32px; + margin: 0px; + padding: 0px $unit; + width: 100%; + + // PLACEHOLDER TEXT + &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: $blue-grey-100; + font-size: 12px; } + &::-moz-placeholder { /* Firefox 19+ */ + color: $blue-grey-100; + font-size: 12px; + } + &:-ms-input-placeholder { /* IE 10+ */ + color: $blue-grey-100; + font-size: 12px; + } + &:-moz-placeholder { /* Firefox 18- */ + color: $blue-grey-100; + font-size: 12px; + } + } - input { - border: none; - border-radius: 200px; - width: 100%; - box-sizing: border-box; - height: 30px; - padding: 0px $unit; - margin: 0px; - font-size: 14px !important; + .mobile-trigger { + position: absolute; + top: 0; + right: $unit * 0.2; + border: none; + background: darken($tin, 5%); + color: $snow; + padding-right: $unit * 4; + display: none; + + @include respond-to('mobile') { display: inline-block; } - .mobile-trigger { + .icon { position: absolute; - top: 0; - right: $unit * 0.2; - border: none; - background: darken($tin, 5%); - color: $snow; - padding-right: $unit * 4; - display: none; - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - display: inline-block; - } - - .icon { - position: absolute; - top: 5px; - right: $unit; - z-index: $layer-1; - font-size: 20px; - opacity: .87; - } - } - } - - .is-nav-title-selected { - color: $regal !important; - background-color: #DCE2E5 !important; - } - - // PRIMARY SIDENAV BUTTON - .side-nav-primary { - list-style-type: none; - margin: 0px; - padding: 0px; - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - display: none; - } - - > li { - margin: 0px; - padding: 0px; - border-bottom: 1px solid $fog; - - &.is-selected { - > a { - background: $fog; - color: $regal; - - .side-nav-icon { - color: $regal; - } - } - } - - > a { - line-height: ($unit * 6) - 1; - padding: 0px ($unit * 2) 0px ($unit * 6); - color: $metal; - font-size: 14px; - text-align: left; - font-weight: 400; - position: relative; - text-decoration: none; - display: block; - text-transform: uppercase; - } - - .side-nav-icon { - position: absolute; - top: 0px; - left: 16px; - z-index: $layer-1; - font-size: 19px; - color: $cloud; - line-height: 47px; - } - } - } - - - // SECONDARY SIDENAV - .side-nav-secondary { - @extend .side-nav-primary; - background-color: #DCE2E5; - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - display: none; - max-height: ($phone-breakpoint * 0.60); - } - - // FLAT NAV (.nav) - .nav-blocks { - margin: 0; - padding: 0; - border-bottom: 1px solid $fog; - color: $heather; - - a { - text-decoration: none; - color: $metal; - display: block; - } - - ul { - list-style: none; - padding: 0; - margin: 0 - } - - div, li { - &.is-selected { - > a { - background: #CDD5DA; - color: #1E88E5; - } - } - } - - li { - min-height: ($unit * 2); - position: relative; - } - } - - .nav-blocks:last-child { - border: none - } - - .nav-title, - .nav-sub-title { - text-transform: uppercase; - font-weight: 500; //medium - color: #78909C; - } - - .nav-title { - font-size: 14px; - - padding: ($unit * 2) ($unit * 2); - margin: 0; - background-color: #ECEFF1; - - .inline-arrow-down-svg { - float: right; - opacity: 0.56; - } - - a { - display: inline; - } - } - - .nav-primary-link { - position: relative; - - a { - padding-left: 16px; - padding-top: 16px; - padding-bottom: 16px; - } - } - - .nav-sub-title { - font-size: ($unit * 1.5); - padding: ($unit * 1) 0; - } - - .nav-active a { - color: $regal; - background: $lightgrey; - font-weight: 500; //medium - } - - .nav-unordered-lists, .nav-ordered-lists { - // Apply inset shadows to the list under the title - box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24), inset 0 -2px 2px rgba(0, 0, 0, 0.08); - - // -- First Child - // Apply inset shadows on the first child when hovering, since the background color will cover the shadow - .nav-list-item:first-child { - &:hover { - box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24); - } - } - - // Apply inset shadows on the first child when selected, since the background color will cover the shadow - .is-selected:first-child a { - box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24); - } - - // -- Last Child - // Apply inset shadows on the last child when hovering, since the background color will cover the shadow - .nav-list-item:last-child { - &:hover { - box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08); - } - } - - // Apply inset shadows on the last child when selected, since the background color will cover the shadow - .is-selected:last-child a { - box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08); - } - } - - .nav-list-item { - a { - font-size: 13px; - font-weight: 400; //medium - padding-left: $unit * 2; - line-height: 32px; - } - - &:hover { - background-color: #CFD8DC; - } + top: 5px; + right: $unit; + z-index: $layer-1; + font-size: 20px; + opacity: .87; } } } + +/* +* Section Dividers +*/ + +#{$sidenav} #{$sidenav}-section-divider { + background: $sidenav-background-dark; + border: none; + color: $white; + font-size: 10px; + line-height: $unit * 3; + margin: 0; + padding: 0; + text-transform: uppercase; + + h3 { + font-weight: 400; + margin: 0; + padding: 0 ($unit * 2); + } +} + + +/* +* Navigation Links +*/ + +#{$sidenav}-links { + list-style-type: none; + margin: 0px; + padding: 0px; + + // SIDENAV MAIN SECTIONS + #{$sidenav}-section { + border-bottom: 1px solid rgba($blue-grey-100, .56); + color: $sidenav-color; + margin: 0; + padding: 0; + + &.no-border { + border: none; + + > a { + line-height: $unit * 6; + } + } + + > a { + box-sizing: border-box; + color: $sidenav-color; + display: block; + font-size: 13px; + font-weight: 400; + line-height: ($unit * 6) - 1; + text-decoration: none; + padding: 0 ($unit * 2); + position: relative; + + &.is-selected { + background: rgba($blue-grey-100, .56); + color: $sidenav-color-selected; + font-weight: 600; + } + + &.is-selected.is-parent { + box-shadow: 0 2px 2px rgba($black, .24); + } + } + + .inline-arrow-down-svg { + opacity: .56; + position: absolute; + right: $unit; + top: $unit + 4; + z-index: $layer-1; + } + + ul { + background: rgba($blue-grey-100, .56); + list-style: none; + padding: 0; + margin: 0 + } + + li { + margin: 0; + padding: 0; + + &.is-selected { + > a { + background: rgba($blue-grey-100, .87); + color: $sidenav-color-selected; + font-weight: 600; + } + } + } + + li a { + color: $sidenav-color; + font-size: 12px; + display: block; + line-height: $unit * 4; + padding: 0 ($unit * 2); + transition: all .2s; + + &:hover { + background: rgba($white, .24); + color: $sidenav-color-selected; + text-decoration: none; + } + } + } + + > li { + margin: 0px; + padding: 0px; + border-bottom: 1px solid $fog; + + &.is-selected { + > a { + background: $fog; + color: $regal; + + #{$sidenav}-icon { + color: $regal; + } + } + } + + > a { + line-height: ($unit * 6) - 1; + padding: 0px ($unit * 2) 0px ($unit * 6); + color: $metal; + font-size: 14px; + text-align: left; + font-weight: 400; + position: relative; + text-decoration: none; + display: block; + text-transform: uppercase; + } + + #{$sidenav}-icon { + position: absolute; + top: 0px; + left: 16px; + z-index: $layer-1; + font-size: 19px; + color: $cloud; + line-height: 47px; + } + } +} \ No newline at end of file diff --git a/public/resources/css/module/_style-guide.scss b/public/resources/css/module/_style-guide.scss index dbbe9b4e45..1ac9dd564b 100644 --- a/public/resources/css/module/_style-guide.scss +++ b/public/resources/css/module/_style-guide.scss @@ -41,12 +41,6 @@ margin-bottom:32px; } -.filetree { - margin-bottom: 32px; - background-color: #FFF; - border:1px solid #1976D2; -} - table tr code-example .prettyprint { margin-bottom: 0; } diff --git a/public/resources/css/module/_symbol.scss b/public/resources/css/module/_symbol.scss new file mode 100644 index 0000000000..e0cf61cc0f --- /dev/null +++ b/public/resources/css/module/_symbol.scss @@ -0,0 +1,84 @@ +/* +* API Symbols +* +*/ + + +/* +* Variables +*/ + +$api-symbols: ( + decorator: ( + content: '@', + background: $blue-800 + ), + directive: ( + content: 'D', + background: $pink-600 + ), + pipe: ( + content: 'P', + background: $blue-grey-600 + ), + class: ( + content: 'C', + background: $blue-500 + ), + interface: ( + content: 'I', + background: $teal-500 + ), + function: ( + content: 'F', + background: $green-500 + ), + enum: ( + content: 'E', + background: $amber-700 + ), + var: ( + content: 'K', + background: $purple-600 + ), + let: ( + content: 'K', + background: $purple-600 + ), + const: ( + content: 'K', + background: $purple-600 + ), + type-alias: ( + content: 'T', + background: $blue-grey-50 + ) +); + + +/* +* Symbol Class +*/ + +.symbol { + border-radius: 2px; + box-shadow: 0 1px 2px rgba($black, .24); + color: $white; + display: inline-block; + font-size: 10px; + font-weight: 600; + line-height: $unit * 2; + text-align: center; + width: $unit * 2; + + // SYMBOL TYPES + @each $name, $symbol in $api-symbols { + &.#{$name} { + background: map-get($symbol, background); + + &:before { + content: map-get($symbol, content); + } + } + } +} diff --git a/public/resources/images/backgrounds/super-hero-large.png b/public/resources/images/backgrounds/super-hero-large.png new file mode 100644 index 0000000000..f883264d14 Binary files /dev/null and b/public/resources/images/backgrounds/super-hero-large.png differ diff --git a/public/resources/images/backgrounds/superhero-paper-large.png b/public/resources/images/backgrounds/superhero-paper-large.png deleted file mode 100644 index fa96a108e1..0000000000 Binary files a/public/resources/images/backgrounds/superhero-paper-large.png and /dev/null differ diff --git a/public/resources/images/backgrounds/superhero-paper.png b/public/resources/images/backgrounds/superhero-paper.png deleted file mode 100644 index 7ccecb3232..0000000000 Binary files a/public/resources/images/backgrounds/superhero-paper.png and /dev/null differ diff --git a/public/resources/images/logos/ng-europe/ng-europe-logo.png b/public/resources/images/logos/ng-europe/ng-europe-logo.png new file mode 100644 index 0000000000..92d68a1776 Binary files /dev/null and b/public/resources/images/logos/ng-europe/ng-europe-logo.png differ diff --git a/public/resources/js/directives/api-list.js b/public/resources/js/directives/api-list.js index d6bc149b8d..a813e5ba4a 100644 --- a/public/resources/js/directives/api-list.js +++ b/public/resources/js/directives/api-list.js @@ -4,17 +4,24 @@ angularIO.directive('apiList', function () { return { restrict: 'E', template: - '