@trilogy-ds/styles 0.0.2-beta-color → 0.0.2-fix-timepicker

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/_autocomplete.scss

@@ -3,6 +3,10 @@
 .is-autocomplete-container {
   position: relative;
 
+  .field{
+    margin: 0!important;
+  }
+
   .is-autocomplete {
     .autocomplete-menu {
       display: none;
@@ -18,6 +22,7 @@
         overflow-y: auto;
         background-color: getColor('background');
         z-index: 10000;
+        margin-top: $spacing-2;
       }
 
       .autocomplete-item {

package/framework/src/components/_autolayout.scss

@@ -161,6 +161,9 @@ body:not(.is-tight) {
   .title.is-level-6 + .subtitle:not(.flex-box > .title.is-level-6 + .subtitle):not(:last-child) {
     margin-bottom: 12px;
   }
+  .is-autocomplete-container:not(.flex-box > .is-autocomplete-container):not(:last-child) {
+    margin-bottom: 24px;
+  }
 }
 
 @include mobile() {
@@ -327,6 +330,9 @@ body:not(.is-tight) {
   .title.is-level-6 + .subtitle:not(.flex-box > .title.is-level-6 + .subtitle):not(:last-child) {
       margin-bottom: 8px;
     }
+  .is-autocomplete-container:not(.flex-box > .is-autocomplete-container):not(:last-child) {
+      margin-bottom: 16px;
+    }
 
   }
 }

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,13 @@ $button-border-width: 2px !default;
   [aria-disabled=true] {
     pointer-events: none;
   }
+  &:has(.icon) {
+    gap: $spacing-2;
+  }
+
+  .icon {
+    width: auto;
+  }
 
   &.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

@@ -31,7 +31,8 @@
 
 .checkbox,
 .checkbox-tile {
-  input:checked ~ label.checkbox-label {
+  input:checked ~ label.checkbox-label,
+  input:checked ~ .checkbox-container {
     &:before {
       background-color: getColor('main');
     }
@@ -44,7 +45,8 @@
     }
   }
 
-  label.checkbox-label {
+  label.checkbox-label,
+  .checkbox-container {
     &:before,
     &:after {
       border-radius: var(--radius-small);
@@ -53,7 +55,8 @@
 }
 
 .checkbox-tile {
-  input:checked ~ label.checkbox-label {
+  input:checked ~ label.checkbox-label,
+  input:checked ~ .checkbox-container {
     &:after {
       top: 15px;
       left: 15px;
@@ -68,4 +71,3 @@
     }
   }
 }
-

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;
     }
   }
@@ -830,11 +833,7 @@
   }
 
   &.is-gapless {
-    gap: 0;
-
-    > .flex-item {
-      --ColumnGap: 1px;
-    }
+    --ColumnGap: 0px;
   }
 
   $itemWidth: calc((100% / (var(--ColumnFraction))) - ((((var(--ColumnFraction)) - 1) / (var(--ColumnFraction))) * var(--ColumnGap)));
@@ -856,8 +855,10 @@
   );
 
   // SIZE
-  .flex-item {
+  > .flex-item {
     flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
     &.is-narrow {
       flex: none;
       width: auto;
@@ -877,17 +878,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 +906,7 @@
   }
   @include tablet {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-tablet {
+      > .flex-item.is-#{$key}-tablet {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -903,7 +914,7 @@
   }
   @include touch {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-touch {
+      > .flex-item.is-#{$key}-touch {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -911,7 +922,7 @@
   }
   @include desktop {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-desktop {
+      > .flex-item.is-#{$key}-desktop {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -919,7 +930,7 @@
   }
   @include widescreen {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-widescreen {
+      > .flex-item.is-#{$key}-widescreen {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -927,7 +938,7 @@
   }
   @include fullhd {
     @each $key, $value in $itemSize {
-      .flex-item.is-#{$key}-fullhd {
+      > .flex-item.is-#{$key}-fullhd {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -936,7 +947,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 +957,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 +967,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 +977,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 +987,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 +996,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/_icon.scss

@@ -7,20 +7,20 @@ $icon-padding-default: 8px;
 $icon-dimensions-default: 15px;
 
 $size: (
-  'default': (
-    container: 20px, icon:15px
+  'smaller': (
+    container: 20px, icon:16px, radius: var(--radius-small)
   ),
   'small': (
-    container: 32px, icon: 20px
+    container: 32px, icon: 20px, radius: var(--radius-small)
   ),
   'medium': (
-    container: 48px, icon: 32px
+    container: 48px, icon: 32px, radius: var(--radius-medium)
   ),
   'large': (
-    container: 66px, icon: 44px
+    container: 66px, icon: 44px, radius: var(--radius-medium)
   ),
   'huge': (
-    container: 99px, icon: 66px
+    container: 99px, icon: 66px, radius: var(--radius-large)
   )
 );
 
@@ -31,7 +31,7 @@ $size: (
     font-size: inherit;
     width: 1.5em;
     height: 1.5em;
-
+    border-radius: var(--radius-small);
     [class^="tri-"],
     [class*=" tri-"] {
       &::before {
@@ -53,6 +53,7 @@ $size: (
   @each $name, $sizeConfig in $size {
     &.is-#{$name} {
       font-size: map.get($sizeConfig, 'icon');
+      border-radius: map.get($sizeConfig, 'radius');
       [class^="tri-picto-"],
       [class*=" tri-picto-"] {
         min-height: 1.5em !important;
@@ -91,7 +92,7 @@ $size: (
 
     &.is-stretched {
         transform: skewX(-#{$icon-stretching-level});
-        border-top-right-radius: 9px;
+        border-radius: 0 9px 0 0;
         background-color: getColor('font');
 
       [class^="tri-"],

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/_link.scss

@@ -2,6 +2,10 @@
   [disabled] {
     @include disabledRulesWithoutBG;
   }
+
+  &.is-small {
+    font-size: $size-6;
+  }
 }
 
 .link:not([disabled]) {

package/framework/src/components/_prompt.scss

@@ -0,0 +1,156 @@
+$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=true] {
+        background-color: getColor('disabled-fade') !important;
+        border: 1px solid getColor('disabled');
+    }
+    * {
+        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;
+        } 
+    }
+    &-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;
+        }
+        &-tool-submit:not(.active):not(:disabled) {
+            background-color: getColor('disabled-fade') !important;
+            &:hover {
+                filter: brightness(1) !important;
+                cursor: default !important;
+            }
+            i {
+                background-color: getColor('disabled') !important;
+            }
+        }
+        &-tool-submit:disabled {
+            background-color: getColor('disabled') !important;
+            i {
+                background-color: getColor('disabled-fade') !important;
+            }
+        }
+    }
+
+    &-stop_streaming {
+        background-color: getColor('background');
+        height: 16px;
+        width: 16px;
+        border-radius: 3px;
+    }
+}

package/framework/src/components/_radio.scss

@@ -31,7 +31,8 @@
 
 .radio,
 .radio-tile {
-  input:checked ~ label.radio-label {
+  input:checked ~ label.radio-label,
+  input:checked ~ .radio-container {
     cursor: default;
 
     &:after {
@@ -41,7 +42,8 @@
     }
   }
 
-  label.radio-label {
+  label.radio-label,
+  .radio-container {
     &:before,
     &:after {
       border-radius: 9999px;
@@ -61,18 +63,19 @@
       @include hoverRules()
     }
   }
-
 }
 
 .radio-tile {
-  input:checked ~ label.radio-label {
+  input:checked ~ label.radio-label,
+  input:checked ~ .radio-container {
     &:after {
       top: 18px;
       left: 18px;
     }
   }
 
-  input:checked:disabled ~ label.radio-label {
+  input:checked:disabled ~ label.radio-label,
+  input:checked:disabled ~ .radio-container {
     &:after {
       background-color: getColor('neutral');
       top: 19px;

package/framework/src/components/_stepper.scss

@@ -143,20 +143,36 @@
   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;
-  }
+.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;
+}
+
+.stepper-content {
+  margin-bottom: $spacing-3 !important;
+}
+
+.stepper-steps {
+  margin-bottom: $spacing-2 !important;
+}
+
+
 @include desktop {
   .step-count {
     display: none;
@@ -180,6 +196,20 @@
       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 {
@@ -194,9 +224,9 @@
 
   .stepper-item:not(.is-current) {
     display: flex;
-
+  
     .step-label {
-      display: none;
+    display: none;
     }
   }
 }
@@ -214,4 +244,11 @@
   }
 }
 
-
+@keyframes fadeInLabel {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}