From 00df74650bf3a8edce9fadb951497d52b7adf5dd Mon Sep 17 00:00:00 2001
From: Niklas Gruhn <niklas@gruhn.me>
Date: Mon, 19 Oct 2020 19:59:03 +0200
Subject: [PATCH] fix(QrcodeStream): prefix CSS classes

to reduce likelihood of CSS class naming conflicts.

Issue: #208
---
 src/components/QrcodeStream.vue | 38 ++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/QrcodeStream.vue b/src/components/QrcodeStream.vue
index a2a2d41e..c8138354 100644
--- a/src/components/QrcodeStream.vue
+++ b/src/components/QrcodeStream.vue
@@ -1,25 +1,24 @@
 <template lang="html">
-  <div class="wrapper">
+  <div class="qrcode-stream-wrapper">
     <!--
-    Note that the order of DOM elements matters.
-    It defines the stacking order.
-    The first element is at the very bottom, the last element is on top.
-    This eliminates the need for `z-index`.
+    Note, the following DOM elements are not styled with z-index.
+    If z-index is not defined, elements are stacked in the order they appear in the DOM.
+    The first element is at the very bottom and subsequent elements are added on top.
     -->
     <video
       ref="video"
       v-show="shouldScan"
-      class="camera"
+      class="qrcode-stream-camera"
       autoplay
       muted
       playsinline
     ></video>
 
-    <canvas ref="pauseFrame" v-show="!shouldScan" class="pause-frame"></canvas>
+    <canvas ref="pauseFrame" v-show="!shouldScan" class="qrcode-stream-camera"></canvas>
 
-    <canvas ref="trackingLayer" class="tracking-layer"></canvas>
+    <canvas ref="trackingLayer" class="qrcode-stream-overlay"></canvas>
 
-    <div class="overlay">
+    <div class="qrcode-stream-overlay">
       <slot></slot>
     </div>
   </div>
@@ -285,27 +284,28 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.wrapper {
-  position: relative;
-  z-index: 0;
+.qrcode-stream-wrapper {
   width: 100%;
   height: 100%;
+
+  position: relative;
+  z-index: 0;
 }
 
-.overlay,
-.tracking-layer {
-  position: absolute;
+.qrcode-stream-overlay {
   width: 100%;
   height: 100%;
+
+  position: absolute;
   top: 0;
   left: 0;
 }
 
-.camera,
-.pause-frame {
-  display: block;
-  object-fit: cover;
+.qrcode-stream-camera {
   width: 100%;
   height: 100%;
+
+  display: block;
+  object-fit: cover;
 }
 </style>