@trilogy-ds/styles 0.0.1-beta.9 → 0.0.2-alpha-prompt

package/framework/src/components/_tabs.scss

@@ -1,85 +1,94 @@
-.tab-context {
+$height-tab-default: 64px;
+$height-arrow-default:48px;
+$height-arrow-small:30px;
+
+.tabs {
   @include overflow-touch;
   @include unselectable;
 
   align-items: stretch;
   justify-content: space-between;
   font-weight: $weight-normal;
-  background: white;
   width: 100%;
   text-align: center;
-  overflow: scroll;
-  overflow: -moz-scrollbars-none !important;
-  -ms-overflow-style: none !important;
-  scrollbar-width: none;
+  overflow: hidden;
+  position: relative;
+
+
+  .arrow-prev, .arrow-next {
+    z-index: 1;
+    height: 44px;
+    position: absolute;
+    top: 0px;
+    transition: opacity 0.3s ease;
+    opacity: 1;
+    background-color: getColor('background');
+  }
 
-  @include mobile {
-    text-align: left;
+  .arrow-prev {
+    left: 0px;
+  }
+
+  .arrow-next {
+    right: 0px;
   }
 
+
   &::-webkit-scrollbar {
     width: 0 !important;
     height: 0 !important;
+    scrollbar-width: none !important;
   }
 
   &.is-inverted {
     background-color: getColor('font');
-    .tabs > .tab {
+
+    .tab-list > .tab {
+      color: getColor('background') !important;
+
+      &.is-active {
+        border-bottom-color: currentColor;
+      }
+
+      #{$hoverSelector} {
         color: getColor('background') !important;
+        cursor: pointer;
+      }
 
-        &.is-active {
-            &::after {
-                content: "";
-                width: calc(100% - 16px);
-                height: 2px;
-                border-radius: 2px;
-                font-size: 20px;
-                background-color: getColor('background');
-                bottom: -2px;
-                left: 8px;
-            }
-        }
-        &:hover:not(.is-disabled) {
-          color: getColor('background') !important;
-          cursor: pointer;
-        }
+      &:focus-visible {
+        border-color: getColor('background');
+      }
 
-        &:focus-visible {
-          border-color: getColor('background');
-        }
+    }
 
-        &.is-disabled {
-            color: getColor('grey-light');
-        }
+    .arrow-prev, .arrow-next {
+      background-color: getColor('font');
     }
+
   }
 
-  &.has-text-left {
-    .tabs > .tab:first-child {
-      margin-left: 24px;
-    }
+  &:has(.tab-list.is-aligned-start) {
+    text-align: left;
   }
 
-  .tabs {
+  &:has(.tab-list.is-aligned-end) {
+    text-align: right;
+  }
+
+  .tab-list {
     background-color: transparent;
     height: 48px;
     overflow-x: auto;
     white-space: nowrap;
-    display: inline-flex;
-
-    &.is-centered {
-        justify-content: center;
-    }
+    overflow-y: hidden;
+    max-width: 100%;
 
-    &.is-right {
-        justify-content: flex-end;
+    &::-webkit-scrollbar {
+      width: 0 !important;
+      height: 0 !important;
+      scrollbar-width: none !important;
     }
 
-    &.is-left {
-        justify-content: flex-start;
-    }
-
-
     &.is-fullwidth {
       @include desktop {
         > * {
@@ -93,71 +102,48 @@
       box-shadow: none;
     }
 
-    &.is-icons {
-      height: 64px;
+    @include mobile {
+      justify-content: flex-start;
     }
 
-    @include mobile {
-      justify-content: flex-start ;
-      > .tab:first-child {
-        margin-left: 24px;
+    &:has(.tab .icon) {
+      height: 64px;
+      .arrow-prev, .arrow-next {
+      height: 60px;
       }
     }
 
     > .tab {
+      display: inline-block;
+      line-height: normal;
+      font-family: $family-primary;
       height: calc(100% - 4px);
       background-color: transparent;
-      border: none;
       color: getColor('font');
-      font-family: $body-family;
       text-decoration: none;
       outline: none;
-      padding:  6px;
-      font-size: $text-14;
-      border: 2px solid transparent;
-      border-radius: 4px;
-
-      &:not(:last-child) {
-        margin-right: 16px;
-      }
+      padding: 12px 24px;
+      font-size: $text-16;
+      border: 0px solid transparent;
+      border-bottom: 1px solid getColor('neutral');
 
       .tab-icon {
         margin-top: 2px;
       }
 
-      &:not(button) {
-        .tab-icon {
-            margin-top: 4px;
-        }
-      }
-
-      @include mobile {
-        font-size: $text-14;
-      }
-
-
-
       &.is-active {
-        color: getColor('alternate');
-        font-weight: $weight-semibold;
+        color: getColor('main');
         position: relative;
-
-        &::after {
-          content: "";
-          width: calc(100% - 16px);
-          height: 2px;
-          border-radius: 2px;
-          font-size: 20px;
-          background-color: getColor('alternate');
-          position: absolute;
-          bottom: -2px;
-          left: 8px
-        }
+        border-bottom-color: getColor('main');
+        font-weight: $weight-bold;
+        border-bottom-width: 2px;
       }
 
-      &:hover:not(.is-disabled) {
-        color: getColor('alternate');
+      &:hover:not([disabled]) {
+        color: getColor('main');
+        border-bottom-color: currentColor;
         cursor: pointer;
+        border-bottom-width: 2px;
 
         .icon.is-small [class^=tri-]::before, .icon.is-small [class*=" tri-"]::before {
           font-size: 22px !important;
@@ -165,26 +151,47 @@
         }
       }
 
-      &:focus-visible{
+      &:focus-visible {
         border-color: currentColor;
-        color: getColor('alternate');
+        color: getColor('main');
       }
 
       .icon {
         height: 0;
       }
 
-      .icon.is-small, .icon.is-small{
+      .icon.is-small, .icon.is-small {
         font-size: 22px;
       }
 
-      &.is-disabled {
-        color: getColor('grey');
-        cursor: default;
+      &[disabled], &[aria-disabled=true] {
+        background-color: transparent !important;
+        border-bottom-color: getColor('neutral') !important;
+        &.is-active{
+          border-bottom-color: currentColor !important;
+        }
       }
     }
   }
 
+  &.is-fullwidth  .tab-list {
+    display: flex;
+    > .tab {
+      flex:1;
+    }
+  }
+
+  &.is-small{
+
+    .tab-list {
+      & > .tab {
+        font-size: $text-14 ;
+        padding: 12px 16px;
+      }
+    }
+  }
+
+
   .tab-panels {
     padding-top: $spacing-3;
     padding-bottom: $spacing-3;
@@ -192,6 +199,14 @@
     .tab-panel {
       transition: opacity 2s ease-in-out;
       transition-delay: 1s;
+
+      * {
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        -ms-user-select: text;
+        user-select: text;
+      }
+
       &:not(.is-active) {
         display: none;
       }
@@ -199,6 +214,7 @@
       &.is-active {
         animation: fade-in 250ms;
       }
+
       @keyframes fade-in {
         from {
           opacity: 0;

package/framework/src/components/_tag.scss

@@ -0,0 +1,114 @@
+$tag-delete-margin: 1px !default;
+
+// container pour multi-tags ou tags avec actions
+.tags {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: $spacing-3;
+  // multi-tags : ajout d'une marge à droite de chaque tag
+
+  // centrage des tags
+  &.is-centered {
+    justify-content: center;
+  }
+
+  // tags avec actions
+  &.has-addons {
+    cursor: pointer;
+
+    .tag {
+
+      &:not(:first-child) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:first-child {
+        padding-right: 5px;
+      }
+
+      + .tag {
+        padding: 0;
+        position: relative;
+        width: 25px;
+        border-width: 0;
+
+        // fixme : cette règle ne devrait-elle pas s'appliquer à TOUS les buttons ?
+        cursor: inherit;
+
+        // affichage d'une fausse croix avec 2 traits penchés
+        &:empty {
+          &::before,
+          &::after {
+            position: absolute;
+            content: '';
+            height: 10px;
+            width: 2px;
+            background-color: currentColor;
+            top: 50%;
+            left: 30%;
+          }
+
+          &::before {
+            transform: translate(50%, -50%) rotate(45deg);
+          }
+
+          &::after {
+            transform: translate(50%, -50%) rotate(-45deg);
+          }
+        }
+      }
+    }
+
+    &.is-inverted {
+      .tag {
+        background-color: getColor('background');
+      }
+    }
+
+  }
+}
+
+.tag {
+  align-items: center;
+  background-color: getColor('neutral-fade');
+  border-radius: 9999px;
+  color: getColor('font');
+  display: inline-flex;
+  font-size: $size-medium;
+  font-weight: $weight-medium;
+  height: 28px;
+  justify-content: center;
+  line-height: 20px;
+  padding: $spacing-1 $spacing-2;
+  white-space: nowrap;
+
+  &.is-small {
+    font-size: $text-12;
+    line-height: 15px;
+    height: 23px;
+  }
+
+
+  @include mobile {
+    font-size: 12px;
+    line-height: 15px;
+  }
+
+  @each $name in $colors-feedback {
+    &.is-#{$name}:not(.is-inverted) {
+      background-color: fadeColor($name);
+    }
+    &.is-inverted.is-#{$name} {
+      color: getColor($name);
+      background-color: invertColor($name);
+    }
+  }
+}

package/framework/src/components/_text.scss

@@ -0,0 +1,55 @@
+@import "../utilities/variables/_font.scss";
+
+.text {
+  @each $text-level in $text-levels {
+    $i: index($text-levels, $text-level);
+    $font-size: nth($text-level, 1);
+    $line-height: nth($text-level, 2);
+
+    &.is-level-#{$i} {
+      font-size: $font-size;
+      line-height: $line-height;
+      font-family: $family-primary;
+    }
+  }
+
+  &.is-inverted {
+    color: getColor('background');
+  }
+
+  @include mobile {
+    @each $text-level-mobile in $text-levels-mobile {
+      $i: index($text-levels-mobile, $text-level-mobile);
+    }
+  }
+
+  &.is-wrapped {
+    word-break: break-word;
+  }
+
+  &.bold {
+    font-weight: $weight-bold;
+  }
+}
+
+.span {
+  font-style: inherit;
+  font-weight: inherit;
+}
+
+.strong {
+  color: inherit;
+  font-weight: $weight-bold;
+}
+
+.sup {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+  top: -0.4em;
+  font-size: 0.7em;
+}
+
+.small {
+  font-size: 0.875em;
+}

package/framework/src/components/_textarea.scss

@@ -0,0 +1,46 @@
+.textarea-wrapper {
+
+  .textarea-label {
+    display: inline-block;
+    margin-bottom: 6px;
+  }
+
+  .textarea-sample {
+    margin-bottom: 10px !important;
+  }
+
+  textarea.textarea {
+    &::placeholder, label {
+      font-size: 16px;
+    }
+  }
+
+  .icon {
+    align-items: flex-start !important;
+    padding-top: 18px !important;
+  }
+
+  // Colors
+  @each $name, $pair in $colors-brand-functionnal {
+    $color: getColor($name);
+    $color-invert: invertColor($name);
+    $brandName: getColorBrandName($name);
+    &.is-#{$brandName} {
+      textarea.textarea {
+        border-color: $color;
+      }
+
+    }
+  }
+
+  .counter {
+    position: absolute;
+    bottom: $spacing-2;
+    right: $spacing-4;
+    font-size: 10px;
+  }
+
+  .help ~ .counter {
+    bottom: $spacing-6;
+  }
+}