Merge pull request #9375 from edx/muhhshoaib/PHX-118-timer-bar-scroll-out-view-css

PHX-118 added the css for the timer bar visibility when the page scrolls

lms/static/sass/course/layout/_courseware_preview.scss

@@ -47,47 +47,57 @@
     font-size: 90%;
   }
 }
-.exam-timer {
-  line-height: 56px;
-  background-color: #e5eaec;
+.proctored_exam_status {
+  // STATE: Fixed to viewport (used for scrolling)
+  &.is-fixed {
+    @extend %ui-depth4;
+    box-shadow: 0 3px 3px $shadow-d1;
+    position: fixed;
+    top: 0;
+    width: 100%;
+  }
+  .exam-timer {
+    @include line-height(39);
+    background-color: rgb(229, 234, 236);
     padding-left: 42px;
     padding-right: 32px;
-  border-left: 4px solid #14a6ea;
+    border-left: 4px solid $m-blue-l1;
     margin: 0 auto;
-  color: #4e575b;
-  font-size: 14px;
+    color: $gray-d2;
+    @include font-size(14);
     a {
-    color: #0979ba;
+      color: rgb(9, 121, 186);
     }
     span.pull-right {
-    color: #646161;
-    line-height: 56px;
+      color: $gray-d1;
+      @include line-height(39);
       b {
-      color: #414040;
+        color: $gray-d3;
       }
     }
     &.low-time {
-    color: #cdd7db;
-    background-color: #4F585C;
+      color: $gray-l3;
+      background-color: rgb(79, 88, 92);
       a {
-      color: #fff;
+        color: $white;
         text-decoration: underline;
       }
       span.pull-right {
-      color: #cdd7db;
+        color: $gray-l3;
         b {
-        color: #fff;
+          color: $white;
         }
       }
     }
     &.warning {
-    border-left-color: #feb93e;
+      border-left-color: $warning-color;
     }
     &.critical {
-    border-left-color: #b30101;
-    color: #fff;
+      border-left-color: $alert-color;
+      color: $white;
     }
     .exam-button-turn-in-exam {
-    margin-right: 20px;
+      margin-right: $baseline;
+    }
   }
 }
\ No newline at end of file