@trilogy-ds/styles 0.0.7-beta-v4 → 4.0.0

package/framework/src/components/_autolayout.scss

@@ -1,5 +1,5 @@
 body:not(.is-tight) {
-  .accordions:not(:last-child) {
+  .accordion:not(:last-child) {
     margin-bottom: 24px;
   }
   .buttons:not(:last-child) {
@@ -71,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) {
@@ -80,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-tile:not(:last-child) {
+  .checkbox-tiles:not(:last-child) {
+    margin-bottom: 24px;
+  }
+  :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) {
     margin-bottom: 24px;
   }
   .field:not(:last-child) {
@@ -107,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) {
@@ -156,7 +168,7 @@ 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) {
@@ -228,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) {
@@ -237,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-tile:not(:last-child) {
+  .checkbox-tiles:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) {
       margin-bottom: 16px;
     }
   .field:not(:last-child) {
@@ -264,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/_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/_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/utilities/_mixins.scss

@@ -451,7 +451,6 @@
   .#{$type} {
     display: flex;
     align-items: center;
-    margin: 6px 8px;
     width: fit-content;
 
     input:disabled,
@@ -462,8 +461,7 @@
     }
 
     label.#{$type}-label {
-      padding: 4px;
-      padding-left: 34px;
+      padding-left: 30px;
 
       &:before,
       &:after {

package/package.json

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