Merge pull request #49 from tighten/alk/fix-styles

[Bugfix] fix nova-stripe styles overriding base

Author: faxblaster

dist/css/tool.css

@@ -12,15 +12,15 @@
             <template #menu>
                 <DropdownMenu
                     style="width: 100%; columns: 25vw 3"
-                    class="p-3 text-90"
+                    class="ns-p-3 ns-text-90"
                 >
                     <div
                         v-if="resource"
                         v-for="(value, key) in resource"
-                        class="m-2"
+                        class="ns-m-2"
                     >
                         <input
-                            class="mr-2"
+                            class="ns-mr-2"
                             type="checkbox"
                             :id="key"
                             :value="key"

dist/js/tool.js

@@ -1,5 +1,5 @@
 <template>
-    <LoadingCard :loading="initialLoading" class="mb-6 px-6">
+    <LoadingCard :loading="initialLoading" class="ns-mb-6 ns-px-6">
         <DetailTextField
             :field="{ name: __('ID'), value: charge.id }"
         ></DetailTextField>

resources/js/components/ColumnSelect.vue

@@ -1,5 +1,5 @@
 <template>
-    <LoadingCard :loading="initialLoading" class="mb-6 px-6">
+    <LoadingCard :loading="initialLoading" class="ns-mb-6 ns-px-6">
         <DetailTextField
             :field="{ name: __('ID'), value: customer.id }"
         ></DetailTextField>
@@ -117,7 +117,7 @@ export default {
         formatAddress(address) {
             return address?.line1
                 ? `${address.line1}
-                    ${address.line2} 
+                    ${address.line2}
                     ${address.city},
                     ${address.state}
                     ${address.postal_code}`

resources/js/components/cards/ChargeDetailCard.vue

@@ -87,10 +87,10 @@ export default {
             ],
             dateColumns: ['created'],
             statusClassList: {
-                succeeded: 'bg-green-100 text-green-600',
-                pending: 'bg-gray-100 text-gray-600',
-                disputed: 'bg-orange-100 text-orange-600',
-                failed: 'bg-red-100 text-red-600',
+                succeeded: 'ns-bg-green-100 ns-text-green-600',
+                pending: 'ns-bg-gray-100 ns-text-gray-600',
+                disputed: 'ns-bg-orange-100 ns-text-orange-600',
+                failed: 'ns-bg-red-100 ns-text-red-600',
             },
             page: 1,
         }

resources/js/components/cards/CustomerDetailCard.vue

@@ -3,7 +3,7 @@
         :meta="{ title: 'Charge Details' }"
         heading="Charge Details"
     >
-        <div class="flex flex-row-reverse mb-3">
+        <div class="flex ns-flex-row-reverse mb-3">
             <button
                 v-if="
                     charge && !charge.refunded && charge.status === 'succeeded'

resources/js/components/tables/ChargesTable.vue

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+    prefix: 'ns-',
     content: [
         "./resources/**/*.blade.php",
         "./resources/**/*.js",