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,12 +29,12 @@ 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 {
|
||||
& i {
|
||||
font-size: 22px;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PLAN GRID
|
||||
|
|
@ -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 {
|
||||
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 {
|
||||
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,12 +100,12 @@ swp-payment-icon {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-payment-icon i {
|
||||
& i {
|
||||
font-size: 24px;
|
||||
color: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-info {
|
||||
flex: 1;
|
||||
|
|
@ -133,11 +133,11 @@ swp-payment-detail {
|
|||
align-items: center;
|
||||
padding: var(--spacing-4) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-payment-detail:last-of-type {
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-label {
|
||||
font-size: var(--font-size-sm);
|
||||
|
|
@ -148,11 +148,11 @@ swp-payment-value {
|
|||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-payment-value.highlight {
|
||||
&.highlight {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
INVOICES CARD
|
||||
|
|
@ -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 {
|
||||
&: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 {
|
||||
&:first-child {
|
||||
padding-left: var(--card-padding);
|
||||
}
|
||||
|
||||
swp-invoice-cell:last-child {
|
||||
&: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);
|
||||
}
|
||||
|
||||
/* Invoice number mono font */
|
||||
swp-invoice-cell.mono {
|
||||
&.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,22 +277,22 @@ swp-invoice-status {
|
|||
& i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-invoice-status.paid {
|
||||
&.paid {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-invoice-status.pending {
|
||||
&.pending {
|
||||
background: var(--bg-amber-strong);
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-invoice-status.overdue {
|
||||
&.overdue {
|
||||
background: var(--bg-red-strong);
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
DOWNLOAD BUTTON
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
swp-download-btn i {
|
||||
& 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,10 +37,9 @@ swp-auth-branding {
|
|||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Decorative background pattern */
|
||||
swp-auth-branding::before {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
|
|
@ -42,7 +50,7 @@ swp-auth-branding::before {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
swp-auth-branding::after {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
|
|
@ -53,6 +61,21 @@ swp-auth-branding::after {
|
|||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -60,18 +83,23 @@ swp-auth-logo {
|
|||
margin-bottom: var(--spacing-16);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
swp-auth-logo i {
|
||||
& i {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
swp-auth-logo span {
|
||||
& 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 {
|
||||
display: block;
|
||||
font-size: var(--font-size-3xl);
|
||||
|
|
@ -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 {
|
||||
swp-auth-logo {
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--spacing-12);
|
||||
|
||||
& i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-auth-plan-panel swp-auth-logo 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,13 +222,17 @@ swp-plan-price-amount {
|
|||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
swp-plan-price-amount.contact {
|
||||
&.contact {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-plan-price-period {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-secondary);
|
||||
|
|
@ -185,13 +250,13 @@ swp-plan-feature {
|
|||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-plan-feature i {
|
||||
& i {
|
||||
font-size: 18px;
|
||||
color: var(--color-green);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
CHANGE PLAN LINK
|
||||
|
|
@ -199,9 +264,8 @@ swp-plan-feature i {
|
|||
swp-change-plan-link {
|
||||
display: block;
|
||||
margin-top: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-change-plan-link a {
|
||||
& a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
|
|
@ -209,16 +273,21 @@ swp-change-plan-link a {
|
|||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-change-plan-link a:hover {
|
||||
&:hover {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
swp-change-plan-link i {
|
||||
& i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
FEATURE LIST
|
||||
=========================================== */
|
||||
|
|
@ -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,13 +315,17 @@ swp-auth-feature {
|
|||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
swp-auth-feature i {
|
||||
& i {
|
||||
font-size: 20px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
FORM PANEL (Right Side)
|
||||
=========================================== */
|
||||
|
|
@ -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,11 +405,11 @@ swp-user-verified {
|
|||
justify-content: center;
|
||||
color: var(--color-green);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-user-verified i {
|
||||
& i {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
FORM ELEMENTS
|
||||
|
|
@ -325,21 +421,16 @@ swp-auth-form {
|
|||
gap: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-form-input select option {
|
||||
swp-form-input {
|
||||
select option {
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-form-label .optional {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Input with icon */
|
||||
swp-form-input.has-icon input {
|
||||
&.has-icon input {
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
swp-form-input .input-icon {
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
right: var(--spacing-3);
|
||||
top: 50%;
|
||||
|
|
@ -349,16 +440,24 @@ swp-form-input .input-icon {
|
|||
padding: var(--spacing-2);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-form-input .input-icon:hover {
|
||||
&:hover {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-form-input .input-icon i {
|
||||
& i {
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-label {
|
||||
.optional {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PASSWORD STRENGTH INDICATOR
|
||||
|
|
@ -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 {
|
||||
&.weak {
|
||||
width: 25%;
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
swp-strength-fill.fair {
|
||||
&.fair {
|
||||
width: 50%;
|
||||
background: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-strength-fill.good {
|
||||
&.good {
|
||||
width: 75%;
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-strength-fill.strong {
|
||||
&.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,9 +523,8 @@ swp-form-checkbox {
|
|||
align-items: flex-start;
|
||||
gap: var(--spacing-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-form-checkbox input[type="checkbox"] {
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
|
|
@ -436,20 +534,21 @@ swp-form-checkbox input[type="checkbox"] {
|
|||
margin-top: 2px;
|
||||
}
|
||||
|
||||
swp-form-checkbox span {
|
||||
& span {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
swp-form-checkbox a {
|
||||
& a {
|
||||
color: var(--color-teal);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
swp-form-checkbox a:hover {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Button base styles in components.css */
|
||||
|
||||
|
|
@ -465,17 +564,17 @@ swp-auth-footer {
|
|||
swp-auth-footer-text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-auth-footer-text a {
|
||||
& a {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
swp-auth-footer-text a:hover {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
DIVIDER
|
||||
|
|
@ -485,20 +584,20 @@ swp-auth-divider {
|
|||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
margin: var(--spacing-6) 0;
|
||||
}
|
||||
|
||||
swp-auth-divider::before,
|
||||
swp-auth-divider::after {
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
swp-auth-divider span {
|
||||
& span {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SOCIAL LOGIN
|
||||
|
|
@ -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,16 +658,16 @@ swp-pricing-header {
|
|||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-16);
|
||||
}
|
||||
|
||||
swp-pricing-header swp-auth-logo {
|
||||
swp-auth-logo {
|
||||
margin-bottom: var(--spacing-10);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-pricing-header swp-auth-logo i {
|
||||
& i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-pricing-title {
|
||||
display: block;
|
||||
|
|
@ -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 {
|
||||
swp-plan-card {
|
||||
padding: var(--spacing-8);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&.popular {
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: var(--shadow-focus-ring);
|
||||
transform: scale(1.02);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
transform: none;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-pricing-grid swp-plan-features {
|
||||
swp-plan-features {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
swp-pricing-grid swp-plan-action {
|
||||
swp-plan-action {
|
||||
margin-top: auto;
|
||||
padding-top: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-pricing-grid swp-plan-card.popular {
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: var(--shadow-focus-ring);
|
||||
transform: scale(1.02);
|
||||
@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,17 +735,17 @@ swp-pricing-footer {
|
|||
swp-pricing-footer-text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-pricing-footer-text a {
|
||||
& a {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
swp-pricing-footer-text a:hover {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PAYMENT PAGE
|
||||
|
|
@ -661,16 +764,16 @@ swp-order-line {
|
|||
justify-content: space-between;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-order-line.discount {
|
||||
&.discount {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-order-line.total {
|
||||
&.total {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
swp-order-divider {
|
||||
height: 1px;
|
||||
|
|
@ -694,11 +797,11 @@ swp-payment-secure {
|
|||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-payment-secure i {
|
||||
& i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-processing {
|
||||
display: flex;
|
||||
|
|
@ -745,11 +848,11 @@ swp-success-icon {
|
|||
background: var(--bg-green-strong);
|
||||
border-radius: 50%;
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-success-icon i {
|
||||
& i {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-success-title {
|
||||
font-size: var(--font-size-xl);
|
||||
|
|
@ -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,17 +60,16 @@ swp-cash-stats {
|
|||
gap: var(--spacing-8);
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
swp-cash-stats:not(.active) {
|
||||
&: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;
|
||||
|
|
@ -89,21 +86,22 @@ swp-cash-stat-label {
|
|||
margin-top: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-cash-stat.highlight swp-cash-stat-value {
|
||||
&.highlight swp-cash-stat-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-cash-stat.warning swp-cash-stat-value {
|
||||
&.warning swp-cash-stat-value {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-cash-stat.negative swp-cash-stat-value {
|
||||
&.negative swp-cash-stat-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-cash-stat.user swp-cash-stat-value {
|
||||
&.user swp-cash-stat-value {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ACTION BAR (Table Header)
|
||||
|
|
@ -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;
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--color-teal);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
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-header,
|
||||
swp-cash-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
swp-cash-table-header {
|
||||
background: var(--color-background-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: var(--spacing-6) var(--spacing-10);
|
||||
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,91 +203,72 @@ swp-cash-th {
|
|||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-cash-th.right {
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-cash-th.checkbox,
|
||||
swp-cash-td.checkbox {
|
||||
&.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;
|
||||
&:nth-child(9) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
swp-cash-td {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-cash-td.right {
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-cash-td.mono {
|
||||
&.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
swp-cash-td.muted {
|
||||
&.muted {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
swp-cash-td.negative {
|
||||
&.negative {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-cash-td.positive {
|
||||
&.positive {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-cash-td.id {
|
||||
&.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 {
|
||||
.dates {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ROW TOGGLE & EXPANDABLE DETAIL
|
||||
|
|
@ -262,28 +283,26 @@ swp-row-toggle {
|
|||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-row-toggle:hover {
|
||||
&:hover {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-row-toggle i {
|
||||
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);
|
||||
}
|
||||
|
||||
swp-cash-row-detail.expanded {
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -297,37 +316,17 @@ swp-row-detail-actions {
|
|||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -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,26 +347,25 @@ 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 {
|
||||
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) {
|
||||
&:not(:first-child) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-data-row {
|
||||
display: grid;
|
||||
|
|
@ -382,11 +374,11 @@ swp-data-row {
|
|||
padding: var(--spacing-7) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-data-row:last-child {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-data-label {
|
||||
font-size: var(--font-size-base);
|
||||
|
|
@ -400,7 +392,8 @@ swp-data-system {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-data-input input {
|
||||
swp-data-input {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
font-size: var(--font-size-base);
|
||||
|
|
@ -409,29 +402,30 @@ swp-data-input input {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
swp-data-input input:focus {
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-data-input input::placeholder {
|
||||
&::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-data-value {
|
||||
text-align: right;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-data-value.muted {
|
||||
&.muted {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-table-note {
|
||||
display: block;
|
||||
|
|
@ -452,43 +446,46 @@ swp-calc-row {
|
|||
align-items: center;
|
||||
padding: var(--spacing-7) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-calc-row:last-of-type {
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-calc-row.input-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 {
|
||||
swp-calc-label {
|
||||
span {
|
||||
display: block;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-calc-label small {
|
||||
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);
|
||||
}
|
||||
|
||||
swp-calc-value.muted {
|
||||
&.muted {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-calc-input input {
|
||||
swp-calc-input {
|
||||
input {
|
||||
width: 140px;
|
||||
padding: var(--spacing-6) var(--spacing-7);
|
||||
font-size: var(--font-size-lg);
|
||||
|
|
@ -497,12 +494,13 @@ swp-calc-input input {
|
|||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
swp-calc-input input:focus {
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
DIFFERENCE BOX
|
||||
|
|
@ -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 {
|
||||
&.positive {
|
||||
background: var(--bg-green-medium);
|
||||
|
||||
swp-difference-value {
|
||||
color: var(--color-green);
|
||||
}
|
||||
}
|
||||
|
||||
swp-difference-box.negative {
|
||||
&.negative {
|
||||
background: var(--bg-red-medium);
|
||||
|
||||
swp-difference-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
|
||||
swp-difference-box.neutral {
|
||||
&.neutral {
|
||||
background: var(--bg-teal-medium);
|
||||
|
||||
swp-difference-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
swp-difference-label {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-difference-label small {
|
||||
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-value {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
swp-difference-box.positive swp-difference-value {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-difference-box.negative swp-difference-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-difference-box.neutral swp-difference-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -568,7 +566,6 @@ swp-period-display {
|
|||
padding: var(--spacing-8);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
swp-period-label {
|
||||
display: block;
|
||||
|
|
@ -587,12 +584,13 @@ swp-period-value {
|
|||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-period-value .arrow {
|
||||
.arrow {
|
||||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
FORM ELEMENTS
|
||||
|
|
@ -605,11 +603,11 @@ swp-form-grid {
|
|||
|
||||
swp-form-field {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-form-field.full-width {
|
||||
&.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-label {
|
||||
display: block;
|
||||
|
|
@ -619,14 +617,14 @@ swp-form-label {
|
|||
margin-bottom: var(--spacing-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
swp-form-label .required {
|
||||
.required {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-input input,
|
||||
swp-form-input select {
|
||||
swp-form-input {
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-5) var(--spacing-6);
|
||||
font-size: var(--font-size-base);
|
||||
|
|
@ -635,13 +633,13 @@ swp-form-input select {
|
|||
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 {
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-auto-id {
|
||||
display: block;
|
||||
|
|
@ -655,7 +653,8 @@ swp-auto-id {
|
|||
/* ===========================================
|
||||
NOTE FIELD
|
||||
=========================================== */
|
||||
swp-note-field textarea {
|
||||
swp-note-field {
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 80px;
|
||||
padding: var(--spacing-6);
|
||||
|
|
@ -664,12 +663,13 @@ swp-note-field textarea {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
swp-note-field textarea:focus {
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-note-hint {
|
||||
display: block;
|
||||
|
|
@ -701,9 +701,8 @@ swp-checkbox-field {
|
|||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
swp-checkbox-field input[type="checkbox"] {
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: var(--spacing-1);
|
||||
|
|
@ -711,22 +710,19 @@ swp-checkbox-field input[type="checkbox"] {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-checkbox-field label {
|
||||
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,19 +743,23 @@ 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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
swp-filter-bar {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-table-row-base:hover {
|
||||
&: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);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -79,11 +77,11 @@ swp-list-item-base {
|
|||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-list-item-base:hover {
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
BASE PATTERNS - Icon Container
|
||||
|
|
@ -122,107 +120,107 @@ swp-btn {
|
|||
& i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Primary button */
|
||||
swp-btn.primary {
|
||||
&.primary {
|
||||
background: var(--color-teal);
|
||||
color: white;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-btn.primary:hover {
|
||||
&:hover {
|
||||
background: #00796b;
|
||||
border-color: #00796b;
|
||||
}
|
||||
|
||||
swp-btn.primary:active {
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
swp-btn.primary:disabled {
|
||||
&:disabled {
|
||||
background: var(--color-border);
|
||||
border-color: var(--color-border);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/* Secondary button */
|
||||
swp-btn.secondary {
|
||||
&.secondary {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-btn.secondary:hover {
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* Ghost button */
|
||||
swp-btn.ghost {
|
||||
&.ghost {
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-btn.ghost:hover {
|
||||
&:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
/* Outline button */
|
||||
swp-btn.outline {
|
||||
&.outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-teal);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-btn.outline:hover {
|
||||
&:hover {
|
||||
background: var(--bg-teal-medium);
|
||||
}
|
||||
|
||||
swp-btn.outline.purple {
|
||||
&.purple {
|
||||
border-color: var(--color-purple);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-btn.outline.purple:hover {
|
||||
&:hover {
|
||||
background: var(--bg-purple-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Social button */
|
||||
swp-btn.social {
|
||||
&.social {
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
swp-btn.social:hover {
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
border-color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
swp-btn.social img {
|
||||
& img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Size variants */
|
||||
swp-btn.sm {
|
||||
&.sm {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
swp-btn.sm i {
|
||||
& i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
swp-btn.lg {
|
||||
&.lg {
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Full width */
|
||||
swp-btn.full-width {
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
STATUS BADGES (swp-status-badge)
|
||||
|
|
@ -235,9 +233,8 @@ swp-status-badge {
|
|||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
swp-status-badge::before {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
|
@ -245,91 +242,70 @@ swp-status-badge::before {
|
|||
background: currentColor;
|
||||
}
|
||||
|
||||
/* Status variants */
|
||||
swp-status-badge.approved,
|
||||
swp-status-badge.active {
|
||||
/* Status variants - green */
|
||||
&.approved,
|
||||
&.active,
|
||||
&.valid,
|
||||
&.confirmed {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-status-badge.draft,
|
||||
swp-status-badge.invited {
|
||||
/* Status variants - amber */
|
||||
&.draft,
|
||||
&.invited,
|
||||
&.expiring,
|
||||
&.warning,
|
||||
&.pending {
|
||||
background: var(--bg-amber-strong);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
/* Use color-amber for pending specifically */
|
||||
&.pending {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
/* Role variants */
|
||||
swp-status-badge.owner {
|
||||
&.owner,
|
||||
&.enrolled,
|
||||
&.ferie {
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-status-badge.admin {
|
||||
&.admin {
|
||||
background: var(--bg-purple-strong);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-status-badge.leader {
|
||||
&.leader,
|
||||
&.fri,
|
||||
&.info,
|
||||
&.inprogress,
|
||||
&.in-progress {
|
||||
background: var(--bg-blue-strong);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-status-badge.employee {
|
||||
&.employee {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Additional status variants */
|
||||
swp-status-badge.valid {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-status-badge.expiring,
|
||||
swp-status-badge.warning {
|
||||
background: var(--bg-amber-strong);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
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 {
|
||||
/* Danger/red variants */
|
||||
&.sygdom,
|
||||
&.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 {
|
||||
/* Completed - muted */
|
||||
&.completed {
|
||||
background: var(--color-background-hover);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PLAN CARDS (swp-plan-card)
|
||||
|
|
@ -342,30 +318,29 @@ 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 {
|
||||
&.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-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);
|
||||
}
|
||||
|
||||
/* Disabled button for current plan */
|
||||
swp-plan-card.current swp-btn.secondary {
|
||||
swp-btn.secondary {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.popular {
|
||||
border-color: var(--color-amber);
|
||||
}
|
||||
|
||||
&.enterprise {
|
||||
background: var(--gradient-enterprise);
|
||||
border-color: var(--color-purple);
|
||||
}
|
||||
}
|
||||
|
||||
/* Plan badge */
|
||||
swp-plan-badge {
|
||||
|
|
@ -379,42 +354,42 @@ swp-plan-badge {
|
|||
letter-spacing: 0.5px;
|
||||
border-radius: var(--radius-pill);
|
||||
width: fit-content;
|
||||
|
||||
& i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
swp-plan-badge.current,
|
||||
swp-plan-badge.selected {
|
||||
&.current,
|
||||
&.selected {
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-plan-badge.popular {
|
||||
&.popular {
|
||||
background: var(--bg-amber-strong);
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-plan-badge.enterprise {
|
||||
&.enterprise {
|
||||
background: var(--bg-purple-strong);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-plan-badge.free {
|
||||
&.free {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-plan-badge i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Plan action */
|
||||
swp-plan-action {
|
||||
margin-top: auto;
|
||||
padding-top: var(--card-padding);
|
||||
}
|
||||
|
||||
swp-plan-action swp-btn {
|
||||
swp-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
AVATARS (swp-avatar)
|
||||
|
|
@ -428,50 +403,47 @@ swp-avatar {
|
|||
justify-content: center;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Default size (md = 40px) */
|
||||
swp-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
/* Size variants */
|
||||
swp-avatar.size-xs {
|
||||
&.size-xs {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
swp-avatar.size-sm {
|
||||
&.size-sm {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
swp-avatar.size-lg {
|
||||
&.size-lg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
/* Color variants */
|
||||
swp-avatar.purple {
|
||||
&.purple {
|
||||
background: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-avatar.blue {
|
||||
&.blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-avatar.amber {
|
||||
&.amber {
|
||||
background: var(--color-amber);
|
||||
}
|
||||
|
||||
swp-avatar.teal {
|
||||
&.teal {
|
||||
background: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ICON BUTTONS (swp-icon-btn)
|
||||
|
|
@ -536,13 +508,13 @@ 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 {
|
||||
swp-section-label {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
swp-section-action {
|
||||
font-size: var(--font-size-sm);
|
||||
|
|
@ -593,6 +565,7 @@ swp-add-button {
|
|||
background: var(--bg-teal-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
USER INFO PATTERN (shared across auth, waitlist, employees, drawers)
|
||||
=========================================== */
|
||||
|
|
@ -657,11 +630,10 @@ swp-form-label {
|
|||
|
||||
swp-form-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
swp-form-input input,
|
||||
swp-form-input select,
|
||||
swp-form-input textarea {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
|
|
@ -671,22 +643,19 @@ swp-form-input textarea {
|
|||
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 {
|
||||
&::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
swp-form-input input:focus,
|
||||
swp-form-input select:focus,
|
||||
swp-form-input textarea:focus {
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
box-shadow: var(--shadow-focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
swp-form-input select {
|
||||
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");
|
||||
|
|
@ -695,10 +664,11 @@ swp-form-input select {
|
|||
padding-right: 40px;
|
||||
}
|
||||
|
||||
swp-form-input textarea {
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
EMPTY STATE PATTERN
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
|
|||
|
|
@ -32,12 +32,12 @@ swp-users-count {
|
|||
gap: var(--spacing-4);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-users-count strong {
|
||||
strong {
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
}
|
||||
|
||||
swp-users-progress {
|
||||
width: 120px;
|
||||
|
|
@ -45,7 +45,6 @@ swp-users-progress {
|
|||
background: var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-users-progress-bar {
|
||||
display: block;
|
||||
|
|
@ -54,6 +53,7 @@ swp-users-progress-bar {
|
|||
border-radius: var(--radius-sm);
|
||||
transition: width var(--transition-normal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
EMPLOYEE TABLE (Grid + Subgrid)
|
||||
|
|
@ -69,7 +69,6 @@ swp-employee-table-card {
|
|||
swp-employee-table {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 1fr) 120px 140px 120px 40px;
|
||||
}
|
||||
|
||||
swp-employee-table-header {
|
||||
display: grid;
|
||||
|
|
@ -77,12 +76,31 @@ swp-employee-table-header {
|
|||
grid-template-columns: subgrid;
|
||||
background: var(--color-background-alt);
|
||||
padding: 0 var(--spacing-10);
|
||||
|
||||
swp-employee-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-5);
|
||||
padding-bottom: var(--spacing-5);
|
||||
}
|
||||
}
|
||||
|
||||
swp-employee-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
|
||||
swp-employee-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-employee-row {
|
||||
|
|
@ -93,42 +111,22 @@ swp-employee-row {
|
|||
padding: 0 var(--spacing-10);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-employee-table-body swp-employee-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-employee-table-body swp-employee-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-employee-row:last-child {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-employee-cell {
|
||||
padding: var(--spacing-5) 0;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Chevron cell (last column) */
|
||||
swp-employee-cell:last-child {
|
||||
&:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Header cells */
|
||||
swp-employee-table-header swp-employee-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-5);
|
||||
padding-bottom: var(--spacing-5);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -152,18 +150,10 @@ swp-user-avatar {
|
|||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-user-avatar.purple {
|
||||
background: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-user-avatar.blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-user-avatar.amber {
|
||||
background: var(--color-amber);
|
||||
&.purple { background: var(--color-purple); }
|
||||
&.blue { background: var(--color-blue); }
|
||||
&.amber { background: var(--color-amber); }
|
||||
}
|
||||
|
||||
swp-user-details {
|
||||
|
|
@ -199,8 +189,6 @@ swp-table-actions {
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Icon button styles in components.css */
|
||||
|
||||
/* ===========================================
|
||||
PERMISSIONS MATRIX
|
||||
=========================================== */
|
||||
|
|
@ -210,28 +198,25 @@ swp-permissions-matrix {
|
|||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-permissions-matrix table {
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
swp-permissions-matrix th,
|
||||
swp-permissions-matrix td {
|
||||
th, td {
|
||||
padding: var(--spacing-5) var(--spacing-6);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
swp-permissions-matrix th:first-child,
|
||||
swp-permissions-matrix td:first-child {
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
|
||||
swp-permissions-matrix thead th {
|
||||
thead th {
|
||||
background: var(--color-background-alt);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
|
|
@ -240,38 +225,37 @@ swp-permissions-matrix thead th {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-permissions-matrix tbody tr:last-child td {
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-permissions-matrix .permission-name {
|
||||
.permission-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-permissions-matrix .permission-name i {
|
||||
i {
|
||||
font-size: 18px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-permissions-matrix .check {
|
||||
.check {
|
||||
color: var(--color-teal);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
swp-permissions-matrix .no-access {
|
||||
.no-access {
|
||||
color: var(--color-border);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
EMPLOYEE DETAIL VIEW (replaces page content)
|
||||
EMPLOYEE DETAIL VIEW
|
||||
=========================================== */
|
||||
|
||||
/* Large avatar for detail view */
|
||||
swp-employee-avatar-large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
|
@ -284,13 +268,12 @@ swp-employee-avatar-large {
|
|||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
flex-shrink: 0;
|
||||
|
||||
&.purple { background: var(--color-purple); }
|
||||
&.blue { background: var(--color-blue); }
|
||||
&.amber { background: var(--color-amber); }
|
||||
}
|
||||
|
||||
swp-employee-avatar-large.purple { background: var(--color-purple); }
|
||||
swp-employee-avatar-large.blue { background: var(--color-blue); }
|
||||
swp-employee-avatar-large.amber { background: var(--color-amber); }
|
||||
|
||||
/* Detail header content (inside swp-header-content) */
|
||||
swp-employee-detail-header {
|
||||
display: flex;
|
||||
gap: var(--spacing-12);
|
||||
|
|
@ -304,7 +287,6 @@ swp-employee-info {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Name row with name + tags + status */
|
||||
swp-employee-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -317,7 +299,9 @@ swp-employee-name {
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Tags row */
|
||||
/* ===========================================
|
||||
TAGS
|
||||
=========================================== */
|
||||
swp-tags-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -337,29 +321,31 @@ swp-tag {
|
|||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-tag.master {
|
||||
&.master {
|
||||
background: var(--bg-purple-strong);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-tag.senior {
|
||||
&.senior {
|
||||
background: var(--bg-blue-strong);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-tag.junior {
|
||||
&.junior {
|
||||
background: var(--bg-amber-strong);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
swp-tag.cert {
|
||||
&.cert {
|
||||
background: var(--bg-teal-strong);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* Employee status indicator */
|
||||
/* ===========================================
|
||||
EMPLOYEE STATUS INDICATOR
|
||||
=========================================== */
|
||||
swp-employee-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -371,25 +357,27 @@ swp-employee-status {
|
|||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
swp-employee-status[data-active="true"] {
|
||||
&[data-active="true"] {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
border: 1px solid var(--bg-green-border);
|
||||
}
|
||||
|
||||
swp-employee-status[data-active="false"] {
|
||||
&[data-active="false"] {
|
||||
background: var(--bg-red-medium);
|
||||
color: var(--color-red);
|
||||
border: 1px solid var(--bg-red-border);
|
||||
}
|
||||
|
||||
swp-employee-status .icon {
|
||||
.icon {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
/* Inline fact boxes (horizontal baseline alignment) */
|
||||
/* ===========================================
|
||||
FACT BOXES (Inline)
|
||||
=========================================== */
|
||||
swp-fact-boxes-inline {
|
||||
display: flex;
|
||||
gap: var(--spacing-12);
|
||||
|
|
@ -401,7 +389,6 @@ swp-fact-inline {
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-fact-inline-value {
|
||||
font-size: var(--font-size-lg);
|
||||
|
|
@ -414,8 +401,11 @@ swp-fact-inline-label {
|
|||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Edit rows for contenteditable (Grid + Subgrid) */
|
||||
/* ===========================================
|
||||
EDIT SECTION (Grid + Subgrid)
|
||||
=========================================== */
|
||||
swp-edit-section {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr;
|
||||
|
|
@ -427,6 +417,34 @@ swp-edit-row {
|
|||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
font-size: var(--font-size-base);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: text;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
&[data-type="number"] {
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-edit-label {
|
||||
|
|
@ -443,19 +461,43 @@ swp-edit-value {
|
|||
border: 1px solid transparent;
|
||||
transition: all var(--transition-fast);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
swp-edit-value:hover {
|
||||
&:hover {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
swp-edit-value:focus {
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* swp-section-label is now in components.css */
|
||||
&.mono {
|
||||
font-family: var(--font-mono);
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
swp-edit-select {
|
||||
display: block;
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
VIEW CONTAINERS (List/Detail swap)
|
||||
|
|
@ -469,7 +511,6 @@ swp-employee-detail-view {
|
|||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
/* Back link */
|
||||
swp-back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -478,35 +519,29 @@ swp-back-link {
|
|||
font-size: var(--font-size-sm);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-back-link:hover {
|
||||
&:hover {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-back-link i {
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Detail grid for cards (2-column layout) */
|
||||
/* ===========================================
|
||||
DETAIL GRID (2-column layout)
|
||||
=========================================== */
|
||||
swp-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-8);
|
||||
}
|
||||
|
||||
swp-detail-grid > div {
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-8);
|
||||
}
|
||||
|
||||
/* swp-card base styles in components.css */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
swp-detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -523,14 +558,17 @@ swp-schedule-row {
|
|||
align-items: center;
|
||||
padding: var(--spacing-4) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-schedule-row:last-child {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-schedule-row.off {
|
||||
&.off {
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
swp-schedule-time {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
swp-schedule-day {
|
||||
|
|
@ -543,9 +581,6 @@ swp-schedule-time {
|
|||
font-family: var(--font-mono);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-schedule-row.off swp-schedule-time {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -563,9 +598,8 @@ swp-service-item {
|
|||
align-items: center;
|
||||
padding: var(--spacing-4) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-service-item:last-child {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
|
@ -585,10 +619,10 @@ swp-service-price {
|
|||
color: var(--color-teal);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
DOCUMENT LIST (HR tab)
|
||||
Also used for certs, courses, and similar lists
|
||||
=========================================== */
|
||||
swp-document-list {
|
||||
display: flex;
|
||||
|
|
@ -604,25 +638,20 @@ swp-document-item {
|
|||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Icon (optional) */
|
||||
swp-document-item i,
|
||||
swp-document-icon {
|
||||
i, swp-document-icon {
|
||||
font-size: 20px;
|
||||
color: var(--color-text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-document-item i.ph-file-pdf {
|
||||
i.ph-file-pdf {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* Info wrapper (name + meta) */
|
||||
swp-document-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
swp-document-name {
|
||||
display: block;
|
||||
|
|
@ -637,16 +666,19 @@ swp-document-meta {
|
|||
color: var(--color-text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Actions (buttons/badges at end) */
|
||||
swp-document-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Notes area */
|
||||
/* ===========================================
|
||||
NOTES AREA
|
||||
=========================================== */
|
||||
swp-notes-area {
|
||||
display: block;
|
||||
min-height: 100px;
|
||||
|
|
@ -656,71 +688,11 @@ swp-notes-area {
|
|||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
swp-notes-area:focus {
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
EDIT SELECT (dropdown in edit rows)
|
||||
=========================================== */
|
||||
swp-edit-select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-edit-select select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-edit-select select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Mono variant for edit-value */
|
||||
swp-edit-value.mono {
|
||||
font-family: var(--font-mono);
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* Input in edit-row */
|
||||
swp-edit-row input {
|
||||
font-size: var(--font-size-base);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
swp-edit-row input:hover {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
swp-edit-row input:focus {
|
||||
outline: none;
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Number input variant */
|
||||
swp-edit-row input[data-type="number"] {
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -729,86 +701,83 @@ swp-edit-row input[data-type="number"] {
|
|||
swp-salary-table {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 120px 60px;
|
||||
|
||||
swp-salary-table-header {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
swp-salary-table-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);
|
||||
}
|
||||
}
|
||||
|
||||
swp-salary-table-header,
|
||||
swp-salary-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
swp-salary-table-header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-salary-table-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-salary-table-row:last-child {
|
||||
border-bottom: none;
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
|
||||
swp-salary-table-cell i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-salary-table-cell {
|
||||
padding: var(--spacing-4) var(--spacing-2);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-salary-table-cell:first-child {
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
swp-salary-table-cell:last-child {
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-salary-table-header swp-salary-table-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);
|
||||
}
|
||||
|
||||
swp-salary-table-cell.mono {
|
||||
&.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Chevron for row actions */
|
||||
swp-salary-table-cell i {
|
||||
i {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
swp-salary-table-row {
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-salary-table-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-salary-table-row:hover swp-salary-table-cell i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SUBSECTION TITLE (for grouped lists like courses)
|
||||
SUBSECTION TITLE
|
||||
=========================================== */
|
||||
swp-subsection {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-subsection:last-of-type {
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -819,9 +788,10 @@ swp-subsection-title {
|
|||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SIMPLE LIST (dates + badge, like vacation)
|
||||
SIMPLE LIST
|
||||
=========================================== */
|
||||
swp-simple-list {
|
||||
display: flex;
|
||||
|
|
@ -838,7 +808,6 @@ swp-simple-item {
|
|||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-simple-item-text {
|
||||
flex: 1;
|
||||
|
|
@ -846,18 +815,18 @@ swp-simple-item-text {
|
|||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* swp-add-button styles in components.css */
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RATES DRAWER CONTENT (overrides for swp-data-*)
|
||||
RATES DRAWER CONTENT
|
||||
=========================================== */
|
||||
.rates-content swp-data-table {
|
||||
.rates-content {
|
||||
swp-data-table {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr 100px;
|
||||
}
|
||||
|
||||
.rates-content swp-data-row {
|
||||
swp-data-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
|
|
@ -865,36 +834,35 @@ swp-simple-item-text {
|
|||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.rates-content swp-data-row:last-child {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rates-content swp-data-row input[type="checkbox"] {
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--color-teal);
|
||||
}
|
||||
|
||||
.rates-content swp-data-label {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.rates-content swp-data-label.disabled {
|
||||
swp-data-label {
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.rates-content swp-data-input {
|
||||
swp-data-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 4px;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.rates-content swp-data-input input {
|
||||
input {
|
||||
width: 100px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
|
|
@ -904,20 +872,56 @@ swp-simple-item-text {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.rates-content swp-data-input.disabled input {
|
||||
&.disabled input {
|
||||
opacity: 0.4;
|
||||
background: var(--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
.rates-content swp-section-label {
|
||||
swp-section-label {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rates-content swp-data-section {
|
||||
swp-data-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
STATS BOOKINGS TABLE
|
||||
=========================================== */
|
||||
.stats-bookings {
|
||||
swp-data-table {
|
||||
grid-template-columns: 90px 60px minmax(120px, 1fr) minmax(150px, 1fr) 80px 100px 100px;
|
||||
}
|
||||
|
||||
swp-data-table-row swp-data-table-cell {
|
||||
&:nth-child(1),
|
||||
&:nth-child(2),
|
||||
&:nth-child(5) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
swp-data-table-header swp-data-table-cell:nth-child(6) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE
|
||||
|
|
@ -928,6 +932,12 @@ swp-simple-item-text {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
swp-detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
swp-employee-table {
|
||||
grid-template-columns: minmax(160px, 1fr) 90px 110px 90px 40px;
|
||||
|
|
@ -946,43 +956,10 @@ swp-simple-item-text {
|
|||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-users-header swp-btn {
|
||||
swp-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
STATS BOOKINGS TABLE (columns for swp-data-table)
|
||||
=========================================== */
|
||||
.stats-bookings swp-data-table {
|
||||
grid-template-columns: 90px 60px minmax(120px, 1fr) minmax(150px, 1fr) 80px 100px 100px;
|
||||
}
|
||||
|
||||
/* Dato, Tid, Varighed: mono + muted */
|
||||
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(1),
|
||||
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(2),
|
||||
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(5) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Kunde: medium */
|
||||
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(3) {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* Beløb: mono + bold + right */
|
||||
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(6),
|
||||
.stats-bookings swp-data-table-header swp-data-table-cell:nth-child(6) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(6) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue