@trilogy-ds/styles 0.0.3-beta-v4 → 0.0.4-esm-cjs

package/framework/src/elements/_textarea.scss

@@ -1,133 +0,0 @@
-.textarea-wrapper {
-  position: relative;
-  margin: 16px 0;
-
-  .textarea-label {
-    display: inline-block;
-    margin-bottom: 6px;
-  }
-
-  .textarea-sample {
-    margin-bottom: 10px !important;
-  }
-
-  textarea.textarea {
-    padding: $spacing-4;
-    border-radius: var(--radius-small);
-    outline: none;
-
-    &:focus,
-    &:focus-visible {
-      padding: 15px;
-    }
-
-    &::placeholder {
-      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;
-    }
-  }
-
-  // Colors
-  @each $name, $pair in $colors-brand-functionnal {
-    $color: getColor($name);
-    $color-invert: invertColor($name);
-    $brandName: getColorBrandName($name);
-    &.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;
-      }
-    }
-  }
-
-  .counter {
-    position: absolute;
-    bottom: $spacing-2;
-    right: $spacing-4;
-    font-size: 10px;
-  }
-
-  .help ~ .counter {
-    bottom: $spacing-6;
-  }
-}