Merge pull request #10 from fritzSF/font-size

Font size

Author: pavlovicnemanja

app/styles/_badge.scss

@@ -22,7 +22,7 @@ $badge-minwidth: 1.9em !default;
 $badge-radius: 1em !default;
 
 /// Default font size and line height for badges.
-$badge-font-size: 0.625rem !default;
+$badge-font-size: 1rem !default;
 $badge-lineheight: 1em !default;
 
 /// Generates the base styles for a badge.

app/styles/_buttons.scss

@@ -1,8 +1,8 @@
 /// Padding inside buttons.
 /// @type List
-$button-padding: 0.4375rem 0.875rem !default;
-$button-padding-small: 0.3125rem 0.625rem;
-$button-padding-large: 0.625rem 1.25rem;
+$button-padding: 0.7rem 1.4rem !default;
+$button-padding-small: 0.5rem 1rem;
+$button-padding-large: 1rem 2rem;
 
 /// Margin around buttons.
 /// @type List
@@ -36,9 +36,9 @@ $button-radius: 2px !default;
 /// Sizes for buttons / Font size
 /// @type Map
 $button-sizes: (
-  btn--small: 0.625rem,
-  btn--default: 0.75rem,
-  btn--large: 0.875rem,
+  btn--small: 1rem,
+  btn--default: 1.2rem,
+  btn--large: 1.4rem,
 ) !default;
 
 /// opacity for a disabled button.

app/styles/_labels.scss

@@ -13,17 +13,17 @@ $label-color-alt: $gray !default;
 $label-palette: $sd-extended-palette;
 
 /// Default padding inside labels.
-$label-padding: 0 0.375rem !default;
-$label-padding-large: 0.25rem 0.75rem;
+$label-padding: 0 0.6rem !default;
+$label-padding-large: 0.4rem 1.2rem;
 
 $label-lineheight-large: 1;
 
 /// Default radius of labels.
 $label-radius: 2px !default;
 
 $label-sizes: (
-  label--default: 0.5625rem,
-  label--large: 0.6875rem,
+  label--default: 0.9rem,
+  label--large: 1.1rem,
 ) !default;
 
 /// Removes background fill for hollow buttons.
@@ -40,7 +40,7 @@ $label-sizes: (
     vertical-align: middle;
     border-radius: $label-radius;
     text-transform: uppercase;
-    line-height: 0.875rem;
+    line-height: 1.4rem;
     letter-spacing: 0.125em;
     font-size: map-get($label-sizes, label--default);
     white-space: nowrap;

app/styles/_reboot.scss

@@ -0,0 +1,42 @@
+/**
+ * SD Reboot
+ */
+
+// ============================================================================
+// GLOBAL
+// ============================================================================
+
+// Reset box sizing
+* {
+  box-sizing: border-box;
+}
+// Set box-sizing globally to handle padding and border widths
+
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+// remove deafult browser focus
+:focus {outline:none;}
+
+// Body reset
+html {
+  font-size: 10px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  font-family: $baseFontFamily;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+}
+
+$baseFontSize: 13px;
+$baseFontFamily: "Roboto", Helvetica, Arial, sans-serif;
+$baseLineHeight: 18px;
+$altFontFamily: Georgia, "Times New Roman", Times, serif;
+
+// override content-box in normalize.css
+input[type="search"] {
+  box-sizing: border-box;
+}

app/styles/_reset.scss

@@ -1,13 +1,2 @@
-html {
-    box-sizing: border-box;
-}
-
-// Set box-sizing globally to handle padding and border widths
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
-}
-
 @import 'variables/typography';
 @import 'variables/colors';

app/styles/_variables.scss

@@ -1,8 +1,9 @@
+
 @import "normalize";
-@import "reset";
+@import "variables";
+@import "reboot";
 @import "mixins";
 @import "helpers";
-@import "variables";
 @import "buttons";
 @import "labels";
 @import "badge";

app/styles/app.scss

@@ -3,17 +3,17 @@
 .form-label {
     display: inline-block;
     min-width: 75px;
-    font-size: 11px;
-    line-height: 26px;
-    margin: 0 5px 0 0;
+    font-size: 1.1rem;
+    line-height: 2.6rem;
+    margin: 0 0.5rem 0 0;
     color: #747474;
     text-transform: uppercase;
     font-weight: 500;
 }
 
 .sd-line-input {
     margin: 0 0 1.8em 0;
-    padding-top: 14px;
+    padding-top: 1.4rem;
     position: relative;
     input, textarea {
         &.sd-line-input__input {
@@ -23,8 +23,8 @@
             border-bottom: 1px solid rgba(0,0,0,0.15)!important;
             background-color: transparent;
             padding: 0;
-            font-size: 14px;
-            height:24px;
+            font-size: 1.4rem;
+            height:2.4rem;
             transition: border linear 0.2s, box-shadow linear 0.2s;
             &:hover {
                 border-color: rgba(0,0,0,0.3) !important;
@@ -43,19 +43,19 @@
     .sd-line-input__label {
         position: absolute;
         display: inline-block;
-        font-size: 11px;
+        font-size: 1.1rem;
         line-height: 100%;
         margin: 0;
-        color: #747474;
+        color: $grayText;
         text-transform: uppercase;
         font-weight: 500;
         top:0;
     }
     .sd-line-input__hint,
     .sd-line-input__message,
     .sd-line-input__char-count {
-        font-size: 12px;
-        line-height: 14px;
+        font-size: 1.2rem;
+        line-height: 1.4rem;
         transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
         color: grey;
         font-weight: 300;
@@ -65,20 +65,20 @@
         position: absolute;
         left: 1px;
         right: auto;
-        top: 42px;
-        padding-right: 55px;
+        top: 4.2rem;
+        padding-right: 5.5rem;
     }
     .sd-line-input__char-count {
         position: absolute;
         right: 1px;
         left: auto;
-        top: 43px;
-        font-size: 11px;
+        top: 4.3rem;
+        font-size: 1.1rem;
         font-weight: 400;
         font-style: italic;
     }
     .sd-line-input__message {
-        padding-top: 4px;
+        padding-top: 0.4rem;
     }
     &.sd-line-input--invalid {
         .sd-line-input__label,

app/styles/form-elements/_inputs.scss

@@ -4,6 +4,7 @@ $black:                 #000;
 $grayDarker:            #222;
 $grayDark:              #333;
 $gray:                  #666;
+$grayText:              #747474;
 $grayLight:             #999;
 $grayLighter:           #F5F5F5;
 $white:                 #fff;

app/styles/variables/_colors.scss

@@ -3,7 +3,7 @@
 
 $baseFontSize: 13px;
 $baseFontFamily: "Roboto", Helvetica, Arial, sans-serif;
-$baseLineHeight: 18px;
+$baseLineHeight: 140%;
 $altFontFamily: Georgia, "Times New Roman", Times, serif;
 
 $headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily