@trilogy-ds/styles 0.0.1-beta.9 → 0.0.4-beta-v4

package/framework/src/components/_price.scss

@@ -1,209 +1,158 @@
 $price-levels: (
-  ($text-64),
-  ($text-56),
-  ($text-44),
-  ($text-32),
-  ($text-28),
-  ($text-24),
-  ($text-20),
+  [$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};
 
-.price {
-    display: inline-flex;
-    // flex-wrap: wrap;
-    &:not(.is-inlined){
-        font-size: 44px;
-    }
-
-
-    @each $price-level in $price-levels {
-        $i: index($price-levels, $price-level);
-        $font-size: nth($price-level , 1);
-
-        &.is-level-#{$i} {
-            font-size: $font-size;
-
-            @if $i > 4 {
-                .price-details {
-                    padding-left: 2px !important;
-                }
-            }
-          }
+  @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);
 
-    // 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;
-            }
-        }
+    &.is-level-#{$i} {
+      --font-size: #{$font-size};
+      --strike-font-size: #{$strike-font-size};
 
-        .period,
-        .periode {
-            font-size: 0.375em;
-            margin-top: 0;
-            padding-left: 0.1em;
-            text-align: left;
+      @if $i > 4 {
+        .price-details {
+          padding-left: 2px;
         }
+      }
     }
+  }
 
+  .overline {
+    width: 100%;
+    flex: none;
+    margin: 0;
+    font-size: calc(var(--font-size) * 0.4);
+  }
 
-    }
+  .price {
+    font-size: var(--font-size);
 
-    // FIXME : le nom de cette classe devrait être préfixé de "price-"
-    .main,
-    .price-main {
-        font-weight: $weight-semibold;
-        line-height: 0.8;
-        margin-bottom: 0;
+    &.strike {
+      font-size: var(--strike-font-size);
     }
+  }
 
+}
 
+.price {
+  display: inline-flex;
+  font-weight: $weight-semibold;
+  line-height: 0.8;
+  margin-bottom: 0;
 
+  // the details : cents + period
 
+  .price-details {
+    padding-left: $spacing-1;
 
-    // rendre les is-n deprecated dans 4 versions -  v1.18.11 -
-
-    &.is-1 {
-        font-size: 56px;
-    }
-
-    &.is-2 {
-        font-size: 44px;
+    .cents,
+    .centimes,
+    .periode,
+    .period {
+      line-height: 1;
+      display: block;
     }
 
-    &.is-3 {
-        font-size: 32px;
-    }
+    .cents,
+    .centimes {
+      font-weight: 600;
+      font-size: 0.475em;
+      vertical-align: top;
+      text-align: left;
 
-    &.is-4 {
-        font-size: 29px;
+      sup {
+        font-weight: $weight-medium;
+        padding-left: 2px;
+        top: -0.3em;
+      }
     }
 
-    &.is-5 {
-        font-size: 23px;
+    .period,
+    .periode {
+      font-size: 0.375em;
+      margin-top: 0;
+      padding-left: 0.1em;
+      text-align: left;
     }
+  }
 
-    &.is-6 {
-        font-size: 14px;
-    }
+  &.is-inverted {
+    color: getColor('background');
+  }
 
-    &.is-huge {
-        font-size: 62px;
+  &.has-description {
+    .cents,
+    .centimes {
+      align-items: flex-start;
+      display: flex;
     }
 
-    &.is-main-price {
-        color: getColor('alternate');
+    .icon {
+      height: inherit;
+      width: inherit;
     }
+  }
 
-    &.is-inverted {
-        color: getColor('background');
+  &.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;
+      }
     }
 
-    &.has-suptitle {
-        display: flex;
-        flex-wrap: wrap;
-
-        .price-suptitle {
-            flex-basis: 100%;
-            font-size: 0.375em;
-        }
+    &.strike {
+      &::before {
+        transform: rotate(-12deg);
+      }
     }
+  }
 
-    &.has-description {
-        .cents,
-        .centimes {
-            align-items: flex-start;
-            display: flex;
-        }
+  &.strike {
+    position: relative;
+    color: getColor('neutral');
 
-        .icon {
-            height: inherit;
-            width: inherit;
-        }
+    &::before {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 50%;
+      right: 0;
+      border-top: 2px solid;
+      border-color: getColor('neutral');
+      border-radius: 5px;
+      transform: rotate(-20deg);
     }
 
-    &.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;
-            }
-        }
-
-        &.is-striked {
-            &::before {
-                transform: rotate(-12deg);
-            }
-        }
-    }
-
-    &.is-striked {
-        position: relative;
-        color: getVariantColor('font', 2);
-
-        &::before {
-            position: absolute;
-            content: "";
-            left: 0;
-            top: 50%;
-            right: 0;
-            border-top: 2px solid;
-            border-color: getColor('font');
-            border-radius: 5px;
-            transform: rotate(-20deg);
-        }
-
-        &.is-main-price {
-            color: getVariantColor('alternate', 2);
-            &::before {
-                border-color: getColor('alternate');
-            }
-        }
-
-        &.is-inverted {
-            color: getVariantColor('background', 2);
-
-            &::before {
-                border-color: getColor('background');
-            }
-        }
-
-        &.has-suptitle {
-            display: inline-flex;
-            margin-top: 0.55em;
+    &.is-inverted {
+      color: getColor('background');
 
-            .price-suptitle {
-                position: absolute;
-                top: -1.4em;
-            }
-        }
+      &::before {
+        border-color: getColor('background');
+      }
     }
+  }
 }

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

@@ -1,5 +1,3 @@
-$product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-background defaults
-
 .product-tour {
     position: absolute;
     z-index: zindex('modal');
@@ -94,7 +92,7 @@ $product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-b
             top: 0;
             left: 0;
             background: white;
-            border-radius: 100%;
+            border-radius: 9999px;
             box-shadow: $shadow;
             transform: translate(-50%, -50%);
 
@@ -124,7 +122,7 @@ $product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-b
 
 .product-tour-target {
     &-active {
-        outline: 999em solid $product-tour-target-outline !important;
+        outline: 999em solid getColor('main') !important;
         outline-offset: 10px !important;
         z-index: zindex('modal');
     }

package/framework/src/components/_progress-radial.scss

@@ -1,23 +1,28 @@
 .progress-radial {
-    background: radial-gradient(white 58%, transparent 51%),
-        conic-gradient(gainsboro 0deg 360deg, gainsboro 0deg 360deg);
+  background: radial-gradient(white 58%, transparent 51%),
+  conic-gradient(gainsboro 0deg 360deg, gainsboro 0deg 360deg);
+  border-radius: 50%;
+  width: 124px;
+  height: 124px;
+  position: relative;
+
+  .progress-radial-content {
+    border: 1px solid white;
     border-radius: 50%;
-    width: 124px;
-    height: 124px;
-    position: relative;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 
-    .progress-radial-content {
-        border: 1px solid white;
-        border-radius: 50%;
-        width: 102px;
-        height: 102px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
+  &.is-small {
+    width: 75px;
+    height: 75px;
+  }
 }

package/framework/src/components/_range.scss

@@ -1,84 +1,85 @@
 .range-container {
-    @mixin appearence {
-        appearance: none;
-        height: 5px;
-    }
+  @mixin appearence {
+    appearance: none;
+    height: 5px;
+  }
 
-    @mixin slider-thumb {
-        appearance: none;
-        width: 20px;
-        height: 20px;
-        background-color: white;
-        pointer-events: auto;
-        border-radius: 50%;
-        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
-        outline: none;
-        border: none;
-    }
-    .range {
-        width: 100%;
-        position: relative;
-        margin-top: 18px;
-        margin-bottom: 20px;
+  @mixin slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    pointer-events: auto;
+    border-radius: 50%;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+    outline: none;
+    border: none;
+  }
+
+  .range {
+    width: 100%;
+    position: relative;
+    margin-top: 18px;
+    margin-bottom: 20px;
 
-        .range-track {
-            width: 100%;
-            height: 8px;
-            border-radius: 8px;
-            position: absolute;
-            margin: auto;
-            top: 0;
-            bottom: 0;
-            color: getColor('alternate');
-            @include mobile {
-                height: 4px;
-                border-radius: 4px;
-            }
-        }
+    .range-track {
+      width: 100%;
+      height: 8px;
+      border-radius: var(--radius);
+      position: absolute;
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      @include mobile {
+        height: 4px;
+        border-radius: var(--radius-small);
+      }
+    }
 
-        .range-cursor {
-            appearance: none;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            width: 100%;
-            outline: none;
-            position: absolute;
-            margin: auto;
-            top: 0;
-            bottom: 0;
-            background-color: transparent;
-            pointer-events: none;
+    .range-cursor {
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      width: 100%;
+      outline: none;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      background-color: transparent;
+      pointer-events: none;
 
-            &::-webkit-slider-runnable-track {
-                @include appearence;
-            }
+      &::-webkit-slider-runnable-track {
+        @include appearence;
+      }
 
-            &::-moz-range-track {
-                @include appearence;
-            }
+      &::-moz-range-track {
+        @include appearence;
+      }
 
-            &::-ms-track {
-                @include appearence;
-            }
+      &::-ms-track {
+        @include appearence;
+      }
 
-            &::-webkit-slider-thumb {
-                @include slider-thumb;
-                margin-top: -8px;
-            }
+      &::-webkit-slider-thumb {
+        @include slider-thumb;
+        margin-top: -8px;
+      }
 
-            &::-moz-range-thumb {
-                @include slider-thumb;
-            }
+      &::-moz-range-thumb {
+        @include slider-thumb;
+      }
 
-            &::-ms-thumb {
-                @include slider-thumb;
-            }
-        }
-    }
-    .range-values {
-        display: flex;
-        justify-content: space-between;
-        padding-top: 14px;
-        font-weight: bold;
+      &::-ms-thumb {
+        @include slider-thumb;
+      }
     }
+  }
+
+  .range-values {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 14px;
+    font-weight: bold;
+  }
 }

package/framework/src/components/_segmented-control.scss

@@ -1,60 +1,58 @@
 .segmented-control {
-    border-radius: 6px;
-    padding: $spacing-1;
-    border: 1px solid getColor('grey-light');
-    background-color: getColor('grey-lighter');
-    display: inline-block;
-    margin: 16px 0;
+  border-radius: 6px;
+  padding: $spacing-1;
+  background-color: getColor('neutral-fade');
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  width: fit-content;
+
+  &.justified-start {
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+  &.justified-end {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  @include mobile {
+    display: flex;
+    margin: 24px auto;
+    width: 100%;
+  }
+
+  .segmented-control-item {
+    padding: 0 $spacing-5;
+    border-radius: var(--radius-small);
+    font-size: 16px;
+    text-align: center;
+    border: 2px solid transparent;
+    height: 42px;
+    color: getColor('font');
+    background-color: getColor('neutral-fade');
+
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
 
     @include mobile {
-        display: flex;
-        margin: 24px auto;
-        width: 100%;
+      padding: 0 $spacing-4;
+      flex: 1 1 0;
+      width: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &:hover:not([disabled], [aria-disabled=true], .is-active) {
+      cursor: pointer;
+      @include hoverRules()
     }
 
-    .segmented-control-item {
-        padding: 0 $spacing-5;
-        border-radius: 4px;
-        font-size: 16px;
-        text-align: center;
-        border: 2px solid transparent;
-        height: 42px;
-        color: getColor('font');
-        background-color: getColor('grey-lighter');
-        font-family: $body-family;
-
-        &:not(:last-child) {
-            margin-right: 4px;
-        }
-
-        @include mobile {
-            padding: 0 $spacing-4;
-            flex: 1 1 0;
-            width: 0;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
-        &:hover {
-            cursor: pointer;
-            background-color: transparent;
-            color: getColor('alternate');
-            border-color: currentColor;
-        }
-
-        &.is-active {
-            background-color: getColor('alternate');
-            color: invertColor('alternate');
-            font-weight: 600;
-        }
-
-        &[disabled] {
-            background-color: getColor('grey-disabled');
-            border-color: getColor('grey-disabled');
-            color: getColor('grey-darker');
-            &:hover {
-                cursor: not-allowed;
-            }
-        }
+    &.is-active {
+      background-color: getColor('main');
+      color: invertColor('main');
     }
+  }
 }