Use mixins and format css.

src/styles/components/_bar.scss

@@ -18,9 +18,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #bar {
--webkit-box-shadow:  0px 2px 10px 0px rgba(0, 0, 0, 0.2);
-box-shadow:  0px 2px 10px 0px rgba(0, 0, 0, 0.2);
   position: absolute;
   top: 0;
   left: 0;
@@ -32,22 +31,22 @@ font-size: 1em;
   font-weight: bold;
   line-height: 40px;
   text-align: center;
--webkit-touch-callout: none;
--webkit-user-select: none;
--khtml-user-select: none;
--moz-user-select: none;
--ms-user-select: none;
-user-select: none;
   z-index: 5;
-}
+  @include box-shadow(0 2px 10px 0 rgba(0,0,0,.2));
-#bar > .left {
+  @include touch-callout(none);
+  @include user-select(none);
+  > .left {
     position: absolute;
-left:0px;
+    left: 0;
-top:0px;
+    top: 0;
-bottom:0px;
+    bottom: 0;
     padding-left: 12px;
+    // TODO(theurere): cleanup
+    > *, #bar > .right > * {
+      vertical-align: middle;
+    }
   }
-#bar .logo {
+  .logo {
     font-size: 11px;
     line-height: 11px;
     font-weight:normal;
@@ -59,83 +58,86 @@ background-repeat:no-repeat;
     background-image: url(../img/logo-small.png);
     display: inline-block;
     text-align: left;
-}
+    > span {
-#bar .logo > span {
       position: relative;
       left: 38px;
       top: 26px;
       font-style: italic;
     }
-#bar .logo > span a {
+    > span a {
       color: #222;
     }
-#bar > .right {
+  }
+}
+
+#bar {
+  > .right {
     position: absolute;
-right:0px;
+    right: 0;
     top: 1px;
     bottom: 1px;
     padding-right: 8px;
-}
+    .btn {
-#bar > .left > *, #bar > .right > * {
-vertical-align: middle;
-}
-#bar > .right .btn {
       border-color: transparent;
       background: transparent;
-color:rgba(0,0,0,0.3);
+      color: rgba(0,0,0,.3);
       height: 42px;
       width: 42px;
       display: inline-block;
       font-size: 24px;
-padding:0px;
+      padding: 0;
       line-height: 40px;
       text-align: center;
       margin-left: -4px;
     }
-#bar > .right .btn:focus {
+    .btn:focus {
       border: none;
       box-shadow: 0;
       outline: none;
     }
-#bar > .right .btn:hover {
+    .btn:hover {
       border-color: #ccc;
       background-color: none;
-color:rgba(0,0,0,0.4);
+      color: rgba(0,0,0,.4);
     }
-#bar > .right .btn.active {
+    .btn.active {
       border-color: #ccc;
       background-color: none;
-color:rgba(0,0,0,0.4);
+      color: rgba(0,0,0,.4);
     }
-#bar > .right .btn.active.amutebtn {
+    .btn.active.amutebtn {
       background-color: #db4f39;
       border-color: #db4f39;
       color: white;
     }
-#bar > .right .btn.active.aenablebtn {
+    .btn.active.aenablebtn {
       background-color: #84b819;
       border-color: #84b819;
       color: white;
     }
-#bar .btn {
+  }
+}
+
+#bar {
+  .btn {
     position: relative;
   }
-#bar .badge {
+  .badge {
     background-color: #84b819;
     font-size: .4em;
     position: absolute;
-right:0px;
+    right: 0;
     top: 2px;
     border: 1px solid white;
   }
-#bar .userpicture {
+  .userpicture {
-margin:-5px 0.5em 0px 0.5em;
+    margin: -5px .5em 0 .5em;
     width: 46px;
     height: 46px;
     border-radius: 2px;
     display: inline-block;
   }
-#bar > .middle {
+  > .middle {
     z-index: 5;
     background-color: $componentbg;
     display: inline-block;
@@ -144,41 +146,57 @@ position:relative;
     min-height: 44px;
     vertical-align: middle;
     margin-left: -70px;
+    @include breakpt($breakpoint-medium) {
+      display: block;
+      max-width: 40%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-left: 0px;
+    }
+  }
 }
 
-@media all and (max-width: 700px) {
 #bar {
+  @include breakpt($breakpoint-medium) {
     z-index: 40;
     -webkit-box-shadow: none;
     box-shadow: none;
   }
-    #bar > .middle.status-connecting, #bar > .middle.status-closed, #bar > .middle.status-reconnecting, #bar > .middle.status-error, #bar > .middle.status-ringing  {
+  > .middle img {
-        max-width:100%;
+    @include breakpt($breakpoint-medium) {
-        border-bottom:1px solid $bordercolor;
+      display: none;
-        .actions {
-            display: block;
-            padding:.2em 0 .8em 0;
     }
-        min-height: 45px;
   }
-    #bar > .middle.status-connected, #bar > .middle.status-conference {
+  > .middle.status-connected,
+  > .middle.status-conference {
+    @include breakpt($breakpoint-medium) {
       position: absolute;
-        left:0px;
+      left: 0;
-        right:0px;
+      right: 0;
+      max-width: 100%;
+    }
+  }
+  > .middle.status-connecting,
+  > .middle.status-closed,
+  > .middle.status-reconnecting,
+  > .middle.status-error,
+  > .middle.status-ringing  {
+    @include breakpt($breakpoint-medium) {
       max-width: 100%;
+      border-bottom: 1px solid $bordercolor;
+      min-height: 45px;
     }
-    #bar > .middle {
+  }
+  // TODO(theurere): cleanup
+  > .middle.status-connecting .actions,
+  > .middle.status-closed .actions,
+  > .middle.status-reconnecting .actions,
+  > .middle.status-error .actions,
+  > .middle.status-ringing .actions {
+    @include breakpt($breakpoint-medium) {
       display: block;
-        max-width:40%;
+      padding: .2em 0 .8em 0;
-        overflow:hidden;
-        text-overflow:ellipsis;
-        white-space:nowrap;
-        margin-left:0px;
-
-        img {
-            display:none;
     }
   }
-
 }
-