From 5ae94e655984391d5d10d5470578228e1645f835 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 11:19:09 -0600
Subject: [PATCH] mode font styling

---
 ionic/components/action-sheet/modes/ios.scss | 11 ++-----
 ionic/components/action-sheet/modes/md.scss  |  1 +
 ionic/components/app/modes/md.scss           |  2 ++
 ionic/components/app/normalize.scss          |  4 +++
 ionic/components/app/typography.scss         | 30 ++++++--------------
 ionic/components/button/button.scss          |  3 --
 ionic/components/content/modes/ios.scss      |  1 -
 ionic/components/content/modes/md.scss       |  4 +++
 ionic/ionic.ios.scss                         |  7 +++--
 ionic/ionic.md.scss                          | 10 +++++--
 ionic/ionic.scss                             |  8 ++++--
 ionic/themes/default.ios.scss                | 13 +++++++++
 ionic/themes/default.md.scss                 | 13 +++++++++
 ionic/themes/default.scss                    |  3 ++
 scripts/snapshot/snapshot.config.js          |  4 +--
 15 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index a3cc41e673..dab7f7bc58 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -8,16 +8,15 @@ $action-sheet-ios-group-margin:                   10px !default;
 $action-sheet-ios-background-color:               rgba(243,243,243,.95) !default;
 
 $action-sheet-ios-height:                         5.6rem !default;
-$action-sheet-ios-padding:                        1.8rem !default;
+$action-sheet-ios-padding:                        18px !default;
 $action-sheet-ios-border-color:                   #d6d6da !default;
-$action-sheet-ios-border-radius:                  1.3rem !default;
+$action-sheet-ios-border-radius:                  13px !default;
 
 $action-sheet-ios-title-color:                    #5f5f5f !default;
 $action-sheet-ios-title-font-size:                1.2rem !default;
 
 $action-sheet-ios-button-text-color:              #007aff !default;
-$action-sheet-ios-option-font-size:               2rem !default;
-$action-sheet-ios-button-font-size:               21px !default;
+$action-sheet-ios-button-font-size:               2rem !default;
 $action-sheet-ios-background-active-color:        #e9e9e9 !default;
 
 $action-sheet-ios-destructive-button-text-color:  #f53d3d !default;
@@ -71,10 +70,6 @@ ion-action-sheet {
   }
 }
 
-.action-sheet-option {
-  font-size: $action-sheet-ios-option-font-size;
-}
-
 .action-sheet-destructive {
   color: $action-sheet-ios-destructive-button-text-color;
 }
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index 127c4fea4c..22c02e2e65 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -29,6 +29,7 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 
 .action-sheet-button {
   background-color: transparent;
+  font-size: $action-sheet-md-button-font-size;
   font-weight: normal;
   min-height: $action-sheet-md-height;
   color: $action-sheet-md-button-text-color;
diff --git a/ionic/components/app/modes/md.scss b/ionic/components/app/modes/md.scss
index bc2b7e763b..b09f4f3c6e 100644
--- a/ionic/components/app/modes/md.scss
+++ b/ionic/components/app/modes/md.scss
@@ -3,6 +3,8 @@
 // Material Design App
 // --------------------------------------------------
 
+
+
 hr {
   border-width: 0;
   height: 1px;
diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index fde3d9913a..52325bb6fb 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -117,6 +117,10 @@ input[type="submit"] {
 
 button {
   border: 0;
+  line-height: 1;
+  font-family: inherit;
+  font-variant: inherit;
+  font-style: inherit;
   text-transform: none;
   -webkit-appearance: button;
   cursor: pointer;
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index f38e936a98..b6ef131a17 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -1,39 +1,25 @@
 @import "../../globals.core";
 
 // Typography
-// -------------------------
+// --------------------------------------------------
 // All font sizes use rem units
+// By default, 1rem equals 10px. For example, 1.4rem  === 14px
+// $font-size-root value, which is on the <html> element
+// is what can scale all fonts
 
-
-$font-family-sans-serif:          -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
-$font-family-light-sans-serif:    -apple-system, "HelveticaNeue-Light", "Roboto-Light", sans-serif-light !default;
-
-$font-family-base:                $font-family-sans-serif !default;
-$font-size-root:                  62.5% !default;
-$font-size-base:                  1.4rem !default; // 1.4rem == 14px
-$font-size-small:                 1rem !default;
-
-$line-height-base:                1.4 !default;
-$line-height-computed:            3rem !default;
-$line-height-large:               1.33 !default;
-$line-height-small:               1.5 !default;
-
-$headings-font-weight:            500 !default;
-$headings-line-height:            1.2 !default;
+$font-size-root:               62.5% !default;
+$headings-font-weight:         500 !default;
+$headings-line-height:         1.2 !default;
 
 
 html {
   font-size: $font-size-root;
 }
 
-body {
-  font-size: $font-size-base;
-  font-family: $font-family-base;
-}
-
 a {
   background-color: transparent;
 }
+
 .enable-hover a:hover {
   opacity: 0.7;
 }
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 58b1c7a2c1..ecfc4e27af 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -31,9 +31,6 @@ $button-round-border-radius:      64px !default;
   border-radius: $button-border-radius;
 
   font-size: $button-font-size;
-  font-family: inherit;
-  font-variant: inherit;
-  font-style: inherit;
 
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index 0ac8f94ce6..07394e22e8 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -6,7 +6,6 @@
 $outer-content-ios-background-color:         #efeff4 !default;
 
 
-body,
 ion-content {
   background-color: $background-ios-color;
 }
diff --git a/ionic/components/content/modes/md.scss b/ionic/components/content/modes/md.scss
index c1ec178d3a..ff3794d455 100644
--- a/ionic/components/content/modes/md.scss
+++ b/ionic/components/content/modes/md.scss
@@ -6,6 +6,10 @@
 $content-padding-md:    16px !default;
 
 
+ion-content {
+  background-color: $background-md-color;
+}
+
 [padding],
 [padding] > scroll-content {
   padding: $content-padding-md;
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index ed0c3cc51c..97f519b63f 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -1,10 +1,13 @@
 /*! Ionic: iOS */
 @charset "UTF-8";
 
-
 // Core Components
 @import "components.core";
 
-
 // iOS Components
 @import "components.ios";
+
+// iOS Body
+body {
+  @include ios-body();
+}
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index e10e940ca8..bc920f8727 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -1,10 +1,16 @@
 /*! Ionic: Material Design */
 @charset "UTF-8";
 
-
 // Core Components
 @import "components.core";
 
-
 // Material Design Components
 @import "components.md";
+
+// Material Design Body
+body {
+  @include md-body();
+}
+
+// Roboto Font
+@import "fonts/roboto";
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 361e8d522f..4574449418 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -1,17 +1,19 @@
 @charset "UTF-8";
 
-
 // Core Components
 @import "components.core";
 
-
 // iOS Components
 .ios {
   @import "components.ios";
+  @include ios-body();
 }
 
-
 // Material Design Components
 .md {
   @import "components.md";
+  @include md-body();
 }
+
+// Roboto Font
+@import "fonts/roboto";
diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss
index 48e506710e..edd773e3d0 100644
--- a/ionic/themes/default.ios.scss
+++ b/ionic/themes/default.ios.scss
@@ -19,6 +19,9 @@ $link-ios-color:                       map-get($colors-ios, primary) !default;
 $background-ios-color:                 $background-color !default;
 $subdued-text-ios-color:               $subdued-text-color !default;
 
+$font-family-ios-base:                 $font-family-base !default;
+$font-size-ios-base:                   $font-size-base !default;
+
 
 // iOS Toolbar
 // --------------------------------------------------
@@ -61,3 +64,13 @@ $icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' vi
   $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
   @include svg-background-image($svg);
 }
+
+
+// iOS Body
+// --------------------------------------------------
+
+@mixin ios-body() {
+  font-family: $font-family-ios-base;
+  font-size: $font-size-ios-base;
+  background-color: $background-ios-color;
+}
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index c113cd7ac8..a2150965a3 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -19,6 +19,9 @@ $link-md-color:                       map-get($colors-md, primary) !default;
 $background-md-color:                 $background-color !default;
 $subdued-text-md-color:               $subdued-text-color !default;
 
+$font-family-md-base:                 "Roboto", "Helvetica Neue", sans-serif !default;
+$font-size-md-base:                   $font-size-base !default;
+
 
 // Material Design Toolbar
 // --------------------------------------------------
@@ -58,3 +61,13 @@ $item-md-padding-icon-bottom:         10px !default;
 @function ripple-background-color($button-color) {
   @return rgba( red($button-color), green($button-color), blue($button-color), 0.1);
 }
+
+
+// Material Design Body
+// --------------------------------------------------
+
+@mixin md-body() {
+  font-family: $font-family-md-base;
+  font-size: $font-size-md-base;
+  background-color: $background-md-color;
+}
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index fe5d25b38e..a52038af9f 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -18,6 +18,9 @@ $link-color:                 map-get($colors, primary) !default;
 $background-color:           #fff !default;
 $subdued-text-color:         #666 !default;
 
+$font-family-base:           -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
+$font-size-base:             1.4rem !default; // 1.4rem == 14px
+
 $toolbar-background-color:   #f8f8f8 !default;
 $toolbar-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js
index dc03911370..920394ba66 100644
--- a/scripts/snapshot/snapshot.config.js
+++ b/scripts/snapshot/snapshot.config.js
@@ -8,8 +8,8 @@ exports.config = {
   domain: 'ionic-snapshot-go.appspot.com',
   //domain: 'localhost:8080',
 
-  specs: 'dist/e2e/**/*e2e.js',
-  //specs: 'dist/e2e/searchbar/**/*e2e.js',
+  //specs: 'dist/e2e/**/*e2e.js',
+  specs: 'dist/e2e/action-sheet/**/*e2e.js',
 
   sleepBetweenSpecs: 350,