@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/themes/flashtrade/06-components/_components.navbar.scss

@@ -1,227 +0,0 @@
-/*!
- * Flash Trade Theme - Navbar Component
- * Trading platform navigation with glass morphism
- */
-
-@use '../01-settings' as *;
-@use '../../../styles/02-tools' as tools;
-
-// Main navbar
-.navbar {
-    background: rgba(var(--atomix-gray-2-rgb), 0.8);
-    backdrop-filter: blur(16px) saturate(1.5);
-    border-bottom: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2);
-    padding: 0.75rem 1.5rem;
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-
-    &__container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        max-width: 1920px;
-        margin: 0 auto;
-    }
-
-    &__brand {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-
-        .logo {
-            height: 32px;
-            width: auto;
-        }
-
-        .brand-name {
-            font-size: 1.25rem;
-            font-weight: 700;
-            color: var(--atomix-primary-6);
-            text-decoration: none;
-            letter-spacing: -0.5px;
-        }
-    }
-
-    &__nav {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-
-        @media (max-width: 768px) {
-            display: none;
-        }
-    }
-
-    &__link {
-        padding: 0.5rem 1rem;
-        color: var(--atomix-gray-9);
-        text-decoration: none;
-        font-weight: 500;
-        border-radius: 8px;
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-            color: var(--atomix-white);
-            background: rgba(var(--atomix-gray-5-rgb), 0.5);
-        }
-
-        &.active {
-            color: var(--atomix-primary-6);
-            background: rgba(var(--atomix-primary-6-rgb), 0.1);
-        }
-    }
-
-    &__actions {
-        display: flex;
-        gap: 0.75rem;
-        align-items: center;
-    }
-
-    &__wallet {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-        background: linear-gradient(135deg, var(--atomix-primary-6), var(--atomix-primary-7));
-        color: var(--atomix-gray-1);
-        border: none;
-        border-radius: 8px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-            box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
-            transform: translateY(-1px);
-        }
-
-        &.connected {
-            background: rgba(var(--atomix-green-6-rgb), 0.2);
-            color: var(--atomix-green-6);
-            border: 1px solid var(--atomix-green-6);
-        }
-    }
-}
-
-// Asset selector bar (secondary nav)
-.asset-bar {
-    background: rgba(var(--atomix-gray-3-rgb), 0.6);
-    backdrop-filter: blur(12px);
-    border-bottom: 1px solid rgba(var(--atomix-gray-6-rgb), 0.15);
-    padding: 0.75rem 1.5rem;
-    overflow-x: auto;
-
-    &::-webkit-scrollbar {
-        height: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: rgba(var(--atomix-gray-5-rgb), 0.3);
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: rgba(var(--atomix-primary-6-rgb), 0.5);
-        border-radius: 2px;
-
-        &:hover {
-            background: rgba(var(--atomix-primary-6-rgb), 0.7);
-        }
-    }
-
-    &__container {
-        display: flex;
-        gap: 1rem;
-        max-width: 1920px;
-        margin: 0 auto;
-    }
-
-    &__item {
-        display: flex;
-        flex-direction: column;
-        padding: 0.5rem 1rem;
-        border-radius: 8px;
-        cursor: pointer;
-        transition: all 0.15s ease-in-out;
-        white-space: nowrap;
-        min-width: 120px;
-
-        &:hover {
-            background: rgba(var(--atomix-gray-5-rgb), 0.5);
-        }
-
-        &.active {
-            background: rgba(var(--atomix-primary-6-rgb), 0.1);
-            border: 1px solid rgba(var(--atomix-primary-6-rgb), 0.3);
-        }
-
-        .asset-name {
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: var(--atomix-white);
-            margin-bottom: 0.125rem;
-        }
-
-        .asset-price {
-            font-size: 0.75rem;
-            color: var(--atomix-gray-9);
-            font-variant-numeric: tabular-nums;
-        }
-
-        .asset-change {
-            font-size: 0.75rem;
-            font-weight: 600;
-
-            &.positive {
-                color: var(--atomix-green-6);
-            }
-
-            &.negative {
-                color: var(--atomix-red-6);
-            }
-        }
-    }
-}
-
-// Mobile menu toggle
-.navbar__toggle {
-    display: none;
-    background: transparent;
-    border: 1px solid var(--atomix-gray-6);
-    color: var(--atomix-white);
-    padding: 0.5rem;
-    border-radius: 6px;
-    cursor: pointer;
-
-    @media (max-width: 768px) {
-        display: block;
-    }
-
-    &:hover {
-        background: rgba(var(--atomix-gray-5-rgb), 0.5);
-    }
-}
-
-// Mobile menu
-.navbar__mobile-menu {
-    display: none;
-    position: fixed;
-    top: 60px;
-    left: 0;
-    right: 0;
-    background: rgba(var(--atomix-gray-2-rgb), 0.95);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2);
-    padding: 1rem;
-    z-index: 999;
-
-    &.active {
-        display: block;
-    }
-
-    .navbar__link {
-        display: block;
-        padding: 0.75rem 1rem;
-        margin-bottom: 0.5rem;
-    }
-}

package/src/themes/flashtrade/06-components/_index.scss

@@ -1,13 +0,0 @@
-/*!
- * Flash Trade Theme Components Index
- * Component styles with trading platform enhancements
- */
-
-// Component overrides with Flash Trade styling
-@forward 'components.button';
-@forward 'components.card';
-@forward 'components.badge';
-@forward 'components.navbar';
-
-// Forward base component styles from the main design system
-@forward '../../../styles/06-components/index';

package/src/themes/flashtrade/99-utilities/_index.scss

@@ -1,9 +0,0 @@
-/*!
- * Flash Trade Theme Utilities Index
- * Utility classes for the trading platform
- */
-// Flash Trade specific utilities
-@forward 'utilities.trading';
-
-// Forward base utility styles from the main design system
-@forward '../../../styles/99-utilities/index';

package/src/themes/flashtrade/99-utilities/_utilities.trading.scss

@@ -1,187 +0,0 @@
-/*!
- * Flash Trade Theme - Utility Classes
- * Trading platform specific utility classes
- */
-
-@use '../01-settings' as *;
-
-// Text color utilities for trading
-.text-profit,
-.text-long {
-    color: var(--atomix-green-6) !important;
-}
-
-.text-loss,
-.text-short {
-    color: var(--atomix-red-6) !important;
-}
-
-.text-neutral {
-    color: var(--atomix-gray-9) !important;
-}
-
-.text-primary {
-    color: var(--atomix-primary-6) !important;
-}
-
-// Background utilities
-.bg-dark-1 {
-    background-color: var(--atomix-gray-1) !important;
-}
-
-.bg-dark-2 {
-    background-color: var(--atomix-gray-2) !important;
-}
-
-.bg-dark-3 {
-    background-color: var(--atomix-gray-3) !important;
-}
-
-.bg-glass {
-    background: rgba(var(--atomix-gray-3-rgb), 0.6) !important;
-    backdrop-filter: blur(12px) saturate(1.8) !important;
-}
-
-.bg-glass-dark {
-    background: rgba(var(--atomix-gray-2-rgb), 0.8) !important;
-    backdrop-filter: blur(16px) saturate(1.5) !important;
-}
-
-// Border utilities
-.border-primary {
-    border-color: var(--atomix-primary-6) !important;
-}
-
-.border-profit {
-    border-color: var(--atomix-green-6) !important;
-}
-
-.border-loss {
-    border-color: var(--atomix-red-6) !important;
-}
-
-.border-glass {
-    border: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2) !important;
-}
-
-// Glow effects
-.glow-primary {
-    box-shadow: 0 0 20px rgba(var(--atomix-primary-6-rgb), 0.4) !important;
-}
-
-.glow-profit {
-    box-shadow: 0 0 20px rgba(var(--atomix-green-6-rgb), 0.4) !important;
-}
-
-.glow-loss {
-    box-shadow: 0 0 20px rgba(var(--atomix-red-6-rgb), 0.4) !important;
-}
-
-// Font weight utilities for trading data
-.fw-trading {
-    font-weight: 600 !important;
-    font-variant-numeric: tabular-nums !important;
-}
-
-.fw-price {
-    font-weight: 700 !important;
-    font-variant-numeric: tabular-nums !important;
-}
-
-// Animation utilities
-.animate-price-up {
-    animation: priceUp 0.3s ease-in-out;
-}
-
-.animate-price-down {
-    animation: priceDown 0.3s ease-in-out;
-}
-
-@keyframes priceUp {
-    0% {
-        color: var(--atomix-white);
-    }
-
-    50% {
-        color: var(--atomix-green-6);
-        transform: scale(1.05);
-    }
-
-    100% {
-        color: var(--atomix-green-6);
-        transform: scale(1);
-    }
-}
-
-@keyframes priceDown {
-    0% {
-        color: var(--atomix-white);
-    }
-
-    50% {
-        color: var(--atomix-red-6);
-        transform: scale(1.05);
-    }
-
-    100% {
-        color: var(--atomix-red-6);
-        transform: scale(1);
-    }
-}
-
-// Responsive utilities
-@media (max-width: 768px) {
-    .hide-mobile {
-        display: none !important;
-    }
-}
-
-@media (min-width: 769px) {
-    .hide-desktop {
-        display: none !important;
-    }
-}
-
-// Trading specific layouts
-.trading-grid {
-    display: grid;
-    gap: 1.5rem;
-
-    &-2col {
-        grid-template-columns: 1fr 350px;
-
-        @media (max-width: 1024px) {
-            grid-template-columns: 1fr;
-        }
-    }
-
-    &-3col {
-        grid-template-columns: repeat(3, 1fr);
-
-        @media (max-width: 1024px) {
-            grid-template-columns: 1fr;
-        }
-    }
-}
-
-// Scrollbar styling
-.scrollbar-flash {
-    &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: rgba(var(--atomix-gray-5-rgb), 0.3);
-        border-radius: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: rgba(var(--atomix-primary-6-rgb), 0.5);
-        border-radius: 4px;
-
-        &:hover {
-            background: rgba(var(--atomix-primary-6-rgb), 0.7);
-        }
-    }
-}