[#148] Adding style and moving origonal style over to TW

Author: nathan-schmidt-viget

wp-content/themes/wp-starter/blocks/dialog/editor.css

@@ -1,53 +1,29 @@
-/* .acf-block-dialog {
-	position: absolute;
-	top: 0;
-	left: 50%;
-	transform: translate(-50%, 0);
-	width: 75vw;
-	max-height: 60vh;
-	display: none;
-	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-	z-index: 800;
-	overflow: auto;
-}
-.acf-block-dialog .inner {
-	padding: 1.5rem 2rem;
-	position: relative;
-}
-.acfbt-dialog-close {
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: 0.35rem 0.75rem;
-	cursor: pointer;
-	text-transform: uppercase;
-	font-size: 1rem;
-	display: flex;
-	gap: 0.25rem;
-}
-.acfbt-dialog-close::before {
-	content: '×';
-	font-size: 1.5rem;
-	line-height: 0.85;
-	font-weight: lighter;
-}
-.acfbt-dialog-label {
-	display: block;
-	cursor: pointer;
-}
-.acfbt-dialog-checkbox {
-	position: absolute;
-	visibility: hidden;
-	width: 0;
-	height: 0;
-	overflow: hidden;
-	opacity: 0;
-}
-input:checked + label + .acf-block-dialog {
-	display: block;
-}
+@layer components {
+	.acf-block-dialog {
+		@apply relative !border !border-black;
+		.inner {
+			@apply relative p-24;
+		}
 
-.is-root-container:has(.acf-block-dialog) {
-	position: relative;
-}
+		.acfbt-dialog-close {
+			@apply absolute right-12 top-12 z-50 m-auto size-32 cursor-pointer border border-none border-black bg-transparent hover:bg-black;
+			@apply after:flex after:items-center after:justify-center after:text-black after:content-['\2715'] hover:after:text-white;
+		}
+	}
+
+	.acfbt-dialog-label {
+		@apply block cursor-pointer;
+	}
 
+	.acfbt-dialog-checkbox {
+		@apply sr-only;
+	}
+
+	input:checked + label + div .acf-block-dialog {
+		@apply block w-2/3;
+	}
+
+	.is-root-container:has(.acf-block-dialog) {
+		@apply relative;
+	}
+}

wp-content/themes/wp-starter/blocks/dialog/render.php

@@ -8,10 +8,11 @@
  */
 
 $cbx_id = uniqid();
+
 ?>
 <?php if ( is_admin() ) : ?>
 	<input type="checkbox" id="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-checkbox">
-	<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-label"><?php esc_html_e( 'Toggle', 'wp-site-starter' ); ?></label>
+	<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-label"><?php esc_html_e( 'Toggle Dialog', 'wp-site-starter' ); ?></label>
 <?php endif; ?>
 
 <div
@@ -27,7 +28,6 @@
 	// Delay close to allow for animation
 	handleDialogClose() {
 		if (!this.openDialog) return
-
 		this.openDialog = false
 		$refs.dialogRef.close()
 	}
@@ -45,19 +45,23 @@
 >
 	<?php if ( ! is_admin() ) : ?>
 		<button
+			class="acf-dialog-close"
 			@click="handleDialogClose()"
 		>
-			<?php esc_html_e( 'Close', 'wp-site-starter' ); ?>
+			<span class="sr-only"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></span>
 		</button>
 	<?php endif; ?>
 
 	<div class="inner">
 		<?php if ( is_admin() ) : ?>
-			<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-close"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></label>
+			<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-close">
+				<span class="sr-only"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></span>
+			</label>
 		<?php endif; ?>
 		<?php inner_blocks(); ?>
 	</div>
 </dialog>
+
 <button
 	class="btn-default"
 	<?php if ( ! is_admin() ) : ?>

wp-content/themes/wp-starter/blocks/dialog/view.css

@@ -1,34 +1,23 @@
 @layer components {
 	html:has(.acf-block-dialog[open]),
 	body:has(.acf-block-dialog[open]) {
-		overflow: hidden;
+		@apply overflow-hidden;
 	}
 
 	.acf-block-dialog {
-		border-radius: 0;
-		border: none;
-		background: white;
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-	}
-
-	.acf-block-dialog::backdrop {
-		@apply bg-black/40;
-	}
+		@apply bottom-0 left-0 right-0 top-0 !m-auto h-1/2 w-1/2 rounded border-none bg-white;
 
-	.acf-block-dialog[open],
-	.acf-block-dialog::backdrop {
-		animation: show 500ms ease;
-	}
+		&::backdrop {
+			@apply bg-black/70;
+		}
 
-	.acf-block-dialog > .inner {
-		padding: 50px;
-		display: flex;
-		flex-direction: column;
-	}
+		.acf-dialog-close {
+			@apply absolute right-12 top-12 z-10 m-auto size-32 cursor-pointer border border-none border-black bg-transparent hover:bg-black;
+			@apply after:flex after:items-center after:justify-center after:text-black after:content-['\2715'] hover:after:text-white;
+		}
 
-	@keyframes show {
-		0% {
-			opacity: 0;
+		> .inner {
+			@apply flex flex-col p-24;
 		}
 	}
 }