@trilogy-ds/styles 0.0.5-beta-v4 → 0.0.9-beta-v4

package/framework/src/components/_autolayout.scss

@@ -1,14 +1,20 @@
 body:not(.is-tight) {
-  .accordions:not(:last-child) {
+  .accordion:not(:last-child) {
+    margin-bottom: 24px;
+  }
+  .buttons:not(:last-child) {
     margin-bottom: 24px;
   }
   .card:not(:last-child) {
     margin-bottom: 24px;
   }
+  .columns:not(:last-child) {
+    margin-bottom: 24px;
+  }
   .box:not(:last-child) {
     margin-bottom: 24px;
   }
-  *:has(+.divider):not(:last-child) {
+  *:has(+ .divider):not(:last-child) {
     margin-bottom: 24px;
   }
   .divider:not(:last-child) {
@@ -65,7 +71,10 @@ body:not(.is-tight) {
   .progress-radial:not(:last-child) {
     margin-bottom: 8px;
   }
-  .radio:not(:last-child) {
+  .radios:not(:last-child) {
+    margin-bottom: 12px;
+  }
+  :not(.radios) >.radios:not(:last-child) {
     margin-bottom: 12px;
   }
   .checkbox:not(:last-child) {
@@ -74,10 +83,16 @@ body:not(.is-tight) {
   .switch:not(:last-child) {
     margin-bottom: 12px;
   }
-  .radio-tile:not(:last-child) {
+  .radio-tiles:not(:last-child) {
+    margin-bottom: 16px;
+  }
+  :not(.radio-tiles) > .radio-tile:not(:last-child) {
+    margin-bottom: 24px;
+  }
+  .checkbox-tiles:not(:last-child) {
     margin-bottom: 24px;
   }
-  .checkbox-tile:not(:last-child) {
+  :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) {
     margin-bottom: 24px;
   }
   .field:not(:last-child) {
@@ -101,7 +116,10 @@ body:not(.is-tight) {
   .sticker:not(:last-child) {
     margin-bottom: 8px;
   }
-  .tag:not(:last-child) {
+  .tags:not(:last-child) {
+    margin-bottom: 16px;
+  }
+  :not(.tags) > .tag:not(:last-child) {
     margin-bottom: 8px;
   }
   .title.is-level-1:not(:last-child) {
@@ -150,16 +168,22 @@ body:not(.is-tight) {
 
 @include mobile() {
   body:not(.is-tight) {
-    .accordions:not(:last-child) {
+    .accordion:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  .buttons:not(:last-child) {
       margin-bottom: 16px;
     }
   .card:not(:last-child) {
       margin-bottom: 16px;
     }
+  .columns:not(:last-child) {
+      margin-bottom: 16px;
+    }
   .box:not(:last-child) {
       margin-bottom: 16px;
     }
-  *:has(+.divider):not(:last-child) {
+  *:has(+ .divider):not(:last-child) {
       margin-bottom: 16px;
     }
   .divider:not(:last-child) {
@@ -216,7 +240,10 @@ body:not(.is-tight) {
   .progress-radial:not(:last-child) {
       margin-bottom: 8px;
     }
-  .radio:not(:last-child) {
+  .radios:not(:last-child) {
+      margin-bottom: 12px;
+    }
+  :not(.radios) >.radios:not(:last-child) {
       margin-bottom: 12px;
     }
   .checkbox:not(:last-child) {
@@ -225,10 +252,16 @@ body:not(.is-tight) {
   .switch:not(:last-child) {
       margin-bottom: 12px;
     }
-  .radio-tile:not(:last-child) {
+  .radio-tiles:not(:last-child) {
+      margin-bottom: 12px;
+    }
+  :not(.radio-tiles) > .radio-tile:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  .checkbox-tiles:not(:last-child) {
       margin-bottom: 16px;
     }
-  .checkbox-tile:not(:last-child) {
+  :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) {
       margin-bottom: 16px;
     }
   .field:not(:last-child) {
@@ -252,7 +285,10 @@ body:not(.is-tight) {
   .sticker:not(:last-child) {
       margin-bottom: 8px;
     }
-  .tag:not(:last-child) {
+  .tags:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  :not(.tags) > .tag:not(:last-child) {
       margin-bottom: 8px;
     }
   .title.is-level-1:not(:last-child) {

package/framework/src/components/_pagination.scss

@@ -3,7 +3,7 @@
   margin: -2.5px;
   align-items: center;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   text-align: center;
 
   .pagination-previous,
@@ -38,7 +38,6 @@
   .pagination-list {
     flex: 0 0 auto;
     flex-wrap: wrap;
-    flex-grow: 1;
     align-items: center;
     display: flex;
     justify-content: center;

package/framework/src/elements/_button.scss

@@ -53,6 +53,11 @@ $button-border-width: 2px !default;
     }
   }
 
+  &.is-ghost:hover {
+    background-color: var(--color-main-fade);
+    filter: none !important;
+  }
+
   &[disabled],
   &[aria-disabled=true] {
     background-color: getColorValue('main-fade') !important;

package/framework/src/elements/_radio.scss

@@ -2,7 +2,8 @@
 
 .radios {
   width: 100%;
-  gap: 16px;
+  column-gap: $spacing-5;
+  row-gap: $spacing-3;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;

package/framework/src/elements/_select.scss

@@ -1,11 +1,14 @@
-
 .select {
   position: relative;
-  input { cursor: pointer;}
+
+  input {
+    cursor: pointer;
+  }
 
   select {
     width: 100%;
     @include input;
+
     &:focus {
       padding-left: 15px !important;
     }
@@ -14,14 +17,15 @@
   .has-icons-left {
     select {
       padding-left: 45px;
+
       &:focus {
         padding-left: 44px !important;
       }
     }
   }
 
-  &-options { 
-    box-shadow: 0 0 8px #0000001a; 
+  &-options {
+    box-shadow: 0 0 8px #0000001a;
     border-radius: 4px;
     overflow: hidden;
     position: absolute;
@@ -32,65 +36,70 @@
   }
 
   .field {
+    margin-bottom: 0 !important;
+
     &.focus {
-      &:after{
+      &:after {
         @include arrow('up');
         right: 12px;
-        top:50%;
-        transform: translate(-50%,-50%);
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
     }
+
     &:not(.focus) {
-      &:after{
+      &:after {
         @include arrow();
         right: 12px;
-        top:50%;
-        transform: translate(-50%,-50%);
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
     }
-  } 
+  }
 
 
   &-trilogy_modal_open {
     position: fixed;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     z-index: 1000;
   }
 
-  .radio-tile {
-    input:checked {
-      &~label.radio-label {
-        font-weight: $weight-black ;
+  .select-options {
+    background-color: getColor('background');
+
+    li.option {
+      padding: $spacing-3 $spacing-4;
+      cursor: pointer;
+      display: flex;
+      gap: $spacing-2;
+
+      @include hover;
+
+      &.is-disabled {
+        color: getColor('disabled');
+        background-color: getColor('disabled-fade');
+        cursor: not-allowed;
+      }
+
+      &[data-selected="true"] {
+        font-weight: $weight-black;
+
         &:after {
           content: "" !important;
           mask-image: url('./assets/icons/all/check.svg') !important;
           background-color: getColor('main') !important;
           mask-size: 18px !important;
-          top: 25px !important;
           right: 18px !important;
-          height:18px  !important;
-          width: 18px !important
+          height: 18px !important;
+          width: 18px !important;
+          position: absolute;
         }
-      } 
-    }
-
-    label.radio-label {
-      border:none !important;
-      border-radius: 0 !important;
-      height: 52px;
-      &:before { display: none; }
-        @include hover 
-    } 
-
-    &.focus label.radio-label { @include hoverRules(); }
-
-    .icon.is-medium {
-      font-size: $text-20 !important;
+      }
     }
-  } 
+  }
 }
 
 

package/framework/src/elements/_switch.scss

@@ -8,8 +8,13 @@
   }
 
   input {
-    display: none;
+    opacity: 0;
+    position: absolute;
+    outline: none;
 
+    &:focus-visible ~ label:before{
+      outline: 2px solid;
+    }
     &:disabled ~ label,
     &:disabled:checked ~ label {
       cursor: not-allowed;

package/framework/src/elements/_tag.scss

@@ -6,23 +6,8 @@ $tag-delete-margin: 1px !default;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: 16px;
-
-  // multi-tags : ajout d'une marge bottom, supprimable par facette
-  &:not(.is-gapless) {
-    &:not(:last-child) {
-      margin-right: 8px;
-    }
-
-    .tag {
-      margin-bottom: 10px;
-    }
-  }
-
+  gap: $spacing-3;
   // multi-tags : ajout d'une marge à droite de chaque tag
-  .tag:not(:last-child) {
-    margin-right: 8px;
-  }
 
   // centrage des tags
   &.is-centered {
@@ -34,7 +19,6 @@ $tag-delete-margin: 1px !default;
     cursor: pointer;
 
     .tag {
-      margin-right: 0;
 
       &:not(:first-child) {
         border-bottom-left-radius: 0;

package/framework/src/theming/buttons_partial.scss

@@ -10,7 +10,7 @@ $button-colors: (
   'accent':['conversion', 'accent', 'background'],
   'primary': ['primary', 'main', 'background'],
   'secondary': ['secondary', 'main-fade', 'main'],
-  'ghost': ['ghost', 'background', 'main'],
+  'ghost': ['ghost', 'transparent', 'main']
 ) !default;
 
 %buttons-states {

package/framework/src/utilities/_colors.scss

@@ -11,6 +11,7 @@ $suffix: '';
  */
 $colors: (
   'background': [#fff, 'white', 'main'],
+  'transparent': ['transparent', 'transparent', 'transparent'],
   'main':[ #3d5d7e, 'main', 'white'],
   'main-fade':[ #eff2f8, 'main-fade', 'white'],
   'accent':[ #da641b,'accent', 'white'],

package/framework/src/utilities/_mixins.scss

@@ -409,7 +409,9 @@
     }
 
     input {
-      display: none;
+      opacity: 0;
+      position: absolute;
+      outline: none;
 
       &:checked ~ label.#{$type}-label {
         border-color: getColor('main');
@@ -422,6 +424,9 @@
           background-color: getColor('main');
         }
       }
+      &:focus-visible ~ label.#{$type}-label:before {
+        outline: 1px solid;
+      }
 
       &:disabled,
       &:disabled:checked {
@@ -446,7 +451,6 @@
   .#{$type} {
     display: flex;
     align-items: center;
-    margin: 6px 8px;
     width: fit-content;
 
     input:disabled,
@@ -457,8 +461,7 @@
     }
 
     label.#{$type}-label {
-      padding: 4px;
-      padding-left: 34px;
+      padding-left: 30px;
 
       &:before,
       &:after {
@@ -495,6 +498,9 @@
         @include disabledRules;
       }
     }
+    &:has(input:focus-visible) label.#{$type}-label{
+      outline:  1px solid;
+    }
 
     &:first-child {
       margin-left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.5-beta-v4",
+  "version": "0.0.9-beta-v4",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [