Merge pull request #17 from SquidwardHill/modal-class-hook

Simple modal class hook
ralphjsmit · Jan 18, 2023 · 243b5c9 · 243b5c9
2 parents 4c53f3b + e2bd318
commit 243b5c9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/resources/views/livewire/inline-form.blade.php b/resources/views/livewire/inline-form.blade.php
@@ -16,7 +16,7 @@
 {{-- Inline form --}}
 
 <x-tall-interactive::forms.form-container :controlsDesign="$controlsDesign" :maxWidth="$maxWidth" :applyContainer="$container">
-    <div class="space-y-8">
+    <div class="tall-interactive-inline-form space-y-8">
         @if($title || $description)
             <div>
                 @if($title)
@@ -32,7 +32,7 @@
             </div>
         @endif
 
-        <div class="">
+        <div class="tall-interactive-inline-form-body">
 
             @if($formClass)
                 <form wire:submit.prevent="submit">

diff --git a/resources/views/livewire/modal.blade.php b/resources/views/livewire/modal.blade.php
@@ -15,7 +15,7 @@
 
 <div class="relative z-[999]" id="{{ $actionableId }}">
     {{-- Modal --}}
-    <div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak
+    <div class="tall-interactive-modal fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak
          x-data="{ state: $wire.entangle('actionableOpen') }" :class="state ? 'pointer-events-auto' : 'pointer-events-none'">
         <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:p-0 sm:block">
             <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
@@ -27,7 +27,7 @@
             <!-- This element is to trick the browser into centering the modal contents. -->
             <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-            <div class="inline-block align-bottom bg-white text-black dark:bg-gray-800 dark:text-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle {{ $maxWidth }} sm:w-[calc(100%-24px)]"
+            <div class="tall-interactive-modal-body inline-block align-bottom bg-white text-black dark:bg-gray-800 dark:text-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle {{ $maxWidth }} sm:w-[calc(100%-24px)]"
                  x-show="state"
                  x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                  x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

diff --git a/resources/views/livewire/slide-over.blade.php b/resources/views/livewire/slide-over.blade.php
@@ -13,7 +13,7 @@
     ][$maxWidth];
 @endphp
 
-<div class="relative z-[999]" id="{{ $actionableId }}">
+<div class="tall-interactive-slide-over relative z-[999]" id="{{ $actionableId }}">
     {{-- Slide-over --}}
     <div class=" fixed inset-0 overflow-hidden" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" x-cloak
          x-data="{ state: $wire.entangle('actionableOpen') }"
@@ -31,7 +31,7 @@
                          x-transition:leave-end="translate-x-full"
                          x-show="state"
                     >
-                        <div class="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
+                        <div class="tall-interactive-slide-over-body h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
                             <div class="flex-1 h-0 overflow-y-auto">
                                 @if($title || $description)
                                     <div class="py-6 px-4 bg-primary-700 sm:px-6">