73 lines
1.6 KiB
CSS
73 lines
1.6 KiB
CSS
/* Utility classes for consistent styling */
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flexCol {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.itemsCenter {
|
|
align-items: center;
|
|
}
|
|
|
|
.justifyCenter {
|
|
justify-content: center;
|
|
}
|
|
|
|
.justifyBetween {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.gap1 { gap: 4px; }
|
|
.gap2 { gap: 8px; }
|
|
.gap3 { gap: 12px; }
|
|
.gap4 { gap: 16px; }
|
|
.gap5 { gap: 20px; }
|
|
|
|
.m0 { margin: 0; }
|
|
.mt1 { margin-top: 4px; }
|
|
.mt2 { margin-top: 8px; }
|
|
.mt3 { margin-top: 12px; }
|
|
.mt4 { margin-top: 16px; }
|
|
.mt5 { margin-top: 20px; }
|
|
|
|
.mb1 { margin-bottom: 4px; }
|
|
.mb2 { margin-bottom: 8px; }
|
|
.mb3 { margin-bottom: 12px; }
|
|
.mb4 { margin-bottom: 16px; }
|
|
.mb5 { margin-bottom: 20px; }
|
|
|
|
.p0 { padding: 0; }
|
|
.p1 { padding: 4px; }
|
|
.p2 { padding: 8px; }
|
|
.p3 { padding: 12px; }
|
|
.p4 { padding: 16px; }
|
|
.p5 { padding: 20px; }
|
|
|
|
.textXs { font-size: 12px; }
|
|
.textSm { font-size: 14px; }
|
|
.textBase { font-size: 16px; }
|
|
.textLg { font-size: 18px; }
|
|
.textXl { font-size: 20px; }
|
|
.text2Xl { font-size: 24px; }
|
|
|
|
.fontNormal { font-weight: 400; }
|
|
.fontMedium { font-weight: 500; }
|
|
.fontSemibold { font-weight: 600; }
|
|
.fontBold { font-weight: 700; }
|
|
|
|
.textPrimary { color: var(--primary-color); }
|
|
.textSecondary { color: var(--text-secondary); }
|
|
.textMuted { color: var(--text-muted); }
|
|
.textSuccess { color: var(--success-color); }
|
|
.textDanger { color: var(--danger-color); }
|
|
.textWarning { color: var(--warning-color); }
|
|
|
|
.bgWhite { background-color: var(--bg-color); }
|
|
.bgCard { background-color: var(--card-bg); }
|
|
.bgSuccessLight { background-color: var(--success-light); }
|
|
.bgDangerLight { background-color: var(--danger-light); }
|
|
.bgWarningLight { background-color: var(--warning-light); }
|