Tailwind css added (#1996)

* Added tailwindcss * Added tailwindcss * Fix broken design after adding tailwindcss * Enable autoprefixer * Fix broken style of admin notice * Fix whats new icon style * Fix broken design * Fix tailwind broken design * Fix tailwind broken design * Fix tailwind broken design * Update tailwind.config.js Disabling preflight. ```js corePlugins: { preflight: false, }, ``` * Update: tailwind css configuration. * Fix: tailwind css override issues in checkbox and vendor add payment input section. * Fix broken design --------- Co-authored-by: Shazahanul Islam Shohag <[email protected]>
getdokan · Mar 13, 2024 · 7b6f7f8 · 7b6f7f8
1 parent 8d08a1b
commit 7b6f7f8
Show file tree

Hide file tree

Showing 29 changed files with 166 additions and 139 deletions.
diff --git a/assets/src/less/admin.less b/assets/src/less/admin.less
@@ -79,6 +79,7 @@
                     background-color: #ff5a40;
                     border-radius: 53px;
                     border: 2px solid #fff;
+                  box-sizing: content-box;
                 }
 
                 &:hover {

diff --git a/bin/clean-useless-files.js b/bin/clean-useless-files.js
@@ -21,6 +21,8 @@ const targetFiles = [
     'assets/js/setup.js',
     'assets/js/setup-no-wc-style.js',
     'assets/js/style.js',
+    'assets/js/dokan-tailwind.js',
+
     'assets/js/dokan-promo-notice.js.LICENSE.txt',
     'assets/js/vue-admin.js.LICENSE.txt',
     'assets/js/vue-bootstrap.js.LICENSE.txt',

diff --git a/includes/Assets.php b/includes/Assets.php
@@ -320,7 +320,7 @@ public function get_styles() {
             ],
             'dokan-vue-admin'               => [
                 'src'     => DOKAN_PLUGIN_ASSEST . '/css/vue-admin.css',
-                'deps'    => [ 'dokan-vue-vendor', 'dokan-vue-bootstrap' ],
+                'deps'    => [ 'dokan-vue-vendor', 'dokan-vue-bootstrap', 'dokan-tailwind' ],
                 'version' => filemtime( DOKAN_DIR . '/assets/css/vue-admin.css' ),
             ],
             'dokan-vue-frontend'            => [
@@ -348,6 +348,10 @@ public function get_styles() {
                 'src'       => DOKAN_PLUGIN_ASSEST . '/css/dokan-admin-product-style.css',
                 'version'   => filemtime( DOKAN_DIR . '/assets/css/dokan-admin-product-style.css' ),
             ],
+            'dokan-tailwind' => [
+                'src'       => DOKAN_PLUGIN_ASSEST . '/css/dokan-tailwind.css',
+                'version'   => filemtime( DOKAN_DIR . '/assets/css/dokan-tailwind.css' ),
+            ],
         ];
 
         return $styles;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "mini-css-extract-plugin": "^2.7.6",
     "papaparse": "^5.4.1",
     "replace-in-file": "^6.3.5",
+    "tailwindcss": "^3.3.3",
     "vue": "^2.7.14",
     "vue-chartjs": "^3.5.1",
     "vue-color": "^2.8.1",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
diff --git a/src/admin/components/AddReverseWithdraw.vue b/src/admin/components/AddReverseWithdraw.vue
@@ -6,9 +6,9 @@
             @close='closeModal'
         >
             <div slot='body' class='dokan-rw-body'>
-                <div class='dokan-rw-section'>
-                    <div class='dokan-rw-section-heading'>
-                        <h3>{{ __('Select vendor', 'dokan-lite') }}</h3>
+                <div class='dokan-rw-section mb-4'>
+                    <div class='dokan-rw-section-heading mb-[-0.5rem]'>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Select vendor', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="form-group dokan-rw-multiselect">
@@ -33,9 +33,9 @@
                     </div>
                 </div>
 
-                <div class='dokan-rw-section'>
-                    <div class='dokan-rw-section-heading'>
-                        <h3>{{ __('Transaction Type', 'dokan-lite') }}</h3>
+                <div class='dokan-rw-section mb-4'>
+                    <div class='dokan-rw-section-heading mb-1'>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Transaction Type', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <dokan-radio-group
@@ -47,9 +47,9 @@
                     </div>
                 </div>
 
-                <div class='dokan-rw-section' v-if="'manual_product' === transectionType">
-                    <div class='dokan-rw-section-heading'>
-                        <h3>{{ __('Select Product', 'dokan-lite') }}</h3>
+                <div class='dokan-rw-section mb-4' v-if="'manual_product' === transectionType">
+                    <div class='dokan-rw-section-heading mb-[-0.5rem]'>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Select Product', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="form-group dokan-rw-multiselect">
@@ -73,9 +73,9 @@
                     </div>
                 </div>
 
-                <div class='dokan-rw-section' v-if="'manual_order' === transectionType">
-                    <div class='dokan-rw-section-heading'>
-                        <h3>{{ __('Select Order', 'dokan-lite') }}</h3>
+                <div class='dokan-rw-section mb-4' v-if="'manual_order' === transectionType">
+                    <div class='dokan-rw-section-heading mb-1'>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Select Order', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="form-group dokan-rw-multiselect">
@@ -99,9 +99,9 @@
                     </div>
                 </div>
 
-                <div class='dokan-rw-section'>
-                    <div class='dokan-rw-section-heading'>
-                        <h3>{{ __('Withdrawal Balance Type', 'dokan-lite') }}</h3>
+                <div class='dokan-rw-section mb-4'>
+                    <div class='dokan-rw-section-heading mb-1'>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Withdrawal Balance Type', 'dokan-lite') }}</h3>
                         <i
                             class="dashicons dashicons-editor-help tips"
                             :title="__( 'Adjust Balance by Creating a New Reverse Withdrawal Entry', 'dokan-lite' )"
@@ -118,9 +118,9 @@
                     </div>
                 </div>
 
-                <div class='dokan-rw-section'>
-                    <div class='dokan-rw-section-heading'>
-                        <h3>{{ __('Reverse Withdrawal Amount', 'dokan-lite') }}</h3>
+                <div class='dokan-rw-section mb-4'>
+                    <div class='dokan-rw-section-heading mb-1'>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Reverse Withdrawal Amount', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="dokan-rw-input">
@@ -136,8 +136,8 @@
                 </div>
 
                 <div class='dokan-rw-section'>
-                    <div class='dokan-rw-section-heading'>
-                        <h3>{{ __('Notes', 'dokan-lite') }}</h3>
+                    <div class='dokan-rw-section-heading mb-1'>
+                        <h3 class='font-bold text-[1.3em]'>{{ __('Notes', 'dokan-lite') }}</h3>
                     </div>
                     <div class='dokan-rw-section-body'>
                         <div class="dokan-rw-note-area">

diff --git a/src/admin/components/AdminNotice.vue b/src/admin/components/AdminNotice.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="notice dokan-admin-notices-wrap">
         <div class="dokan-admin-notices" v-if="notices && notices.length">
-            <transition-group :name="transitionName" tag="div" class="dokan-notice-slides">
+            <transition-group :name="transitionName" tag="div" class="dokan-notice-slides leading-[1.5em] box-content">
                 <template v-for="(notice, index) in notices">
                     <div class="dokan-admin-notice" :key="index" v-show="(index + 1) === current_notice" :class="`dokan-${notice.type}`" @mouseenter="stopAutoSlide" @mouseleave="startAutoSlide">
                         <div class="notice-content" :style="! notice.title || ! notice.actions || ! notice.description ? 'align-items: center' : 'align-items: start'">

diff --git a/src/admin/components/CardFunFact.vue b/src/admin/components/CardFunFact.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="dokan-card-fun-fact">
+    <div class="dokan-card-fun-fact mr-[20px] last:mr-0 mt-[20px]">
         <div class="card-fun-fact__icon">
             <span class="fa-stack fa-2x">
                 <i class="fas fa-circle fa-stack-2x" v-bind:style="{ color: circle_background }"></i>
@@ -86,8 +86,8 @@ export default {
     transition: height 1000ms;
     display: flex;
     align-items: center;
-    flex-basis: 20%;
-    margin: 10px;
+    width: calc(25% - 15px);
+    //margin: 10px;
 
     .rounded-icon {
         background-color: #ccc;

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
@@ -454,7 +454,7 @@
                 </fieldset>
                 <div class="field scl_fields" :class="fieldData.enable_status && 'off' === socialChecked ? 'scl_fields_disable' : ''">
                     <div class="scl_header">
-                        <div class="scl_contents">
+                        <div class="scl_contents ">
                             <div class="scl_icon">
                                 <img :src="fieldData.icon_url" :alt="fieldData.label" />
                             </div>
@@ -1082,6 +1082,7 @@
 
                     a {
                         display: inline-block;
+                        text-decoration: underline;
 
                         &:hover {
                             box-shadow: 0 0 0 1px transparent;
@@ -1128,7 +1129,6 @@
                     color: #000;
                     cursor: inherit;
                     margin: 9px 0 9px 15px;
-                    border: 1px solid rgba(0, 0, 0, 0.10);
                     display: inline-block;
                     font-size: 12px;
                     font-style: normal;
@@ -1323,7 +1323,6 @@
                 justify-content: space-between;
 
                 .scl_contents {
-                    flex: 2;
                     display: flex;
                     align-items: center;
 

diff --git a/src/admin/components/Modal.vue b/src/admin/components/Modal.vue
@@ -146,7 +146,7 @@ export default {
     .modal-body {
         min-height: 100px;
         padding: 15px;
-        overflow-y: scroll;
+        overflow-y: auto;
     }
 
     footer {