Merge pull request #9458 from edx/muhhshoaib/PHX-update-dialog-box-css

PHX-120

lms/static/sass/course/courseware/_courseware.scss

@@ -98,7 +98,6 @@ div.course-wrapper {
     @extend .content;
     padding: ($baseline*2);
     line-height: 1.6;
-
     h1 {
       margin: 0 0 lh();
     }
@@ -251,6 +250,138 @@ div.course-wrapper {
         }
       }
     }
+    .proctored-exam-skip-confirm-wrapper {
+      border-left: ($baseline/4) solid $red;
+      padding: $baseline ($baseline*1.5);;
+      background-color: rgb(242, 244, 245);
+
+      .msg-title {
+        @extend %t-title5;
+        @extend %t-strong;
+      }
+
+      .msg-content {
+        color: $gray-l1;
+
+        strong {
+          @extend %t-strong;
+        }
+      }
+
+      .proctored-exam-skip-actions {
+        @include float(right);
+        margin-top: $baseline;
+      }
+
+      .btn {
+        @extend %t-strong;
+        transition: color $tmg-f3 ease-in-out 0s,border-color
+        $tmg-f3 ease-in-out 0s,background
+        $tmg-f3 ease-in-out 0s,box-shadow
+        $tmg-f3 ease-in-out 0s;;
+
+        // Display: inline, side-by-side
+        display: inline-block;
+        border-style: solid;
+        border-radius: 3px;
+        border-width: 1px;
+
+        // Display: block, one button per line, full width
+        &.block {
+            display: block;
+            width: 100%;
+        }
+
+        // STATE: is disabled
+        &:disabled,
+        &.is-disabled {
+          pointer-events: none;
+          outline: none;
+          cursor: default;
+        }
+      }
+
+      .btn-base {
+        @extend %t-copy-base;
+        padding: $baseline/2 $baseline;
+      }
+      // ----------------------------
+      // #DEFAULT
+      // ----------------------------
+      .btn-default {
+        border-color: rgb(0, 121, 188);
+        background: $white-t1;
+        color: rgb(0, 121, 188);;
+
+        // STATE: hover and focus
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused {
+          background: rgb(0, 121, 188);
+          color: $white;
+          box-shadow: none;
+          text-shadow: none;
+        }
+
+        // STATE: is pressed or active
+        &:active,
+        &.is-pressed,
+        &.is-active {
+          border-color: $m-blue-d5;
+          background: $m-blue-d5;
+          box-shadow: none;
+          text-shadow: none;
+        }
+
+        // STATE: is disabled
+        &:disabled,
+        &.is-disabled {
+          border-color: $m-gray-d1;
+          background: $white-t1;
+          color: $m-gray-d3;
+        }
+      }
+      // ----------------------------
+      // #PRIMARY
+      // ----------------------------
+      .btn-primary {
+        border-color: rgb(0, 121, 188);
+        background: rgb(0, 121, 188);
+        color: $white;
+        box-shadow: none;
+        text-shadow: none;
+
+        // STATE: hover and focus
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused {
+          border-color: $m-blue-d5;
+          background: $m-blue-d5;
+          box-shadow: none;
+          text-shadow: none;
+        }
+
+        // STATE: is pressed or active
+        &:active,
+        &.is-pressed,
+        &.is-active {
+          border-color: rgb(0, 121, 188);
+          background: rgb(0, 121, 188);
+          box-shadow: none;
+          text-shadow: none;
+        }
+
+        // STATE: is disabled
+        &:disabled,
+        &.is-disabled {
+          border-color: $m-gray-d1;
+          background: $white-t1;
+          color: $m-gray-d3;
+        }
+      }
+    }
     .footer-sequence {
       padding: 30px 0px 20px 0px;
       border-bottom: ($baseline/10) solid #CFD9DD;