@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/themes/mashroom/06-components/_components.list-group.scss

@@ -1,456 +0,0 @@
-/*!
- * Mashroom Theme List Group Component
- * Mushroom-inspired list styling with psychedelic effects
- */
-
-// Import required tools and settings
-@use '../02-tools/tools.trippy-effects' as trippy;
-@use '../02-tools/tools.psychedelic-gradients' as gradients;
-@use '../01-settings/settings.colors' as *;
-
-.c-list-group {
-  $root: &;
-
-  // Base list group container
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.6);
-  border: 1px solid rgba(157, 0, 255, 0.3);
-  overflow: hidden;
-
-  // Mushroom cap shape
-  border-radius: 12px 12px 6px 6px;
-
-  // Animated background particles
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-      radial-gradient(circle at 25% 25%, rgba(255, 187, 0, 0.1) 0%, transparent 40%),
-      radial-gradient(circle at 75% 75%, rgba(157, 0, 255, 0.1) 0%, transparent 40%);
-    animation: backgroundShift 10s ease-in-out infinite;
-    pointer-events: none;
-    z-index: 0;
-  }
-
-  @keyframes backgroundShift {
-    0%,
-    100% {
-      opacity: 0.3;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.6;
-      transform: scale(1.05);
-    }
-  }
-
-  // Individual list items
-  &__item {
-    position: relative;
-    padding: 1rem 1.5rem;
-    background: rgba(255, 255, 255, 0.05);
-    border-bottom: 1px solid rgba(157, 0, 255, 0.2);
-    transition: all 0.3s ease;
-    cursor: pointer;
-    z-index: 1;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    // Hover effects
-    &:hover {
-      background: rgba(157, 0, 255, 0.1);
-      transform: translateX(4px);
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.3), 6px);
-    }
-
-    // Active state
-    &.is-active {
-      background: linear-gradient(135deg, rgba(157, 0, 255, 0.2), rgba(255, 187, 0, 0.2));
-      border-left: 4px solid $purple-4;
-      animation: activePulse 2s ease-in-out infinite;
-    }
-
-    @keyframes activePulse {
-      0%,
-      100% {
-        border-left-color: $purple-4;
-        transform: translateX(4px);
-      }
-      50% {
-        border-left-color: $yellow-4;
-        transform: translateX(6px);
-      }
-    }
-
-    // Disabled state
-    &.is-disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      transform: none;
-      @include trippy.trippy-glow(none, 0);
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.05);
-        transform: none;
-      }
-    }
-  }
-
-  // Content within list items
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  // Icon styling
-  &__icon {
-    flex-shrink: 0;
-    width: 24px;
-    height: 24px;
-    color: rgba(157, 0, 255, 0.8);
-    transition: all 0.3s ease;
-
-    .c-list-group__item:hover & {
-      color: $yellow-4;
-      transform: scale(1.1);
-    }
-  }
-
-  // Text content
-  &__text {
-    flex: 1;
-
-    .c-list-group__item:hover & {
-      color: $white;
-    }
-  }
-
-  // Primary text
-  &__title {
-    font-weight: 600;
-    color: $white;
-    margin-bottom: 0.25rem;
-    transition: all 0.3s ease;
-  }
-
-  // Secondary text
-  &__subtitle {
-    font-size: 0.875rem;
-    color: rgba(255, 255, 255, 0.7);
-    transition: all 0.3s ease;
-  }
-
-  // Action buttons
-  &__action {
-    flex-shrink: 0;
-    padding: 0.25rem 0.5rem;
-    background: transparent;
-    border: 1px solid rgba(157, 0, 255, 0.3);
-    border-radius: 4px;
-    color: rgba(157, 0, 255, 0.8);
-    font-size: 0.75rem;
-    transition: all 0.3s ease;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(157, 0, 255, 0.2);
-      color: $white;
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.4), 4px);
-    }
-  }
-
-  // Badge styling
-  &__badge {
-    flex-shrink: 0;
-    padding: 0.25rem 0.5rem;
-    background: linear-gradient(135deg, $purple-4, $yellow-4);
-    border-radius: 12px;
-    font-size: 0.75rem;
-    color: $white;
-    font-weight: 600;
-    animation: badgeGlow 3s ease-in-out infinite;
-
-    @keyframes badgeGlow {
-      0%,
-      100% {
-        box-shadow: 0 0 5px rgba(157, 0, 255, 0.5);
-      }
-      50% {
-        box-shadow: 0 0 10px rgba(255, 187, 0, 0.5);
-      }
-    }
-  }
-
-  // Numbered variant
-  &--numbered {
-    counter-reset: list-counter;
-
-    #{$root}__item {
-      counter-increment: list-counter;
-      padding-left: 3rem;
-
-      &::before {
-        content: counter(list-counter);
-        position: absolute;
-        left: 1rem;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 24px;
-        height: 24px;
-        background: linear-gradient(135deg, $purple-4, $yellow-4);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 0.75rem;
-        font-weight: bold;
-        color: $white;
-        animation: numberPulse 2s ease-in-out infinite;
-      }
-
-      @keyframes numberPulse {
-        0%,
-        100% {
-          transform: translateY(-50%) scale(1);
-        }
-        50% {
-          transform: translateY(-50%) scale(1.1);
-        }
-      }
-    }
-  }
-
-  // Horizontal variant
-  &--horizontal {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 0;
-
-    #{$root}__item {
-      flex: 1;
-      min-width: 120px;
-      border-bottom: none;
-      border-right: 1px solid rgba(157, 0, 255, 0.2);
-
-      &:last-child {
-        border-right: none;
-      }
-
-      &:hover {
-        transform: translateY(-2px);
-      }
-
-      &.is-active {
-        border-left: none;
-        border-top: 4px solid $purple-4;
-        animation: horizontalActivePulse 2s ease-in-out infinite;
-      }
-
-      @keyframes horizontalActivePulse {
-        0%,
-        100% {
-          border-top-color: $purple-4;
-          transform: translateY(-2px);
-        }
-        50% {
-          border-top-color: $yellow-4;
-          transform: translateY(-4px);
-        }
-      }
-    }
-  }
-
-  // Flush variant (no borders)
-  &--flush {
-    border: none;
-    background: transparent;
-
-    #{$root}__item {
-      background: transparent;
-      border: none;
-      border-radius: 8px;
-      margin-bottom: 0.5rem;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.1);
-      }
-    }
-  }
-
-  // Size variants
-  &--sm {
-    #{$root}__item {
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-    }
-
-    #{$root}__icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    #{$root}__badge {
-      font-size: 0.625rem;
-    }
-  }
-
-  &--lg {
-    #{$root}__item {
-      padding: 1.5rem 2rem;
-      font-size: 1.125rem;
-    }
-
-    #{$root}__icon {
-      width: 28px;
-      height: 28px;
-    }
-
-    #{$root}__badge {
-      font-size: 0.875rem;
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    background: linear-gradient(135deg, rgba(157, 0, 255, 0.1), rgba(255, 187, 0, 0.1));
-    background-size: 300% 300%;
-    animation: psychedelicShift 8s ease infinite;
-
-    #{$root}__item {
-      background: rgba(0, 0, 0, 0.2);
-      border-color: rgba(255, 255, 255, 0.2);
-    }
-
-    @keyframes psychedelicShift {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-  }
-
-  // Glow variant
-  &--glow {
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 15px);
-
-    &:hover {
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.4), 20px);
-    }
-  }
-
-  // Dark variant
-  &--dark {
-    background: rgba(0, 0, 0, 0.8);
-    border-color: rgba(157, 0, 255, 0.5);
-  }
-
-  // Light variant
-  &--light {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(157, 0, 255, 0.2);
-
-    #{$root}__title {
-      color: $black;
-    }
-
-    #{$root}__subtitle {
-      color: rgba(0, 0, 0, 0.7);
-    }
-  }
-
-  // Floating spore particles
-  &__spore {
-    position: absolute;
-    width: 3px;
-    height: 3px;
-    background: radial-gradient(circle, $yellow-4, transparent);
-    border-radius: 50%;
-    animation: sporeFloat 10s ease-in-out infinite;
-    pointer-events: none;
-
-    &:nth-child(odd) {
-      animation-delay: -3s;
-    }
-
-    &:nth-child(even) {
-      animation-delay: -6s;
-    }
-  }
-
-  @keyframes sporeFloat {
-    0% {
-      transform: translateY(0) translateX(0) scale(0);
-      opacity: 0;
-    }
-    10% {
-      opacity: 1;
-    }
-    90% {
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(-70px) translateX(15px) scale(1);
-      opacity: 0;
-    }
-  }
-
-  // Responsive
-  @media (max-width: 768px) {
-    &--horizontal {
-      flex-direction: column;
-
-      #{$root}__item {
-        border-right: none;
-        border-bottom: 1px solid rgba(157, 0, 255, 0.2);
-
-        &:last-child {
-          border-bottom: none;
-        }
-
-        &:hover {
-          transform: translateX(4px);
-        }
-
-        &.is-active {
-          border-top: none;
-          border-left: 4px solid $purple-4;
-          animation: activePulse 2s ease-in-out infinite;
-        }
-      }
-    }
-  }
-
-  @media (max-width: 480px) {
-    #{$root}__item {
-      padding: 0.75rem 1rem;
-      font-size: 0.875rem;
-    }
-
-    #{$root}__icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    #{$root}__content {
-      gap: 0.75rem;
-    }
-  }
-}

package/src/themes/mashroom/06-components/_components.list.scss

@@ -1,145 +0,0 @@
-/*!
- * Mashroom Theme List Component
- * Psychedelic mushroom-inspired theme with trippy visuals
- */
-
-// Import required tools and settings
-@use '../02-tools/tools.trippy-effects' as trippy;
-@use '../02-tools/tools.psychedelic-gradients' as gradients;
-@use '../01-settings/settings.colors' as *;
-
-.c-list {
-  $root: &;
-
-  // Add psychedelic background
-  background: rgba(25, 15, 40, 0.7);
-
-  // Add floating animation
-  @include trippy.float-animation();
-
-  // Add color shift effect
-  @include trippy.color-shift();
-
-  padding: 1rem;
-  border-radius: 0.5rem;
-  list-style: none;
-
-  // Add psychedelic border
-  border: 1px solid transparent;
-  background:
-    linear-gradient(25deg, rgba(25, 15, 40, 0.7), rgba(25, 15, 40, 0.7)) padding-box,
-    linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff) border-box;
-
-  // List item
-  &__item {
-    padding: 0.75rem 1rem;
-    border-bottom: 1px solid rgba($white, 0.1);
-    display: flex;
-    align-items: center;
-    transition: all 0.3s ease;
-
-    // Add subtle glow
-    @include trippy.trippy-glow(rgba(255, 255, 255, 0.05), 2px);
-
-    // Hover state
-    &:hover {
-      background: rgba(157, 0, 255, 0.1);
-      transform: translateX(5px);
-
-      // Add stronger glow on hover
-      @include trippy.trippy-glow($red-4, 5px);
-    }
-
-    // Last item should not have border
-    &:last-child {
-      border-bottom: none;
-    }
-
-    // Active item
-    &--active {
-      background: rgba(255, 187, 0, 0.15);
-
-      // Add stronger glow for active items
-      @include trippy.trippy-glow($yellow-4, 8px);
-    }
-
-    // Disabled item
-    &--disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      animation: none;
-
-      &:hover {
-        background: transparent;
-        transform: none;
-      }
-    }
-  }
-
-  // List item icon
-  &__icon {
-    margin-right: 0.75rem;
-    flex-shrink: 0;
-
-    // Add glow effect to icons
-    @include trippy.trippy-glow(rgba(255, 255, 255, 0.3), 3px);
-  }
-
-  // List item content
-  &__content {
-    flex: 1;
-    color: rgba($white, 0.9);
-  }
-
-  // List item actions
-  &__actions {
-    margin-left: 0.75rem;
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  // Action button
-  &__action {
-    background: rgba(157, 0, 255, 0.2);
-    border: none;
-    color: $white;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    // Add glow effect
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 3px);
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.2);
-      transform: scale(1.1);
-
-      // Add stronger glow on hover
-      @include trippy.trippy-glow($red-4, 5px);
-    }
-  }
-
-  // Bordered variant
-  &--bordered {
-    border: 2px solid transparent;
-    background:
-      linear-gradient(25deg, rgba(25, 15, 40, 0.7), rgba(25, 15, 40, 0.7)) padding-box,
-      linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff) border-box;
-  }
-
-  // Striped variant
-  &--striped {
-    #{$root}__item:nth-child(even) {
-      background: rgba(157, 0, 255, 0.05);
-    }
-
-    #{$root}__item:hover {
-      background: rgba(157, 0, 255, 0.15);
-    }
-  }
-}