@trilogy-ds/styles 4.15.0-timepicker-circular-native → 4.15.0

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,61 @@
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
+
+    &.is-grid {
+      display: grid;
+
+      & > .radio-tile {
+        width: 100%;
+      }
+    }
+    @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
@@ -155,20 +210,59 @@
     }
   }
 
+  .#{$type}-tiles:not(.is-grid) {
+    .#{$type}-tile:not(.is-horizontal) {
+      max-width: 160px;
+    }
+  }
+
   //TILE ONLY
   .#{$type}-tile {
     position: relative;
-    max-width: 160px;
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 40px 16px 16px;
+    border: var(--border);
+    border-radius: var(--radius);
+    box-sizing: border-box;
+    background-color: getColor('background');
     text-align: center;
+    align-items: center;
+    font-size: 14px;
 
-    input:disabled,
-    input:disabled:checked {
-      & ~ label.#{$type}-label {
-        @include disabledRules;
+    &[aria-disabled="true"] {
+      @include disabledRules;
+      filter: none;
+      label.#{$type}-label {
+        cursor: not-allowed !important;
       }
     }
-    &:has(input:focus-visible) label.#{$type}-label{
+
+    &[aria-checked="true"] {
+      border-color: getColor('main');
+      border-width: 2px;
+      padding: 15px;
+      padding-top: 39px;
+      label.radio-label:before {
+        top: 15px;
+        left: 15px;
+      }
+      .#{$type}-sticker {
+        top: -1px;
+        right: 15px;
+      }
+    }
+
+    &:not([aria-disabled="true"]) {
+      cursor: pointer;
+    }
+
+    &:not([aria-disabled="true"]):not([aria-checked="true"]) {
+      @include label-states;
+    }
+
+    &:has(input:focus-visible) {
       outline:  1px solid;
     }
 
@@ -180,67 +274,22 @@
       margin-right: 0;
     }
 
+    .#{$type}-content {
+      display: flex;
+      flex-direction: column;
+    }
+
     label.#{$type}-label {
       display: block;
-      position: relative;
-      padding: 40px 16px 16px;
-      border: var(--border);
-      border-radius: var(--radius);
-      box-sizing: border-box;
-      background-color: getColor('background');
-      height: 100%;
-
+      font-weight: bold;
+      width: 100%;
+      display: block;
+      font-size: 16px;
+      order: - 1;
       &:before {
         top: 16px;
         left: 16px;
       }
-
-      span.#{$type}-title {
-        font-weight: bold;
-        width: 100%;
-        display: block;
-        font-size: 16px;
-      }
-    }
-
-    input {
-      &:not(:disabled):not(:checked) ~ label.radio-label {
-        @include label-states;
-      }
-
-      &:not(:disabled) ~ label.checkbox-label {
-        @include label-states;
-      }
-
-      &:checked:not(:disabled) ~ label.#{$type}-label {
-        border-color: getColor('main');
-        border-width: 2px;
-        padding: 15px;
-        padding-top: 39px;
-
-        &:before {
-          top: 15px;
-          left: 15px;
-        }
-
-        span.#{$type}-title {
-          color: getColor('main');
-        }
-      }
-
-      &:disabled {
-        & ~ label.#{$type}-label {
-          &:before {
-            border-color: getColor('disabled') !important;
-          }
-        }
-      }
-
-      &:disabled:checked ~ label.#{$type}-label {
-        .checkbox-title {
-          color: getColor('disabled');
-        }
-      }
     }
 
     .#{$type}-sticker {
@@ -251,44 +300,34 @@
     }
 
     &.is-horizontal {
-      display: flex;
-      justify-content: space-between;
+      flex-direction: row;
       align-items: center;
       max-width: unset;
       width: 100%;
       position: relative;
+      text-align: left;
+      padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
+      align-items: center;
 
       &.is-narrow {
         width: fit-content;
       }
 
-      input {
-        &:checked:not(:disabled) ~ label.#{$type}-label {
-          padding: ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-8 - 1px);
-        }
-
-      }
-
       label.#{$type}-label {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        text-align: left;
-        padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
-
-
         &:before,
         &:after {
           top: 50% !important;
           transform: translateY(-50%);
         }
-        > .icon {
-          margin-right: $spacing-4;
-        }
+      }
 
+      & > .icon {
+        margin-right: $spacing-4;
       }
 
+      &[aria-checked="true"] {
+        padding: ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-8 - 1px);
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "4.15.0-timepicker-circular-native",
+  "version": "4.15.0",
   "author": "Bouygues Telecom",
   "repository": {
     "type": "git",