@trilogy-ds/styles 0.0.2-calendar → 0.0.3-alpha-prompt

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,4 @@
 @import 'textarea';
 @import 'timeline';
 @import 'title';
+@import 'prompt'

package/framework/src/components/_prompt.scss

@@ -0,0 +1,125 @@
+$height-prompt-item: 64px;
+
+.prompt {
+    box-shadow: 0 0 0 1px var(--color-stroke);
+    border-radius: var(--radius-small);
+    overflow: hidden;
+    * {
+        margin-bottom: 0px !important;
+    }
+    &:focus-within {
+        box-shadow: 0 0 0 2px currentColor;
+    }
+    &-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;
+            max-width: 59%;  
+        }
+        &-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;
+                }
+            }
+            &-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;
+        &-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');
+                }
+            }
+        }
+        &-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/_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/input/_input-icons.scss

@@ -27,7 +27,7 @@
     }
   }
   .has-icons-right {
-    .icon-right, button[data-show-pwd]{
+    .icon-right, button[data-show-pwd], button[data-show-calendar] {
       position: absolute;
       height: 100%;
       width: 45px;
@@ -41,7 +41,7 @@
       }
     }
 
-    button[data-show-pwd]{
+    button[data-show-pwd], button[data-show-calendar] {
       background-color: transparent;
       border:none;
       border-top-right-radius: $radius-small ;

package/framework/src/theming/buttons_partial.scss

@@ -9,8 +9,8 @@ Colors for buttons
 $button-colors: (
   'accent':['conversion', 'accent', 'background'],
   'primary': ['primary', 'main', 'background'],
-  'secondary': ['secondary', 'main-fade', 'main'],
-  'ghost': ['ghost', 'transparent', 'main']
+  'secondary': ['secondary', 'main-fade', 'font'],
+  'ghost': ['ghost', 'transparent', 'font']
 ) !default;
 
 %buttons-states {

package/framework/src/utilities/mixins/_mixins.scss

@@ -188,6 +188,7 @@
       border-radius: var(--radius);
       box-sizing: border-box;
       background-color: getColor('background');
+      height: 100%;
 
       &:before {
         top: 16px;

package/framework/src/utilities/mixins/_responsiveness.scss

@@ -6,13 +6,13 @@
 }
 
 @mixin until($device) {
-  @media screen and (max-width: $device - 1px) {
+  @media screen and (max-width: #{$device - 1px}) {
     @content;
   }
 }
 
 @mixin mobile {
-  @media screen and (max-width: $tablet - 1px) {
+  @media screen and (max-width: #{$tablet - 1px}) {
     @content;
   }
 }
@@ -24,13 +24,13 @@
 }
 
 @mixin tablet-only {
-  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
+  @media screen and (min-width: #{$tablet}) and (max-width: #{$desktop - 1px}) {
     @content;
   }
 }
 
 @mixin touch {
-  @media screen and (max-width: $desktop - 1px) {
+  @media screen and (max-width: #{$desktop - 1px}) {
     @content;
   }
 }
@@ -42,13 +42,13 @@
 }
 
 @mixin desktop-only {
-  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
+  @media screen and (min-width: #{$desktop}) and (max-width: #{$widescreen - 1px}) {
     @content;
   }
 }
 
 @mixin until-widescreen {
-  @media screen and (max-width: $widescreen - 1px) {
+  @media screen and (max-width: #{$widescreen - 1px}) {
     @content;
   }
 }
@@ -60,13 +60,13 @@
 }
 
 @mixin widescreen-only {
-  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
+  @media screen and (min-width: #{$widescreen}) and (max-width: #{$fullhd - 1px}) {
     @content;
   }
 }
 
 @mixin until-fullhd {
-  @media screen and (max-width: $fullhd - 1px) {
+  @media screen and (max-width: #{$fullhd - 1px}) {
     @content;
   }
 }
@@ -78,7 +78,97 @@
 }
 
 @mixin all-desktop-only {
-  @media screen and (min-width: $desktop) and (max-width: $fullhd - 1px) {
+  @media screen and (min-width: #{$desktop}) and (max-width: #{$fullhd - 1px}) {
     @content;
   }
 }
+
+// Responsive for container queries
+.query-container {
+  container-type: inline-size;
+}
+
+@mixin container-from($device) {
+  @container (min-width: #{$device}) {
+    @content;
+  }
+}
+
+@mixin container-until($device) {
+  @container (max-width: #{$device - 1px}) {
+    @content;
+  }
+}
+
+@mixin container-mobile {
+  @container (max-width: #{$tablet - 1px}) {
+    @content;
+  }
+}
+
+@mixin container-tablet {
+  @container (min-width: #{$tablet}) {
+    @content;
+  }
+}
+
+@mixin container-tablet-only {
+  @container (min-width: #{$tablet}) and (max-width: #{$desktop - 1px}) {
+    @content;
+  }
+}
+
+@mixin container-touch {
+  @container (max-width: #{$desktop - 1px}) {
+    @content;
+  }
+}
+
+@mixin container-desktop {
+  @container (min-width: #{$desktop}) {
+    @content;
+  }
+}
+
+@mixin container-desktop-only {
+  @container (min-width: #{$desktop}) and (max-width: #{$widescreen - 1px}) {
+    @content;
+  }
+}
+
+@mixin container-until-widescreen {
+  @container (max-width: #{$widescreen - 1px}) {
+    @content;
+  }
+}
+
+@mixin container-widescreen {
+  @container (min-width: #{$widescreen}) {
+    @content;
+  }
+}
+
+@mixin container-widescreen-only {
+  @container (min-width: #{$widescreen}) and (max-width: #{$fullhd - 1px}) {
+    @content;
+  }
+}
+
+@mixin container-until-fullhd {
+  @container (max-width: #{$fullhd - 1px}) {
+    @content;
+  }
+}
+
+@mixin container-fullhd {
+  @container (min-width: #{$fullhd}) {
+    @content;
+  }
+}
+
+@mixin container-all-desktop-only {
+  @container (min-width: #{$desktop}) and (max-width: #{$fullhd - 1px}) {
+    @content;
+  }
+}
+

package/framework/src/utilities/variables/_responsiveness.scss

@@ -1,7 +1,7 @@
 // The container horizontal gap, which acts as the offset for breakpoints
-$gap: 20px !default;
+$gap: 24px !default;
 
 $tablet: 768px !default;
 $desktop: 984px + 2 * $gap !default;
-$widescreen: 1200px + 2 * $gap !default;
-$fullhd: 1348px + 2 * $gap !default;
+$widescreen: 1192px + 2 * $gap !default;
+$fullhd: 1340px + 2 * $gap !default;

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.2-calendar",
+  "version": "0.0.3-alpha-prompt",
   "author": "Bouygues Telecom",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BouyguesTelecom/trilogy",
+    "directory": "packages/styles"
+  },
   "license": "UNLICENSED",
   "files": [
     "framework/src",