@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/themes/mashroom/06-components/_components.data-table.scss

@@ -1,354 +0,0 @@
-/*!
- * Mashroom Theme Data Table Component
- * Psychedelic mushroom-inspired table styling with trippy animated rows
- */
-
-// 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 *;
-
-@keyframes table-row-float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-@keyframes table-glow-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 5px rgba(157, 0, 255, 0.3);
-  }
-  50% {
-    box-shadow:
-      0 0 20px rgba(157, 0, 255, 0.6),
-      0 0 30px rgba(255, 32, 133, 0.4);
-  }
-}
-
-@keyframes psychedelic-border-shift {
-  0% {
-    border-color: rgba(157, 0, 255, 0.3);
-  }
-  25% {
-    border-color: rgba(255, 32, 133, 0.4);
-  }
-  50% {
-    border-color: rgba(255, 187, 0, 0.5);
-  }
-  75% {
-    border-color: rgba(0, 255, 157, 0.4);
-  }
-  100% {
-    border-color: rgba(157, 0, 255, 0.3);
-  }
-}
-
-.c-data-table {
-  $root: &;
-
-  // Base table styling
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(10px);
-  border-radius: 1rem;
-  overflow: hidden;
-  border: 1px solid rgba(157, 0, 255, 0.2);
-
-  // Trippy glow effect
-  @include trippy.trippy-glow(rgba(157, 0, 255, 0.3), 15px);
-  @include trippy.color-shift();
-
-  // Add floating animation to entire table
-  @include trippy.float-animation();
-  animation-duration: 8s;
-
-  // Psychedelic border animation
-  animation: psychedelic-border-shift 4s infinite linear;
-
-  // Header styling
-  &__header {
-    background: linear-gradient(135deg, rgba(157, 0, 255, 0.2), rgba(255, 32, 133, 0.2));
-    @include gradients.rainbow-gradient();
-    background-size: 300% 300%;
-    animation: rainbow-shift 6s ease infinite;
-    position: relative;
-
-    // Add a subtle overlay for better text readability
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.3);
-      pointer-events: none;
-    }
-
-    &-cell {
-      padding: 1rem 1.5rem;
-      text-align: left;
-      font-weight: 600;
-      color: rgba(255, 255, 255, 0.9);
-      border-bottom: 2px solid rgba(157, 0, 255, 0.3);
-      position: relative;
-      z-index: 1; // Above the gradient overlay
-
-      // Add psychedelic pulse to header cells
-      @include trippy.psychedelic-pulse(rgba(157, 0, 255, 0.5));
-
-      // Sort indicator
-      &--sortable {
-        cursor: pointer;
-        transition: all 0.3s ease;
-        @include trippy.float-animation();
-        animation-duration: 4s;
-
-        &:hover {
-          background: rgba(157, 0, 255, 0.1);
-          color: $white;
-          @include gradients.psychedelic-linear-gradient(
-            rgba(157, 0, 255, 0.2),
-            rgba(255, 32, 133, 0.2)
-          );
-          transform: scale(1.02);
-          @include trippy.trippy-glow($yellow-4, 10px);
-        }
-
-        &::after {
-          content: '↕';
-          position: absolute;
-          right: 1rem;
-          opacity: 0.5;
-          transition: all 0.3s ease;
-
-          // Add psychedelic color to sort indicator
-          color: $purple-4;
-          text-shadow: 0 0 5px rgba(157, 0, 255, 0.7);
-        }
-
-        &--asc::after {
-          content: '↑';
-          opacity: 1;
-          color: $yellow-4;
-          text-shadow: 0 0 10px rgba(255, 187, 0, 0.8);
-        }
-
-        &--desc::after {
-          content: '↓';
-          opacity: 1;
-          color: $red-4;
-          text-shadow: 0 0 10px rgba(255, 32, 133, 0.8);
-        }
-      }
-    }
-  }
-
-  // Body styling
-  &__body {
-    // Add subtle animation to the entire body
-    animation: table-glow-pulse 3s infinite;
-  }
-
-  // Row styling
-  &__row {
-    transition: all 0.3s ease;
-
-    // Add floating animation to rows
-    &:nth-child(even) {
-      @include trippy.float-animation();
-      animation-duration: 6s;
-    }
-
-    &:nth-child(odd) {
-      @include trippy.float-animation();
-      animation-duration: 7s;
-      animation-delay: 0.5s;
-    }
-
-    // Hover effect for rows
-    &:hover {
-      background: rgba(157, 0, 255, 0.1);
-      transform: scale(1.01);
-      @include gradients.psychedelic-linear-gradient(
-        rgba(157, 0, 255, 0.1),
-        rgba(157, 0, 255, 0.05)
-      );
-      @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 10px);
-
-      // Add color shift on hover
-      @include trippy.color-shift();
-      animation-duration: 2s;
-    }
-
-    // Striped rows
-    &:nth-child(even) {
-      background: rgba(30, 10, 50, 0.3);
-    }
-
-    // Animated variant
-    &--animated {
-      animation: table-row-float 3s ease-in-out infinite;
-
-      &:nth-child(2) {
-        animation-delay: 0.2s;
-      }
-
-      &:nth-child(3) {
-        animation-delay: 0.4s;
-      }
-    }
-
-    // Highlighted row
-    &--highlight {
-      background: linear-gradient(90deg, rgba(255, 187, 0, 0.2), rgba(255, 32, 133, 0.2));
-      @include trippy.psychedelic-pulse($yellow-4);
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        pointer-events: none;
-        @include gradients.rainbow-gradient();
-        background-size: 300% 300%;
-        animation: rainbow-shift 3s ease infinite;
-        opacity: 0.2;
-        z-index: -1;
-      }
-    }
-  }
-
-  // Cell styling
-  &__cell {
-    padding: 1rem 1.5rem;
-    color: rgba(255, 255, 255, 0.8);
-    border-bottom: 1px solid rgba(157, 0, 255, 0.1);
-
-    // Add subtle glow to cells
-    @include trippy.trippy-glow(rgba(255, 255, 255, 0.05), 2px);
-
-    // Add color shift to cells
-    @include trippy.color-shift();
-    animation-duration: 20s;
-
-    // Numeric cells
-    &--numeric {
-      text-align: right;
-      font-variant-numeric: tabular-nums;
-      color: $yellow-3;
-    }
-
-    // Action cells
-    &--actions {
-      text-align: right;
-
-      .c-btn {
-        margin-left: 0.5rem;
-        @include trippy.float-animation();
-        animation-duration: 4s;
-      }
-    }
-  }
-
-  // Footer styling
-  &__footer {
-    background: rgba(15, 5, 30, 0.7);
-    border-top: 1px solid rgba(157, 0, 255, 0.2);
-
-    // Add psychedelic gradient to footer
-    @include gradients.psychedelic-linear-gradient(rgba(157, 0, 255, 0.1), rgba(15, 5, 30, 0.7));
-
-    // Add glow effect
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.2), 8px);
-  }
-
-  // Pagination styling
-  &__pagination {
-    padding: 1rem 1.5rem;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 0.5rem;
-
-    // Add psychedelic background
-    background: rgba(25, 15, 40, 0.5);
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    border: 2px solid transparent;
-    background-clip: padding-box;
-    border: double 2px transparent;
-    border-radius: 1rem;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: -1;
-      margin: -2px;
-      border-radius: inherit;
-      @include gradients.rainbow-gradient();
-      background-size: 400% 400%;
-      animation: rainbow-shift 4s ease infinite;
-    }
-
-    #{$root}__header {
-      @include gradients.rainbow-gradient();
-      background-size: 400% 400%;
-      animation: rainbow-shift 5s ease infinite;
-
-      &-cell {
-        @include trippy.psychedelic-pulse($yellow-4);
-      }
-    }
-
-    #{$root}__row {
-      &:hover {
-        @include gradients.rainbow-gradient();
-        background-size: 200% 200%;
-        animation: rainbow-shift 2s linear infinite;
-        opacity: 0.9;
-      }
-    }
-  }
-
-  // Compact variant
-  &--compact {
-    #{$root}__cell,
-    #{$root}__header-cell {
-      padding: 0.5rem 1rem;
-    }
-  }
-
-  // Bordered variant
-  &--bordered {
-    border: 2px solid rgba(157, 0, 255, 0.3);
-
-    #{$root}__cell,
-    #{$root}__header-cell {
-      border-right: 1px solid rgba(157, 0, 255, 0.2);
-
-      &:last-child {
-        border-right: none;
-      }
-    }
-
-    // Animate border colors
-    animation: psychedelic-border-shift 3s infinite linear;
-  }
-}

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

@@ -1,349 +0,0 @@
-/*!
- * Mashroom Theme DatePicker 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 *;
-
-.c-datepicker {
-  $root: &;
-
-  // Base datepicker styling
-  position: relative;
-  display: inline-block;
-
-  // Calendar container
-  &__calendar {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 1000;
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(15px);
-    border: 1px solid rgba(157, 0, 255, 0.3);
-    border-radius: 1.5rem;
-    padding: 1.5rem;
-    min-width: 300px;
-
-    // Trippy glow effect
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 20px);
-
-    // Entrance animation
-    animation: calendarPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  }
-
-  @keyframes calendarPop {
-    from {
-      opacity: 0;
-      transform: scale(0.8) rotate(-5deg);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1) rotate(0deg);
-    }
-  }
-
-  // Header
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  // Navigation buttons
-  &__nav {
-    display: flex;
-    gap: 0.5rem;
-
-    &-btn {
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(157, 0, 255, 0.3);
-      color: rgba(255, 255, 255, 0.8);
-      padding: 0.5rem;
-      border-radius: 50%;
-      cursor: pointer;
-      transition: all 0.3s ease;
-
-      &:hover {
-        background: rgba(157, 0, 255, 0.2);
-        color: $white;
-        @include trippy.trippy-glow($yellow-4, 8px);
-      }
-    }
-  }
-
-  // Current month/year display
-  &__current {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: $white;
-    background: linear-gradient(45deg, $purple-4, $yellow-4);
-    background-size: 200% 200%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    animation: monthColorShift 3s ease-in-out infinite;
-  }
-
-  @keyframes monthColorShift {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  // Weekday headers
-  &__weekdays {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 0.25rem;
-    margin-bottom: 1rem;
-  }
-
-  &__weekday {
-    text-align: center;
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.7);
-    padding: 0.5rem;
-  }
-
-  // Days grid
-  &__days {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 0.25rem;
-  }
-
-  // Day cells
-  &__day {
-    aspect-ratio: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.875rem;
-    color: rgba(255, 255, 255, 0.8);
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    position: relative;
-
-    &:hover {
-      background: rgba(157, 0, 255, 0.2);
-      color: $white;
-      transform: scale(1.1);
-      @include trippy.trippy-glow($yellow-4, 8px);
-    }
-
-    &--today {
-      background: rgba(255, 187, 0, 0.2);
-      color: $yellow-4;
-      font-weight: 600;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: -2px;
-        left: -2px;
-        right: -2px;
-        bottom: -2px;
-        border: 1px solid $yellow-4;
-        border-radius: 50%;
-        animation: todayGlow 2s ease-in-out infinite;
-      }
-    }
-
-    @keyframes todayGlow {
-      0%,
-      100% {
-        opacity: 0.5;
-      }
-      50% {
-        opacity: 1;
-      }
-    }
-
-    &--selected {
-      background: linear-gradient(45deg, $purple-4, $red-4);
-      color: $white;
-      font-weight: 600;
-      animation: selectedPulse 1.5s ease-in-out infinite;
-    }
-
-    @keyframes selectedPulse {
-      0%,
-      100% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.05);
-      }
-    }
-
-    &--disabled {
-      color: rgba(255, 255, 255, 0.3);
-      cursor: not-allowed;
-
-      &:hover {
-        background: none;
-        transform: none;
-        @include trippy.trippy-glow(none, 0);
-      }
-    }
-
-    &--other-month {
-      color: rgba(255, 255, 255, 0.4);
-    }
-
-    &--weekend {
-      color: rgba(255, 187, 0, 0.8);
-    }
-  }
-
-  // Time picker
-  &__time {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-
-    &-label {
-      color: rgba(255, 255, 255, 0.7);
-      font-size: 0.875rem;
-    }
-
-    &-input {
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(157, 0, 255, 0.3);
-      color: rgba(255, 255, 255, 0.9);
-      padding: 0.5rem;
-      border-radius: 0.5rem;
-      font-size: 0.875rem;
-
-      &:focus {
-        outline: none;
-        border-color: $yellow-4;
-        @include trippy.trippy-glow($yellow-4, 5px);
-      }
-    }
-  }
-
-  // Input field
-  &__input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background: rgba(255, 255, 255, 0.1);
-    border: 2px solid rgba(157, 0, 255, 0.3);
-    border-radius: 1rem;
-    color: rgba(255, 255, 255, 0.9);
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      border-color: rgba(157, 0, 255, 0.5);
-    }
-
-    &:focus {
-      outline: none;
-      border-color: $yellow-4;
-      @include trippy.trippy-glow($yellow-4, 8px);
-    }
-
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.6);
-    }
-  }
-
-  // Range picker
-  &--range {
-    #{$root}__calendar {
-      min-width: 600px;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-    }
-  }
-
-  // Inline variant
-  &--inline {
-    #{$root}__calendar {
-      position: static;
-      box-shadow: none;
-      animation: none;
-    }
-  }
-
-  // Sizes
-  &--sm {
-    #{$root}__calendar {
-      padding: 1rem;
-      min-width: 250px;
-
-      #{$root}__day {
-        font-size: 0.75rem;
-      }
-    }
-  }
-
-  &--lg {
-    #{$root}__calendar {
-      padding: 2rem;
-      min-width: 350px;
-
-      #{$root}__day {
-        font-size: 1rem;
-      }
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    #{$root}__calendar {
-      background: linear-gradient(
-        135deg,
-        rgba(157, 0, 255, 0.1) 0%,
-        rgba(255, 32, 133, 0.1) 50%,
-        rgba(0, 255, 136, 0.1) 100%
-      );
-      border-color: rgba(157, 0, 255, 0.4);
-    }
-
-    #{$root}__day {
-      &:hover {
-        background: linear-gradient(45deg, rgba(157, 0, 255, 0.3), rgba(255, 187, 0, 0.3));
-      }
-    }
-  }
-
-  // Responsive adjustments
-  @media (max-width: 768px) {
-    #{$root}__calendar {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 90%;
-      max-width: 350px;
-    }
-
-    &--range {
-      #{$root}__calendar {
-        grid-template-columns: 1fr;
-        min-width: auto;
-      }
-    }
-  }
-}