create-nexaui-electron/scripts/assets/css/badge.css

Create Nexa App - Tool untuk membuat aplikasi Nexa Electron

/* Style untuk Badge */
.nx-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: #e9ecef;
    color: #212529;
     margin: 0 5px;
}

/* Variasi Warna */
.nx-badge.nx-primary {
    background-color: #007bff;
    color: #fff;
}

.nx-badge.nx-success {
    background-color: #28a745;
    color: #fff;
}

.nx-badge.nx-warning {
    background-color: #ffc107;
    color: #212529;
}

.nx-badge.nx-danger {
    background-color: #dc3545;
    color: #fff;
}

.nx-badge.nx-info {
    background-color: #17a2b8;
    color: #fff;
}

/* Badge Pill */
.nx-badge.nx-pill {
    border-radius: 10rem;
    padding-right: 0.8em;
    padding-left: 0.8em;
}

/* Badge dalam Button */
.nx-btn .nx-badge {
    position: relative;
    top: -1px;
}


/* Badge Notifikasi Icon */
.nx-icon-badge {
    position: relative;
    display: inline-flex;
    /*align-items: center;*/
    justify-content: center;
    margin: 0 20px;
    padding: 8px;
}

.nx-icon-badge i {
    font-size: 24px;
    color: #495057;
}

/* Badge Dot (untuk notifikasi bell) */
.nx-badge.nx-badge-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    border-radius: 10px;
    border: 2px solid #fff;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
}

/* Badge Count (untuk email dan cart) */
.nx-badge.nx-badge-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    border-radius: 10px;
    border: 2px solid #fff;
}

/* Hover effect */
.nx-icon-badge:hover {
    cursor: pointer;
}

.nx-icon-badge:hover i {
    color: #000;
}

/* Badge Positioned */
.nx-position-relative {
    position: relative;
    display: block;
    margin-bottom: 15px;
}

.nx-box {
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 15px;
    text-align: left;
    border-radius: 4px;
}

/* Posisi Badge */
.nx-badge.nx-positioned {
    position: absolute;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
}

/* Top Right */
.nx-badge.nx-top-right {
    top: -10px;
    right: -10px;
}

/* Top Left */
.nx-badge.nx-top-left {
    top: -10px;
    left: -10px;
}

/* Bottom Right */
.nx-badge.nx-bottom-right {
    bottom: -10px;
    right: -10px;
}

/* Bottom Left */
.nx-badge.nx-bottom-left {
    bottom: -10px;
    left: -10px;
}

/* Warna khusus untuk badge positioned */
.nx-badge.nx-positioned.nx-danger {
    background-color: #dc3545;
}

.nx-badge.nx-positioned.nx-primary {
    background-color: #007bff;
}

.nx-badge.nx-positioned.nx-success {
    background-color: #28a745;
}

.nx-badge.nx-positioned.nx-warning {
    background-color: #ffc107;
    color: #000;
}


.demo-box .nx-box {
    min-width: 200px;
    margin-bottom: 20px;
}

/* Animasi Counter */
.nx-badge.nx-animate {
    transition: all 0.3s ease;
}

.nx-badge.nx-animate:hover {
    transform: scale(1.1);
}

/* Status Indicator */
.nx-badge.nx-status {
    display: inline-flex;
    /*align-items: center;*/
    gap: 5px;
    padding: 0.4em 0.8em;
}

.nx-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.nx-status-online { background: #28a745; }
.nx-status-offline { background: #dc3545; }
.nx-status-away { background: #ffc107; }

/* Gradient Badges */
.nx-badge.nx-gradient-primary {
    background: linear-gradient(45deg, #007bff, #00c6ff);
    color: white;
}

.nx-badge.nx-gradient-success {
    background: linear-gradient(45deg, #28a745, #84cc16);
    color: white;
}

.nx-badge.nx-pattern {
    background-image: repeating-linear-gradient(45deg, #6c757d 0, #6c757d 3px, transparent 0, transparent 6px);
    background-color: #f8f9fa;
    color: #212529;
}

/* Badge Group */
.nx-badge-group {
    display: inline-flex;
    gap: 5px;
}

/* Badge Framework Inspired */
.nx-badge-framework {
    margin-top: 20px;
}

/* Soft Style (Terinspirasi Bootstrap) */
.nx-badge-framework h5 {
    margin-bottom: 10px;
}



/* Gradient Style (Terinspirasi Tailwind) */
.nx-badge-framework .nx-gradient-ocean {
    background: linear-gradient(45deg, #007bff, #00c6ff);
    color: white;
}

.nx-badge-framework .nx-gradient-sunset {
    background: linear-gradient(45deg, #ffc107, #ffa500);
    color: white;
}

.nx-badge-framework .nx-gradient-forest {
    background: linear-gradient(45deg, #28a745, #84cc16);
    color: white;
}

.nx-badge-framework .nx-gradient-aurora {
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    color: white;
}

.nx-badge-framework .nx-gradient-cosmic {
    background: linear-gradient(45deg, #dc3545, #ff6b6b);
    color: white;
}

/* Bordered Style (Terinspirasi UIkit) */
.nx-badge-framework .nx-border-blue {
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
}

.nx-badge-framework .nx-border-green {
    border: 1px solid #28a745;
    background-color: #28a745;
    color: white;
}

.nx-badge-framework .nx-border-red {
    border: 1px solid #dc3545;
    background-color: #dc3545;
    color: white;
}

.nx-badge-framework .nx-border-orange {
    border: 1px solid #ffc107;
    background-color: #ffc107;
    color: white;
}

.nx-badge-framework .nx-border-purple {
    border: 1px solid #9a00ff;
    background-color: #9a00ff;
    color: white;
}

/* Modern Style (Terinspirasi Bulma) */
.nx-badge-framework .nx-modern-dark {
    background-color: #333;
    color: white;
}

.nx-badge-framework .nx-modern-success {
    background-color: #28a745;
    color: white;
}

.nx-badge-framework .nx-modern-info {
    background-color: #17a2b8;
    color: white;
}

.nx-badge-framework .nx-modern-warning {
    background-color: #ffc107;
    color: white;
}

/* Framework Inspired Badges */

/* Soft Style */
.nx-badge[class*="nx-soft-"] {
    font-weight: 500;
    padding: 0.35em 0.8em;
    border-radius: 6px;
}

.nx-badge.nx-soft-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.nx-badge.nx-soft-green {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.nx-badge.nx-soft-red {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.nx-badge.nx-soft-yellow {
    background: rgba(234, 179, 8, 0.1);
    color: #ca8a04;
}

.nx-badge.nx-soft-purple {
    background: rgba(168, 85, 247, 0.1);
    color: #9333ea;
}

/* Gradient Style */
.nx-badge[class*="nx-gradient-"] {
    color: white;
    padding: 0.4em 1em;
    border-radius: 20px;
    font-weight: 600;
}

.nx-badge.nx-gradient-ocean {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.nx-badge.nx-gradient-sunset {
    background: linear-gradient(135deg, #f97316, #dc2626);
}

.nx-badge.nx-gradient-forest {
    background: linear-gradient(135deg, #22c55e, #15803d);
}

.nx-badge.nx-gradient-aurora {
    background: linear-gradient(135deg, #6366f1, #a855f7);
}

.nx-badge.nx-gradient-cosmic {
    background: linear-gradient(135deg, #3b82f6, #ec4899);
}

/* Bordered Style */
.nx-badge[class*="nx-border-"] {
    background: white;
    padding: 0.35em 0.8em;
    border: 2px solid;
    border-radius: 4px;
    font-weight: 600;
}

.nx-badge.nx-border-blue {
    border-color: #3b82f6;
    color: #2563eb;
}

.nx-badge.nx-border-green {
    border-color: #22c55e;
    color: #16a34a;
}

.nx-badge.nx-border-red {
    border-color: #ef4444;
    color: #dc2626;
}

.nx-badge.nx-border-orange {
    border-color: #f97316;
    color: #ea580c;
}

.nx-badge.nx-border-purple {
    border-color: #a855f7;
    color: #9333ea;
}

/* Modern Style */
.nx-badge[class*="nx-modern-"] {
    padding: 0.4em 0.8em;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    /*align-items: center;*/
    gap: 4px;
}

.nx-badge[class*="nx-modern-"] i {
    font-size: 0.85em;
}

.nx-badge.nx-modern-dark {
    background: #1f2937;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nx-badge.nx-modern-success {
    background: #059669;
    color: white;
    box-shadow: 0 2px 4px rgba(5,150,105,0.2);
}

.nx-badge.nx-modern-info {
    background: #0284c7;
    color: white;
    box-shadow: 0 2px 4px rgba(2,132,199,0.2);
}

.nx-badge.nx-modern-warning {
    background: #d97706;
    color: white;
    box-shadow: 0 2px 4px rgba(217,119,6,0.2);
}

/* Hover Effects */
.nx-badge[class*="nx-soft-"]:hover,
.nx-badge[class*="nx-border-"]:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

.nx-badge[class*="nx-gradient-"]:hover {
    filter: brightness(1.1);
    transition: filter 0.2s ease;
}

.nx-badge[class*="nx-modern-"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

/* Badge Sizes */
.nx-badge-sm {
    font-size: 65%;
    padding: 0.2em 0.5em;
}

.nx-badge {
    font-size: 75%;
    padding: 0.25em 0.6em;
}

.nx-badge-lg {
    font-size: 85%;
    padding: 0.3em 0.7em;
}

/* Pill badge sizes */
.nx-badge.nx-pill.nx-badge-sm {
    padding-right: 0.6em;
    padding-left: 0.6em;
}

.nx-badge.nx-pill {
    padding-right: 0.8em;
    padding-left: 0.8em;
}

.nx-badge.nx-pill.nx-badge-lg {
    padding-right: 1em;
    padding-left: 1em;
}

body.dark-mode-grid .demo-box .nx-box {
    color: #333;
}


/*AND Badge*/