Chris Chen
136 lines
2.2 KiB
SCSS
136 lines
2.2 KiB
SCSS
%badge-base {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge-approved {
|
|
@extend %badge-base;
|
|
background-color: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
|
|
.badge-paid {
|
|
@extend %badge-base;
|
|
background-color: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.badge-rejected {
|
|
@extend %badge-base;
|
|
background-color: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
// Mobile card list
|
|
// NOTE: display/flex layout lives on the element via Tailwind (flex flex-col gap-3)
|
|
// so the responsive `md:hidden` utility wins on desktop. Setting `display: flex`
|
|
// here would override `md:hidden` and leak the card list onto the desktop view.
|
|
|
|
.chk-empty {
|
|
padding: 24px 0;
|
|
text-align: center;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.chk-card {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
padding: 14px 16px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
|
|
&__top {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
&__number {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
}
|
|
|
|
&__amount {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
}
|
|
|
|
&__payee {
|
|
margin-top: 4px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
}
|
|
|
|
&__meta {
|
|
margin: 10px 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
dt {
|
|
margin: 0;
|
|
color: #6b7280;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
color: #374151;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
&__actions {
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #f3f4f6;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
|
|
// Comfortable tap targets; let buttons share the row evenly
|
|
.k-button {
|
|
flex: 1 1 auto;
|
|
min-height: 40px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chk-pager {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
|
|
&__info {
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.k-button {
|
|
min-height: 40px;
|
|
}
|
|
}
|