fix(input): slightly longer delay for autofocus (#12037 )

fix(textarea): apply classes properly
fix(input): better handling of attributes
2026-03-13 10:22:08 +08:00 · 2017-06-14 15:09:23 +02:00 · 2017-06-13 17:26:04 +02:00 · 2017-06-13 14:18:03 +02:00 · 2017-06-13 12:15:51 +02:00 · 2017-06-12 23:17:48 +02:00
289 changed files with 7941 additions and 4137 deletions
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -5,7 +5,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:

 ## Contributing Etiquette

-Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
+Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.


 ## Creating an Issue
@@ -18,16 +18,16 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b

 * Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs reply" and receives no further replies from the author of the issue for more than 5 days, it will be closed.

-* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
+* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.

-* Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
+* Next, [create a new issue](https://github.com/ionic-team/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.


 ## Creating a Pull Request

 * We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

-* Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
+* Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!

 ### Setup

@@ -85,9 +85,9 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
  ```

  where `@name` is the Class name, `@description` is the description displayed on the documentation page, `@see` links to any related pages, and `@demo` links to the API demo located in the `demos` folder.
-2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/driftyco/ionic-site#local-build
+2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/ionic-team/ionic-site#local-build
 3. Then, run `gulp docs` in the `ionic` repo every time you make a change and the site will update.
-4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
+4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/ionic-team/ionic-site/issues


 #### Adding Demos
@@ -106,12 +106,12 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
  ```
 3. Run `gulp watch.demos` to watch for changes to the demo
 4. Navigate to `http://localhost:8000/dist/demos/` and then to your component's demo to view it.
-5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
+5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/ionic-team/ionic-site/issues


 ## Commit Message Format

-We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
+We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).

 `type(scope): subject`

@@ -143,4 +143,4 @@ The subject contains succinct description of the change:

 ## License

-By contributing your code to the driftyco/ionic GitHub Repository, you agree to license your contribution under the MIT license.
+By contributing your code to the ionic-team/ionic GitHub Repository, you agree to license your contribution under the MIT license.
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,5 +1,5 @@
 **Ionic version:**  (check one with "x")
-[ ] **1.x**
+[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
 [ ] **2.x**
 [ ] **3.x**

@@ -17,9 +17,9 @@
 **Steps to reproduce:**
 <!-- If you are able to illustrate the bug or feature request with an example, please provide steps to reproduce and if possible a demo using one of the following templates:

-For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview
+For Ionic V1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

-For Ionic 2 issues - http://plnkr.co/edit/z0DzVL?p=preview
+For Ionic issues - http://plnkr.co/edit/z0DzVL?p=preview
 -->

 **Related code:**
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -2,12 +2,9 @@

 # See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml

+plugin_directories: ['.scss-linters']
+
 exclude:
-  - 'src/components/item/item.ios.scss'
-  - 'src/components/item/item.md.scss'
-  - 'src/components/list/list.ios.scss'
-  - 'src/components/show-hide-when/**'
-  - 'src/components/slides/**'
  - 'src/themes/ionic.mixins.scss'
  - 'src/themes/license.scss'
  - 'src/themes/util.scss'
@@ -19,6 +16,9 @@ linters:
  ColorVariable:
    enabled: false

+  DefaultRule:
+    enabled: true
+
  DuplicateProperty:
    enabled: false

@@ -37,13 +37,10 @@ linters:

      - position
      - top
-      - right
      - bottom
-      - left
      - z-index
      - display
      - overflow
-      - float
      - clear
      -
      - flex
@@ -59,17 +56,6 @@ linters:
      - justify-content
      - order
      -
-      - margin
-      - margin-top
-      - margin-right
-      - margin-bottom
-      - margin-left
-      - padding
-      - padding-top
-      - padding-right
-      - padding-bottom
-      - padding-left
-      -
      - width
      - min-width
      - max-width
@@ -104,12 +90,6 @@ linters:
      - border-bottom-style
      - border-left-style

-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-left-radius
-      - border-bottom-right-radius
-
      - border-color
      - border-top-color
      - border-right-color
@@ -135,7 +115,6 @@ linters:
      - letter-spacing
      - line-height
      - list-style
-      - text-align
      - text-decoration
      - text-indent
      - text-overflow
@@ -156,7 +135,6 @@ linters:
      - background-color
      - background-image
      - background-repeat
-      - background-position
      - background-size

      # Other
@@ -179,7 +157,6 @@ linters:

      - transform
      - transform-box
-      - transform-origin
      - transform-style

      - transition
@@ -204,6 +181,33 @@ linters:
    enabled: true
    style: double_quotes

+  SelectorDepth:
+    enabled: true
+    max_depth: 5
+
  PropertySpelling:
    extra_properties:
      - contain
+    disabled_properties:
+      - background-position
+      - direction
+      - right
+      - left
+      - float
+      - padding
+      - padding-left
+      - padding-right
+      - padding-top
+      - padding-bottom
+      - margin
+      - margin-left
+      - margin-right
+      - margin-top
+      - margin-bottom
+      - border-radius
+      - border-top-left-radius
+      - border-top-right-radius
+      - border-bottom-right-radius
+      - border-bottom-left-radius
+      - text-align
+      - transform-origin
--- a/.scss-linters/default_rule.rb
+++ b/.scss-linters/default_rule.rb
@@ -0,0 +1,18 @@
+module SCSSLint
+  # Reports the use of !default at the end of variable declarations.
+  class Linter::DefaultRule < Linter
+    include LinterRegistry
+
+    def visit_function(node)
+      return true
+    end
+
+    def visit_variable(node)
+      return if source_from_range(node.source_range).include?('!default')
+
+      return unless node_ancestor(node, 2).nil?
+
+      add_lint(node, '!default should be used')
+    end
+  end
+end
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/README.md
+++ b/README.md
@@ -1,37 +1,37 @@
 [![npm version](https://badge.fury.io/js/ionic-angular.svg)](https://badge.fury.io/js/ionic-angular)
-[![Circle CI](https://circleci.com/gh/driftyco/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/driftyco/ionic)
+[![Circle CI](https://circleci.com/gh/ionic-team/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/ionic-team/ionic)

 # Ionic

-[Ionic](http://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
+[Ionic](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
 build top quality native and progressive web apps with web technologies.

 Ionic is based on [Angular](https://angular.io/) and comes with many significant performance, usability, and
 feature improvements over the past versions.

-See the [Building Apps with Ionic](http://adamdbradley.github.io/building-with-ionic2) slides for a quick
+See the [Building Apps with Ionic](https://adamdbradley.github.io/building-with-ionic2) slides for a quick
 overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get
 started using Ionic.

 ### Getting Started

-Start a new project by following our quick [Getting Started guide](http://ionicframework.com/getting-started/).
+Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/).
 We would love to hear from you! If you have any feedback or run into issues using our framework, please file
-an [issue](https://github.com/driftyco/ionic/issues/new) on this repository.
+an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.

 ### Contributing

 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md)
-and then look through our issues with a [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+[contributing](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md)
+and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.

 ### Examples

-The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app.
+The [Ionic Conference App](https://github.com/ionic-team/ionic-conference-app) is a full featured Ionic app.
 It is the perfect starting point for learning and building your own app.

-### Ionic 1.x
+### Ionic V1

-The source code for Ionic 1.x has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1).
-Please open any issues and pull requests related to Ionic 1.x on that repository.
+The source code for Ionic V1 has been moved to [ionic-team/ionic-v1](https://github.com/ionic-team/ionic-v1).
+Please open any issues and pull requests related to Ionic V1 on that repository.
--- a/demos/src/button/pages/page-one/page-one.html
+++ b/demos/src/button/pages/page-one/page-one.html
@@ -39,12 +39,12 @@

  <h4>Icons</h4>

-  <button ion-button icon-left color="dark">
+  <button ion-button icon-start color="dark">
    <ion-icon name="star"></ion-icon>
    Left Icon
  </button>

-  <button ion-button icon-right color="dark">
+  <button ion-button icon-end color="dark">
    Right Icon
    <ion-icon name="star"></ion-icon>
  </button>
--- a/demos/src/item-sliding/pages/page-one/page-one.html
+++ b/demos/src/item-sliding/pages/page-one/page-one.html
@@ -67,7 +67,7 @@
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
-      <ion-item-options (ionSwipe)="download(item)" icon-left>
+      <ion-item-options (ionSwipe)="download(item)" icon-start>
        <button ion-button color="dark" (click)="more(item)">
          <ion-icon name="volume-off"></ion-icon>
          Mute
@@ -85,7 +85,7 @@
 </ion-content>

 <style>
-  /* TODO: spinner is dropping classes so we have to use ids: https://github.com/driftyco/ionic/issues/7087 */
+  /* TODO: spinner is dropping classes so we have to use ids: https://github.com/ionic-team/ionic/issues/7087 */
  #archive-spinner,
  #download-spinner,
  .archiving .expand-hide,
@@ -93,7 +93,7 @@
    display: none;
  }

-  /* TODO: spinner doesn't have a good way to do this yet: https://github.com/driftyco/ionic/issues/7087 */
+  /* TODO: spinner doesn't have a good way to do this yet: https://github.com/ionic-team/ionic/issues/7087 */
  #archive-spinner.spinner-ios line,
  #archive-spinner.spinner-crescent circle {
    stroke: #fff;
--- a/demos/src/loading/pages/page-one/page-one.html
+++ b/demos/src/loading/pages/page-one/page-one.html
@@ -58,7 +58,7 @@

  <ion-toolbar>
    <ion-buttons end>
-      <button ion-button icon-right (click)="goToPage2()">
+      <button ion-button icon-end (click)="goToPage2()">
        Show Loading and Navigate
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/demos/src/navbar/pages/page-one/page-one.html
+++ b/demos/src/navbar/pages/page-one/page-one.html
@@ -55,7 +55,7 @@
    </ion-buttons>
    <ion-title>Solid</ion-title>
    <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
        Help
        <ion-icon name="help-circle"></ion-icon>
      </button>
@@ -69,7 +69,7 @@
      </button>
    </ion-buttons>
    <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
        Help
        <ion-icon name="help-circle"></ion-icon>
      </button>
--- a/demos/src/slides/pages/page-one/page-one.html
+++ b/demos/src/slides/pages/page-one/page-one.html
@@ -1,5 +1,5 @@
 <ion-slides loop="true" style="background-color: black">
  <ion-slide *ngFor="let image of [1,2,3,4,5]">
-    <img data-src="../assets/slide{{image}}.jpeg">
+    <img data-src="./assets/slide{{image}}.jpeg">
  </ion-slide>
 </ion-slides>
--- a/demos/src/tabs/pages/page-one/page-one.html
+++ b/demos/src/tabs/pages/page-one/page-one.html
@@ -41,7 +41,7 @@


  <!-- Icons right of text -->
-  <ion-tabs tabs-only tabsLayout="icon-right" selectedIndex="0" color="light">
+  <ion-tabs tabs-only tabsLayout="icon-end" selectedIndex="0" color="light">
    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
    <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
    <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@@ -49,7 +49,7 @@


  <!-- Icons left of text -->
-  <ion-tabs tabs-only tabsLayout="icon-left" color="dark">
+  <ion-tabs tabs-only tabsLayout="icon-start" color="dark">
    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
    <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
    <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
--- a/demos/src/title/pages/page-one/page-one.html
+++ b/demos/src/title/pages/page-one/page-one.html
@@ -55,7 +55,7 @@
    </ion-buttons>
    <ion-title>Solid</ion-title>
    <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
        Help
        <ion-icon name="help-circle"></ion-icon>
      </button>
@@ -69,7 +69,7 @@
      </button>
    </ion-buttons>
    <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
        Help
        <ion-icon name="help-circle"></ion-icon>
      </button>
--- a/demos/src/toolbar/pages/page-one/page-one.html
+++ b/demos/src/toolbar/pages/page-one/page-one.html
@@ -55,7 +55,7 @@
    </ion-buttons>
    <ion-title>Solid</ion-title>
    <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
        Help
        <ion-icon name="help-circle"></ion-icon>
      </button>
@@ -69,7 +69,7 @@
      </button>
    </ion-buttons>
    <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
        Help
        <ion-icon name="help-circle"></ion-icon>
      </button>
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "private": true,
  "name": "ionic2",
-  "version": "3.2.0",
-  "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2",
+  "version": "3.3.0",
+  "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular",
  "keywords": [
    "ionic",
    "framework",
@@ -17,7 +17,7 @@
  "license": "MIT",
  "repository": {
    "type": "git",
-    "url": "https://github.com/driftyco/ionic.git"
+    "url": "https://github.com/ionic-team/ionic.git"
  },
  "scripts": {
    "test": "gulp validate",
@@ -25,17 +25,17 @@
    "link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link"
  },
  "dependencies": {
-    "@angular/common": "4.1.0",
-    "@angular/compiler": "4.1.0",
-    "@angular/compiler-cli": "4.1.0",
-    "@angular/core": "4.1.0",
-    "@angular/forms": "4.1.0",
-    "@angular/http": "4.1.0",
-    "@angular/platform-browser": "4.1.0",
-    "@angular/platform-browser-dynamic": "4.1.0",
+    "@angular/common": "4.1.3",
+    "@angular/compiler": "4.1.3",
+    "@angular/compiler-cli": "4.1.3",
+    "@angular/core": "4.1.3",
+    "@angular/forms": "4.1.3",
+    "@angular/http": "4.1.3",
+    "@angular/platform-browser": "4.1.3",
+    "@angular/platform-browser-dynamic": "4.1.3",
    "ionicons": "~3.0.0",
-    "rxjs": "5.1.1",
-    "zone.js": "^0.8.10"
+    "rxjs": "5.4.0",
+    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
@@ -131,8 +131,8 @@
    "through2": "2.0.1",
    "ts-node": "1.3.0",
    "tslint": "3.15.1",
-    "tslint-ionic-rules": "0.0.7",
-    "typescript": "~2.3.2",
+    "tslint-ionic-rules": "0.0.8",
+    "typescript": "~2.3.3",
    "vinyl": "1.2.0",
    "webpack": "^2.1.0-beta.27",
    "yargs": "5.0.0"
@@ -146,4 +146,4 @@
  "pre-push#master": [
    "test"
  ]
-}
+}
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -7,7 +7,7 @@ All of these commands require you to run `npm install` first. To see a full list

 ### Committing

-Please follow the commit message format in [CONTRIBUTING.md](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format).
+Please follow the commit message format in [CONTRIBUTING.md](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format).


 ### Installing Nightly Version
@@ -110,6 +110,12 @@ It does not work for windows, linux, or non retina macs.

 - `--dev` runs a dev build when building the e2e tests. This build takes much less time than a production build, so it is advisable to use this when doing quick validation.

+#### Errors
+
+If you are having getting an error running snapshot such as `SessionNotCreatedError: session not created exception` or `UnknownError: Connection refused` the solution is to download the chromedriver from here: http://chromedriver.storage.googleapis.com/index.html?path=2.24/ and then move it into your `protractor/selenium` folder
+
+Running `webdriver-manager help` should show you what directory the webdriver is at under the options. For example, yours may be at `/usr/local/lib/node_modules/protractor/selenium` or if you use nvm `/Users/{username}/.nvm/versions/node/v7.5.0/lib/node_modules/protractor/selenium`.
+
 ### Running Tests

 1. `gulp validate`
@@ -119,7 +125,7 @@ It does not work for windows, linux, or non retina macs.

 **Requires Ruby. Skip this step entirely if you are unable to install Ruby.**

-1. See the [Sass Guidelines](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md#sass-changes) for editing the Sass.
+1. See the [Sass Guidelines](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#sass-changes) for editing the Sass.
 2. Install the linter: `gem install scss_lint`
 3. Run `gulp lint.sass` and fix any linter errors.

@@ -160,13 +166,13 @@ It does not work for windows, linux, or non retina macs.

 ### Releasing Component Demos

-Ionic Component demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit in [ionic-preview-app](https://github.com/driftyco/ionic-preview-app). No action is necessary.
+Ionic Component demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit in [ionic-preview-app](https://github.com/ionic-team/ionic-preview-app). No action is necessary.

-If you'd like to manually update the demos, follow the steps on the preview app for [running locally on the site](https://github.com/driftyco/ionic-preview-app#running-locally-on-the-site).
+If you'd like to manually update the demos, follow the steps on the preview app for [running locally on the site](https://github.com/ionic-team/ionic-preview-app#running-locally-on-the-site).


 ### Releasing API Demos

 Ionic API demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit. No action is necessary.

-If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/driftyco/ionic-site) repo as a sibling of `ionic`. From `ionic` run `gulp demos` and then `gulp docs`, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing.
+If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/ionic-team/ionic-site) repo as a sibling of `ionic`. From `ionic` run `gulp demos` and then `gulp docs`, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing.
--- a/scripts/demos/copy.config.js
+++ b/scripts/demos/copy.config.js
@@ -4,7 +4,7 @@ var path = require('path');
 module.exports = {
  copyAssets: {
    src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
-    dest: '{{WWW}}/assets'
+    dest: path.join('{{WWW}}', 'assets')
  },
  copyIndexContent: {
    src: [path.join(process.cwd(), 'scripts', 'demos', 'index.html')],
@@ -12,7 +12,7 @@ module.exports = {
  },
  copyFonts: {
    src: [`${process.cwd()}/node_modules/ionicons/dist/fonts/**/*`, `${process.cwd()}/src/fonts/**/*`],
-    dest: '{{WWW}}/assets/fonts'
+    dest: path.join('{{WWW}}', 'assets', 'fonts')
  },
  copyPolyfills: {
    src: [path.join(process.cwd(), 'dist', 'demos', 'polyfills', 'polyfills.js')],
--- a/scripts/demos/watch.config.js
+++ b/scripts/demos/watch.config.js
@@ -1,6 +1,6 @@
 var path = require('path');

-var watch = require('../../node_modules/@ionic/app-scripts/dist/watch');
+var watch = require(path.join('..', '..', 'node_modules', '@ionic', 'app-scripts', 'dist', 'watch'));

 var entryPointDirectory = path.dirname(process.env.IONIC_APP_ENTRY_POINT)

@@ -9,7 +9,7 @@ module.exports = {
    paths: [path.join(entryPointDirectory, '..', '**', '*.(ts|html|s(c|a)ss)')],
    options: { ignored: [path.join(entryPointDirectory, '..', '**', '*.spec.ts'),
                  path.join(entryPointDirectory, '..', '**', '*.e2e.ts'),
-                  '**/*.DS_Store'] },
+                  path.join('**', '*.DS_Store')] },
    callback: watch.buildUpdate
  }
 }
--- a/scripts/docs/deploy.sh
+++ b/scripts/docs/deploy.sh
@@ -63,10 +63,10 @@ function run {
  # if no changes, don't commit
  if [[ "$CHANGES" == "" ]]; then
    echo "-- No changes detected for the following commit, docs not updated."
-    echo "https://github.com/driftyco/$CIRCLE_PROJECT_REPONAME/commit/$CIRCLE_SHA1"
+    echo "https://github.com/ionic-team/$CIRCLE_PROJECT_REPONAME/commit/$CIRCLE_SHA1"
  else
    git add -A
-    git commit -am "Automated build of ionic  v$VERSION driftyco/$CIRCLE_PROJECT_REPONAME@$CIRCLE_SHA1"
+    git commit -am "Automated build of ionic  v$VERSION ionic-team/$CIRCLE_PROJECT_REPONAME@$CIRCLE_SHA1"
    # in case a different commit was pushed to ionic-site during doc/demo gen,
    # try to rebase around it before pushing
    git fetch
--- a/scripts/docs/gulp-tasks.js
+++ b/scripts/docs/gulp-tasks.js
@@ -87,8 +87,8 @@ module.exports = function(gulp, flags) {
          }));
        callback();
      }).on('end', function() {
-        gutil.log("Writing to file at", gutil.colors.cyan("/driftyco/ionic/" + outputFile));
-        gutil.log("Place this file in", gutil.colors.cyan("/driftyco/ionic-site/" + config.v2DocsDir + "/theming/overriding-ionic-variables/"), "in order to update the docs");
+        gutil.log("Writing to file at", gutil.colors.cyan("/ionic-team/ionic/" + outputFile));
+        gutil.log("Place this file in", gutil.colors.cyan("/ionic-team/ionic-site/" + config.v2DocsDir + "/theming/overriding-ionic-variables/"), "in order to update the docs");
        mkdirp.sync('tmp');
        fs.writeFileSync(outputFile, JSON.stringify(variables));
      }));
--- a/scripts/docs/templates/common.template.html
+++ b/scripts/docs/templates/common.template.html
@@ -225,7 +225,7 @@ Delegate: <$ doc.delegate $>

 </h1>

-<a class="improve-v2-docs" href="http://github.com/driftyco/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
+<a class="improve-v2-docs" href="http://github.com/ionic-team/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
 Improve this doc
 </a>

--- a/scripts/e2e/copy.config.js
+++ b/scripts/e2e/copy.config.js
@@ -4,15 +4,15 @@ var path = require('path');
 module.exports = {
  copyAssets: {
    src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
-    dest: '{{WWW}}/assets'
+    dest: path.join('{{WWW}}', 'assets')
  },
  copyIndexContent: {
    src: [path.join(process.cwd(), 'scripts', 'e2e', 'index.html')],
    dest: '{{WWW}}'
  },
  copyFonts: {
-    src: [`${process.cwd()}/node_modules/ionicons/dist/fonts/**/*`, `${process.cwd()}/src/fonts/**/*`],
-    dest: '{{WWW}}/assets/fonts'
+    src: [path.join(process.cwd(), 'node_modules', 'ionicons', 'dist', 'fonts', '**', '*'), path.join(process.cwd(), 'src', 'fonts', '**', '*')],
+    dest: path.join('{{WWW}}', 'assets', 'fonts')
  },
  copyPolyfills: {
    src: [path.join(process.cwd(), 'dist', 'e2e', 'polyfills', 'polyfills.ng.js')],
--- a/scripts/e2e/e2e-publish.js
+++ b/scripts/e2e/e2e-publish.js
@@ -4,7 +4,7 @@ module.exports = function(options) {
  var fs = require('fs');
  var path = require('path');
  var request = require('request');
-  var inputDir = path.join(__dirname, '../../dist/e2e/tests');
+  var inputDir = path.join(__dirname, '..', '..' , 'dist', 'e2e', 'tests');
  var uploadQueue = [];

  var ignoreFiles = /(\/test\/|\/ts\/|\/q\/|\/ionic-site\/|\/docs\/|\/examples\/|\/inquirer\/|\/lodash\/|\/tooling\/|\/colors\/|\/bin\/|\.ts$|\.bin|\.map$|\.md$|\.git|\.scss$|\.yml$|\.yaml$|\.dart$|\.txt|\.npm|bower|DS_Store|LICENSE)/i;
@@ -13,15 +13,15 @@ module.exports = function(options) {
    fs.readdir(dir, function(err, list) {

      list.forEach(function(file) {
-        var url = urlPath + '/' + file;
+        var url = path.join(urlPath, file);


-        fs.stat(dir + '/' + file, function(err, stat) {
+        fs.stat(path.join(dir, file), function(err, stat) {
          if (stat && stat.isDirectory()) {
-            uploadFiles(dir + '/' + file, urlPath + '/' + file);
+            uploadFiles(path.join(dir, file), path.join(urlPath, file);
          } else {
            if ( shouldProcessPath (url) ){
-              uploadFile(url, dir + '/' + file);
+              uploadFile(url, path.join(dir, file));
            }
          }
        });
--- a/scripts/e2e/index.html
+++ b/scripts/e2e/index.html
@@ -22,8 +22,6 @@

    if (location.href.indexOf('rtl=true') > -1) {
      document.dir = 'rtl';
-    } else {
-      document.dir = 'ltr';
    }

    window.domCount = function domCount(ele) {
--- a/scripts/e2e/variables.scss
+++ b/scripts/e2e/variables.scss
@@ -31,7 +31,15 @@ $colors: (
  light:      #f4f4f4,
  dark:       #222,
  vibrant:    rebeccapurple,
-  bright:     #ffc125
+  bright:     #ffc125,
+  greyYellow: (
+    base:#49606e,
+    contrast:#fbb636
+  ),
+  greyWhite: (
+    base:#49606e,
+    contrast:#fff
+  )
 );


--- a/scripts/git/clone.sh
+++ b/scripts/git/clone.sh
@@ -17,7 +17,7 @@ function run {
  git config --global user.email "hi@ionicframework.com"
  git config --global user.name "Ionitron"

-  git clone git@github.com:driftyco/$REPOSITORY.git $DIRECTORY $ARGS
+  git clone git@github.com:ionic-team/$REPOSITORY.git $DIRECTORY $ARGS
  cd $DIRECTORY
  git fetch origin --tags
  cd ../
--- a/scripts/gulp/constants.ts
+++ b/scripts/gulp/constants.ts
@@ -20,7 +20,7 @@ export const BUNDLES = 'bundles';
 export const SITE_NAME = 'ionic-site';

 // File Paths
-export const PROJECT_ROOT = join(__dirname, '../..');
+export const PROJECT_ROOT = join(__dirname, '..', '..');
 export const DEMOS_ROOT = join(PROJECT_ROOT, DEMOS_NAME);
 export const DEMOS_SRC_ROOT = join(DEMOS_ROOT, SRC_NAME);
 export const DIST_ROOT = join(PROJECT_ROOT, DIST_NAME);
@@ -45,7 +45,7 @@ export const WORKERS_SRC = join(SCRIPTS_ROOT, 'workers');

 // NPM
 export const NPM_VENDOR_FILES = [
-  '@angular', 'core-js/client', 'rxjs', 'systemjs/dist', 'zone.js/dist'
+  '@angular', join('core-js', 'client'), 'rxjs', join('systemjs', 'dist'), join('zone.js', 'dist')
 ];


--- a/scripts/gulp/tasks/build.ts
+++ b/scripts/gulp/tasks/build.ts
@@ -1,4 +1,5 @@
 import { task } from 'gulp';
+import { join } from 'path';
 import { DIST_BUILD_ROOT, DIST_BUILD_ES2015_ROOT, DIST_BUILD_UMD_ROOT, ES5, ES_2015, PROJECT_ROOT, UMD_MODULE } from '../constants';
 import { copySourceToDest, createTempTsConfig, deleteFiles, runNgc, runTsc } from '../util';

@@ -7,8 +8,8 @@ export function buildIonicAngularUmd(excludeSpec: boolean, stripDebug: boolean,
  const stream = copySourceToDest(DIST_BUILD_UMD_ROOT, excludeSpec, true, stripDebug);
  stream.on('end', () => {
    // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES5, UMD_MODULE, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
-    runNgc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, UMD_MODULE, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'));
+    runNgc(join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'), (err) => {
      if (err) {
        done(err);
        return;
@@ -27,8 +28,8 @@ export function buildIonicAngularUmdTsc(excludeSpec: boolean, stripDebug: boolea
  const stream = copySourceToDest(DIST_BUILD_UMD_ROOT, excludeSpec, true, stripDebug);
  stream.on('end', () => {
    // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES5, UMD_MODULE, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
-    runTsc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, UMD_MODULE, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'));
+    runTsc(join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'), (err) => {
      if (err) {
        done(err);
        return;
@@ -48,8 +49,8 @@ export function buildIonicAngularEsm(stripDebug: boolean, done: Function) {
  const stream = copySourceToDest(DIST_BUILD_ROOT, true, true, stripDebug);
  stream.on('end', () => {
    // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES5, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ROOT}/tsconfig.json`);
-    runNgc(`${DIST_BUILD_ROOT}/tsconfig.json`, (err) => {
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, ES_2015, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_ROOT, 'tsconfig.json'));
+    runNgc(join(DIST_BUILD_ROOT, 'tsconfig.json'), (err) => {
      if (err) {
        done(err);
        return;
@@ -67,8 +68,8 @@ export function buildIonicPureEs6(stripDebug: boolean, done: Function) {
  const stream = copySourceToDest(DIST_BUILD_ES2015_ROOT, true, true, stripDebug);
  stream.on('end', () => {
    // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES_2015, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ES2015_ROOT}/tsconfig.json`);
-    runNgc(`${DIST_BUILD_ES2015_ROOT}/tsconfig.json`, (err) => {
+    createTempTsConfig([join('.', '**', '*.ts')], ES_2015, ES_2015, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_ES2015_ROOT, 'tsconfig.json'));
+    runNgc(join(DIST_BUILD_ES2015_ROOT, 'tsconfig.json'), (err) => {
      if (err) {
        done(err);
        return;
--- a/scripts/gulp/tasks/demos.dev.ts
+++ b/scripts/gulp/tasks/demos.dev.ts
@@ -11,14 +11,14 @@ task('demos.watch', ['demos.prepare'], (done: Function) => {
    done(new Error(`Usage: gulp e2e.watch --folder modal`));
  }

-  serveDemo(folderInfo.componentName).then(() => {
+  serveDemo(folderInfo.componentName, folderInfo.devApp).then(() => {
    done();
  }).catch((err: Error) => {
    done(err);
  });
 });

-function serveDemo(folderName: any) {
+function serveDemo(folderName: any, devApp: boolean) {

  const ionicAngularDir = join(PROJECT_ROOT, 'src');
  const srcTestRoot = join(DEMOS_ROOT, 'src', folderName);
@@ -40,5 +40,5 @@ function serveDemo(folderName: any) {
  const appNgModulePath = join(srcTestRoot, 'app', 'app.module.ts');
  const distDir = join(distDemoRoot, 'www');

-  return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath);
+  return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath, devApp);
 }
--- a/scripts/gulp/tasks/docs.ts
+++ b/scripts/gulp/tasks/docs.ts
@@ -132,8 +132,8 @@ task('docs.sassVariables', () => {
        callback();
    }).on('end', () => {
      const config = require('../../config.json');
-      console.log(`Writing to file at /driftyco/ionic/${outputFile}`);
-      console.log(`Place this file in /driftyco/ionic-site/${config.v2DocsDir}/theming/overriding-ionic-variables in order to update the docs`);
+      console.log(`Writing to file at /ionic-team/ionic/${outputFile}`);
+      console.log(`Place this file in /ionic-team/ionic-site/${config.v2DocsDir}/theming/overriding-ionic-variables in order to update the docs`);
      mkdirp.sync('tmp');
      writeFileSync(outputFile, JSON.stringify(variables));
    }));
--- a/scripts/gulp/tasks/e2e.dev.ts
+++ b/scripts/gulp/tasks/e2e.dev.ts
@@ -13,14 +13,14 @@ task('e2e.watch', ['e2e.prepare'], (done: Function) => {
    return;
  }

-  serveTest(folderInfo).then(() => {
+  serveTest(folderInfo, folderInfo.devApp).then(() => {
    done();
  }).catch((err: Error) => {
    done(err);
  });
 });

-function serveTest(folderInfo: any) {
+function serveTest(folderInfo: any, devApp: boolean) {

  const ionicAngularDir = join(PROJECT_ROOT, 'src');
  const srcTestRoot = join(PROJECT_ROOT, 'src', 'components', folderInfo.componentName, 'test', folderInfo.componentTest);
@@ -47,5 +47,5 @@ function serveTest(folderInfo: any) {
  const appNgModulePath = join(dirname(appEntryPoint), 'app.module.ts');
  const distDir = join(distTestRoot, 'www');

-  return runAppScriptsServe(folderInfo.componentName + '/' + folderInfo.componentTest, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null);
+  return runAppScriptsServe(join(folderInfo.componentName, folderInfo.componentTest), appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null, devApp);
 }
--- a/scripts/gulp/tasks/e2e.prod.ts
+++ b/scripts/gulp/tasks/e2e.prod.ts
@@ -21,7 +21,7 @@ task('e2e.prepare', (done: Function) => {

 task('e2e.prepareSass', (done: Function) => {
  const version = `E2E-${createTimestamp()}`;
-  writeFileSync(join(SRC_ROOT, 'themes/version.scss'), `$ionic-version: "${version}";`);
+  writeFileSync(join(SRC_ROOT, 'themes', 'version.scss'), `$ionic-version: "${version}";`);
  done();
 });

@@ -41,7 +41,7 @@ task('e2e.prod', ['e2e.prepare'], (done: Function) => {
 });

 function e2eComponentExists(folderInfo: any): boolean {
-  let componentPath = `${SRC_COMPONENTS_ROOT}/${folderInfo.componentName}/test/${folderInfo.componentTest}/app`;
+  let componentPath = join(SRC_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'app');

  try {
    accessSync(componentPath);
@@ -62,11 +62,11 @@ function filterE2eTestfiles() {
    const folderInfo = getFolderInfo();
    if (folderInfo && folderInfo.componentName && folderInfo.componentTest) {
      if (!e2eComponentExists(folderInfo)) {
-        console.log(`Can't find E2E test "${folderInfo.componentName}/test/${folderInfo.componentTest}". Make sure that the test exists and you are passing the correct folder.`);
+        console.log('Cannot find E2E test ', join(folderInfo.componentName, 'test', folderInfo.componentTest), '. Make sure that the test exists and you are passing the correct folder.');
        return [];
      }
      const filtered = entryPoints.filter(entryPoint => {
-        return entryPoint.indexOf(`${folderInfo.componentName}/test/${folderInfo.componentTest}`) >= 0;
+        return entryPoint.indexOf(join(folderInfo.componentName, 'test', folderInfo.componentTest)) >= 0;
      });
      return filtered;
    }
@@ -121,7 +121,7 @@ function buildTest(filePath: string) {
  const relativePathFromComponents = relative(dirname(SRC_COMPONENTS_ROOT), srcTestRoot);
  const distTestRoot = join(process.cwd(), 'dist', 'e2e', relativePathFromComponents);

-  const includeGlob = [ join(ionicAngularDir, '**', '*.ts')];
+  const includeGlob = [join(ionicAngularDir, '**', '*.ts')];
  const pathToWriteFile = join(distTestRoot, 'tsconfig.json');
  const pathToReadFile = join(PROJECT_ROOT, 'tsconfig.json');

@@ -154,7 +154,7 @@ function copyProtractorTestContent(filePaths: string[]): Promise<any> {
 }

 function applyTemplate(filePathContent: Map<string, string>) {
-  const buildConfig = require('../../build/config');
+  const buildConfig = require(join('..', '..', 'build', 'config'));
  const templateFileContent = readFileSync(join(SCRIPTS_ROOT, 'e2e', 'e2e.template.js'));
  const templater = template(templateFileContent.toString());
  const modifiedMap = new Map<string, string>();
@@ -235,7 +235,7 @@ task('e2e.polyfill', (done: Function) => {
    return done();
  }

-  writePolyfills('dist/e2e/polyfills').then(() => {
+  writePolyfills(join('dist', 'e2e', 'polyfills')).then(() => {
    done();
  }).catch(err => {
    done(err);
@@ -249,9 +249,8 @@ task('e2e.openProd', (done: Function) => {
 task('e2e.open', (done: Function) => {
  const folderInfo = getFolderInfo();
  if (folderInfo && folderInfo.componentName && folderInfo.componentTest) {
-    const filePath = `${folderInfo.componentName}/test/${folderInfo.componentTest}/www/index.html`;
-    const fullPath = join(DIST_E2E_COMPONENTS_ROOT, filePath);
-    const spawnedCommand = spawn('open', [fullPath]);
+    const filePath = join(DIST_E2E_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'www', 'index.html');
+    const spawnedCommand = spawn('open', [filePath]);

    spawnedCommand.on('close', (code: number) => {
      done();
--- a/scripts/gulp/tasks/lint.ts
+++ b/scripts/gulp/tasks/lint.ts
@@ -17,7 +17,8 @@ task('lint.sass', function() {
  return src([
      'src/**/*.scss',
      '!src/components/*/test/**/*',
-      '!src/util/test/*'
+      '!src/util/test/*',
+      '!src/themes/normalize.scss',
    ])
    .pipe(scsslint())
    .pipe(scsslint.failReporter());
--- a/scripts/gulp/tasks/polyfill.source.ts
+++ b/scripts/gulp/tasks/polyfill.source.ts
@@ -1,9 +1,10 @@
 import { task } from 'gulp';
 import { writePolyfills } from '../util';
+import { join } from 'path';


 task('src.polyfill', (done: Function) => {
-  writePolyfills('scripts/polyfill').then(() => {
+  writePolyfills(join('scripts', 'polyfills')).then(() => {
    done();
  }).catch(err => {
    done(err);
--- a/scripts/gulp/tasks/polyfill.ts
+++ b/scripts/gulp/tasks/polyfill.ts
@@ -1,10 +1,11 @@
 import { task, src, dest } from 'gulp';
 import { writePolyfills } from '../util';
+import { join } from 'path';

 task('polyfill', ['polyfill.copy-readme', 'polyfill.write']);

 task('polyfill.write', (done: Function) => {
-  writePolyfills('dist/ionic-angular/polyfills').then(() => {
+  writePolyfills(join('dist', 'ionic-angular', 'polyfills')).then(() => {
    done();
  }).catch(err => {
    done(err);
@@ -12,6 +13,6 @@ task('polyfill.write', (done: Function) => {
 });

 task('polyfill.copy-readme', (done: Function) => {
-  return src('scripts/polyfill/readme.md')
-    .pipe(dest('dist/ionic-angular/polyfills/'), done);
+  return src(join('scripts', 'polyfill', 'readme.md'))
+    .pipe(dest(join('dist', 'ionic-angular', 'polyfills')), done);
 });
--- a/scripts/gulp/tasks/release.ts
+++ b/scripts/gulp/tasks/release.ts
@@ -86,7 +86,7 @@ task('release.publishGithubRelease', (done: Function) => {
  })
  .pipe(obj(function(file, enc, cb){
    github.releases.createRelease({
-      owner: 'driftyco',
+      owner: 'ionic-team',
      repo: 'ionic',
      target_commitish: 'master',
      tag_name: 'v' + packageJSON.version,
--- a/scripts/gulp/tasks/snapshot.ts
+++ b/scripts/gulp/tasks/snapshot.ts
@@ -77,7 +77,9 @@ function protractor(callback, args, testId: string) {

  console.log(`Serving ${process.cwd()} on http://localhost:${buildConfig.protractorPort}`);

-  const child = spawn('protractor', args, {
+  let spawnCommand = process.platform === 'win32' ? 'protractor.cmd' : 'protractor';
+
+  const child = spawn(spawnCommand, args, {
    stdio: [process.stdin, process.stdout, 'pipe']
  });

--- a/scripts/gulp/util.ts
+++ b/scripts/gulp/util.ts
@@ -1,4 +1,4 @@
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import { NODE_MODULES_ROOT, SRC_ROOT } from './constants';
 import { src, dest } from 'gulp';
 import { dirname, join } from 'path';
@@ -60,7 +60,9 @@ export function createTempTsConfig(includeGlob: string[], target: string, module
    config.compilerOptions = Object.assign(config.compilerOptions, overrideCompileOptions);
  }

+  // TS represents paths internally with '/' and expects the tsconfig path to be in this format
  let json = JSON.stringify(config, null, 2);
+  json = json.replace(/\\\\/g, '/');

  const dirToCreate = dirname(pathToWriteFile);
  ensureDirSync(dirToCreate);
@@ -188,7 +190,7 @@ export function runWebpack(pathToWebpackConfig: string, done: Function) {
  });
 }

-export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string) {
+export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string, devApp: boolean) {
  console.log('Running ionic-app-scripts serve with', testOrDemoName);
  const deepLinksDir = dirname(dirname(appNgModulePath));
  let scriptArgs = [
@@ -203,9 +205,11 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
    '--ionicAngularDir', ionicAngularDir,
    '--sass', sassConfigPath,
    '--copy', copyConfigPath,
-    '--enableLint', 'false',
-    '--bonjour'
+    '--enableLint', 'false'
  ];
+  if (devApp) {
+    scriptArgs.push('--bonjour');
+  }

  if (watchConfigPath) {
    scriptArgs.push('--watch');
@@ -218,9 +222,11 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
  }

  return new Promise((resolve, reject) => {
-    const args = ['./node_modules/.bin/ionic-app-scripts'].concat(scriptArgs);
-    console.log(`node ${args.join(' ')}`);
-    const spawnedCommand = spawn('node', args, {stdio: 'inherit'});
+    let pathToAppScripts = join(NODE_MODULES_ROOT, '.bin', 'ionic-app-scripts');
+    pathToAppScripts = process.platform === 'win32' ? pathToAppScripts + '.cmd' : pathToAppScripts;
+
+    const spawnedCommand = spawn(pathToAppScripts, scriptArgs, {stdio: 'inherit'});
+    console.log(`${pathToAppScripts} ${scriptArgs.join(' ')}`);

    spawnedCommand.on('close', (code: number) => {
      if (code === 0) {
@@ -346,9 +352,11 @@ export function getFolderInfo() {
    componentName = folderSplit[0];
    componentTest = (folderSplit.length > 1 ? folderSplit[1] : 'basic');
  }
+  const devApp = argv.devapp !== undefined;
  return {
    componentName: componentName,
-    componentTest: componentTest
+    componentTest: componentTest,
+    devApp: devApp
  };
 }

--- a/scripts/karma/karma.config.ts
+++ b/scripts/karma/karma.config.ts
@@ -95,4 +95,4 @@ export function config(config) {
    singleRun: true
  });

-};
+};
--- a/scripts/npm/package.json
+++ b/scripts/npm/package.json
@@ -5,7 +5,7 @@
  "keywords": [],
  "repository": {
    "type": "git",
-    "url": "https://github.com/driftyco/ionic.git"
+    "url": "https://github.com/ionic-team/ionic.git"
  },
  "license": "MIT",
  "main": "umd/index.js",
--- a/scripts/polyfill/readme.md
+++ b/scripts/polyfill/readme.md
@@ -38,7 +38,7 @@ weak maps / weak sets

 ## polyfills.ng.js

-Only the required polyfill for Angular 2. This does not come with any ES6 polyfills. Note that all polyfill files listed here included the required polyfills for Angular 2 to work correctly.
+Only the required polyfill for Angular. This does not come with any ES6 polyfills. Note that all polyfill files listed here included the required polyfills for Angular to work correctly.

 ### Targets:

--- a/scripts/templates/component/module.ts.tmpl
+++ b/scripts/templates/component/module.ts.tmpl
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { IonicPageModule } from 'ionic-angular';
+import { IonicModule } from 'ionic-angular';
 import { $CLASSNAME } from './$FILENAME';

@NgModule({
@@ -7,7 +7,7 @@ import { $CLASSNAME } from './$FILENAME';
    $CLASSNAME,
  ],
  imports: [
-    IonicPageModule.forChild($CLASSNAME),
+    IonicModule,
  ],
  exports: [
    $CLASSNAME
--- a/scripts/templates/provider/ts.tmpl
+++ b/scripts/templates/provider/ts.tmpl
@@ -6,7 +6,7 @@ import 'rxjs/add/operator/map';
  Generated class for the $CLASSNAME provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
-  for more info on providers and Angular 2 DI.
+  for more info on providers and Angular DI.
 */
@Injectable()
 export class $CLASSNAME {
--- a/src/components/action-sheet/action-sheet-component.ts
+++ b/src/components/action-sheet/action-sheet-component.ts
@@ -22,13 +22,13 @@ import { ViewController } from '../../navigation/view-controller';
        '<div class="action-sheet-group">' +
          '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
          '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
-          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
+          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
            '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
            '{{b.text}}' +
          '</button>' +
        '</div>' +
        '<div class="action-sheet-group" *ngIf="cancelButton">' +
-          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
+          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
            '<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
            '{{cancelButton.text}}' +
          '</button>' +
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -6,8 +6,20 @@
 /// @prop - Text align of the action sheet
 $action-sheet-ios-text-align:                           center !default;

-/// @prop - Padding of the action sheet
-$action-sheet-ios-padding:                              0 10px !default;
+// deprecated
+$action-sheet-ios-padding:                              null !default;
+
+/// @prop - Padding top of the action sheet
+$action-sheet-ios-padding-top:                          0 !default;
+
+/// @prop - Padding end of the action sheet
+$action-sheet-ios-padding-end:                          10px !default;
+
+/// @prop - Padding bottom of the action sheet
+$action-sheet-ios-padding-bottom:                       $action-sheet-ios-padding-top !default;
+
+/// @prop - Padding start of the action sheet
+$action-sheet-ios-padding-start:                        $action-sheet-ios-padding-end !default;

 /// @prop - Bottom margin of the action sheet button group
 $action-sheet-ios-group-margin-bottom:                  10px !default;
@@ -78,37 +90,38 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }

 .action-sheet-ios .action-sheet-container {
-  padding: $action-sheet-ios-padding;
+  @include deprecated-variable(padding, $action-sheet-ios-padding) {
+    @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
+  }
 }

 .action-sheet-ios .action-sheet-group {
+  @include border-radius($action-sheet-ios-border-radius);
+  @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
+
  overflow: hidden;

-  margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
-
-  border-radius: $action-sheet-ios-border-radius;
  background: $action-sheet-ios-background;
 }

 .action-sheet-ios .action-sheet-group:last-child {
-  margin-bottom: $action-sheet-ios-group-margin-bottom;
+  @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
 }

 .action-sheet-ios .action-sheet-title {
+  @include padding($action-sheet-ios-title-padding);
  @include text-align($action-sheet-ios-text-align);
-
-  padding: $action-sheet-ios-title-padding;
+  @include border-radius($action-sheet-ios-title-border-radius);

  border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
-  border-radius: $action-sheet-ios-title-border-radius;
  font-size: $action-sheet-ios-title-font-size;
  font-weight: $action-sheet-ios-title-font-weight;
  color: $action-sheet-ios-title-color;
 }

 .action-sheet-ios .action-sheet-button {
-  margin: 0;
-  padding: $action-sheet-ios-button-padding;
+  @include margin(0);
+  @include padding($action-sheet-ios-button-padding);

  min-height: $action-sheet-ios-button-min-height;

@@ -123,7 +136,7 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }

 .action-sheet-ios .action-sheet-button.activated {
-  margin-top: -$action-sheet-ios-button-border-width;
+  @include margin(-$action-sheet-ios-button-border-width, null, null, null);

  border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
  border-bottom-color: $action-sheet-ios-button-background-activated;
--- a/src/components/action-sheet/action-sheet.md.scss
+++ b/src/components/action-sheet/action-sheet.md.scss
@@ -18,8 +18,20 @@ $action-sheet-md-title-color:                           #757575 !default;
 /// @prop - Font size of the action sheet title
 $action-sheet-md-title-font-size:                       1.6rem !default;

-/// @prop - Padding of the action sheet title
-$action-sheet-md-title-padding:                         11px 16px 17px !default;
+// deprecated
+$action-sheet-md-title-padding:                         null !default;
+
+/// @prop - Padding top of the action sheet title
+$action-sheet-md-title-padding-top:                     11px !default;
+
+/// @prop - Padding end of the action sheet title
+$action-sheet-md-title-padding-end:                     16px !default;
+
+/// @prop - Padding bottom of the action sheet title
+$action-sheet-md-title-padding-bottom:                  17px !default;
+
+/// @prop - Padding start of the action sheet title
+$action-sheet-md-title-padding-start:                   $action-sheet-md-title-padding-end !default;

 /// @prop - Minimum height of the action sheet button
 $action-sheet-md-button-min-height:                     4.8rem !default;
@@ -30,8 +42,20 @@ $action-sheet-md-button-text-color:                     #222 !default;
 /// @prop - Font size of the action sheet button
 $action-sheet-md-button-font-size:                      1.6rem !default;

-/// @prop - Padding of the action sheet button
-$action-sheet-md-button-padding:                        0 16px !default;
+// deprecated
+$action-sheet-md-button-padding:                        null !default;
+
+/// @prop - Padding top of the action sheet button
+$action-sheet-md-button-padding-top:                    0 !default;
+
+/// @prop - Padding end of the action sheet button
+$action-sheet-md-button-padding-end:                    16px !default;
+
+/// @prop - Padding bottom of the action sheet button
+$action-sheet-md-button-padding-bottom:                 $action-sheet-md-button-padding-top !default;
+
+/// @prop - Padding start of the action sheet button
+$action-sheet-md-button-padding-start:                  $action-sheet-md-button-padding-end !default;

 /// @prop - Background color of the action sheet button
 $action-sheet-md-button-background:                     transparent !default;
@@ -51,11 +75,23 @@ $action-sheet-md-icon-text-align:                       center !default;
 /// @prop - Vertical align of the icon in the action sheet button
 $action-sheet-md-icon-vertical-align:                   middle !default;

-/// @prop - Margin of the icon in the action sheet button
-$action-sheet-md-icon-margin:                           0 32px 0 0 !default;
+// deprecated
+$action-sheet-md-icon-margin:                           null !default;
+
+/// @prop - Margin top of the icon in the action sheet button
+$action-sheet-md-icon-margin-top:                       0 !default;
+
+/// @prop - Margin end of the icon in the action sheet button
+$action-sheet-md-icon-margin-end:                       32px !default;
+
+/// @prop - Margin bottom of the icon in the action sheet button
+$action-sheet-md-icon-margin-bottom:                    0 !default;
+
+/// @prop - Margin start of the icon in the action sheet button
+$action-sheet-md-icon-margin-start:                     0 !default;

 .action-sheet-md .action-sheet-container {
-  padding: .8rem 0;
+  @include padding(.8rem, 0);

  background: $action-sheet-md-background;
 }
@@ -63,10 +99,12 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 .action-sheet-md .action-sheet-title {
  @include text-align($action-sheet-md-text-align);

-  padding: $action-sheet-md-title-padding;
-
  font-size: $action-sheet-md-title-font-size;
  color: $action-sheet-md-title-color;
+
+  @include deprecated-variable(padding, $action-sheet-md-title-padding) {
+    @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
+  }
 }

 .action-sheet-md .action-sheet-button {
@@ -75,13 +113,16 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
  position: relative;
  overflow: hidden;

-  padding: $action-sheet-md-button-padding;
-
  min-height: $action-sheet-md-button-min-height;

  font-size: $action-sheet-md-button-font-size;
  color: $action-sheet-md-button-text-color;
  background: $action-sheet-md-button-background;
+
+
+  @include deprecated-variable(padding, $action-sheet-md-button-padding) {
+    @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
+  }
 }

 .action-sheet-md .action-sheet-button.activated {
@@ -89,15 +130,17 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 }

 .action-sheet-md .action-sheet-icon {
+  @include padding(0);
  @include text-align($action-sheet-md-icon-text-align);

-  margin: $action-sheet-md-icon-margin;
-  padding: 0;
-
  width: $action-sheet-md-icon-width;

  font-size: $action-sheet-md-icon-font-size;
  vertical-align: $action-sheet-md-icon-vertical-align;
+
+  @include deprecated-variable(margin, $action-sheet-md-icon-margin) {
+    @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
+  }
 }

 .action-sheet-md .action-sheet-group {
--- a/src/components/action-sheet/action-sheet.scss
+++ b/src/components/action-sheet/action-sheet.scss
@@ -11,9 +11,9 @@ $action-sheet-max-width:                         500px !default;


 ion-action-sheet {
+  @include position(0, null, null, 0);
+
  position: absolute;
-  top: 0;
-  left: 0;
  z-index: $z-index-overlay;
  display: block;

@@ -22,19 +22,16 @@ ion-action-sheet {
 }

 .action-sheet-wrapper {
+  @include position(null, 0, 0, 0);
+  @include margin(auto);
+  @include transform(translate3d(0, 100%, 0));
+
  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
  z-index: $z-index-overlay-wrapper;
  display: block;

-  margin: auto;
-
  width: $action-sheet-width;
  max-width: $action-sheet-max-width;
-
-  transform: translate3d(0, 100%, 0);
 }

 .action-sheet-button {
--- a/src/components/action-sheet/action-sheet.wp.scss
+++ b/src/components/action-sheet/action-sheet.wp.scss
@@ -15,8 +15,20 @@ $action-sheet-wp-box-shadow-color:                rgba(0, 0, 0, .2) !default;
 /// @prop - Box shadow of the action sheet
 $action-sheet-wp-box-shadow:                      0 -1px 0 $action-sheet-wp-box-shadow-color !default;

-/// @prop - Padding of the action sheet title
-$action-sheet-wp-title-padding:                   11px 16px 17px !default;
+// deprecated
+$action-sheet-wp-title-padding:                   null !default;
+
+/// @prop - Padding top of the action sheet title
+$action-sheet-wp-title-padding-top:               11px !default;
+
+/// @prop - Padding end of the action sheet title
+$action-sheet-wp-title-padding-end:               16px !default;
+
+/// @prop - Padding bottom of the action sheet title
+$action-sheet-wp-title-padding-bottom:            17px !default;
+
+/// @prop - Padding start of the action sheet title
+$action-sheet-wp-title-padding-start:             $action-sheet-wp-title-padding-end !default;

 /// @prop - Font size of the action sheet title
 $action-sheet-wp-title-font-size:                 2rem !default;
@@ -36,8 +48,20 @@ $action-sheet-wp-button-text-color:               #4d4d4d !default;
 /// @prop - Font size of the action sheet button
 $action-sheet-wp-button-font-size:                1.5rem !default;

-/// @prop - Padding of the action sheet button
-$action-sheet-wp-button-padding:                  0 16px !default;
+// deprecated
+$action-sheet-wp-button-padding:                  null !default;
+
+/// @prop - Padding top of the action sheet button
+$action-sheet-wp-button-padding-top:              0 !default;
+
+/// @prop - Padding end of the action sheet button
+$action-sheet-wp-button-padding-end:              16px !default;
+
+/// @prop - Padding bottom of the action sheet button
+$action-sheet-wp-button-padding-bottom:           $action-sheet-wp-button-padding-top !default;
+
+/// @prop - Padding start of the action sheet button
+$action-sheet-wp-button-padding-start:            $action-sheet-wp-button-padding-end !default;

 /// @prop - Text align of the action sheet button
 $action-sheet-wp-button-text-align:               $action-sheet-wp-text-align !default;
@@ -60,8 +84,20 @@ $action-sheet-wp-icon-text-align:                 center !default;
 /// @prop - Vertical align of the icon in the action sheet button
 $action-sheet-wp-icon-vertical-align:             middle !default;

-/// @prop - Margin of the icon in the action sheet button
-$action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
+// deprecated
+$action-sheet-wp-icon-margin:                     null !default;
+
+/// @prop - Margin top of the icon in the action sheet button
+$action-sheet-wp-icon-margin-top:                 0 !default;
+
+/// @prop - Margin end of the icon in the action sheet button
+$action-sheet-wp-icon-margin-end:                 20px !default;
+
+/// @prop - Margin bottom of the icon in the action sheet button
+$action-sheet-wp-icon-margin-bottom:              0 !default;
+
+/// @prop - Margin start of the icon in the action sheet button
+$action-sheet-wp-icon-margin-start:               0 !default;


 .action-sheet-wp .action-sheet-wrapper {
@@ -71,22 +107,26 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 .action-sheet-wp .action-sheet-title {
  @include text-align($action-sheet-wp-title-text-align);

-  padding: $action-sheet-wp-title-padding;
-
  font-size: $action-sheet-wp-title-font-size;
  color: $action-sheet-wp-title-color;
+
+  @include deprecated-variable(padding, $action-sheet-wp-title-padding) {
+    @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start);
+  }
 }

 .action-sheet-wp .action-sheet-button {
  @include text-align($action-sheet-wp-button-text-align);

-  padding: $action-sheet-wp-button-padding;
-
  min-height: $action-sheet-wp-button-height;

  font-size: $action-sheet-wp-button-font-size;
  color: $action-sheet-wp-button-text-color;
  background: $action-sheet-wp-button-background;
+
+  @include deprecated-variable(padding, $action-sheet-wp-button-padding) {
+    @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start);
+  }
 }

 .action-sheet-wp .action-sheet-button.activated {
@@ -94,19 +134,21 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }

 .action-sheet-wp .action-sheet-icon {
+  @include padding(0);
  @include text-align($action-sheet-wp-icon-text-align);

-  margin: $action-sheet-wp-icon-margin;
-  padding: 0;
-
  width: $action-sheet-wp-icon-width;

  font-size: $action-sheet-wp-icon-font-size;
  vertical-align: $action-sheet-wp-icon-vertical-align;
+
+  @include deprecated-variable(margin, $action-sheet-wp-icon-margin) {
+    @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start);
+  }
 }

 .action-sheet-wp .action-sheet-container {
-  padding: .8rem 0;
+  @include padding(.8rem, 0);

  background: $action-sheet-wp-background;
 }
--- a/src/components/alert/alert-component.ts
+++ b/src/components/alert/alert-component.ts
@@ -84,6 +84,7 @@ export class AlertCmp {
  msgId: string;
  subHdrId: string;
  mode: string;
+  keyboardResizes: boolean;
  gestureBlocker: BlockerDelegate;

  constructor(
@@ -99,6 +100,7 @@ export class AlertCmp {
    this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL);
    this.d = params.data;
    this.mode = this.d.mode || config.get('mode');
+    this.keyboardResizes = config.getBoolean('keyboardResizes', false);
    _renderer.setElementClass(_elementRef.nativeElement, `alert-${this.mode}`, true);

    if (this.d.cssClass) {
@@ -178,7 +180,7 @@ export class AlertCmp {
    }

    const hasTextInput = (this.d.inputs.length && this.d.inputs.some(i => !(NON_TEXT_INPUT_REGEX.test(i.type))));
-    if (hasTextInput && this._plt.is('mobile')) {
+    if (!this.keyboardResizes && hasTextInput && this._plt.is('mobile')) {
      // this alert has a text input and it's on a mobile device so we should align
      // the alert up high because we need to leave space for the virtual keboard
      // this also helps prevent the layout getting all messed up from
@@ -316,6 +318,11 @@ export class AlertCmp {
      return this.d.inputs.filter(i => i.checked).map(i => i.value);
    }

+    if (this.d.inputs.length === 0) {
+      // this is an alert without any options/inputs at all
+      return undefined;
+    }
+
    // this is an alert with text inputs
    // return an object of all the values with the input name as the key
    const values: {[k: string]: string} = {};
--- a/src/components/alert/alert.ios.scss
+++ b/src/components/alert/alert.ios.scss
@@ -15,8 +15,20 @@ $alert-ios-background:                          #f8f8f8 !default;
 /// @prop - Box shadow of the alert
 $alert-ios-box-shadow:                          none !default;

-/// @prop - Padding of the alert head
-$alert-ios-head-padding:                        12px 16px 7px !default;
+// deprecated
+$alert-ios-head-padding:                        null !default;
+
+/// @prop - Padding top of the alert head
+$alert-ios-head-padding-top:                    12px !default;
+
+/// @prop - Padding end of the alert head
+$alert-ios-head-padding-end:                    16px !default;
+
+/// @prop - Padding bottom of the alert head
+$alert-ios-head-padding-bottom:                 7px !default;
+
+/// @prop - Padding start of the alert head
+$alert-ios-head-padding-start:                  $alert-ios-head-padding-end !default;

 /// @prop - Text align of the alert head
 $alert-ios-head-text-align:                     center !default;
@@ -36,8 +48,21 @@ $alert-ios-sub-title-font-size:                 14px !default;
 /// @prop - Text color of the alert sub title
 $alert-ios-sub-title-text-color:                #666 !default;

-/// @prop - Padding of the alert message
-$alert-ios-message-padding:                     0 16px 21px !default;
+// deprecated
+$alert-ios-message-padding:                     null !default;
+
+/// @prop - Padding top of the alert message
+$alert-ios-message-padding-top:                 0 !default;
+
+/// @prop - Padding end of the alert message
+$alert-ios-message-padding-end:                 16px !default;
+
+/// @prop - Padding bottom of the alert message
+$alert-ios-message-padding-bottom:              21px !default;
+
+/// @prop - Padding start of the alert message
+$alert-ios-message-padding-start:               $alert-ios-message-padding-end !default;
+

 /// @prop - Font size of the alert message
 $alert-ios-message-font-size:                   13px !default;
@@ -48,8 +73,20 @@ $alert-ios-message-text-align:                  center !default;
 /// @prop - Text color of the alert message
 $alert-ios-message-text-color:                  inherit !default;

-/// @prop - Padding of the alert empty message
-$alert-ios-message-padding-empty:               0 0 12px 0 !default;
+// deprecated
+$alert-ios-message-padding-empty:               null !default;
+
+/// @prop - Padding top of the alert empty message
+$alert-ios-message-empty-padding-top:           0 !default;
+
+/// @prop - Padding end of the alert empty message
+$alert-ios-message-empty-padding-end:           0 !default;
+
+/// @prop - Padding bottom of the alert empty message
+$alert-ios-message-empty-padding-bottom:        12px !default;
+
+/// @prop - Padding start of the alert empty message
+$alert-ios-message-empty-padding-start:         0 !default;

 /// @prop - Maximum height of the alert content
 $alert-ios-content-max-height:                  240px !default;
@@ -57,8 +94,20 @@ $alert-ios-content-max-height:                  240px !default;
 /// @prop - Margin top of the alert input
 $alert-ios-input-margin-top:                    10px !default;

-/// @prop - Padding on the alert input
-$alert-ios-input-padding:                       6px !default;
+// deprecated
+$alert-ios-input-padding:                       null !default;
+
+/// @prop - Padding top on the alert input
+$alert-ios-input-padding-top:                   6px !default;
+
+/// @prop - Padding end on the alert input
+$alert-ios-input-padding-end:                   $alert-ios-input-padding-top !default;
+
+/// @prop - Padding bottom on the alert input
+$alert-ios-input-padding-bottom:                $alert-ios-input-padding-top !default;
+
+/// @prop - Padding start on the alert input
+$alert-ios-input-padding-start:                 $alert-ios-input-padding-end !default;

 /// @prop - Border color of the alert input
 $alert-ios-input-border-color:                  #ccc !default;
@@ -117,8 +166,20 @@ $alert-ios-button-main-font-weight:             bold !default;
 /// @prop - Border top of the alert list
 $alert-ios-list-border-top:                     $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default;

-/// @prop - Padding on the label for the radio alert
-$alert-ios-radio-label-padding:                 13px !default;
+// deprecated
+$alert-ios-radio-label-padding:                 null !default;
+
+/// @prop - Padding top on the label for the radio alert
+$alert-ios-radio-label-padding-top:             13px !default;
+
+/// @prop - Padding end on the label for the radio alert
+$alert-ios-radio-label-padding-end:             $alert-ios-radio-label-padding-top !default;
+
+/// @prop - Padding bottom on the label for the radio alert
+$alert-ios-radio-label-padding-bottom:          $alert-ios-radio-label-padding-top !default;
+
+/// @prop - Padding start on the label for the radio alert
+$alert-ios-radio-label-padding-start:           $alert-ios-radio-label-padding-end !default;

 /// @prop - Text color of the label for the radio alert
 $alert-ios-radio-label-text-color:              initial !default;
@@ -132,8 +193,10 @@ $alert-ios-radio-min-width:                     30px !default;
 /// @prop - Top of the icon in the radio alert
 $alert-ios-radio-icon-top:                      -7px !default;

-/// @prop - Left of the icon in the radio alert
+// deprecated
 $alert-ios-radio-icon-left:                     7px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-ios-radio-icon-start:                    $alert-ios-radio-icon-left !default;

 /// @prop - Width of the icon in the radio alert
 $alert-ios-radio-icon-width:                    6px !default;
@@ -153,8 +216,20 @@ $alert-ios-radio-icon-border-color:             $alert-ios-button-text-color !de
 /// @prop - Transform of the icon in the radio alert
 $alert-ios-radio-icon-transform:                rotate(45deg) !default;

-/// @prop - Padding of the label for the checkbox in the alert
-$alert-ios-checkbox-label-padding:              13px !default;
+// deprecated
+$alert-ios-checkbox-label-padding:              null !default;
+
+/// @prop - Padding top of the label for the checkbox in the alert
+$alert-ios-checkbox-label-padding-top:          13px !default;
+
+/// @prop - Padding end of the label for the checkbox in the alert
+$alert-ios-checkbox-label-padding-end:          $alert-ios-checkbox-label-padding-top !default;
+
+/// @prop - Padding bottom of the label for the checkbox in the alert
+$alert-ios-checkbox-label-padding-bottom:       $alert-ios-checkbox-label-padding-top !default;
+
+/// @prop - Padding start of the label for the checkbox in the alert
+$alert-ios-checkbox-label-padding-start:        $alert-ios-checkbox-label-padding-end !default;

 /// @prop - Text color of the label for the checkbox in the alert
 $alert-ios-checkbox-label-text-color:           initial !default;
@@ -162,8 +237,20 @@ $alert-ios-checkbox-label-text-color:           initial !default;
 /// @prop - Text color of the label for the checked checkbox in the alert
 $alert-ios-checkbox-label-text-color-checked:   initial !default;

-/// @prop - Margin of the checkbox in the alert
-$alert-ios-checkbox-margin:                     10px 6px 10px 16px !default;
+// deprecated
+$alert-ios-checkbox-margin:                     null !default;
+
+/// @prop - Margin top of the checkbox in the alert
+$alert-ios-checkbox-margin-top:                 10px !default;
+
+/// @prop - Margin end of the checkbox in the alert
+$alert-ios-checkbox-margin-end:                 6px !default;
+
+/// @prop - Margin bottom of the checkbox in the alert
+$alert-ios-checkbox-margin-bottom:              10px !default;
+
+/// @prop - Margin start of the checkbox in the alert
+$alert-ios-checkbox-margin-start:               16px !default;

 /// @prop - Size of the checkbox in the alert
 $alert-ios-checkbox-size:                       21px !default;
@@ -192,8 +279,10 @@ $alert-ios-checkbox-background-color-on:        color($colors-ios, primary) !def
 /// @prop - Top of the icon in the checkbox alert
 $alert-ios-checkbox-icon-top:                   4px !default;

-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-ios-checkbox-icon-left:                  7px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-ios-checkbox-icon-start:                 $alert-ios-checkbox-icon-left !default;

 /// @prop - Width of the icon in the checkbox alert
 $alert-ios-checkbox-icon-width:                 4px !default;
@@ -215,11 +304,12 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;


 .alert-ios .alert-wrapper {
+  @include border-radius($alert-ios-border-radius);
+
  overflow: hidden;

  max-width: $alert-ios-max-width;

-  border-radius: $alert-ios-border-radius;
  background-color: $alert-ios-background;

  box-shadow: $alert-ios-box-shadow;
@@ -232,11 +322,13 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 .alert-ios .alert-head {
  @include text-align($alert-ios-head-text-align);

-  padding: $alert-ios-head-padding;
+  @include deprecated-variable(padding, $alert-ios-head-padding) {
+    @include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start);
+  }
 }

 .alert-ios .alert-title {
-  margin-top: $alert-ios-title-margin-top;
+  @include margin($alert-ios-title-margin-top, null, null, null);

  font-size: $alert-ios-title-font-size;
  font-weight: $alert-ios-title-font-weight;
@@ -255,10 +347,12 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 .alert-ios .alert-input-group {
  @include text-align($alert-ios-message-text-align);

-  padding: $alert-ios-message-padding;
-
  font-size: $alert-ios-message-font-size;
  color: $alert-ios-message-text-color;
+
+  @include deprecated-variable(padding, $alert-ios-message-padding) {
+    @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start);
+  }
 }

 .alert-ios .alert-message {
@@ -266,7 +360,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 }

 .alert-ios .alert-message:empty {
-  padding: $alert-ios-message-padding-empty;
+  @include deprecated-variable(padding, $alert-ios-message-padding-empty) {
+    @include padding($alert-ios-message-empty-padding-top, $alert-ios-message-empty-padding-end, $alert-ios-message-empty-padding-bottom, $alert-ios-message-empty-padding-start);
+  }
 }


@@ -275,13 +371,15 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;

 .alert-ios .alert-input {
  @include appearance(none);
-
-  margin-top: $alert-ios-input-margin-top;
-  padding: $alert-ios-input-padding;
+  @include margin($alert-ios-input-margin-top, null, null, null);
+  @include border-radius($alert-ios-input-border-radius);

  border: $alert-ios-input-border;
-  border-radius: $alert-ios-input-border-radius;
  background-color: $alert-ios-input-background-color;
+
+  @include deprecated-variable(padding, $alert-ios-input-padding) {
+    @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start);
+  }
 }


@@ -317,12 +415,14 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;

  order: 0;

-  padding: $alert-ios-radio-label-padding;
-
  text-overflow: ellipsis;
  white-space: nowrap;

  color: $alert-ios-radio-label-text-color;
+
+  @include deprecated-variable(padding, $alert-ios-radio-label-padding) {
+    @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start);
+  }
 }


@@ -350,9 +450,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------

 .alert-ios [aria-checked=true] .alert-radio-inner {
+  @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
+
  position: absolute;
-  top: $alert-ios-radio-icon-top;
-  left: $alert-ios-radio-icon-left;

  width: $alert-ios-radio-icon-width;
  height: $alert-ios-radio-icon-height;
@@ -374,12 +474,14 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;

  flex: 1;

-  padding: $alert-ios-checkbox-label-padding;
-
  text-overflow: ellipsis;
  white-space: nowrap;

  color: $alert-ios-checkbox-label-text-color;
+
+  @include deprecated-variable(padding, $alert-ios-checkbox-label-padding) {
+    @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start);
+  }
 }

 .alert-ios [aria-checked=true] .alert-checkbox-label {
@@ -390,18 +492,21 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------

 .alert-ios .alert-checkbox-icon {
-  position: relative;
+  @include border-radius($alert-ios-checkbox-border-radius);

-  margin: $alert-ios-checkbox-margin;
+  position: relative;

  width: $alert-ios-checkbox-size;
  height: $alert-ios-checkbox-size;

  border-width: $alert-ios-checkbox-border-width;
  border-style: $alert-ios-checkbox-border-style;
-  border-radius: $alert-ios-checkbox-border-radius;
  border-color: $alert-ios-checkbox-border-color-off;
  background-color: $alert-ios-checkbox-background-color-off;
+
+  @include deprecated-variable(margin, $alert-ios-checkbox-margin) {
+    @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start);
+  }
 }


@@ -418,9 +523,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------

 .alert-ios [aria-checked=true] .alert-checkbox-inner {
+  @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
+
  position: absolute;
-  top: $alert-ios-checkbox-icon-top;
-  left: $alert-ios-checkbox-icon-left;

  width: $alert-ios-checkbox-icon-width;
  height: $alert-ios-checkbox-icon-height;
@@ -438,24 +543,24 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------

 .alert-ios .alert-button-group {
-  flex-wrap: $alert-ios-button-group-flex-wrap;
+  @include margin-horizontal(null, -$alert-ios-button-border-width);

-  margin-right: -$alert-ios-button-border-width;
+  flex-wrap: $alert-ios-button-group-flex-wrap;
 }

 .alert-ios .alert-button {
+  @include margin($alert-ios-button-margin);
+  @include border-radius($alert-ios-button-border-radius);
+
  overflow: hidden;

  flex: $alert-ios-button-flex;

-  margin: $alert-ios-button-margin;
-
  min-width: $alert-ios-button-min-width;
  height: $alert-ios-button-min-height;

  border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
  border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
-  border-radius: $alert-ios-button-border-radius;
  font-size: $alert-ios-button-font-size;
  color: $alert-ios-button-text-color;
  background-color: $alert-ios-button-background-color;
--- a/src/components/alert/alert.md.scss
+++ b/src/components/alert/alert.md.scss
@@ -18,8 +18,21 @@ $alert-md-box-shadow-color:                   rgba(0, 0, 0, .4) !default;
 /// @prop - Box shadow of the alert
 $alert-md-box-shadow:                         0 16px 20px $alert-md-box-shadow-color !default;

-/// @prop - Padding of the alert head
-$alert-md-head-padding:                       24px 24px 20px 24px !default;
+// deprecated
+$alert-md-head-padding:                       null !default;
+
+/// @prop - Padding top of the alert head
+$alert-md-head-padding-top:                   24px !default;
+
+/// @prop - Padding end of the alert head
+$alert-md-head-padding-end:                   24px !default;
+
+/// @prop - Padding bottom of the alert head
+$alert-md-head-padding-bottom:                20px !default;
+
+/// @prop - Padding start of the alert head
+$alert-md-head-padding-start:                 24px !default;
+

 /// @prop - Text align of the alert head
 $alert-md-head-text-align:                    start !default;
@@ -30,8 +43,20 @@ $alert-md-title-font-size:                    22px !default;
 /// @prop - Font size of the alert sub title
 $alert-md-sub-title-font-size:                16px !default;

-/// @prop - Padding of the alert message
-$alert-md-message-padding:                    0 24px 24px 24px !default;
+// deprecated
+$alert-md-message-padding:                    null !default;
+
+/// @prop - Padding top of the alert message
+$alert-md-message-padding-top:                0 !default;
+
+/// @prop - Padding end of the alert message
+$alert-md-message-padding-end:                24px !default;
+
+/// @prop - Padding bottom of the alert message
+$alert-md-message-padding-bottom:             24px !default;
+
+/// @prop - Padding start of the alert message
+$alert-md-message-padding-start:              24px !default;

 /// @prop - Font size of the alert message
 $alert-md-message-font-size:                  15px !default;
@@ -39,8 +64,20 @@ $alert-md-message-font-size:                  15px !default;
 /// @prop - Text color of the alert message
 $alert-md-message-text-color:                 rgba(0, 0, 0, .5) !default;

-/// @prop - Padding of the alert empty message
-$alert-md-message-padding-empty:              0 !default;
+// deprecated
+$alert-md-message-padding-empty:              null !default;
+
+/// @prop - Padding top of the alert empty message
+$alert-md-message-empty-padding-top:          0 !default;
+
+/// @prop - Padding end of the alert empty message
+$alert-md-message-empty-padding-end:          $alert-md-message-empty-padding-top !default;
+
+/// @prop - Padding bottom of the alert empty message
+$alert-md-message-empty-padding-bottom:       $alert-md-message-empty-padding-top !default;
+
+/// @prop - Padding start of the alert empty message
+$alert-md-message-empty-padding-start:        $alert-md-message-empty-padding-end !default;

 /// @prop - Maximum height of the alert content
 $alert-md-content-max-height:                 240px !default;
@@ -69,29 +106,69 @@ $alert-md-input-border-color-focused:         color($colors-md, primary) !defaul
 /// @prop - Margin top of the alert input
 $alert-md-input-margin-top:                   5px !default;

-/// @prop - Margin right of the alert input
+// deprecated
 $alert-md-input-margin-right:                 0 !default;
+/// @prop - Margin end of the alert input
+$alert-md-input-margin-end:                   $alert-md-input-margin-right !default;

 /// @prop - Margin bottom of the alert input
 $alert-md-input-margin-bottom:                5px !default;

-/// @prop - Margin left of the alert input
+// deprecated
 $alert-md-input-margin-left:                  0 !default;
+/// @prop - Margin start of the alert input
+$alert-md-input-margin-start:                 $alert-md-input-margin-left !default;

 /// @prop - Flex wrap of the alert button group
 $alert-md-button-group-flex-wrap:             wrap-reverse !default;

-/// @prop - Padding of the alert button group
-$alert-md-button-group-padding:               8px 8px 8px 24px !default;
+// deprecated
+$alert-md-button-group-padding:               null !default;
+
+/// @prop - Padding top of the alert button group
+$alert-md-button-group-padding-top:           8px !default;
+
+/// @prop - Padding end of the alert button group
+$alert-md-button-group-padding-end:           8px !default;
+
+/// @prop - Padding bottom of the alert button group
+$alert-md-button-group-padding-bottom:        8px !default;
+
+/// @prop - Padding start of the alert button group
+$alert-md-button-group-padding-start:         24px !default;

 /// @prop - Justify content of the alert button group
 $alert-md-button-group-justify-content:       flex-end !default;

-/// @prop - Padding of the alert button
-$alert-md-button-padding:                     10px !default;
+// deprecated
+$alert-md-button-padding:                     null !default;

-/// @prop - Margin of the alert button
-$alert-md-button-margin:                      0 8px 0 0 !default;
+/// @prop - Padding top of the alert button
+$alert-md-button-padding-top:                 10px !default;
+
+/// @prop - Padding end of the alert button
+$alert-md-button-padding-end:                 $alert-md-button-padding-top !default;
+
+/// @prop - Padding bottom of the alert button
+$alert-md-button-padding-bottom:              $alert-md-button-padding-top !default;
+
+/// @prop - Padding start of the alert button
+$alert-md-button-padding-start:               $alert-md-button-padding-end !default;
+
+// deprecated
+$alert-md-button-margin:                      null !default;
+
+/// @prop - Margin top of the alert button
+$alert-md-button-margin-top:                  0 !default;
+
+/// @prop - Margin end of the alert button
+$alert-md-button-margin-end:                  8px !default;
+
+/// @prop - Margin bottom of the alert button
+$alert-md-button-margin-bottom:               0 !default;
+
+/// @prop - Margin start of the alert button
+$alert-md-button-margin-start:                0 !default;

 /// @prop - Font weight of the alert button
 $alert-md-button-font-weight:                 500 !default;
@@ -121,8 +198,20 @@ $alert-md-list-border-top:                    1px solid $alert-md-input-border-c
 /// @prop - Border bottom of the alert list
 $alert-md-list-border-bottom:                 $alert-md-list-border-top !default;

-/// @prop - Padding on the label for the radio alert
-$alert-md-radio-label-padding:                13px 26px !default;
+// deprecated
+$alert-md-radio-label-padding:                null !default;
+
+/// @prop - Padding top on the label for the radio alert
+$alert-md-radio-label-padding-top:            13px !default;
+
+/// @prop - Padding end on the label for the radio alert
+$alert-md-radio-label-padding-end:            26px !default;
+
+/// @prop - Padding bottom on the label for the radio alert
+$alert-md-radio-label-padding-bottom:         $alert-md-radio-label-padding-top !default;
+
+/// @prop - Padding start on the label for the radio alert
+$alert-md-radio-label-padding-start:          $alert-md-radio-label-padding-end !default;

 /// @prop - Text color of the label for the radio alert
 $alert-md-radio-label-text-color:             initial !default;
@@ -160,8 +249,10 @@ $alert-md-radio-border-color-on:              $alert-md-button-text-color !defau
 /// @prop - Top of the icon in the alert radio
 $alert-md-radio-icon-top:                     2px !default;

-/// @prop - Left of the icon in the alert radio
+// deprecated
 $alert-md-radio-icon-left:                    2px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-md-radio-icon-start:                   $alert-md-radio-icon-left !default;

 /// @prop - Width of the icon in the alert radio
 $alert-md-radio-icon-width:                   8px !default;
@@ -181,8 +272,20 @@ $alert-md-radio-icon-transform-on:            scale3d(1, 1, 1) !default;
 /// @prop - Transition of the icon in the alert radio
 $alert-md-radio-icon-transition:              transform 280ms cubic-bezier(.4, 0, .2, 1) !default;

-/// @prop - Padding of the label for the checkbox in the alert
-$alert-md-checkbox-label-padding:             13px 26px !default;
+// deprecated
+$alert-md-checkbox-label-padding:             null !default;
+
+/// @prop - Padding top of the label for the checkbox in the alert
+$alert-md-checkbox-label-padding-top:         13px !default;
+
+/// @prop - Padding end of the label for the checkbox in the alert
+$alert-md-checkbox-label-padding-end:         26px !default;
+
+/// @prop - Padding bottom of the label for the checkbox in the alert
+$alert-md-checkbox-label-padding-bottom:      $alert-md-checkbox-label-padding-top !default;
+
+/// @prop - Padding start of the label for the checkbox in the alert
+$alert-md-checkbox-label-padding-start:       $alert-md-checkbox-label-padding-end !default;

 /// @prop - Text color of the label for the checkbox in the alert
 $alert-md-checkbox-label-text-color:          initial !default;
@@ -222,8 +325,10 @@ $alert-md-checkbox-border-color-on:           $alert-md-button-text-color !defau
 /// @prop - Top of the icon in the checkbox alert
 $alert-md-checkbox-icon-top:                  0 !default;

-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-md-checkbox-icon-left:                 3px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-md-checkbox-icon-start:                $alert-md-checkbox-icon-left !default;

 /// @prop - Width of the icon in the checkbox alert
 $alert-md-checkbox-icon-width:                6px !default;
@@ -244,9 +349,10 @@ $alert-md-checkbox-icon-border-color:         color-contrast($colors-md, $alert-
 $alert-md-checkbox-icon-transform:            rotate(45deg) !default;

 .alert-md .alert-wrapper {
+  @include border-radius($alert-md-border-radius);
+
  max-width: $alert-md-max-width;

-  border-radius: $alert-md-border-radius;
  background-color: $alert-md-background-color;

  box-shadow: $alert-md-box-shadow;
@@ -258,7 +364,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 .alert-md .alert-head {
  @include text-align($alert-md-head-text-align);

-  padding: $alert-md-head-padding;
+  @include deprecated-variable(padding, $alert-md-head-padding) {
+    @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start);
+  }
 }

 .alert-md .alert-title {
@@ -275,9 +383,11 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;

 .alert-md .alert-message,
 .alert-md .alert-input-group {
-  padding: $alert-md-message-padding;
-
  color: $alert-md-message-text-color;
+
+  @include deprecated-variable(padding, $alert-md-message-padding) {
+    @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start);
+  }
 }

 .alert-md .alert-message {
@@ -287,7 +397,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }

 .alert-md .alert-message:empty {
-  padding: $alert-md-message-padding-empty;
+  @include deprecated-variable(padding, $alert-md-message-padding-empty) {
+    @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start);
+  }
 }


@@ -295,14 +407,14 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------

 .alert-md .alert-input {
-  margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
+  @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start);

  border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
  color: $alert-md-input-text-color;
 }

 .alert-md .alert-input:focus {
-  margin-bottom: $alert-md-input-margin-bottom - 1;
+  @include margin(null, null, $alert-md-input-margin-bottom - 1, null);

  border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
 }
@@ -341,21 +453,24 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;

  flex: 1;

-  padding: $alert-md-radio-label-padding;
-
  text-overflow: ellipsis;
  white-space: nowrap;

  color: $alert-md-radio-label-text-color;
+
+  @include deprecated-variable(padding, $alert-md-radio-label-padding) {
+    @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start);
+  }
 }

 // Material Design Alert Radio Unchecked Circle
 // ---------------------------------------------------

 .alert-md .alert-radio-icon {
+  @include position($alert-md-radio-top, null, null, $alert-md-radio-left);
+  @include border-radius($alert-md-radio-border-radius);
+
  position: relative;
-  top: $alert-md-radio-top;
-  left: $alert-md-radio-left;
  display: block;

  width: $alert-md-radio-width;
@@ -363,7 +478,6 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;

  border-width: $alert-md-radio-border-width;
  border-style: $alert-md-radio-border-style;
-  border-radius: $alert-md-radio-border-radius;
  border-color: $alert-md-radio-border-color-off;
 }

@@ -371,14 +485,14 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // ---------------------------------------------------

 .alert-md .alert-radio-inner {
+  @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
+  @include border-radius($alert-md-radio-icon-border-radius);
+
  position: absolute;
-  top: $alert-md-radio-icon-top;
-  left: $alert-md-radio-icon-left;

  width: $alert-md-radio-icon-width;
  height: $alert-md-radio-icon-height;

-  border-radius: $alert-md-radio-icon-border-radius;
  background-color: $alert-md-radio-border-color-on;
  transform: $alert-md-radio-icon-transform-off;
  transition: $alert-md-radio-icon-transition;
@@ -409,12 +523,14 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;

  flex: 1;

-  padding: $alert-md-checkbox-label-padding;
-
  text-overflow: ellipsis;
  white-space: nowrap;

  color: $alert-md-checkbox-label-text-color;
+
+  @include deprecated-variable(padding, $alert-md-checkbox-label-padding) {
+    @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start);
+  }
 }

 .alert-md [aria-checked=true] .alert-checkbox-label {
@@ -425,16 +541,16 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------

 .alert-md .alert-checkbox-icon {
+  @include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left);
+  @include border-radius($alert-md-checkbox-border-radius);
+
  position: relative;
-  top: $alert-md-checkbox-top;
-  left: $alert-md-checkbox-left;

  width: $alert-md-checkbox-width;
  height: $alert-md-checkbox-height;

  border-width: $alert-md-checkbox-border-width;
  border-style: $alert-md-checkbox-border-style;
-  border-radius: $alert-md-checkbox-border-radius;
  border-color: $alert-md-checkbox-border-color-off;
 }

@@ -447,9 +563,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }

 .alert-md [aria-checked=true] .alert-checkbox-inner {
+  @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);
+
  position: absolute;
-  top: $alert-md-checkbox-icon-top;
-  left: $alert-md-checkbox-icon-left;

  width: $alert-md-checkbox-icon-width;
  height: $alert-md-checkbox-icon-height;
@@ -470,24 +586,31 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
  flex-wrap: $alert-md-button-group-flex-wrap;
  justify-content: $alert-md-button-group-justify-content;

-  padding: $alert-md-button-group-padding;
+  @include deprecated-variable(padding, $alert-md-button-group-padding) {
+    @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
+  }
 }

 .alert-md .alert-button {
  @include text-align($alert-md-button-text-align);
+  @include border-radius($alert-md-button-border-radius);

  // necessary for ripple to work properly
  position: relative;
  overflow: hidden;

-  margin: $alert-md-button-margin;
-  padding: $alert-md-button-padding;
-
-  border-radius: $alert-md-button-border-radius;
  font-weight: $alert-md-button-font-weight;
  text-transform: $alert-md-button-text-transform;
  color: $alert-md-button-text-color;
  background-color: $alert-md-button-background-color;
+
+  @include deprecated-variable(margin, $alert-md-button-margin) {
+    @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start);
+  }
+
+  @include deprecated-variable(padding, $alert-md-button-padding) {
+    @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start);
+  }
 }

 .alert-md .alert-button.activated {
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -20,11 +20,10 @@ $alert-input-placeholder-color:   #999 !default;


 ion-alert {
+  @include position(0, 0, 0, 0);
+
  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+
  z-index: $z-index-overlay;

  display: flex;
@@ -36,9 +35,9 @@ ion-alert {
 }

 ion-alert.alert-top {
-  align-items: flex-start;
+  @include padding(50px, null, null, null);

-  padding-top: 50px;
+  align-items: flex-start;
 }

 ion-alert input {
@@ -60,13 +59,13 @@ ion-alert input {
 }

 .alert-title {
-  margin: 0;
-  padding: 0;
+  @include margin(0);
+  @include padding(0);
 }

 .alert-sub-title {
-  margin: 5px 0 0;
-  padding: 0;
+  @include margin(5px, 0, 0);
+  @include padding(0);

  font-weight: normal;
 }
@@ -79,8 +78,7 @@ ion-alert input {

 .alert-input {
  @include placeholder($alert-input-placeholder-color);
-
-  padding: 10px 0;
+  @include padding(10px, 0);

  border: 0;
  background: inherit;
@@ -98,11 +96,11 @@ ion-alert input {
 }

 .alert-button {
+  @include margin(0);
+
  z-index: 0;
  display: block;

-  margin: 0;
-
  font-size: $alert-button-font-size;
  line-height: $alert-button-line-height;
 }
@@ -110,9 +108,8 @@ ion-alert input {
 .alert-tappable {
  @include text-align(start);
  @include appearance(none);
-
-  margin: 0;
-  padding: 0;
+  @include margin(0);
+  @include padding(0);

  width: 100%;

--- a/src/components/alert/alert.wp.scss
+++ b/src/components/alert/alert.wp.scss
@@ -27,8 +27,20 @@ $alert-wp-border-radius:                       0 !default;
 /// @prop - Background color of the alert
 $alert-wp-background:                          #e6e6e6 !default;

-/// @prop - Padding of the alert head
-$alert-wp-head-padding:                        20px 22px 5px 22px !default;
+// deprecated
+$alert-wp-head-padding:                        null !default;
+
+/// @prop - Padding top of the alert head
+$alert-wp-head-padding-top:                    20px !default;
+
+/// @prop - Padding end of the alert head
+$alert-wp-head-padding-end:                    22px !default;
+
+/// @prop - Padding bottom of the alert head
+$alert-wp-head-padding-bottom:                 5px !default;
+
+/// @prop - Padding start of the alert head
+$alert-wp-head-padding-start:                  22px !default;

 /// @prop - Text align of the alert head
 $alert-wp-head-text-align:                     start !default;
@@ -42,11 +54,35 @@ $alert-wp-title-font-weight:                   400 !default;
 /// @prop - Font size of the alert sub title
 $alert-wp-sub-title-font-size:                 16px !default;

-/// @prop - Padding of the alert message
-$alert-wp-message-padding:                     0 22px 8px 22px !default;
+// deprecated
+$alert-wp-message-padding:                     null !default;

-/// @prop - Padding of the alert empty message
-$alert-wp-message-padding-empty:               0 !default;
+/// @prop - Padding top of the alert message
+$alert-wp-message-padding-top:                 0 !default;
+
+/// @prop - Padding end of the alert message
+$alert-wp-message-padding-end:                 22px !default;
+
+/// @prop - Padding bottom of the alert message
+$alert-wp-message-padding-bottom:              8px !default;
+
+/// @prop - Padding start of the alert message
+$alert-wp-message-padding-start:               22px !default;
+
+// deprecated
+$alert-wp-message-padding-empty:               null !default;
+
+/// @prop - Padding top of the alert empty message
+$alert-wp-message-empty-padding-top:           0 !default;
+
+/// @prop - Padding end of the alert empty message
+$alert-wp-message-empty-padding-end:           $alert-wp-message-empty-padding-top !default;
+
+/// @prop - Padding bottom of the alert empty message
+$alert-wp-message-empty-padding-bottom:        $alert-wp-message-empty-padding-top !default;
+
+/// @prop - Padding start of the alert empty message
+$alert-wp-message-empty-padding-start:         $alert-wp-message-empty-padding-end !default;

 /// @prop - Text color of the alert message
 $alert-wp-message-text-color:                  #000 !default;
@@ -57,11 +93,35 @@ $alert-wp-message-font-size:                   13px !default;
 /// @prop - Maximum height of the alert content
 $alert-wp-content-max-height:                  240px !default;

-/// @prop - Margin of the alert input
-$alert-wp-input-margin:                        5px 0 5px 0 !default;
+// deprecated
+$alert-wp-input-margin:                        null !default;

-/// @prop - Padding on the alert input
-$alert-wp-input-padding:                       0 8px !default;
+/// @prop - Margin top of the alert input
+$alert-wp-input-margin-top:                    5px !default;
+
+/// @prop - Margin end of the alert input
+$alert-wp-input-margin-end:                    0 !default;
+
+/// @prop - Margin bottom of the alert input
+$alert-wp-input-margin-bottom:                 5px !default;
+
+/// @prop - Margin start of the alert input
+$alert-wp-input-margin-start:                  0 !default;
+
+// deprecated
+$alert-wp-input-padding:                       null !default;
+
+/// @prop - Padding top on the alert input
+$alert-wp-input-padding-top:                   0 !default;
+
+/// @prop - Padding end on the alert input
+$alert-wp-input-padding-end:                   8px !default;
+
+/// @prop - Padding bottom on the alert input
+$alert-wp-input-padding-bottom:                $alert-wp-input-padding-top !default;
+
+/// @prop - Padding start on the alert input
+$alert-wp-input-padding-start:                 $alert-wp-input-padding-end !default;

 /// @prop - Border width of the alert input
 $alert-wp-input-border-width:                  2px !default;
@@ -81,8 +141,20 @@ $alert-wp-input-line-height:                   3rem !default;
 /// @prop - Color of the text in the alert input
 $alert-wp-input-text-color:                    #000 !default;

-/// @prop - Padding of the alert button
-$alert-wp-button-padding:                      5px !default;
+// deprecated
+$alert-wp-button-padding:                      null !default;
+
+/// @prop - Padding top of the alert button
+$alert-wp-button-padding-top:                  5px !default;
+
+/// @prop - Padding end of the alert button
+$alert-wp-button-padding-end:                  $alert-wp-button-padding-top !default;
+
+/// @prop - Padding bottom of the alert button
+$alert-wp-button-padding-bottom:               $alert-wp-button-padding-top !default;
+
+/// @prop - Padding start of the alert button
+$alert-wp-button-padding-start:                $alert-wp-button-padding-end !default;

 /// @prop - Width of the alert button
 $alert-wp-button-width:                        49.5% !default;
@@ -102,11 +174,25 @@ $alert-wp-button-background:                   #b8b8b8 !default;
 /// @prop - Background color of the activated alert button
 $alert-wp-button-background-activated:         color-shade($alert-wp-button-background) !default;

-/// @prop - Margin right of the alert button
+// deprecated
 $alert-wp-button-margin-right:                 1% !default;
+/// @prop - Margin end of the alert button
+$alert-wp-button-margin-end:                   $alert-wp-button-margin-right !default;
+
+$alert-wp-button-group-padding:                null !default;
+
+/// @prop - Padding top of the alert button group
+$alert-wp-button-group-padding-top:            20px !default;
+
+/// @prop - Padding end of the alert button group
+$alert-wp-button-group-padding-end:            22px !default;
+
+/// @prop - Padding bottom of the alert button group
+$alert-wp-button-group-padding-bottom:         20px !default;
+
+/// @prop - Padding start of the alert button group
+$alert-wp-button-group-padding-start:          22px !default;

-/// @prop - Padding of the alert button group
-$alert-wp-button-group-padding:                20px 22px 20px 22px !default;

 /// @prop - Justify content of the alert button group
 $alert-wp-button-group-justify-content:        flex-end !default;
@@ -127,8 +213,21 @@ $alert-wp-radio-background:                    color($colors-wp, primary) !defau
 /// @prop - Border color of the radio alert
 $alert-wp-radio-border-color:                  $input-wp-border-color !default;

-/// @prop - Padding of the label for the radio alert
-$alert-wp-radio-label-padding:                 13px 26px !default;
+// deprecated
+$alert-wp-radio-label-padding:                 null !default;
+
+/// @prop - Padding top of the label for the radio alert
+$alert-wp-radio-label-padding-top:             13px !default;
+
+/// @prop - Padding end of the label for the radio alert
+$alert-wp-radio-label-padding-end:             26px !default;
+
+/// @prop - Padding bottom of the label for the radio alert
+$alert-wp-radio-label-padding-bottom:          $alert-wp-radio-label-padding-top !default;
+
+/// @prop - Padding start of the label for the radio alert
+$alert-wp-radio-label-padding-start:           $alert-wp-radio-label-padding-end !default;
+

 /// @prop - Text color of the label for the radio alert
 $alert-wp-radio-label-text-color:              initial !default;
@@ -163,8 +262,10 @@ $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 /// @prop - Top of the icon in the radio alert
 $alert-wp-radio-icon-top:                      2px !default;

-/// @prop - Left of the icon in the radio alert
+// deprecated
 $alert-wp-radio-icon-left:                     2px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-wp-radio-icon-start:                    $alert-wp-radio-icon-left !default;

 /// @prop - Width of the icon in the radio alert
 $alert-wp-radio-icon-width:                    8px !default;
@@ -175,8 +276,20 @@ $alert-wp-radio-icon-height:                   8px !default;
 /// @prop - Border radius of the icon in the radio alert
 $alert-wp-radio-icon-border-radius:            $alert-wp-radio-border-radius !default;

-/// @prop - Padding of the label for the checkbox in the alert
-$alert-wp-checkbox-label-padding:              13px 26px !default;
+// deprecated
+$alert-wp-checkbox-label-padding:              null !default;
+
+/// @prop - Padding top of the label for the checkbox in the alert
+$alert-wp-checkbox-label-padding-top:          13px !default;
+
+/// @prop - Padding end of the label for the checkbox in the alert
+$alert-wp-checkbox-label-padding-end:          26px !default;
+
+/// @prop - Padding bottom of the label for the checkbox in the alert
+$alert-wp-checkbox-label-padding-bottom:       $alert-wp-checkbox-label-padding-top !default;
+
+/// @prop - Padding start of the label for the checkbox in the alert
+$alert-wp-checkbox-label-padding-start:        $alert-wp-checkbox-label-padding-end !default;

 /// @prop - Text color of the label for the checkbox in the alert
 $alert-wp-checkbox-label-text-color:           initial !default;
@@ -217,8 +330,10 @@ $alert-wp-checkbox-background-on:              color($colors-wp, primary) !defau
 /// @prop - Top of the icon in the checkbox alert
 $alert-wp-checkbox-icon-top:                   -2px !default;

-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-wp-checkbox-icon-left:                  3px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-wp-checkbox-icon-start:                 $alert-wp-checkbox-icon-left !default;

 /// @prop - Width of the icon in the checkbox alert
 $alert-wp-checkbox-icon-width:                 6px !default;
@@ -244,11 +359,12 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 }

 .alert-wp .alert-wrapper {
+  @include border-radius($alert-wp-border-radius);
+
  width: $alert-wp-width;
  max-width: $alert-wp-max-width;

  border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color;
-  border-radius: $alert-wp-border-radius;
  background: $alert-wp-background;
 }

@@ -258,7 +374,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 .alert-wp .alert-head {
  @include text-align($alert-wp-head-text-align);

-  padding: $alert-wp-head-padding;
+  @include deprecated-variable(padding, $alert-wp-head-padding) {
+    @include padding($alert-wp-head-padding-top, $alert-wp-head-padding-end, $alert-wp-head-padding-bottom, $alert-wp-head-padding-start);
+  }
 }

 .alert-wp .alert-title {
@@ -276,9 +394,11 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;

 .alert-wp .alert-message,
 .alert-wp .alert-input-group {
-  padding: $alert-wp-message-padding;
-
  color: $alert-wp-message-text-color;
+
+  @include deprecated-variable(padding, $alert-wp-message-padding) {
+    @include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start);
+  }
 }

 .alert-wp .alert-message {
@@ -288,7 +408,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 }

 .alert-wp .alert-message:empty {
-  padding: $alert-wp-message-padding-empty;
+  @include deprecated-variable(padding, $alert-wp-message-padding-empty) {
+    @include padding($alert-wp-message-empty-padding-top, $alert-wp-message-empty-padding-end, $alert-wp-message-empty-padding-bottom, $alert-wp-message-empty-padding-start);
+  }
 }


@@ -296,12 +418,17 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------

 .alert-wp .alert-input {
-  margin: $alert-wp-input-margin;
-  padding: $alert-wp-input-padding;
-
  border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
  line-height: $alert-wp-input-line-height;
  color: $alert-wp-input-text-color;
+
+  @include deprecated-variable(margin, $alert-wp-input-margin) {
+    @include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start);
+  }
+
+  @include deprecated-variable(padding, $alert-wp-input-padding) {
+    @include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start);
+  }
 }

 .alert-wp .alert-input:focus {
@@ -339,31 +466,32 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;

  flex: 1;

-  padding: $alert-wp-radio-label-padding;
-
  text-overflow: ellipsis;
  white-space: nowrap;

  color: $alert-wp-radio-label-text-color;
+
+  @include deprecated-variable(padding, $alert-wp-radio-label-padding) {
+    @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start);
+  }
 }

 // Windows Alert Radio Unchecked Circle
 // ---------------------------------------------------

 .alert-wp .alert-radio-icon {
-  position: relative;
-  top: $alert-wp-radio-top;
-  left: $alert-wp-radio-left;
-  display: block;
+  @include position($alert-wp-radio-top, null, null, $alert-wp-radio-left);
+  @include margin(0);
+  @include border-radius($alert-wp-radio-border-radius);

-  margin: 0;
+  position: relative;
+  display: block;

  width: $alert-wp-radio-width;
  height: $alert-wp-radio-height;

  border-width: $alert-wp-radio-border-width;
  border-style: $alert-wp-radio-border-style;
-  border-radius: $alert-wp-radio-border-radius;
  border-color: $alert-wp-radio-border-color;
 }

@@ -371,15 +499,15 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // ---------------------------------------------------

 .alert-wp .alert-radio-inner {
+  @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
+  @include border-radius($alert-wp-radio-icon-border-radius);
+
  position: absolute;
-  top: $alert-wp-radio-icon-top;
-  left: $alert-wp-radio-icon-left;
  display: none;

  width: $alert-wp-radio-icon-width;
  height: $alert-wp-radio-icon-height;

-  border-radius: $alert-wp-radio-icon-border-radius;
  background: $alert-wp-radio-background;
 }

@@ -407,12 +535,14 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;

  flex: 1;

-  padding: $alert-wp-checkbox-label-padding;
-
  text-overflow: ellipsis;
  white-space: nowrap;

  color: $alert-wp-checkbox-label-text-color;
+
+  @include deprecated-variable(padding, $alert-wp-checkbox-label-padding) {
+    @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start);
+  }
 }

 .alert-wp [aria-checked=true] .alert-checkbox-label {
@@ -423,16 +553,16 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------

 .alert-wp .alert-checkbox-icon {
+  @include position($alert-wp-checkbox-top, null, null, $alert-wp-checkbox-left);
+  @include border-radius($alert-wp-checkbox-border-radius);
+
  position: relative;
-  top: $alert-wp-checkbox-top;
-  left: $alert-wp-checkbox-left;

  width: $alert-wp-checkbox-width;
  height: $alert-wp-checkbox-height;

  border-width: $alert-wp-checkbox-border-width;
  border-style: $alert-wp-checkbox-border-style;
-  border-radius: $alert-wp-checkbox-border-radius;
  border-color: $alert-wp-checkbox-border-color;
  background: $alert-wp-checkbox-background-off;
 }
@@ -449,9 +579,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------

 .alert-wp [aria-checked=true] .alert-checkbox-inner {
+  @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
+
  position: absolute;
-  top: $alert-wp-checkbox-icon-top;
-  left: $alert-wp-checkbox-icon-left;

  width: $alert-wp-checkbox-icon-width;
  height: $alert-wp-checkbox-icon-height;
@@ -472,33 +602,37 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
  flex-wrap: $alert-wp-button-group-flex-wrap;
  justify-content: $alert-wp-button-group-justify-content;

-  padding: $alert-wp-button-group-padding;
+  @include deprecated-variable(padding, $alert-wp-button-group-padding) {
+    @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start);
+  }
 }

 .alert-wp .alert-button-group-vertical .alert-button {
-  margin-top: $alert-wp-button-group-vertical-margin-top;
+  @include margin($alert-wp-button-group-vertical-margin-top, null, null, null);

  width: $alert-wp-button-group-vertical-width;
 }

 .alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) {
-  margin-top: 0;
-  margin-right: 0;
+  @include margin(0, 0, null, null);
 }

 .alert-wp .alert-button {
-  padding: $alert-wp-button-padding;
+  @include border-radius($alert-wp-button-border-radius);

  width: $alert-wp-button-width;

-  border-radius: $alert-wp-button-border-radius;
  font-weight: $alert-wp-button-font-weight;
  color: $alert-wp-button-text-color;
  background: $alert-wp-button-background;
+
+  @include deprecated-variable(padding, $alert-wp-button-padding) {
+    @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start);
+  }
 }

 .alert-wp .alert-button:first-child:not(:only-child) {
-  margin-right: $alert-wp-button-margin-right;
+  @include margin-horizontal(null, $alert-wp-button-margin-end);
 }

 .alert-wp .alert-button.activated {
--- a/src/components/app/app.scss
+++ b/src/components/app/app.scss
@@ -100,12 +100,12 @@ html {
 }

 body {
+  @include margin(0);
+  @include padding(0);
+
  position: fixed;
  overflow: hidden;

-  margin: 0;
-  padding: 0;
-
  width: 100%;
  max-width: 100%;
  height: 100%;
@@ -145,8 +145,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1.6rem;
-  margin-bottom: 1rem;
+  @include margin(1.6rem, null, 1rem, null);

  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
@@ -160,7 +159,7 @@ h6 {
  h5,
  h6 {
    &:first-child {
-      margin-top: -.3rem;
+      @include margin(-.3rem, null, null, null);
    }
  }
 }
@@ -168,17 +167,17 @@ h6 {
 h1 + h2,
 h1 + h3,
 h2 + h3 {
-  margin-top: -.3rem;
+  @include margin(-.3rem, null, null, null);
 }

 h1 {
-  margin-top: 2rem;
+  @include margin(2rem, null, null, null);

  font-size: $h1-font-size;
 }

 h2 {
-  margin-top: 1.8rem;
+  @include margin(1.8rem, null, null, null);

  font-size: $h2-font-size;
 }
@@ -229,9 +228,9 @@ ion-nav,
 ion-tab,
 ion-tabs,
 .app-root {
+  @include position(0, null, null, 0);
+
  position: absolute;
-  top: 0;
-  left: 0;
  z-index: $z-index-page-container;
  display: block;

@@ -267,9 +266,9 @@ ion-tabs,
 // --------------------------------------------------

 .ion-page {
+  @include position(0, null, null, 0);
+
  position: absolute;
-  top: 0;
-  left: 0;
  display: block;

  width: 100%;
@@ -289,9 +288,9 @@ ion-tabs,
 // --------------------------------------------------

 ion-header {
+  @include position(0, null, null, 0);
+
  position: absolute;
-  top: 0;
-  left: 0;
  z-index: $z-index-toolbar;
  display: block;

@@ -299,9 +298,9 @@ ion-header {
 }

 ion-footer {
+  @include position(null, null, 0, 0);
+
  position: absolute;
-  bottom: 0;
-  left: 0;
  z-index: $z-index-toolbar;
  display: block;

@@ -412,33 +411,19 @@ ion-footer {
      // Provide `[float-{bp}]` attributes for floating the element based
      // on the breakpoint
      [float#{$infix}-left] {
-        // scss-lint:disable ImportantRule
-        float: left !important;
+        @include float(left, !important);
      }

      [float#{$infix}-right] {
-        // scss-lint:disable ImportantRule
-        float: right !important;
+        @include float(right, !important);
      }

      [float#{$infix}-start] {
-        // scss-lint:disable ImportantRule
-        float: left !important;
+        @include float(start, !important);
      }

      [float#{$infix}-end] {
-        // scss-lint:disable ImportantRule
-        float: right !important;
-      }
-
-      [dir="rtl"] [float#{$infix}-start] {
-        // scss-lint:disable ImportantRule
-        float: right !important;
-      }
-
-      [dir="rtl"] [float#{$infix}-end] {
-        // scss-lint:disable ImportantRule
-        float: left !important;
+        @include float(end, !important);
      }
    }
  }
--- a/src/components/app/app.ts
+++ b/src/components/app/app.ts
@@ -30,6 +30,7 @@ export class App {
  private _titleSrv: Title = new Title(DOCUMENT);
  private _rootNav: NavController = null;
  private _disableScrollAssist: boolean;
+  private _didScroll = false;

  /**
   * @hidden
@@ -87,6 +88,11 @@ export class App {
    _plt.registerBackButtonAction(this.goBack.bind(this));
    this._disableScrollAssist = _config.getBoolean('disableScrollAssist', false);

+    const blurring = _config.getBoolean('inputBlurring', false);
+    if (blurring) {
+      this._enableInputBlurring();
+    }
+
    runInDev(() => {
      // During developement, navPop can be triggered by calling
      const win = <any>_plt.win();
@@ -179,6 +185,7 @@ export class App {
   */
  setScrolling() {
    this._scrollTime = Date.now() + ACTIVE_SCROLLING_TIME;
+    this._didScroll = true;
  }

  /**
@@ -289,6 +296,60 @@ export class App {
    return recursivePop(this.getActiveNav());
  }

+  /**
+   * @hidden
+   */
+  _enableInputBlurring() {
+    console.debug('App: _enableInputBlurring');
+    let focused = true;
+    const self = this;
+    const platform = this._plt;
+
+    platform.registerListener(platform.doc(), 'focusin', onFocusin, { capture: true, zone: false, passive: true });
+    platform.registerListener(platform.doc(), 'touchend', onTouchend, { capture: false, zone: false, passive: true });
+
+    function onFocusin(ev: any) {
+      focused = true;
+    }
+    function onTouchend(ev: any) {
+      // if app did scroll return early
+      if (self._didScroll) {
+        self._didScroll = false;
+        return;
+      }
+      const active = <HTMLElement> self._plt.getActiveElement();
+      if (!active) {
+        return;
+      }
+      // only blur if the active element is a text-input or a textarea
+      if (SKIP_BLURRING.indexOf(active.tagName) === -1) {
+        return;
+      }
+
+      // if the selected target is the active element, do not blur
+      const tapped = ev.target;
+      if (tapped === active) {
+        return;
+      }
+      if (SKIP_BLURRING.indexOf(tapped.tagName) >= 0) {
+        return;
+      }
+
+      // skip if div is a cover
+      if (tapped.classList.contains('input-cover')) {
+        return;
+      }
+
+      focused = false;
+      // TODO: find a better way, why 50ms?
+      platform.timeout(() => {
+        if (!focused) {
+          active.blur();
+        }
+      }, 50);
+    }
+  }
+
 }

 function recursivePop(nav: any): Promise<any> {
@@ -322,5 +383,6 @@ function findTopNav(nav: NavController) {
  return nav;
 }

+const SKIP_BLURRING = ['INPUT', 'TEXTAREA', 'ION-INPUT', 'ION-TEXTAREA'];
 const ACTIVE_SCROLLING_TIME = 100;
 const CLICK_BLOCK_BUFFER_IN_MILLIS = 64;
--- a/src/components/app/menu-controller.ts
+++ b/src/components/app/menu-controller.ts
@@ -6,7 +6,7 @@ import { removeArrayItem, assert } from '../../util/util';
 /**
 * @name MenuController
 * @description
- * The MenuController is a provider which makes it easy to control a [Menu](../Menu).
+ * The MenuController is a provider which makes it easy to control a [Menu](../../Menu/Menu/).
 * Its methods can be used to display the menu, enable the menu, toggle the menu, and more.
 * The controller will grab a reference to the menu by the `side`, `id`, or, if neither
 * of these are passed to it, it will grab the first menu it finds.
@@ -14,7 +14,7 @@ import { removeArrayItem, assert } from '../../util/util';
 *
 * @usage
 *
- * Add a basic menu component to start with. See the [Menu](../Menu) API docs
+ * Add a basic menu component to start with. See the [Menu](../../Menu/Menu/) API docs
 * for more information on adding menu components.
 *
 * ```html
--- a/src/components/app/test/utilities/pages/root-page/root-page.html
+++ b/src/components/app/test/utilities/pages/root-page/root-page.html
@@ -60,51 +60,51 @@
  </ion-row>

  <div class="float-elements-row">
-    <div pull-left>pull-left</div>
-    <div pull-sm-left>pull-sm-left</div>
-    <div pull-md-left>pull-md-left</div>
-    <div pull-lg-left>pull-lg-left</div>
-    <div pull-xl-left>pull-xl-left</div>
+    <div float-left>float-left</div>
+    <div float-sm-left>float-sm-left</div>
+    <div float-md-left>float-md-left</div>
+    <div float-lg-left>float-lg-left</div>
+    <div float-xl-left>float-xl-left</div>
  </div>

  <div class="float-elements-row">
-    <div pull-right>pull-right</div>
-    <div pull-sm-right>pull-sm-right</div>
-    <div pull-md-right>pull-md-right</div>
-    <div pull-lg-right>pull-lg-right</div>
-    <div pull-xl-right>pull-xl-right</div>
+    <div float-right>float-right</div>
+    <div float-sm-right>float-sm-right</div>
+    <div float-md-right>float-md-right</div>
+    <div float-lg-right>float-lg-right</div>
+    <div float-xl-right>float-xl-right</div>
  </div>

  <div class="float-elements-row">
-    <div pull-start>pull-start</div>
-    <div pull-sm-start>pull-sm-start</div>
-    <div pull-md-start>pull-md-start</div>
-    <div pull-lg-start>pull-lg-start</div>
-    <div pull-xl-start>pull-xl-start</div>
+    <div float-start>float-start</div>
+    <div float-sm-start>float-sm-start</div>
+    <div float-md-start>float-md-start</div>
+    <div float-lg-start>float-lg-start</div>
+    <div float-xl-start>float-xl-start</div>
  </div>

  <div class="float-elements-row">
-    <div pull-end>pull-end</div>
-    <div pull-sm-end>pull-sm-end</div>
-    <div pull-md-end>pull-md-end</div>
-    <div pull-lg-end>pull-lg-end</div>
-    <div pull-xl-end>pull-xl-end</div>
+    <div float-end>float-end</div>
+    <div float-sm-end>float-sm-end</div>
+    <div float-md-end>float-md-end</div>
+    <div float-lg-end>float-lg-end</div>
+    <div float-xl-end>float-xl-end</div>
  </div>

  <div class="float-elements-row" dir="rtl">
-    <div pull-start>pull-start</div>
-    <div pull-sm-start>pull-sm-start</div>
-    <div pull-md-start>pull-md-start</div>
-    <div pull-lg-start>pull-lg-start</div>
-    <div pull-xl-start>pull-xl-start</div>
+    <div float-start>float-start</div>
+    <div float-sm-start>float-sm-start</div>
+    <div float-md-start>float-md-start</div>
+    <div float-lg-start>float-lg-start</div>
+    <div float-xl-start>float-xl-start</div>
  </div>

  <div class="float-elements-row" dir="rtl">
-    <div pull-end>pull-end</div>
-    <div pull-sm-end>pull-sm-end</div>
-    <div pull-md-end>pull-md-end</div>
-    <div pull-lg-end>pull-lg-end</div>
-    <div pull-xl-end>pull-xl-end</div>
+    <div float-end>float-end</div>
+    <div float-sm-end>float-sm-end</div>
+    <div float-md-end>float-md-end</div>
+    <div float-lg-end>float-lg-end</div>
+    <div float-xl-end>float-xl-end</div>
  </div>
 </ion-content>

--- a/src/components/backdrop/backdrop.scss
+++ b/src/components/backdrop/backdrop.scss
@@ -7,9 +7,9 @@
 $backdrop-color: #000 !default;

 ion-backdrop {
+  @include position(0, null, null, 0);
+
  position: absolute;
-  top: 0;
-  left: 0;
  z-index: $z-index-backdrop;
  display: block;

--- a/src/components/badge/badge.ios.scss
+++ b/src/components/badge/badge.ios.scss
@@ -14,7 +14,8 @@ $badge-ios-text-color:         color-contrast($colors-ios, $badge-ios-background


 .badge-ios {
-  border-radius: $badge-ios-border-radius;
+  @include border-radius($badge-ios-border-radius);
+
  color: $badge-ios-text-color;
  background-color: $badge-ios-background-color;
 }
--- a/src/components/badge/badge.md.scss
+++ b/src/components/badge/badge.md.scss
@@ -14,7 +14,8 @@ $badge-md-text-color:               color-contrast($colors-md, $badge-md-backgro


 .badge-md {
-  border-radius: $badge-md-border-radius;
+  @include border-radius($badge-md-border-radius);
+
  color: $badge-md-text-color;
  background-color: $badge-md-background-color;
 }
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -11,12 +11,11 @@ $badge-font-weight:               bold !default;


 ion-badge {
+  @include padding(3px, 8px);
  @include text-align(center);

  display: inline-block;

-  padding: 3px 8px;
-
  min-width: 10px;

  font-size: $badge-font-size;
--- a/src/components/badge/badge.wp.scss
+++ b/src/components/badge/badge.wp.scss
@@ -14,7 +14,8 @@ $badge-wp-text-color:               color-contrast($colors-wp, $badge-wp-backgro


 .badge-wp {
-  border-radius: $badge-wp-border-radius;
+  @include border-radius($badge-wp-border-radius);
+
  color: $badge-wp-text-color;
  background-color: $badge-wp-background-color;
 }
--- a/src/components/button/button-icon.scss
+++ b/src/components/button/button-icon.scss
@@ -11,26 +11,28 @@
  pointer-events: none;
 }

-[icon-left] ion-icon {
+[icon-left] ion-icon, // deprecated
+[icon-start] ion-icon {
  @include button-icon;

-  padding-right: .3em;
+  @include padding-horizontal(null, .3em);
 }

-[icon-right] ion-icon {
+[icon-right] ion-icon, // deprecated
+[icon-end] ion-icon {
  @include button-icon;

-  padding-left: .4em;
+  @include padding-horizontal(.4em, null);
 }

 .button[icon-only] {
-  padding: 0;
+  @include padding(0);

  min-width: .9em;
 }

 [icon-only] ion-icon {
-  padding: 0 .5em;
+  @include padding(0, .5em);

  font-size: 1.8em;
  line-height: .67;
--- a/src/components/button/button.ios.scss
+++ b/src/components/button/button.ios.scss
@@ -3,11 +3,35 @@
 // iOS Button
 // --------------------------------------------------

-/// @prop - Margin of the button
-$button-ios-margin:                                 .4rem .2rem !default;
+// deprecated
+$button-ios-margin:                                 null !default;

-/// @prop - Padding of the button
-$button-ios-padding:                                0 1em !default;
+/// @prop - Margin top of the button
+$button-ios-margin-top:                             .4rem !default;
+
+/// @prop - Margin end of the button
+$button-ios-margin-end:                             .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-ios-margin-bottom:                          .4rem !default;
+
+/// @prop - Margin start of the button
+$button-ios-margin-start:                           .2rem !default;
+
+// deprecated
+$button-ios-padding:                                null !default;
+
+/// @prop - Padding top of the button
+$button-ios-padding-top:                            0 !default;
+
+/// @prop - Padding end of the button
+$button-ios-padding-end:                            1em !default;
+
+/// @prop - Padding bottom of the button
+$button-ios-padding-bottom:                         $button-ios-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-ios-padding-start:                          $button-ios-padding-end !default;

 /// @prop - Height of the button
 $button-ios-height:                                 2.8em !default;
@@ -37,8 +61,20 @@ $button-ios-opacity-hover:                          .8 !default;
 // iOS Large Button
 // --------------------------------------------------

-/// @prop - Padding of the large button
-$button-ios-large-padding:                          0 1em !default;
+// deprecated
+$button-ios-large-padding:                          null !default;
+
+/// @prop - Padding top of the large button
+$button-ios-large-padding-top:                      0 !default;
+
+/// @prop - Padding end of the large button
+$button-ios-large-padding-end:                      1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-ios-large-padding-bottom:                   $button-ios-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-ios-large-padding-start:                    $button-ios-large-padding-end !default;

 /// @prop - Height of the large button
 $button-ios-large-height:                           2.8em !default;
@@ -50,8 +86,20 @@ $button-ios-large-font-size:                        2rem !default;
 // iOS Small Button
 // --------------------------------------------------

-/// @prop - Padding of the small button
-$button-ios-small-padding:                          0 .9em !default;
+// deprecated
+$button-ios-small-padding:                          null !default;
+
+/// @prop - Padding top of the small button
+$button-ios-small-padding-top:                      0 !default;
+
+/// @prop - Padding end of the small button
+$button-ios-small-padding-end:                      .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-ios-small-padding-bottom:                   $button-ios-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-ios-small-padding-start:                    $button-ios-small-padding-end !default;

 /// @prop - Height of the small button
 $button-ios-small-height:                           2.1em !default;
@@ -119,8 +167,20 @@ $button-ios-clear-opacity-hover:                    .6 !default;
 // iOS Round Button
 // --------------------------------------------------

-/// @prop - Padding of the round button
-$button-ios-round-padding:                          $button-round-padding !default;
+// deprecated
+$button-ios-round-padding:                          null !default;
+
+/// @prop - Padding top of the round button
+$button-ios-round-padding-top:                      $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-ios-round-padding-end:                      $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-ios-round-padding-bottom:                   $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-ios-round-padding-start:                    $button-round-padding-start !default;

 /// @prop - Border radius of the round button
 $button-ios-round-border-radius:                    $button-round-border-radius !default;
@@ -137,16 +197,22 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------

 .button-ios {
-  margin: $button-ios-margin;
-  padding: $button-ios-padding;
+  @include border-radius($button-ios-border-radius);

  height: $button-ios-height;

-  border-radius: $button-ios-border-radius;
  font-size: $button-ios-font-size;

  color: $button-ios-text-color;
  background-color: $button-ios-background-color;
+
+  @include deprecated-variable(margin, $button-ios-margin) {
+    @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-ios-padding) {
+    @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start);
+  }
 }

 .button-ios.activated {
@@ -182,19 +248,23 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------

 .button-large-ios {
-  padding: $button-ios-large-padding;
-
  height: $button-ios-large-height;

  font-size: $button-ios-large-font-size;
+
+  @include deprecated-variable(padding, $button-ios-large-padding) {
+    @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start);
+  }
 }

 .button-small-ios {
-  padding: $button-ios-small-padding;
-
  height: $button-ios-small-height;

  font-size: $button-ios-small-font-size;
+
+  @include deprecated-variable(padding, $button-ios-small-padding) {
+    @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start);
+  }
 }

 .button-small-ios[icon-only] ion-icon {
@@ -205,29 +275,28 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------

 .button-block-ios {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }

 // iOS Full Button
 // --------------------------------------------------

 .button-full-ios {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);

  border-right-width: 0;
  border-left-width: 0;
-  border-radius: 0;
 }

 // iOS Outline Button
 // --------------------------------------------------

 .button-outline-ios {
+  @include border-radius($button-ios-outline-border-radius);
+
  border-width: $button-ios-outline-border-width;
  border-style: $button-ios-outline-border-style;
-  border-radius: $button-ios-outline-border-radius;
  border-color: $button-ios-outline-border-color;
  color: $button-ios-outline-text-color;
  background-color: $button-ios-outline-background-color;
@@ -304,9 +373,11 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------

 .button-round-ios {
-  padding: $button-ios-round-padding;
+  @include border-radius($button-ios-round-border-radius);

-  border-radius: $button-ios-round-border-radius;
+  @include deprecated-variable(padding, $button-ios-round-padding) {
+    @include padding($button-ios-round-padding-top, $button-ios-round-padding-end, $button-ios-round-padding-bottom, $button-ios-round-padding-start);
+  }
 }


--- a/src/components/button/button.md.scss
+++ b/src/components/button/button.md.scss
@@ -3,11 +3,35 @@
 // Material Design Button
 // --------------------------------------------------

-/// @prop - Margin of the button
-$button-md-margin:                         .4rem .2rem !default;
+// deprecated
+$button-md-margin:                         null !default;

-/// @prop - Padding of the button
-$button-md-padding:                        0 1.1em !default;
+/// @prop - Margin top of the button
+$button-md-margin-top:                     .4rem !default;
+
+/// @prop - Margin end of the button
+$button-md-margin-end:                     .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-md-margin-bottom:                  .4rem !default;
+
+/// @prop - Margin start of the button
+$button-md-margin-start:                   .2rem !default;
+
+// deprecated
+$button-md-padding:                        null !default;
+
+/// @prop - Padding top of the button
+$button-md-padding-top:                    0 !default;
+
+/// @prop - Padding end of the button
+$button-md-padding-end:                    1.1em !default;
+
+/// @prop - Padding bottom of the button
+$button-md-padding-bottom:                 $button-md-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-md-padding-start:                  $button-md-padding-end !default;

 /// @prop - Height of the button
 $button-md-height:                         3.6rem !default;
@@ -58,8 +82,20 @@ $button-md-ripple-background-color:       #555 !default;
 // Material Design Large Button
 // --------------------------------------------------

-/// @prop - Padding of the large button
-$button-md-large-padding:                  0 1em !default;
+// deprecated
+$button-md-large-padding:                  null !default;
+
+/// @prop - Padding top of the large button
+$button-md-large-padding-top:              0 !default;
+
+/// @prop - Padding end of the large button
+$button-md-large-padding-end:              1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-md-large-padding-bottom:           $button-md-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-md-large-padding-start:            $button-md-large-padding-end !default;

 /// @prop - Height of the large button
 $button-md-large-height:                   2.8em !default;
@@ -71,8 +107,20 @@ $button-md-large-font-size:                2rem !default;
 // Material Design Small Button
 // --------------------------------------------------

-/// @prop - Padding of the small button
-$button-md-small-padding:                  0 .9em !default;
+// deprecated
+$button-md-small-padding:                  null !default;
+
+/// @prop - Padding top of the small button
+$button-md-small-padding-top:              0 !default;
+
+/// @prop - Padding end of the small button
+$button-md-small-padding-end:              .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-md-small-padding-bottom:           $button-md-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-md-small-padding-start:            $button-md-small-padding-end !default;

 /// @prop - Height of the small button
 $button-md-small-height:                   2.1em !default;
@@ -155,8 +203,20 @@ $button-md-clear-ripple-background-color:       #999 !default;
 // Material Design Round Button
 // --------------------------------------------------

-/// @prop - Padding of the round button
-$button-md-round-padding:                       $button-round-padding !default;
+// deprecated
+$button-md-round-padding:                       null !default;
+
+/// @prop - Padding top of the round button
+$button-md-round-padding-top:                   $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-md-round-padding-end:                   $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-md-round-padding-bottom:                $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-md-round-padding-start:                 $button-round-padding-start !default;

 /// @prop - Border radius of the round button
 $button-md-round-border-radius:                 $button-round-border-radius !default;
@@ -173,15 +233,12 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------

 .button-md {
+  @include border-radius($button-md-border-radius);
+
  overflow: hidden;

-  margin: $button-md-margin;
-  padding: $button-md-padding;
-
  height: $button-md-height;

-  border-radius: $button-md-border-radius;
-
  font-size: $button-md-font-size;
  font-weight: $button-md-font-weight;

@@ -193,6 +250,14 @@ $button-md-strong-font-weight:                  bold !default;
  transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
              background-color $button-md-transition-duration $button-md-transition-timing-function,
              color $button-md-transition-duration $button-md-transition-timing-function;
+
+  @include deprecated-variable(margin, $button-md-margin) {
+    @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-md-padding) {
+    @include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start);
+  }
 }

 .button-md:hover:not(.disable-hover) {
@@ -241,19 +306,23 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------

 .button-large-md {
-  padding: $button-md-large-padding;
-
  height: $button-md-large-height;

  font-size: $button-md-large-font-size;
+
+  @include deprecated-variable(padding, $button-md-large-padding) {
+    @include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start);
+  }
 }

 .button-small-md {
-  padding: $button-md-small-padding;
-
  height: $button-md-small-height;

  font-size: $button-md-small-font-size;
+
+  @include deprecated-variable(padding, $button-md-small-padding) {
+    @include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start);
+  }
 }

 .button-small-md[icon-only] ion-icon {
@@ -264,20 +333,18 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------

 .button-block-md {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }

 // Material Design Full Button
 // --------------------------------------------------

 .button-full-md {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);

  border-right-width: 0;
  border-left-width: 0;
-  border-radius: 0;
 }

 // Material Design Outline Button
@@ -385,13 +452,15 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------

 .button-round-md {
-  padding: $button-md-round-padding;
+  @include border-radius($button-md-round-border-radius);

-  border-radius: $button-md-round-border-radius;
+  @include deprecated-variable(padding, $button-md-round-padding) {
+    @include padding($button-md-round-padding-top, $button-md-round-padding-end, $button-md-round-padding-bottom, $button-md-round-padding-start);
+  }
 }

 .button-md [icon-only] {
-  padding: 0;
+  @include padding(0);
 }


@@ -401,21 +470,26 @@ $button-md-strong-font-weight:                  bold !default;
 // it's display none, and .md sets to display block.

 .button-effect {
+  @include border-radius(50%);
+  @include transform-origin(center, center);
+
  position: absolute;
-  top: 0;
-  left: 0;
  z-index: 0;
  display: none;

-  border-radius: 50%;
-
  background-color: $button-md-ripple-background-color;
  opacity: .2;

-  transform-origin: center center;
  transition-timing-function: ease-in-out;

  pointer-events: none;
+
+  @include multi-dir() {
+    // scss-lint:disable PropertySpelling
+    top: 0;
+
+    left: 0;
+  }
 }

 .md .button-effect {
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -3,8 +3,20 @@
 // Buttons
 // --------------------------------------------------

-/// @prop - Padding of the round button
-$button-round-padding:            0 2.6rem !default;
+// deprecated
+$button-round-padding:            null !default;
+
+/// @prop - Padding top of the round button
+$button-round-padding-top:        0 !default;
+
+/// @prop - Padding end of the round button
+$button-round-padding-end:        2.6rem !default;
+
+/// @prop - Padding bottom of the round button
+$button-round-padding-bottom:     $button-round-padding-top !default;
+
+/// @prop - Padding start of the round button
+$button-round-padding-start:      $button-round-padding-end !default;

 /// @prop - Border radius of the round button
 $button-round-border-radius:      64px !default;
@@ -93,7 +105,8 @@ button[disabled],
 // --------------------------------------------------

 .button-full.button-outline {
+  @include border-radius(0);
+
  border-right-width: 0;
  border-left-width: 0;
-  border-radius: 0;
 }
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -42,12 +42,12 @@ import { isTrueProperty } from '../../util/util';
  *  <button ion-button round outline>Outline + Round</button>
  *
  *  <!-- Icons -->
-  *  <button ion-button icon-left>
+  *  <button ion-button icon-start>
  *    <ion-icon name="star"></ion-icon>
  *    Left Icon
  *  </button>
  *
-  *  <button ion-button icon-right>
+  *  <button ion-button icon-end>
  *    Right Icon
  *    <ion-icon name="star"></ion-icon>
  *  </button>
--- a/src/components/button/button.wp.scss
+++ b/src/components/button/button.wp.scss
@@ -3,11 +3,35 @@
 // Windows Button
 // --------------------------------------------------

-/// @prop - Margin of the button
-$button-wp-margin:                                        .4rem .2rem !default;
+// deprecated
+$button-wp-margin:                                        null !default;

-/// @prop - Padding of the button
-$button-wp-padding:                                       0 1.1em !default;
+/// @prop - Margin top of the button
+$button-wp-margin-top:                                    .4rem !default;
+
+/// @prop - Margin end of the button
+$button-wp-margin-end:                                    .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-wp-margin-bottom:                                 .4rem !default;
+
+/// @prop - Margin start of the button
+$button-wp-margin-start:                                  .2rem !default;
+
+// deprecated
+$button-wp-padding:                                       null !default;
+
+/// @prop - Padding top of the button
+$button-wp-padding-top:                                   0 !default;
+
+/// @prop - Padding end of the button
+$button-wp-padding-end:                                   1.1em !default;
+
+/// @prop - Padding bottom of the button
+$button-wp-padding-bottom:                                $button-wp-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-wp-padding-start:                                 $button-wp-padding-end !default;

 /// @prop - Height of the button
 $button-wp-height:                                        3.6rem !default;
@@ -40,8 +64,20 @@ $button-wp-background-color-activated:                    color-shade($button-wp
 // Windows Large Button
 // --------------------------------------------------

-/// @prop - Padding of the large button
-$button-wp-large-padding:                                 0 1em !default;
+// deprecated
+$button-wp-large-padding:                                 null !default;
+
+/// @prop - Padding top of the large button
+$button-wp-large-padding-top:                             0 !default;
+
+/// @prop - Padding end of the large button
+$button-wp-large-padding-end:                             1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-wp-large-padding-bottom:                          $button-wp-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-wp-large-padding-start:                           $button-wp-large-padding-end !default;

 /// @prop - Height of the large button
 $button-wp-large-height:                                  2.8em !default;
@@ -53,8 +89,20 @@ $button-wp-large-font-size:                               2rem !default;
 // Windows Small Button
 // --------------------------------------------------

-/// @prop - Padding of the small button
-$button-wp-small-padding:                                 0 .9em !default;
+// deprecated
+$button-wp-small-padding:                                 null !default;
+
+/// @prop - Padding top of the small button
+$button-wp-small-padding-top:                             0 !default;
+
+/// @prop - Padding end of the small button
+$button-wp-small-padding-end:                             .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-wp-small-padding-bottom:                          $button-wp-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-wp-small-padding-start:                           $button-wp-small-padding-end !default;

 /// @prop - Height of the small button
 $button-wp-small-height:                                  2.1em !default;
@@ -110,8 +158,20 @@ $button-wp-clear-background-color-hover:                  rgba(158, 158, 158, .1
 // Windows Round Button
 // --------------------------------------------------

-/// @prop - Padding of the round button
-$button-wp-round-padding:                                 $button-round-padding !default;
+// deprecated
+$button-wp-round-padding:                                 null !default;
+
+/// @prop - Padding top of the round button
+$button-wp-round-padding-top:                             $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-wp-round-padding-end:                             $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-wp-round-padding-bottom:                          $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-wp-round-padding-start:                           $button-round-padding-start !default;

 /// @prop - Border radius of the round button
 $button-wp-round-border-radius:                           $button-round-border-radius !default;
@@ -128,18 +188,24 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------

 .button-wp {
-  margin: $button-wp-margin;
-  padding: $button-wp-padding;
+  @include border-radius($button-wp-border-radius);

  height: $button-wp-height;

  border: $button-wp-border-width $button-wp-border-style $button-wp-border-color;
-  border-radius: $button-wp-border-radius;

  font-size: $button-wp-font-size;

  color: $button-wp-text-color;
  background-color: $button-wp-background-color;
+
+  @include deprecated-variable(margin, $button-wp-margin) {
+    @include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-wp-padding) {
+    @include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start);
+  }
 }

 .button-wp:hover:not(.disable-hover) {
@@ -180,19 +246,23 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------

 .button-large-wp {
-  padding: $button-wp-large-padding;
-
  height: $button-wp-large-height;

  font-size: $button-wp-large-font-size;
+
+  @include deprecated-variable(padding, $button-wp-large-padding) {
+    @include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start);
+  }
 }

 .button-small-wp {
-  padding: $button-wp-small-padding;
-
  height: $button-wp-small-height;

  font-size: $button-wp-small-font-size;
+
+  @include deprecated-variable(padding, $button-wp-small-padding) {
+    @include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start);
+  }
 }

 .button-small-wp[icon-only] ion-icon {
@@ -203,20 +273,18 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------

 .button-block-wp {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }

 // Windows Full Button
 // --------------------------------------------------

 .button-full-wp {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);

  border-right-width: 0;
  border-left-width: 0;
-  border-radius: 0;
 }

 // Windows Outline Button
@@ -304,13 +372,15 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------

 .button-round-wp {
-  padding: $button-wp-round-padding;
+  @include border-radius($button-wp-round-border-radius);

-  border-radius: $button-wp-round-border-radius;
+  @include deprecated-variable(padding, $button-wp-round-padding) {
+    @include padding($button-wp-round-padding-top, $button-wp-round-padding-end, $button-wp-round-padding-bottom, $button-wp-round-padding-start);
+  }
 }

 .button-wp [icon-only] {
-  padding: 0;
+  @include padding(0);
 }


--- a/src/components/button/test/block/pages/page-one/page-one.html
+++ b/src/components/button/test/block/pages/page-one/page-one.html
@@ -15,8 +15,8 @@
  </p>

  <p>
-    <a ion-button block href="#" icon-left><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
-    <button ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
+    <a ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
+    <button ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
  </p>

  <p>
--- a/src/components/button/test/full/pages/page-one/page-one.html
+++ b/src/components/button/test/full/pages/page-one/page-one.html
@@ -15,11 +15,11 @@
  </p>

  <p>
-    <a ion-button full href="#" icon-left>
+    <a ion-button full href="#" icon-start>
      <ion-icon name="help-circle"></ion-icon>
      a[ion-button][full] + icon
    </a>
-    <button ion-button full icon-left>
+    <button ion-button full icon-start>
      <ion-icon name="help-circle"></ion-icon>
      button[ion-button][full] + icon
    </button>
--- a/src/components/button/test/icons/pages/page-one/page-one.html
+++ b/src/components/button/test/icons/pages/page-one/page-one.html
@@ -10,22 +10,22 @@
 <ion-content padding>

  <div>
-    <button ion-button icon-left>
+    <button ion-button icon-start>
      <ion-icon name="home"></ion-icon>
      Left Icon
    </button>
-    <a ion-button icon-left>
+    <a ion-button icon-start>
      <ion-icon name="home"></ion-icon>
      Left Icon
    </a>
  </div>

  <div>
-    <button ion-button icon-right>
+    <button ion-button icon-end>
      Right Icon
      <ion-icon name="star"></ion-icon>
    </button>
-    <a ion-button icon-right>
+    <a ion-button icon-end>
      Right Icon
      <ion-icon name="star"></ion-icon>
    </a>
@@ -41,22 +41,22 @@
  </div>

  <div>
-    <button ion-button large icon-left>
+    <button ion-button large icon-start>
      <ion-icon name="help-circle"></ion-icon>
      Left, Large
    </button>
-    <a ion-button large icon-left>
+    <a ion-button large icon-start>
      <ion-icon name="help-circle"></ion-icon>
      Left, Large
    </a>
  </div>

  <div>
-    <button ion-button large icon-right>
+    <button ion-button large icon-end>
      Right, Large
      <ion-icon name="settings"></ion-icon>
    </button>
-    <a ion-button large icon-right>
+    <a ion-button large icon-end>
      Right, Large
      <ion-icon name="settings"></ion-icon>
    </a>
@@ -72,22 +72,22 @@
  </div>

  <div>
-    <button ion-button small icon-left>
+    <button ion-button small icon-start>
      <ion-icon name="checkmark"></ion-icon>
      Left, Small
    </button>
-    <a ion-button small icon-left>
+    <a ion-button small icon-start>
      <ion-icon name="checkmark"></ion-icon>
      Left, Small
    </a>
  </div>

  <div>
-    <button ion-button small icon-right>
+    <button ion-button small icon-end>
      Right, Small
      <ion-icon name="arrow-forward"></ion-icon>
    </button>
-    <a ion-button small icon-right>
+    <a ion-button small icon-end>
      Right, Small
      <ion-icon name="arrow-forward"></ion-icon>
    </a>
--- a/src/components/card/card.ios.scss
+++ b/src/components/card/card.ios.scss
@@ -6,26 +6,34 @@
 /// @prop - Margin top of the card
 $card-ios-margin-top:                  12px !default;

-/// @prop - Margin right of the card
+// deprecated
 $card-ios-margin-right:                12px !default;
+/// @prop - Margin end of the card
+$card-ios-margin-end:                  $card-ios-margin-right !default;

 /// @prop - Margin bottom of the card
 $card-ios-margin-bottom:               12px !default;

-/// @prop - Margin left of the card
+// deprecated
 $card-ios-margin-left:                 12px !default;
+/// @prop - Margin start of the card
+$card-ios-margin-start:                $card-ios-margin-left !default;

 /// @prop - Padding top of the card
 $card-ios-padding-top:                 13px !default;

-/// @prop - Padding right of the card
+// deprecated
 $card-ios-padding-right:               16px !default;
+/// @prop - Padding end of the card
+$card-ios-padding-end:                 $card-ios-padding-right !default;

 /// @prop - Padding bottom of the card
 $card-ios-padding-bottom:              14px !default;

-/// @prop - Padding left of the card
+// deprecated
 $card-ios-padding-left:                16px !default;
+/// @prop - Padding start of the card
+$card-ios-padding-start:               $card-ios-padding-left !default;

 /// @prop - Padding top of the media on the card
 $card-ios-padding-media-top:           10px !default;
@@ -54,11 +62,35 @@ $card-ios-text-color:                  #666 !default;
 /// @prop - Font size of the card title
 $card-ios-title-font-size:             1.8rem !default;

-/// @prop - Padding of the card title
-$card-ios-title-padding:               8px 0 8px 0 !default;
+// deprecated
+$card-ios-title-padding:               null !default;

-/// @prop - Margin of the card title
-$card-ios-title-margin:                2px 0 2px !default;
+/// @prop - Padding top of the card title
+$card-ios-title-padding-top:           8px !default;
+
+/// @prop - Padding end of the card title
+$card-ios-title-padding-end:           0 !default;
+
+/// @prop - Padding bottom of the card title
+$card-ios-title-padding-bottom:        8px !default;
+
+/// @prop - Padding start of the card title
+$card-ios-title-padding-start:         0 !default;
+
+// deprecated
+$card-ios-title-margin:                null !default;
+
+/// @prop - Margin top of the card title
+$card-ios-title-margin-top:            2px !default;
+
+/// @prop - Margin end of the card title
+$card-ios-title-margin-end:            0 !default;
+
+/// @prop - Margin bottom of the card title
+$card-ios-title-margin-bottom:         2px !default;
+
+/// @prop - Margin start of the card title
+$card-ios-title-margin-start:          0 !default;

 /// @prop - Color of the card title
 $card-ios-title-text-color:            #222 !default;
@@ -69,19 +101,31 @@ $card-ios-header-font-size:            1.6rem !default;
 /// @prop - Font weight of the card header
 $card-ios-header-font-weight:          500 !default;

-/// @prop - Padding of the card header
-$card-ios-header-padding:              16px !default;
+// deprecated
+$card-ios-header-padding:              null !default;
+
+/// @prop - Padding top of the card header
+$card-ios-header-padding-top:          16px !default;
+
+/// @prop - Padding end of the card header
+$card-ios-header-padding-end:          $card-ios-header-padding-top !default;
+
+/// @prop - Padding bottom of the card header
+$card-ios-header-padding-bottom:       $card-ios-header-padding-top !default;
+
+/// @prop - Padding start of the card header
+$card-ios-header-padding-start:        $card-ios-header-padding-end !default;

 /// @prop - Color of the card header
 $card-ios-header-color:                #333 !default;


 .card-ios {
-  margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
+  @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
+  @include border-radius($card-ios-border-radius);

-  width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)});
+  width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});

-  border-radius: $card-ios-border-radius;
  font-size: $card-ios-font-size;

  background: $card-ios-background-color;
@@ -89,7 +133,7 @@ $card-ios-header-color:                #333 !default;
 }

 .card-ios ion-list {
-  margin-bottom: 0;
+  @include margin(null, null, 0, null);
 }

 .card-ios > .item:last-child,
@@ -103,23 +147,25 @@ $card-ios-header-color:                #333 !default;
 }

 .card-content-ios {
-  padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
+  @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);

  font-size: $card-ios-font-size;
  line-height: 1.4;
 }

 .card-header-ios {
-  padding: $card-ios-header-padding;
-
  font-size: $card-ios-header-font-size;
  font-weight: $card-ios-header-font-weight;
  color: $card-ios-header-color;
+
+  @include deprecated-variable(padding, $card-ios-header-padding) {
+    @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
+  }
 }

 .card-header-ios + .card-content-ios,
 .card-ios .item + .card-content-ios {
-  padding-top: 0;
+  @include padding(0, null, null, null);
 }

 .card .note-ios {
@@ -129,23 +175,28 @@ $card-ios-header-color:                #333 !default;
 .card-title-ios {
  display: block;

-  margin: $card-ios-title-margin;
-  padding: $card-ios-title-padding;
-
  font-size: $card-ios-title-font-size;
  line-height: 1.2;
  color: $card-ios-title-text-color;
+
+  @include deprecated-variable(margin, $card-ios-title-margin) {
+    @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start);
+  }
+
+  @include deprecated-variable(padding, $card-ios-title-padding) {
+    @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start);
+  }
 }

 .card-ios h1 {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 2.4rem;
  font-weight: normal;
 }

 .card-ios h2 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.6rem;
  font-weight: normal;
@@ -155,21 +206,21 @@ $card-ios-header-color:                #333 !default;
 .card-ios h4,
 .card-ios h5,
 .card-ios h6 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.4rem;
  font-weight: normal;
 }

 .card-ios p {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 1.4rem;
  color: $card-ios-text-color;
 }

 .card-ios + ion-card {
-  margin-top: 0;
+  @include margin(0, null, null, null);
 }


--- a/src/components/card/card.md.scss
+++ b/src/components/card/card.md.scss
@@ -6,27 +6,35 @@
 /// @prop - Margin top of the card
 $card-md-margin-top:                  10px !default;

-/// @prop - Margin right of the card
+// deprecated
 $card-md-margin-right:                10px !default;
+/// @prop - Margin end of the card
+$card-md-margin-end:                  $card-md-margin-right !default;

 /// @prop - Margin bottom of the card
 $card-md-margin-bottom:               10px !default;

-/// @prop - Margin left of the card
+// deprecated
 $card-md-margin-left:                 10px !default;
+/// @prop - Margin start of the card
+$card-md-margin-start:                $card-md-margin-left !default;


 /// @prop - Padding top of the card
 $card-md-padding-top:                 13px !default;

-/// @prop - Padding right of the card
+// deprecated
 $card-md-padding-right:               16px !default;
+/// @prop - Padding right of the card
+$card-md-padding-end:                 $card-md-padding-right !default;

 /// @prop - Padding bottom of the card
 $card-md-padding-bottom:              13px !default;

-/// @prop - Padding left of the card
+// deprecated
 $card-md-padding-left:                16px !default;
+/// @prop - Padding start of the card
+$card-md-padding-start:               $card-md-padding-left !default;

 /// @prop - Padding top of the media on the card
 $card-md-padding-media-top:           10px !default;
@@ -62,11 +70,35 @@ $card-md-text-color:                  #222 !default;
 /// @prop - Font size of the card title
 $card-md-title-font-size:             2.4rem !default;

-/// @prop - Padding of the card title
-$card-md-title-padding:               8px 0 8px 0 !default;
+// deprecated
+$card-md-title-padding:               null !default;

-/// @prop - Margin of the card title
-$card-md-title-margin:                2px 0 2px !default;
+/// @prop - Padding top of the card title
+$card-md-title-padding-top:           8px !default;
+
+/// @prop - Padding end of the card title
+$card-md-title-padding-end:           0 !default;
+
+/// @prop - Padding bottom of the card title
+$card-md-title-padding-bottom:        8px !default;
+
+/// @prop - Padding start of the card title
+$card-md-title-padding-start:         0 !default;
+
+// deprecated
+$card-md-title-margin:                null !default;
+
+/// @prop - Margin top of the card title
+$card-md-title-margin-top:            2px !default;
+
+/// @prop - Margin end of the card title
+$card-md-title-margin-end:            0 !default;
+
+/// @prop - Margin bottom of the card title
+$card-md-title-margin-bottom:         2px !default;
+
+/// @prop - Margin start of the card title
+$card-md-title-margin-start:          $card-md-title-margin-end !default;

 /// @prop - Color of the card title
 $card-md-title-text-color:            #222 !default;
@@ -74,19 +106,31 @@ $card-md-title-text-color:            #222 !default;
 /// @prop - Font size of the card header
 $card-md-header-font-size:            1.6rem !default;

-/// @prop - Padding of the card header
-$card-md-header-padding:              16px !default;
+// deprecated
+$card-md-header-padding:              null !default;
+
+/// @prop - Padding top of the card header
+$card-md-header-padding-top:          16px !default;
+
+/// @prop - Padding end of the card header
+$card-md-header-padding-end:          $card-md-header-padding-top !default;
+
+/// @prop - Padding bottom of the card header
+$card-md-header-padding-bottom:       $card-md-header-padding-top !default;
+
+/// @prop - Padding start of the card header
+$card-md-header-padding-start:        $card-md-header-padding-end !default;

 /// @prop - Color of the card header
 $card-md-header-color:                #222 !default;


 .card-md {
-  margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
+  @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);
+  @include border-radius($card-md-border-radius);

-  width: calc(100% - #{($card-md-margin-right + $card-md-margin-left)});
+  width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});

-  border-radius: $card-md-border-radius;
  font-size: $card-md-font-size;

  background: $card-md-background-color;
@@ -94,7 +138,7 @@ $card-md-header-color:                #222 !default;
 }

 .card-md ion-list {
-  margin-bottom: 0;
+  @include margin(null, null, 0, null);
 }

 .card-md > .item:last-child,
@@ -108,22 +152,24 @@ $card-md-header-color:                #222 !default;
 }

 .card-content-md {
-  padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
+  @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);

  font-size: $card-md-font-size;
  line-height: $card-md-line-height;
 }

 .card-header-md {
-  padding: $card-md-header-padding;
-
  font-size: $card-md-header-font-size;
  color: $card-md-header-color;
+
+  @include deprecated-variable(padding, $card-md-header-padding) {
+    @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start);
+  }
 }

 .card-header-md + .card-content-md,
 .card-md .item + .card-content-md {
-  padding-top: 0;
+  @include padding(0, null, null, null);
 }

 .card .note-md {
@@ -133,16 +179,21 @@ $card-md-header-color:                #222 !default;
 .card-title-md {
  display: block;

-  margin: $card-md-title-margin;
-  padding: $card-md-title-padding;
-
  font-size: $card-md-title-font-size;
  line-height: 1.2;
  color: $card-md-title-text-color;
+
+  @include deprecated-variable(margin, $card-md-title-margin) {
+    @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start);
+  }
+
+  @include deprecated-variable(padding, $card-md-title-padding) {
+    @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start);
+  }
 }

 .card-md h1 {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 2.4rem;
  font-weight: normal;
@@ -150,7 +201,7 @@ $card-md-header-color:                #222 !default;
 }

 .card-md h2 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.6rem;
  font-weight: normal;
@@ -161,7 +212,7 @@ $card-md-header-color:                #222 !default;
 .card-md h4,
 .card-md h5,
 .card-md h6 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.4rem;
  font-weight: normal;
@@ -169,7 +220,7 @@ $card-md-header-color:                #222 !default;
 }

 .card-md p {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 1.4rem;
  font-weight: normal;
@@ -178,7 +229,7 @@ $card-md-header-color:                #222 !default;
 }

 .card-md + ion-card {
-  margin-top: 0;
+  @include margin(0, null, null, null);
 }


--- a/src/components/card/card.wp.scss
+++ b/src/components/card/card.wp.scss
@@ -6,26 +6,34 @@
 /// @prop - Margin top of the card
 $card-wp-margin-top:                  8px !default;

-/// @prop - Margin right of the card
+// deprecated
 $card-wp-margin-right:                8px !default;
+/// @prop - Margin end of the card
+$card-wp-margin-end:                  $card-wp-margin-right !default;

 /// @prop - Margin bottom of the card
 $card-wp-margin-bottom:               8px !default;

-/// @prop - Margin left of the card
+// deprecated
 $card-wp-margin-left:                 8px !default;
+/// @prop - Margin start of the card
+$card-wp-margin-start:                $card-wp-margin-left !default;

 /// @prop - Padding top of the card
 $card-wp-padding-top:                 13px !default;

-/// @prop - Padding right of the card
+// deprecated
 $card-wp-padding-right:               16px !default;
+/// @prop - Padding end of the card
+$card-wp-padding-end:                 $card-wp-padding-right !default;

 /// @prop - Padding bottom of the card
 $card-wp-padding-bottom:              13px !default;

-/// @prop - Padding left of the card
+// deprecated
 $card-wp-padding-left:                16px !default;
+/// @prop - Padding start of the card
+$card-wp-padding-start:               $card-wp-padding-left !default;

 /// @prop - Padding top of the media on the card
 $card-wp-padding-media-top:           10px !default;
@@ -63,11 +71,35 @@ $card-wp-text-color:                  #222 !default;
 /// @prop - Font size of card title
 $card-wp-title-font-size:             2.4rem !default;

-/// @prop - Padding of the card title
-$card-wp-title-padding:               8px 0 8px 0 !default;
+// deprecated
+$card-wp-title-padding:               null !default;

-/// @prop - Margin of the card title
-$card-wp-title-margin:                2px 0 !default;
+/// @prop - Padding top of the card title
+$card-wp-title-padding-top:           8px !default;
+
+/// @prop - Padding end of the card title
+$card-wp-title-padding-end:           0 !default;
+
+/// @prop - Padding bottom of the card title
+$card-wp-title-padding-bottom:        8px !default;
+
+/// @prop - Padding start of the card title
+$card-wp-title-padding-start:         0 !default;
+
+// deprecated
+$card-wp-title-margin:                null !default;
+
+/// @prop - Margin top of the card title
+$card-wp-title-margin-top:            2px !default;
+
+/// @prop - Margin end of the card title
+$card-wp-title-margin-end:            0 !default;
+
+/// @prop - Margin bottom of the card title
+$card-wp-title-margin-bottom:         $card-wp-title-margin-top !default;
+
+/// @prop - Margin start of the card title
+$card-wp-title-margin-start:          $card-wp-title-margin-end !default;

 /// @prop - Color of the card title
 $card-wp-title-text-color:            #222 !default;
@@ -75,19 +107,31 @@ $card-wp-title-text-color:            #222 !default;
 /// @prop - Font size of the card header
 $card-wp-header-font-size:            1.6rem !default;

-/// @prop - Padding of the card header
-$card-wp-header-padding:              16px !default;
+// deprecated
+$card-wp-header-padding:              null !default;
+
+/// @prop - Padding top of the card header
+$card-wp-header-padding-top:          16px !default;
+
+/// @prop - Padding end of the card header
+$card-wp-header-padding-end:          $card-wp-header-padding-top !default;
+
+/// @prop - Padding bottom of the card header
+$card-wp-header-padding-bottom:       $card-wp-header-padding-top !default;
+
+/// @prop - Padding start of the card header
+$card-wp-header-padding-start:        $card-wp-header-padding-end !default;

 /// @prop - Color of the card header
 $card-wp-header-color:                #222 !default;


 .card-wp {
-  margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left;
+  @include margin($card-wp-margin-top, $card-wp-margin-end, $card-wp-margin-bottom, $card-wp-margin-start);
+  @include border-radius($card-wp-border-radius);

-  width: calc(100% - #{($card-wp-margin-right + $card-wp-margin-left)});
+  width: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});

-  border-radius: $card-wp-border-radius;
  font-size: $card-wp-font-size;

  background: $card-wp-background-color;
@@ -95,7 +139,7 @@ $card-wp-header-color:                #222 !default;
 }

 .card-wp ion-list {
-  margin-bottom: 0;
+  @include margin(null, null, 0, null);
 }

 .card-wp > .item:last-child,
@@ -109,23 +153,25 @@ $card-wp-header-color:                #222 !default;
 }

 .card-content-wp {
-  padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
+  @include padding($card-wp-padding-top, $card-wp-padding-end, $card-wp-padding-bottom, $card-wp-padding-start);

  font-size: $card-wp-font-size;
  line-height: $card-wp-line-height;
 }

 .card-header-wp {
-  padding: $card-wp-header-padding;
-
  font-size: $card-wp-header-font-size;

  color: $card-wp-header-color;
+
+  @include deprecated-variable(padding, $card-wp-header-padding) {
+    @include padding($card-wp-header-padding-top, $card-wp-header-padding-end, $card-wp-header-padding-bottom, $card-wp-header-padding-start);
+  }
 }

 .card-header-wp + .card-content-wp,
 .card-wp .item + .card-content-wp {
-  padding-top: 0;
+  @include padding(0, null, null, null);
 }

 .card .note-wp {
@@ -135,16 +181,21 @@ $card-wp-header-color:                #222 !default;
 .card-title-wp {
  display: block;

-  margin: $card-wp-title-margin;
-  padding: $card-wp-title-padding;
-
  font-size: $card-wp-title-font-size;
  line-height: 1.2;
  color: $card-wp-title-text-color;
+
+  @include deprecated-variable(margin, $card-wp-title-margin) {
+    @include margin($card-wp-title-margin-top, $card-wp-title-margin-end, $card-wp-title-margin-bottom, $card-wp-title-margin-start);
+  }
+
+  @include deprecated-variable(padding, $card-wp-title-padding) {
+    @include padding($card-wp-title-padding-top, $card-wp-title-padding-end, $card-wp-title-padding-bottom, $card-wp-title-padding-start);
+  }
 }

 .card-wp h1 {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 2.4rem;
  font-weight: normal;
@@ -152,7 +203,7 @@ $card-wp-header-color:                #222 !default;
 }

 .card-wp h2 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.6rem;
  font-weight: normal;
@@ -163,7 +214,7 @@ $card-wp-header-color:                #222 !default;
 .card-wp h4,
 .card-wp h5,
 .card-wp h6 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.4rem;
  font-weight: normal;
@@ -171,7 +222,7 @@ $card-wp-header-color:                #222 !default;
 }

 .card-wp p {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 1.4rem;
  font-weight: normal;
@@ -180,7 +231,7 @@ $card-wp-header-color:                #222 !default;
 }

 .card-wp + ion-card {
-  margin-top: 0;
+  @include margin(0, null, null, null);
 }


--- a/src/components/card/test/advanced/pages/root-page/root-page.html
+++ b/src/components/card/test/advanced/pages/root-page/root-page.html
@@ -28,13 +28,13 @@
    <ion-grid>
      <ion-row>
        <ion-col no-padding>
-          <button ion-button icon-left clear small>
+          <button ion-button icon-start clear small>
            <ion-icon name="star"></ion-icon>
            Star
          </button>
        </ion-col>
        <ion-col no-padding text-right>
-          <button ion-button icon-left clear small class="activated">
+          <button ion-button icon-start clear small class="activated">
            <ion-icon name="share"></ion-icon>
            Activated
          </button>
@@ -66,13 +66,13 @@
    <ion-grid>
      <ion-row>
        <ion-col no-padding>
-          <button ion-button icon-left clear small>
+          <button ion-button icon-start clear small>
            <ion-icon name="star"></ion-icon>
            Favorite
          </button>
        </ion-col>
        <ion-col no-padding text-center>
-          <button ion-button icon-left clear small>
+          <button ion-button icon-start clear small>
            <ion-icon name="musical-notes"></ion-icon>
            Listen
          </button>
@@ -99,20 +99,20 @@
    <ion-grid>
      <ion-row>
        <ion-col no-padding>
-          <button ion-button icon-left clear small dark>
+          <button ion-button icon-start clear small dark>
            <ion-icon name="star"></ion-icon>
            Favorite
          </button>
        </ion-col>

        <ion-col no-padding text-center>
-          <button ion-button icon-left clear small dark>
+          <button ion-button icon-start clear small dark>
            <ion-icon name="musical-notes"></ion-icon>
            Listen
          </button>
        </ion-col>
        <ion-col no-padding text-right>
-          <button ion-button icon-left clear small dark>
+          <button ion-button icon-start clear small dark>
            <ion-icon name="share-alt"></ion-icon>
            Share
          </button>
--- a/src/components/card/test/colors/pages/root-page/root-page.html
+++ b/src/components/card/test/colors/pages/root-page/root-page.html
@@ -71,13 +71,13 @@
    <ion-grid>
      <ion-row>
        <ion-col no-padding>
-          <button ion-button icon-left clear small color="danger">
+          <button ion-button icon-start clear small color="danger">
            <ion-icon name="star"></ion-icon>
            Danger
          </button>
        </ion-col>
        <ion-col no-padding text-right>
-          <button ion-button icon-left clear small color="dark">
+          <button ion-button icon-start clear small color="dark">
            <ion-icon name="share"></ion-icon>
            Dark
          </button>
--- a/src/components/card/test/map/main.html
+++ b/src/components/card/test/map/main.html
@@ -31,7 +31,7 @@
    <ion-item>
      <span item-start>18 min</span>
      <span item-start>(2.6 mi)</span>
-      <button ion-button icon-left primary clear item-end>
+      <button ion-button icon-start primary clear item-end>
        <ion-icon name="navigate"></ion-icon>
        Start
      </button>
@@ -61,7 +61,7 @@
    <ion-item>
      <span item-start>3 hr</span>
      <span item-start>(4.8 mi)</span>
-      <button ion-button icon-left danger clear item-end>
+      <button ion-button icon-start danger clear item-end>
        <ion-icon name="navigate"></ion-icon>
        Start
      </button>
@@ -91,7 +91,7 @@
    <ion-item>
      <span item-start secondary>26 min</span>
      <span item-start>(8.1 mi)</span>
-      <button ion-button icon-left secondary clear item-end>
+      <button ion-button icon-start secondary clear item-end>
        <ion-icon name="navigate"></ion-icon>
        Start
      </button>
--- a/src/components/card/test/social/main.html
+++ b/src/components/card/test/social/main.html
@@ -26,11 +26,11 @@
    </ion-card-content>

    <ion-item>
-      <button ion-button icon-left primary clear item-start>
+      <button ion-button icon-start primary clear item-start>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
-      <button ion-button icon-left primary clear item-start>
+      <button ion-button icon-start primary clear item-start>
        <ion-icon name="text"></ion-icon>
        <div>4 Comments</div>
      </button>
@@ -59,11 +59,11 @@
    </ion-card-content>

    <ion-item>
-      <button ion-button icon-left primary clear item-start>
+      <button ion-button icon-start primary clear item-start>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>30 Likes</div>
      </button>
-      <button ion-button icon-left primary clear item-start>
+      <button ion-button icon-start primary clear item-start>
        <ion-icon name="text"></ion-icon>
        <div>64 Comments</div>
      </button>
@@ -91,11 +91,11 @@
    </ion-card-content>

    <ion-item>
-      <button ion-button icon-left primary clear item-start>
+      <button ion-button icon-start primary clear item-start>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>46 Likes</div>
      </button>
-      <button ion-button icon-left primary clear item-start>
+      <button ion-button icon-start primary clear item-start>
        <ion-icon name="text"></ion-icon>
        <div>66 Comments</div>
      </button>
--- a/src/components/checkbox/checkbox.ios.scss
+++ b/src/components/checkbox/checkbox.ios.scss
@@ -40,14 +40,34 @@ $checkbox-ios-icon-checkmark-color:       color-contrast($colors-ios, $checkbox-
 $checkbox-ios-disabled-opacity:           .3 !default;

 // deprecated
-$checkbox-ios-item-left-margin:           $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
-/// @prop - Margin of the start checkbox item
-$checkbox-ios-item-start-margin:          $checkbox-ios-item-left-margin;
+$checkbox-ios-item-left-margin:           null !default;
+
+/// @prop - Margin top of the left checkbox item
+$checkbox-ios-item-start-margin-top:      $item-ios-padding-media-top !default;
+
+/// @prop - Margin end of the left checkbox item
+$checkbox-ios-item-start-margin-end:      $item-ios-padding-end !default;
+
+/// @prop - Margin bottom of the left checkbox item
+$checkbox-ios-item-start-margin-bottom:   $item-ios-padding-media-bottom !default;
+
+/// @prop - Margin start of the left checkbox item
+$checkbox-ios-item-start-margin-start:    2px !default;

 // deprecated
-$checkbox-ios-item-right-margin:          10px 8px 9px 0 !default;
-/// @prop - Margin of the end checkbox item
-$checkbox-ios-item-end-margin:            $checkbox-ios-item-right-margin;
+$checkbox-ios-item-right-margin:          null !default;
+
+/// @prop - Margin top of the right checkbox item
+$checkbox-ios-item-end-margin-top:        10px !default;
+
+/// @prop - Margin end of the right checkbox item
+$checkbox-ios-item-end-margin-end:        8px !default;
+
+/// @prop - Margin bottom of the right checkbox item
+$checkbox-ios-item-end-margin-bottom:     9px !default;
+
+/// @prop - Margin start of the right checkbox item
+$checkbox-ios-item-end-margin-start:      0 !default;


 .checkbox-ios {
@@ -60,6 +80,8 @@ $checkbox-ios-item-end-margin:            $checkbox-ios-item-right-margin;
 // -----------------------------------------

 .checkbox-ios .checkbox-icon {
+  @include border-radius($checkbox-ios-icon-border-radius);
+
  position: relative;

  width: $checkbox-ios-icon-size;
@@ -67,7 +89,6 @@ $checkbox-ios-item-end-margin:            $checkbox-ios-item-right-margin;

  border-width: $checkbox-ios-icon-border-width;
  border-style: $checkbox-ios-icon-border-style;
-  border-radius: $checkbox-ios-icon-border-radius;
  border-color: $checkbox-ios-icon-border-color-off;
  background-color: $checkbox-ios-background-color-off;
 }
@@ -86,9 +107,9 @@ $checkbox-ios-item-end-margin:            $checkbox-ios-item-right-margin;
 // -----------------------------------------

 .checkbox-ios .checkbox-checked .checkbox-inner {
+  @include position(4px, null, null, 7px);
+
  position: absolute;
-  top: 4px;
-  left: 7px;

  width: 4px;
  height: 9px;
@@ -120,12 +141,16 @@ $checkbox-ios-item-end-margin:            $checkbox-ios-item-right-margin;
  position: static;
  display: block;

-  margin: $checkbox-ios-item-start-margin;
+  @include deprecated-variable(margin, $checkbox-ios-item-left-margin) {
+    @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
+  }
 }

 .item.item-ios .checkbox-ios[item-right], // deprecated
 .item.item-ios .checkbox-ios[item-end] {
-  margin: $checkbox-ios-item-end-margin;
+  @include deprecated-variable(margin, $checkbox-ios-item-right-margin) {
+    @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
+  }
 }


--- a/src/components/checkbox/checkbox.md.scss
+++ b/src/components/checkbox/checkbox.md.scss
@@ -12,12 +12,6 @@ $checkbox-md-border-bottom-style:        solid !default;
 /// @prop - Border bottom color of the checkbox
 $checkbox-md-border-bottom-color:        $list-md-border-color !default;

-/// @prop - Padding of the checkbox
-$checkbox-md-padding:                    $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
-
-/// @prop - Margin of the checkbox
-$checkbox-md-margin:                     0 !default;
-
 /// @prop - Opacity of the disabled checkbox
 $checkbox-md-disabled-opacity:           .3 !default;

@@ -61,14 +55,34 @@ $checkbox-md-transition-duration:        280ms !default;
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;

 // deprecated
-$checkbox-md-item-left-margin:           $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
-/// @prop - Margin of the start checkbox item
-$checkbox-md-item-start-margin:          $checkbox-md-item-left-margin;
+$checkbox-md-item-left-margin:           null !default;
+
+/// @prop - Margin top of the start checkbox item
+$checkbox-md-item-start-margin-top:      $item-md-padding-media-top !default;
+
+/// @prop - Margin end of the start checkbox item
+$checkbox-md-item-start-margin-end:      36px !default;
+
+/// @prop - Margin bottom of the start checkbox item
+$checkbox-md-item-start-margin-bottom:   $item-md-padding-media-bottom !default;
+
+/// @prop - Margin start of the start checkbox item
+$checkbox-md-item-start-margin-start:    4px !default;

 // deprecated
-$checkbox-md-item-right-margin:          11px 10px 10px 0 !default;
-/// @prop - Margin of the end checkbox item
-$checkbox-md-item-end-margin:            $checkbox-md-item-right-margin;
+$checkbox-md-item-right-margin:          null !default;
+
+/// @prop - Margin top of the end checkbox item
+$checkbox-md-item-end-margin-top:        11px !default;
+
+/// @prop - Margin end of the end checkbox item
+$checkbox-md-item-end-margin-end:        10px !default;
+
+/// @prop - Margin bottom of the end checkbox item
+$checkbox-md-item-end-margin-bottom:     10px !default;
+
+/// @prop - Margin start of the end checkbox item
+$checkbox-md-item-end-margin-start:      0 !default;


 .checkbox-md {
@@ -81,6 +95,8 @@ $checkbox-md-item-end-margin:            $checkbox-md-item-right-margin;
 // -----------------------------------------

 .checkbox-md .checkbox-icon {
+  @include border-radius($checkbox-md-icon-border-radius);
+
  position: relative;

  width: $checkbox-md-icon-size;
@@ -88,7 +104,6 @@ $checkbox-md-item-end-margin:            $checkbox-md-item-right-margin;

  border-width: $checkbox-md-icon-border-width;
  border-style: $checkbox-md-icon-border-style;
-  border-radius: $checkbox-md-icon-border-radius;
  border-color: $checkbox-md-icon-border-color-off;
  background-color: $checkbox-md-icon-background-color-off;

@@ -111,9 +126,9 @@ $checkbox-md-item-end-margin:            $checkbox-md-item-right-margin;
 // -----------------------------------------

 .checkbox-md .checkbox-checked .checkbox-inner {
+  @include position(0, null, null, 4px);
+
  position: absolute;
-  top: 0;
-  left: 4px;

  width: 5px;
  height: 10px;
@@ -145,16 +160,20 @@ $checkbox-md-item-end-margin:            $checkbox-md-item-right-margin;
  position: static;
  display: block;

-  margin: $checkbox-md-item-start-margin;
+  @include deprecated-variable(margin, $checkbox-md-item-left-margin) {
+    @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
+  }
 }

 .item.item-md .checkbox-md[item-right], // deprecated
 .item.item-md .checkbox-md[item-end] {
-  margin: $checkbox-md-item-end-margin;
+  @include deprecated-variable(margin, $checkbox-md-item-right-margin) {
+    @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
+  }
 }

 .checkbox-md + .item-inner ion-label {
-  margin-left: 0;
+  @include margin-horizontal(0, null);
 }


--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -15,7 +15,7 @@ import { Item } from '../item/item';
 * The Checkbox is a simple component styled based on the mode. It can be
 * placed in an `ion-item` or used as a stand-alone checkbox.
 *
- * See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
+ * See the [Angular Docs](https://angular.io/docs/ts/latest/guide/forms.html)
 * for more info on forms and inputs.
 *
 *
@@ -42,6 +42,34 @@ import { Item } from '../item/item';
 *  </ion-list>
 * ```
 *
+ * @advanced
+ *
+ * ```html
+ *
+ * <!-- Call function when state changes -->
+ *  <ion-list>
+ *
+ *    <ion-item>
+ *      <ion-label>Cucumber</ion-label>
+ *      <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
+ *    </ion-item>
+ *
+ *  </ion-list>
+ * ```
+ *
+ * ```ts
+ * @Component({
+ *   templateUrl: 'main.html'
+ * })
+ * class SaladPage {
+ *   cucumber: boolean;
+ *
+ *   updateCucumber() {
+ *     console.log('Cucumbers new state:' + this.cucumber);
+ *   }
+ * }
+ * ```
+ *
 * @demo /docs/demos/src/checkbox/
 * @see {@link /docs/components#checkbox Checkbox Component Docs}
 */
@@ -90,13 +118,6 @@ export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDes
    super(config, elementRef, renderer, 'checkbox', false, form, item, null);
  }

-  /**
-   * @hidden
-   */
-  initFocus() {
-    this._elementRef.nativeElement.querySelector('button').focus();
-  }
-
  /**
   * @hidden
   */
@@ -117,8 +138,8 @@ export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDes
  /**
   * @hidden
   */
-  _inputCheckHasValue(val: boolean) {
-    this._item && this._item.setElementClass('item-checkbox-checked', val);
+  _inputUpdated() {
+    this._item && this._item.setElementClass('item-checkbox-checked', this._value);
  }

 }
--- a/src/components/checkbox/checkbox.wp.scss
+++ b/src/components/checkbox/checkbox.wp.scss
@@ -12,12 +12,6 @@ $checkbox-wp-border-bottom-style:        solid !default;
 /// @prop - Border bottom color of the checkbox
 $checkbox-wp-border-bottom-color:        $list-wp-border-color !default;

-/// @prop - Padding of the checkbox
-$checkbox-wp-padding:                    $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default;
-
-/// @prop - Margin of the checkbox
-$checkbox-wp-margin:                     0 !default;
-
 /// @prop - Opacity of the disabled checkbox
 $checkbox-wp-disabled-opacity:           .3 !default;

@@ -55,15 +49,34 @@ $checkbox-wp-icon-border-color-off:      #333 !default;
 $checkbox-wp-icon-border-color-on:       color($colors-wp, primary) !default;

 // deprecated
-$checkbox-wp-item-left-margin:           $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default;
-/// @prop - Margin of the start checkbox item
-$checkbox-wp-item-start-margin:          $checkbox-wp-item-left-margin;
+$checkbox-wp-item-left-margin:           null !default;
+
+/// @prop - Margin top of the start checkbox item
+$checkbox-wp-item-start-margin-top:      $item-wp-padding-media-top !default;
+
+/// @prop - Margin end of the start checkbox item
+$checkbox-wp-item-start-margin-end:      $item-wp-padding-end !default;
+
+/// @prop - Margin bottom of the start checkbox item
+$checkbox-wp-item-start-margin-bottom:   $item-wp-padding-media-bottom !default;
+
+/// @prop - Margin start of the start checkbox item
+$checkbox-wp-item-start-margin-start:    4px !default;

 // deprecated
-$checkbox-wp-item-right-margin:          11px 10px 10px 0 !default;
-/// @prop - Margin of the end checkbox item
-$checkbox-wp-item-end-margin:            $checkbox-wp-item-right-margin;
+$checkbox-wp-item-right-margin:          null !default;

+/// @prop - Margin top of the end checkbox item
+$checkbox-wp-item-end-margin-top:        11px !default;
+
+/// @prop - Margin end of the end checkbox item
+$checkbox-wp-item-end-margin-end:        10px !default;
+
+/// @prop - Margin bottom of the end checkbox item
+$checkbox-wp-item-end-margin-bottom:     10px !default;
+
+/// @prop - Margin start of the end checkbox item
+$checkbox-wp-item-end-margin-start:      0 !default;

 .checkbox-wp {
  position: relative;
@@ -75,6 +88,8 @@ $checkbox-wp-item-end-margin:            $checkbox-wp-item-right-margin;
 // -----------------------------------------

 .checkbox-wp .checkbox-icon {
+  @include border-radius($checkbox-wp-icon-border-radius);
+
  position: relative;

  width: $checkbox-wp-icon-size;
@@ -82,7 +97,6 @@ $checkbox-wp-item-end-margin:            $checkbox-wp-item-right-margin;

  border-width: $checkbox-wp-icon-border-width;
  border-style: $checkbox-wp-icon-border-style;
-  border-radius: $checkbox-wp-icon-border-radius;
  border-color: $checkbox-wp-icon-border-color-off;
  background-color: $checkbox-wp-icon-background-color-off;
 }
@@ -101,9 +115,9 @@ $checkbox-wp-item-end-margin:            $checkbox-wp-item-right-margin;
 // -----------------------------------------

 .checkbox-wp .checkbox-checked .checkbox-inner {
+  @include position(-2px, null, null, 3px);
+
  position: absolute;
-  top: -2px;
-  left: 3px;

  width: 6px;
  height: 12px;
@@ -135,16 +149,20 @@ $checkbox-wp-item-end-margin:            $checkbox-wp-item-right-margin;
  position: static;
  display: block;

-  margin: $checkbox-wp-item-start-margin;
+  @include deprecated-variable(margin, $checkbox-wp-item-left-margin) {
+    @include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start);
+  }
 }

 .item.item-wp .checkbox-wp[item-right], // deprecated
 .item.item-wp .checkbox-wp[item-end] {
-  margin: $checkbox-wp-item-end-margin;
+  @include deprecated-variable(margin, $checkbox-wp-item-right-margin) {
+    @include margin($checkbox-wp-item-end-margin-top, $checkbox-wp-item-end-margin-end, $checkbox-wp-item-end-margin-bottom, $checkbox-wp-item-end-margin-start);
+  }
 }

 .checkbox-wp + .item-inner ion-label {
-  margin-left: 0;
+  @include margin-horizontal(0, null);
 }


--- a/src/components/chip/chip.ios.scss
+++ b/src/components/chip/chip.ios.scss
@@ -2,8 +2,20 @@
 // iOS Chip
 // --------------------------------------------------

-/// @prop - Margin of the chip
-$chip-ios-margin:                     2px 0 !default;
+// deprecated
+$chip-ios-margin:                     null !default;
+
+/// @prop - Margin top of the chip
+$chip-ios-margin-top:                 2px !default;
+
+/// @prop - Margin end of the chip
+$chip-ios-margin-end:                 0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-ios-margin-bottom:              $chip-ios-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-ios-margin-start:               $chip-ios-margin-end !default;

 /// @prop - Height of the chip
 $chip-ios-height:                     32px !default;
@@ -20,8 +32,20 @@ $chip-ios-text-color:                 rgba(0, 0, 0, .87) !default;
 /// @prop - Background color of the chip
 $chip-ios-background-color:           rgba(0, 0, 0, .12) !default;

-/// @prop - Margin of the label in the chip
-$chip-ios-label-margin:               0 10px !default;
+// deprecated
+$chip-ios-label-margin:               null !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-ios-label-margin-top:           0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-ios-label-margin-end:           10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-ios-label-margin-bottom:        $chip-ios-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-ios-label-margin-start:         $chip-ios-label-margin-end !default;

 /// @prop - Background color of the icon in the chip
 $chip-ios-icon-background-color:      color($colors-ios, primary) !default;
@@ -31,19 +55,24 @@ $chip-ios-icon-text-color:            color-contrast($colors-ios, $chip-ios-icon


 .chip-ios {
-  margin: $chip-ios-margin;
+  @include border-radius($chip-ios-border-radius);

  height: $chip-ios-height;

-  border-radius: $chip-ios-border-radius;
  font-size: $chip-ios-font-size;
  line-height: $chip-ios-height;
  color: $chip-ios-text-color;
  background: $chip-ios-background-color;
+
+  @include deprecated-variable(margin, $chip-ios-margin) {
+    @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start);
+  }
 }

 .chip-ios > ion-label {
-  margin: $chip-ios-label-margin;
+  @include deprecated-variable(margin, $chip-ios-label-margin) {
+    @include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start);
+  }
 }

 .chip-ios > ion-icon {
--- a/src/components/chip/chip.md.scss
+++ b/src/components/chip/chip.md.scss
@@ -2,8 +2,20 @@
 // Material Design Chip
 // --------------------------------------------------

-/// @prop - Margin of the chip
-$chip-md-margin:                     2px 0 !default;
+// deprecated
+$chip-md-margin:                     null !default;
+
+/// @prop - Margin top of the chip
+$chip-md-margin-top:                 2px !default;
+
+/// @prop - Margin end of the chip
+$chip-md-margin-end:                 0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-md-margin-bottom:              $chip-md-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-md-margin-start:               $chip-md-margin-end !default;

 /// @prop - Height of the chip
 $chip-md-height:                     32px !default;
@@ -20,8 +32,20 @@ $chip-md-text-color:                 rgba(0, 0, 0, .87) !default;
 /// @prop - Background color of the chip
 $chip-md-background-color:           rgba(0, 0, 0, .12) !default;

-/// @prop - Margin of the label in the chip
-$chip-md-label-margin:               0 10px !default;
+// deprecated
+$chip-md-label-margin:               null !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-md-label-margin-top:           0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-md-label-margin-end:           10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-md-label-margin-bottom:        $chip-md-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-md-label-margin-start:         $chip-md-label-margin-end !default;

 /// @prop - Background color of the icon in the chip
 $chip-md-icon-background-color:      color($colors-md, primary) !default;
@@ -31,19 +55,24 @@ $chip-md-icon-text-color:            color-contrast($colors-md, $chip-md-icon-ba


 .chip-md {
-  margin: $chip-md-margin;
+  @include border-radius($chip-md-border-radius);

  height: $chip-md-height;

-  border-radius: $chip-md-border-radius;
  font-size: $chip-md-font-size;
  line-height: $chip-md-height;
  color: $chip-md-text-color;
  background: $chip-md-background-color;
+
+  @include deprecated-variable(margin, $chip-md-margin) {
+    @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);
+  }
 }

 .chip-md > ion-label {
-  margin: $chip-md-label-margin;
+  @include deprecated-variable(margin, $chip-md-label-margin) {
+    @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start);
+  }
 }

 .chip-md > ion-icon {
--- a/src/components/chip/chip.scss
+++ b/src/components/chip/chip.scss
@@ -6,8 +6,20 @@
 /// @prop - Border radius of the button in the chip
 $chip-button-border-radius:     50% !default;

-/// @prop - Margin of the button in the chip
-$chip-button-margin:            0 !default;
+// deprecated
+$chip-button-margin:            null !default;
+
+/// @prop - Margin top of the button in the chip
+$chip-button-margin-top:        0 !default;
+
+/// @prop - Margin end of the button in the chip
+$chip-button-margin-end:        $chip-button-margin-top !default;
+
+/// @prop - Margin bottom of the button in the chip
+$chip-button-margin-bottom:     $chip-button-margin-top !default;
+
+/// @prop - Margin start of the button in the chip
+$chip-button-margin-start:      $chip-button-margin-end !default;

 /// @prop - Width and height of the button in the chip
 $chip-button-size:              32px !default;
@@ -43,42 +55,43 @@ ion-chip {
 }

 ion-chip .button {
-  margin: $chip-button-margin;
+  @include border-radius($chip-button-border-radius);

  width: $chip-button-size;
  height: $chip-button-size;

-  border-radius: $chip-button-border-radius;
+  @include deprecated-variable(margin, $chip-button-margin) {
+    @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
+  }
 }

 ion-chip ion-icon {
  @include text-align($chip-icon-text-align);
+  @include border-radius($chip-icon-border-radius);

  width: $chip-icon-size;
  height: $chip-icon-size;

-  border-radius: $chip-icon-border-radius;
-
  font-size: $chip-icon-font-size;
  line-height: $chip-icon-size;
 }

 ion-chip ion-avatar {
+  @include border-radius($chip-avatar-border-radius);
+
  width: $chip-avatar-size;
  min-width: $chip-avatar-size;
  height: $chip-avatar-size;
  min-height: $chip-avatar-size;
-
-  border-radius: $chip-avatar-border-radius;
 }

 ion-chip ion-avatar img {
+  @include border-radius($chip-avatar-border-radius);
+
  display: block;

  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
-
-  border-radius: $chip-avatar-border-radius;
 }
--- a/src/components/chip/chip.ts
+++ b/src/components/chip/chip.ts
@@ -41,7 +41,7 @@ import { Ion } from '../ion';
  *
  * <ion-chip>
  *   <ion-avatar>
-  *     <img src="img/my-img.png">
+  *     <img src="assets/img/my-img.png">
  *   </ion-avatar>
  *   <ion-label>Default</ion-label>
  * </ion-chip>
--- a/src/components/chip/chip.wp.scss
+++ b/src/components/chip/chip.wp.scss
@@ -2,8 +2,20 @@
 // Windows Chip
 // --------------------------------------------------

-/// @prop - Margin of the chip
-$chip-wp-margin:                     2px 0 !default;
+// deprecated
+$chip-wp-margin:                     null !default;
+
+/// @prop - Margin top of the chip
+$chip-wp-margin-top:                 2px !default;
+
+/// @prop - Margin end of the chip
+$chip-wp-margin-end:                 0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-wp-margin-bottom:              $chip-wp-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-wp-margin-start:               $chip-wp-margin-end !default;

 /// @prop - Height of the chip
 $chip-wp-height:                     32px !default;
@@ -20,8 +32,20 @@ $chip-wp-text-color:                 rgba(0, 0, 0, .87) !default;
 /// @prop - Background color of the chip
 $chip-wp-background-color:           rgba(0, 0, 0, .12) !default;

-/// @prop - Margin of the label in the chip
-$chip-wp-label-margin:               0 10px !default;
+// deprecated
+$chip-wp-label-margin:               null !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-wp-label-margin-top:           0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-wp-label-margin-end:           10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-wp-label-margin-bottom:        $chip-wp-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-wp-label-margin-start:         $chip-wp-label-margin-end !default;

 /// @prop - Background color of the icon in the chip
 $chip-wp-icon-background-color:      color($colors-wp, primary) !default;
@@ -31,19 +55,24 @@ $chip-wp-icon-text-color:            color-contrast($colors-wp, $chip-wp-icon-ba


 .chip-wp {
-  margin: $chip-wp-margin;
+  @include border-radius($chip-wp-border-radius);

  height: $chip-wp-height;

-  border-radius: $chip-wp-border-radius;
  font-size: $chip-wp-font-size;
  line-height: $chip-wp-height;
  color: $chip-wp-text-color;
  background: $chip-wp-background-color;
+
+  @include deprecated-variable(margin, $chip-wp-margin) {
+    @include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start);
+  }
 }

 .chip-wp > ion-label {
-  margin: $chip-wp-label-margin;
+  @include deprecated-variable(margin, $chip-wp-label-margin) {
+    @include margin($chip-wp-label-margin-top, $chip-wp-label-margin-end, $chip-wp-label-margin-bottom, $chip-wp-label-margin-start);
+  }
 }

 .chip-wp > ion-icon {
--- a/src/components/content/content.ios.scss
+++ b/src/components/content/content.ios.scss
@@ -26,11 +26,11 @@ $content-ios-transition-background:     #000 !default;
 }

 .ios .ion-page.show-page ~ .nav-decor {
+  @include position(0, null, null, 0);
+
  // when ios pages transition, the leaving page grays out
  // this is the black square behind all pages so they gray out
  position: absolute;
-  top: 0;
-  left: 0;
  z-index: 0;
  display: block;

--- a/src/components/content/content.scss
+++ b/src/components/content/content.scss
@@ -4,9 +4,9 @@
 // --------------------------------------------------

 ion-content {
+  @include position(0, null, null, 0);
+
  position: relative;
-  top: 0;
-  left: 0;
  display: block;

  width: 100%;
@@ -28,11 +28,9 @@ a {
 // --------------------------------------------------

 .scroll-content {
+  @include position(0, 0, 0, 0);
+
  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
  z-index: $z-index-scroll-content;
  display: block;

@@ -60,16 +58,18 @@ ion-content.js-scroll > .scroll-content {
  touch-action: none;
 }

+ion-content.has-refresher > .scroll-content {
+  background-color: inherit;
+}
+

 // Fixed Content (ion-fixed and ion-fab)
 // --------------------------------------------------

 .fixed-content {
+  @include position(0, 0, 0, 0);
+
  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
  display: block;
 }

@@ -87,45 +87,43 @@ ion-content.js-scroll > .scroll-content {

 ion-app [no-padding],
 ion-app [no-padding] .scroll-content {
-  padding: 0;
+  @include padding(0);
 }

@mixin content-padding($mode, $content-padding) {
  ion-app.#{$mode} [padding],
  ion-app.#{$mode} [padding] .scroll-content {
-    padding: $content-padding;
+    @include padding($content-padding);
  }

  ion-app.#{$mode} [padding-top],
  ion-app.#{$mode} [padding-top] .scroll-content {
-    padding-top: $content-padding;
+    @include padding($content-padding, null, null, null);
  }

  ion-app.#{$mode} [padding-left],
  ion-app.#{$mode} [padding-left] .scroll-content {
-    padding-left: $content-padding;
+    @include padding-horizontal($content-padding, null);
  }

  ion-app.#{$mode} [padding-right],
  ion-app.#{$mode} [padding-right] .scroll-content {
-    padding-right: $content-padding;
+    @include padding-horizontal(null, $content-padding);
  }

  ion-app.#{$mode} [padding-bottom],
  ion-app.#{$mode} [padding-bottom] .scroll-content {
-    padding-bottom: $content-padding;
+    @include padding(null, null, $content-padding, null);
  }

  ion-app.#{$mode} [padding-vertical],
  ion-app.#{$mode} [padding-vertical] .scroll-content {
-    padding-top: $content-padding;
-    padding-bottom: $content-padding;
+    @include padding($content-padding, null, $content-padding, null);
  }

  ion-app.#{$mode} [padding-horizontal],
  ion-app.#{$mode} [padding-horizontal] .scroll-content {
-    padding-right: $content-padding;
-    padding-left: $content-padding;
+    @include padding-horizontal($content-padding);
  }
 }

@@ -135,44 +133,54 @@ ion-app [no-padding] .scroll-content {

 ion-app [no-margin],
 ion-app [no-margin] .scroll-content {
-  margin: 0;
+  @include margin(0);
 }

@mixin content-margin($mode, $content-margin) {
  ion-app.#{$mode} [margin],
  ion-app.#{$mode} [margin] .scroll-content {
-    margin: $content-margin;
+    @include margin($content-margin);
  }

  ion-app.#{$mode} [margin-top],
  ion-app.#{$mode} [margin-top] .scroll-content {
-    margin-top: $content-margin;
+    @include margin($content-margin, null, null, null);
  }

  ion-app.#{$mode} [margin-left],
  ion-app.#{$mode} [margin-left] .scroll-content {
+    // scss-lint:disable PropertySpelling
    margin-left: $content-margin;
  }

+  ion-app.#{$mode} [margin-start],
+  ion-app.#{$mode} [margin-start] .scroll-content {
+    @include margin-horizontal($content-margin, null);
+  }
+
  ion-app.#{$mode} [margin-right],
  ion-app.#{$mode} [margin-right] .scroll-content {
+    // scss-lint:disable PropertySpelling
    margin-right: $content-margin;
  }

+  ion-app.#{$mode} [margin-end],
+  ion-app.#{$mode} [margin-end] .scroll-content {
+    @include margin-horizontal(null, $content-margin);
+  }
+
  ion-app.#{$mode} [margin-bottom],
  ion-app.#{$mode} [margin-bottom] .scroll-content {
-    margin-bottom: $content-margin;
+    @include margin(null, null, $content-margin, null);
  }

  ion-app.#{$mode} [margin-vertical],
  ion-app.#{$mode} [margin-vertical] .scroll-content {
-    margin-top: $content-margin;
-    margin-bottom: $content-margin;
+    @include margin($content-margin, null, $content-margin, null);
  }

  ion-app.#{$mode} [margin-horizontal],
  ion-app.#{$mode} [margin-horizontal] .scroll-content {
-    margin-right: $content-margin;
-    margin-left: $content-margin;
+    @include margin-horizontal($content-margin);
  }
 }
--- a/src/components/content/content.ts
+++ b/src/components/content/content.ts
@@ -63,7 +63,44 @@ export class EventEmitterProxy<T> extends EventEmitter<T> {
 *
 * @advanced
 *
- * Resizing the content. If the height of `ion-header`, `ion-footer` or `ion-tabbar`
+ * ### Sroll Events
+ *
+ * Scroll events happen outside of Angular's Zones. This is for performance reasons. So
+ * if you're trying to bind a value to any scroll event, it will need to be wrapped in
+ * a `zone.run()`
+ *
+ * ```ts
+ * import { Component, NgZone } from '@angular/core';
+ * @Component({
+ *   template: `
+ *     <ion-header>
+ *       <ion-navbar>
+ *         <ion-title>{{scrollAmount}}</ion-title>
+ *       </ion-navbar>
+ *     </ion-header>
+ *     <ion-content (ionScroll)="scrollHandler($event)">
+ *        <p> Some realllllllly long content </p>
+ *     </ion-content>
+ * `})
+ * class E2EPage {
+ *  public scrollAmount = 0;
+ *  constructor( public zone: NgZone){}
+ *  scrollHandler(event) {
+ *    console.log(`ScrollEvent: ${event}`)
+ *    this.zone.run(()=>{
+ *      // since scrollAmount is data-binded,
+ *      // the update needs to happen in zone
+ *      this.scrollAmount++
+ *    })
+ *  }
+ * }
+ * ```
+ *
+ * This goes for any scroll event, not just `ionScroll`.
+ *
+ * ### Resizing the content
+ *
+ * If the height of `ion-header`, `ion-footer` or `ion-tabbar`
 * changes dynamically, `content.resize()` has to be called in order to update the
 * layout of `Content`.
 *
@@ -130,7 +167,8 @@ export class EventEmitterProxy<T> extends EventEmitter<T> {
    '</div>' +
    '<ng-content select="ion-refresher"></ng-content>',
  host: {
-    '[class.statusbar-padding]': 'statusbarPadding'
+    '[class.statusbar-padding]': 'statusbarPadding',
+    '[class.has-refresher]': '_hasRefresher'
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
@@ -175,6 +213,8 @@ export class Content extends Ion implements OnDestroy, AfterViewInit, IContent {
  /** @internal */
  _fullscreen: boolean;
  /** @internal */
+  _hasRefresher: boolean = false;
+  /** @internal */
  _footerEle: HTMLElement;
  /** @internal */
  _dirty: boolean;
@@ -745,6 +785,11 @@ export class Content extends Ion implements OnDestroy, AfterViewInit, IContent {
      this._cBottom += this._tabbarHeight;
    }

+    // Refresher uses a border which should be hidden unless pulled
+    if (this._hasRefresher) {
+      this._cTop -= 1;
+    }
+
    // Fixed content shouldn't include content padding
    this._fTop = this._cTop;
    this._fBottom = this._cBottom;
--- a/src/components/content/test/basic/pages/page-five/page-five.html
+++ b/src/components/content/test/basic/pages/page-five/page-five.html
@@ -2,7 +2,7 @@
  <ion-navbar style="opacity: 0.8">
    <ion-title>Page 4</ion-title>
    <ion-buttons right>
-      <button ion-button icon-right [navPush]="tabsPage">
+      <button ion-button icon-end [navPush]="tabsPage">
        Next
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/src/components/content/test/basic/pages/page-four/page-four.html
+++ b/src/components/content/test/basic/pages/page-four/page-four.html
@@ -2,7 +2,7 @@
  <ion-navbar style="opacity: 0.8">
    <ion-title>Page 3</ion-title>
    <ion-buttons right>
-      <button ion-button icon-right [navPush]="page4">
+      <button ion-button icon-end [navPush]="page4">
        Next
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/src/components/content/test/basic/pages/page-one/page-one.html
+++ b/src/components/content/test/basic/pages/page-one/page-one.html
@@ -2,7 +2,7 @@
  <ion-navbar style="opacity: 0.8">
    <ion-title>Main</ion-title>
    <ion-buttons right>
-      <button ion-button icon-right [navPush]="page1">
+      <button ion-button icon-end [navPush]="page1">
        Next
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/src/components/content/test/basic/pages/page-three/page-three.html
+++ b/src/components/content/test/basic/pages/page-three/page-three.html
@@ -2,7 +2,7 @@
  <ion-navbar style="opacity: 0.8">
    <ion-title>Page 2</ion-title>
    <ion-buttons right>
-      <button ion-button icon-right [navPush]="page3">
+      <button ion-button icon-end [navPush]="page3">
        Next
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/src/components/content/test/fullscreen/pages/page-five/page-five.html
+++ b/src/components/content/test/fullscreen/pages/page-five/page-five.html
@@ -2,7 +2,7 @@
  <ion-navbar style="opacity: 0.8">
    <ion-title>Page 4</ion-title>
    <ion-buttons right>
-      <button ion-button icon-right [navPush]="tabsPage">
+      <button ion-button icon-end [navPush]="tabsPage">
        Next
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/src/components/content/test/fullscreen/pages/page-four/page-four.html
+++ b/src/components/content/test/fullscreen/pages/page-four/page-four.html
@@ -2,7 +2,7 @@
  <ion-navbar style="opacity: 0.8">
    <ion-title>Page 3</ion-title>
    <ion-buttons right>
-      <button ion-button icon-right [navPush]="page4">
+      <button ion-button icon-end [navPush]="page4">
        Next
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/src/components/content/test/fullscreen/pages/page-one/page-one.html
+++ b/src/components/content/test/fullscreen/pages/page-one/page-one.html
@@ -2,7 +2,7 @@
  <ion-navbar style="opacity: 0.8">
    <ion-title>Main</ion-title>
    <ion-buttons right>
-      <button ion-button icon-right [navPush]="page1">
+      <button ion-button icon-end [navPush]="page1">
        Next
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/src/components/content/test/fullscreen/pages/page-three/page-three.html
+++ b/src/components/content/test/fullscreen/pages/page-three/page-three.html
@@ -2,7 +2,7 @@
  <ion-navbar style="opacity: 0.8">
    <ion-title>Page 2</ion-title>
    <ion-buttons right>
-      <button ion-button icon-right [navPush]="page3">
+      <button ion-button icon-end [navPush]="page3">
        Next
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
--- a/src/components/datetime/datetime.ios.scss
+++ b/src/components/datetime/datetime.ios.scss
@@ -6,21 +6,25 @@
 /// @prop - Padding top of the DateTime component
 $datetime-ios-padding-top:         $item-ios-padding-top !default;

-/// @prop - Padding right of the DateTime component
-$datetime-ios-padding-right:       ($item-ios-padding-right / 2) !default;
+// deprecated
+$datetime-ios-padding-right:       ($item-ios-padding-end / 2) !default;
+/// @prop - Padding end of the DateTime component
+$datetime-ios-padding-end:         $datetime-ios-padding-right !default;

 /// @prop - Padding bottom of the DateTime component
 $datetime-ios-padding-bottom:      $item-ios-padding-bottom !default;

-/// @prop - Padding left of the DateTime component
-$datetime-ios-padding-left:        $item-ios-padding-left !default;
+// deprecated
+$datetime-ios-padding-left:        $item-ios-padding-start !default;
+/// @prop - Padding start of the DateTime component
+$datetime-ios-padding-start:       $datetime-ios-padding-left !default;

 /// @prop - Color of the DateTime placeholder
 $datetime-ios-placeholder-color:   #999 !default;


 .datetime-ios {
-  padding: $datetime-ios-padding-top $datetime-ios-padding-right $datetime-ios-padding-bottom $datetime-ios-padding-left;
+  @include padding($datetime-ios-padding-top, $datetime-ios-padding-end, $datetime-ios-padding-bottom, $datetime-ios-padding-start);
 }

 .datetime-ios .datetime-placeholder {
--- a/src/components/datetime/datetime.md.scss
+++ b/src/components/datetime/datetime.md.scss
@@ -6,21 +6,25 @@
 /// @prop - Padding top of the DateTime component
 $datetime-md-padding-top:         $item-md-padding-top !default;

-/// @prop - Padding right of the DateTime component
-$datetime-md-padding-right:       ($item-md-padding-right / 2) !default;
+// deprecated
+$datetime-md-padding-right:       ($item-md-padding-end / 2) !default;
+/// @prop - Padding end of the DateTime component
+$datetime-md-padding-end:         $datetime-md-padding-right !default;

 /// @prop - Padding bottom of the DateTime component
 $datetime-md-padding-bottom:      $item-md-padding-bottom !default;

-/// @prop - Padding left of the DateTime component
-$datetime-md-padding-left:        $item-md-padding-left !default;
+// deprecated
+$datetime-md-padding-left:        $item-md-padding-start !default;
+/// @prop - Padding start of the DateTime component
+$datetime-md-padding-start:       $datetime-md-padding-left !default;

 /// @prop - Color of the DateTime placeholder
 $datetime-md-placeholder-color:   #999 !default;


 .datetime-md {
-  padding: $datetime-md-padding-top $datetime-md-padding-right $datetime-md-padding-bottom $datetime-md-padding-left;
+  @include padding($datetime-md-padding-top, $datetime-md-padding-end, $datetime-md-padding-bottom, $datetime-md-padding-start);
 }

 .datetime-md .datetime-placeholder {
--- a/Show More
+++ b/Show More