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

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

@@ -1,60 +1,62 @@
 .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('background');
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  width: fit-content;
+  border: 1px solid getColor('neutral');
+
+
+  &.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: $spacing-3 $spacing-4;
+    border-radius: var(--radius-small);
+    font-size: 16px;
+    text-align: center;
+    border: 2px solid transparent;
+    color: getColor('font');
+    background-color: getColor('background');
+
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
 
     @include mobile {
-        display: flex;
-        margin: 24px auto;
-        width: 100%;
+      flex: 1 1 0;
+      width: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &:hover:not([disabled], [aria-disabled=true], .is-active) {
+      cursor: pointer;
+      @include hoverRules()
+    }
+
+    &.is-active {
+      background-color: getColor('main');
+      color: invertColor('main');
     }
 
-    .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;
-            }
-        }
+    &:disabled{
+      border-color: transparent !important;
     }
+  }
 }

package/framework/src/components/_select.scss

@@ -0,0 +1,131 @@
+$status-select: (
+  'success', 'error'
+);
+
+.select {
+  position: relative;
+  input { cursor: pointer }
+
+  select {
+    width: 100%;
+    @include input;
+    padding-right: 40px;
+    text-overflow: ellipsis;
+
+    &:focus {
+      padding-left: 15px !important;
+    }
+
+    // to prevent user agent style
+    &:disabled {
+      opacity: 1 !important;
+    }
+
+    @each $name in $status-select {
+      $color: getColor($name);
+      $color-invert: invertColor($name);
+      $brandName: getColorBrandName($name);
+  
+      &.is-#{$brandName} {
+        border: 1px solid $color;
+      }
+    }
+  }
+
+  .has-icons-left {
+    select {
+      padding-left: 45px;
+
+      &:focus {
+        padding-left: 44px !important;
+      }
+    }
+  }
+
+  &-options {
+    box-shadow: 0 0 8px #0000001a;
+    border-radius: 4px;
+    overflow: hidden;
+    position: absolute;
+    z-index: 1001;
+    left: 0;
+    right: 0;
+    margin-top: 8px;
+  }
+
+
+  .field {
+    margin-bottom: 0 !important;
+      .control {
+        position: relative;
+        &:after {
+          @include arrow();
+          right: 12px;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          transition: transform 0.3s;
+          min-width: 20px;
+          min-height: 20px;
+          mask-size: 20px;
+          pointer-events: none;
+        }
+      }
+
+      &.focus .control {
+          &:after {
+            transform:  rotate(180deg) translate(50%, 50%);
+          }
+      }
+  }
+
+
+  &-trilogy_modal_open {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+  }
+
+  .select-options {
+    background-color: getColor('background');
+
+    li.option {
+      padding: $spacing-3 $spacing-4;
+      cursor: pointer;
+      display: flex;
+      gap: $spacing-2;
+      @include hover;
+
+      &.is-disabled {
+        color: getColor('disabled');
+        background-color: getColor('disabled-fade');
+        cursor: not-allowed;
+      }
+
+      &[data-selected="true"] {
+        font-weight: $weight-black;
+
+        &:after {
+          content: "" !important;
+          mask-image: url('./assets/icons/all/check.svg') !important;
+          background-color: getColor('main') !important;
+          mask-size: 18px !important;
+          right: 18px !important;
+          height: 18px !important;
+          width: 18px !important;
+          position: absolute;
+        }
+      }
+    }
+  }
+
+  &-options-top {
+    top: auto;
+    bottom: 100%;
+    overflow-y: scroll;
+  }
+}
+
+

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,44 +126,34 @@ $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;
-  }
-
-
   @include touch {
     position: absolute;
     top: 10px;
-    left: 4px;
+    left: 0;
   }
 }
 
@@ -347,51 +201,17 @@ $step-gap-desktop: $step-width * 3;
   }
 }
 
-@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 {
-  0%, 100% {
-    -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
-  }
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}
 
-@-webkit-keyframes cssload-width {
+@keyframes progress {
   0%, 100% {
-    -webkit-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;
   }
 }
 
-@-moz-keyframes cssload-width {
-  0%, 100% {
-    -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
-  }
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}