otimus-library 0.3.71 → 0.3.73

package/styles/components/inputs/inputs.shui.scss

@@ -1,272 +1,272 @@
-@use '../../variables.scss';
-
-// Mixin para reutilizar os estilos
-@mixin input-box-prefix {
-  .material-symbols-outlined {
-    position: absolute;
-    left: 0;
-    font-size: 1.5rem;
-    user-select: none;
-  }
-}
-
-@mixin input-box-suffix {
-  .material-symbols-outlined,
-  .oc.suffix {
-    position: absolute;
-    right: 0;
-    font-size: 1.5rem;
-    user-select: none;
-  }
-}
-
-@mixin input-box-base {
-  position: relative;
-  margin-top: 0.5rem;
-
-  select * {
-    background-color: variables.$color-shui-base-2;
-  }
-
-  label {
-    position: absolute;
-    left: 0;
-    top: 0;
-    padding: 0.5rem 0.7rem;
-    font-size: 0.85rem;
-    color: variables.$color-shui-ui-1;
-    pointer-events: none;
-    transition: 0.3s ease;
-    border-radius: 0.5rem;
-    white-space: nowrap;
-  }
-
-  &.prefix {
-    z-index: 5;
-    .material-symbols-outlined,
-    .oc.suffix {
-      padding: 0.5rem 0.7rem;
-    }
-    input {
-      padding-left: 1.75rem;
-    }
-    label {
-      padding: 0.7rem 2.5rem;
-    }
-  }
-
-  &.suffix {
-    z-index: 5;
-    .material-symbols-outlined,
-    .oc.suffix {
-      padding: 0.5rem 0.7rem;
-    }
-    input {
-      padding-right: 1.75rem;
-    }
-    label {
-      padding: 0.7rem 0.7rem;
-    }
-  }
-
-  input,
-  textarea,
-  select {
-    border-radius: 0;
-    font-size: 1rem;
-    background-color: variables.$color-shui-base-2;
-    border: none;
-    outline: none;
-    padding: 1rem 0.9rem;
-    padding-bottom: 0.2rem;
-    width: 100%;
-    transition: 0.3s ease;
-    color: variables.$color-shui-ui-1;
-    font-weight: 400;
-    height: 41px;
-    min-width: 100%;
-  }
-
-  textarea {
-    height: inherit;
-    padding-top: 20px;
-  }
-
-  input:not(:placeholder-shown) ~ label,
-  input:focus ~ label,
-  textarea:not(:placeholder-shown) ~ label,
-  textarea:focus ~ label,
-  select:valid ~ label,
-  select:focus ~ label {
-    transform: translateX(0.45rem);
-    background-color: variables.$color-shui-base-2;
-    width: 95%;
-    padding: 1px 7px;
-    padding-bottom: 0;
-    font-size: 0.7rem;
-    font-weight: 500;
-  }
-
-  input:focus ~ label,
-  textarea:focus ~ label,
-  select:valid ~ label,
-  select:focus ~ label {
-    color: variables.$color-shui-ui-8;
-  }
-
-  &::before {
-    display: block;
-    content: '';
-    position: absolute;
-    bottom: 0;
-    height: 1px;
-    width: 100%;
-    background-color: variables.$color-shui-ui-5;
-    transition: 0.4s ease;
-    width: 0;
-    background-color: variables.$color-shui-ui-8;
-  }
-
-  &:focus-within::before {
-    width: 100%;
-  }
-
-  &.small {
-    input,
-    textarea,
-    select {
-      max-height: 36px;
-      padding-top: 1rem;
-    }
-
-    &.prefix {
-      z-index: 5;
-      .material-symbols-outlined {
-        padding: 0.35rem 0.7rem;
-        font-size: 1.25rem;
-        color: variables.$color-shui-ui-8;
-      }
-      label {
-        padding: 0.45rem 2.5rem;
-      }
-    }
-
-    &.suffix {
-      z-index: 5;
-      .material-symbols-outlined {
-        padding: 0.35rem 0.7rem;
-        color: variables.$color-shui-ui-8;
-      }
-      label {
-        padding: 0.45rem 0.7rem;
-      }
-    }
-  }
-
-  &.large {
-    input,
-    textarea,
-    select {
-      height: 46px;
-    }
-
-    label {
-      padding: 1rem 0.7rem;
-    }
-
-    &.prefix {
-      z-index: 5;
-      .material-symbols-outlined {
-        padding: 1rem 0.7rem;
-      }
-      input {
-        padding-left: 2.5rem;
-      }
-      label {
-        padding: 1.1rem 2.5rem;
-      }
-    }
-
-    &.suffix {
-      z-index: 5;
-      .material-symbols-outlined {
-        padding: 0.9rem 0.7rem;
-      }
-      input {
-        padding-right: 2.5rem;
-      }
-      label {
-        padding: 1.1rem 0.7rem;
-      }
-    }
-  }
-}
-
-@mixin error-styles {
-  input,
-  textarea,
-  select {
-    border: 1px solid variables.$color-shui-functional-red;
-    box-shadow: 0px 4px 6.1px 0px rgba(161, 0, 0, 0.08);
-  }
-
-  &::before {
-    width: 0 !important;
-  }
-
-  small,
-  label {
-    color: variables.$color-error !important;
-    font-weight: 600;
-  }
-}
-
-// Aplicação direta (sem classe pai .shui)
-.shui-input-box.prefix {
-  @include input-box-prefix;
-}
-
-.shui-input-box.suffix {
-  @include input-box-suffix;
-}
-
-.shui-input-box {
-  @include input-box-base;
-}
-
-.error {
-  @include error-styles;
-}
-
-// Aplicação com classe pai .shui
-.shui {
-  .prefix {
-    @include input-box-prefix;
-  }
-
-  .suffix {
-    @include input-box-suffix;
-  }
-
-  .oc-input-box {
-    @include input-box-base;
-  }
-
-  .error {
-    @include error-styles;
-  }
-}
-
-.oc.suffix,
-.oc.prefix,
-.material-symbols-outlined {
-  z-index: 5 !important;
-}
-
-.shui {
-  .oc.suffix,
-  .oc.prefix,
-  .material-symbols-outlined {
-    z-index: 5 !important;
-  }
+@use '../../variables.scss';
+
+// Mixin para reutilizar os estilos
+@mixin input-box-prefix {
+  .material-symbols-outlined {
+    position: absolute;
+    left: 0;
+    font-size: 1.5rem;
+    user-select: none;
+  }
+}
+
+@mixin input-box-suffix {
+  .material-symbols-outlined,
+  .oc.suffix {
+    position: absolute;
+    right: 0;
+    font-size: 1.5rem;
+    user-select: none;
+  }
+}
+
+@mixin input-box-base {
+  position: relative;
+  margin-top: 0.5rem;
+
+  select * {
+    background-color: variables.$color-shui-base-2;
+  }
+
+  label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 0.5rem 0.7rem;
+    font-size: 0.85rem;
+    color: variables.$color-shui-ui-1;
+    pointer-events: none;
+    transition: 0.3s ease;
+    border-radius: 0.5rem;
+    white-space: nowrap;
+  }
+
+  &.prefix {
+    z-index: 5;
+    .material-symbols-outlined,
+    .oc.suffix {
+      padding: 0.5rem 0.7rem;
+    }
+    input {
+      padding-left: 1.75rem;
+    }
+    label {
+      padding: 0.7rem 2.5rem;
+    }
+  }
+
+  &.suffix {
+    z-index: 5;
+    .material-symbols-outlined,
+    .oc.suffix {
+      padding: 0.5rem 0.7rem;
+    }
+    input {
+      padding-right: 1.75rem;
+    }
+    label {
+      padding: 0.7rem 0.7rem;
+    }
+  }
+
+  input,
+  textarea,
+  select {
+    border-radius: 0;
+    font-size: 1rem;
+    background-color: variables.$color-shui-base-2;
+    border: none;
+    outline: none;
+    padding: 1rem 0.9rem;
+    padding-bottom: 0.2rem;
+    width: 100%;
+    transition: 0.3s ease;
+    color: variables.$color-shui-ui-1;
+    font-weight: 400;
+    height: 41px;
+    min-width: 100%;
+  }
+
+  textarea {
+    height: inherit;
+    padding-top: 20px;
+  }
+
+  input:not(:placeholder-shown) ~ label,
+  input:focus ~ label,
+  textarea:not(:placeholder-shown) ~ label,
+  textarea:focus ~ label,
+  select:valid ~ label,
+  select:focus ~ label {
+    transform: translateX(0.45rem);
+    background-color: variables.$color-shui-base-2;
+    width: 95%;
+    padding: 1px 7px;
+    padding-bottom: 0;
+    font-size: 0.7rem;
+    font-weight: 500;
+  }
+
+  input:focus ~ label,
+  textarea:focus ~ label,
+  select:valid ~ label,
+  select:focus ~ label {
+    color: variables.$color-shui-ui-8;
+  }
+
+  &::before {
+    display: block;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    background-color: variables.$color-shui-ui-5;
+    transition: 0.4s ease;
+    width: 0;
+    background-color: variables.$color-shui-ui-8;
+  }
+
+  &:focus-within::before {
+    width: 100%;
+  }
+
+  &.small {
+    input,
+    textarea,
+    select {
+      max-height: 36px;
+      padding-top: 1rem;
+    }
+
+    &.prefix {
+      z-index: 5;
+      .material-symbols-outlined {
+        padding: 0.35rem 0.7rem;
+        font-size: 1.25rem;
+        color: variables.$color-shui-ui-8;
+      }
+      label {
+        padding: 0.45rem 2.5rem;
+      }
+    }
+
+    &.suffix {
+      z-index: 5;
+      .material-symbols-outlined {
+        padding: 0.35rem 0.7rem;
+        color: variables.$color-shui-ui-8;
+      }
+      label {
+        padding: 0.45rem 0.7rem;
+      }
+    }
+  }
+
+  &.large {
+    input,
+    textarea,
+    select {
+      height: 46px;
+    }
+
+    label {
+      padding: 1rem 0.7rem;
+    }
+
+    &.prefix {
+      z-index: 5;
+      .material-symbols-outlined {
+        padding: 1rem 0.7rem;
+      }
+      input {
+        padding-left: 2.5rem;
+      }
+      label {
+        padding: 1.1rem 2.5rem;
+      }
+    }
+
+    &.suffix {
+      z-index: 5;
+      .material-symbols-outlined {
+        padding: 0.9rem 0.7rem;
+      }
+      input {
+        padding-right: 2.5rem;
+      }
+      label {
+        padding: 1.1rem 0.7rem;
+      }
+    }
+  }
+}
+
+@mixin error-styles {
+  input,
+  textarea,
+  select {
+    border: 1px solid variables.$color-shui-functional-red;
+    box-shadow: 0px 4px 6.1px 0px rgba(161, 0, 0, 0.08);
+  }
+
+  &::before {
+    width: 0 !important;
+  }
+
+  small,
+  label {
+    color: variables.$color-error !important;
+    font-weight: 600;
+  }
+}
+
+// Aplicação direta (sem classe pai .shui)
+.shui-input-box.prefix {
+  @include input-box-prefix;
+}
+
+.shui-input-box.suffix {
+  @include input-box-suffix;
+}
+
+.shui-input-box {
+  @include input-box-base;
+}
+
+.error {
+  @include error-styles;
+}
+
+// Aplicação com classe pai .shui
+.shui {
+  .prefix {
+    @include input-box-prefix;
+  }
+
+  .suffix {
+    @include input-box-suffix;
+  }
+
+  .oc-input-box {
+    @include input-box-base;
+  }
+
+  .error {
+    @include error-styles;
+  }
+}
+
+.oc.suffix,
+.oc.prefix,
+.material-symbols-outlined {
+  z-index: 5 !important;
+}
+
+.shui {
+  .oc.suffix,
+  .oc.prefix,
+  .material-symbols-outlined {
+    z-index: 5 !important;
+  }
 }