@trilogy-ds/styles 0.0.3-calendar → 0.0.3-fix-timepicker

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

@@ -15,6 +15,8 @@
 @import 'chips';
 @import 'container';
 @import 'countdown';
+@import 'date-picker';
+@import 'dropdown';
 @import 'divider';
 @import 'fab';
 @import 'flex-box';
@@ -46,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;
+  }
+}

package/framework/src/components/_sticker.scss

@@ -14,25 +14,29 @@ $sticker-height: 35px;
   max-height: 36px;
 
   .icon {
-    width: 1em;
-    margin-right: 5px;
+    font-size: 20px;
+    width: auto;
+    height: auto;
+    margin-right: $spacing-2;
   }
 
   &.is-small {
     .icon {
-      margin-right: 3px;
+      margin-right: $spacing-1;
     }
   }
 
   &:not(.is-hat) {
     width: fit-content;
-
     @include mobile {
       font-size: 12px;
       padding: $spacing-1 $spacing-2;
       height: auto;
       line-height: 15px;
-
+      .icon {
+        font-size: 16px;
+        margin-right: $spacing-1;
+      }
     }
   }
 
@@ -59,7 +63,11 @@ $sticker-height: 35px;
     padding: $spacing-1 $spacing-2;
     height: auto;
     line-height: 15px;
-
+    .icon {
+      font-size: 16px;
+      height: 15px;
+      margin-right: $spacing-1;
+    }
   }
 
   // deprecated

package/framework/src/components/_table.scss

@@ -26,7 +26,7 @@
 
   td,
   th {
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
     border-width: 0;
     padding: 20px;
     vertical-align: top;
@@ -71,7 +71,7 @@
     }
 
     td {
-      border-bottom: var(--border);
+      border-bottom: 1px solid #{getColor('stroke-fade')};
 
       > p {
         margin: 0;
@@ -153,15 +153,15 @@
   }
 
   &.has-border-all {
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
 
     th {
-      border-right: var(--border);
+      border-right: 1px solid #{getColor('stroke-fade')};
     }
 
     td {
       &:not(:last-child) {
-        border-right: var(--border);
+        border-right: 1px solid #{getColor('stroke-fade')};
       }
     }
   }
@@ -169,13 +169,13 @@
   &.has-border-inner {
     th {
       &:not(:last-child) {
-        border-right: var(--border);
+        border-right: 1px solid #{getColor('stroke-fade')};
       }
     }
 
     td {
       &:not(:last-child) {
-        border-right: var(--border);
+        border-right: 1px solid #{getColor('stroke-fade')};
       }
     }
   }
@@ -215,7 +215,7 @@
 
       tr:not(:first-child) {
         td {
-          border-top: var(--border);
+          border-top: 1px solid #{getColor('stroke-fade')};
         }
       }
 

package/framework/src/components/_tabs.scss

@@ -64,7 +64,7 @@ $height-arrow-small:30px;
     .arrow-prev, .arrow-next {
       background-color: getColor('font');
     }
-    
+
   }
 
   &:has(.tab-list.is-aligned-start) {
@@ -174,6 +174,12 @@ $height-arrow-small:30px;
     }
   }
 
+  &.is-fullwidth  .tab-list {
+    display: flex;
+    > .tab {
+      flex:1;
+    }
+  }
 
   &.is-small{
 
@@ -194,6 +200,13 @@ $height-arrow-small:30px;
       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;
       }

package/framework/src/components/_timepicker-circular.scss

@@ -0,0 +1,88 @@
+$CIRCLE_SIZE: 172px;
+$CURSOR_SIZE: 30px;
+
+.timepicker-circular {
+
+  &_dot-hour {
+    background-color: getColor('neutral');
+    &.is-filled {
+        background-color: getColor('main');
+    }
+  }
+
+  &_progress {
+    stroke: getColor('main');
+  }
+
+  &_progress-container {
+    stroke: getColor('main-fade');
+  }
+
+  .circle_container {
+    width: $CIRCLE_SIZE;
+    height: $CIRCLE_SIZE;
+    position: relative;
+
+    &-cursor {
+      position: absolute;
+      width: $CURSOR_SIZE;
+      height: $CURSOR_SIZE;
+      border-radius: 50%;
+      background-color: getColor('neutral-fade');
+      border: 2px solid getColor('main');
+      z-index: 20;
+    }
+
+
+
+    &-inputs {
+      position: absolute;
+      display: flex;
+      flex-direction:row;
+      align-items: center;
+      justify-content: center;
+      z-index:  30;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      cursor:default;
+      pointer-events:none;
+      gap: $spacing-1;
+
+      &-wrapper {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        width: 40px;
+        gap: $spacing-1;
+        pointer-events: auto
+      }
+
+      &-wrapper-input {
+          @include input;
+          width: 36px;
+          height: 36px;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: default;
+          pointer-events: auto
+      }
+
+      &-separator {
+        height: 36px;
+        margin-bottom: 10px
+      }
+    }
+  }
+
+  .non_draggable_zone {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    z-index: 25;
+    cursor: default;
+  }
+}

package/framework/src/components/_timepicker.scss

@@ -0,0 +1,79 @@
+$CIRCLE_SIZE: 172px;
+$CURSOR_SIZE: 30px;
+
+.timepicker {
+
+  &-menu {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: getColor('background');
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    max-height: 300px;
+    max-width: 450px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &-title {
+      flex:1
+
+    }
+
+    .flex-box {
+      margin-bottom: 0px !important;
+    }
+
+    &-divider {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      height: 90%;
+      background-color: getColor('neutral');
+      width: 1px;
+    }
+  }
+
+  &-selector {
+    overflow-y: auto;
+    overflow-x: hidden,;
+    padding: 8px 0px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    flex: 1;
+    gap: 8px;
+    display: flex;
+    flex-direction: column;
+    
+    &-item {
+      padding: 12px;
+      border-radius: 8px;
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      &.is-active {
+        background-color: getColor('main');
+        color: getColor('background');
+      }
+
+      &:hover:not(.is-active) {
+        @include hoverRules();
+      }
+    }
+  }
+
+  div::-webkit-scrollbar {
+    display: none;
+  }
+
+}

package/framework/src/components/alert/_alert.scss

@@ -41,7 +41,7 @@ a.alert {
     padding-bottom: 0 !important;
   }
 
-  .icon {
+  &-icon {
     padding: 0;
   }
 
@@ -58,7 +58,7 @@ a.alert {
       background-color: fadeColor($name);
       border: 1px solid getColor($name);
 
-      .icon {
+      .alert-icon {
         color: getColor($name);
       }
     }