Convert settings to scss.

Convert colors to variables.

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 {
+    color: $settings-version;
     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

@@ -40,6 +40,8 @@ $grey4: rgba(0,0,0,.4);
 $dgrey: rgb(34,34,34);
 $red: rgb(219,79,57);
 
+$tap-highlight: rgba(0, 0, 0, 0);
+
 $video-background: rgba(0,0,0,.4);
 $video-onlyaudio-background: #666;
 $video-onlyaudio: rgba(255,255,255,.3);
@@ -80,12 +82,14 @@ $chat-bottom-background: $chat-background;
 $chat-typing: $chat-meta;
 $chat-input-border-color: #66afe9;
 
+// fileinfo
 $fileinfo-background: white;
 $fileinfo-border: #ddd;
 $fileinfo-icon-background-color: #eee;
 $fileinfo-downloading-size-border: #ddd;
 
-$tap-highlight: rgba(0, 0, 0, 0);
+// settings
+$settings-version: #ccc;
 
 $breakpoint-small: 480px;
 $breakpoint-medium: 700px;
@@ -96,6 +100,8 @@ $breakpoint-video-medium: 630px;
 
 $breakpoint-chat-small: 210px;
 
+$breakpoint-settings-medium: 630px;
+
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
 
 // compass