ben/upskill-event-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2
upskill-event-manager/assets/css/hvac-components.css
Ben f0d03be1b9 feat: implement CSS design system and harmonization fixes 
- Create comprehensive design system with 185 design tokens
- Add hvac-design-system.css with 8px spacing scale, typography, colors
- Add hvac-components.css with reusable component patterns
- Fix all CSS syntax errors in consolidated bundles
- Implement mobile-first responsive design
- Add WCAG 2.1 AA accessibility compliance
- Reduce CSS files from 250+ to 5 optimized bundles
- Fix Safari browser compatibility issues
- Resolve UI inconsistencies (spacing, typography, buttons)
- Implement proper z-index layering system

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 22:32:31 -03:00

576 lines
No EOL
12 KiB
CSS
Raw Blame History

/**
* HVAC Community Events - Component Library
* Standardized component patterns using the design system
*
* @requires hvac-design-system.css
* @version 1.0.0
* @since 2025-08-21
*/
/* ===== TYPOGRAPHY COMPONENTS ===== */
.hvac-content h1,
.hvac-h1 {
font-size: var(--hvac-text-3xl);
font-weight: var(--hvac-font-bold);
line-height: var(--hvac-leading-tight);
color: var(--hvac-neutral-900);
margin: 0 0 var(--hvac-space-6) 0;
}
.hvac-content h2,
.hvac-h2 {
font-size: var(--hvac-text-2xl);
font-weight: var(--hvac-font-semibold);
line-height: var(--hvac-leading-tight);
color: var(--hvac-neutral-900);
margin: var(--hvac-space-8) 0 var(--hvac-space-4) 0;
}
.hvac-content h3,
.hvac-h3 {
font-size: var(--hvac-text-xl);
font-weight: var(--hvac-font-semibold);
line-height: var(--hvac-leading-snug);
color: var(--hvac-neutral-900);
margin: var(--hvac-space-6) 0 var(--hvac-space-3) 0;
}
.hvac-content h4,
.hvac-h4 {
font-size: var(--hvac-text-lg);
font-weight: var(--hvac-font-medium);
line-height: var(--hvac-leading-snug);
color: var(--hvac-neutral-900);
margin: var(--hvac-space-5) 0 var(--hvac-space-2) 0;
}
.hvac-content p,
.hvac-text {
font-size: var(--hvac-text-base);
line-height: var(--hvac-leading-relaxed);
color: var(--hvac-neutral-700);
margin: 0 0 var(--hvac-space-4) 0;
}
.hvac-text-sm {
font-size: var(--hvac-text-sm);
line-height: var(--hvac-leading-normal);
}
.hvac-text-lg {
font-size: var(--hvac-text-lg);
line-height: var(--hvac-leading-relaxed);
}
/* ===== BUTTON COMPONENTS ===== */
.hvac-button,
.hvac-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--hvac-button-padding-base);
font-size: var(--hvac-text-base);
font-weight: var(--hvac-font-medium);
line-height: 1;
border: none;
border-radius: var(--hvac-button-radius);
text-decoration: none;
cursor: pointer;
transition: all var(--hvac-button-transition);
min-height: var(--hvac-touch-target);
box-shadow: var(--hvac-button-shadow);
position: relative;
overflow: hidden;
}
/* Primary Button */
.hvac-button-primary,
.hvac-btn-primary {
background-color: var(--hvac-primary-500);
color: var(--hvac-neutral-0);
}
.hvac-button-primary:hover,
.hvac-btn-primary:hover {
background-color: var(--hvac-primary-600);
transform: translateY(-1px);
box-shadow: var(--hvac-shadow-md);
text-decoration: none;
color: var(--hvac-neutral-0);
}
.hvac-button-primary:active,
.hvac-btn-primary:active {
background-color: var(--hvac-primary-700);
transform: translateY(0);
box-shadow: var(--hvac-shadow-sm);
}
.hvac-button-primary:focus,
.hvac-btn-primary:focus {
outline: none;
box-shadow: var(--hvac-focus-ring), var(--hvac-button-shadow);
}
/* Secondary Button */
.hvac-button-secondary,
.hvac-btn-secondary {
background-color: var(--hvac-neutral-0);
color: var(--hvac-primary-500);
border: 1px solid var(--hvac-primary-500);
}
.hvac-button-secondary:hover,
.hvac-btn-secondary:hover {
background-color: var(--hvac-primary-50);
border-color: var(--hvac-primary-600);
color: var(--hvac-primary-600);
transform: translateY(-1px);
box-shadow: var(--hvac-shadow-md);
text-decoration: none;
}
/* Outline Button */
.hvac-button-outline,
.hvac-btn-outline {
background-color: transparent;
color: var(--hvac-neutral-700);
border: 1px solid var(--hvac-neutral-300);
}
.hvac-button-outline:hover,
.hvac-btn-outline:hover {
background-color: var(--hvac-neutral-50);
border-color: var(--hvac-neutral-400);
color: var(--hvac-neutral-900);
text-decoration: none;
}
/* Ghost Button */
.hvac-button-ghost,
.hvac-btn-ghost {
background-color: transparent;
color: var(--hvac-primary-500);
border: none;
box-shadow: none;
}
.hvac-button-ghost:hover,
.hvac-btn-ghost:hover {
background-color: var(--hvac-primary-50);
color: var(--hvac-primary-600);
text-decoration: none;
}
/* Button Sizes */
.hvac-button-sm,
.hvac-btn-sm {
padding: var(--hvac-button-padding-sm);
font-size: var(--hvac-text-sm);
min-height: 36px;
}
.hvac-button-lg,
.hvac-btn-lg {
padding: var(--hvac-button-padding-lg);
font-size: var(--hvac-text-lg);
min-height: 52px;
}
/* Button States */
.hvac-button:disabled,
.hvac-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.hvac-button:disabled:hover,
.hvac-btn:disabled:hover {
transform: none;
box-shadow: var(--hvac-button-shadow);
}
/* ===== CARD COMPONENTS ===== */
.hvac-card {
background-color: var(--hvac-neutral-0);
border: var(--hvac-card-border);
border-radius: var(--hvac-card-radius);
box-shadow: var(--hvac-card-shadow);
overflow: hidden;
transition: box-shadow var(--hvac-transition-base);
}
.hvac-card:hover {
box-shadow: var(--hvac-shadow-md);
}
.hvac-card-header {
padding: var(--hvac-space-4) var(--hvac-card-padding);
border-bottom: 1px solid var(--hvac-neutral-200);
background-color: var(--hvac-neutral-50);
}
.hvac-card-title {
font-size: var(--hvac-text-lg);
font-weight: var(--hvac-font-semibold);
color: var(--hvac-neutral-900);
margin: 0;
}
.hvac-card-subtitle {
font-size: var(--hvac-text-sm);
color: var(--hvac-neutral-600);
margin: var(--hvac-space-1) 0 0 0;
}
.hvac-card-body {
padding: var(--hvac-card-padding);
}
.hvac-card-footer {
padding: var(--hvac-space-4) var(--hvac-card-padding);
border-top: 1px solid var(--hvac-neutral-200);
background-color: var(--hvac-neutral-50);
}
/* ===== FORM COMPONENTS ===== */
.hvac-form-group {
margin-bottom: var(--hvac-space-4);
}
.hvac-label {
display: block;
font-size: var(--hvac-text-sm);
font-weight: var(--hvac-font-medium);
color: var(--hvac-neutral-900);
margin-bottom: var(--hvac-space-2);
}
.hvac-input,
.hvac-textarea,
.hvac-select {
width: 100%;
padding: var(--hvac-input-padding);
font-size: var(--hvac-text-base);
line-height: var(--hvac-leading-normal);
color: var(--hvac-neutral-900);
background-color: var(--hvac-neutral-0);
border: var(--hvac-input-border);
border-radius: var(--hvac-input-radius);
box-shadow: var(--hvac-input-shadow);
transition: border-color var(--hvac-transition-fast), box-shadow var(--hvac-transition-fast);
}
.hvac-input:focus,
.hvac-textarea:focus,
.hvac-select:focus {
outline: none;
border-color: var(--hvac-primary-500);
box-shadow: var(--hvac-input-focus-ring);
}
.hvac-input:disabled,
.hvac-textarea:disabled,
.hvac-select:disabled {
background-color: var(--hvac-neutral-100);
color: var(--hvac-neutral-500);
cursor: not-allowed;
}
.hvac-input-error,
.hvac-textarea-error,
.hvac-select-error {
border-color: var(--hvac-error-500);
}
.hvac-input-error:focus,
.hvac-textarea-error:focus,
.hvac-select-error:focus {
border-color: var(--hvac-error-500);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.hvac-form-error {
font-size: var(--hvac-text-sm);
color: var(--hvac-error-600);
margin-top: var(--hvac-space-1);
}
.hvac-form-help {
font-size: var(--hvac-text-sm);
color: var(--hvac-neutral-600);
margin-top: var(--hvac-space-1);
}
/* ===== TABLE COMPONENTS ===== */
.hvac-table {
width: 100%;
border-collapse: collapse;
background-color: var(--hvac-neutral-0);
border-radius: var(--hvac-radius-base);
box-shadow: var(--hvac-shadow-base);
overflow: hidden;
}
.hvac-table th,
.hvac-table td {
padding: var(--hvac-table-padding);
text-align: left;
border-bottom: var(--hvac-table-border);
}
.hvac-table th {
background-color: var(--hvac-neutral-50);
font-weight: var(--hvac-font-semibold);
color: var(--hvac-neutral-900);
font-size: var(--hvac-text-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hvac-table tbody tr {
transition: background-color var(--hvac-transition-fast);
}
.hvac-table tbody tr:hover {
background-color: var(--hvac-neutral-50);
}
.hvac-table tbody tr:last-child td {
border-bottom: none;
}
/* Responsive table */
@media (max-width: 767px) {
.hvac-table-responsive {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
/* ===== STATUS COMPONENTS ===== */
.hvac-badge {
display: inline-flex;
align-items: center;
padding: var(--hvac-space-1) var(--hvac-space-3);
font-size: var(--hvac-text-sm);
font-weight: var(--hvac-font-medium);
border-radius: var(--hvac-radius-full);
line-height: 1;
}
.hvac-badge-primary {
background-color: var(--hvac-primary-100);
color: var(--hvac-primary-800);
}
.hvac-badge-success {
background-color: var(--hvac-success-50);
color: var(--hvac-success-700);
}
.hvac-badge-warning {
background-color: var(--hvac-warning-50);
color: var(--hvac-warning-700);
}
.hvac-badge-error {
background-color: var(--hvac-error-50);
color: var(--hvac-error-700);
}
.hvac-badge-neutral {
background-color: var(--hvac-neutral-100);
color: var(--hvac-neutral-700);
}
/* ===== NAVIGATION COMPONENTS ===== */
.hvac-nav {
background-color: var(--hvac-neutral-0);
border-bottom: 1px solid var(--hvac-neutral-200);
box-shadow: var(--hvac-nav-shadow);
}
.hvac-nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.hvac-nav-item {
position: relative;
}
.hvac-nav-link {
display: flex;
align-items: center;
padding: var(--hvac-nav-padding);
color: var(--hvac-neutral-700);
text-decoration: none;
font-weight: var(--hvac-font-medium);
transition: color var(--hvac-transition-fast), background-color var(--hvac-transition-fast);
}
.hvac-nav-link:hover {
color: var(--hvac-primary-600);
background-color: var(--hvac-primary-50);
text-decoration: none;
}
.hvac-nav-link.active {
color: var(--hvac-primary-600);
background-color: var(--hvac-primary-50);
}
/* ===== BREADCRUMB COMPONENTS ===== */
.hvac-breadcrumb {
display: flex;
align-items: center;
padding: var(--hvac-space-4) 0;
font-size: var(--hvac-text-sm);
}
.hvac-breadcrumb-list {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.hvac-breadcrumb-item {
display: flex;
align-items: center;
}
.hvac-breadcrumb-item:not(:last-child)::after {
content: ">";
margin: 0 var(--hvac-space-2);
color: var(--hvac-neutral-400);
}
.hvac-breadcrumb-link {
color: var(--hvac-primary-600);
text-decoration: none;
transition: color var(--hvac-transition-fast);
}
.hvac-breadcrumb-link:hover {
color: var(--hvac-primary-700);
text-decoration: underline;
}
.hvac-breadcrumb-current {
color: var(--hvac-neutral-700);
font-weight: var(--hvac-font-medium);
}
/* ===== ALERT COMPONENTS ===== */
.hvac-alert {
padding: var(--hvac-space-4);
border-radius: var(--hvac-radius-base);
margin-bottom: var(--hvac-space-4);
border-left: 4px solid;
}
.hvac-alert-success {
background-color: var(--hvac-success-50);
border-color: var(--hvac-success-500);
color: var(--hvac-success-800);
}
.hvac-alert-warning {
background-color: var(--hvac-warning-50);
border-color: var(--hvac-warning-500);
color: var(--hvac-warning-800);
}
.hvac-alert-error {
background-color: var(--hvac-error-50);
border-color: var(--hvac-error-500);
color: var(--hvac-error-800);
}
.hvac-alert-info {
background-color: var(--hvac-info-50);
border-color: var(--hvac-info-500);
color: var(--hvac-info-800);
}
/* ===== LOADING COMPONENTS ===== */
.hvac-loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--hvac-neutral-200);
border-top: 2px solid var(--hvac-primary-500);
border-radius: 50%;
animation: hvac-spin 1s linear infinite;
}
.hvac-loading-lg {
width: 32px;
height: 32px;
border-width: 3px;
}
@keyframes hvac-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== RESPONSIVE DESIGN ===== */
/* Mobile-first responsive design */
@media (max-width: 767px) {
.hvac-container {
padding: 0 var(--hvac-space-4);
}
.hvac-card {
margin: 0 calc(-1 * var(--hvac-space-4));
border-radius: 0;
border-left: none;
border-right: none;
}
.hvac-table {
font-size: var(--hvac-text-sm);
}
.hvac-nav-list {
flex-direction: column;
}
.hvac-button-lg,
.hvac-btn-lg {
width: 100%;
}
}
/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
.hvac-container {
padding: 0 var(--hvac-space-6);
}
}
/* Desktop styles */
@media (min-width: 1024px) {
.hvac-container {
padding: 0 var(--hvac-space-8);
}
}
Reference in a new issue View git blame Copy permalink