108 lines
4.4 KiB
CSS
Executable File
108 lines
4.4 KiB
CSS
Executable File
@import "tailwindcss";
|
|
@config "../../tailwind.config.js";
|
|
|
|
/* NetGescon design tokens and components */
|
|
@layer base {
|
|
:root {
|
|
--netgescon-gray-50: #f9fafb;
|
|
--netgescon-gray-100: #f3f4f6;
|
|
--netgescon-gray-200: #e5e7eb;
|
|
--netgescon-gray-600: #4b5563;
|
|
--netgescon-gray-800: #1f2937;
|
|
--netgescon-gray-900: #111827;
|
|
--netgescon-primary: #2563eb;
|
|
/* blue-600 */
|
|
--netgescon-secondary: #64748b;
|
|
/* slate-500 */
|
|
--netgescon-success: #16a34a;
|
|
/* green-600 */
|
|
--netgescon-warning: #f59e0b;
|
|
/* amber-500 */
|
|
--netgescon-danger: #dc2626;
|
|
/* red-600 */
|
|
--netgescon-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.10);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
|
|
/* Card standard */
|
|
.netgescon-card {
|
|
@apply bg-white rounded-xl border border-gray-200 shadow-sm;
|
|
box-shadow: var(--netgescon-shadow);
|
|
}
|
|
|
|
/* Typography helpers */
|
|
.netgescon-title {
|
|
@apply text-slate-900 font-semibold;
|
|
}
|
|
|
|
.netgescon-text {
|
|
@apply text-slate-600;
|
|
}
|
|
|
|
/* Base button */
|
|
.netgescon-btn {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2;
|
|
}
|
|
|
|
/* Solid variants */
|
|
.netgescon-btn-primary {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
|
|
}
|
|
|
|
.netgescon-btn-secondary {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-slate-600 hover:bg-slate-700 focus:ring-slate-500;
|
|
}
|
|
|
|
.netgescon-btn-success {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-green-600 hover:bg-green-700 focus:ring-green-500;
|
|
}
|
|
|
|
.netgescon-btn-warning {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-amber-500 hover:bg-amber-600 focus:ring-amber-400;
|
|
}
|
|
|
|
.netgescon-btn-danger {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
|
|
}
|
|
|
|
/* Outline variants */
|
|
.netgescon-btn-outline-primary {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-600 border border-blue-600 hover:bg-blue-50 focus:ring-blue-500;
|
|
}
|
|
|
|
.netgescon-btn-outline-secondary {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-slate-700 border border-slate-400 hover:bg-slate-50 focus:ring-slate-500;
|
|
}
|
|
|
|
.netgescon-btn-outline-success {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-green-600 border border-green-600 hover:bg-green-50 focus:ring-green-500;
|
|
}
|
|
|
|
.netgescon-btn-outline-warning {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-amber-600 border border-amber-500 hover:bg-amber-50 focus:ring-amber-400;
|
|
}
|
|
|
|
.netgescon-btn-outline-danger {
|
|
@apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-red-600 border border-red-600 hover:bg-red-50 focus:ring-red-500;
|
|
}
|
|
|
|
/* Size modifier */
|
|
.netgescon-btn-sm {
|
|
@apply px-2.5 py-1 text-xs;
|
|
}
|
|
|
|
.netgescon-btn-lg {
|
|
@apply px-4 py-2 text-base;
|
|
}
|
|
|
|
/* Generic Tab behavior (no Bootstrap dependency) */
|
|
.tab-pane {
|
|
display: none;
|
|
}
|
|
|
|
.tab-pane.show.active {
|
|
display: block;
|
|
}
|
|
} |