From 0f0f34b012ebb27abf9df499fd18cd57c2440ac1 Mon Sep 17 00:00:00 2001
From: Sergios Stamatis <mindosoft@gmail.com>
Date: Sat, 9 Jan 2021 14:21:59 +0200
Subject: [PATCH] Fix the separator overflow issue by creating separator divs

Got the idea from : https://github.com/MorrisJobke/strengthify
---
 src/components/PasswordStrengthMeter.vue | 46 ++++++++++++++++--------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/PasswordStrengthMeter.vue b/src/components/PasswordStrengthMeter.vue
index 3197c7b..c9be95e 100644
--- a/src/components/PasswordStrengthMeter.vue
+++ b/src/components/PasswordStrengthMeter.vue
@@ -47,6 +47,10 @@
 
     <div v-if="showStrengthMeter" :class="[strengthMeterClass]">
       <div :class="[strengthMeterFillClass]" :data-score="passwordStrength"></div>
+      <div :class="[strengthMeterSeparatorClass]" :data-separator-index="'1'"></div>
+      <div :class="[strengthMeterSeparatorClass]" :data-separator-index="'2'"></div>
+      <div :class="[strengthMeterSeparatorClass]" :data-separator-index="'3'"></div>
+      <div :class="[strengthMeterSeparatorClass]" :data-separator-index="'4'"></div>
     </div>
   </div>
 </template>
@@ -187,6 +191,15 @@
         type: String,
         default: 'Password__strength-meter--fill'
       },
+      /**
+       * CSS class for styling the
+       * strength meter separators.
+       * @type {String}
+       */
+      strengthMeterSeparatorClass: {
+        type: String,
+        default: 'Password__strength-meter--separator'
+      },
       /**
        * Label for the show password icon
        */
@@ -308,33 +321,38 @@
     position: relative;
   }
 
+  $strengthMeterHeight : 3px;
+
   .Password__strength-meter {
     position: relative;
-    height: 3px;
+    height: $strengthMeterHeight;
     background: #DDD;
     margin: 10px auto 20px;
     border-radius: 3px;
 }
 
-  .Password__strength-meter:before, .Password__strength-meter:after {
-    content: '';
-    height: inherit;
-    background: transparent;
-    display: block;
-    border-color: #FFF;
-    border-style: solid;
-    border-width: 0 5px 0 5px;
+  .Password__strength-meter--separator {
+    background-color: #FFF;
+    width: 5px;
+    height: $strengthMeterHeight;
+    display: inline-block;
     position: absolute;
-    width: 20%;
-    z-index: 10;
   }
 
-  .Password__strength-meter:before {
+  .Password__strength-meter--separator[data-separator-index='1'] {
     left: 20%;
   }
 
-  .Password__strength-meter:after {
-    right: 20%;
+  .Password__strength-meter--separator[data-separator-index='2'] {
+    left: 40%;
+  }
+
+  .Password__strength-meter--separator[data-separator-index='3'] {
+    left: 60%;
+  }
+
+  .Password__strength-meter--separator[data-separator-index='4'] {
+    left: 80%;
   }
 
   .Password__strength-meter--fill {