juxscript 1.1.245 → 1.1.247

package/lib/styles/nav.css

@@ -1,322 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════
- * NAV COMPONENT STYLES
- * Modern navigation with horizontal/vertical layouts
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Base Nav Container */
-.jux-nav {
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-/* Nav Items Container */
-.jux-nav-items {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    gap: 0;
-}
-
-/* Individual Nav Item Wrapper */
-.jux-nav-item-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-/* Nav Links */
-.jux-nav-link {
-    display: inline-flex;
-    align-items: center;
-    padding: 8px 20px;
-    color: #374151; /* gray-700 */
-    font-weight: 500;
-    font-size: 15px;
-    text-decoration: none;
-    transition: all 0.2s ease;
-    border-radius: 6px;
-    position: relative;
-}
-
-.jux-nav-link:hover {
-    color: #7c3aed; /* purple-600 */
-    background-color: rgba(124, 58, 237, 0.05);
-}
-
-.jux-nav-link:active {
-    transform: scale(0.98);
-}
-
-/* Active/Current Link State */
-.jux-nav-link.active,
-.jux-nav-link[aria-current="page"] {
-    color: #7c3aed;
-    font-weight: 600;
-}
-
-/* Underline effect on hover */
-.jux-nav-link::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    height: 2px;
-    background-color: #7c3aed;
-    transform: translateX(-50%);
-    transition: width 0.3s ease;
-}
-
-.jux-nav-link:hover::after,
-.jux-nav-link.active::after {
-    width: 80%;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * HORIZONTAL NAV (Default)
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-nav-horizontal .jux-nav-items {
-    flex-direction: row;
-    gap: 8px;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * VERTICAL NAV
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-nav-vertical {
-    flex-direction: column;
-    align-items: stretch;
-}
-
-.jux-nav-vertical .jux-nav-items {
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-}
-
-.jux-nav-vertical .jux-nav-item-wrapper {
-    width: 100%;
-}
-
-.jux-nav-vertical .jux-nav-link {
-    width: 100%;
-    justify-content: flex-start;
-}
-
-.jux-nav-vertical .jux-nav-link::after {
-    display: none; /* No underline in vertical mode */
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * SIZE VARIANTS
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Small Nav */
-.jux-nav-sm .jux-nav-link {
-    padding: 6px 14px;
-    font-size: 13px;
-}
-
-/* Large Nav */
-.jux-nav-lg .jux-nav-link {
-    padding: 12px 24px;
-    font-size: 16px;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * STYLE VARIANTS
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Pills Style */
-.jux-nav-pills .jux-nav-link {
-    border-radius: 50px;
-}
-
-.jux-nav-pills .jux-nav-link:hover,
-.jux-nav-pills .jux-nav-link.active {
-    background-color: #7c3aed;
-    color: white;
-}
-
-.jux-nav-pills .jux-nav-link::after {
-    display: none; /* No underline for pills */
-}
-
-/* Tabs Style */
-.jux-nav-tabs {
-    border-bottom: 2px solid #e5e7eb;
-}
-
-.jux-nav-tabs .jux-nav-link {
-    border-radius: 0;
-    border-bottom: 2px solid transparent;
-    margin-bottom: -2px;
-    padding-bottom: 10px;
-}
-
-.jux-nav-tabs .jux-nav-link::after {
-    display: none;
-}
-
-.jux-nav-tabs .jux-nav-link:hover {
-    background-color: transparent;
-    border-bottom-color: #d1d5db;
-}
-
-.jux-nav-tabs .jux-nav-link.active {
-    border-bottom-color: #7c3aed;
-    background-color: transparent;
-}
-
-/* Minimal Style (no background on hover) */
-.jux-nav-minimal .jux-nav-link:hover {
-    background-color: transparent;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * DROPDOWN SUPPORT
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-nav-item-wrapper.has-dropdown {
-    position: relative;
-}
-
-.jux-nav-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    min-width: 200px;
-    margin-top: 8px;
-    padding: 8px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-10px);
-    transition: all 0.2s ease;
-    z-index: 1000;
-}
-
-.jux-nav-item-wrapper.has-dropdown:hover .jux-nav-dropdown,
-.jux-nav-item-wrapper.has-dropdown:focus-within .jux-nav-dropdown {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-}
-
-.jux-nav-dropdown-item {
-    display: block;
-    padding: 10px 16px;
-    color: #374151;
-    text-decoration: none;
-    border-radius: 6px;
-    transition: all 0.15s ease;
-}
-
-.jux-nav-dropdown-item:hover {
-    background-color: rgba(124, 58, 237, 0.08);
-    color: #7c3aed;
-}
-
-/* Dropdown Arrow Indicator */
-.jux-nav-link.has-dropdown-arrow::after {
-    content: '▼';
-    margin-left: 6px;
-    font-size: 10px;
-    transition: transform 0.2s ease;
-}
-
-.jux-nav-item-wrapper.has-dropdown:hover .jux-nav-link.has-dropdown-arrow::after {
-    transform: rotate(180deg);
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * MOBILE RESPONSIVE
- * ═══════════════════════════════════════════════════════════════════ */
-
-@media (max-width: 768px) {
-    .jux-nav-horizontal.jux-nav-mobile-vertical .jux-nav-items {
-        flex-direction: column;
-        width: 100%;
-        gap: 4px;
-    }
-
-    .jux-nav-horizontal.jux-nav-mobile-vertical .jux-nav-item-wrapper {
-        width: 100%;
-    }
-
-    .jux-nav-horizontal.jux-nav-mobile-vertical .jux-nav-link {
-        width: 100%;
-        justify-content: flex-start;
-    }
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * DARK MODE SUPPORT
- * ═══════════════════════════════════════════════════════════════════ */
-
-.dark .jux-nav-link {
-    color: #d1d5db; /* gray-300 */
-}
-
-.dark .jux-nav-link:hover {
-    color: #a78bfa; /* purple-400 */
-    background-color: rgba(167, 139, 250, 0.1);
-}
-
-.dark .jux-nav-link.active {
-    color: #a78bfa;
-}
-
-.dark .jux-nav-tabs {
-    border-bottom-color: #374151;
-}
-
-.dark .jux-nav-dropdown {
-    background: #1f2937;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-}
-
-.dark .jux-nav-dropdown-item {
-    color: #d1d5db;
-}
-
-.dark .jux-nav-dropdown-item:hover {
-    background-color: rgba(167, 139, 250, 0.15);
-    color: #a78bfa;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * ANIMATIONS
- * ═══════════════════════════════════════════════════════════════════ */
-
-@keyframes nav-fade-in {
-    from {
-        opacity: 0;
-        transform: translateY(-5px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.jux-nav-items.animate-in {
-    animation: nav-fade-in 0.3s ease-out;
-}
-
-.jux-nav-item-wrapper {
-    animation: nav-fade-in 0.3s ease-out backwards;
-}
-
-.jux-nav-item-wrapper:nth-child(1) { animation-delay: 0ms; }
-.jux-nav-item-wrapper:nth-child(2) { animation-delay: 50ms; }
-.jux-nav-item-wrapper:nth-child(3) { animation-delay: 100ms; }
-.jux-nav-item-wrapper:nth-child(4) { animation-delay: 150ms; }
-.jux-nav-item-wrapper:nth-child(5) { animation-delay: 200ms; }
-.jux-nav-item-wrapper:nth-child(6) { animation-delay: 250ms; }