custom color theme part 2

resources/js/components/Others/Forms/ImageInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="dropzone" :class="{ 'is-error': error }">
         <div v-if="imagePreview" @click="resetImage" class="reset-image">
-            <x-icon size="14" class="close-icon"></x-icon>
+            <x-icon size="14" class="close-icon text-theme" />
         </div>
 
         <input
@@ -18,7 +18,7 @@
         />
 
         <div class="dropzone-message" v-show="! isData">
-            <image-icon size="28" class="icon-upload"></image-icon>
+            <image-icon size="28" class="icon-upload text-theme"></image-icon>
             <span class="dropzone-title">
                 {{ $t('input_image.title') }}
             </span>
@@ -146,7 +146,7 @@
 
             .icon-upload {
                 rect, circle, polyline {
-                    stroke: $theme
+                    color: inherit
                 }
             }
 
@@ -195,7 +195,7 @@
 
                 .icon-upload {
                     path, polyline, line {
-                        stroke: $theme;
+                        color: inherit;
                     }
                 }
 

resources/js/components/Others/Forms/MultiEmailInput.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="wrapper">
         <label class="input-label">{{ label }}:</label>
-        <div class="input-wrapper" :class="{'is-error' : isError}" @click="$refs.input.focus()">
+        <div class="input-wrapper focus-within-border-theme" :class="{'is-error' : isError}" @click="$refs.input.focus()">
             <div class="email-list">
-                <div class="email-tag" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
-                    <span>{{ email }}</span>
+                <div class="email-tag bg-theme-100" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
+                    <span class="text-theme">{{ email }}</span>
                     <x-icon @click="removeEmail(email)" class="icon" size="14"/>
                 </div>
                 <input @keydown.delete=removeLastEmail($event) @keyup="handleEmail()" v-model="email" :size="inputSize" class="email-input" :placeholder="placeHolder" autocomplete="new-password" ref="input"/>
@@ -123,8 +123,8 @@ export default {
     }
 
     &:focus-within {
-        border: 1px solid $theme;
-        box-shadow: 0 1px 5px rgba($theme, 0.3);
+        //border: 1px solid $theme;
+        //box-shadow: 0 1px 5px rgba($theme, 0.3);
     }
 
     .email-list {
@@ -140,7 +140,6 @@ export default {
         white-space: nowrap;
         display: flex;
         padding: 5px 10px;
-        background: rgba($theme, .1);
         border-radius: 8px;
         margin-right: 5px;
         align-items: center;
@@ -151,7 +150,6 @@ export default {
         }
 
         span {
-            color: $theme;
             font-weight: 700;
             @include font-size(14);
         }

resources/js/components/Others/Forms/SelectBoxInput.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="select-box">
-        <div class="box-item"
-             :class="{'selected': item.value === input}"
+        <div class="box-item active-bg-theme-100 active-border-theme"
+             :class="{'active': item.value === input}"
              @click="getSelectedValue(item)"
              v-for="(item, i) in data" :key="i"
         >
-            <span class="box-value">{{ item.label }}</span>
+            <span class="box-value active-text-theme">{{ item.label }}</span>
         </div>
     </div>
 </template>
@@ -67,15 +67,6 @@
             .box-value {
                 @include font-size(15);
             }
-
-            &.selected {
-                background: rgba($theme, .1);
-                border-color: $theme;
-
-                .box-value {
-                    color: $theme;
-                }
-            }
         }
     }