@shohojdhara/atomix 0.3.3 → 0.3.5

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

@@ -1,455 +0,0 @@
-/*!
- * Mashroom Theme Select Component
- * Mushroom dropdown 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-select {
-  $root: &;
-
-  // Base select container
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  max-width: 300px;
-
-  // Select trigger button
-  &__trigger {
-    width: 100%;
-    padding: 1rem 1.5rem;
-    background: rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(157, 0, 255, 0.3);
-    border-radius: 20px 20px 10px 10px; // Mushroom cap shape
-    color: $white;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &:hover {
-      background: rgba(157, 0, 255, 0.2);
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.3), 8px);
-    }
-
-    &:focus {
-      outline: none;
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.5), 12px);
-    }
-
-    // Arrow indicator
-    &::after {
-      content: '';
-      width: 0;
-      height: 0;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-top: 8px solid rgba(255, 255, 255, 0.7);
-      transition: transform 0.3s ease;
-    }
-  }
-
-  // Dropdown menu
-  &__dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    margin-top: 0.5rem;
-    background: rgba(0, 0, 0, 0.9);
-    border: 1px solid rgba(157, 0, 255, 0.3);
-    border-radius: 10px 10px 20px 20px; // Inverted mushroom shape
-    backdrop-filter: blur(10px);
-    max-height: 200px;
-    overflow-y: auto;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-10px);
-    transition: all 0.3s ease;
-    z-index: 1000;
-
-    // Custom scrollbar
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(157, 0, 255, 0.5);
-      border-radius: 3px;
-
-      &:hover {
-        background: rgba(255, 187, 0, 0.5);
-      }
-    }
-  }
-
-  // Dropdown items
-  &__option {
-    padding: 0.75rem 1.5rem;
-    color: rgba(255, 255, 255, 0.9);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-bottom: 1px solid rgba(157, 0, 255, 0.1);
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:hover {
-      background: rgba(157, 0, 255, 0.2);
-      color: $white;
-      padding-left: 2rem;
-    }
-
-    &:focus {
-      background: rgba(255, 187, 0, 0.2);
-      outline: none;
-    }
-
-    &--selected {
-      background: rgba(157, 0, 255, 0.3);
-      color: $white;
-      font-weight: 600;
-
-      &::before {
-        content: '✓';
-        margin-right: 0.5rem;
-        color: $yellow-4;
-      }
-    }
-
-    &--disabled {
-      color: rgba(255, 255, 255, 0.3);
-      cursor: not-allowed;
-
-      &:hover {
-        background: transparent;
-        padding-left: 1.5rem;
-      }
-    }
-  }
-
-  // Option groups
-  &__group {
-    margin-bottom: 0.5rem;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__group-label {
-    padding: 0.5rem 1.5rem;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  // Search input
-  &__search {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    background: rgba(157, 0, 255, 0.1);
-    color: $white;
-    font-size: 0.875rem;
-    border-bottom: 1px solid rgba(157, 0, 255, 0.2);
-
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.5);
-    }
-
-    &:focus {
-      outline: none;
-      background: rgba(157, 0, 255, 0.2);
-    }
-  }
-
-  // Multi-select tags
-  &__tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    padding: 0.5rem 0.5rem 0.25rem;
-  }
-
-  &__tag {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.25rem 0.75rem;
-    background: rgba(157, 0, 255, 0.3);
-    color: $white;
-    border-radius: 16px;
-    font-size: 0.875rem;
-    animation: tagPulse 2s ease-in-out infinite;
-
-    @keyframes tagPulse {
-      0%,
-      100% {
-        opacity: 0.8;
-      }
-      50% {
-        opacity: 1;
-      }
-    }
-  }
-
-  &__tag-remove {
-    background: none;
-    border: none;
-    color: rgba(255, 255, 255, 0.7);
-    cursor: pointer;
-    font-size: 1rem;
-    line-height: 1;
-
-    &:hover {
-      color: $white;
-    }
-  }
-
-  // Active/open state
-  &--open {
-    #{$root}__trigger {
-      background: rgba(157, 0, 255, 0.3);
-      border-radius: 20px 20px 0 0;
-
-      &::after {
-        transform: rotate(180deg);
-      }
-    }
-
-    #{$root}__dropdown {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-  }
-
-  // Disabled state
-  &--disabled {
-    #{$root}__trigger {
-      background: rgba(0, 0, 0, 0.3);
-      color: rgba(255, 255, 255, 0.3);
-      cursor: not-allowed;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.3);
-        box-shadow: none;
-      }
-    }
-  }
-
-  // Size variants
-  &--sm {
-    #{$root}__trigger {
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-      border-radius: 15px 15px 8px 8px;
-    }
-
-    #{$root}__option {
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-    }
-
-    #{$root}__search {
-      padding: 0.5rem 1rem;
-    }
-  }
-
-  &--lg {
-    #{$root}__trigger {
-      padding: 1.25rem 2rem;
-      font-size: 1.125rem;
-      border-radius: 25px 25px 12px 12px;
-    }
-
-    #{$root}__option {
-      padding: 1rem 2rem;
-      font-size: 1rem;
-    }
-
-    #{$root}__search {
-      padding: 1rem 2rem;
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    #{$root}__trigger {
-      background: linear-gradient(135deg, $purple-4, $yellow-4, $red-4, $green-4);
-      background-size: 400% 400%;
-      animation: psychedelicShift 10s ease infinite;
-    }
-
-    #{$root}__dropdown {
-      background: linear-gradient(135deg, rgba(157, 0, 255, 0.9), rgba(255, 187, 0, 0.9));
-    }
-
-    @keyframes psychedelicShift {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-  }
-
-  // Glow variant
-  &--glow {
-    #{$root}__trigger {
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 20px);
-
-      &:hover {
-        @include trippy.trippy-glow(rgba(255, 187, 0, 0.6), 30px);
-      }
-    }
-
-    #{$root}__dropdown {
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.2), 15px);
-    }
-  }
-
-  // Dark variant
-  &--dark {
-    #{$root}__trigger {
-      background: rgba(0, 0, 0, 0.9);
-      border-color: rgba(157, 0, 255, 0.5);
-    }
-
-    #{$root}__dropdown {
-      background: rgba(0, 0, 0, 0.95);
-      border-color: rgba(157, 0, 255, 0.5);
-    }
-  }
-
-  // Light variant
-  &--light {
-    #{$root}__trigger {
-      background: rgba(255, 255, 255, 0.9);
-      border-color: rgba(157, 0, 255, 0.2);
-      color: $black;
-
-      &::after {
-        border-top-color: $black;
-      }
-    }
-
-    #{$root}__dropdown {
-      background: rgba(255, 255, 255, 0.95);
-      border-color: rgba(157, 0, 255, 0.2);
-    }
-
-    #{$root}__option {
-      color: $black;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.1);
-      }
-
-      &--selected {
-        background: rgba(157, 0, 255, 0.2);
-      }
-    }
-
-    #{$root}__search {
-      background: rgba(157, 0, 255, 0.05);
-      color: $black;
-
-      &::placeholder {
-        color: rgba(0, 0, 0, 0.5);
-      }
-
-      &:focus {
-        background: rgba(157, 0, 255, 0.1);
-      }
-    }
-
-    #{$root}__tag {
-      background: rgba(157, 0, 255, 0.2);
-      color: $black;
-    }
-  }
-
-  // Floating spore particles
-  &__spore {
-    position: absolute;
-    width: 3px;
-    height: 3px;
-    background: radial-gradient(circle, $yellow-4, transparent);
-    border-radius: 50%;
-    animation: sporeFloat 8s ease-in-out infinite;
-    pointer-events: none;
-
-    &:nth-child(odd) {
-      animation-delay: -2s;
-    }
-
-    &:nth-child(even) {
-      animation-delay: -4s;
-    }
-  }
-
-  @keyframes sporeFloat {
-    0% {
-      transform: translateY(0) translateX(0) scale(0);
-      opacity: 0;
-    }
-    10% {
-      opacity: 1;
-    }
-    90% {
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(-50px) translateX(10px) scale(1);
-      opacity: 0;
-    }
-  }
-
-  // Responsive
-  @media (max-width: 768px) {
-    max-width: 100%;
-
-    #{$root}__dropdown {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      right: auto;
-      width: 90%;
-      max-width: 320px;
-      transform: translate(-50%, -50%) scale(0.9);
-      margin-top: 0;
-    }
-
-    &--open #{$root}__dropdown {
-      transform: translate(-50%, -50%) scale(1);
-    }
-  }
-
-  @media (max-width: 480px) {
-    #{$root}__trigger {
-      padding: 0.75rem 1rem;
-    }
-
-    #{$root}__option {
-      padding: 0.75rem 1rem;
-    }
-  }
-}