Add mixins for animations and separate toolbar css

css/_mixins.scss

+/**
+ * Animation mixin.
+ */
+@mixin animation($animate...) {
+  $max: length($animate);
+  $animations: '';
+
+  @for $i from 1 through $max {
+    $animations: #{$animations + nth($animate, $i)};
+
+    @if $i < $max {
+      $animations: #{$animations + ", "};
+    }
+  }
+  -webkit-animation: $animations;
+  -moz-animation:    $animations;
+  -o-animation:      $animations;
+  animation:         $animations;
+}
+
+/**
+ * Keyframes mixin.
+ */
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
+}

css/_toolbars.scss

+.toolbar {
+    background-color: rgba(0,0,0,0.5);
+    position: relative;
+    z-index: 900;
+    height: 100%;
+    pointer-events: auto;
+}
+
+#mainToolbarContainer{
+    display: block;
+    position: absolute;
+    text-align: center;
+    top:0;
+    left:0;
+    right:0;
+    z-index:10;
+    pointer-events: none;
+    min-height: 100px;
+    transform: translateY(-100%);
+    -webkit-transform: translateY(-100%);
+}
+
+#subject {
+    position: relative;
+    z-index: 3;
+    width: auto;
+    padding: 5px;
+    margin-left: 40%;
+    margin-right: 40%;
+    text-align: center;
+    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
+    box-shadow: 0 0 2px #000000, 0 0 10px #000000;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+#mainToolbar {
+    height: $defaultToolbarSize;
+    display: inline-block;
+    position: relative;
+    top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+    border-radius: 4px;
+}
+
+#mainToolbar .first {
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+}
+
+#mainToolbar .last {
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+#extendedToolbar {
+    display: flex;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    width: $defaultToolbarSize;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    padding-top: 10px;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+}
+
+#extendedToolbarPanel {
+    display: inline-block;
+    position:absolute;
+    top: 0px;
+    left: $defaultToolbarSize;
+    width:0%;
+    height: 100%;
+    max-width: 200px;
+    background-color: rgba(0,0,0,0.8);
+    z-index: 800;
+    overflow: hidden;
+
+    .extendedToolbarPanel__inner {
+        display: none;
+        width: 200px;
+        color: #FFF;
+
+        > div.title {
+            text-align: left;
+            padding: 10px;
+            margin: 2px;
+            font-size: 12pt;
+        }
+    }
+}
+
+#toolbar_button_hangup {
+    color: #ff0000;
+    font-size: 2.2em !important;
+}
+
+#toolbar_button_etherpad {
+    display: none;
+}
+
+#toolbar_button_chat,
+#chatBottomButton,
+#contactListButton,
+#numberOfParticipants,
+#toolbar_button_record {
+    -webkit-transition: all .5s ease-in-out;
+    -moz-transition: all .5s ease-in-out;
+    transition: all .5s ease-in-out;
+}
+
+/*#ffde00*/
+#toolbar_button_chat.active,
+#contactListButton.glowing,
+#chatBottomButton.glowing {
+    -webkit-text-shadow:    -1px 0 10px #21B9FC,
+    0 1px 10px #21B9FC,
+    1px 0 10px #21B9FC,
+    0 -1px 10px #21B9FC;
+    -moz-text-shadow:   1px 0 10px #21B9FC,
+    0 1px 10px #21B9FC,
+    1px 0 10px #21B9FC,
+    0 -1px 10px #21B9FC;
+    text-shadow:    -1px 0 10px #21B9FC,
+    0 1px 10px #21B9FC,
+    1px 0 10px #21B9FC,
+    0 -1px 10px #21B9FC;
+}
+
+#numberOfParticipants {
+  position: absolute;
+  top: 5px;
+  line-height: 13px;
+  font-weight: bold;
+  font-size: 11px;
+}
+
+#contactListButton.active #numberOfParticipants {
+  color: #21B9FC;
+}
+
+#mainToolbar a.button:last-child::after {
+    content: none;
+}
+
+#bottomToolbar {
+    display:block;
+    position: absolute;
+    right: 0;
+    margin-right: 5px;
+    bottom: 40px;
+    width: 29px;
+    border-radius: 1px;
+    color: #FFF;
+    background: rgba(0,0,0,0.5);
+    z-index: 6; /*+1 from #remoteVideos*/
+}
+
+.bottomToolbarButton {
+    display: inline-block;
+    position: relative;
+    color: #FFFFFF;
+    top: 0;
+    padding-top: 6px;
+    margin: 2px;
+    width: 25px;
+    height: 20px;
+    cursor: pointer;
+    font-size: 10pt;
+    text-align: center;
+    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
+    z-index: 1;
+}
+
+.toolbar_span>span {
+    display: inline-block;
+    position: absolute;
+    font-size: 7pt;
+    color: #ffffff;
+    text-align:center;
+    cursor: pointer;
+}
+
+.bottomToolbar_span>span {
+    display: inline-block;
+    position: absolute;
+    font-size: 7pt;
+    color: #ffffff;
+    text-align: center;
+    cursor: pointer;
+}
+
+.button {
+    display: inline-block;
+    position: relative;
+    color: #FFFFFF;
+    top:0px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    text-align: center;
+    z-index: 1;
+    font-size: 1.44em !important;
+    line-height: 50px !important;
+    vertical-align: middle;
+}
+
+.button[disabled] {
+    opacity: 0.5;
+}
+
+a.button:hover,
+a.bottomToolbarButton:hover {
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.8);
+}
+
+a.button>#avatar {
+    width: 30px;
+    border-radius: 50%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+#feedbackButton {
+    margin-top: auto;
+}
+
+@include keyframes(slideInX) {
+    100% { transform: translateX(0%); }
+}
+
+.slideInX {
+  @include animation('slideInX .5s forwards');
+}
+
+@include keyframes(slideOutX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-100%); }
+}
+
+.slideOutX {
+  @include animation('slideOutX .5s forwards');
+}
+
+@include keyframes(slideInY) {
+    100% { transform: translateY(0%); }
+}
+
+.slideInY {
+  @include animation('slideInY .5s forwards');
+}
+
+@include keyframes(slideOutY) {
+    0% { transform: translateY(0%); }
+    100% { transform: translateY(-100%); }
+}
+
+.slideOutY {
+    @include animation('slideOutY .5s forwards');
+}
+
+@include keyframes(slideInExt) {
+    from { width: 0%; }
+    to   { width: 20%; }
+}
+
+.slideInExt {
+    @include animation("slideInExt .5s forwards");
+}
+
+@include keyframes(slideOutExt) {
+  from { width: 20%; }
+  to   { width: 0%; }
+}
+
+.slideOutExt {
+  @include animation("slideOutExt .5s forwards");
+}

css/main.scss

 
 /* Variables END */
 
+/* Mixins BEGIN */
+
+@import "mixins";
+
+/* Mixins END */
+
 /* Fonts BEGIN */
 
 @import 'font';
 @import 'welcome_page';
 @import 'settingsmenu';
 @import 'feedback';
+@import 'toolbars';
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';