8b2a630861
Standardizes markup structure for invoice history, employee table, and salary history components Simplifies HTML markup by removing unnecessary wrapper elements Applies consistent CSS class naming and styling approach Improves component readability and maintainability
230 lines
4.9 KiB
CSS
230 lines
4.9 KiB
CSS
/**
|
|
* Account Styles - Subscription & Billing Management
|
|
*
|
|
* For logged-in users to manage their subscription plan,
|
|
* payment method, and view invoice history.
|
|
*
|
|
* Reuses: swp-btn, swp-plan-card, swp-plan-badge, swp-plan-action (components.css)
|
|
*/
|
|
|
|
/* ===========================================
|
|
SECTION STYLING
|
|
=========================================== */
|
|
swp-account-section {
|
|
display: block;
|
|
margin-bottom: var(--section-gap);
|
|
}
|
|
|
|
swp-account-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--section-gap);
|
|
}
|
|
|
|
swp-account-section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
|
|
& i {
|
|
font-size: 22px;
|
|
color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
PLAN GRID
|
|
=========================================== */
|
|
swp-plan-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--card-gap);
|
|
|
|
@media (max-width: 1024px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Plan card/badge/action styles in components.css */
|
|
|
|
/* ===========================================
|
|
BILLING GRID (2 columns)
|
|
=========================================== */
|
|
swp-billing-grid {
|
|
display: grid;
|
|
grid-template-columns: 380px 1fr;
|
|
gap: var(--card-gap);
|
|
|
|
@media (max-width: 1024px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
PAYMENT CARD
|
|
=========================================== */
|
|
swp-payment-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--card-padding);
|
|
background: var(--color-surface);
|
|
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 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--card-padding);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
swp-payment-icon {
|
|
width: 48px;
|
|
height: 32px;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
& i {
|
|
font-size: 24px;
|
|
color: var(--color-blue);
|
|
}
|
|
}
|
|
|
|
swp-payment-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
swp-payment-type {
|
|
display: block;
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
swp-payment-number {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
swp-payment-detail {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--spacing-4) 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
swp-payment-label {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-payment-value {
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
|
|
&.highlight {
|
|
color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
INVOICE HISTORY (uses swp-data-table from components.css)
|
|
=========================================== */
|
|
swp-card.invoice-history swp-data-table {
|
|
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-card.invoice-history swp-data-table-cell {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
/* ===========================================
|
|
INVOICE STATUS BADGES
|
|
=========================================== */
|
|
swp-invoice-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
border-radius: var(--radius-sm);
|
|
|
|
& i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
&.paid {
|
|
background: var(--bg-green-strong);
|
|
color: var(--color-green);
|
|
}
|
|
|
|
&.pending {
|
|
background: var(--bg-amber-strong);
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
&.overdue {
|
|
background: var(--bg-red-strong);
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
DOWNLOAD BUTTON
|
|
=========================================== */
|
|
swp-download-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-teal);
|
|
background: transparent;
|
|
border: 1px solid var(--color-teal);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
|
|
& i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--bg-teal-medium);
|
|
}
|
|
}
|
|
|
|
/* Button styles in components.css */
|