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

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/components/progress/_progress.scss

@@ -1,7 +1,5 @@
 @use "sass:math";
 
-@import "../../base/color";
-
 $progressbar-height: 10px;
 $progressbar-small: 5px;
 

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

@@ -1,6 +1,7 @@
 @charset "utf-8";
 
 @import "utilities/all";
+@import "base/color";
 @import "base/all";
 @import "elements";
 @import "components";

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

@@ -44,6 +44,60 @@
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
+    &.is-grid {
+      display: grid;
+      & > .#{$type}-tile {
+        width: 100%;
+        max-width: none;
+      }
+    }
+    @for $i from 1 through 12 {
+      &.is-grid-cols-#{$i} {
+        grid-template-columns: repeat(#{$i}, 1fr);
+      }
+    }
+    @include mobile {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-mobile-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include tablet {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-tablet-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include touch {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-touch-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include desktop {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-desktop-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include widescreen {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-widescreen-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include fullhd {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-fullhd-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
   }
 
   //BOTH
@@ -51,7 +105,8 @@
   .#{$type}-tile {
     position: relative;
 
-    label.#{$type}-label {
+    label.#{$type}-label, 
+    .#{$type}-container {
       cursor: pointer;
       font-size: 14px;
 
@@ -73,7 +128,8 @@
       position: absolute;
       outline: none;
 
-      &:checked ~ label.#{$type}-label {
+      &:checked ~ label.#{$type}-label,  
+      &:checked ~ .#{$type}-container {
         border-color: getColor('main');
 
         &:before {
@@ -84,18 +140,22 @@
           background-color: getColor('main');
         }
       }
-      &:focus-visible ~ label.#{$type}-label:before {
+
+      &:focus-visible ~ label.#{$type}-label:before,
+      &:focus-visible ~ .#{$type}-container:before {
         outline: 1px solid;
       }
 
       &:disabled,
       &:disabled:checked {
-        & ~ label.checkbox-label {
+        & ~ label.checkbox-label,
+        & ~ .checkbox-container {
           &:after {
             background-color: getColor('disabled-fade');
           }
         }
-        & ~ label.radio-label {
+        & ~ label.radio-label,
+        & ~ .radio-container {
           &:after {
             background-color: getColor('disabled');
           }
@@ -103,7 +163,8 @@
       }
 
       &:disabled {
-        & ~ label.#{$type}-label {
+        & ~ label.#{$type}-label,
+         & ~ .#{$type}-container {
           &:after {
             background-color: transparent;
           }
@@ -164,11 +225,14 @@
 
     input:disabled,
     input:disabled:checked {
-      & ~ label.#{$type}-label {
+      & ~ label.#{$type}-label,
+      & ~ .#{$type}-container {
         @include disabledRules;
       }
     }
-    &:has(input:focus-visible) label.#{$type}-label{
+
+    &:has(input:focus-visible) label.#{$type}-label,
+    &:has(input:focus-visible) .#{$type}-container{
       outline:  1px solid;
     }
 
@@ -180,7 +244,8 @@
       margin-right: 0;
     }
 
-    label.#{$type}-label {
+    label.#{$type}-label,
+    .#{$type}-container {
       display: block;
       position: relative;
       padding: 40px 16px 16px;
@@ -188,30 +253,39 @@
       border-radius: var(--radius);
       box-sizing: border-box;
       background-color: getColor('background');
+      height: 100%;
 
       &:before {
         top: 16px;
         left: 16px;
       }
 
-      span.#{$type}-title {
+      span.#{$type}-title,
+      label.#{$type}-title {
         font-weight: bold;
         width: 100%;
         display: block;
         font-size: 16px;
       }
+
+      label.#{$type}-title {
+        cursor: pointer;
+      }
     }
 
     input {
-      &:not(:disabled):not(:checked) ~ label.radio-label {
+      &:not(:disabled):not(:checked) ~ label.radio-label,
+       &:not(:disabled):not(:checked) ~ .radio-container {
         @include label-states;
       }
 
-      &:not(:disabled) ~ label.checkbox-label {
+      &:not(:disabled) ~ label.checkbox-label,
+      &:not(:disabled) ~ .checkbox-container {
         @include label-states;
       }
 
-      &:checked:not(:disabled) ~ label.#{$type}-label {
+      &:checked:not(:disabled) ~ label.#{$type}-label,
+       &:checked:not(:disabled) ~ .#{$type}-container {
         border-color: getColor('main');
         border-width: 2px;
         padding: 15px;
@@ -222,20 +296,23 @@
           left: 15px;
         }
 
-        span.#{$type}-title {
+        span.#{$type}-title,
+        label.#{$type}-title  {
           color: getColor('main');
         }
       }
 
       &:disabled {
-        & ~ label.#{$type}-label {
+        & ~ label.#{$type}-label,
+        & ~ .#{$type}-container  {
           &:before {
             border-color: getColor('disabled') !important;
           }
         }
       }
 
-      &:disabled:checked ~ label.#{$type}-label {
+      &:disabled:checked ~ label.#{$type}-label,
+      &:disabled:checked ~ .#{$type}-container {
         .checkbox-title {
           color: getColor('disabled');
         }
@@ -262,13 +339,15 @@
       }
 
       input {
-        &:checked:not(:disabled) ~ label.#{$type}-label {
+        &:checked:not(:disabled) ~ label.#{$type}-label,
+        &:checked:not(:disabled) ~ .#{$type}-container {
           padding: ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-8 - 1px);
         }
 
       }
 
-      label.#{$type}-label {
+      label.#{$type}-label,
+      .#{$type}-container {
         width: 100%;
         display: flex;
         align-items: center;

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

@@ -12,6 +12,7 @@ $suffix: '';
 $colors: (
   'background': [#fff, 'white', 'main'],
   'stroke':[ #727272, 'stroke', 'white' ],
+  'stroke-fade':[ #cadbe8, 'stroke-fade', 'white' ],
   'transparent': ['transparent', 'transparent', 'transparent'],
   'main':[ #3d5d7e, 'main', 'white'],
   'main-fade':[ #eff2f8, 'main-fade', 'white'],

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;
+$desktop: 976px + 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.3-calendar",
+  "version": "0.0.3-fix-timepicker",
   "author": "Bouygues Telecom",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BouyguesTelecom/trilogy",
+    "directory": "packages/styles"
+  },
   "license": "UNLICENSED",
   "files": [
     "framework/src",