Merge pull request #286 from mkocansey/v2-6-0

Added transparent tables to sit well on any dark mode background
mkocansey · Jun 20, 2024 · ed293cf · ed293cf
2 parents 0c14224 + b2f68c0
commit ed293cf
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/public/css/bladewind-ui.min.css b/public/css/bladewind-ui.min.css
diff --git a/resources/assets/css/table.css b/resources/assets/css/table.css
@@ -3,8 +3,8 @@
         @apply border-b-8 border-gray-200/15 dark:border-dark-700 border-t border-t-gray-200/40 dark:border-b-dark-700
     }
 
-    .bw-table.divided.thin tr {
-        @apply border-y border-t-gray-200 border-b-gray-200/60 dark:border-t-dark-800 dark:border-b-dark-600/30
+    .bw-table.divided.thin tbody tr {
+        @apply border-y border-t-gray-200 border-b-gray-200/60 dark:border-t-dark-600/60 dark:border-b-dark-600/30
     }
 
     .bw-table tr > td {
@@ -30,7 +30,7 @@
         font-semibold
         tracking-widest
         px-3 py-4
-        border-t border-t-gray-200/30 dark:border-t-transparent
+        border-t border-t-gray-200/30 dark:border-t-dark-600/30 dark:border-b-transparent
     }
 
     .bw-table.celled th:first-child, .bw-table.celled td:first-child {
@@ -69,6 +69,14 @@
         @apply bg-gray-100/40 dark:bg-dark-600/30
     }
 
+    .bw-table td:first-child, .bw-table th:first-child {
+        @apply pl-5
+    }
+
+    .bw-table td:last-child, .bw-table th:last-child {
+        @apply pr-5
+    }
+
     .bw-table.with-hover-effect tr:hover > td:first-child {
         @apply border-l-2 border-l-slate-400 dark:border-l-dark-500
     }
@@ -97,4 +105,10 @@
         @apply !mt-0.5
     }
 
+    .bw-table.transparent tr,
+    .bw-table.transparent th,
+    .bw-table.transparent td {
+        @apply !bg-transparent hover:!bg-transparent
+    }
+
 }
diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
@@ -193,7 +193,7 @@ class="hidden reset size-6 text-white fill-gray-400/70 hover:fill-gray-400 dark:
             <x-bladewind::icon name="chevron-up-down" class="opacity-40 !ml-2"/>
         </div>
     </div>
-    <div class="w-full absolute z-30 rounded-br-lg rounded-bl-lg bg-white shadow-sm shadow-slate-400 border-2 
+    <div class="w-full absolute z-30 rounded-br-lg rounded-bl-lg bg-white shadow-sm shadow-slate-400 dark:shadow-none border-2
         border-blue-400 dark:text-slate-300 dark:border-dark-600 dark:bg-dark-700 border-t-0 -mt-1.5
         hidden bw-select-items-container overflow-scroll max-h-64 animate__animated animate__fadeIn animate__faster">
         <div class="sticky top-0 min-w-full bg-slate-100 dark:bg-transparent py-1 pr-0 -pl-1 @if(!$searchable) hidden @endif">
@@ -204,7 +204,7 @@ class="!border-0 !border-b !rounded-none focus:!border-slate-300 dark:focus:!bor
                     suffix="magnifying-glass"
                     suffix_is_icon="true"/>
         </div>
-        <div class="divide-y divide-slate-100 dark:divide-slate-700 bw-select-items mt-0">
+        <div class="divide-y divide-slate-100 dark:divide-slate-600/70 bw-select-items mt-0">
             @if($data !== 'manual')
                 @foreach ($data as $item)
                     <x-bladewind::select-item

diff --git a/resources/views/components/table.blade.php b/resources/views/components/table.blade.php
@@ -41,6 +41,7 @@
     //------------------ end empty state parameters -------------------
     'selectable' => config('bladewind.table.selectable', false),
     'checkable' => config('bladewind.table.checkable', false),
+    'transparent' => config('bladewind.table.transparent', false),
 ])
 @php
     // reset variables for Laravel 8 support
@@ -56,6 +57,7 @@
     $celled = filter_var($celled, FILTER_VALIDATE_BOOLEAN);
     $selectable = filter_var($selectable, FILTER_VALIDATE_BOOLEAN);
     $checkable = filter_var($checkable, FILTER_VALIDATE_BOOLEAN);
+    $transparent = filter_var($transparent, FILTER_VALIDATE_BOOLEAN);
     $message_as_empty_state = filter_var($message_as_empty_state, FILTER_VALIDATE_BOOLEAN);
     if ($hasShadow) $has_shadow = $hasShadow;
     if (!$hoverEffect) $hover_effect = $hoverEffect;
@@ -123,15 +125,17 @@ class="!mb-0 focus:!border-slate-300 !pl-9 !py-3"
         <table class="bw-table w-full {{$name}} @if($has_shadow) drop-shadow shadow shadow-gray-200/70 dark:shadow-md dark:shadow-dark-950/20 @endif
             @if($divided) divided @if($divider=='thin') thin @endif @endif  @if($striped) striped @endif  @if($celled) celled @endif
             @if($hover_effect) with-hover-effect @endif @if($compact) compact @endif @if($uppercasing) uppercase-headers @endif
-            @if($selectable) selectable @endif @if($checkable) checkable @endif">
+            @if($selectable) selectable @endif @if($checkable) checkable @endif @if($transparent) transparent @endif">
             @if(is_null($data))
-                <thead>
-                <tr>{{ $header }}</tr> {{--  class="bg-gray-200 dark:bg-dark-800" --}}
-                </thead>
+                @if(!empty($header))
+                    <thead>
+                    <tr>{{ $header }}</tr> {{--  class="bg-gray-200 dark:bg-dark-800" --}}
+                    </thead>
+                @endif
                 <tbody>{{ $slot }}</tbody>
             @else
                 <thead>
-                <tr class="bg-gray-200 dark:bg-dark-800">
+                <tr>
                     @php
                         // if there are no records, build the headings with $column_headings if the array exists
                         $table_headings = ($total_records>0) ? $table_headings : (($column_aliases) ?? []);