replace custom classes with inset-ring utils

jrmajor · Dec 17, 2024 · fa86899 · fa86899
1 parent 70b101a
commit fa86899
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 10 deletions.
diff --git a/resources/css/style.css b/resources/css/style.css
@@ -2,14 +2,6 @@
 @import './headers.css';
 @import './placeholders.css';
 
-@utility inset-shadow-light {
-  box-shadow: inset 0 0 0 var(--spacing-1) var(--colors-brand-lighter);
-}
-
-@utility inset-shadow-hard {
-  box-shadow: inset 0 0 0 var(--spacing-1) var(--colors-brand-primary);
-}
-
 @utility form-input {
   @apply rounded-md border-gray-300;
   @apply dark:bg-gray-800 dark:border-gray-900 dark:focus:border-gray-700;

diff --git a/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte b/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte
@@ -42,9 +42,9 @@
 
 	<div
 		class="
-			absolute inset-0 rounded-lg group-focus:inset-shadow-light
+			absolute inset-0 rounded-lg group-focus:inset-ring-4 group-focus:inset-ring-brand-lighter
 			transition-all duration-300
-			{isSelected ? 'inset-shadow-hard opacity-100' : ''}
+			{isSelected ? 'inset-ring-4 inset-ring-brand-primary' : ''}
 		"
 	></div>
 </button>