Skip to content

Commit

Permalink
[#148] Adding style and moving origonal style over to TW
Browse files Browse the repository at this point in the history
  • Loading branch information
nathan-schmidt-viget committed Nov 8, 2024
1 parent 3d38fd5 commit 9eda4eb
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 77 deletions.
78 changes: 27 additions & 51 deletions wp-content/themes/wp-starter/blocks/dialog/editor.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
12 changes: 8 additions & 4 deletions wp-content/themes/wp-starter/blocks/dialog/render.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -27,7 +28,6 @@
// Delay close to allow for animation
handleDialogClose() {
if (!this.openDialog) return

this.openDialog = false
$refs.dialogRef.close()
}
Expand All @@ -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() ) : ?>
Expand Down
33 changes: 11 additions & 22 deletions wp-content/themes/wp-starter/blocks/dialog/view.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
}

0 comments on commit 9eda4eb

Please sign in to comment.