@trilogy-ds/styles 0.0.1-beta-139 → 0.0.1-beta-141

package/framework/src/components/_price.scss

@@ -14,37 +14,21 @@ $price-levels: (
   column-gap: 12px;
   flex-wrap: wrap;
   --font-size: #{$text-64};
-  --tag-period-size: #{$text-16};
 
   @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);
-    $tag-size: nth($price-level, 3);
-    $tag-period-size: nth($price-level, 4);
 
     &.is-level-#{$i} {
       --font-size: #{$font-size};
       --strike-font-size: #{$strike-font-size};
-      --tag-amount-size: #{$tag-size};
-      --tag-period-size: #{$tag-period-size};
 
       @if $i > 4 {
         .price-details {
           padding-left: 2px;
         }
       }
-      @if $i > 3 {
-        + .price-tag {
-          &::before {
-            border-width: 3px;
-            margin-left: -6px;
-            border-radius: 1px;
-          }
-
-          padding: 4px !important;
-        }
-      }
     }
   }
 
@@ -63,20 +47,6 @@ $price-levels: (
     }
   }
 
-  .price-tag {
-    padding: calc(var(--tag-period-size) / 2);
-    font-size: var(--tag-amount-size);
-
-    &:before {
-      margin-left: calc(4px - var(--tag-period-size));
-    }
-
-    .tag-period {
-      font-size: var(--tag-period-size);
-      margin-bottom: calc(calc(var(--tag-period-size) - 10px) / 2);
-    }
-  }
-
 }
 
 .price {
@@ -186,42 +156,3 @@ $price-levels: (
     }
   }
 }
-
-.price-tag {
-  line-height: 1em;
-  align-self: center;
-  background-color: getColor('accent');
-  border-radius: 6px;
-  display: inline-flex;
-  color: getColor('background');
-  height: fit-content;
-  font-size: 28px;
-  align-items: baseline;
-  position: relative;
-  margin-left: -4px;
-
-  &::before {
-    content: '';
-    border-color: transparent;
-    border-bottom-color: getColor('accent');
-    border-left-color: getColor('accent');
-    transform: rotate(45deg);
-    border-style: solid;
-    border-width: 6px;
-    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;
-  }
-
-  .tag-period {
-    place-self: flex-end;
-  }
-}

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

@@ -2,8 +2,20 @@
   border-radius: 6px;
   padding: $spacing-1;
   background-color: getColor('neutral-fade');
-  display: inline-block;
-  margin: 16px 0;
+  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;

package/framework/src/elements/_radio.scss

@@ -2,17 +2,22 @@
 
 .radios {
   width: 100%;
-  column-gap: 16px;
+  gap: 16px;
   display: flex;
   flex-wrap: wrap;
+  flex-direction: column;
 
-  &.is-vertical {
-    row-gap: 16px;
+  @include tablet {
+    flex-direction: row;
+
+    &.is-vertical-desktop {
+      flex-direction: column;
+    }
   }
 
   @include mobile {
-    &:not(.is-mobile){
-      display: block;
+    &.is-horizontal-mobile {
+      flex-direction: row;
     }
   }
 
@@ -25,51 +30,52 @@
 
 .radio,
 .radio-tile {
-    input:checked ~ label.radio-label {
-        cursor: default;
-        &:after {
-            content: '';
-            width: 12px;
-            height: 12px;
-        }
+  input:checked ~ label.radio-label {
+    cursor: default;
+
+    &:after {
+      content: '';
+      width: 12px;
+      height: 12px;
     }
+  }
 
-    label.radio-label {
-        &:before,
-        &:after {
-            border-radius: 9999px;
-        }
+  label.radio-label {
+    &:before,
+    &:after {
+      border-radius: 9999px;
     }
+  }
 }
 
 .radio {
-    input:checked ~ label.radio-label {
-        &:after {
-            left: 3px;
-        }
+  input:checked ~ label.radio-label {
+    &:after {
+      left: 3px;
     }
+  }
 
-    input:not(:disabled):not(:checked) ~ label.radio-label:hover {
-        &:before {
-            @include hoverRules()
-        }
+  input:not(:disabled):not(:checked) ~ label.radio-label:hover {
+    &:before {
+      @include hoverRules()
     }
-      
+  }
+
 }
 
 .radio-tile {
-    input:checked ~ label.radio-label {
-        &:after {
-            top: 18px;
-            right: 18px;
-        }
+  input:checked ~ label.radio-label {
+    &:after {
+      top: 18px;
+      right: 18px;
     }
+  }
 
-    input:checked:disabled ~ label.radio-label {
-        &:after {
-            background-color: getColor('neutral');
-            top: 19px;
-            right: 19px;
-        }
+  input:checked:disabled ~ label.radio-label {
+    &:after {
+      background-color: getColor('neutral');
+      top: 19px;
+      right: 19px;
     }
+  }
 }

package/framework/src/elements/_tag.scss

@@ -2,10 +2,10 @@ $tag-delete-margin: 1px !default;
 
 // container pour multi-tags ou tags avec actions
 .tags {
+  display: flex;
+  justify-content: flex-start;
   align-items: center;
-  display: inline-flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
   margin-bottom: 16px;
 
   // multi-tags : ajout d'une marge bottom, supprimable par facette

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.1-beta-139",
+  "version": "0.0.1-beta-141",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [