@shohojdhara/atomix 0.3.3 → 0.3.5

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

@@ -1,400 +0,0 @@
-/*!
- * Mashroom Theme Pagination Component
- * Psychedelic mushroom-inspired page indicators with trippy 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-pagination {
-  $root: &;
-
-  // Base pagination styling
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 1rem;
-
-  // Navigation buttons
-  &__nav {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  &__btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 40px;
-    height: 40px;
-    padding: 0.5rem;
-    background: rgba(157, 0, 255, 0.1);
-    border: 1px solid rgba(157, 0, 255, 0.3);
-    border-radius: 50%;
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    // Mushroom cap shape
-    border-radius: 50% 50% 40% 40%;
-
-    &:hover {
-      background: rgba(157, 0, 255, 0.2);
-      color: $white;
-      transform: translateY(-2px);
-      @include trippy.trippy-glow($yellow-4, 8px);
-    }
-
-    &--active {
-      background: linear-gradient(45deg, $purple-4, $yellow-4);
-      color: $white;
-      border-color: transparent;
-      animation: pageGlow 2s ease-in-out infinite;
-      transform: scale(1.1);
-    }
-
-    &--disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.1);
-        color: rgba(255, 255, 255, 0.8);
-        transform: none;
-        @include trippy.trippy-glow(none, 0);
-      }
-    }
-
-    &--ellipsis {
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.5);
-      cursor: default;
-
-      &:hover {
-        background: none;
-        color: rgba(255, 255, 255, 0.5);
-        transform: none;
-        @include trippy.trippy-glow(none, 0);
-      }
-    }
-  }
-
-  @keyframes pageGlow {
-    0%,
-    100% {
-      box-shadow: 0 0 10px rgba(157, 0, 255, 0.5);
-    }
-    50% {
-      box-shadow:
-        0 0 20px rgba(157, 0, 255, 0.8),
-        0 0 30px rgba(255, 187, 0, 0.5);
-    }
-  }
-
-  // Page numbers
-  &__pages {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  &__page {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    background: rgba(157, 0, 255, 0.1);
-    border: 1px solid rgba(157, 0, 255, 0.3);
-    border-radius: 50%;
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    // Mushroom cap shape
-    border-radius: 50% 50% 40% 40%;
-
-    &:hover {
-      background: rgba(157, 0, 255, 0.2);
-      color: $white;
-      transform: translateY(-2px) scale(1.05);
-      @include trippy.trippy-glow($yellow-4, 8px);
-    }
-
-    &--active {
-      background: linear-gradient(45deg, $purple-4, $yellow-4);
-      color: $white;
-      border-color: transparent;
-      animation: activePagePulse 2s ease-in-out infinite;
-      transform: scale(1.15);
-    }
-
-    &--disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.1);
-        color: rgba(255, 255, 255, 0.8);
-        transform: none;
-        @include trippy.trippy-glow(none, 0);
-      }
-    }
-  }
-
-  @keyframes activePagePulse {
-    0%,
-    100% {
-      transform: scale(1.15);
-      box-shadow: 0 0 15px rgba(157, 0, 255, 0.7);
-    }
-    50% {
-      transform: scale(1.2);
-      box-shadow:
-        0 0 25px rgba(157, 0, 255, 1),
-        0 0 35px rgba(255, 187, 0, 0.7);
-    }
-  }
-
-  // Floating spore particles
-  &__spores {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      width: 3px;
-      height: 3px;
-      background: radial-gradient(circle, $yellow-4, transparent);
-      border-radius: 50%;
-      animation: sporeFloat 3s ease-in-out infinite;
-    }
-
-    &::before {
-      top: 30%;
-      left: 20%;
-      animation-delay: 0s;
-    }
-
-    &::after {
-      top: 60%;
-      right: 25%;
-      animation-delay: 1.5s;
-    }
-  }
-
-  @keyframes sporeFloat {
-    0%,
-    100% {
-      transform: translateY(0) scale(1);
-      opacity: 0.6;
-    }
-    50% {
-      transform: translateY(-8px) scale(1.5);
-      opacity: 1;
-    }
-  }
-
-  // Info display
-  &__info {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin: 0 1rem;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.875rem;
-  }
-
-  // Size variants
-  &--sm {
-    gap: 0.25rem;
-
-    #{$root}__btn,
-    #{$root}__page {
-      width: 32px;
-      height: 32px;
-      font-size: 0.75rem;
-    }
-  }
-
-  &--lg {
-    gap: 0.75rem;
-
-    #{$root}__btn,
-    #{$root}__page {
-      width: 48px;
-      height: 48px;
-      font-size: 1rem;
-    }
-  }
-
-  // Layout variants
-  &--center {
-    justify-content: center;
-  }
-
-  &--left {
-    justify-content: flex-start;
-  }
-
-  &--right {
-    justify-content: flex-end;
-  }
-
-  &--space-between {
-    justify-content: space-between;
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    #{$root}__btn,
-    #{$root}__page {
-      background: linear-gradient(
-        135deg,
-        rgba(157, 0, 255, 0.1),
-        rgba(255, 32, 133, 0.1),
-        rgba(0, 255, 136, 0.1)
-      );
-      border-color: rgba(157, 0, 255, 0.4);
-
-      &:hover {
-        background: linear-gradient(
-          135deg,
-          rgba(157, 0, 255, 0.2),
-          rgba(255, 32, 133, 0.2),
-          rgba(0, 255, 136, 0.2)
-        );
-      }
-
-      &--active {
-        background: linear-gradient(135deg, $purple-4, $red-4, $yellow-4, $green-4);
-        background-size: 400% 400%;
-        animation: psychedelicShift 3s ease-in-out infinite;
-      }
-    }
-  }
-
-  @keyframes psychedelicShift {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  // Glow variant
-  &--glow {
-    #{$root}__btn,
-    #{$root}__page {
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 8px);
-
-      &:hover {
-        @include trippy.trippy-glow($yellow-4, 12px);
-      }
-
-      &--active {
-        @include trippy.trippy-glow($yellow-4, 15px);
-      }
-    }
-  }
-
-  // 3D variant
-  &--3d {
-    #{$root}__btn,
-    #{$root}__page {
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-
-      &:hover {
-        box-shadow:
-          0 4px 8px rgba(0, 0, 0, 0.4),
-          0 0 15px rgba(157, 0, 255, 0.5);
-      }
-    }
-  }
-
-  // Jump to page
-  &__jump {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-left: 1rem;
-
-    &-input {
-      width: 60px;
-      padding: 0.25rem 0.5rem;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(157, 0, 255, 0.3);
-      border-radius: 0.5rem;
-      color: rgba(255, 255, 255, 0.9);
-      text-align: center;
-      font-size: 0.875rem;
-
-      &:focus {
-        outline: none;
-        border-color: $yellow-4;
-        @include trippy.trippy-glow($yellow-4, 5px);
-      }
-    }
-
-    &-btn {
-      padding: 0.25rem 0.75rem;
-      background: rgba(157, 0, 255, 0.2);
-      border: 1px solid rgba(157, 0, 255, 0.3);
-      border-radius: 0.5rem;
-      color: rgba(255, 255, 255, 0.9);
-      font-size: 0.75rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.3);
-        @include trippy.trippy-glow($yellow-4, 5px);
-      }
-    }
-  }
-
-  // Responsive adjustments
-  @media (max-width: 768px) {
-    flex-wrap: wrap;
-    gap: 0.5rem;
-
-    #{$root}__info {
-      order: -1;
-      width: 100%;
-      justify-content: center;
-      margin: 0 0 1rem 0;
-    }
-
-    &--sm {
-      #{$root}__btn,
-      #{$root}__page {
-        width: 28px;
-        height: 28px;
-        font-size: 0.7rem;
-      }
-    }
-  }
-
-  @media (max-width: 480px) {
-    #{$root}__jump {
-      display: none;
-    }
-  }
-}