@trilogy-ds/styles 4.14.4 → 4.15.0-beta-1

package/framework/src/components/_accordion.scss

@@ -18,7 +18,7 @@
     flex-direction: column;
     background-color: getColor('background');
     font-size: $size-normal;
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
     border-radius: var(--radius);
     margin: 8px 0;
     min-height: 56px;
@@ -132,13 +132,5 @@
         }
       }
     }
-
-    .accordion-body {
-      .accordion-content,
-      p:last-child {
-        margin-bottom: 0 !important;
-        padding: 0 !important;
-      }
-    }
   }
 }

package/framework/src/components/_box.scss

@@ -54,7 +54,7 @@ a.box {
 
   &.is-flat {
     box-shadow: none;
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
 
     .box-header {
       margin-top: calc(var(--padding-box) * -1 - 1px);

package/framework/src/components/_button.scss

@@ -68,6 +68,9 @@ $button-border-width: 2px !default;
   [aria-disabled=true] {
     pointer-events: none;
   }
+  .icon{
+    justify-content: start;
+  }
 
   &.is-loading {
     background-color: getColor('neutral');

package/framework/src/components/_card.scss

@@ -67,7 +67,7 @@ $basis-values: (
 
   &.is-flat {
     box-shadow: none;
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
 
     .card-content {
       padding-left: 20px;
@@ -112,7 +112,7 @@ $basis-values: (
         flex-basis: map-get($basis-values, 'is-#{$i}');
       }
     }
-    
+
     .card-image {
       max-width: 100%;
 
@@ -236,7 +236,7 @@ $basis-values: (
     .card-image {
       order: 2;
     }
-    
+
     .card-content {
       order: 1;
     }

package/framework/src/components/_checkbox.scss

@@ -55,8 +55,8 @@
 .checkbox-tile {
   input:checked ~ label.checkbox-label {
     &:after {
-      top: 15px;
-      left: 15px;
+      top: 16px;
+      left: 16px;
     }
   }
 }

package/framework/src/components/_divider.scss

@@ -3,6 +3,7 @@
   flex: 1;
   height: 1px;
   background-color: getColor('neutral');
+  border: 1px solid #{getColor('stroke-fade')};
 }
 
 .divider {

package/framework/src/components/_flex-box.scss

@@ -35,7 +35,10 @@
   }
 
   @include mobile {
-    &:has(>.flex-item):not([class*='is-direction']) {
+    &:has(>.flex-item):not([class*='is-direction']):not(.is-mobile) {
+      flex-direction: column;
+    }
+    &:has(>.flex-item):not([class*='is-direction']):not(.is-mobile) {
       flex-direction: column;
     }
 
@@ -139,7 +142,7 @@
   }
 
   @include container-mobile {
-    &:has(>.flex-item):not([class*='is-direction']) {
+    &:has(>.flex-item):not([class*='is-direction']):not(.is-mobile) {
       flex-direction: column;
     }
 
@@ -705,7 +708,7 @@
       margin-bottom: auto !important;
     }
 
-    .flex-item {
+    > .flex-item {
       scroll-snap-align: center;
     }
   }
@@ -856,7 +859,7 @@
   );
 
   // SIZE
-  .flex-item {
+  > .flex-item {
     flex-grow: 1;
     &.is-narrow {
       flex: none;
@@ -877,17 +880,27 @@
       }
     }
   }
+  &.is-mobile{
+    @each $key, $value in $itemSize {
+      > .flex-item.is-#{$key} {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
 
-  @each $key, $value in $itemSize {
-    .flex-item.is-#{$key} {
-      flex: none;
-      --ColumnFraction: #{$value};
+  @include tablet {
+    @each $key, $value in $itemSize {
+      > .flex-item.is-#{$key} {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
     }
   }
 
   @include mobile {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-mobile {
+      > .flex-item.is-#{$key}-mobile {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -895,7 +908,7 @@
   }
   @include tablet {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-tablet {
+      > .flex-item.is-#{$key}-tablet {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -903,7 +916,7 @@
   }
   @include touch {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-touch {
+      > .flex-item.is-#{$key}-touch {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -911,7 +924,7 @@
   }
   @include desktop {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-desktop {
+      > .flex-item.is-#{$key}-desktop {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -919,7 +932,7 @@
   }
   @include widescreen {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-widescreen {
+      > .flex-item.is-#{$key}-widescreen {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -927,7 +940,7 @@
   }
   @include fullhd {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-fullhd {
+      > .flex-item.is-#{$key}-fullhd {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -936,7 +949,7 @@
 
   @include container-mobile {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-mobile {
+      > .flex-item.is-#{$key}-mobile {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -946,7 +959,7 @@
 
   @include container-tablet {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-tablet {
+      > .flex-item.is-#{$key}-tablet {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -956,7 +969,7 @@
 
   @include container-touch {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-touch {
+      > .flex-item.is-#{$key}-touch {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -966,7 +979,7 @@
 
   @include container-desktop {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-desktop {
+      > .flex-item.is-#{$key}-desktop {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -976,7 +989,7 @@
 
   @include container-widescreen {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-widescreen {
+      > .flex-item.is-#{$key}-widescreen {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -985,7 +998,7 @@
 
   @include container-fullhd {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-fullhd {
+      > .flex-item.is-#{$key}-fullhd {
         flex: none;
         --ColumnFraction: #{$value};
       }

package/framework/src/components/_index.scss

@@ -48,3 +48,6 @@
 @import 'textarea';
 @import 'timeline';
 @import 'title';
+@import 'prompt';
+@import 'timepicker-circular';
+@import 'timepicker'

package/framework/src/components/_prompt.scss

@@ -0,0 +1,143 @@
+$height-prompt-item: 64px;
+
+.prompt {
+    box-shadow: 0 0 0 1px var(--color-stroke);
+    border-radius: var(--radius-small);
+    overflow: hidden;
+    background-color: getColor('background');
+    &[aria-disabled] {
+        background-color: getColor('background') !important;
+    }
+    * {
+        margin-bottom: 0px !important;
+    }
+    &:focus-within {
+        box-shadow: 0 0 0 2px currentColor;
+    }
+    &.is-disabled {
+        box-shadow: 0 0 0 1px getColor('disabled') !important;
+    }
+    &-textarea {
+        textarea {
+            outline: none !important;
+            border: 0px !important;
+            background-color: initial !important;
+            min-height: 20px !important;
+            max-height: 180px !important;
+            transition: height 0.1s ease;
+            padding: 16px !important;
+            height: auto;
+            resize: none;
+            &[disabled] {
+                background-color: getColor('background') !important;
+            }
+        } 
+    }
+    &-files {
+        padding: 16px 16px 0px 16px !important;
+        margin:0 !important;
+        &-img {
+            border-radius: 8px;
+        }
+        &-file {
+            width: $height-prompt-item;
+            height: $height-prompt-item;
+            position: relative;
+        }
+        &-file-name {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        &-doc {
+            width: fit-content;
+            max-width: 264px;
+            &-preview {
+                width: 40px;
+                height: 40px; 
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: none;
+                .box-content {
+                    margin: 0px !important;
+                }
+            }
+
+            &-preview-content {
+                max-width: calc(100% - 56px);
+            }
+            &-card-content {
+                padding:8px !important
+            }
+        }
+        &-delete {
+            background-color: getColor('main-fade');
+            border-radius: 100px;
+            height: 20px;
+            width: 20px;
+        }
+        &-delete-img {
+            position: absolute;
+            top: 2px;
+            right: 2px;
+        }
+    }
+    &-toolbar {
+        display: flex;
+        gap: 16px;
+        padding: 0px 16px 16px 16px;
+        align-items: center;
+        justify-content: flex-end;
+        &-tools {
+            display: flex;
+            gap: 16px;
+            align-items: end;
+            margin-right: auto;
+        }
+        &-tool {
+            height: 36px;
+            select {
+                height: 36px;
+                border-width: 0px !important;
+                max-width: 180px;
+                &:focus {
+                    padding-left: 16px !important;
+                }
+                @include mobile {
+                    max-width: 110px;
+                }
+            }
+            .field .control::after {
+                right: 0px !important;
+            }
+            &.active {
+                background-color: getColor('main') !important;
+                .icon i {
+                    background-color: getColor('background');
+                }
+            }
+            &[disabled], &.is-disabled {
+                background-color: getColor('disabled-fade') !important;
+                cursor: not-allowed;
+            }
+        }
+        &-tool.icon_only {
+            width: 36px !important;
+        }
+        &-microphone {
+            border-radius: 100px;
+        }
+        &-tool-submit.streaming {
+            padding: 0;
+        }
+
+    }
+
+    &-stop_streaming {
+        background-color: getColor('background');
+        height: 16px;
+        width: 16px;
+        border-radius: 3px;
+    }
+}

package/framework/src/components/_radio.scss

@@ -71,12 +71,8 @@
       left: 18px;
     }
   }
+}
 
-  input:checked:disabled ~ label.radio-label {
-    &:after {
-      background-color: getColor('neutral');
-      top: 19px;
-      left: 19px;
-    }
-  }
+.radio-tile[aria-checked="true"] {
+  cursor: default;
 }

package/framework/src/components/_stepper.scss

@@ -1,22 +1,18 @@
 @use "sass:math";
 
-.stepper-wrapper {
+.stepper-items {
   display: flex;
   position: relative;
   justify-content: space-between;
   min-height: 44px;
-  gap: $spacing-4;
-
-  @include touch {
-    gap : $spacing-2;
-  }
+  gap: $spacing-2;
+  margin-top: $spacing-3;
 }
 
 .stepper-item {
   display: flex;
   flex-direction: column;
   width: 100%;
-
   &:before {
     content: "";
     display: block;
@@ -27,181 +23,65 @@
   }
 
   &.is-error {
-
     &:before {
       background-color: getColor('error') !important;
-
     }
+
     &.is-current{
       &:before{
         animation: progress 1s;
       }
-
-    }
-
-    .step-bars {
-      background: getColor('error') !important;
-    }
-
-    color: getColor('font');
-
-    .step-label {
-
-      &::before {
-        content: "";
-        mask-image: url('./assets/icons/all/times.svg') !important;
-        background-color: getColor('error') !important;
-        border-width: 0;
-        mask-size: 20px;
-        width: 20px;
-        height: 20px;
-        align-self: baseline;
-        margin-top: 2px;
-      }
-
-      .icon {
-        display: none;
-      }
     }
   }
 
   &.is-done {
-
     &:before {
       background-color: getColor('font');
     }
-
-    .step-bars {
-      background: getColor('font');
-      transition: background-color 1s ease-in-out;
-    }
-
-    .step-label {
-      &::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;
-        align-self: baseline;
-        margin-top: 2px;
-      }
-    }
   }
 
   &.is-current,
   &.is-active {
-
     &:before {
       background-color: getColor('main');
       animation: progress 1s;
     }
-
-    .step-bars {
-      background: getColor('main');
-    }
-
-    .step-label {
-      font-style: normal;
-      font-weight: 600;
-      font-size: 20px;
-      line-height: 22px;
-      width: max-content;
-
-      .icon [class^=tri-], .icon [class*=" tri-"] {
-        height: 22px;
-        width: 22px;
-        margin: 0 4px 0 -4px;
-      }
-
-      @include tablet-only {
-        width: 90% !important;
-      }
-
-      @include mobile {
-        font-size: 18px;
-        width: 90%;
-      }
-    }
   }
 }
 
-.step-bars {
-  height: 4px;
-  background: getColor('disabled');
-  border-radius: var(--radius-small);
-  display: none;
+.step-count {
+  margin-bottom: $spacing-2 !important;
 }
 
 .step-label {
-  display: flex;
-  align-items: center;
-  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;
-    height: auto;
-  }
-
-  @include touch {
-    position: absolute;
-    top: 10px;
-    left: 0;
-  }
+  transition: opacity 0.3s ease-in-out;
+  animation: fadeInLabel 0.4s ease-out;
 }
 
-@include desktop {
-  .step-count {
-    display: none;
-  }
-}
-
-@include mobile {
-  .step-count {
-    position: absolute;
-    top: 23px;
-    right: 8px;
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 600;
+@keyframes fadeInLabel {
+  0% {
+    opacity: 0;
   }
-
-  .stepper-item:not(.is-current) {
-    display: flex;
-
-    .step-label {
-      display: none;
-    }
+  100% {
+    opacity: 1;
   }
 }
 
-@include tablet-only {
+@include mobile{
   .step-count {
-    position: absolute;
-    top: 24px;
-    right: 8px;
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 600;
+    font-size: 12px !important;
+    line-height: 18px !important;
+  }
+  .step-label {
+    font-size: 14px !important;
+    line-height: 18px !important;
   }
 
-  .stepper-item:not(.is-current) {
-    display: flex;
-
-    .step-label {
-      display: none;
-    }
+  .stepper-wrapper .icon {
+    font-size: 16px !important;
   }
 }
 
-
 @keyframes progress {
   0%, 100% {
     background-image: linear-gradient(to right, transparent 0, transparent 50%, getColor('neutral') 50%, getColor('neutral') 100%);