@shohojdhara/atomix 0.3.3 → 0.3.4

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

@@ -1,433 +0,0 @@
-/*!
- * Mashroom Theme Form Group Component
- * Trippy form layout styling with psychedelic mushroom 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-form-group {
-  $root: &;
-
-  // Base form group container
-  position: relative;
-  margin-bottom: 1.5rem;
-  padding: 1.5rem;
-  border-radius: 16px;
-  background: rgba(0, 0, 0, 0.6);
-  border: 1px solid rgba(157, 0, 255, 0.3);
-  transition: all 0.3s ease;
-
-  // Mushroom cap shape
-  border-radius: 16px 16px 8px 8px;
-
-  // Animated background glow
-  &::before {
-    content: '';
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    right: -1px;
-    bottom: -1px;
-    background: linear-gradient(45deg, $purple-4, $yellow-4, $red-4, $green-4);
-    border-radius: 16px 16px 8px 8px;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-
-  &:hover::before {
-    opacity: 0.3;
-    animation: glowPulse 2s ease-in-out infinite;
-  }
-
-  @keyframes glowPulse {
-    0%,
-    100% {
-      opacity: 0.3;
-    }
-    50% {
-      opacity: 0.6;
-    }
-  }
-
-  // Form label
-  &__label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    color: $white;
-    font-size: 1rem;
-    transition: all 0.3s ease;
-
-    // Required indicator
-    &.is-required::after {
-      content: ' *';
-      color: $red-4;
-      animation: requiredPulse 2s ease-in-out infinite;
-    }
-
-    @keyframes requiredPulse {
-      0%,
-      100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.5;
-      }
-    }
-  }
-
-  // Form input wrapper
-  &__input-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    // Icon positioning
-    .c-icon {
-      position: absolute;
-      left: 1rem;
-      color: rgba(157, 0, 255, 0.7);
-      z-index: 2;
-      transition: all 0.3s ease;
-    }
-
-    // Input with icon
-    .c-input {
-      padding-left: 2.5rem;
-    }
-  }
-
-  // Form input styling
-  &__input,
-  .c-input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(157, 0, 255, 0.3);
-    border-radius: 8px;
-    color: $white;
-    font-size: 1rem;
-    transition: all 0.3s ease;
-
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.5);
-    }
-
-    &:focus {
-      outline: none;
-      border-color: $purple-4;
-      background: rgba(255, 255, 255, 0.15);
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 8px);
-      transform: translateY(-2px);
-    }
-
-    &:hover {
-      border-color: rgba(157, 0, 255, 0.5);
-    }
-  }
-
-  // Textarea specific styling
-  &__textarea {
-    min-height: 100px;
-    resize: vertical;
-    font-family: inherit;
-  }
-
-  // Select styling
-  &__select {
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239d00ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right 0.5rem center;
-    background-repeat: no-repeat;
-    background-size: 1.5em 1.5em;
-    padding-right: 2.5rem;
-  }
-
-  // Checkbox and radio styling
-  &__checkbox,
-  &__radio {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.5rem;
-    cursor: pointer;
-
-    input[type='checkbox'],
-    input[type='radio'] {
-      margin-right: 0.5rem;
-      accent-color: $purple-4;
-      width: 1.2rem;
-      height: 1.2rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-
-      &:hover {
-        filter: drop-shadow(0 0 5px rgba(157, 0, 255, 0.5));
-      }
-
-      &:checked {
-        animation: checkPulse 0.5s ease;
-      }
-    }
-
-    @keyframes checkPulse {
-      0% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.2);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-  }
-
-  // Help text
-  &__help {
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
-    color: rgba(255, 255, 255, 0.7);
-    transition: all 0.3s ease;
-
-    &.is-error {
-      color: $red-4;
-      animation: errorShake 0.5s ease;
-    }
-
-    @keyframes errorShake {
-      0%,
-      100% {
-        transform: translateX(0);
-      }
-      25% {
-        transform: translateX(-5px);
-      }
-      75% {
-        transform: translateX(5px);
-      }
-    }
-  }
-
-  // Error state
-  &.is-error {
-    border-color: $red-4;
-    @include trippy.trippy-glow(rgba(255, 0, 0, 0.3), 8px);
-    animation: errorGlow 2s ease-in-out infinite;
-
-    #{$root}__input {
-      border-color: $red-4;
-      background: rgba(255, 0, 0, 0.1);
-    }
-
-    @keyframes errorGlow {
-      0%,
-      100% {
-        box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
-      }
-      50% {
-        box-shadow: 0 0 16px rgba(255, 0, 0, 0.5);
-      }
-    }
-  }
-
-  // Success state
-  &.is-success {
-    border-color: $green-4;
-    @include trippy.trippy-glow(rgba(0, 255, 0, 0.3), 8px);
-
-    #{$root}__input {
-      border-color: $green-4;
-      background: rgba(0, 255, 0, 0.1);
-    }
-  }
-
-  // Focus state
-  &.is-focused {
-    border-color: $purple-4;
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 12px);
-    transform: translateY(-2px);
-  }
-
-  // Floating label variant
-  &--floating {
-    #{$root}__label {
-      position: absolute;
-      top: 1.5rem;
-      left: 1.5rem;
-      background: rgba(0, 0, 0, 0.8);
-      padding: 0 0.5rem;
-      transition: all 0.3s ease;
-      pointer-events: none;
-      z-index: 2;
-    }
-
-    #{$root}__input:focus + #{$root}__label,
-    #{$root}__input:not(:placeholder-shown) + #{$root}__label {
-      top: 0.75rem;
-      font-size: 0.75rem;
-      color: $purple-4;
-    }
-  }
-
-  // Inline variant
-  &--inline {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-
-    #{$root}__label {
-      margin-bottom: 0;
-      white-space: nowrap;
-    }
-
-    #{$root}__input {
-      flex: 1;
-    }
-  }
-
-  // Size variants
-  &--sm {
-    padding: 1rem;
-
-    #{$root}__input {
-      padding: 0.5rem 0.75rem;
-      font-size: 0.875rem;
-    }
-
-    #{$root}__label {
-      font-size: 0.875rem;
-    }
-  }
-
-  &--lg {
-    padding: 2rem;
-
-    #{$root}__input {
-      padding: 1rem 1.25rem;
-      font-size: 1.125rem;
-    }
-
-    #{$root}__label {
-      font-size: 1.125rem;
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    background: linear-gradient(135deg, rgba(157, 0, 255, 0.1), rgba(255, 187, 0, 0.1));
-    background-size: 200% 200%;
-    animation: psychedelicShift 6s ease infinite;
-
-    #{$root}__input {
-      background: rgba(0, 0, 0, 0.2);
-      border-color: rgba(255, 255, 255, 0.3);
-    }
-
-    @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), 12px);
-
-    &:hover {
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.4), 16px);
-    }
-  }
-
-  // Dark variant
-  &--dark {
-    background: rgba(0, 0, 0, 0.9);
-    border-color: rgba(157, 0, 255, 0.5);
-  }
-
-  // Light variant
-  &--light {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(157, 0, 255, 0.2);
-
-    #{$root}__label {
-      color: $black;
-    }
-
-    #{$root}__input {
-      background: rgba(255, 255, 255, 0.1);
-      color: $black;
-      border-color: rgba(157, 0, 255, 0.2);
-
-      &::placeholder {
-        color: rgba(0, 0, 0, 0.5);
-      }
-    }
-  }
-
-  // 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(-60px) translateX(15px) scale(1);
-      opacity: 0;
-    }
-  }
-
-  // Responsive
-  @media (max-width: 768px) {
-    &--inline {
-      flex-direction: column;
-      align-items: stretch;
-
-      #{$root}__label {
-        margin-bottom: 0.5rem;
-      }
-    }
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    #{$root}__input {
-      padding: 0.75rem 1rem;
-    }
-  }
-}