Working on making Tailwind select children when hovering.

This commit is contained in:
Scott Idem
2025-06-18 21:10:53 -04:00
parent 376837950e
commit 0d4885b778

View File

@@ -141,6 +141,7 @@ max-w-max -->
relative relative
*:hover:inline *:hover:inline
*:hover:visible *:hover:visible
**:hover:visible
opacity-50 opacity-50
hover:opacity-100 hover:opacity-100
@@ -182,7 +183,7 @@ max-w-max -->
$ae_loc.edit_mode = false; $ae_loc.edit_mode = false;
// dispatch_edit_mode_changed(); // dispatch_edit_mode_changed();
}} }}
class="btn btn-md px-2 preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all
" "
title="Edit mode is currently enabled. Click to disable." title="Edit mode is currently enabled. Click to disable."
@@ -202,7 +203,7 @@ max-w-max -->
$ae_loc.edit_mode = true; $ae_loc.edit_mode = true;
// dispatch_edit_mode_changed(); // dispatch_edit_mode_changed();
}} }}
class="btn btn-md px-2 preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition-all space-x-0 *:hover:inline" class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
title="Edit mode is currently disabled. Click to enable." title="Edit mode is currently disabled. Click to enable."
> >
<span class="fas fa-toggle-off mx-1"></span> <span class="fas fa-toggle-off mx-1"></span>
@@ -212,6 +213,7 @@ max-w-max -->
</span> </span>
</button> </button>
{/if} {/if}
<span> <span>
<div class="flex flex-row gap-1 items-center justify-between transition-all w-auto"> <div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'} {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
@@ -266,7 +268,7 @@ max-w-max -->
// $ae_loc.app_cfg.show_element__menu_btn = true; // $ae_loc.app_cfg.show_element__menu_btn = true;
} }
}} }}
class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all *:hover:inline" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`} title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
> >
<!-- <span class="fas fa-lock mx-1"></span> --> <!-- <span class="fas fa-lock mx-1"></span> -->
@@ -297,7 +299,7 @@ max-w-max -->
$ae_loc.app_cfg.show_element__menu_btn = true; $ae_loc.app_cfg.show_element__menu_btn = true;
} }
}} }}
class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all hidden" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`} title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
> >
<!-- <span class="fas fa-lock mx-1"></span> Lock? --> <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
@@ -326,7 +328,7 @@ max-w-max -->
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn; // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}} }}
class=" class="
btn btn-sm variant-outline-surface hover:preset-tonal-success border border-success-500 transition-all btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
*:hover:inline *:hover:inline
" "
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level." title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
@@ -339,13 +341,17 @@ max-w-max -->
{/if} {/if}
</div> </div>
</span> </span>
<!-- <div> --> <!-- <div> -->
<!-- class:visible={$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:invisible={!$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:hover:visible={true} -->
<!-- invisible -->
<button <button
type="button" type="button"
class:w-48={$ae_loc?.app_cfg?.show_element__menu} class:w-48={$ae_loc?.app_cfg?.show_element__menu}
class:visible={$ae_loc?.app_cfg?.show_element__menu}
class:invisible={!$ae_loc?.app_cfg?.show_element__menu} class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success px-6 py-1 *:hover:inline"
class="btn btn-sm variant-outline-tertiary hover:preset-tonal-success border border-success-500 px-6 py-1"
title="Show or hide the menu" title="Show or hide the menu"
onclick={async () => { onclick={async () => {
if (!$ae_loc?.app_cfg?.show_element__menu) { if (!$ae_loc?.app_cfg?.show_element__menu) {
@@ -425,7 +431,7 @@ max-w-max -->
<button <button
type="button" type="button"
class="btn btn-sm variant-outline-tertiary hover:preset-tonal-success border border-success-500 *:hover:inline px-6 py-1" class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
title="Sign In" title="Sign In"
onclick={() => { onclick={() => {
if (!$ae_loc?.app_cfg?.show_element__menu) { if (!$ae_loc?.app_cfg?.show_element__menu) {