@trilogy-ds/styles 4.15.1 → 4.15.3

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

@@ -44,61 +44,6 @@
     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
@@ -210,59 +155,20 @@
     }
   }
 
-  .#{$type}-tiles:not(.is-grid) {
-    .#{$type}-tile:not(.is-horizontal) {
-      max-width: 160px;
-    }
-  }
-
   //TILE ONLY
   .#{$type}-tile {
     position: relative;
-    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');
+    max-width: 160px;
+    display: inline-block;
     text-align: center;
-    align-items: center;
-    font-size: 14px;
-
-    &[aria-disabled="true"] {
-      @include disabledRules;
-      filter: none;
-      label.#{$type}-label {
-        cursor: not-allowed !important;
-      }
-    }
 
-    &[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;
+    input:disabled,
+    input:disabled:checked {
+      & ~ label.#{$type}-label {
+        @include disabledRules;
       }
     }
-
-    &:not([aria-disabled="true"]) {
-      cursor: pointer;
-    }
-
-    &:not([aria-disabled="true"]):not([aria-checked="true"]) {
-      @include label-states;
-    }
-
-    &:has(input:focus-visible) {
+    &:has(input:focus-visible) label.#{$type}-label{
       outline:  1px solid;
     }
 
@@ -274,22 +180,67 @@
       margin-right: 0;
     }
 
-    .#{$type}-content {
-      display: flex;
-      flex-direction: column;
-    }
-
     label.#{$type}-label {
       display: block;
-      font-weight: bold;
-      width: 100%;
-      display: block;
-      font-size: 16px;
-      order: - 1;
+      position: relative;
+      padding: 40px 16px 16px;
+      border: var(--border);
+      border-radius: var(--radius);
+      box-sizing: border-box;
+      background-color: getColor('background');
+      height: 100%;
+
       &: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 {
@@ -300,34 +251,44 @@
     }
 
     &.is-horizontal {
-      flex-direction: row;
+      display: flex;
+      justify-content: space-between;
       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.1",
+  "version": "4.15.3",
   "author": "Bouygues Telecom",
   "repository": {
     "type": "git",