diff --git a/admin/form-builder/assets/js/form-builder.js b/admin/form-builder/assets/js/form-builder.js index 283beff05..5368c12f7 100644 --- a/admin/form-builder/assets/js/form-builder.js +++ b/admin/form-builder/assets/js/form-builder.js @@ -136,7 +136,7 @@ }); } - if ( ( payload.field_name === 'name' && payload.value.length - 2 < payload.field_name.length ) || ! state.form_fields[i].hasOwnProperty('is_new') ) { + if ( payload.field_name === 'name' && payload.value.length - 2 < payload.field_name.length ) { continue; } else { state.form_fields[i][payload.field_name] = payload.value; diff --git a/assets/css/admin/form-builder.css b/assets/css/admin/form-builder.css index 3eec38e38..a3e26afde 100644 --- a/assets/css/admin/form-builder.css +++ b/assets/css/admin/form-builder.css @@ -843,6 +843,63 @@ html { justify-content: center; } +.wpuf-badge { + display: inline-flex; + align-items: center; + justify-content: center; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 200ms; + height: 1.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + width: -moz-fit-content; + width: fit-content; + padding-left: 0.563rem; + padding-right: 0.563rem; + border-radius: var(--rounded-badge, 1.9rem); + border-width: 1px; + --tw-border-opacity: 1; + border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); +} + +.wpuf-btm-nav { + position: fixed; + bottom: 0px; + left: 0px; + right: 0px; + display: flex; + width: 100%; + flex-direction: row; + align-items: center; + justify-content: space-around; + padding-bottom: env(safe-area-inset-bottom); + height: 4rem; + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); + color: currentColor; +} + +.wpuf-btm-nav > * { + position: relative; + display: flex; + height: 100%; + flex-basis: 100%; + cursor: pointer; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.25rem; + border-color: currentColor; +} + @media (hover:hover) { .wpuf-label a:hover { --tw-text-opacity: 1; @@ -1010,6 +1067,16 @@ html { opacity: 1; } + .wpuf-btm-nav > *.wpuf-disabled:hover, + .wpuf-btm-nav > *[disabled]:hover { + pointer-events: none; + --tw-border-opacity: 0; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-bg-opacity: 0.1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + --tw-text-opacity: 0.2; + } + .wpuf-btn:hover { --tw-border-opacity: 1; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))); @@ -1102,6 +1169,65 @@ html { --glass-border-opacity: 15%; } + .wpuf-btn-ghost:hover { + border-color: transparent; + } + + @supports (color: oklch(0% 0 0)) { + .wpuf-btn-ghost:hover { + background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); + } + } + + .wpuf-btn-ghost:hover { + border-color: transparent; + } + + @supports (color: oklch(0% 0 0)) { + .wpuf-btn-ghost:hover { + background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); + } + } + + .wpuf-btn-link:hover { + border-color: transparent; + background-color: transparent; + text-decoration-line: underline; + } + + .wpuf-btn-outline:hover { + --tw-border-opacity: 1; + border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity))); + } + + .wpuf-btn-outline.wpuf-btn-primary:hover { + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-primary:hover { + background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-primary:hover { + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-primary:hover { + background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + } + } + .wpuf-btn-outline.wpuf-btn-primary:hover { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); @@ -1150,6 +1276,270 @@ html { } } + .wpuf-btn-outline.wpuf-btn-secondary:hover { + --tw-text-opacity: 1; + color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-secondary:hover { + background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-secondary:hover { + --tw-text-opacity: 1; + color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-secondary:hover { + background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-accent:hover { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-accent:hover { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-accent:hover { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-accent:hover { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-accent:hover { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-accent:hover { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-accent:hover { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-accent:hover { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-warning:hover { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-warning:hover { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-warning:hover { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-warning:hover { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-warning:hover { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-warning:hover { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-warning:hover { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-warning:hover { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-error:hover { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-error:hover { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-error:hover { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-error:hover { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-error:hover { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-error:hover { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-error:hover { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-error:hover { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } + } + .wpuf-btn-disabled:hover, .wpuf-btn[disabled]:hover, .wpuf-btn:disabled:hover { @@ -1246,12 +1636,69 @@ html { padding-bottom: 0.5rem; } +.wpuf-join { + display: inline-flex; + align-items: stretch; + border-radius: var(--rounded-btn, 0.5rem); +} + +.wpuf-join :where(.wpuf-join-item) { + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; + border-start-start-radius: 0; +} + +.wpuf-join .wpuf-join-item:not(:first-child):not(:last-child), + .wpuf-join *:not(:first-child):not(:last-child) .wpuf-join-item { + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; + border-start-start-radius: 0; +} + +.wpuf-join .wpuf-join-item:first-child:not(:last-child), + .wpuf-join *:first-child:not(:last-child) .wpuf-join-item { + border-start-end-radius: 0; + border-end-end-radius: 0; +} + .wpuf-join .wpuf-dropdown .wpuf-join-item:first-child:not(:last-child), .wpuf-join *:first-child:not(:last-child) .wpuf-dropdown .wpuf-join-item { border-start-end-radius: inherit; border-end-end-radius: inherit; } +.wpuf-join :where(.wpuf-join-item:first-child:not(:last-child)), + .wpuf-join :where(*:first-child:not(:last-child) .wpuf-join-item) { + border-end-start-radius: inherit; + border-start-start-radius: inherit; +} + +.wpuf-join .wpuf-join-item:last-child:not(:first-child), + .wpuf-join *:last-child:not(:first-child) .wpuf-join-item { + border-end-start-radius: 0; + border-start-start-radius: 0; +} + +.wpuf-join :where(.wpuf-join-item:last-child:not(:first-child)), + .wpuf-join :where(*:last-child:not(:first-child) .wpuf-join-item) { + border-start-end-radius: inherit; + border-end-end-radius: inherit; +} + +@supports not selector(:has(*)) { + :where(.wpuf-join *) { + border-radius: inherit; + } +} + +@supports selector(:has(*)) { + :where(.wpuf-join *:has(.wpuf-join-item)) { + border-radius: inherit; + } +} + .wpuf-menu { display: flex; flex-direction: column; @@ -1305,6 +1752,58 @@ html { justify-self: end; } +.wpuf-modal { + pointer-events: none; + position: fixed; + inset: 0px; + margin: 0px; + display: grid; + height: 100%; + max-height: none; + width: 100%; + max-width: none; + justify-items: center; + padding: 0px; + opacity: 0; + overscroll-behavior: contain; + z-index: 999; + background-color: transparent; + color: inherit; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-property: transform, opacity, visibility; + overflow-y: hidden; +} + +:where(.wpuf-modal) { + align-items: center; +} + +.wpuf-modal-box { + max-height: calc(100vh - 5em); + grid-column-start: 1; + grid-row-start: 1; + width: 91.666667%; + max-width: 32rem; + --tw-scale-x: .9; + --tw-scale-y: .9; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-bottom-right-radius: var(--rounded-box, 1rem); + border-bottom-left-radius: var(--rounded-box, 1rem); + border-top-left-radius: var(--rounded-box, 1rem); + border-top-right-radius: var(--rounded-box, 1rem); + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); + padding: 1.5rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 200ms; + box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; + overflow-y: auto; + overscroll-behavior: contain; +} + .wpuf-modal-open, .wpuf-modal:target, .wpuf-modal-toggle:checked + .wpuf-modal, @@ -1424,6 +1923,21 @@ html { grid-column-start: span 9999; } +.wpuf-tab-content { + grid-column-start: 1; + grid-column-end: span 9999; + grid-row-start: 2; + margin-top: calc(var(--tab-border) * -1); + display: none; + border-color: transparent; + border-width: var(--tab-border, 0); +} + +:checked + .wpuf-tab-content:nth-child(2), + :is(.wpuf-tab-active, [aria-selected="true"]) + .wpuf-tab-content:nth-child(2) { + border-start-start-radius: 0px; +} + input.wpuf-tab:checked + .wpuf-tab-content, :is(.wpuf-tab-active, [aria-selected="true"]) + .wpuf-tab-content { display: block; @@ -1453,6 +1967,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, var(--togglehandleborder); } +.wpuf-avatar-group { + display: flex; + overflow: hidden; +} + .wpuf-avatar-group :where(.wpuf-avatar) { overflow: hidden; border-radius: 9999px; @@ -1461,6 +1980,26 @@ input.wpuf-tab:checked + .wpuf-tab-content, border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity))); } +.wpuf-btm-nav > *:not(.wpuf-active) { + padding-top: 0.125rem; +} + +.wpuf-btm-nav > *:where(.wpuf-active) { + border-top-width: 2px; + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); +} + +.wpuf-btm-nav > *.wpuf-disabled, + .wpuf-btm-nav > *[disabled] { + pointer-events: none; + --tw-border-opacity: 0; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-bg-opacity: 0.1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + --tw-text-opacity: 0.2; +} + .wpuf-btm-nav > * .wpuf-label { font-size: 1rem; line-height: 1.5rem; @@ -1491,9 +2030,42 @@ input.wpuf-tab:checked + .wpuf-tab-content, .wpuf-btn-secondary { --btn-color: var(--fallback-s); } + + .wpuf-btn-accent { + --btn-color: var(--fallback-a); + } + + .wpuf-btn-info { + --btn-color: var(--fallback-in); + } + + .wpuf-btn-success { + --btn-color: var(--fallback-su); + } + + .wpuf-btn-warning { + --btn-color: var(--fallback-wa); + } + + .wpuf-btn-error { + --btn-color: var(--fallback-er); + } } @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-active { + background-color: color-mix( + in oklab, + oklch(var(--btn-color, var(--b3)) / var(--tw-bg-opacity, 1)) 90%, + black + ); + border-color: color-mix( + in oklab, + oklch(var(--btn-color, var(--b3)) / var(--tw-border-opacity, 1)) 90%, + black + ); + } + .wpuf-btn-outline.wpuf-btn-primary.wpuf-btn-active { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); @@ -1503,6 +2075,31 @@ input.wpuf-tab:checked + .wpuf-tab-content, background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); } + + .wpuf-btn-outline.wpuf-btn-accent.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + + .wpuf-btn-outline.wpuf-btn-success.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + + .wpuf-btn-outline.wpuf-btn-info.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + + .wpuf-btn-outline.wpuf-btn-warning.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + + .wpuf-btn-outline.wpuf-btn-error.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } } .wpuf-btn:focus-visible { @@ -1525,24 +2122,127 @@ input.wpuf-tab:checked + .wpuf-tab-content, .wpuf-btn-secondary { --btn-color: var(--s); } + + .wpuf-btn-accent { + --btn-color: var(--a); + } + + .wpuf-btn-info { + --btn-color: var(--in); + } + + .wpuf-btn-success { + --btn-color: var(--su); + } + + .wpuf-btn-warning { + --btn-color: var(--wa); + } + + .wpuf-btn-error { + --btn-color: var(--er); + } +} + +.wpuf-btn-secondary { + --tw-text-opacity: 1; + color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); + outline-color: var(--fallback-s,oklch(var(--s)/1)); +} + +.wpuf-btn-accent { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + outline-color: var(--fallback-a,oklch(var(--a)/1)); +} + +.wpuf-btn-info { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + outline-color: var(--fallback-in,oklch(var(--in)/1)); +} + +.wpuf-btn-success { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + outline-color: var(--fallback-su,oklch(var(--su)/1)); +} + +.wpuf-btn-warning { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + outline-color: var(--fallback-wa,oklch(var(--wa)/1)); +} + +.wpuf-btn-error { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + outline-color: var(--fallback-er,oklch(var(--er)/1)); +} + +.wpuf-btn.wpuf-glass { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: currentColor; +} + +.wpuf-btn.wpuf-glass.wpuf-btn-active { + --glass-opacity: 25%; + --glass-border-opacity: 15%; +} + +.wpuf-btn-ghost { + border-width: 1px; + border-color: transparent; + background-color: transparent; + color: currentColor; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: currentColor; +} + +.wpuf-btn-ghost.wpuf-btn-active { + border-color: transparent; + background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); +} + +.wpuf-btn-link { + border-color: transparent; + background-color: transparent; + --tw-text-opacity: 1; + color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); + text-decoration-line: underline; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: currentColor; +} + +.wpuf-btn-link.wpuf-btn-active { + border-color: transparent; + background-color: transparent; + text-decoration-line: underline; } -.wpuf-btn-secondary { +.wpuf-btn-outline { + border-color: currentColor; + background-color: transparent; --tw-text-opacity: 1; - color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); - outline-color: var(--fallback-s,oklch(var(--s)/1)); -} - -.wpuf-btn.wpuf-glass { + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - outline-color: currentColor; } -.wpuf-btn.wpuf-glass.wpuf-btn-active { - --glass-opacity: 25%; - --glass-border-opacity: 15%; +.wpuf-btn-outline.wpuf-btn-active { + --tw-border-opacity: 1; + border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity))); } .wpuf-btn-outline.wpuf-btn-primary { @@ -1565,6 +2265,56 @@ input.wpuf-tab:checked + .wpuf-tab-content, color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); } +.wpuf-btn-outline.wpuf-btn-accent { + --tw-text-opacity: 1; + color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-accent.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-success { + --tw-text-opacity: 1; + color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-success.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-info { + --tw-text-opacity: 1; + color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-info.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-warning { + --tw-text-opacity: 1; + color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-warning.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-error { + --tw-text-opacity: 1; + color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-error.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); +} + .wpuf-btn.wpuf-btn-disabled, .wpuf-btn[disabled], .wpuf-btn:disabled { @@ -1625,10 +2375,20 @@ input.wpuf-tab:checked + .wpuf-tab-content, transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.wpuf-join > :where(*:not(:first-child)) { + margin-top: 0px; + margin-bottom: 0px; + margin-inline-start: -1px; +} + .wpuf-join > :where(*:not(:first-child)):is(.wpuf-btn) { margin-inline-start: calc(var(--border-btn) * -1); } +.wpuf-join-item:focus { + isolation: isolate; +} + .wpuf-loading { pointer-events: none; display: inline-block; @@ -1729,6 +2489,23 @@ input.wpuf-tab:checked + .wpuf-tab-content, margin-top: 0; } +.wpuf-menu-title { + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 700; + color: var(--fallback-bc,oklch(var(--bc)/0.4)); +} + +.wpuf-modal:not(dialog:not(.wpuf-modal-open)), + .wpuf-modal::backdrop { + background-color: #0006; + animation: modal-pop 0.2s ease-out; +} + .wpuf-modal-open .wpuf-modal-box, .wpuf-modal-toggle:checked + .wpuf-modal .wpuf-modal-box, .wpuf-modal:target .wpuf-modal-box, @@ -1996,6 +2773,20 @@ input.wpuf-tab:checked + .wpuf-tab-content, color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } +.wpuf-table tr.wpuf-active, + .wpuf-table tr.wpuf-active:nth-child(even), + .wpuf-table-zebra tbody tr:nth-child(even) { + --tw-bg-opacity: 1; + background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); +} + +.wpuf-table-zebra tr.wpuf-active, + .wpuf-table-zebra tr.wpuf-active:nth-child(even), + .wpuf-table-zebra-zebra tbody tr:nth-child(even) { + --tw-bg-opacity: 1; + background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); +} + @keyframes toast-pop { 0% { transform: scale(0.9); @@ -2059,6 +2850,117 @@ input.wpuf-tab:checked + .wpuf-tab-content, var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset; } +.wpuf-glass, + .wpuf-glass.wpuf-btn-active { + border: none; + -webkit-backdrop-filter: blur(var(--glass-blur, 40px)); + backdrop-filter: blur(var(--glass-blur, 40px)); + background-color: transparent; + background-image: linear-gradient( + 135deg, + rgb(255 255 255 / var(--glass-opacity, 30%)) 0%, + rgb(0 0 0 / 0%) 100% + ), + linear-gradient( + var(--glass-reflex-degree, 100deg), + rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, + rgb(0 0 0 / 0%) 25% + ); + box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, + 0 0 0 2px rgb(0 0 0 / 5%); + text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)); +} + +@media (hover: hover) { + .wpuf-glass.wpuf-btn-active { + border: none; + -webkit-backdrop-filter: blur(var(--glass-blur, 40px)); + backdrop-filter: blur(var(--glass-blur, 40px)); + background-color: transparent; + background-image: linear-gradient( + 135deg, + rgb(255 255 255 / var(--glass-opacity, 30%)) 0%, + rgb(0 0 0 / 0%) 100% + ), + linear-gradient( + var(--glass-reflex-degree, 100deg), + rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, + rgb(0 0 0 / 0%) 25% + ); + box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, + 0 0 0 2px rgb(0 0 0 / 5%); + text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)); + } +} + +.wpuf-btm-nav-xs > *:where(.wpuf-active) { + border-top-width: 1px; +} + +.wpuf-btm-nav-sm > *:where(.wpuf-active) { + border-top-width: 2px; +} + +.wpuf-btm-nav-md > *:where(.wpuf-active) { + border-top-width: 2px; +} + +.wpuf-btm-nav-lg > *:where(.wpuf-active) { + border-top-width: 4px; +} + +.wpuf-join.wpuf-join-vertical { + flex-direction: column; +} + +.wpuf-join.wpuf-join-vertical .wpuf-join-item:first-child:not(:last-child), + .wpuf-join.wpuf-join-vertical *:first-child:not(:last-child) .wpuf-join-item { + border-end-start-radius: 0; + border-end-end-radius: 0; + border-start-start-radius: inherit; + border-start-end-radius: inherit; +} + +.wpuf-join.wpuf-join-vertical .wpuf-join-item:last-child:not(:first-child), + .wpuf-join.wpuf-join-vertical *:last-child:not(:first-child) .wpuf-join-item { + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-start-radius: inherit; + border-end-end-radius: inherit; +} + +.wpuf-join.wpuf-join-horizontal { + flex-direction: row; +} + +.wpuf-join.wpuf-join-horizontal .wpuf-join-item:first-child:not(:last-child), + .wpuf-join.wpuf-join-horizontal *:first-child:not(:last-child) .wpuf-join-item { + border-end-end-radius: 0; + border-start-end-radius: 0; + border-end-start-radius: inherit; + border-start-start-radius: inherit; +} + +.wpuf-join.wpuf-join-horizontal .wpuf-join-item:last-child:not(:first-child), + .wpuf-join.wpuf-join-horizontal *:last-child:not(:first-child) .wpuf-join-item { + border-end-start-radius: 0; + border-start-start-radius: 0; + border-end-end-radius: inherit; + border-start-end-radius: inherit; +} + +.wpuf-modal-top { + place-items: start; +} + +.wpuf-modal-middle { + place-items: center; +} + +.wpuf-modal-bottom { + place-items: end; +} + .wpuf-tabs-md :where(.wpuf-tab) { height: 2rem; font-size: 0.875rem; @@ -2145,14 +3047,133 @@ input.wpuf-tab:checked + .wpuf-tab-content, right: 7%; } +.wpuf-join.wpuf-join-vertical > :where(*:not(:first-child)) { + margin-left: 0px; + margin-right: 0px; + margin-top: -1px; +} + .wpuf-join.wpuf-join-vertical > :where(*:not(:first-child)):is(.wpuf-btn) { margin-top: calc(var(--border-btn) * -1); } +.wpuf-join.wpuf-join-horizontal > :where(*:not(:first-child)) { + margin-top: 0px; + margin-bottom: 0px; + margin-inline-start: -1px; +} + .wpuf-join.wpuf-join-horizontal > :where(*:not(:first-child)):is(.wpuf-btn) { margin-inline-start: calc(var(--border-btn) * -1); } +.wpuf-menu-xs :where(li:not(.wpuf-menu-title) > *:not(ul, details, .wpuf-menu-title)), .wpuf-menu-xs :where(li:not(.wpuf-menu-title) > details > summary:not(.wpuf-menu-title)) { + border-radius: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 1rem; +} + +.wpuf-menu-xs .wpuf-menu-title { + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.wpuf-menu-sm :where(li:not(.wpuf-menu-title) > *:not(ul, details, .wpuf-menu-title)), .wpuf-menu-sm :where(li:not(.wpuf-menu-title) > details > summary:not(.wpuf-menu-title)) { + border-radius: var(--rounded-btn, 0.5rem); + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.wpuf-menu-sm .wpuf-menu-title { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.wpuf-menu-md :where(li:not(.wpuf-menu-title) > *:not(ul, details, .wpuf-menu-title)), .wpuf-menu-md :where(li:not(.wpuf-menu-title) > details > summary:not(.wpuf-menu-title)) { + border-radius: var(--rounded-btn, 0.5rem); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.wpuf-menu-md .wpuf-menu-title { + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.wpuf-menu-lg :where(li:not(.wpuf-menu-title) > *:not(ul, details, .wpuf-menu-title)), .wpuf-menu-lg :where(li:not(.wpuf-menu-title) > details > summary:not(.wpuf-menu-title)) { + border-radius: var(--rounded-btn, 0.5rem); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 1.125rem; + line-height: 1.75rem; +} + +.wpuf-menu-lg .wpuf-menu-title { + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.wpuf-modal-top :where(.wpuf-modal-box) { + width: 100%; + max-width: none; + --tw-translate-y: -2.5rem; + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-bottom-right-radius: var(--rounded-box, 1rem); + border-bottom-left-radius: var(--rounded-box, 1rem); + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} + +.wpuf-modal-middle :where(.wpuf-modal-box) { + width: 91.666667%; + max-width: 32rem; + --tw-translate-y: 0px; + --tw-scale-x: .9; + --tw-scale-y: .9; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-top-left-radius: var(--rounded-box, 1rem); + border-top-right-radius: var(--rounded-box, 1rem); + border-bottom-right-radius: var(--rounded-box, 1rem); + border-bottom-left-radius: var(--rounded-box, 1rem); +} + +.wpuf-modal-bottom :where(.wpuf-modal-box) { + width: 100%; + max-width: none; + --tw-translate-y: 2.5rem; + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-top-left-radius: var(--rounded-box, 1rem); + border-top-right-radius: var(--rounded-box, 1rem); + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} + .wpuf-tooltip { position: relative; display: inline-block; @@ -2477,6 +3498,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, top: 0px; } +.wpuf-top-1 { + top: 0.25rem; +} + .wpuf-top-1\/2 { top: 50%; } @@ -2573,6 +3598,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, margin: 1rem; } +.wpuf--mx-1 { + margin-left: -0.25rem; + margin-right: -0.25rem; +} + .wpuf--mx-1\.5 { margin-left: -0.375rem; margin-right: -0.375rem; @@ -2588,6 +3618,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, margin-right: -2rem; } +.wpuf--my-1 { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} + .wpuf--my-1\.5 { margin-top: -0.375rem; margin-bottom: -0.375rem; @@ -3066,6 +4101,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, width: 100% !important; } +.wpuf-w-1 { + width: 0.25rem; +} + .wpuf-w-1\/2 { width: 50%; } @@ -3090,6 +4129,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, width: 3rem; } +.wpuf-w-2 { + width: 0.5rem; +} + .wpuf-w-2\/3 { width: 66.666667%; } @@ -3244,6 +4287,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, flex-grow: 1; } +.wpuf-basis-1 { + flex-basis: 0.25rem; +} + .wpuf-basis-1\/2 { flex-basis: 50%; } @@ -3252,6 +4299,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, flex-basis: 20%; } +.wpuf-basis-4 { + flex-basis: 1rem; +} + .wpuf-basis-4\/5 { flex-basis: 80%; } @@ -3265,6 +4316,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.wpuf--translate-y-1 { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .wpuf--translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -3420,6 +4476,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, gap: 1.5rem; } +.wpuf-gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + .wpuf-gap-x-1\.5 { -moz-column-gap: 0.375rem; column-gap: 0.375rem; @@ -3706,6 +4767,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, border-color: rgb(249 250 251 / var(--tw-border-opacity)) !important; } +.\!wpuf-border-green-400 { + --tw-border-opacity: 1 !important; + border-color: rgb(74 222 128 / var(--tw-border-opacity)) !important; +} + .\!wpuf-border-red-500 { --tw-border-opacity: 1 !important; border-color: rgb(239 68 68 / var(--tw-border-opacity)) !important; @@ -3819,6 +4885,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, background-color: rgb(245 158 11 / var(--tw-bg-opacity)); } +.wpuf-bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + .wpuf-bg-black\/25 { background-color: rgb(0 0 0 / 0.25); } @@ -3968,6 +5039,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, stroke: #f9fafb; } +.wpuf-stroke-gray-500 { + stroke: #6b7280; +} + .\!wpuf-p-0 { padding: 0px !important; } @@ -4034,6 +5109,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, padding-right: 14px !important; } +.\!wpuf-py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + .\!wpuf-py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; @@ -4251,6 +5331,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, padding-left: 48px; } +.wpuf-pr-1 { + padding-right: 0.25rem; +} + .wpuf-pr-1\.5 { padding-right: 0.375rem; } @@ -4699,6 +5783,12 @@ input.wpuf-tab:checked + .wpuf-tab-content, outline-color: #d1d5db; } +.wpuf-ring { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + .wpuf-ring-0 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); @@ -4734,10 +5824,20 @@ input.wpuf-tab:checked + .wpuf-tab-content, --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); } +.wpuf-ring-gray-900 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity)); +} + .wpuf-ring-gray-900\/5 { --tw-ring-color: rgb(17 24 39 / 0.05); } +.wpuf-ring-green-600 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity)); +} + .wpuf-ring-green-600\/20 { --tw-ring-color: rgb(22 163 74 / 0.2); } diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php index adadd650a..371fcace6 100644 --- a/assets/js-templates/form-components.php +++ b/assets/js-templates/form-components.php @@ -1436,15 +1436,17 @@ class="!wpuf-text-base" v-html ="get_term_dropdown_options()"> - +
+
+ +
+