ref(toolbar): remove main css for old toolbar

css/_animations.scss

@@ -2,42 +2,6 @@
 * Project animations
 **/
 
-/**
- *   Slide in animation for extended toolbar.
- */
-@include keyframes(slideInX) {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(0%); }
-}
-
-@include keyframes(slideOutX) {
-    0% { transform: translateX(0%); }
-    100% { transform: translateX(-100%); }
-}
-
-@include keyframes(slideInExtX) {
-    0% { transform: translateX(-500%); }
-    100% { transform: translateX(0%); }
-}
-
-@include keyframes(slideOutExtX) {
-    0% { transform: translateX(0%); }
-    100% { transform: translateX(-500%); }
-}
-
-/**
- *   Slide in / out animation for main toolbar.
- */
-
-@include keyframes(slideInY) {
-    100% { transform: translateY(0%); }
-}
-
-@include keyframes(slideOutY) {
-    0% { transform: translateY(0%); }
-    100% { transform: translateY(-100%); }
-}
-
 /**
  *   Slide in animation for extended toolbar (inner) panel.
  */
@@ -53,17 +17,3 @@
     from { left: 0; }
     to   { left: -$sidebarWidth; }
 }
-
-/**
-*   Slide in animation for extended toolbar container
-**/
-
-@include keyframes(slideOutExtContainer) {
-    from { width: $sidebarWidth; }
-    to { width: 0; }
-}
-
-@include keyframes(slideInExtContainer) {
-    from { width: 0; }
-    to { width: $sidebarWidth; }
-}

css/_toolbars.scss

@@ -30,248 +30,6 @@
     }
 }
 
-.toolbar-container {
-    display: block;
-    left:0;
-    min-height: 100px;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    right:0;
-    text-align: center;
-    top:0;
-    z-index: $toolbarZ;
-}
-
-/**
- * Common toolbar styles.
- */
-.toolbar {
-    height: 100%;
-    pointer-events: auto;
-    position: relative;
-    z-index: $toolbarZ;
-
-    /**
-     * Ensure nested elements that don't have a button class, maybe because they
-     * are wrapped in a React Element, still display in a line.
-     */
-    > div {
-        display: inline-block;
-    }
-
-    /**
-     * Always on top overrides.
-     */
-    &.always-on-top {
-        /**
-         * Toolbar button styles for always on top.
-         */
-        .button {
-            font-size: $alwaysOnTopToolbarFontSize;
-            height: $alwaysOnTopToolbarSize;
-            line-height: $alwaysOnTopToolbarSize;
-            width: $alwaysOnTopToolbarSize;
-            &_hangup, &_hangup:hover {
-                font-size: $alwaysOnTopToolbarFontSize;
-            }
-        }
-    }
-
-    /**
-     * Toolbar button styles.
-     */
-    .button {
-        color: $toolbarButtonColor;
-        cursor: pointer;
-        z-index: $zindex1;
-        display: inline-block;
-        font-size: $toolbarFontSize;
-        height: $defaultToolbarSize;
-        line-height: $defaultToolbarSize;
-        position: relative;
-        text-align: center;
-        top:0px;
-        vertical-align: middle;
-        width: $defaultToolbarSize;
-
-        &[disabled] {
-            opacity: 0.5;
-        }
-
-        &:hover, &:active {
-            color: $toolbarButtonColor;
-            cursor: pointer;
-            text-decoration: none;
-        }
-
-        &_hangup, &_hangup:hover {
-            color: $hangupColor;
-            font-size: $hangupFontSize;
-        }
-
-        &:not(.toggled) {
-            &:hover, &:active {
-                // sum opacity with background layer should give us 0.8
-                background: $toolbarSelectBackground;
-            }
-        }
-
-        &.toggled {
-            background: $toolbarToggleBackground;
-
-            &.icon-camera {
-                @extend .icon-camera-disabled;
-            }
-
-            &.icon-full-screen {
-                @extend .icon-exit-full-screen;
-            }
-
-            &.icon-microphone {
-                @extend .icon-mic-disabled;
-            }
-        }
-
-        &.unclickable {
-            cursor: default;
-
-            &:hover, &:active, &.selected {
-                background: none;
-                cursor: default;
-            }
-        }
-    }
-
-    /**
-     * Primary toolbar styles.
-     */
-    &_primary {
-        background-color: $toolbarBackground;
-        position: absolute;
-        left: 50%;
-        top: 30px;
-        display: inline-block;
-        width: auto;
-        height: $defaultToolbarSize;
-        border-radius: 3px;
-        opacity: 0;
-
-        &.always-on-top {
-            height: $alwaysOnTopToolbarSize;
-            top: 10px;
-        }
-
-        @include transform(translateX(-50%));
-
-        > a:first-child.button,
-        > div:first-child .button {
-            border-bottom-left-radius: 3px;
-            border-top-left-radius: 3px;
-        }
-
-        > a:last-child.button,
-        > div:last-child .button {
-            border-bottom-right-radius: 3px;
-            border-top-right-radius: 3px;
-        }
-    }
-
-    &_primary a.button:last-child::after {
-        content: none;
-    }
-
-    /**
-     * Secondary toolbar styles.
-     */
-    &_secondary {
-        background-color: $secondaryToolbarBg;
-        position: absolute;
-        align-items: center;
-        box-sizing: border-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        height: 100%;
-        justify-content: flex-start;
-        left: 0;
-        padding-top: 24px;
-        pointer-events: none;
-        top: 0;
-        transform: translateX(-100%);
-        width: $defaultToolbarSize;
-        -webkit-transform: translateX(-100%);
-
-        .button {
-            font-size: $secToolbarFontSize;
-            height: $secToolbarLineHeight;
-            line-height: $secToolbarLineHeight;
-        }
-
-        > * {
-            pointer-events: auto
-        }
-
-        .button.toggled:not(.icon-raised-hand):not(.button-active) {
-            background: $secondaryToolbarBg;
-            cursor: pointer;
-            text-decoration: none;
-
-            &.unclickable {
-                cursor: default;
-
-                &:hover, &:active, &.selected {
-                    background: none;
-                    cursor: default;
-                }
-            }
-        }
-    }
-
-    /**
-     * Styles the toolbar in filmstrip-only mode.
-     */
-    &_filmstrip-only {
-        background-color: $toolbarBackground;
-        border-radius: 3px;
-        display: inline-block;
-        height: auto;
-        width: $defaultFilmStripOnlyToolbarSize;
-
-        .button {
-            height: 37px;
-            line-height: 37px !important;
-            width: 37px;
-        }
-
-        .button-popover-message {
-            width: 100px;
-        }
-
-        .toolbar-button-wrapper:first-child .button {
-            border-top-left-radius: 3px;
-            border-top-right-radius: 3px;
-        }
-        .toolbar-button-wrapper:last-child .button {
-            border-bottom-right-radius: 3px;
-            border-bottom-left-radius: 3px;
-        }
-    }
-
-    /**
-     * Toolbar specific round badge.
-     */
-    .badge-round {
-        bottom: 9px;
-        position: absolute;
-        right: 9px;
-    }
-}
-
 /**
  * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
  */
@@ -527,119 +285,6 @@
     }
 }
 
-.filmstrip-only {
-    .toolbox,
-    .toolbox-toolbars {
-        align-items: center;
-        display: flex;
-    }
-}
-
-.subject {
-    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
-    box-shadow: 0 0 2px #000000, 0 0 10px #000000;
-    margin-left: 40%;
-    margin-right: 40%;
-    padding: 5px;
-    position: relative;
-    text-align: center;
-    width: auto;
-    z-index: $zindex3;
-
-    &.subject_slide-in {
-        top: 80px;
-        @include transition(top .3s ease-in);
-    }
-
-    &.subject_slide-out {
-        top: 0;
-        @include transition(top .3s ease-out);
-    }
-}
-
-#toolbar_button_profile {
-    height: $toolbarAvatarSize + 2*$toolbarAvatarPadding;
-}
-
-a.button>#avatar {
-    border-radius: 50%;
-    padding-bottom: $toolbarAvatarPadding;
-    padding-top: $toolbarAvatarPadding;
-    width: $toolbarAvatarSize;
-}
-
-#feedbackButton {
-    margin-top: auto;
-}
-
-/**
- * START of slide in animation for extended toolbar.
- */
-@include keyframes(slideInX) {
-  0% { transform: translateX(-100%); }
-  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(slideInExtX) {
-    0% { transform: translateX(-500%); }
-    100% { transform: translateX(0%); }
-}
-
-.slideInExtX {
-  @include animation('slideInExtX .5s forwards');
-}
-
-@include keyframes(slideOutExtX) {
-    0% { transform: translateX(0%); }
-    100% { transform: translateX(-500%); }
-}
-
-.slideOutExtX {
-  @include animation('slideOutExtX .5s forwards');
-}
-
-/**
- * END of slide out animation for extended toolbar.
- */
-
-/**
- * START of slide in / out animation for main toolbar.
- */
-@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');
-}
-/**
- * END of slide in / out animation for main toolbar.
- */
-
 /**
  * START of slide in animation for extended toolbar panel.
  */

css/_variables.scss

@@ -35,27 +35,14 @@ $defaultDarkColor: #2b3d5c;
 $alwaysOnTopToolbarFontSize: 1em;
 $alwaysOnTopToolbarSize: 30px;
 $defaultToolbarSize: 50px;
-$defaultFilmStripOnlyToolbarSize: 37px;
 $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
 $newToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
 $newToolbarButtonToggleColor: rgba(14, 20, 35, 1);
 $newToolbarFontSize: 1.9em;
 $newToolbarSize: 32px;
 $newToolbarSizeWithPadding: calc(32px + 32px);
-$secToolbarFontSize: 1.9em;
-$secToolbarLineHeight: 45px;
-$toolbarAvatarPadding: 10px;
-$toolbarAvatarSize: 40px;
-$toolbarFontSize: 1.9em;
 $toolbarTitleFontSize: 19px;
 
-/**
- * Main controls
- * TODO: looks like we don't use it
- */
-$inputSemiBackground: rgba(132, 132, 132, .8);
-$inputLightBackground: #EBEBEB;
-
 /**
  * Video layout
  */

css/_vertical_filmstrip_overrides.scss

@@ -66,8 +66,9 @@
             &#remoteVideos {
                 /**
                  * Remove horizontal filmstrip padding used to prevent videos
-                 * from overlapping the left-side toolbar. An id selector is
-                 * used to match id specificity with filmstrip styles.
+                 * from overlapping getting near the left-side of the screen.
+                 * An id selector is used to match id specificity with filmstrip
+                 * styles.
                  */
                 padding-left: 0;
                 transition: right 2s;
@@ -168,20 +169,6 @@
         .filmstrip__videos-filmstripOnly {
             height: 100%;
         }
-
-        /**
-         * In filmstrip only mode, the toolbar is normally displayed in the
-         * vertical center of the filmstrip strip. In vertical filmstrip mode,
-         * that alignment makes the toolbar appear floating and detached from
-         * the filmstrip. So, instead anchor the toolbar next to the local
-         * video.
-         */
-        .toolbar_filmstrip-only {
-            bottom: 0;
-            top: auto;
-            transform: none;
-        }
-
     }
 
     /**