@trilogy-ds/styles 0.0.2-beta-color → 0.0.2-fix-timepicker

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/_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/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;
@@ -195,24 +260,32 @@
         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;
@@ -223,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');
         }
@@ -263,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.2-beta-color",
+  "version": "0.0.2-fix-timepicker",
   "author": "Bouygues Telecom",
   "repository": {
     "type": "git",