@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,99 @@
+@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

@@ -0,0 +1,128 @@
+@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

@@ -0,0 +1,43 @@
+@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

@@ -0,0 +1,161 @@
+@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

@@ -0,0 +1,216 @@
+@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;
+        }
+      }
+    }
+  }
+}