@trilogy-ds/styles 0.0.16-esm-cjs → 0.0.18-esm-cjs

package/framework/src/components/_index.scss

@@ -9,11 +9,13 @@
 @import 'box';
 @import 'breadcrumb';
 @import 'button';
+@import 'calendar';
 @import 'card';
 @import 'checkbox';
 @import 'chips';
 @import 'container';
 @import 'countdown';
+@import 'date-picker';
 @import 'divider';
 @import 'fab';
 @import 'flex-box';

package/framework/src/components/_tabs.scss

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

@@ -13,7 +13,7 @@ $label-weight: $weight-bold;
 
   .input-label {
     display: inline-block;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
     font-weight: 500;
   }
 
@@ -443,7 +443,7 @@ $label-weight: $weight-bold;
   &:has(input[disabled]), &:has(select[disabled]), &:has(textarea[disabled]) {
     @include disabledRulesWithoutBG;
     .icon {
-      color: getColor('disabled');    
+      color: getColor('disabled');
     }
   }
 }
@@ -593,3 +593,10 @@ $label-weight: $weight-bold;
     }
   }
 }
+
+.group-label {
+    display: inline-block;
+    margin-bottom: 8px !important;
+    font-weight: 500;
+    line-height: 20px;
+}

package/framework/src/components/input/_input-gauge.scss

@@ -18,11 +18,19 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
 
     .security {
       display: flex;
       align-items: center;
       margin-bottom: 4px;
+      flex-basis: 50%;
+      flex-shrink: 1;
+      flex-grow: 0;
+
+      &:nth-child(even) {
+        justify-content: flex-end;
+      }
 
       .icon {
         position: relative;

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

@@ -16,6 +16,7 @@ $colors: (
   'main':[ #3d5d7e, 'main', 'white'],
   'main-fade':[ #eff2f8, 'main-fade', 'white'],
   'accent':[ #da641b,'accent', 'white'],
+  'accent-fade':[ #faebe3,'accent-fade', 'white'],
   'font':[ #3d5d7e, 'font', 'white'],
   'font-placeholder':[ #687a87, 'font-placeholder', 'white'],
   'success':[ #007B52, 'success', 'white'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.16-esm-cjs",
+  "version": "0.0.18-esm-cjs",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [