From 4427e0e2ec27c1d4cdae0e129cafd508c44139cc Mon Sep 17 00:00:00 2001
From: Muhammad Shoaib <muhammad.shoaib@arbisoft.com>
Date: Tue, 25 Aug 2015 18:53:06 +0500
Subject: [PATCH] PHX-120

added the css for the update dialog box for the taking exams as open exam

added the css styling of the buttons to match the pattern library button sass

added the feedback changes

updated the code
---
 .../sass/course/courseware/_courseware.scss   | 133 +++++++++++++++++-
 1 file changed, 132 insertions(+), 1 deletion(-)

diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index 6d4b0d6175..d7dd243905 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/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;