@shohojdhara/atomix 0.3.3 → 0.3.4

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

@@ -1,300 +0,0 @@
-/*!
- * Mashroom Theme Rating 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 *;
-@use '../01-settings/settings.config' as *;
-
-// Psychedelic rating animations
-@keyframes rating-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-2px);
-  }
-}
-
-@keyframes rating-glow-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 5px rgba($white, 0.1);
-  }
-  50% {
-    box-shadow:
-      0 0 10px rgba($white, 0.3),
-      0 0 20px rgba(157, 0, 255, 0.5);
-  }
-}
-
-@keyframes rating-star-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 5px $yellow-4;
-  }
-  50% {
-    box-shadow:
-      0 0 10px $yellow-4,
-      0 0 20px rgba(255, 187, 0, 0.8);
-  }
-}
-
-@keyframes rating-hover-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 10px $red-4;
-  }
-  50% {
-    box-shadow:
-      0 0 15px $red-4,
-      0 0 25px rgba(255, 32, 133, 0.8);
-  }
-}
-
-.c-rating {
-  $root: &;
-  // Rating stars container
-  &__stars {
-    position: relative;
-
-    // Add floating animation to stars container
-    @include trippy.float-animation();
-    animation-duration: 4s;
-  }
-
-  // Individual star
-  &__star {
-    position: relative;
-
-    // Add subtle glow to stars
-    @include trippy.trippy-glow(rgba($white, 0.1), 2px);
-
-    // Add pulse animation
-    animation: rating-glow-pulse 2s infinite;
-
-    // Filled star
-    &--filled {
-      color: var(--#{$prefix}rating-star-bg);
-
-      // Add stronger glow to filled stars
-      @include trippy.trippy-glow($yellow-4, 5px);
-
-      // Add color shift animation
-      @include trippy.color-shift();
-
-      // Add pulse animation
-      animation: rating-star-pulse 2s infinite;
-    }
-
-    // Half-filled star
-    &--half {
-      color: var(--#{$prefix}rating-star-half-bg);
-
-      // Add moderate glow to half-filled stars
-      @include trippy.trippy-glow($yellow-6, 3px);
-
-      // Add subtle pulse
-      animation: rating-glow-pulse 3s infinite;
-    }
-
-    // Hover effect
-    &:hover {
-      transform: scale(var(--#{$prefix}rating-star-hover-scale)) rotate(10deg);
-      color: $red-4;
-
-      // Add strong glow on hover
-      @include trippy.trippy-glow($red-4, 10px);
-
-      // Add pulse animation on hover
-      @include trippy.psychedelic-pulse($red-4);
-
-      // Add enhanced pulse animation
-      animation: rating-hover-pulse 1s infinite;
-    }
-
-    // Stars after hovered star
-    &--hover ~ & {
-      transform: scale(0.9) rotate(-5deg);
-      color: rgba($white, 0.1);
-
-      // Reduce glow for non-hovered stars
-      @include trippy.trippy-glow(rgba($white, 0.05), 1px);
-
-      // Add subtle floating effect
-      @include trippy.float-animation();
-      animation-duration: 3s;
-    }
-  }
-
-  // Rating label
-  &__label {
-    font-size: var(--#{$prefix}rating-label-font-size);
-    color: var(--#{$prefix}rating-label-color);
-    font-weight: 500;
-
-    // Add subtle floating effect to label
-    @include trippy.float-animation();
-
-    // Add color shift
-    @include trippy.color-shift();
-  }
-
-  // Rating value display
-  &__value {
-    background: rgba(157, 0, 255, 0.2);
-    padding: 0.25rem 0.5rem;
-    border-radius: 1rem;
-    font-weight: 600;
-    color: $yellow-4;
-
-    // Add psychedelic gradient background using mixin
-    @include gradients.mushroom-cap-gradient();
-
-    // Add glow effect
-    @include trippy.trippy-glow($purple-6, 5px);
-
-    // Add floating animation
-    @include trippy.float-animation();
-    animation-duration: 3s;
-
-    // Add pulse animation
-    @include trippy.psychedelic-pulse($purple-6);
-  }
-
-  // Read-only state
-  &--readonly {
-    .c-rating__star {
-      cursor: default;
-
-      &:hover {
-        transform: none;
-        color: var(--#{$prefix}rating-star-bg);
-        animation: none;
-      }
-    }
-  }
-
-  // Disabled state
-  &--disabled {
-    opacity: 0.6;
-
-    .c-rating__star {
-      cursor: not-allowed;
-      animation: none;
-
-      &:hover {
-        transform: none;
-        color: var(--#{$prefix}rating-star-empty-color);
-      }
-    }
-  }
-
-  // Large size variant
-  &--lg {
-    .c-rating__star {
-      font-size: 2rem;
-    }
-
-    .c-rating__label {
-      font-size: 1rem;
-    }
-  }
-
-  // Small size variant
-  &--sm {
-    .c-rating__star {
-      font-size: 1rem;
-    }
-
-    .c-rating__label {
-      font-size: 0.75rem;
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    .c-rating__star {
-      @include gradients.rainbow-gradient();
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-      background-size: 200% 100%;
-      animation: rainbow-shift 3s linear infinite;
-
-      &--filled {
-        @include gradients.rainbow-gradient();
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-        background-size: 200% 100%;
-        animation: rainbow-shift 2s linear infinite;
-      }
-
-      &--half {
-        @include gradients.rainbow-gradient();
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-        background-size: 200% 100%;
-        animation: rainbow-shift 4s linear infinite;
-      }
-
-      &:hover {
-        animation: rainbow-shift 1s linear infinite;
-        @include trippy.trippy-glow(white, 15px);
-      }
-    }
-
-    .c-rating__value {
-      @include gradients.rainbow-gradient();
-      background-size: 300% 300%;
-      animation: rainbow-shift 4s ease infinite;
-      color: white;
-    }
-  }
-
-  // Glowing variant
-  &--glow {
-    .c-rating__star {
-      @include trippy.trippy-glow($purple-4, 10px);
-      animation: rating-glow-pulse 1s infinite;
-
-      &--filled {
-        @include trippy.trippy-glow($yellow-4, 15px);
-        animation: rating-star-pulse 1s infinite;
-      }
-
-      &:hover {
-        @include trippy.trippy-glow($red-4, 20px);
-        animation: rating-hover-pulse 0.5s infinite;
-      }
-    }
-
-    .c-rating__value {
-      @include trippy.trippy-glow($purple-6, 10px);
-    }
-  }
-
-  // Floating variant
-  &--floating {
-    .c-rating__stars {
-      @include trippy.float-animation();
-      animation-duration: 3s;
-    }
-
-    .c-rating__star {
-      @include trippy.float-animation();
-      animation-duration: 2s;
-    }
-
-    .c-rating__value {
-      @include trippy.float-animation();
-      animation-duration: 4s;
-    }
-  }
-}