@trilogy-ds/styles 0.0.1-beta.9 → 0.0.1-calendar

package/framework/src/components/_price.scss

@@ -1,209 +1,184 @@
 $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);
+    font-weight: 400;
+  }
 
-    }
+  .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;
+  font-size: var(--font-size);
 
+  &.strike {
+    font-size: var(--strike-font-size);
+  }
 
 
-    // rendre les is-n deprecated dans 4 versions -  v1.18.11 -
+  @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-1 {
-        font-size: 56px;
-    }
+    &.is-level-#{$i} {
+      --font-size: #{$font-size};
+      --strike-font-size: #{$strike-font-size};
 
-    &.is-2 {
-        font-size: 44px;
+      @if $i > 4 {
+        .price-details {
+          padding-left: 2px;
+        }
+      }
     }
+  }
 
-    &.is-3 {
-        font-size: 32px;
-    }
 
-    &.is-4 {
-        font-size: 29px;
-    }
+  // the details : cents + period
 
-    &.is-5 {
-        font-size: 23px;
-    }
+  .price-details {
+    padding-left: $spacing-1;
 
-    &.is-6 {
-        font-size: 14px;
+    .cents,
+    .centimes,
+    .periode,
+    .period {
+      line-height: 1;
+      display: block;
     }
 
-    &.is-huge {
-        font-size: 62px;
-    }
+    .cents,
+    .centimes {
+      font-weight: 600;
+      font-size: 0.475em;
+      vertical-align: top;
+      text-align: left;
 
-    &.is-main-price {
-        color: getColor('alternate');
+      sup {
+        font-weight: $weight-medium;
+        padding-left: 2px;
+        top: -0.3em;
+      }
     }
 
-    &.is-inverted {
-        color: getColor('background');
+    .period,
+    .periode {
+      font-size: 0.375em;
+      margin-top: 0;
+      padding-left: 0.1em;
+      text-align: left;
+        font-weight: $weight-normal;
     }
+  }
 
-    &.has-suptitle {
-        display: flex;
-        flex-wrap: wrap;
+  &.is-inverted {
+    color: getColor('background');
+  }
 
-        .price-suptitle {
-            flex-basis: 100%;
-            font-size: 0.375em;
-        }
+  &.has-description {
+    .cents,
+    .centimes {
+      align-items: flex-start;
+      display: flex;
     }
 
-    &.has-description {
-        .cents,
-        .centimes {
-            align-items: flex-start;
-            display: flex;
-        }
-
-        .icon {
-            height: inherit;
-            width: inherit;
-        }
+    .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;
-            }
-        }
-
-        &.is-striked {
-            &::before {
-                transform: rotate(-12deg);
-            }
-        }
+  &.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 {
-        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');
-            }
-        }
+    &.strike {
+      &::before {
+        transform: rotate(-12deg);
+      }
+    }
+  }
 
-        &.is-inverted {
-            color: getVariantColor('background', 2);
+  &.strike {
+    position: relative;
+    color: getColor('font-placeholder');
 
-            &::before {
-                border-color: getColor('background');
-            }
-        }
+    &::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);
+    }
 
-        &.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/_radio.scss

@@ -0,0 +1,82 @@
+@include checkbox-and-radio('radio');
+
+.radios {
+  width: 100%;
+  column-gap: $spacing-5;
+  row-gap: $spacing-3;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  @include tablet {
+    flex-direction: row;
+
+    &.is-vertical-desktop {
+      flex-direction: column;
+    }
+  }
+
+  @include mobile {
+    &.is-horizontal-mobile {
+      flex-direction: row;
+    }
+  }
+
+  &.is-centered,
+  &.has-text-centered,
+  .has-text-centered & {
+    justify-content: center;
+  }
+}
+
+.radio,
+.radio-tile {
+  input:checked ~ label.radio-label {
+    cursor: default;
+
+    &:after {
+      content: '';
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  label.radio-label {
+    &:before,
+    &:after {
+      border-radius: 9999px;
+    }
+  }
+}
+
+.radio {
+  input:checked ~ label.radio-label {
+    &:after {
+      left: 3px;
+    }
+  }
+
+  input:not(:disabled):not(:checked) ~ label.radio-label:hover {
+    &:before {
+      @include hoverRules()
+    }
+  }
+
+}
+
+.radio-tile {
+  input:checked ~ label.radio-label {
+    &:after {
+      top: 18px;
+      left: 18px;
+    }
+  }
+
+  input:checked:disabled ~ label.radio-label {
+    &:after {
+      background-color: getColor('neutral');
+      top: 19px;
+      left: 19px;
+    }
+  }
+}

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;
+  }
 }