Refactor CSS using nested selectors and media queries
Improves CSS organization by adopting PostCSS nesting syntax Enhances responsiveness with refined media query implementations Reduces code repetition and improves maintainability of stylesheets Modernizes CSS structure across multiple component stylesheets
This commit is contained in:
Janus C. H. Knudsen
parent
29f9c79764
commit
5e2cab9bd5
6 changed files with 1539 additions and 1608 deletions
|
|
@ -29,11 +29,11 @@ swp-account-section-title {
|
|||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-account-section-title i {
|
||||
font-size: 22px;
|
||||
color: var(--color-teal);
|
||||
& i {
|
||||
font-size: 22px;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -43,10 +43,8 @@ swp-plan-grid {
|
|||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--card-gap);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
swp-plan-grid {
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,10 +58,8 @@ swp-billing-grid {
|
|||
display: grid;
|
||||
grid-template-columns: 380px 1fr;
|
||||
gap: var(--card-gap);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
swp-billing-grid {
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -79,6 +75,10 @@ swp-payment-card {
|
|||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
padding: var(--card-padding);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-method {
|
||||
|
|
@ -100,11 +100,11 @@ swp-payment-icon {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-payment-icon i {
|
||||
font-size: 24px;
|
||||
color: var(--color-blue);
|
||||
& i {
|
||||
font-size: 24px;
|
||||
color: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-info {
|
||||
|
|
@ -133,10 +133,10 @@ swp-payment-detail {
|
|||
align-items: center;
|
||||
padding: var(--spacing-4) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-payment-detail:last-of-type {
|
||||
border-bottom: none;
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-label {
|
||||
|
|
@ -148,10 +148,10 @@ swp-payment-value {
|
|||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-payment-value.highlight {
|
||||
color: var(--color-teal);
|
||||
&.highlight {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -185,6 +185,10 @@ swp-invoices-title {
|
|||
swp-invoice-table {
|
||||
display: grid;
|
||||
grid-template-columns: 100px minmax(120px, 1fr) 100px 100px 80px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 80px minmax(100px, 1fr) 80px 80px 70px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-invoice-table-header {
|
||||
|
|
@ -192,12 +196,26 @@ swp-invoice-table-header {
|
|||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
background: var(--color-background-alt);
|
||||
|
||||
swp-invoice-cell {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
padding-top: var(--spacing-4);
|
||||
padding-bottom: var(--spacing-4);
|
||||
}
|
||||
}
|
||||
|
||||
swp-invoice-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
|
||||
swp-invoice-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
swp-invoice-row {
|
||||
|
|
@ -207,50 +225,45 @@ swp-invoice-row {
|
|||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-invoice-table-body swp-invoice-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-invoice-row:last-child {
|
||||
border-bottom: none;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-invoice-cell {
|
||||
padding: var(--spacing-4) var(--spacing-4);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-invoice-cell:first-child {
|
||||
padding-left: var(--card-padding);
|
||||
}
|
||||
&:first-child {
|
||||
padding-left: var(--card-padding);
|
||||
}
|
||||
|
||||
swp-invoice-cell:last-child {
|
||||
padding-right: var(--card-padding);
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: var(--card-padding);
|
||||
}
|
||||
|
||||
/* Header cells */
|
||||
swp-invoice-table-header swp-invoice-cell {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
padding-top: var(--spacing-4);
|
||||
padding-bottom: var(--spacing-4);
|
||||
}
|
||||
&.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* Invoice number mono font */
|
||||
swp-invoice-cell.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-xs);
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--spacing-3) var(--spacing-3);
|
||||
|
||||
&:first-child {
|
||||
padding-left: var(--spacing-5);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: var(--spacing-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
INVOICE STATUS BADGES
|
||||
Parent pattern with color variants + CSS nesting
|
||||
=========================================== */
|
||||
swp-invoice-status {
|
||||
display: inline-flex;
|
||||
|
|
@ -264,21 +277,21 @@ swp-invoice-status {
|
|||
& i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-invoice-status.paid {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
&.paid {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-invoice-status.pending {
|
||||
background: var(--bg-amber-strong);
|
||||
color: var(--color-amber);
|
||||
}
|
||||
&.pending {
|
||||
background: var(--bg-amber-strong);
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-invoice-status.overdue {
|
||||
background: var(--bg-red-strong);
|
||||
color: var(--color-red);
|
||||
&.overdue {
|
||||
background: var(--bg-red-strong);
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -297,39 +310,14 @@ swp-download-btn {
|
|||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-download-btn:hover {
|
||||
background: var(--bg-teal-medium);
|
||||
}
|
||||
& i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
swp-download-btn i {
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: var(--bg-teal-medium);
|
||||
}
|
||||
}
|
||||
|
||||
/* Button styles in components.css */
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE
|
||||
=========================================== */
|
||||
@media (max-width: 768px) {
|
||||
swp-invoice-table {
|
||||
grid-template-columns: 80px minmax(100px, 1fr) 80px 80px 70px;
|
||||
}
|
||||
|
||||
swp-invoice-cell {
|
||||
padding: var(--spacing-3) var(--spacing-3);
|
||||
}
|
||||
|
||||
swp-invoice-cell:first-child {
|
||||
padding-left: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-invoice-cell:last-child {
|
||||
padding-right: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-payment-card {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,15 @@ swp-auth-layout {
|
|||
display: grid;
|
||||
grid-template-columns: 45fr 55fr;
|
||||
min-height: 100vh;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: 40fr 60fr;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -28,29 +37,43 @@ swp-auth-branding {
|
|||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Decorative background pattern */
|
||||
swp-auth-branding::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Decorative background pattern */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
swp-auth-branding::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: -30%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: -30%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: var(--spacing-16);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--spacing-10) var(--spacing-6);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: var(--spacing-8) var(--spacing-5);
|
||||
}
|
||||
}
|
||||
|
||||
swp-auth-logo {
|
||||
|
|
@ -60,16 +83,21 @@ swp-auth-logo {
|
|||
margin-bottom: var(--spacing-16);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
swp-auth-logo i {
|
||||
font-size: 32px;
|
||||
}
|
||||
& i {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
swp-auth-logo span {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: -0.5px;
|
||||
& span {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: var(--spacing-6);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
swp-auth-tagline {
|
||||
|
|
@ -81,6 +109,15 @@ swp-auth-tagline {
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 400px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
}
|
||||
|
||||
swp-auth-subtitle {
|
||||
|
|
@ -92,6 +129,10 @@ swp-auth-subtitle {
|
|||
z-index: 1;
|
||||
max-width: 380px;
|
||||
line-height: var(--line-height-relaxed);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -104,15 +145,31 @@ swp-auth-plan-panel {
|
|||
padding: var(--spacing-24);
|
||||
background: var(--color-background);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
swp-auth-plan-panel swp-auth-logo {
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--spacing-12);
|
||||
}
|
||||
swp-auth-logo {
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--spacing-12);
|
||||
|
||||
swp-auth-plan-panel swp-auth-logo i {
|
||||
color: var(--color-teal);
|
||||
& i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: var(--spacing-16);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
}
|
||||
|
||||
swp-selected-plan-header {
|
||||
|
|
@ -123,6 +180,10 @@ swp-selected-plan-header {
|
|||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-5);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -161,11 +222,15 @@ swp-plan-price-amount {
|
|||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
swp-plan-price-amount.contact {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-purple);
|
||||
&.contact {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-plan-price-period {
|
||||
|
|
@ -185,12 +250,12 @@ swp-plan-feature {
|
|||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-plan-feature i {
|
||||
font-size: 18px;
|
||||
color: var(--color-green);
|
||||
flex-shrink: 0;
|
||||
& i {
|
||||
font-size: 18px;
|
||||
color: var(--color-green);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -199,24 +264,28 @@ swp-plan-feature i {
|
|||
swp-change-plan-link {
|
||||
display: block;
|
||||
margin-top: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-change-plan-link a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
& a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
|
||||
swp-change-plan-link a:hover {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
swp-change-plan-link i {
|
||||
font-size: 16px;
|
||||
& i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -228,6 +297,17 @@ swp-auth-features {
|
|||
gap: var(--spacing-5);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-auth-feature {
|
||||
|
|
@ -235,11 +315,15 @@ swp-auth-feature {
|
|||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
swp-auth-feature i {
|
||||
font-size: 20px;
|
||||
opacity: 0.9;
|
||||
& i {
|
||||
font-size: 20px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -252,11 +336,23 @@ swp-auth-form-panel {
|
|||
align-items: center;
|
||||
padding: var(--spacing-24);
|
||||
background: var(--color-surface);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--spacing-10) var(--spacing-6);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: var(--spacing-8) var(--spacing-5);
|
||||
}
|
||||
}
|
||||
|
||||
swp-auth-form-container {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
swp-auth-header {
|
||||
|
|
@ -309,10 +405,10 @@ swp-user-verified {
|
|||
justify-content: center;
|
||||
color: var(--color-green);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-user-verified i {
|
||||
font-size: 22px;
|
||||
& i {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -325,39 +421,42 @@ swp-auth-form {
|
|||
gap: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-form-input select option {
|
||||
padding: var(--spacing-2);
|
||||
swp-form-input {
|
||||
select option {
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
|
||||
&.has-icon input {
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
right: var(--spacing-3);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-2);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
& i {
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-label .optional {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Input with icon */
|
||||
swp-form-input.has-icon input {
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
swp-form-input .input-icon {
|
||||
position: absolute;
|
||||
right: var(--spacing-3);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-2);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-form-input .input-icon:hover {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-form-input .input-icon i {
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
swp-form-label {
|
||||
.optional {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -383,38 +482,38 @@ swp-strength-fill {
|
|||
width: 0%;
|
||||
border-radius: 2px;
|
||||
transition: width var(--transition-normal), background var(--transition-normal);
|
||||
}
|
||||
|
||||
swp-strength-fill.weak {
|
||||
width: 25%;
|
||||
background: var(--color-red);
|
||||
}
|
||||
&.weak {
|
||||
width: 25%;
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
swp-strength-fill.fair {
|
||||
width: 50%;
|
||||
background: var(--color-amber);
|
||||
}
|
||||
&.fair {
|
||||
width: 50%;
|
||||
background: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-strength-fill.good {
|
||||
width: 75%;
|
||||
background: var(--color-blue);
|
||||
}
|
||||
&.good {
|
||||
width: 75%;
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-strength-fill.strong {
|
||||
width: 100%;
|
||||
background: var(--color-green);
|
||||
&.strong {
|
||||
width: 100%;
|
||||
background: var(--color-green);
|
||||
}
|
||||
}
|
||||
|
||||
swp-strength-text {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-muted);
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
swp-strength-text.weak { color: var(--color-red); }
|
||||
swp-strength-text.fair { color: var(--color-amber); }
|
||||
swp-strength-text.good { color: var(--color-blue); }
|
||||
swp-strength-text.strong { color: var(--color-green); }
|
||||
&.weak { color: var(--color-red); }
|
||||
&.fair { color: var(--color-amber); }
|
||||
&.good { color: var(--color-blue); }
|
||||
&.strong { color: var(--color-green); }
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
CHECKBOX
|
||||
|
|
@ -424,31 +523,31 @@ swp-form-checkbox {
|
|||
align-items: flex-start;
|
||||
gap: var(--spacing-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-form-checkbox input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
accent-color: var(--color-teal);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
accent-color: var(--color-teal);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
swp-form-checkbox span {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
& span {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
swp-form-checkbox a {
|
||||
color: var(--color-teal);
|
||||
text-decoration: none;
|
||||
}
|
||||
& a {
|
||||
color: var(--color-teal);
|
||||
text-decoration: none;
|
||||
|
||||
swp-form-checkbox a:hover {
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Button base styles in components.css */
|
||||
|
|
@ -465,16 +564,16 @@ swp-auth-footer {
|
|||
swp-auth-footer-text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-auth-footer-text a {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-decoration: none;
|
||||
}
|
||||
& a {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-decoration: none;
|
||||
|
||||
swp-auth-footer-text a:hover {
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -485,19 +584,19 @@ swp-auth-divider {
|
|||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
margin: var(--spacing-6) 0;
|
||||
}
|
||||
|
||||
swp-auth-divider::before,
|
||||
swp-auth-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
swp-auth-divider span {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-muted);
|
||||
& span {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -514,7 +613,6 @@ swp-social-buttons {
|
|||
/* ===========================================
|
||||
FORM MESSAGES
|
||||
=========================================== */
|
||||
/* Parent pattern with color variants - using CSS nesting */
|
||||
swp-form-error,
|
||||
swp-form-success {
|
||||
display: flex;
|
||||
|
|
@ -560,15 +658,15 @@ swp-pricing-header {
|
|||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-16);
|
||||
}
|
||||
|
||||
swp-pricing-header swp-auth-logo {
|
||||
margin-bottom: var(--spacing-10);
|
||||
color: var(--color-text);
|
||||
}
|
||||
swp-auth-logo {
|
||||
margin-bottom: var(--spacing-10);
|
||||
color: var(--color-text);
|
||||
|
||||
swp-pricing-header swp-auth-logo i {
|
||||
color: var(--color-teal);
|
||||
& i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-pricing-title {
|
||||
|
|
@ -592,38 +690,43 @@ swp-pricing-grid {
|
|||
max-width: 1100px;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Plan cards in pricing grid */
|
||||
swp-pricing-grid swp-plan-card {
|
||||
padding: var(--spacing-8);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
swp-plan-card {
|
||||
padding: var(--spacing-8);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
swp-pricing-grid swp-plan-features {
|
||||
flex: 1;
|
||||
}
|
||||
&.popular {
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: var(--shadow-focus-ring);
|
||||
transform: scale(1.02);
|
||||
|
||||
swp-pricing-grid swp-plan-action {
|
||||
margin-top: auto;
|
||||
padding-top: var(--spacing-6);
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
transform: none;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-pricing-grid swp-plan-card.popular {
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: var(--shadow-focus-ring);
|
||||
transform: scale(1.02);
|
||||
swp-plan-features {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
swp-plan-action {
|
||||
margin-top: auto;
|
||||
padding-top: var(--spacing-6);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Plan badge/button styles in components.css */
|
||||
|
||||
swp-pricing-grid swp-plan-action {
|
||||
margin-top: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-pricing-footer {
|
||||
margin-top: var(--spacing-12);
|
||||
text-align: center;
|
||||
|
|
@ -632,16 +735,16 @@ swp-pricing-footer {
|
|||
swp-pricing-footer-text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-pricing-footer-text a {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-decoration: none;
|
||||
}
|
||||
& a {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-decoration: none;
|
||||
|
||||
swp-pricing-footer-text a:hover {
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -661,15 +764,15 @@ swp-order-line {
|
|||
justify-content: space-between;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-order-line.discount {
|
||||
color: var(--color-green);
|
||||
}
|
||||
&.discount {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-order-line.total {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: var(--font-size-base);
|
||||
&.total {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
swp-order-divider {
|
||||
|
|
@ -694,10 +797,10 @@ swp-payment-secure {
|
|||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-payment-secure i {
|
||||
font-size: 16px;
|
||||
& i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-processing {
|
||||
|
|
@ -745,10 +848,10 @@ swp-success-icon {
|
|||
background: var(--bg-green-strong);
|
||||
border-radius: 50%;
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-success-icon i {
|
||||
font-size: 32px;
|
||||
& i {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-success-title {
|
||||
|
|
@ -763,120 +866,10 @@ swp-success-text {
|
|||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE DESIGN
|
||||
RESPONSIVE - Plan Card (shared)
|
||||
=========================================== */
|
||||
@media (max-width: 1024px) {
|
||||
swp-auth-layout {
|
||||
grid-template-columns: 40fr 60fr;
|
||||
}
|
||||
|
||||
swp-auth-branding {
|
||||
padding: var(--spacing-16);
|
||||
}
|
||||
|
||||
swp-auth-plan-panel {
|
||||
padding: var(--spacing-16);
|
||||
}
|
||||
|
||||
swp-auth-tagline {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
swp-pricing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
swp-pricing-grid swp-plan-card.popular {
|
||||
transform: none;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
swp-auth-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
swp-auth-branding {
|
||||
padding: var(--spacing-10) var(--spacing-6);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-auth-plan-panel {
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-auth-plan-panel swp-auth-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
swp-selected-plan-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
swp-plan-card {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-plan-price-amount {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
swp-auth-logo {
|
||||
margin-bottom: var(--spacing-6);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
swp-auth-tagline {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-auth-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
swp-auth-features {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-auth-feature {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
swp-auth-form-panel {
|
||||
padding: var(--spacing-10) var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-auth-form-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
swp-auth-branding {
|
||||
padding: var(--spacing-8) var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-auth-plan-panel {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-auth-form-panel {
|
||||
padding: var(--spacing-8) var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-auth-features {
|
||||
display: none;
|
||||
}
|
||||
|
||||
swp-change-plan-link {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,20 @@ swp-filter-bar {
|
|||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--spacing-10);
|
||||
flex-wrap: wrap;
|
||||
|
||||
input, select {
|
||||
padding: var(--spacing-4) var(--spacing-6);
|
||||
font-size: var(--font-size-md);
|
||||
font-family: var(--font-family);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-filter-group {
|
||||
|
|
@ -33,22 +47,6 @@ swp-filter-label {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-filter-bar input,
|
||||
swp-filter-bar select {
|
||||
padding: var(--spacing-4) var(--spacing-6);
|
||||
font-size: var(--font-size-md);
|
||||
font-family: var(--font-family);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
swp-filter-bar input:focus,
|
||||
swp-filter-bar select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-filter-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -62,47 +60,47 @@ swp-cash-stats {
|
|||
gap: var(--spacing-8);
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
swp-cash-stats:not(.active) {
|
||||
display: none;
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-cash-stat {
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6) var(--spacing-8);
|
||||
}
|
||||
|
||||
swp-cash-stat-value {
|
||||
display: block;
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
swp-cash-stat-value {
|
||||
display: block;
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-cash-stat-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
swp-cash-stat-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-cash-stat.highlight swp-cash-stat-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
&.highlight swp-cash-stat-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-cash-stat.warning swp-cash-stat-value {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
&.warning swp-cash-stat-value {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-cash-stat.negative swp-cash-stat-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
&.negative swp-cash-stat-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-cash-stat.user swp-cash-stat-value {
|
||||
color: var(--color-blue);
|
||||
&.user swp-cash-stat-value {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -134,20 +132,41 @@ swp-cash-table {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-cash-table-header,
|
||||
swp-cash-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--color-teal);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-cash-table-header {
|
||||
background: var(--color-background-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: var(--spacing-6) var(--spacing-10);
|
||||
align-items: center;
|
||||
swp-cash-table-header {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
background: var(--color-background-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: var(--spacing-6) var(--spacing-10);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-cash-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
swp-cash-table-footer {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-7) var(--spacing-10);
|
||||
background: var(--color-background-alt);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-cash-table-row {
|
||||
|
|
@ -155,6 +174,27 @@ swp-cash-table-row {
|
|||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
padding: var(--spacing-7) var(--spacing-10);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&.draft-row {
|
||||
background: var(--bg-amber-subtle);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-amber-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-cash-th {
|
||||
|
|
@ -163,90 +203,71 @@ swp-cash-th {
|
|||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-cash-th.right {
|
||||
text-align: right;
|
||||
}
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-cash-th.checkbox,
|
||||
swp-cash-td.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
swp-cash-table input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--color-teal);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-cash-table-row {
|
||||
padding: var(--spacing-7) var(--spacing-10);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-cash-table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-cash-table-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
/* Draft row - clickable to go to Kasseafstemning */
|
||||
swp-cash-table-row.draft-row {
|
||||
background: var(--bg-amber-subtle);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-cash-table-row.draft-row:hover {
|
||||
background: var(--bg-amber-medium);
|
||||
&:nth-child(9) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
swp-cash-td {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-cash-td.right {
|
||||
text-align: right;
|
||||
}
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-cash-td.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
&.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
swp-cash-td.muted {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
&.muted {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
swp-cash-td.negative {
|
||||
color: var(--color-red);
|
||||
}
|
||||
&.negative {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-cash-td.positive {
|
||||
color: var(--color-green);
|
||||
}
|
||||
&.positive {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-cash-td.id {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
&.id {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
&.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
swp-period-cell {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-period-cell .dates {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
.dates {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -262,72 +283,50 @@ swp-row-toggle {
|
|||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: var(--font-size-lg);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
}
|
||||
|
||||
swp-row-toggle:hover {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-row-toggle i {
|
||||
font-size: var(--font-size-lg);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
/* Row detail - hidden by default */
|
||||
swp-cash-row-detail {
|
||||
grid-column: 1 / -1;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
background: var(--color-background-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-row-detail-content {
|
||||
display: block;
|
||||
padding: var(--spacing-8) var(--spacing-10);
|
||||
}
|
||||
|
||||
swp-row-detail-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-4);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
swp-cash-row-detail.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-row-detail-content {
|
||||
display: block;
|
||||
padding: var(--spacing-8) var(--spacing-10);
|
||||
}
|
||||
|
||||
swp-row-detail-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-4);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Legacy support */
|
||||
swp-row-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-row-arrow i {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
swp-cash-table-footer {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-7) var(--spacing-10);
|
||||
background: var(--color-background-alt);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Status badge styles in components.css */
|
||||
|
||||
/* Center status column */
|
||||
swp-cash-th:nth-child(9),
|
||||
swp-cash-td:nth-child(9) {
|
||||
text-align: center;
|
||||
i {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -339,12 +338,6 @@ swp-cash-grid {
|
|||
gap: var(--spacing-12);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
swp-cash-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
swp-cash-column {
|
||||
display: grid;
|
||||
gap: var(--spacing-10);
|
||||
|
|
@ -354,25 +347,24 @@ swp-cash-column {
|
|||
/* ===========================================
|
||||
DATA TABLE (Dagens Tal)
|
||||
=========================================== */
|
||||
|
||||
swp-data-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 100px 140px;
|
||||
gap: var(--spacing-6);
|
||||
padding: var(--spacing-5) 0;
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-data-header span {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
span {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
swp-data-header span:not(:first-child) {
|
||||
text-align: right;
|
||||
&:not(:first-child) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-data-row {
|
||||
|
|
@ -382,10 +374,10 @@ swp-data-row {
|
|||
padding: var(--spacing-7) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-data-row:last-child {
|
||||
border-bottom: none;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-data-label {
|
||||
|
|
@ -400,26 +392,28 @@ swp-data-system {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-data-input input {
|
||||
width: 100%;
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
swp-data-input {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
|
||||
swp-data-input input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-data-input input::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-sm);
|
||||
&::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-data-value {
|
||||
|
|
@ -427,10 +421,10 @@ swp-data-value {
|
|||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-data-value.muted {
|
||||
color: var(--color-text-secondary);
|
||||
&.muted {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-table-note {
|
||||
|
|
@ -452,56 +446,60 @@ swp-calc-row {
|
|||
align-items: center;
|
||||
padding: var(--spacing-7) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.input-row {
|
||||
background: var(--color-background-alt);
|
||||
margin: var(--spacing-8) calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5));
|
||||
padding: var(--spacing-8) var(--spacing-5);
|
||||
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
|
||||
}
|
||||
}
|
||||
|
||||
swp-calc-row:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
swp-calc-label {
|
||||
span {
|
||||
display: block;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-calc-row.input-row {
|
||||
background: var(--color-background-alt);
|
||||
margin: var(--spacing-8) calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5));
|
||||
padding: var(--spacing-8) var(--spacing-5);
|
||||
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
|
||||
}
|
||||
|
||||
swp-calc-label span {
|
||||
display: block;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-calc-label small {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-1);
|
||||
small {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
}
|
||||
|
||||
swp-calc-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
|
||||
&.muted {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-calc-value.muted {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
swp-calc-input {
|
||||
input {
|
||||
width: 140px;
|
||||
padding: var(--spacing-6) var(--spacing-7);
|
||||
font-size: var(--font-size-lg);
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
|
||||
swp-calc-input input {
|
||||
width: 140px;
|
||||
padding: var(--spacing-6) var(--spacing-7);
|
||||
font-size: var(--font-size-lg);
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
swp-calc-input input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -514,50 +512,50 @@ swp-difference-box {
|
|||
padding: var(--spacing-10);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-background-alt);
|
||||
}
|
||||
|
||||
swp-difference-box.positive {
|
||||
background: var(--bg-green-medium);
|
||||
}
|
||||
&.positive {
|
||||
background: var(--bg-green-medium);
|
||||
|
||||
swp-difference-box.negative {
|
||||
background: var(--bg-red-medium);
|
||||
}
|
||||
swp-difference-value {
|
||||
color: var(--color-green);
|
||||
}
|
||||
}
|
||||
|
||||
swp-difference-box.neutral {
|
||||
background: var(--bg-teal-medium);
|
||||
}
|
||||
&.negative {
|
||||
background: var(--bg-red-medium);
|
||||
|
||||
swp-difference-label {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
swp-difference-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
|
||||
swp-difference-label small {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-regular);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
&.neutral {
|
||||
background: var(--bg-teal-medium);
|
||||
|
||||
swp-difference-value {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
swp-difference-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
swp-difference-box.positive swp-difference-value {
|
||||
color: var(--color-green);
|
||||
}
|
||||
swp-difference-label {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
|
||||
swp-difference-box.negative swp-difference-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-regular);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
|
||||
swp-difference-box.neutral swp-difference-value {
|
||||
color: var(--color-teal);
|
||||
swp-difference-value {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -568,30 +566,30 @@ swp-period-display {
|
|||
padding: var(--spacing-8);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
swp-period-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
swp-period-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-period-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-5);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
swp-period-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-5);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
|
||||
swp-period-value .arrow {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-regular);
|
||||
.arrow {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -605,10 +603,10 @@ swp-form-grid {
|
|||
|
||||
swp-form-field {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-form-field.full-width {
|
||||
grid-column: 1 / -1;
|
||||
&.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-label {
|
||||
|
|
@ -619,28 +617,28 @@ swp-form-label {
|
|||
margin-bottom: var(--spacing-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
|
||||
.required {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-label .required {
|
||||
color: var(--color-red);
|
||||
}
|
||||
swp-form-input {
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-5) var(--spacing-6);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
transition: border-color var(--transition-fast);
|
||||
|
||||
swp-form-input input,
|
||||
swp-form-input select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-5) var(--spacing-6);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-form-input input:focus,
|
||||
swp-form-input select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-auto-id {
|
||||
|
|
@ -655,20 +653,22 @@ swp-auto-id {
|
|||
/* ===========================================
|
||||
NOTE FIELD
|
||||
=========================================== */
|
||||
swp-note-field textarea {
|
||||
width: 100%;
|
||||
min-height: 80px;
|
||||
padding: var(--spacing-6);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
resize: vertical;
|
||||
}
|
||||
swp-note-field {
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 80px;
|
||||
padding: var(--spacing-6);
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
resize: vertical;
|
||||
|
||||
swp-note-field textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-note-hint {
|
||||
|
|
@ -701,32 +701,28 @@ swp-checkbox-field {
|
|||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
swp-checkbox-field input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: var(--spacing-1);
|
||||
accent-color: var(--color-teal);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: var(--spacing-1);
|
||||
accent-color: var(--color-teal);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-checkbox-field label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
line-height: var(--line-height-normal);
|
||||
label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
}
|
||||
|
||||
/* Card footer base styles in components.css */
|
||||
|
||||
swp-actions-right {
|
||||
display: flex;
|
||||
gap: var(--spacing-5);
|
||||
}
|
||||
|
||||
/* Button styles in components.css */
|
||||
|
||||
/* ===========================================
|
||||
SYSTEM NOTE
|
||||
=========================================== */
|
||||
|
|
@ -747,17 +743,21 @@ swp-system-note {
|
|||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
/* Table columns defined on parent - subgrid inherits */
|
||||
swp-cash-table {
|
||||
grid-template-columns: 50px 80px 1fr 100px 110px 120px 40px;
|
||||
}
|
||||
|
||||
/* Hide some columns on smaller screens */
|
||||
swp-cash-th:nth-child(3),
|
||||
swp-cash-td:nth-child(3),
|
||||
swp-cash-th:nth-child(6),
|
||||
swp-cash-td:nth-child(6) {
|
||||
display: none;
|
||||
swp-cash-th, swp-cash-td {
|
||||
&:nth-child(3),
|
||||
&:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
swp-cash-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
g/**
|
||||
/**
|
||||
* UI Components - Shared reusable components
|
||||
*
|
||||
* This file contains all shared UI components used across the application.
|
||||
|
|
@ -21,13 +21,20 @@ g/**
|
|||
/* ===========================================
|
||||
BASE PATTERNS - Grid + Subgrid Tables
|
||||
=========================================== */
|
||||
/* Base table structure - use with feature-specific column definitions */
|
||||
swp-table-header-base {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
background: var(--color-background-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
swp-table-cell-base {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-table-body-base {
|
||||
|
|
@ -43,23 +50,14 @@ swp-table-row-base {
|
|||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-table-row-base:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-table-row-base:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
/* Header cells base styling */
|
||||
swp-table-header-base swp-table-cell-base {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -79,10 +77,10 @@ swp-list-item-base {
|
|||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-list-item-base:hover {
|
||||
background: var(--color-background-hover);
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -122,106 +120,106 @@ swp-btn {
|
|||
& i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Primary button */
|
||||
swp-btn.primary {
|
||||
background: var(--color-teal);
|
||||
color: white;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
/* Primary button */
|
||||
&.primary {
|
||||
background: var(--color-teal);
|
||||
color: white;
|
||||
border-color: var(--color-teal);
|
||||
|
||||
swp-btn.primary:hover {
|
||||
background: #00796b;
|
||||
border-color: #00796b;
|
||||
}
|
||||
&:hover {
|
||||
background: #00796b;
|
||||
border-color: #00796b;
|
||||
}
|
||||
|
||||
swp-btn.primary:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
swp-btn.primary:disabled {
|
||||
background: var(--color-border);
|
||||
border-color: var(--color-border);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&:disabled {
|
||||
background: var(--color-border);
|
||||
border-color: var(--color-border);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/* Secondary button */
|
||||
swp-btn.secondary {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
/* Secondary button */
|
||||
&.secondary {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
|
||||
swp-btn.secondary:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* Ghost button */
|
||||
swp-btn.ghost {
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
/* Ghost button */
|
||||
&.ghost {
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
swp-btn.ghost:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
/* Outline button */
|
||||
swp-btn.outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-teal);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
/* Outline button */
|
||||
&.outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-teal);
|
||||
color: var(--color-teal);
|
||||
|
||||
swp-btn.outline:hover {
|
||||
background: var(--bg-teal-medium);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--bg-teal-medium);
|
||||
}
|
||||
|
||||
swp-btn.outline.purple {
|
||||
border-color: var(--color-purple);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
&.purple {
|
||||
border-color: var(--color-purple);
|
||||
color: var(--color-purple);
|
||||
|
||||
swp-btn.outline.purple:hover {
|
||||
background: var(--bg-purple-medium);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--bg-purple-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Social button */
|
||||
swp-btn.social {
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
/* Social button */
|
||||
&.social {
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
|
||||
swp-btn.social:hover {
|
||||
background: var(--color-background-hover);
|
||||
border-color: var(--color-text-muted);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
border-color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
swp-btn.social img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
& img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Size variants */
|
||||
swp-btn.sm {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
/* Size variants */
|
||||
&.sm {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
font-size: var(--font-size-xs);
|
||||
|
||||
swp-btn.sm i {
|
||||
font-size: 14px;
|
||||
}
|
||||
& i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-btn.lg {
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
&.lg {
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Full width */
|
||||
swp-btn.full-width {
|
||||
width: 100%;
|
||||
/* Full width */
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -235,100 +233,78 @@ swp-status-badge {
|
|||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
swp-status-badge::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--radius-full);
|
||||
background: currentColor;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--radius-full);
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* Status variants */
|
||||
swp-status-badge.approved,
|
||||
swp-status-badge.active {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
/* Status variants - green */
|
||||
&.approved,
|
||||
&.active,
|
||||
&.valid,
|
||||
&.confirmed {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-status-badge.draft,
|
||||
swp-status-badge.invited {
|
||||
background: var(--bg-amber-strong);
|
||||
color: #b45309;
|
||||
}
|
||||
/* Status variants - amber */
|
||||
&.draft,
|
||||
&.invited,
|
||||
&.expiring,
|
||||
&.warning,
|
||||
&.pending {
|
||||
background: var(--bg-amber-strong);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
/* Role variants */
|
||||
swp-status-badge.owner {
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
/* Use color-amber for pending specifically */
|
||||
&.pending {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-status-badge.admin {
|
||||
background: var(--bg-purple-strong);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
/* Role variants */
|
||||
&.owner,
|
||||
&.enrolled,
|
||||
&.ferie {
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-status-badge.leader {
|
||||
background: var(--bg-blue-strong);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
&.admin {
|
||||
background: var(--bg-purple-strong);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-status-badge.employee {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
&.leader,
|
||||
&.fri,
|
||||
&.info,
|
||||
&.inprogress,
|
||||
&.in-progress {
|
||||
background: var(--bg-blue-strong);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
/* Additional status variants */
|
||||
swp-status-badge.valid {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
&.employee {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-status-badge.expiring,
|
||||
swp-status-badge.warning {
|
||||
background: var(--bg-amber-strong);
|
||||
color: #b45309;
|
||||
}
|
||||
/* Danger/red variants */
|
||||
&.sygdom,
|
||||
&.danger {
|
||||
background: var(--bg-red-strong);
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-status-badge.enrolled,
|
||||
swp-status-badge.ferie {
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-status-badge.fri,
|
||||
swp-status-badge.info {
|
||||
background: var(--bg-blue-strong);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-status-badge.sygdom,
|
||||
swp-status-badge.danger {
|
||||
background: var(--bg-red-strong);
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* Booking/scheduling specific variants */
|
||||
swp-status-badge.confirmed {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-status-badge.pending {
|
||||
background: var(--bg-amber-strong);
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-status-badge.inprogress,
|
||||
swp-status-badge.in-progress {
|
||||
background: var(--bg-blue-strong);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-status-badge.completed {
|
||||
background: var(--color-background-hover);
|
||||
color: var(--color-text-secondary);
|
||||
/* Completed - muted */
|
||||
&.completed {
|
||||
background: var(--color-background-hover);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -342,29 +318,28 @@ swp-plan-card {
|
|||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-10);
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
swp-plan-card.selected,
|
||||
swp-plan-card.current {
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: 0 0 0 3px var(--bg-teal-strong);
|
||||
}
|
||||
&.selected,
|
||||
&.current {
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: 0 0 0 3px var(--bg-teal-strong);
|
||||
|
||||
swp-plan-card.popular {
|
||||
border-color: var(--color-amber);
|
||||
}
|
||||
swp-btn.secondary {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-plan-card.enterprise {
|
||||
background: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%);
|
||||
border-color: var(--color-purple);
|
||||
}
|
||||
&.popular {
|
||||
border-color: var(--color-amber);
|
||||
}
|
||||
|
||||
/* Disabled button for current plan */
|
||||
swp-plan-card.current swp-btn.secondary {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
&.enterprise {
|
||||
background: var(--gradient-enterprise);
|
||||
border-color: var(--color-purple);
|
||||
}
|
||||
}
|
||||
|
||||
/* Plan badge */
|
||||
|
|
@ -379,41 +354,41 @@ swp-plan-badge {
|
|||
letter-spacing: 0.5px;
|
||||
border-radius: var(--radius-pill);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
swp-plan-badge.current,
|
||||
swp-plan-badge.selected {
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
& i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
swp-plan-badge.popular {
|
||||
background: var(--bg-amber-strong);
|
||||
color: var(--color-amber);
|
||||
}
|
||||
&.current,
|
||||
&.selected {
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-plan-badge.enterprise {
|
||||
background: var(--bg-purple-strong);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
&.popular {
|
||||
background: var(--bg-amber-strong);
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-plan-badge.free {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
&.enterprise {
|
||||
background: var(--bg-purple-strong);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-plan-badge i {
|
||||
font-size: 14px;
|
||||
&.free {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
}
|
||||
|
||||
/* Plan action */
|
||||
swp-plan-action {
|
||||
margin-top: auto;
|
||||
padding-top: var(--card-padding);
|
||||
}
|
||||
|
||||
swp-plan-action swp-btn {
|
||||
width: 100%;
|
||||
swp-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -428,49 +403,46 @@ swp-avatar {
|
|||
justify-content: center;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Default size (md = 40px) */
|
||||
swp-avatar {
|
||||
/* Default size (md = 40px) */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
/* Size variants */
|
||||
swp-avatar.size-xs {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 10px;
|
||||
}
|
||||
/* Size variants */
|
||||
&.size-xs {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
swp-avatar.size-sm {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
&.size-sm {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
swp-avatar.size-lg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
&.size-lg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
/* Color variants */
|
||||
swp-avatar.purple {
|
||||
background: var(--color-purple);
|
||||
}
|
||||
/* Color variants */
|
||||
&.purple {
|
||||
background: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-avatar.blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
&.blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-avatar.amber {
|
||||
background: var(--color-amber);
|
||||
}
|
||||
&.amber {
|
||||
background: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-avatar.teal {
|
||||
background: var(--color-teal);
|
||||
&.teal {
|
||||
background: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -536,12 +508,12 @@ swp-section-header {
|
|||
padding-bottom: var(--spacing-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-section-header swp-section-label {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
swp-section-label {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
swp-section-action {
|
||||
|
|
@ -593,6 +565,7 @@ swp-add-button {
|
|||
background: var(--bg-teal-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
USER INFO PATTERN (shared across auth, waitlist, employees, drawers)
|
||||
=========================================== */
|
||||
|
|
@ -657,47 +630,44 @@ swp-form-label {
|
|||
|
||||
swp-form-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
swp-form-input input,
|
||||
swp-form-input select,
|
||||
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);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
input,
|
||||
select,
|
||||
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);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
|
||||
swp-form-input input::placeholder,
|
||||
swp-form-input textarea::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
&::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: var(--shadow-focus-ring);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: var(--shadow-focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-input select {
|
||||
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;
|
||||
}
|
||||
select {
|
||||
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 textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
|
|||
|
|
@ -91,6 +91,9 @@
|
|||
--bg-purple-medium: color-mix(in srgb, var(--color-purple) var(--overlay-medium), transparent);
|
||||
--bg-purple-strong: color-mix(in srgb, var(--color-purple) var(--overlay-strong), transparent);
|
||||
--border-purple: color-mix(in srgb, var(--color-purple) var(--overlay-border), transparent);
|
||||
|
||||
/* -------- Gradient Tokens -------- */
|
||||
--gradient-enterprise: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue