@pocketprep/ui-kit 3.4.51 → 3.4.52

package/lib/components/Quiz/Question.vue

@@ -739,9 +739,12 @@ export default class Question extends Vue {
         if (target.classList.contains('keyword-highlight')) {
             const keyword = target.innerHTML
             const location = target.getAttribute('data-location')
+            const clickLocation = { x: event.clientX, y: event.clientY }
             return {
                 keyword,
                 location,
+                clickLocation,
+                target,
             }
         }
     }
@@ -1311,13 +1314,80 @@ export default class Question extends Vue {
         }
     }
 
+    .keyword-highlight--dark.keyword-highlight--active {
+        height: 22px;
+        background-color: rgba($banana-bread, 0.4);
+        border-bottom: none;
+        border-radius: 2px;
+
+        &[data-location="explanation"] {
+            height: 20px;
+            background-color: rgba($banana-bread, 0.4);
+        }
+    }
+
     .keyword-highlight {
-        text-decoration: underline;
-        text-decoration-color: $brand-blue;
+        box-sizing: border-box;
+        background-color: rgba($banana-bread, 0.25);
+        border-radius: 2px 2px 0 0;
+        border-bottom: 1.5px solid $banana-bread;
+        height: 21px;
+        line-height: 22px;
+        padding: 0 2px 0 1px;
+        margin: 0 -2px 0 -1px;
         cursor: pointer;
+        
+        &[data-location="explanation"] {
+            height: 20px;
+            line-height: 21px;
+            background-color: $manilla;
+            border-radius: 1px 1px 0 0;
+        }
+
+        &:hover:not(&--active) {
+            background-color: rgba($banana-bread, 0.4);
+            border-color: $butterscotch;
+
+            &[data-location="explanation"] {
+                background-color: $buttermilk;
+                border-radius: 2px 2px 0 0;
+            }
+        }
+
+        &--active {
+            height: 22px;
+            line-height: 23px;
+            background-color: $beach-sand;
+            border-bottom: none;
+            border-radius: 2px;
+
+            &[data-location="explanation"] {
+                height: 20px;
+                line-height: 21px;
+                background-color: $beach-sand;
+                border-radius: 2px;
+            }
+        }
 
         &--dark {
-            text-decoration-color: $banana-bread;
+            color: $white;
+            background-color: rgba($banana-bread, 0.3);
+            border-color: rgba($banana-bread, 0.6);
+
+            &[data-location="explanation"] {
+                background-color: rgba($banana-bread, 0.3);
+                border-color: rgba($banana-bread, 0.6);
+            }
+
+            &:hover:not(&--active) {
+                background-color: rgba($banana-bread, 0.4);
+                border-color: rgba($banana-bread, 0.8);
+
+                &[data-location="explanation"] {
+                    background-color: rgba($banana-bread, 0.4);
+                    border-color: rgba($banana-bread, 0.8);
+                }
+            }
         }
     }
 

package/lib/components/Quiz/QuizContainer.vue

@@ -8,6 +8,7 @@
         <div
             v-breakpoint:quizContainerEl
             class="uikit-quiz-container__header"
+            :class="{'uikit-quiz-container__header--dark': isDarkMode}"
             :style="customHeaderStyles"
         >
             <slot name="header" />
@@ -19,6 +20,7 @@
                 v-dark="isDarkMode"
                 class="uikit-quiz-container__side"
             >
+                <slot name="definition"></slot>
                 <slot name="side" />
             </div>
             <div
@@ -35,6 +37,7 @@
         <div
             v-breakpoint:quizContainerEl
             class="uikit-quiz-container__footer"
+            :class="{'uikit-quiz-container__footer--dark': isDarkMode}"
             :style="customFooterStyles"
         >
             <slot name="footer" />
@@ -117,6 +120,8 @@ export default class QuizContainer extends Vue {
         width: 100%;
         height: 65px;
         color: $white;
+        background-color: $brand-black;
+        z-index: 4;
         position: relative;
 
         &--mobile {
@@ -124,6 +129,10 @@ export default class QuizContainer extends Vue {
             padding: 0 10px;
             box-sizing: border-box;
         }
+
+        &--dark {
+            background-color: $jet;
+        }
     }
 
     &__main {
@@ -143,7 +152,6 @@ export default class QuizContainer extends Vue {
         height: 100%;
         margin-right: 23px;
         border-radius: 6px;
-        z-index: 2;
 
         &--dark {
             background-color: $mariner;
@@ -198,6 +206,12 @@ export default class QuizContainer extends Vue {
         width: 100%;
         height: 65px;
         color: $white;
+        background-color: $brand-black;
+        z-index: 3;
+
+        &--dark {
+            background-color: $jet;
+        }
 
         &--mobile {
             height: 54px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.51",
+  "version": "3.4.52",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {