toannt/uldp-degree-mangement-system
1
0
Fork 0
forked from UKSOURCE/cms.hailearning.edu.vn
Code Pull Requests Activity

first commit

Browse Source
This commit is contained in:
nthanhtoan61
2026-04-11 14:08:27 +07:00
parent e86e5d2c46
commit 6b7655aa16
389 changed files with 5387 additions and 60861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
assets/css/components/button.css
View File

@@ -1,127 +1,123 @@
/**
* CMS Component: Buttons
* Overrides Bootstrap buttons to match CMS design language
*/
.btn {
border-radius: var(--border-radius);
font-weight: var(--font-weight-medium);
padding: 0.5rem 1.25rem;
transition: var(--transition-base);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 42px; /* Standardize height */
border-radius: var(--border-radius-sm);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
padding: 0.5rem 1.1rem;
transition: var(--transition-base);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
height: 38px;
letter-spacing: 0.01em;
}
.btn-sm {
padding: 0.25rem 0.75rem;
font-size: var(--font-size-sm);
height: 32px;
padding: 0.3rem 0.75rem;
font-size: 0.8125rem;
height: 30px;
border-radius: var(--border-radius-sm);
}
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: var(--font-size-lg);
height: 52px;
padding: 0.65rem 1.5rem;
font-size: 1rem;
height: 46px;
}
/* Primary Button */
/* Primary */
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--text-white);
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--text-white);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
background-color: var(--primary-light);
border-color: var(--primary-light);
color: #fff;
box-shadow: 0 4px 12px rgba(10,35,71,0.25);
transform: translateY(-1px);
}
/* Accent */
.btn-accent {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #fff;
}
.btn-accent:hover {
background-color: var(--accent-light);
border-color: var(--accent-light);
color: #fff;
transform: translateY(-1px);
}
/* Outline Primary */
.btn-outline-primary {
color: var(--primary-color);
border-color: var(--primary-color);
color: var(--primary-color);
border-color: var(--primary-color);
background: transparent;
}
.btn-outline-primary:hover {
background-color: var(--primary-color);
color: var(--text-white);
background-color: var(--primary-color);
color: #fff;
box-shadow: 0 2px 8px rgba(10,35,71,0.2);
}
/* White / Icon Button */
/* Outline Secondary */
.btn-outline-secondary {
color: var(--text-muted);
border-color: var(--border-color);
background: #fff;
}
.btn-outline-secondary:hover {
background-color: #f8fafc;
border-color: #cbd5e1;
color: var(--text-main);
}
/* Outline Danger */
.btn-outline-danger {
color: var(--danger-color);
border-color: var(--danger-color);
background: transparent;
}
.btn-outline-danger:hover {
background-color: var(--danger-color);
color: #fff;
}
/* White */
.btn-white {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
color: var(--text-main);
background-color: #fff;
border: 1px solid var(--border-color);
color: var(--text-main);
}
.btn-white:hover {
background-color: #f8f9fa;
border-color: #dee2e6;
box-shadow: var(--shadow-sm);
background-color: #f8fafc;
border-color: #cbd5e1;
box-shadow: var(--shadow-sm);
}
/* Special Button Effects (Shine effect from main.ejs) */
.btn-shine {
position: relative;
overflow: hidden;
/* Icon button */
.btn-icon {
width: 34px;
height: 34px;
padding: 0;
border-radius: var(--border-radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-shine::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: all 0.5s ease;
}
.btn-shine:hover::after {
left: 100%;
}
/* Action Button Group (Like Topbar screenshot) */
.btn-group-action {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: inline-flex;
}
.btn-group-action .btn {
border: none;
border-radius: 0;
padding: 0.5rem 0.85rem;
background: transparent;
height: 38px;
width: 42px;
}
.btn-group-action .btn:not(:last-child) {
border-right: 1px solid var(--border-color);
}
.btn-group-action .btn:hover {
background-color: #f8f9fa;
transform: none;
box-shadow: none;
}
/* Icon alignment inside buttons */
.btn i {
font-size: 0.9em;
}
/* Icon specific colors for actions */
.text-action-add { color: #0d6efd !important; }
.text-action-edit { color: #ffc107 !important; }
.text-action-delete { color: #dc3545 !important; }
.btn i { font-size: 0.85em; }