Convert settings to scss.

src/styles/components/_settings.scss

@@ -33,6 +33,22 @@
 
 #settings.show {
   right: 0;
+  @include breakpt-only-screen($breakpoint-settings-medium) {
+    background: white;
+    left: 0;
+    width: auto;
+  }
+  .form-actions{
+    @include breakpt-only-screen($breakpoint-settings-medium) {
+      bottom: 0;
+      height: 60px;
+      left: 0;
+      margin-bottom: 0;
+      padding: 6px 0 6px 120px;
+      position: fixed;
+      right: 0;
+    }
+  }
 }
 
 .settings {
@@ -47,37 +63,28 @@
   top: 0;
 }
 
-.settings .version {
+.settings {
+  .version {
     color: #ccc;
     font-size: 10px;
     position: absolute;
     right: 10px;
     top: 10px;
   }
-
+  .form-horizontal {
-@media only screen and (max-width: 630px) {
+    .controls {
-  .settings .form-horizontal .controls {
+      @include breakpt-only-screen($breakpoint-settings-medium) {
         margin-left: 110px;
       }
-  .settings .form-horizontal .control-label {
+    }
+    .control-label {
+      @include breakpt-only-screen($breakpoint-settings-medium) {
         width: 100px;
         word-wrap: break-word;
       }
-  .settings {
-    padding-bottom: 10px;
     }
-  #settings.show {
-    background: white;
-    left: 0;
-    width: auto;
   }
-  #settings.show .form-actions {
+  @include breakpt-only-screen($breakpoint-settings-medium) {
-    bottom: 0;
+    padding-bottom: 10px;
-    height: 60px;
-    left: 0;
-    margin-bottom: 0;
-    padding: 6px 0 6px 120px;
-    position: fixed;
-    right: 0;
   }
 }

src/styles/global/_variables.scss

@@ -96,6 +96,8 @@ $breakpoint-video-medium: 630px;
 
 $breakpoint-chat-small: 210px;
 
+$breakpoint-settings-medium: 630px;
+
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
 
 // compass