@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/styles/06-components/_components.popover.scss

@@ -1,99 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.popover' as *;
-@use '../02-tools/tools.rem' as *;
-
-.c-popover {
-  $root: &;
-
-  --#{$prefix}popover-width: #{rem($popover-max-width)};
-  --#{$prefix}popover-padding-x: #{rem($popover-padding-x)};
-  --#{$prefix}popover-padding-y: #{rem($popover-padding-y)};
-  --#{$prefix}popover-inner-gap-x: #{rem($popover-inner-gap-x)};
-  --#{$prefix}popover-inner-gap-y: #{rem($popover-inner-gap-y)};
-  --#{$prefix}popover-bg: #{$popover-bg};
-  --#{$prefix}popover-border-radius: #{$popover-border-radius};
-  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
-  --#{$prefix}popover-arrow-size: #{rem($popover-arrow-size)};
-  --#{$prefix}popover-arrow-offset: #{rem($popover-arrow-offset)};
-
-  position: fixed;
-  width: var(--#{$prefix}popover-width);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-  z-index: 1000;
-
-  &__content {
-    position: relative;
-    z-index: 2;
-  }
-
-  &__content-inner {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{$prefix}popover-inner-gap-y)
-      var(--#{$prefix}popover-inner-gap-x);
-    padding: var(--#{$prefix}popover-padding-y)
-      var(--#{$prefix}popover-padding-x);
-    background: var(--#{$prefix}popover-bg);
-    border-radius: var(--#{$prefix}popover-border-radius);
-    box-shadow: var(--#{$prefix}popover-box-shadow);
-  }
-
-  &__arrow {
-    position: absolute;
-    width: var(--#{$prefix}popover-arrow-size);
-    height: var(--#{$prefix}popover-arrow-size);
-    background: var(--#{$prefix}popover-bg);
-    box-shadow: var(--#{$prefix}popover-box-shadow);
-    z-index: 1;
-    transform-origin: center;
-  }
-
-  &.is-open {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-  }
-  
-  // Position variants
-  &--top {
-    .c-popover__arrow {
-      bottom: calc(var(--#{$prefix}popover-arrow-offset) * -1);
-      left: 50%;
-      transform: translateX(-50%) rotate(45deg);
-    }
-  }
-  
-  &--bottom {
-    .c-popover__arrow {
-      top: calc(var(--#{$prefix}popover-arrow-offset) * -1);
-      left: 50%;
-      transform: translateX(-50%) rotate(45deg);
-    }
-  }
-  
-  &--left {
-    .c-popover__arrow {
-      top: 50%;
-      right: calc(var(--#{$prefix}popover-arrow-offset) * -1);
-      transform: translateY(-50%) rotate(45deg);
-    }
-  }
-  
-  &--right {
-    .c-popover__arrow {
-      top: 50%;
-      left: calc(var(--#{$prefix}popover-arrow-offset) * -1);
-      transform: translateY(-50%) rotate(45deg);
-    }
-  }
-  
-  // Auto position automatically selects the best position
-  // and will dynamically apply one of the position classes above
-  &--auto {
-    // The actual position class will be added dynamically based on available space
-  }
-}

package/src/styles/06-components/_components.product-review.scss

@@ -1,128 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
-@use '../02-tools/tools.rem' as rem;
-@use '../02-tools/tools.size' as size;
-@use '../02-tools/tools.grid' as *;
-@use '../02-tools/tools.breakpoints' as *;
-
-.c-product-review {
-  $root: &;
-
-  --#{config.$prefix}product-review-padding: #{rem.rem(24px)};
-  --#{config.$prefix}product-review-border-radius: var(--#{config.$prefix}border-radius);
-  --#{config.$prefix}product-review-bg: var(--#{config.$prefix}body-bg);
-  --#{config.$prefix}product-review-border-color: var(--#{config.$prefix}border-color);
-  --#{config.$prefix}product-review-spacing: #{rem.rem(16px)};
-  --#{config.$prefix}product-review-image-size: #{rem.rem(80px)};
-  --#{config.$prefix}product-review-title-font-size: #{rem.rem(20px)};
-  --#{config.$prefix}product-review-label-font-size: #{rem.rem(14px)};
-  --#{config.$prefix}product-review-label-color: var(--#{config.$prefix}text-muted);
-
-  padding: var(--#{config.$prefix}product-review-padding);
-  border-radius: var(--#{config.$prefix}product-review-border-radius);
-  background-color: var(--#{config.$prefix}product-review-bg);
-  border: 1px solid var(--#{config.$prefix}product-review-border-color);
-  width: 100%;
-  max-width: rem.rem(600px);
-  margin: 0 auto;
-
-  &__header {
-    display: flex;
-    align-items: center;
-    margin-bottom: var(--#{config.$prefix}product-review-spacing);
-    gap: var(--#{config.$prefix}product-review-spacing);
-    flex-wrap: wrap;
-  }
-
-  &__title {
-    font-size: var(--#{config.$prefix}product-review-title-font-size);
-    font-weight: 600;
-    margin: 0;
-    flex: 1;
-  }
-
-  &__image-wrapper {
-    width: var(--#{config.$prefix}product-review-image-size);
-    height: var(--#{config.$prefix}product-review-image-size);
-    border-radius: var(--#{config.$prefix}border-radius);
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  &__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  &__form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{config.$prefix}product-review-spacing);
-  }
-
-  &__label {
-    display: block;
-    font-size: var(--#{config.$prefix}product-review-label-font-size);
-    color: var(--#{config.$prefix}product-review-label-color);
-    margin-bottom: rem.rem(8px);
-  }
-
-  &__rating-container {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: var(--#{config.$prefix}product-review-spacing);
-  }
-
-  &__rating-value {
-    margin-top: rem.rem(8px);
-    font-size: var(--#{config.$prefix}product-review-label-font-size);
-  }
-
-  &__comment-container {
-    margin-bottom: var(--#{config.$prefix}product-review-spacing);
-  }
-
-  &__textarea {
-    width: 100%;
-    padding: rem.rem(12px);
-    border: 1px solid var(--#{config.$prefix}product-review-border-color);
-    border-radius: var(--#{config.$prefix}border-radius);
-    background-color: var(--#{config.$prefix}body-bg);
-    color: var(--#{config.$prefix}body-color);
-    font-family: inherit;
-    resize: vertical;
-    
-    &:focus {
-      outline: none;
-      border-color: var(--#{config.$prefix}primary);
-      box-shadow: 0 0 0 3px rgba(var(--#{config.$prefix}primary-rgb), 0.25);
-    }
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  &__success {
-    text-align: center;
-    padding: var(--#{config.$prefix}product-review-spacing) 0;
-    
-    h3 {
-      margin-top: 0;
-      margin-bottom: rem.rem(8px);
-    }
-    
-    p {
-      margin-bottom: var(--#{config.$prefix}product-review-spacing);
-      color: var(--#{config.$prefix}text-muted);
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    --#{config.$prefix}product-review-padding: #{rem.rem(32px)};
-    --#{config.$prefix}product-review-image-size: #{rem.rem(100px)};
-  }
-}

package/src/styles/06-components/_components.progress.scss

@@ -1,46 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
-@use '../01-settings/settings.progress' as progress;
-@use '../02-tools/tools.rem' as rem;
-
-.c-progress{
-
-    --#{config.$prefix}progress-width: #{progress.$progress-width};
-    --#{config.$prefix}progress-percentage: 0%; 
-    --#{config.$prefix}progress-height: #{rem.rem(progress.$progress-height)};
-    --#{config.$prefix}progress-font-size: #{progress.$progress-font-size};
-    --#{config.$prefix}progress-bg: #{progress.$progress-bg};
-    --#{config.$prefix}progress-border-radius: #{progress.$progress-border-radius};
-    --#{config.$prefix}progress-bar-width: var(--#{config.$prefix}progress-percentage);
-    --#{config.$prefix}progress-bar-height: #{progress.$progress-bar-height};
-    --#{config.$prefix}progress-bar-color: #{progress.$progress-bar-color};
-    --#{config.$prefix}progress-bar-bg: #{progress.$progress-bar-bg};
-    --#{config.$prefix}progress-bar-transition: #{progress.$progress-bar-transition};
-    --#{config.$prefix}progress-bar-easing: #{progress.$progress-bar-easing};
-
-    width: 100%;
-    max-width: var(--#{config.$prefix}progress-width);
-    height: var(--#{config.$prefix}progress-bar-height);
-    background-color: var(--#{config.$prefix}progress-bg);
-    border-radius: var(--#{config.$prefix}progress-border-radius);
-    overflow: hidden;
-
-    &__bar{
-        width: var(--#{config.$prefix}progress-bar-width);
-        height: var(--#{config.$prefix}progress-bar-height);
-        color: var(--#{config.$prefix}progress-bar-color);
-        background-color: var(--#{config.$prefix}progress-bar-bg);
-        border-radius: var(--#{config.$prefix}progress-border-radius);
-        transition: var(--#{config.$prefix}progress-bar-transition) var(--#{config.$prefix}progress-bar-easing);
-    }
-
-    @each $color, $value in maps.$theme-colors {
-        &--#{$color} {
-            --#{config.$prefix}progress-bar-bg: var(--#{config.$prefix}#{$color});
-        }
-    }
-}
-
-
-

package/src/styles/06-components/_components.rating.scss

@@ -1,160 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
-@use '../01-settings/settings.rating' as rating;
-@use '../02-tools/tools.rem' as rem;
-@use '../02-tools/tools.size' as size;
-@use '../02-tools/tools.breakpoints' as *;
-@use '../02-tools/tools.grid' as *;
-
-.c-rating {
-  $root: &;
-
-  // CSS Variables for component configuration
-  --#{config.$prefix}rating-star-size: #{rating.$rating-star-size};
-  --#{config.$prefix}rating-star-bg: #{rating.$rating-star-bg};
-  --#{config.$prefix}rating-star-half-bg: #{rating.$rating-star-half-bg};
-  --#{config.$prefix}rating-stars-gap: #{rem.rem(rating.$rating-stars-gap)};
-  --#{config.$prefix}rating-star-empty-color: var(--#{config.$prefix}border-color);
-  --#{config.$prefix}rating-star-hover-scale: 1.1;
-  --#{config.$prefix}rating-star-transition: transform 0.2s ease-in-out;
-  --#{config.$prefix}rating-label-font-size: #{rem.rem(14px)};
-  --#{config.$prefix}rating-label-color: var(--#{config.$prefix}text-muted);
-  --#{config.$prefix}rating-label-margin-bottom: #{rem.rem(8px)};
-  --#{config.$prefix}rating-value-margin-top: #{rem.rem(8px)};
-  --#{config.$prefix}rating-value-font-size: #{rem.rem(14px)};
-
-  // Base styles
-  display: flex;
-  gap: var(--#{config.$prefix}rating-stars-gap);
-  align-items: center;
-  position: relative;
-
-  &[data-readonly="false"] {
-    cursor: pointer;
-
-    #{$root}__star {
-      transition: var(--#{config.$prefix}rating-star-transition);
-
-      &:hover, &:focus {
-        transform: scale(var(--#{config.$prefix}rating-star-hover-scale));
-      }
-      
-      &:focus-visible {
-        outline: 2px solid var(--#{config.$prefix}primary);
-        outline-offset: 2px;
-        border-radius: 2px;
-      }
-    }
-  }
-
-  // Star styles
-  &__star {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      @include size.square(var(--#{config.$prefix}rating-star-size));
-    }
-
-    &--full {
-      #{$root}__star-full {
-        fill: var(--#{config.$prefix}rating-star-bg);
-      }
-    }
-
-    &--half {
-      #{$root}__star-half {
-        display: block;
-      }
-    }
-
-    // Apply theme colors to individual stars
-    @each $color, $value in maps.$theme-colors {
-      &--#{$color} {
-        --#{config.$prefix}rating-star-bg: #{$value};
-      }
-    }
-    
-    // Focused state
-    &--focused {
-      outline: 2px solid var(--#{config.$prefix}primary);
-      outline-offset: 2px;
-      border-radius: 2px;
-    }
-  }
-
-  // Star outline styles (empty star)
-  &__star-outline {
-    stroke: var(--#{config.$prefix}rating-star-bg);
-    fill: var(--#{config.$prefix}rating-star-empty-color);
-    stroke-width: 1px;
-  }
-  
-  // Full star styles
-  &__star-full {
-    fill: var(--#{config.$prefix}rating-star-bg);
-    display: none;
-    
-    #{$root}__star--full & {
-      display: block;
-    }
-  }
-  
-  // Half-star styles
-  &__star-half {
-    fill: var(--#{config.$prefix}rating-star-bg);
-    display: none;
-    
-    #{$root}__star--half & {
-      display: block;
-    }
-  }
-
-  // Label styles
-  &__label {
-    display: block;
-    font-size: var(--#{config.$prefix}rating-label-font-size);
-    color: var(--#{config.$prefix}rating-label-color);
-    margin-bottom: var(--#{config.$prefix}rating-label-margin-bottom);
-  }
-
-  // Value display styles
-  &__value {
-    margin-top: var(--#{config.$prefix}rating-value-margin-top);
-    font-size: var(--#{config.$prefix}rating-value-font-size);
-  }
-
-  // Size variants
-  &--sm {
-    --#{config.$prefix}rating-star-size: #{rating.$rating-star-size-sm};
-    --#{config.$prefix}rating-stars-gap: #{rem.rem(1px)};
-  }
-
-  &--lg {
-    --#{config.$prefix}rating-star-size: #{rating.$rating-star-size-lg};
-    --#{config.$prefix}rating-stars-gap: #{rem.rem(4px)};
-  }
-
-  // Container for vertical layout with label and value
-  &-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  // Apply theme colors to the entire rating component
-  @each $color, $value in maps.$theme-colors {
-    &--#{$color} {
-      --#{config.$prefix}rating-star-bg: #{$value};
-    }
-  }
-
-  // Responsive adjustments
-  @include media-breakpoint-up(md) {
-    &--lg {
-      --#{config.$prefix}rating-stars-gap: #{rem.rem(6px)};
-    }
-  }
-}

package/src/styles/06-components/_components.river.scss

@@ -1,214 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.river' as *;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.size' as *;
-@use '../02-tools/tools.object-fit' as *;
-@use '../02-tools/tools.breakpoints' as *;
-@use '../02-tools/tools.grid' as grid;
-
-
-.c-river {
-  $root: &;
-
-  --#{config.$prefix}river-width: #{$river-width};
-  --#{config.$prefix}river-padding-x: #{rem($river-padding-x)};
-  --#{config.$prefix}river-padding-y: #{rem($river-padding-y)};
-  --#{config.$prefix}river-border-radius: #{$river-border-radius};
-  --#{config.$prefix}river-bg: #{$river-bg};
-  --#{config.$prefix}river-overlay: #{$river-overlay};
-  --#{config.$prefix}river-overlay-opacity: #{$river-overlay-opacity};
-  --#{config.$prefix}river-title-font-size: #{$river-title-font-size};
-  --#{config.$prefix}river-text-font-size: #{$river-text-font-size};
-  --#{config.$prefix}river-title-font-weight: #{$river-title-font-weight};
-  --#{config.$prefix}river-text-font-weight: #{$river-text-font-weight};
-  --#{config.$prefix}river-title-color: #{$river-title-color};
-  --#{config.$prefix}river-text-color: #{$river-text-color};
-  --#{config.$prefix}river-text-margin-top: #{rem($river-text-margin-top)};
-  --#{config.$prefix}river-actions-margin-top: #{rem($river-actions-margin-top)};
-  --#{config.$prefix}river-actions-spacing-x: #{rem($river-actions-spacing-x)};
-  --#{config.$prefix}river-image-border-radius: #{$river-image-border-radius};
-  --#{config.$prefix}river-image-box-shadow: #{$river-image-box-shadow};
-  --#{config.$prefix}river-spacing-inner: #{rem($river-spacing-inner)};
-  --#{config.$prefix}river-content-max-width: #{rem($river-content-max-width)};
-  --#{config.$prefix}river-breakout-title-width: #{rem($river-breakout-title-width)};
-  --#{config.$prefix}river-breakout-text-width: #{rem($river-breakout-text-width)};
-  --#{config.$prefix}river-content-width: var(--river-content-width, #{rem($river-content-max-width)});
-
-  position: relative;
-  width: 100%;
-  max-width: var(--#{config.$prefix}river-width);
-  padding: var(--#{config.$prefix}river-padding-y) var(--#{config.$prefix}river-padding-x);
-  border-radius: var(--#{config.$prefix}river-border-radius);
-  background-color: var(--#{config.$prefix}river-bg);
-
-  &__bg {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    z-index: 0;
-    border-radius: var(--#{config.$prefix}river-border-radius);
-  }
-
-  &__bg-image {
-    @include square(100%);
-    @include object-fit(cover);
-  }
-
-  &__overlay {
-    position: absolute;
-    inset: 0;
-    background: var(--#{config.$prefix}river-overlay);
-    opacity: var(--#{config.$prefix}river-overlay-opacity);
-    border-radius: var(--#{config.$prefix}river-border-radius);
-  }
-
-  &__container {
-    position: relative;
-    z-index: 1;
-  }
-
-  &__row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--#{config.$prefix}river-spacing-inner);
-
-    @include media-breakpoint-down(md) {
-      gap: calc(var(--#{config.$prefix}river-spacing-inner) / 2.6);
-    }
-  }
-
-  &__content {
-    flex: 1;
-    width: 100%;
-    max-width: var(--#{config.$prefix}river-content-width);
-
-    @include media-breakpoint-down(md) {
-      width: 100%;
-      flex: auto;
-    }
-  }
-
-  &__content-col {
-    width: 100%;
-
-    &--title {
-      max-width: var(--#{config.$prefix}river-breakout-title-width);
-    }
-
-    &--text {
-      max-width: var(--#{config.$prefix}river-breakout-text-width);
-    }
-  }
-
-  &__visual {
-    flex: 1;
-
-    @include media-breakpoint-down(md) {
-      width: 100%;
-      flex: auto;
-    }
-  }
-
-  &__title {
-    color: var(--#{config.$prefix}river-title-color);
-    font-size: calc(2.15625rem + 1.5vw);
-    font-weight: var(--#{config.$prefix}river-title-font-weight);
-    letter-spacing: -1px;
-
-    @include media-breakpoint-up(md) {
-      font-size: var(--#{config.$prefix}river-title-font-size);
-      line-height: 1.2;
-    }
-  }
-
-  &__text {
-    color: var(--#{config.$prefix}river-text-color);
-    font-size: var(--#{config.$prefix}river-text-font-size);
-    font-weight: var(--#{config.$prefix}river-text-font-weight);
-    margin-top: var(--#{config.$prefix}river-text-margin-top);
-  }
-
-  &__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--#{config.$prefix}river-actions-spacing-x);
-    margin-top: var(--#{config.$prefix}river-actions-margin-top);
-  }
-
-  &__image-wrapper {
-    border-radius: var(--#{config.$prefix}river-image-border-radius);
-    box-shadow: var(--#{config.$prefix}river-image-box-shadow);
-    overflow: hidden;
-  }
-
-  &__image {
-    max-width: none;
-    @include square(100%);
-    @include object-fit(cover);
-    will-change: transform;
-  }
-
-  // When the river has a background image, we need to adjust text colors for readability
-  &__bg ~ &__container {
-    #{$root}__title,
-    #{$root}__text {
-      color: #fff; // White text on dark backgrounds for better contrast
-    }
-  }
-
-  &--center {
-    #{$root} {
-      &__row {
-        flex-direction: column;
-        gap: calc(var(--#{config.$prefix}river-spacing-inner) / 2);
-      }
-
-      &__content {
-        text-align: center;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      &__actions {
-        justify-content: center;
-      }
-    }
-  }
-
-  &--reverse {
-    #{$root} {
-      &__row {
-        @include media-breakpoint-up(md) {
-          flex-direction: row-reverse;
-        }
-      }
-    }
-  }
-
-  &--breakout {
-    max-width: 100%;
-    border-radius: 0;
-
-    #{$root} {
-      &__bg,
-      &__overlay {
-        border-radius: 0;
-      }
-
-      &__row {
-        flex-direction: column;
-      }
-
-      &__content {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-
-        @include media-breakpoint-down(md) {
-          flex-wrap: wrap;
-        }
-      }
-    }
-  }
-}