@shohojdhara/atomix 0.3.3 → 0.3.4

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

@@ -1,350 +0,0 @@
-/*!
- * Mashroom Theme Steps 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 *;
-
-// Psychedelic steps animations
-@keyframes steps-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-@keyframes steps-glow-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 5px rgba(157, 0, 255, 0.3);
-  }
-  50% {
-    box-shadow:
-      0 0 10px rgba(157, 0, 255, 0.6),
-      0 0 20px rgba(255, 32, 133, 0.4);
-  }
-}
-
-@keyframes steps-connector-pulse {
-  0%,
-  100% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes steps-title-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
-  }
-  50% {
-    box-shadow:
-      0 0 6px rgba(255, 255, 255, 0.6),
-      0 0 12px rgba(157, 0, 255, 0.4);
-  }
-}
-
-.c-steps {
-  $root: &;
-
-  // Add psychedelic background
-  @include gradients.rainbow-gradient();
-  background-size: 300% 300%;
-
-  // Add floating animation
-  @include trippy.float-animation();
-
-  // Add color shift effect
-  @include trippy.color-shift();
-
-  // Add pulse animation
-  animation:
-    rainbow-shift 4s ease infinite,
-    steps-glow-pulse 2s infinite;
-
-  padding: 2rem;
-  border-radius: 1rem;
-  position: relative;
-  overflow: hidden;
-
-  // Step item
-  &__item {
-    display: flex;
-    align-items: flex-start;
-    position: relative;
-    padding-bottom: 2rem;
-
-    // Connector line between steps
-    &::after {
-      content: '';
-      position: absolute;
-      top: 2.5rem;
-      left: 1.25rem;
-      bottom: -1rem;
-      width: 2px;
-      background: rgba($white, 0.2);
-      z-index: 1;
-      animation: steps-connector-pulse 2s infinite;
-    }
-
-    // Last item should not have connector
-    &:last-child::after {
-      display: none;
-    }
-  }
-
-  // Step icon container
-  &__icon {
-    position: relative;
-    z-index: 2;
-
-    // Add glow effect
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 5px);
-
-    // Add floating animation to icon
-    @include trippy.float-animation();
-    animation-duration: 3s;
-
-    // Add pulse animation
-    animation: steps-glow-pulse 2s infinite;
-  }
-
-  // Step number
-  &__number {
-    color: $white;
-    font-weight: bold;
-    font-size: 1.1rem;
-
-    // Add floating effect
-    @include trippy.float-animation();
-    animation-duration: 4s;
-  }
-
-  // Step content
-  &__content {
-    flex: 1;
-  }
-
-  // Step title
-  &__title {
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    color: $white;
-    font-size: 1.2rem;
-
-    // Add glow effect to title
-    @include trippy.trippy-glow(rgba(255, 255, 255, 0.3), 3px);
-
-    // Add pulse animation
-    animation: steps-title-pulse 2s infinite;
-  }
-
-  // Step description
-  &__description {
-    color: rgba($white, 0.8);
-    line-height: 1.5;
-
-    // Add subtle floating effect
-    @include trippy.float-animation();
-    animation-duration: 5s;
-  }
-
-  // Completed step
-  &__item--completed {
-    #{$root}__icon {
-      background: linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff);
-      background-size: 300% 300%;
-
-      // Add stronger glow for completed steps
-      @include trippy.trippy-glow($yellow-4, 10px);
-
-      // Add rainbow animation
-      animation: rainbow-shift 3s linear infinite;
-    }
-
-    #{$root}__number {
-      color: $yellow-4;
-    }
-
-    #{$root}__title {
-      color: $yellow-4;
-
-      // Add stronger glow to title
-      @include trippy.trippy-glow($yellow-4, 5px);
-
-      // Add pulse animation
-      animation: steps-title-pulse 1s infinite;
-    }
-
-    // Change connector for completed steps
-    &::after {
-      background: linear-gradient(to bottom, $yellow-4, rgba($yellow-4, 0.3));
-      animation: steps-connector-pulse 1s infinite;
-    }
-  }
-
-  // Active step
-  &__item--active {
-    #{$root}__icon {
-      background: rgba(255, 255, 255, 0.2);
-
-      // Add pulse animation for active step
-      @include trippy.psychedelic-pulse($red-4);
-
-      // Add floating effect
-      @include trippy.float-animation();
-      animation-duration: 2s;
-    }
-
-    #{$root}__number {
-      color: $red-4;
-    }
-
-    #{$root}__title {
-      color: $red-4;
-
-      // Add stronger glow to title
-      @include trippy.trippy-glow($red-4, 5px);
-
-      // Add pulse animation
-      animation: steps-title-pulse 1s infinite;
-    }
-  }
-
-  // Disabled step
-  &__item--disabled {
-    opacity: 0.5;
-
-    #{$root}__icon {
-      animation: none;
-    }
-  }
-
-  // Horizontal variant
-  &--horizontal {
-    display: flex;
-    align-items: flex-start;
-
-    #{$root}__item {
-      flex: 1;
-      text-align: center;
-      padding-bottom: 0;
-      padding-right: 1rem;
-
-      &::after {
-        top: 1.25rem;
-        left: calc(50% + 2rem);
-        right: calc(-50% + 2rem);
-        bottom: auto;
-        width: auto;
-        height: 2px;
-      }
-
-      &:last-child::after {
-        display: none;
-      }
-    }
-
-    #{$root}__icon {
-      margin-right: 0;
-      margin-bottom: 1rem;
-    }
-
-    #{$root}__content {
-      margin-right: 1rem;
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    @include gradients.rainbow-gradient();
-    background-size: 400% 400%;
-    animation: rainbow-shift 2s ease infinite;
-    border: 1px solid transparent;
-
-    #{$root}__item {
-      &::after {
-        @include gradients.rainbow-gradient();
-        background-size: 100% 100%;
-        animation: rainbow-shift 3s linear infinite;
-      }
-    }
-
-    #{$root}__icon {
-      @include gradients.rainbow-gradient();
-      background-size: 200% 200%;
-      animation: rainbow-shift 3s linear infinite;
-      border-radius: 50%;
-    }
-
-    #{$root}__number {
-      @include gradients.rainbow-gradient();
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-      background-size: 200% 100%;
-      animation: rainbow-shift 3s linear infinite;
-    }
-
-    #{$root}__title {
-      @include gradients.rainbow-gradient();
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-      background-size: 200% 100%;
-      animation: rainbow-shift 3s linear infinite;
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    @include trippy.trippy-glow($purple-4, 20px);
-    animation: steps-glow-pulse 1s infinite;
-
-    #{$root}__icon {
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.5), 10px);
-
-      &--completed {
-        @include trippy.trippy-glow($yellow-4, 15px);
-      }
-
-      &--active {
-        @include trippy.trippy-glow($red-4, 15px);
-      }
-    }
-
-    #{$root}__title {
-      @include trippy.trippy-glow(rgba(255, 255, 255, 0.2), 5px);
-    }
-  }
-
-  // Floating variant
-  &--floating {
-    @include trippy.float-animation();
-    animation-duration: 5s;
-
-    #{$root}__item {
-      @include trippy.float-animation();
-      animation-duration: 3s;
-    }
-
-    #{$root}__icon {
-      @include trippy.float-animation();
-      animation-duration: 2s;
-    }
-
-    #{$root}__content {
-      @include trippy.float-animation();
-      animation-duration: 4s;
-    }
-  }
-}

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

@@ -1,269 +0,0 @@
-/*!
- * Mashroom Theme Tabs 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 *;
-
-// Psychedelic tabs animations
-@keyframes tabs-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-@keyframes tabs-glow-pulse {
-  0%,
-  100% {
-    box-shadow: 0 4px 20px rgba(157, 0, 255, 0.3);
-  }
-  50% {
-    box-shadow:
-      0 4px 20px rgba(157, 0, 255, 0.5),
-      0 0 30px rgba(255, 32, 133, 0.4),
-      0 0 50px rgba(255, 187, 0, 0.3);
-  }
-}
-
-@keyframes tabs-button-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 5px rgba($white, 0.1);
-  }
-  50% {
-    box-shadow:
-      0 0 10px rgba($white, 0.2),
-      0 0 20px rgba(157, 0, 255, 0.3);
-  }
-}
-
-@keyframes tabs-active-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 15px $yellow-4;
-  }
-  50% {
-    box-shadow:
-      0 0 20px $yellow-4,
-      0 0 30px rgba(255, 187, 0, 0.8);
-  }
-}
-
-@keyframes tabs-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.c-tabs {
-  $root: &;
-
-  // Add psychedelic background
-  @include gradients.rainbow-gradient();
-  background-size: 300% 300%;
-
-  // Add floating animation for a magical effect
-  @include trippy.float-animation();
-
-  // Add color shift for extra psychedelic effect
-  @include trippy.color-shift();
-
-  // Add pulse animation
-  animation:
-    rainbow-shift 4s ease infinite,
-    tabs-glow-pulse 2s infinite;
-
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(157, 0, 255, 0.3);
-
-  // Tab navigation
-  &__nav {
-    display: flex;
-    border-bottom: 2px solid rgba($white, 0.2);
-    background: rgba(157, 0, 255, 0.2);
-    backdrop-filter: blur(5px);
-
-    // Add floating effect to nav
-    @include trippy.float-animation();
-    animation-duration: 3s;
-  }
-
-  // Tab button
-  &__btn {
-    padding: 1rem 1.5rem;
-    color: rgba($white, 0.8);
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    position: relative;
-    font-weight: 600;
-    transition: all 0.3s ease;
-
-    // Add glow effect
-    @include trippy.trippy-glow(rgba($white, 0.1), 5px);
-
-    // Add pulse animation
-    animation: tabs-button-pulse 2s infinite;
-
-    // Hover state
-    &:hover {
-      color: $white;
-      @include trippy.trippy-glow($red-4, 10px);
-      transform: translateY(-2px) rotate(1deg);
-      animation: tabs-button-pulse 0.5s infinite;
-    }
-
-    // Active state
-    &--active {
-      color: $yellow-4;
-      background: rgba(255, 187, 0, 0.15);
-
-      // Add stronger glow effect to active tab
-      @include trippy.trippy-glow($yellow-4, 15px);
-
-      // Add pulse animation
-      animation: tabs-active-pulse 2s infinite;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        left: 0;
-        right: 0;
-        height: 3px;
-        background: $yellow-4;
-        background: linear-gradient(90deg, #9d00ff, #ff2085);
-        border-radius: 3px;
-        animation: tabs-active-pulse 2s infinite;
-      }
-    }
-
-    // Disabled state
-    &:disabled {
-      color: rgba($white, 0.4);
-      cursor: not-allowed;
-      animation: none;
-      @include trippy.trippy-glow(rgba($white, 0.05), 2px);
-    }
-  }
-
-  // Tab content
-  &__content {
-    padding: 1.5rem;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    min-height: 200px;
-
-    // Add subtle pulse effect to content
-    @include trippy.psychedelic-pulse(rgba(157, 0, 255, 0.1));
-
-    // Add floating effect
-    @include trippy.float-animation();
-    animation-duration: 5s;
-  }
-
-  // Tab panel (hidden/visible)
-  &__panel {
-    display: none;
-
-    &--active {
-      display: block;
-
-      // Add fade-in animation when panel becomes active
-      animation: tabs-fade-in 0.5s ease;
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    @include gradients.rainbow-gradient();
-    background-size: 400% 400%;
-    animation: rainbow-shift 2s ease infinite;
-    border: 1px solid transparent;
-
-    #{$root}__btn {
-      @include gradients.rainbow-gradient();
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-      background-size: 200% 100%;
-      animation: rainbow-shift 3s linear infinite;
-
-      &:hover {
-        animation: rainbow-shift 1s linear infinite;
-        @include trippy.trippy-glow(white, 15px);
-      }
-
-      &--active {
-        @include gradients.rainbow-gradient();
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-        background-size: 200% 100%;
-        animation: rainbow-shift 2s linear infinite;
-
-        &::after {
-          @include gradients.rainbow-gradient();
-          background-size: 200% 100%;
-          animation: rainbow-shift 2s linear infinite;
-        }
-      }
-    }
-
-    #{$root}__content {
-      @include gradients.rainbow-gradient();
-      background-size: 300% 300%;
-      background-clip: padding-box;
-      animation: rainbow-shift 4s ease infinite;
-      opacity: 0.9;
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    @include trippy.trippy-glow($purple-4, 25px);
-    animation: tabs-glow-pulse 1s infinite;
-
-    #{$root}__btn {
-      @include trippy.trippy-glow(rgba($white, 0.1), 10px);
-
-      &:hover {
-        @include trippy.trippy-glow($red-4, 15px);
-      }
-
-      &--active {
-        @include trippy.trippy-glow($yellow-4, 20px);
-        animation: tabs-active-pulse 1s infinite;
-      }
-    }
-  }
-
-  // Floating variant
-  &--floating {
-    @include trippy.float-animation();
-    animation-duration: 4s;
-
-    #{$root}__nav {
-      @include trippy.float-animation();
-      animation-duration: 2s;
-    }
-
-    #{$root}__content {
-      @include trippy.float-animation();
-      animation-duration: 6s;
-    }
-  }
-}