@trilogy-ds/styles 0.0.1-alpha-prompt

package/framework/src/components/_popover.scss

@@ -0,0 +1,340 @@
+@mixin position-top {
+  top: auto;
+  bottom: 100%;
+  left: 50%;
+  right: auto;
+  transform: translate(-50%, 2.5px);
+
+  &::before {
+    bottom: auto;
+    right: auto;
+    top: 100%;
+    left: 50%;
+    transform: rotate(-45deg);
+  }
+}
+
+@mixin position-right {
+  top: auto;
+  bottom: 50%;
+  left: 100%;
+  right: auto;
+  transform: translate(7px, 50%);
+
+  // flèche sur le contour de la popover
+  &::before {
+    top: 50%;
+    bottom: auto;
+    left: 0;
+    right: auto;
+    transform: rotate(45deg);
+  }
+}
+
+@mixin position-bottom {
+  top: 100%;
+  bottom: auto;
+  left: 50%;
+  right: auto;
+  transform: translate(-50%, 7px);
+
+  // flèche sur le contour de la popover
+  &::before {
+    top: 0;
+    bottom: auto;
+    right: auto;
+    left: 50%;
+    transform: rotate(135deg);
+  }
+}
+
+@mixin position-left {
+  top: auto;
+  bottom: 50%;
+  left: auto;
+  right: 100%;
+  transform: translate(-7px, 50%);
+
+  // flèche sur le contour de la popover
+  &::before {
+    top: 50%;
+    bottom: auto;
+    left: 100%;
+    right: auto;
+    transform: rotate(-135deg);
+  }
+}
+
+.popover {
+  position: relative;
+  display: inline-flex;
+
+  .popover-content {
+    @include position-top();
+
+    background-color: getColor('font');
+    border-radius: var(--radius-small);
+    box-shadow: $shadow;
+    color: getColor('background');
+    display: inline-block;
+    font-size: 12px;
+    visibility: hidden;
+    padding: $spacing-2;
+    font-weight: 500;
+    position: absolute;
+    text-align: center;
+    max-width: 210px;
+    width: max-content;
+    z-index: zindex('popover');
+
+    ul {
+      padding-left: 14px;
+    }
+
+    // dessine la flèche sur le contour de la popover
+    &::before {
+      content: '';
+      border-color: transparent;
+      border-bottom-color: getColor('font');
+      border-left-color: getColor('font');
+      border-style: solid;
+      border-width: 4px;
+      pointer-events: none;
+      position: absolute;
+      margin-left: -4px;
+      margin-top: -4px;
+      transform-origin: center;
+      height: 0;
+      width: 0;
+    }
+
+    .title,
+    .suptitle,
+    .paragraph,
+    .text,
+    p {
+      color: getColor('background');
+    }
+  }
+
+  &:not(.is-popover-right):not(.is-popover-left):not(.is-popover-bottom) .popover-content {
+    margin-bottom: 8px;
+  }
+
+  &.is-popover-right .popover-content {
+    @include position-right();
+  }
+
+  &.is-popover-bottom .popover-content {
+    @include position-bottom();
+  }
+
+  &.is-popover-left .popover-content {
+    @include position-left();
+  }
+
+  @include mobile {
+    &.is-popover-top-mobile .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-mobile .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-mobile .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-mobile .popover-content {
+      @include position-left();
+    }
+  }
+
+  @include tablet {
+    &.is-popover-top-tablet .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-tablet .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-tablet .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-tablet .popover-content {
+      @include position-left();
+    }
+  }
+
+  @include tablet-only {
+    &.is-popover-top-tablet-only .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-tablet-only .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-tablet-only .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-tablet-only .popover-content {
+      @include position-left();
+    }
+  }
+
+  @include touch {
+    &.is-popover-top-touch .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-touch .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-touch .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-touch .popover-content {
+      @include position-left();
+    }
+  }
+
+  @include desktop {
+    &.is-popover-top-desktop .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-desktop .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-desktop .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-desktop .popover-content {
+      @include position-left();
+    }
+  }
+
+  @include desktop-only {
+    &.is-popover-top-desktop-only .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-desktop-only .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-desktop-only .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-desktop-only .popover-content {
+      @include position-left();
+    }
+  }
+
+  @include widescreen {
+    &.is-popover-top-widescreen .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-widescreen .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-widescreen .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-widescreen .popover-content {
+      @include position-left();
+    }
+  }
+
+  @include widescreen-only {
+    &.is-popover-top-widescreen-only .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-widescreen-only .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-widescreen-only .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-widescreen-only .popover-content {
+      @include position-left();
+    }
+  }
+
+  @include fullhd {
+    &.is-popover-top-fullhd .popover-content {
+      @include position-top();
+    }
+
+    &.is-popover-right-fullhd .popover-content {
+      @include position-right();
+    }
+
+    &.is-popover-bottom-fullhd .popover-content {
+      @include position-bottom();
+    }
+
+    &.is-popover-left-fullhd .popover-content {
+      @include position-left();
+    }
+  }
+
+  // ajustement des flèches en fonction de la position
+  &.is-popover-right,
+  &.is-popover-left {
+    &.is-arrow-start .popover-content::before {
+      top: 20%;
+    }
+
+    &.is-arrow-end .popover-content::before {
+      top: 80%;
+    }
+  }
+
+  &.is-popover-right {
+    &.is-arrow-start .popover-content::before,
+    &.is-arrow-end .popover-content::before {
+      left: 0;
+    }
+  }
+
+  &.is-popover-left {
+    &.is-arrow-start .popover-content::before,
+    &.is-arrow-end .popover-content::before {
+      left: 100%;
+    }
+  }
+
+  &.is-arrow-start .popover-content::before {
+    left: 10%;
+  }
+
+  &.is-arrow-end .popover-content::before {
+    left: 90%;
+  }
+
+  &.is-popover-active .popover-content,
+  &:hover .popover-content {
+    visibility: visible;
+  }
+
+  .popover-trigger:focus ~ .popover-content {
+    visibility: visible;
+  }
+}

package/framework/src/components/_price.scss

@@ -0,0 +1,184 @@
+$price-levels: (
+  [$text-64, $text-44, $text-28, $text-16],
+  [$text-56, $text-32, $text-22, $text-16],
+  [$text-48, $text-28, $text-16, $text-16],
+  [$text-40, $text-24, $text-10, $text-10],
+  [$text-36, $text-20, $text-10, $text-10],
+  [$text-24, $text-20, $text-10, $text-10],
+  [$text-20, $text-20, $text-10, $text-10],
+);
+
+.price-container {
+  display: flex;
+  align-items: baseline;
+  column-gap: 12px;
+  flex-wrap: wrap;
+  --font-size: #{$text-64};
+
+  @each $price-level in $price-levels {
+    $i: index($price-levels, $price-level);
+    $font-size: nth($price-level, 1);
+    $strike-font-size: nth($price-level, 2);
+
+    &.is-level-#{$i} {
+      --font-size: #{$font-size};
+      --strike-font-size: #{$strike-font-size};
+
+      @if $i > 4 {
+        .price-details {
+          padding-left: 2px;
+        }
+      }
+    }
+  }
+
+  .overline {
+    width: 100%;
+    flex: none;
+    margin: 0;
+    font-size: calc(var(--font-size) * 0.4);
+    font-weight: 400;
+  }
+
+  .price {
+    font-size: var(--font-size);
+
+    &.strike {
+      font-size: var(--strike-font-size);
+    }
+  }
+
+}
+
+.price {
+  display: inline-flex;
+  font-weight: $weight-semibold;
+  line-height: 0.8;
+  margin-bottom: 0;
+  font-size: var(--font-size);
+
+  &.strike {
+    font-size: var(--strike-font-size);
+  }
+
+
+  @each $price-level in $price-levels {
+    $i: index($price-levels, $price-level);
+    $font-size: nth($price-level, 1);
+    $strike-font-size: nth($price-level, 2);
+
+    &.is-level-#{$i} {
+      --font-size: #{$font-size};
+      --strike-font-size: #{$strike-font-size};
+
+      @if $i > 4 {
+        .price-details {
+          padding-left: 2px;
+        }
+      }
+    }
+  }
+
+
+  // the details : cents + period
+
+  .price-details {
+    padding-left: $spacing-1;
+
+    .cents,
+    .centimes,
+    .periode,
+    .period {
+      line-height: 1;
+      display: block;
+    }
+
+    .cents,
+    .centimes {
+      font-weight: 600;
+      font-size: 0.475em;
+      vertical-align: top;
+      text-align: left;
+
+      sup {
+        font-weight: $weight-medium;
+        padding-left: 2px;
+        top: -0.3em;
+      }
+    }
+
+    .period,
+    .periode {
+      font-size: 0.375em;
+      margin-top: 0;
+      padding-left: 0.1em;
+      text-align: left;
+        font-weight: $weight-normal;
+    }
+  }
+
+  &.is-inverted {
+    color: getColor('background');
+  }
+
+  &.has-description {
+    .cents,
+    .centimes {
+      align-items: flex-start;
+      display: flex;
+    }
+
+    .icon {
+      height: inherit;
+      width: inherit;
+    }
+  }
+
+  &.is-inlined {
+    .price-details {
+      display: inline-flex;
+      margin-left: 0;
+      padding-left: 0 !important;
+
+      .cents,
+      .centimes,
+      .periode,
+      .period {
+        font-size: inherit;
+        line-height: 0.8;
+        padding-left: 0;
+      }
+    }
+
+    &.strike {
+      &::before {
+        transform: rotate(-12deg);
+      }
+    }
+  }
+
+  &.strike {
+    position: relative;
+    color: getColor('font-placeholder');
+
+    &::before {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 50%;
+      right: 0;
+      border-top: 2px solid;
+      border-color: getColor('font-placeholder');
+      border-radius: 5px;
+      transform: rotate(-20deg);
+    }
+
+    &.is-inverted {
+      color: getColor('background');
+
+      &::before {
+        border-color: getColor('background');
+      }
+    }
+  }
+}

package/framework/src/components/_product-tour.scss

@@ -0,0 +1,129 @@
+.product-tour {
+    position: absolute;
+    z-index: zindex('modal');
+    visibility: hidden;
+    opacity: 0;
+    background-color: getColor('background');
+    border-radius: $radius;
+    box-shadow: $shadow;
+    width: 350px;
+    padding: $spacing-3 * 2;
+
+    @include mobile {
+        max-width: inherit;
+    }
+
+    .arrow {
+        position: absolute;
+        top: 0;
+        right: auto !important;
+        bottom: auto !important;
+        left: 50%;
+        margin-top: -4px;
+        margin-left: -4px;
+        border-width: 4px;
+        border-style: solid;
+        border-color: transparent transparent #fff #fff;
+        transform: rotate(135deg);
+        height: 0;
+        width: 0;
+        box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
+        transform-origin: center;
+        pointer-events: none;
+
+        @include mobile {
+            display: none;
+        }
+
+        &.is-one-fifth { left: 20%; }
+        &.is-one-quarter { left: 25%; }
+        &.is-one-third { left: 33%; }
+        &.is-two-fifths { left: 40%; }
+        &.is-three-fifths { left: 60%; }
+        &.is-two-thirds { left: 66%; }
+        &.is-three-quarters { left: 75%; }
+        &.is-four-fifths { left: 80%; }
+
+        &.is-right {
+            top: 50% !important;
+            right: 0 !important;
+            bottom: auto !important;
+            left: 100% !important;
+            transform: rotate(-135deg);
+        }
+
+        &.is-bottom {
+            top: 100% !important;
+            bottom: auto !important;
+            right: auto !important;
+            transform: rotate(-45deg);
+        }
+
+        &.is-left {
+            top: 50% !important;
+            bottom: auto !important;
+            left: 0 !important;
+            right: 100% !important;
+            transform: rotate(45deg);
+        }
+
+        &.is-left,
+        &.is-right {
+            &.is-one-fifth { top: 20% !important; }
+            &.is-one-quarter { top: 25% !important; }
+            &.is-one-third { top: 33% !important; }
+            &.is-two-fifths { top: 40% !important; }
+            &.is-three-fifths { top: 60% !important; }
+            &.is-two-thirds { top: 66% !important; }
+            &.is-three-quarters { top: 75% !important; }
+            &.is-four-fifths { top: 80% !important; }
+        }
+    }
+
+    &.is-active {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    &.has-icon-left,
+    &.has-icon-right {
+        > .icon:not(.close) {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: white;
+            border-radius: 9999px;
+            box-shadow: $shadow;
+            transform: translate(-50%, -50%);
+
+            @include mobile {
+                display: none;
+            }
+
+            img {
+                flex-shrink: 0; // IE11 fix
+            }
+        }
+    }
+
+    &.has-icon-right {
+        > .icon:not(.close) {
+            left: 100% !important;
+            right: 0;
+        }
+    }
+
+    .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+}
+
+.product-tour-target {
+    &-active {
+        outline: 999em solid getColor('main') !important;
+        outline-offset: 10px !important;
+        z-index: zindex('modal');
+    }
+}