331 lines
7.8 KiB
Plaintext
331 lines
7.8 KiB
Plaintext
component AuthSplitLayout {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
eyebrow: string = "Secure identity"
|
|
title: string = "Welcome back"
|
|
description: string = ""
|
|
brand: string = "Police Management System"
|
|
features: unknown[] = []
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<main
|
|
class="wrn-auth-split wrn-component--color-{color} wrn-component--size-{size} {class}"
|
|
>
|
|
<section
|
|
class="wrn-auth-split__content"
|
|
>
|
|
<div
|
|
class="wrn-auth-split__brand"
|
|
>
|
|
<span
|
|
class="icon-[lucide--shield-check]"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
<span><strong>{brand}</strong><small>Unified identity and access</small></span>
|
|
</div>
|
|
<div
|
|
class="wrn-auth-split__message"
|
|
>
|
|
<span
|
|
class="wrn-auth-split__eyebrow"
|
|
>
|
|
{eyebrow}
|
|
</span>
|
|
<h1>{title}</h1>
|
|
{#if description}
|
|
<p>{description}</p>
|
|
{/if}
|
|
<div
|
|
class="wrn-auth-split__features"
|
|
>
|
|
{#each features as item}
|
|
<article>
|
|
<span
|
|
class="{item.icon || 'icon-[lucide--check-circle-2]'}"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
<span><strong>{item.label}</strong>
|
|
{#if item.description}
|
|
<small>{item.description}</small>
|
|
{/if}
|
|
</span>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
<slot
|
|
name="aside-extra"
|
|
/>
|
|
</div>
|
|
<small
|
|
class="wrn-auth-split__legal"
|
|
>
|
|
Authorised access only · Activity may be monitored and audited.
|
|
</small>
|
|
</section>
|
|
<section
|
|
class="wrn-auth-split__form"
|
|
>
|
|
<div
|
|
class="wrn-auth-split__form-inner"
|
|
>
|
|
<slot
|
|
name="form"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
}
|
|
|
|
style {
|
|
/* Shared authentication shell and forms */
|
|
.wrn-auth-split {
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
color: var(--wrn-color-text);
|
|
background: var(--wrn-color-bg);
|
|
}
|
|
|
|
.wrn-auth-split__content,
|
|
.wrn-auth-split__form {
|
|
min-width: 0;
|
|
padding: clamp(1.5rem, 5vw, 5rem);
|
|
}
|
|
|
|
.wrn-auth-split__content {
|
|
display: flex;
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
background:
|
|
radial-gradient(
|
|
circle at 15% 15%,
|
|
color-mix(in srgb, var(--wrn-color-primary) 22%, transparent),
|
|
transparent 34%
|
|
),
|
|
linear-gradient(145deg, var(--wrn-color-surface-2), var(--wrn-color-bg));
|
|
border-right: 1px solid var(--wrn-color-border);
|
|
}
|
|
|
|
.wrn-auth-split__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.wrn-auth-split__brand > span:first-child {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
color: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-auth-split__brand > span:last-child {
|
|
display: grid;
|
|
}
|
|
|
|
.wrn-auth-split__brand strong {
|
|
font-size: 0.875rem;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.wrn-auth-split__brand small,
|
|
.wrn-auth-split__legal {
|
|
color: var(--wrn-color-muted);
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.wrn-auth-split__message {
|
|
width: min(100%, 36rem);
|
|
margin-block: 3rem;
|
|
}
|
|
|
|
.wrn-auth-split__eyebrow {
|
|
color: var(--wrn-color-primary);
|
|
font-size: 0.7rem;
|
|
font-weight: 650;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wrn-auth-split__message h1 {
|
|
max-width: 14ch;
|
|
margin: 0.65rem 0 0;
|
|
font-size: clamp(2rem, 4vw, 3.75rem);
|
|
font-weight: 650;
|
|
letter-spacing: -0.045em;
|
|
line-height: 1.08;
|
|
}
|
|
|
|
.wrn-auth-split__message > p {
|
|
max-width: 34rem;
|
|
margin: 1rem 0 0;
|
|
color: var(--wrn-color-muted);
|
|
font-size: 0.875rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.wrn-auth-split__features {
|
|
display: grid;
|
|
margin-top: 2rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.wrn-auth-split__features article {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.wrn-auth-split__features article > span:first-child {
|
|
width: 1.1rem;
|
|
height: 1.1rem;
|
|
margin-top: 0.1rem;
|
|
flex: none;
|
|
color: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-auth-split__features article > span:last-child {
|
|
display: grid;
|
|
}
|
|
|
|
.wrn-auth-split__features strong {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wrn-auth-split__features small {
|
|
margin-top: 0.15rem;
|
|
color: var(--wrn-color-muted);
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.wrn-auth-split__form {
|
|
display: grid;
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
place-items: center;
|
|
background: var(--wrn-color-surface);
|
|
}
|
|
|
|
.wrn-auth-split__form-inner {
|
|
width: min(100%, 30rem);
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.wrn-auth-split {
|
|
height: auto;
|
|
min-height: 100dvh;
|
|
overflow: visible;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.wrn-auth-split__content {
|
|
height: auto;
|
|
min-height: auto;
|
|
overflow: visible;
|
|
padding-bottom: 2rem;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--wrn-color-border);
|
|
}
|
|
.wrn-auth-split__message {
|
|
margin-block: 2rem 0;
|
|
}
|
|
.wrn-auth-split__message h1 {
|
|
font-size: clamp(1.75rem, 8vw, 2.5rem);
|
|
}
|
|
.wrn-auth-split__features,
|
|
.wrn-auth-split__legal {
|
|
display: none;
|
|
}
|
|
.wrn-auth-split__form {
|
|
height: auto;
|
|
min-height: auto;
|
|
overflow: visible;
|
|
padding-block: 2.5rem;
|
|
place-items: start center;
|
|
}
|
|
}
|
|
|
|
/* Shared component foundation. */
|
|
|
|
.wrn-component {
|
|
--wrn-component-color: var(--wrn-color-primary);
|
|
--wrn-component-scale: 1;
|
|
margin: 0;
|
|
color: var(--wrn-color-text);
|
|
font-family: var(--wrn-font-sans, inherit);
|
|
}
|
|
|
|
.wrn-component--color-primary {
|
|
--wrn-component-color: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-component--color-secondary {
|
|
--wrn-component-color: var(--wrn-color-secondary);
|
|
}
|
|
|
|
.wrn-component--color-success {
|
|
--wrn-component-color: var(--wrn-color-success);
|
|
}
|
|
|
|
.wrn-component--color-warning {
|
|
--wrn-component-color: var(--wrn-color-warning);
|
|
}
|
|
|
|
.wrn-component--color-danger {
|
|
--wrn-component-color: var(--wrn-color-danger);
|
|
}
|
|
|
|
.wrn-component--color-info {
|
|
--wrn-component-color: var(--wrn-color-info);
|
|
}
|
|
|
|
.wrn-component--size-xs {
|
|
--wrn-component-scale: 0.78;
|
|
}
|
|
|
|
.wrn-component--size-sm {
|
|
--wrn-component-scale: 0.88;
|
|
}
|
|
|
|
.wrn-component--size-default,
|
|
.wrn-component--size-md {
|
|
--wrn-component-scale: 1;
|
|
}
|
|
|
|
.wrn-component--size-lg {
|
|
--wrn-component-scale: 1.14;
|
|
}
|
|
|
|
.wrn-component--size-xl {
|
|
--wrn-component-scale: 1.28;
|
|
}
|
|
|
|
.wrn-component:not(.wrn-btn) {
|
|
font-size: calc(1em * var(--wrn-component-scale));
|
|
}
|
|
|
|
.wrn-component :is(a, button, input, select, textarea):focus-visible {
|
|
outline-color: var(--wrn-component-color);
|
|
}
|
|
|
|
.wrn-component p {
|
|
margin: 0;
|
|
color: var(--wrn-color-muted);
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
}
|