Add breakpoint to switch to mobile friendly form layout

issue #149
- added breakpoint at 550px to change form layout
- labels are on top of form fiels
- form fields change to 100% width

ghost/admin/assets/sass/layouts/settings.scss

@@ -232,7 +232,8 @@
             left:0;
             bottom:0;
             padding:40px;
-            overflow:auto;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
 
             &.no-padding {
                 padding: 0;
@@ -240,6 +241,7 @@
 
             @include breakpoint($netbook) { padding-left:15px; }
             @include breakpoint($letterbox) { top: 0; }
+            @include breakpoint(550px) { padding: 0 15px 40px; }
         }
 
     }//.settings-content

ghost/admin/assets/sass/modules/forms.scss

@@ -46,6 +46,15 @@ form {
             font-weight:bold;
             color:$brown;
             text-align: right;
+
+            @include breakpoint(550px) {
+                position: relative;
+                top: auto;
+                left: auto;
+                width: auto;
+                margin-bottom: 5px;
+                text-align: left;
+            }
         }
     }
 
@@ -66,6 +75,11 @@ form {
         border: darken($lightbrown, 5%) 1px solid;
         border-radius: $rounded;
         @include transition(all 0.15s ease-in-out);
+
+        @include breakpoint(550px) {
+            width: 100%;
+            @include box-sizing(border-box);
+        }
     }
 
     textarea {
@@ -104,6 +118,11 @@ form {
         width:270px;
         height:30px;
         line-height:30px;
+
+        @include breakpoint(550px) {
+            width: 100%;
+            @include box-sizing(border-box);
+        }
     }
 
     .radio input[type="radio"],
@@ -127,6 +146,8 @@ form {
         position:relative;
         margin:1.5em 0;
         padding-left:140px;
+
+        @include breakpoint(550px) { padding-left: 0; }
     }
 
 }//form