mostafalaravel
7 months ago
6
1
Vue

how to avoid repetition of css classes in template ?

Posted 7 months ago by mostafalaravel

hello

how to replace all those repeated css classes in template by just one like "my-th" witch contains all those classes ?

<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="group" v-model="actionFilterContent.group" v-on:keyup.13="actionFilter()"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="status"  v-model="actionFilterContent.status" v-on:keyup.13="actionFilter()"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_name"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_number"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_po_box"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="nofab_description"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="brand"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_description_nl"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_description_fr"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_description_en"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_type"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="is_cashback"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="is_expedition"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="startdate"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="enddate"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="extentiondate"></th>

My scoped CSS is empty :

<style scoped>

</style>

Please sign in or create an account to participate in this conversation.