This commit is contained in:
@@ -1,72 +1,158 @@
|
||||
/* Utility classes for consistent styling */
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flexCol {
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.itemsCenter {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justifyCenter {
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justifyBetween {
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap1 { gap: 4px; }
|
||||
.gap2 { gap: 8px; }
|
||||
.gap3 { gap: 12px; }
|
||||
.gap4 { gap: 16px; }
|
||||
.gap5 { gap: 20px; }
|
||||
.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; }
|
||||
.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; }
|
||||
.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; }
|
||||
.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; }
|
||||
.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; }
|
||||
.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); }
|
||||
.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); }
|
||||
.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);
|
||||
}
|
||||
|
Reference in New Issue
Block a user