fix(component): fix missing margin between flag and country

fix missing margin between flag and country fix #18
yogakurniawan · Jul 22, 2020 · dc1ec7b · dc1ec7b
1 parent 2314244
commit dc1ec7b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 25 deletions.
diff --git a/dist/vue-tel-input-vuetify.esm.js b/dist/vue-tel-input-vuetify.esm.js
diff --git a/dist/vue-tel-input-vuetify.min.js b/dist/vue-tel-input-vuetify.min.js
diff --git a/dist/vue-tel-input-vuetify.umd.js b/dist/vue-tel-input-vuetify.umd.js
diff --git a/lib/vue-tel-input-vuetify.vue b/lib/vue-tel-input-vuetify.vue
@@ -15,8 +15,8 @@
           <div :class="activeCountry.iso2.toLowerCase()" class="vti__flag" />
         </template>
         <template v-slot:item="data">
-          <div :class="data.item.iso2.toLowerCase()" class="vti__flag" />
-          {{ data.item.name }} {{ `+${data.item.dialCode}` }}
+          <span :class="data.item.iso2.toLowerCase()" class="vti__flag" />
+          <span>{{ data.item.name }} {{ `+${data.item.dialCode}` }}</span>
         </template>
       </v-select>
     </div>
@@ -724,6 +724,10 @@ export default {
 
 <style src="./sprite.css"></style>
 <style lang="scss">
+.vti__flag {
+  margin-right: 8px;
+}
+
 .vue-tel-input-vuetify {
   display: flex;
   align-items: center;
@@ -736,9 +740,10 @@ export default {
     border-bottom: 1px solid #cacaca;
   }
 
-  .vti__flag {
-    margin-right: 5px;
-    margin-left: 5px;
+  .v-select__selections {
+    .vti__flag {
+      margin-left: 18px;
+    }
   }
 }
 </style>
diff --git a/src/lib/vue-tel-input-vuetify.vue b/src/lib/vue-tel-input-vuetify.vue
@@ -15,8 +15,8 @@
           <div :class="activeCountry.iso2.toLowerCase()" class="vti__flag" />
         </template>
         <template v-slot:item="data">
-          <div :class="data.item.iso2.toLowerCase()" class="vti__flag" />
-          {{ data.item.name }} {{ `+${data.item.dialCode}` }}
+          <span :class="data.item.iso2.toLowerCase()" class="vti__flag" />
+          <span>{{ data.item.name }} {{ `+${data.item.dialCode}` }}</span>
         </template>
       </v-select>
     </div>
@@ -724,6 +724,10 @@ export default {
 
 <style src="./sprite.css"></style>
 <style lang="scss">
+.vti__flag {
+  margin-right: 8px;
+}
+
 .vue-tel-input-vuetify {
   display: flex;
   align-items: center;
@@ -736,9 +740,10 @@ export default {
     border-bottom: 1px solid #cacaca;
   }
 
-  .vti__flag {
-    margin-right: 5px;
-    margin-left: 5px;
+  .v-select__selections {
+    .vti__flag {
+      margin-left: 18px;
+    }
   }
 }
 </style>