@trilogy-ds/styles 0.0.1-beta.5 → 0.0.1-beta.50

package/framework/src/components/_price.scss

@@ -1,209 +1,239 @@
 $price-levels: (
-  ($text-64),
-  ($text-56),
-  ($text-44),
-  ($text-32),
-  ($text-28),
-  ($text-24),
-  ($text-20),
+    ($text-64),
+    ($text-56),
+    ($text-44),
+    ($text-32),
+    ($text-28),
+    ($text-24),
+    ($text-20),
 );
 
-
 .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;
-                }
-            }
+  display: inline-flex;
+  font-weight: $weight-semibold;
+  line-height: 0.8;
+  margin-bottom: 0;
+
+  &:not(.is-inlined) {
+    font-size: $text-44;
+  }
+
+  @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 == 1 {
+        + .price-tag {
+          span:nth-child(2) {
+            font-size: $text-16;
           }
+        }
+      }
 
-    // the details : cents + period
+      @if $i == 2 {
+        + .price-tag {
+          font-size: 22px;
+          span:nth-child(2) {
+            font-size: $text-16;
+          }
+        }
+      }
 
-    .price-details {
-        padding-left: $spacing-1;
-
-        .cents,
-        .centimes,
-        .periode,
-        .period {
-            line-height: 1;
-            display: block;
+      @if $i == 3 {
+        + .price-tag {
+          font-size: 16px;
+          span:nth-child(2) {
+            font-size: $text-16;
+          }
         }
+      }
 
-        .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;
-            }
+      @if $i < 4 {
+        + .price-tag {
+          span:nth-child(2) {
+            place-self: flex-end;
+            margin-bottom: 3px;
+          }
         }
+      }
 
-        .period,
-        .periode {
-            font-size: 0.375em;
-            margin-top: 0;
-            padding-left: 0.1em;
-            text-align: left;
+      @if $i > 4 {
+        .price-details {
+          padding-left: 2px !important;
         }
+      }
+      @if $i > 3 {
+        + .price-tag {
+          &::before {
+            border-width: 3px;
+            margin-left: -6px;
+            margin-top: 4px;
+            border-radius: 1px;
+          }
+          font-size: $text-10;
+          padding: 4px !important;
+        }
+      }
     }
 
+    // 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;
+        }
+      }
 
-    // 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;
+      .period,
+      .periode {
+        font-size: 0.375em;
+        margin-top: 0;
+        padding-left: 0.1em;
+        text-align: left;
+      }
     }
 
 
+  }
 
+  &.is-inverted {
+    color: getColor('background');
+  }
 
+  &.has-suptitle {
+    display: flex;
+    flex-wrap: wrap;
 
-    // rendre les is-n deprecated dans 4 versions -  v1.18.11 -
-
-    &.is-1 {
-        font-size: 56px;
+    .price-suptitle {
+      flex-basis: 100%;
+      font-size: 0.375em;
     }
+  }
 
-    &.is-2 {
-        font-size: 44px;
+  &.has-description {
+    .cents,
+    .centimes {
+      align-items: flex-start;
+      display: flex;
     }
 
-    &.is-3 {
-        font-size: 32px;
+    .icon {
+      height: inherit;
+      width: inherit;
     }
+  }
 
-    &.is-4 {
-        font-size: 29px;
+  &.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-5 {
-        font-size: 23px;
+    &.is-striked {
+      &::before {
+        transform: rotate(-12deg);
+      }
     }
+  }
 
-    &.is-6 {
-        font-size: 14px;
-    }
+  &.is-striked {
+    position: relative;
+    color: getBGColor('font');
 
-    &.is-huge {
-        font-size: 62px;
-    }
-
-    &.is-main-price {
-        color: getColor('alternate');
+    &::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-inverted {
-        color: getColor('background');
-    }
-
-    &.has-suptitle {
-        display: flex;
-        flex-wrap: wrap;
+      color: getBGColor('font');
 
-        .price-suptitle {
-            flex-basis: 100%;
-            font-size: 0.375em;
-        }
+      &::before {
+        border-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;
-            }
-        }
+    &.has-suptitle {
+      display: inline-flex;
+      margin-top: 0.55em;
 
-        &.is-striked {
-            &::before {
-                transform: rotate(-12deg);
-            }
-        }
+      .price-suptitle {
+        position: absolute;
+        top: -1.4em;
+      }
     }
+  }
+}
 
-    &.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;
-
-            .price-suptitle {
-                position: absolute;
-                top: -1.4em;
-            }
-        }
-    }
+.price-tag {
+  background-color: getColor('alternate');
+  margin-left: 10px;
+  border-radius: 6px;
+  display: inline-flex;
+  color: getColor('background');
+  height: fit-content;
+  padding: 8px;
+  font-size: 28px;
+  line-height: 1em;
+  align-items: baseline;
+  position: relative;
+  &::before {
+    content: '';
+    border-color: transparent;
+    border-bottom-color: getColor('alternate');
+    border-left-color: getColor('alternate');
+    transform: rotate(45deg);
+    border-style: solid;
+    border-width: 5px;
+    border-radius: 2px;
+    pointer-events: none;
+    position: absolute;
+    margin-left: -12px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+    transform-origin: center;
+    height: 0;
+    width: 0;
+  }
 }

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/_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,46 @@
 .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: getBGColor('neutral');
+  display: inline-block;
+  margin: 16px 0;
 
-    @include mobile {
-        display: flex;
-        margin: 24px auto;
-        width: 100%;
-    }
+  @include mobile {
+    display: flex;
+    margin: 24px auto;
+    width: 100%;
+  }
 
-    .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;
+  .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: getBGColor('neutral');
 
-        &:not(:last-child) {
-            margin-right: 4px;
-        }
-
-        @include mobile {
-            padding: 0 $spacing-4;
-            flex: 1 1 0;
-            width: 0;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
 
-        &:hover {
-            cursor: pointer;
-            background-color: transparent;
-            color: getColor('alternate');
-            border-color: currentColor;
-        }
+    @include mobile {
+      padding: 0 $spacing-4;
+      flex: 1 1 0;
+      width: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
 
-        &.is-active {
-            background-color: getColor('alternate');
-            color: invertColor('alternate');
-            font-weight: 600;
-        }
+    &:hover:not([disabled], [aria-disabled=true], .is-active) {
+      cursor: pointer;
+      @include hoverRules()
+    }
 
-        &[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');
     }
+  }
 }