@trilogy-ds/styles 0.0.1-beta.9 → 0.0.1-fix-timepicker

package/framework/src/components/_stepper.scss

@@ -1,144 +1,14 @@
 @use "sass:math";
 
-$step-width: 30px;
-$step-font-size: 18px;
-$step-gap: $step-width;
-$step-gap-desktop: $step-width * 3;
-
-
-// old stepper , déprécié since ( v2 )
-.stepper {
-  display: inline-flex;
-  position: relative;
-
-  @include mobile {
-    &::after {
-      content: attr(data-label-mobile);
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      font-weight: $weight-semibold;
-      color: getColor('alternate');
-    }
-  }
-
-  .step {
-    position: relative;
-    z-index: zindex('void');
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: $step-width;
-    height: $step-width;
-    border-radius: 100%;
-    background: getColor('grey-disabled');
-    color: getColor('background');
-    font-size: $step-font-size;
-    transition: background .15s ease;
-
-    &.is-done {
-      background: getColor('font');
-    }
-
-    &.is-current,
-    &.is-active {
-      background: getColor('alternate');
-    }
-  }
-
-  .step + .step {
-    margin-left: $step-gap;
-
-    @include desktop {
-      margin-left: $step-gap-desktop;
-    }
-
-    &::before {
-      content: '';
-      height: 4px;
-      width: $step-gap;
-      display: block;
-      position: absolute;
-      z-index: zindex('subzero');
-      left: -$step-gap;
-      top: 50%;
-      transform: translateY(-50%);
-      transition: background .15s ease;
-      background-color: getColor('grey-disabled');
-
-      @include desktop {
-        width: $step-gap-desktop;
-        margin-left: -$step-gap-desktop + $step-width;
-      }
-    }
-  }
-
-  // done steps successively
-  .step.is-done + .step.is-done::before {
-    background: getColor('font');
-  }
-
-  // done step followed by current step
-  .step.is-done + .step.is-current::before {
-    background: linear-gradient(90deg, getColor('font'), getColor('alternate'));
-  }
-
-  // active step followed by done step(s)
-  .step.is-active + .step.is-done::before {
-    background: linear-gradient(90deg, getColor('alternate'), getColor('font'));
-  }
-
-  // current step followed by unvisited step(s)
-  .step.is-current + .step::before {
-    background: linear-gradient(90deg, getColor('alternate'), getColor('grey-disabled') 75%);
-  }
-
-  // labels
-  .step[data-label] {
-    margin-bottom: 40px;
-
-    &::after {
-      position: absolute;
-      left: -$step-gap-desktop * 0.5;
-      right: -$step-gap-desktop * 0.5;
-      color: getColor('grey');
-      font-size: $size-7;
-      font-weight: $weight-semibold;
-      top: 50px;
-      text-align: center;
-
-      @include desktop {
-        content: attr(data-label);
-      }
-    }
-
-    // active or current step
-    &.is-current::after,
-    &.is-active::after {
-      color: getColor('alternate');
-    }
-  }
-}
-
-// back to grey label when going back in steps: the current step is followed by the active step
-.step[data-label].is-active ~ .step[data-label].is-current::after {
-  color: getColor('grey');
-}
-
-
-// Nouveau stepper
-
 .stepper-wrapper {
   display: flex;
   position: relative;
   justify-content: space-between;
   min-height: 44px;
-  margin-left: -8px;
-  margin-right: -8px;
+  gap: $spacing-4;
 
   @include touch {
-    margin-left: -4px !important;
-    margin-right: -4px !important;
+    gap : $spacing-2;
   }
 }
 
@@ -146,43 +16,47 @@ $step-gap-desktop: $step-width * 3;
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: $spacing-2;
 
-  &:before{
+  &:before {
     content: "";
     display: block;
     height: 4px;
-    background: getColor('grey-disabled');
-    border-radius: 4px;
+    border-radius: var(--radius-small);
+    background-size: 200% !important;
+    background-color: getColor('neutral');
   }
 
   &.is-error {
 
-    &:before{
-      background: getColor('error') !important;
+    &:before {
+      background-color: getColor('error') !important;
+
     }
+    &.is-current{
+      &:before{
+        animation: progress 1s;
+      }
+
+    }
+
     .step-bars {
       background: getColor('error') !important;
     }
+
     color: getColor('font');
 
     .step-label {
 
-      padding-left: $spacing-2;
-
-      @include touch {
-        padding-left: $spacing-1;
-      }
-
       &::before {
         content: "";
-        mask-image: url('./assets/icons/all/times-circle.svg') !important;
+        mask-image: url('./assets/icons/all/times.svg') !important;
         background-color: getColor('error') !important;
         border-width: 0;
+        mask-size: 20px;
         width: 20px;
         height: 20px;
-        margin: 2px 8px 0 -8px;
         align-self: baseline;
+        margin-top: 2px;
       }
 
       .icon {
@@ -193,28 +67,26 @@ $step-gap-desktop: $step-width * 3;
 
   &.is-done {
 
-    &:before{
-      background: getColor('font');
-      transition: background-color 2s ease-in-out;
+    &:before {
+      background-color: getColor('font');
     }
+
     .step-bars {
       background: getColor('font');
-      transition: background-color 2s ease-in-out;
+      transition: background-color 1s ease-in-out;
     }
 
     .step-label {
-      color: getColor('font');
-      padding-left: $spacing-2;
-
       &::before {
         content: "";
         mask-image: url('./assets/icons/all/check-circle.svg');
         background-color: getColor('success');
         border-width: 0;
         min-width: 20px;
+        mask-size: 20px;
         height: 20px;
-        margin: 2px 8px 0 -8px;
         align-self: baseline;
+        margin-top: 2px;
       }
     }
   }
@@ -222,28 +94,20 @@ $step-gap-desktop: $step-width * 3;
   &.is-current,
   &.is-active {
 
-    &:before{
-      background: getColor('alternate');
-      animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
-      -o-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
-      -webkit-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
-      -moz-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
+    &:before {
+      background-color: getColor('main');
+      animation: progress 1s;
     }
+
     .step-bars {
-      background: getColor('alternate');
-      animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
-      -o-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
-      -webkit-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
-      -moz-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
+      background: getColor('main');
     }
 
     .step-label {
       font-style: normal;
       font-weight: 600;
-      font-size: 22px;
-      line-height: 24px;
-      color: getColor('font');
-      transition: color 1.45s ease;
+      font-size: 20px;
+      line-height: 22px;
       width: max-content;
 
       .icon [class^=tri-], .icon [class*=" tri-"] {
@@ -262,47 +126,53 @@ $step-gap-desktop: $step-width * 3;
       }
     }
   }
-
-  @include touch {
-    padding: $spacing-1 !important;
-  }
 }
 
 .step-bars {
   height: 4px;
-  background: getColor('grey-disabled');
-  border-radius: 4px;
+  background: getColor('disabled');
+  border-radius: var(--radius-small);
   display: none;
 }
 
 .step-label {
   display: flex;
   align-items: center;
-  color: getColor('grey');
+  color: getColor('font');
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  padding-top: $spacing-2;
-
+  gap: $spacing-1;
   .icon {
     font-size: 20px;
-    margin-left: 8px;
     height: auto;
   }
+}
 
-  .icon [class^=tri-], .icon [class*=" tri-"] {
-    margin: 0 4px 0 -4px;
-  }
+.stepper-wrapper > .stepper-item > .step-label {
+  padding-top: $spacing-2;
+    @include touch {
+      position: absolute;
+      top: 10px;
+      left: 0;
+    }
+}
 
+.stepper-container > .stepper-content > .step-label {
+  transition: opacity 0.3s ease-in-out;
+  animation: fadeInLabel 0.4s ease-out;
+}
 
-  @include touch {
-    position: absolute;
-    top: 10px;
-    left: 4px;
-  }
+.stepper-content {
+  margin-bottom: $spacing-3 !important;
 }
 
+.stepper-steps {
+  margin-bottom: $spacing-2 !important;
+}
+
+
 @include desktop {
   .step-count {
     display: none;
@@ -326,6 +196,20 @@ $step-gap-desktop: $step-width * 3;
       display: none;
     }
   }
+
+  .stepper-container > .stepper-steps {
+    font-size: 12px !important;
+    line-height: 18px !important;
+  }
+
+  .stepper-container > .stepper-content > .step-label {
+    font-size: 14px !important;
+    line-height: 18px !important;
+  }
+
+  .stepper-container > .stepper-content > .icon {
+    font-size: 16px !important;
+  }
 }
 
 @include tablet-only {
@@ -340,58 +224,31 @@ $step-gap-desktop: $step-width * 3;
 
   .stepper-item:not(.is-current) {
     display: flex;
-
+  
     .step-label {
-      display: none;
+    display: none;
     }
   }
 }
 
-@keyframes cssload-width {
-  0%, 100% {
-    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
-  }
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}
 
-@-o-keyframes cssload-width {
+@keyframes progress {
   0%, 100% {
-    -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
+    background-image: linear-gradient(to right, transparent 0, transparent 50%, getColor('neutral') 50%, getColor('neutral') 100%);
   }
   0% {
-    width: 0;
+    background-position: 100% 0;
   }
   100% {
-    width: 100%;
+    background-position: 0 0;
   }
 }
 
-@-webkit-keyframes cssload-width {
-  0%, 100% {
-    -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
-  }
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}
-
-@-moz-keyframes cssload-width {
-  0%, 100% {
-    -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
-  }
+@keyframes fadeInLabel {
   0% {
-    width: 0;
+    opacity: 0;
   }
   100% {
-    width: 100%;
+    opacity: 1;
   }
-}
-
+}

package/framework/src/{elements → components}/_sticker.scss

@@ -1,8 +1,7 @@
 $sticker-height: 35px;
-$sticker-radius: $radius-large;
 
 .sticker {
-  border-radius: 24px;
+  border-radius: 9999px;
   font-size: 16px;
   flex-grow: 0;
   display: inline-flex;
@@ -10,64 +9,70 @@ $sticker-radius: $radius-large;
   color: getColor('background') !important;
   line-height: 20px;
   flex-shrink: 0;
-  background-color: getColor('font');
+  background-color: getColor('main');
   font-weight: 600;
+  max-height: 36px;
+
+  .icon {
+    font-size: 20px;
+    width: auto;
+    height: auto;
+    margin-right: $spacing-2;
+  }
+
+  &.is-small {
+    .icon {
+      margin-right: $spacing-1;
+    }
+  }
 
   &:not(.is-hat) {
     width: fit-content;
-
-    @include mobile{
-      border-radius: 16px;
+    @include mobile {
       font-size: 12px;
       padding: $spacing-1 $spacing-2;
       height: auto;
       line-height: 15px;
-
-      &.is-flag {
-        border-radius: 0 $sticker-radius 0 0;
+      .icon {
+        font-size: 16px;
+        margin-right: $spacing-1;
       }
-
     }
   }
 
-
-  &.is-primary {
-    background-color: getColor('main');
+  &.is-accent {
+    background-color: getColor('accent');
     color: getColor('background') !important;
   }
 
-  &.is-flag {
-    border-radius: 0 16px 0 0;
+  &.is-info {
+    background-color: getColor('info');
+    color: getColor('background') !important;
   }
 
-  &.is-outlined,
   &.is-inverted {
     background-color: white !important;
     border-style: solid;
     border-width: 2px;
     border-color: currentColor;
-    color: getColor('font') !important;
-
-    &.is-primary {
-      color: getColor('main') !important;
-    }
+    color: currentColor;
   }
 
   &.is-small {
-    border-radius: 16px;
     font-size: 12px;
     padding: $spacing-1 $spacing-2;
     height: auto;
     line-height: 15px;
-
-    &.is-flag {
-      border-radius: 0 $sticker-radius 0 0;
+    .icon {
+      font-size: 16px;
+      height: 15px;
+      margin-right: $spacing-1;
     }
   }
 
   // deprecated
   &.is-stretched {
-    border-radius: $radius 0;
+    border-radius: var(--radius) 0;
     padding: 0 10px;
     position: relative;
     margin-right: 10px;
@@ -87,12 +92,12 @@ $sticker-radius: $radius-large;
     }
 
     &::before {
-      border-radius: $radius 0 0 $radius;
+      border-radius: var(--radius) 0 0 var(--radius);
       left: -6px;
     }
 
     &::after {
-      border-radius: 0 $radius $radius 0;
+      border-radius: 0 var(--radius) var(--radius) 0;
       right: -7px;
     }
   }
@@ -111,7 +116,7 @@ $sticker-radius: $radius-large;
 .has-hat-mobile {
   .is-hat {
     display: inline-block;
-    border-radius: $radius $radius 0 0;
+    border-radius: var(--radius) var(--radius) 0 0;
     position: absolute;
     top: -$sticker-height;
     left: 0;