@trilogy-ds/styles 4.3.1-beta-3 → 4.4.0-beta-2

package/framework/src/components/_autolayout.scss

@@ -120,19 +120,19 @@ body:not(.is-tight) {
     margin-bottom: 40px;
   }
   .title.is-level-2:not(:last-child) {
-    margin-bottom: 32px;
+    margin-bottom: 40px;
   }
   .title.is-level-3:not(:last-child) {
-    margin-bottom: 16px;
+    margin-bottom: 24px;
   }
   .title.is-level-4:not(:last-child) {
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
   .title.is-level-5:not(:last-child) {
-    margin-bottom: 12px;
+    margin-bottom: 16px;
   }
   .title.is-level-6:not(:last-child) {
-    margin-bottom: 12px;
+    margin-bottom: 8px;
   }
   .overline:not(:last-child) {
     margin-bottom: 0px;
@@ -220,7 +220,7 @@ body:not(.is-tight) {
       margin-bottom: 12px;
     }
   p.text:not(:last-child) {
-      margin-bottom: 8px;
+      margin-bottom: 12px;
     }
   .progress:not(:last-child) {
       margin-bottom: 8px;
@@ -283,19 +283,19 @@ body:not(.is-tight) {
       margin-bottom: 32px;
     }
   .title.is-level-2:not(:last-child) {
-      margin-bottom: 24px;
+      margin-bottom: 32px;
     }
   .title.is-level-3:not(:last-child) {
-      margin-bottom: 12px;
+      margin-bottom: 24px;
     }
   .title.is-level-4:not(:last-child) {
-      margin-bottom: 8px;
+      margin-bottom: 16px;
     }
   .title.is-level-5:not(:last-child) {
-      margin-bottom: 8px;
+      margin-bottom: 12px;
     }
   .title.is-level-6:not(:last-child) {
-      margin-bottom: 8px;
+      margin-bottom: 12px;
     }
   .overline:not(:last-child) {
       margin-bottom: 0px;

package/framework/src/components/_select.scss

@@ -64,6 +64,9 @@ $status-select: (
           top: 50%;
           transform: translate(-50%, -50%);
           transition: transform 0.3s;
+          min-width: 20px;
+          min-height: 20px;
+          mask-size: 20px;
         }
       }
 

package/framework/src/components/_textarea.scss

@@ -1,7 +1,4 @@
 .textarea-wrapper {
-  display: inline;
-  position: relative;
-  margin: 16px 0;
 
   .textarea-label {
     display: inline-block;
@@ -13,88 +10,14 @@
   }
 
   textarea.textarea {
-    padding: $spacing-4;
-    border-radius: var(--radius-small);
-    outline: none;
-
-    &:focus,
-    &:focus-visible {
-      padding: 15px;
-    }
-
-    &::placeholder {
+    &::placeholder, label {
       font-size: 16px;
     }
-
-    &.has-dynamic-label {
-      &.has-icon ~ label {
-        left: $spacing-9;
-        margin-right: 2px;
-        width: calc(100% - 98px);
-      }
-
-      ~ label {
-        visibility: visible;
-        position: absolute;
-        top: 2px;
-        left: $spacing-4;
-        padding-top: $spacing-2;
-        width: calc(100% - 28px - 2px);
-        font-size: 12px;
-        color: getColor('font');
-        filter: grayscale(100%);
-        transition: top 0.2s ease-out;
-      }
-
-      &:placeholder-shown {
-        ~ label {
-          visibility: hidden;
-          top: $spacing-4;
-          background-color: getColor('background');
-          transition: none;
-        }
-      }
-
-      &:not(:placeholder-shown) {
-        padding-top: $spacing-5;
-      }
-    }
-
-    &.has-icon {
-      padding-left: $spacing-9;
-      padding-right: $spacing-9;
-
-      &:focus,
-      &:focus-visible {
-        padding-left: 55px !important;
-        padding-right: 55px;
-      }
-    }
-  }
-
-  label {
-    font-size: 16px;
-  }
-
-   .textarea-label + .textarea-sample ~ span.icon {
-    top: 72px !important;
-  }
-
-  .textarea-label ~ span.icon {
-    top: 45px !important;
   }
 
-  span.icon {
-    position: absolute;
-    top: $spacing-4;
-
-    &:first-of-type {
-      left: $spacing-4;
-    }
-
-    &:nth-of-type(2) {
-      right: $spacing-4;
-    }
+  .icon {
+    align-items: flex-start !important;
+    padding-top: 18px !important;
   }
 
   // Colors
@@ -105,19 +28,8 @@
     &.is-#{$brandName} {
       textarea.textarea {
         border-color: $color;
-
-        &:active,
-        &:focus,
-        &:focus-visible {
-          &:not(:placeholder-shown) {
-            padding-top: 29px;
-          }
-        }
       }
 
-      span.icon:nth-of-type(2) {
-        color: $color;
-      }
     }
   }
 

package/framework/src/components/input/_entry.scss

@@ -1,3 +1,13 @@
+.input, .textarea {
+  &:not(:disabled) {
+    &:active,
+    &:focus,
+    &:focus-visible:not(.icon) {
+      padding-left: 15px ;
+    }
+  }
+}
+
 .input,
 .textarea {
   @include input;
@@ -19,12 +29,6 @@
     }
   }
 
-  &:active,
-  &:focus,
-  &:focus-visible:not(.icon) {
-    padding-left: 15px !important;
-  }
-
   // Sizes
   &.is-small {
     @include control-small;
@@ -43,10 +47,6 @@
     display: inline;
   }
 
-  .icon-status {
-    color: aqua !important;
-  }
-
   & label {
     margin-top: 10px;
   }
@@ -87,7 +87,7 @@
     -webkit-appearance: none;
     background-repeat: no-repeat;
     background-color: getColor('background') ;
-    background-position: center;    
+    background-position: center;
   }
 
   &[type="search"] {
@@ -127,4 +127,9 @@
   &.has-fixed-size {
     resize: none;
   }
+
+  &:focus-visible{
+    padding-top: 14px;
+    padding-bottom: 4px;
+  }
 }

package/framework/src/components/input/_form.scss

@@ -248,6 +248,7 @@ $label-weight: $weight-bold;
 
   &.has-icons-left {
     .input,
+    .textarea,
     .select select {
       padding-left: 45px;
     }
@@ -259,13 +260,6 @@ $label-weight: $weight-bold;
       padding: 0 24px;
     }
 
-    .textarea {
-      padding-left: 50px;
-      padding-right: $spacing-4;
-      padding-bottom: $spacing-4 !important;
-      padding-top: $spacing-4;
-    }
-
     & .textarea + label {
       left: 5rem;
     }
@@ -291,6 +285,7 @@ $label-weight: $weight-bold;
 
   &.has-icons-right {
     .input,
+    .textarea,
     .select select {
       padding-right: 45px;
     }
@@ -445,7 +440,7 @@ $label-weight: $weight-bold;
     }
   }
 
-  &:has(input[disabled]), &:has(select[disabled]) {
+  &:has(input[disabled]), &:has(select[disabled]), &:has(textarea[disabled]) {
     @include disabledRulesWithoutBG;
     .icon {
       color: getColor('disabled');    

package/framework/src/components/input/_input-icons.scss

@@ -1,7 +1,7 @@
 .field {
 
   .has-icons-left {
-    input {
+    input, textarea {
       padding-left: 45px;
 
       &:active,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "4.3.1-beta-3",
+  "version": "4.4.0-beta-2",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [