diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade
index e77e805f0c..9b21b49248 100644
--- a/public/_includes/_version-dropdown.jade
+++ b/public/_includes/_version-dropdown.jade
@@ -33,7 +33,7 @@ if language == 'dart'
nav.hero-subtitle.text-subhead.dropdown
- button(md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title}
+ button(md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title}
div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu")
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index 05e448c259..d6927a1b72 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -6,10 +6,10 @@ p.
// STEP 1 - Create a project ##########################
.l-main-section
h2#section-create-project 1. Create a project
-
+
p.
- The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
- To get started, create a new directory.
+ The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
+ To get started, create a new directory.
pre.prettyprint
code.
@@ -19,9 +19,9 @@ p.
// STEP 2 - Add the es6-shim ##########################
.l-main-section
h2#section-add-es6-shim 2. Add the es6-shim
-
+
p. Within your project, clone the es6-shim repository:
-
+
pre.prettyprint
code git clone https://github.com/davideast/conscious.git es6-shim
@@ -32,23 +32,23 @@ p.
.l-sub-section
h3 ES6, AtScript, and the es6-shim
-
+
h4 AtScript
p.
- Angular is built with AtScript. AtScript is an extension of ES6 (ECMAScript 6), the new specification
+ Angular is built with AtScript. AtScript is an extension of ES6 (ECMAScript 6), the new specification
of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular.
-
+
h4 ES6
p.
- AtScript compiles to ES6. ES6 is not widely supported in all browsers today.
+ AtScript compiles to ES6. ES6 is not widely supported in all browsers today.
The es6-shim repository allows you to use ES6 or AtScript in the browser.
-
+
h4 es6-shim
p.
The es6-shim package includes Angular and dependencies needed to compile
- ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
+ ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
Think of the es6-shim repository as package rather than a project.
-
+
// STEP 2 - Import Angular ##########################
@@ -59,7 +59,7 @@ p.
Create two files for this quickstart, an index.html and a
app.es6. Both of these files will be at the root of the project.
The .es6 extension signifies that the file uses ES6 syntax.
-
+
pre.prettyprint.linenums
code touch index.html
| touch app.es6
@@ -78,12 +78,12 @@ p.
h2#section-angular-create-account 3. Define a component
p.
- Components structure and represent the UI. This quickstart demonstrates the process of creating a component.
+ Components structure and represent the UI. This quickstart demonstrates the process of creating a component.
The component will have an HTML tag named app,
<my-app></my-app>.
p.
- A component consists of two parts; the annotation section
+ A component consists of two parts; the annotation section
and the component controller.
pre.prettyprint.linenums
@@ -113,7 +113,7 @@ p.
The selector property is a CSS selector which specifies the HTML tag for the component.
p.
- The @Template annotation defines the template to apply to the component.
+ The @Template annotation defines the template to apply to the component.
This component uses an inline template, but external templates are
available as well. To use an external template specify a url property
and give it the path to the html file.
@@ -162,11 +162,11 @@ p.
h2#section-transpile 4. Bootstrap
p The last step to load the component on the page. At the bottom of app.es6 call the bootstrap() function.
-
+
pre.prettyprint.linenums
code bootstrap(MyAppComponent);
-
-
+
+
p.
Angular provides a bootstrap function that renders a
component to the page. The bootstrap function takes a
@@ -203,19 +203,19 @@ p.
.l-main-section
h2#section-load-component-module 5. Load the component
-
+
p.
The last step is to load the module for the my-app component.
The es6-shim file comes packaged with the System library. We'll
use System to load the component we created above.
-
+
.l-sub-section
h3 System.js
-
+
p.
System is a third-party open sourced library. Most browsers today do not support ES6 module loading. System
- provides module loading functionality to these browsers.
-
+ provides module loading functionality to these browsers.
+
p.
To load the needed modules, System needs to know where to
load the files from. The paths property in System specifies
@@ -226,7 +226,7 @@ p.
li Angular: The Angular framework.
li Runtime assertions: Optional assertions for runtime type checking.
li The my-app component created above: The component to display on the page.
-
+
pre.prettyprint.linenums
code.
<my-app></my-app>
@@ -242,7 +242,7 @@ p.
// Kick off the application
System.import('app');
</script>
-
+
// STEP 6 - Declare the HTML ##########################
.l-main-section
diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss
index f63d7b569b..c2d957bfa7 100644
--- a/public/resources/css/module/_dropdown.scss
+++ b/public/resources/css/module/_dropdown.scss
@@ -3,13 +3,23 @@
z-index: $layer-5;
.dropdown-button {
- background: none;
+ background: rgba($snow, .1);
border: none;
text-transform: none;
font-weight: normal;
line-height: $unit * 4;
- padding: 0px $unit;
+ padding: 0px ($unit * 4) 0px ($unit * 2);
cursor: pointer;
+ position: relative;
+
+ .icon {
+ position: absolute;
+ top: 5px;
+ right: $unit;
+ z-index: $layer-1;
+ font-size: 20px;
+ opacity: .87;
+ }
}
.dropdown-menu {