CSS optimization
This commit is contained in:
Janus C. H. Knudsen
parent
e739ce2ac7
commit
29f9c79764
22 changed files with 1175 additions and 642 deletions
|
|
@ -281,15 +281,9 @@ swp-auth-description {
|
|||
|
||||
/* ===========================================
|
||||
USER INFO CARD (Pre-verified user)
|
||||
Base pattern in components.css, auth-specific styling only
|
||||
=========================================== */
|
||||
swp-user-info-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
padding: var(--spacing-4);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
|
|
@ -299,7 +293,7 @@ swp-user-avatar {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
|
|
@ -307,33 +301,6 @@ swp-user-avatar {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
swp-user-name {
|
||||
display: block;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
swp-user-email {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
swp-user-verified {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
|
@ -350,6 +317,7 @@ swp-user-verified i {
|
|||
|
||||
/* ===========================================
|
||||
FORM ELEMENTS
|
||||
Base patterns in components.css, auth-specific only
|
||||
=========================================== */
|
||||
swp-auth-form {
|
||||
display: flex;
|
||||
|
|
@ -357,85 +325,10 @@ swp-auth-form {
|
|||
gap: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-form-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-form-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
swp-form-input input {
|
||||
width: 100%;
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-form-input input::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
swp-form-input input:focus,
|
||||
swp-form-input select:focus,
|
||||
swp-form-input textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
|
||||
}
|
||||
|
||||
swp-form-input select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
swp-form-input select option {
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-form-input textarea {
|
||||
width: 100%;
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
swp-form-input textarea::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
swp-form-label .optional {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-muted);
|
||||
|
|
@ -621,36 +514,32 @@ swp-social-buttons {
|
|||
/* ===========================================
|
||||
FORM MESSAGES
|
||||
=========================================== */
|
||||
swp-form-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
background: color-mix(in srgb, var(--color-red) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-red) 30%, transparent);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-red);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
swp-form-error i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Parent pattern with color variants - using CSS nesting */
|
||||
swp-form-error,
|
||||
swp-form-success {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
background: color-mix(in srgb, var(--color-green) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
|
||||
border: 1px solid;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-green);
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-success i {
|
||||
font-size: 18px;
|
||||
swp-form-error {
|
||||
background: var(--bg-red-medium);
|
||||
border-color: var(--border-red);
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-form-success {
|
||||
background: var(--bg-green-medium);
|
||||
border-color: var(--border-green);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -725,7 +614,7 @@ swp-pricing-grid swp-plan-action {
|
|||
|
||||
swp-pricing-grid swp-plan-card.popular {
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
|
||||
box-shadow: var(--shadow-focus-ring);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
|
|
@ -801,7 +690,7 @@ swp-payment-secure {
|
|||
justify-content: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-3);
|
||||
background: color-mix(in srgb, var(--color-green) 8%, transparent);
|
||||
background: var(--bg-green-subtle);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-green);
|
||||
|
|
@ -853,7 +742,7 @@ swp-success-icon {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--color-green) 15%, transparent);
|
||||
background: var(--bg-green-strong);
|
||||
border-radius: 50%;
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue