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 {
-  color: #ccc;
+  .version {
-  font-size: 10px;
+    color: #ccc;
-  position: absolute;
+    font-size: 10px;
-  right: 10px;
+    position: absolute;
-  top: 10px;
+    right: 10px;
-}
+    top: 10px;
-
-@media only screen and (max-width: 630px) {
-  .settings .form-horizontal .controls {
-    margin-left: 110px;
   }
-  .settings .form-horizontal .control-label {
+  .form-horizontal {
-    width: 100px;
+    .controls {
-    word-wrap: break-word;
+      @include breakpt-only-screen($breakpoint-settings-medium) {
+        margin-left: 110px;
+      }
+    }
+    .control-label {
+      @include breakpt-only-screen($breakpoint-settings-medium) {
+        width: 100px;
+        word-wrap: break-word;
+      }
+    }
   }
-  .settings {
+  @include breakpt-only-screen($breakpoint-settings-medium) {
     padding-bottom: 10px;
   }
-  #settings.show {
-    background: white;
-    left: 0;
-    width: auto;
-  }
-  #settings.show .form-actions {
-    bottom: 0;
-    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