@trilogy-ds/styles 0.0.2-calendar → 0.0.2-timepicker

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';

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