(fix) DarkColor handler (#87)

LouisMazel · Feb 14, 2020 · 0239ca2 · 0239ca2
1 parent db82f27
commit 0239ca2
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 27 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -107,7 +107,6 @@
               id="phoneNumber2"
               v-model="phoneNumber2"
               :translations="translations"
-              :dark="!dark"
               no-flags
               required
               no-use-browser-locale
@@ -116,7 +115,8 @@
               class="mb-2"
               clearable
               color="#FF9933"
-              dark-color="#21222e"
+              dark
+              dark-color="#303144"
               :border-radius="8"
               show-code-on-list
               @update="onUpdate2"

diff --git a/src/VuePhoneNumberInput/CountrySelector/index.vue b/src/VuePhoneNumberInput/CountrySelector/index.vue
@@ -30,7 +30,7 @@
       :disabled="disabled"
       class="country-selector__input"
       readonly
-      :style="[radiusLeftStyle, inputBorderStyle, inputBoxShadowStyle]"
+      :style="[radiusLeftStyle, inputBorderStyle, inputBoxShadowStyle, inputBgColor]"
       @focus="isFocus = true"
       @keydown="keyboardNav"
       @click.stop="toggleList"
@@ -72,7 +72,7 @@
         ref="countriesList"
         class="country-selector__list"
         :class="{ 'has-calling-code': showCodeOnList }"
-        :style="[radiusStyle, listHeight]"
+        :style="[radiusStyle, listHeight, inputBgColor]"
       >
         <RecycleScroller
           v-slot="{ item }"
@@ -425,14 +425,8 @@
     // Dark Theme
     &.is-dark {
       .country-selector {
-        &__label {
-          color: $secondary-color-dark;
-        }
-
         &__input {
           cursor: pointer;
-          background-color: $bg-color-dark-l;
-          border: 1px solid $third-color-dark;
           color: $secondary-color-dark;
 
           &::-webkit-input-placeholder {
@@ -471,8 +465,6 @@
         }
 
         &__list {
-          background-color: $bg-color-dark-l;
-
           &__item {
             color: $text-color-dark;
 

diff --git a/src/VuePhoneNumberInput/InputTel/index.vue b/src/VuePhoneNumberInput/InputTel/index.vue
@@ -30,7 +30,9 @@
         noCountrySelector ? radiusStyle : radiusRightStyle,
         inputCaretStyle,
         inputBorderStyle,
-        inputBoxShadowStyle
+        inputBoxShadowStyle,
+        inputBgColor,
+        textColor
       ]"
       @keydown="keyDown"
       @keyup="keyUp"
@@ -284,15 +286,7 @@
 
     &.is-dark {
       .input-tel {
-        &__label {
-          color: $secondary-color-dark;
-        }
-
         &__input {
-          background-color: $bg-color-dark-l;
-          border: 1px solid $third-color-dark;
-          color: $secondary-color-dark;
-
           &::-webkit-input-placeholder {
             color: $secondary-color-dark;
           }
@@ -346,7 +340,7 @@
       .input-tel {
         &__input {
           border-color: $primary-color;
-          box-shadow: 0 0 0 0.2rem $primary-color-transparency;
+          box-shadow: 0 0 0 0.125rem $primary-color-transparency;
         }
 
         &__label {
@@ -356,14 +350,14 @@
 
       &.has-error {
         .input-tel__input {
-          box-shadow: 0 0 0 0.2rem $danger-color-transparency;
+          box-shadow: 0 0 0 0.125rem $danger-color-transparency;
         }
       }
 
       &.is-valid {
         .input-tel__input {
           border-color: $success-color;
-          box-shadow: 0 0 0 0.2rem $success-color-transparency;
+          box-shadow: 0 0 0 0.125rem $success-color-transparency;
         }
       }
     }

diff --git a/src/VuePhoneNumberInput/index.vue b/src/VuePhoneNumberInput/index.vue
@@ -179,6 +179,8 @@
         return {
           colorValue: this.color,
           color: { color: this.color },
+          textColor: { color: '#747474' },
+          textDarkColor: { color: 'rgba(255, 255, 255, 0.7)' },
           validColor: { color: this.validColor },
           errorColor: { color: this.errorColor },
           darkColor: { color: this.darkColor },
@@ -190,9 +192,9 @@
           borderValidColor: { borderColor: this.validColor },
           borderErrorColor: { borderColor: this.errorColor },
           borderDarkColor: { borderColor: this.darkColor },
-          boxShadowColor: { boxShadow: `0 0 0 0.2rem ${getShadowColor(this.color)}` },
-          boxShadowValid: { boxShadow: `0 0 0 0.2rem ${getShadowColor(this.validColor)}` },
-          boxShadowError: { boxShadow: `0 0 0 0.2rem ${getShadowColor(this.errorColor)}` },
+          boxShadowColor: { boxShadow: `0 0 0 0.125rem ${getShadowColor(this.color)}` },
+          boxShadowValid: { boxShadow: `0 0 0 0.125rem ${getShadowColor(this.validColor)}` },
+          boxShadowError: { boxShadow: `0 0 0 0.125rem ${getShadowColor(this.errorColor)}` },
           borderRadius: { borderRadius: `${this.borderRadius}px` },
           borderLeftRadius: { borderTopLeftRadius: `${this.borderRadius}px`, borderBottomLeftRadius: `${this.borderRadius}px` },
           borderRightRadius: { borderTopRightRadius: `${this.borderRadius}px`, borderBottomRightRadius: `${this.borderRadius}px` }

diff --git a/src/VuePhoneNumberInput/mixins/StylesHandler.js b/src/VuePhoneNumberInput/mixins/StylesHandler.js
@@ -7,6 +7,7 @@ export default {
       if (this.error) return this.theme.errorColor
       else if (this.valid) return this.theme.validColor
       else if (this.isFocus) return this.theme.color
+      else if (this.dark) return this.theme.textDarkColor
       return null
     },
     inputBorderStyle () {
@@ -23,6 +24,12 @@ export default {
       }
       return null
     },
+    inputBgColor () {
+      return !this.dark ? null : this.theme.bgDarkColor
+    },
+    textColor () {
+      return this.dark ? this.theme.textDarkColor : null
+    },
     inputCaretStyle () {
       return ({ caretColor: this.theme.colorValue })
     },