otimus-library 0.2.2 → 0.2.3

package/styles/components/buttons/buttons.shui.scss

@@ -1,57 +1,57 @@
-@use '../../variables.scss';
-
-.shui .oc.button, .shui.oc.button {
-  border-radius: 2rem;
-  font-size: 1.1rem;
-
-  background-color: variables.$color-shui-base-1;
-
-  height: 2.5rem;
-  padding: 0 1rem;
-
-  &.icon {
-    border-radius: 50%;
-    
-    .material-symbols-outlined {
-      font-size: 1.9rem;
-    }
-  }
-
-  &.ui-8, &.p-1, &.g-1 {
-    background-color: variables.$color-shui-ui-8;
-    color: variables.$color-shui-ui-7;
-  }
-
-  &.tiny {
-    height: 1.75rem;
-    .material-symbols-outlined {
-      font-size: 1.4rem;
-    }
-  }
-
-  &.small{
-    height: 2rem;
-    .material-symbols-outlined {
-      font-size: 1.5rem;
-    }
-  }
-
-  &.large{
-    height: 3rem;
-  }
-
-  &.icon{
-    width: 2.5rem;
-    &.tiny {
-      width: 1.75rem;
-    }
-  
-    &.small{
-      width: 2rem ;
-    }
-  
-    &.large{
-      width: 3rem ;
-    }
-  }
+@use '../../variables.scss';
+
+.shui .oc.button, .shui.oc.button {
+  border-radius: 2rem;
+  font-size: 1.1rem;
+
+  background-color: variables.$color-shui-base-1;
+
+  height: 2.5rem;
+  padding: 0 1rem;
+
+  &.icon {
+    border-radius: 50%;
+    
+    .material-symbols-outlined {
+      font-size: 1.9rem;
+    }
+  }
+
+  &.ui-8, &.p-1, &.g-1 {
+    background-color: variables.$color-shui-ui-8;
+    color: variables.$color-shui-ui-7;
+  }
+
+  &.tiny {
+    height: 1.75rem;
+    .material-symbols-outlined {
+      font-size: 1.4rem;
+    }
+  }
+
+  &.small{
+    height: 2rem;
+    .material-symbols-outlined {
+      font-size: 1.5rem;
+    }
+  }
+
+  &.large{
+    height: 3rem;
+  }
+
+  &.icon{
+    width: 2.5rem;
+    &.tiny {
+      width: 1.75rem;
+    }
+  
+    &.small{
+      width: 2rem ;
+    }
+  
+    &.large{
+      width: 3rem ;
+    }
+  }
 }

package/styles/components/index.scss

@@ -1,3 +1,3 @@
-@import './buttons/buttons.scss';
-@import './tooltip.scss';
+@import './buttons/buttons.scss';
+@import './tooltip.scss';
 @import './table/table.scss';

package/styles/components/inputs/inputs.scss

@@ -1,236 +1,236 @@
-.oc-input-box.prefix {
-  .material-symbols-outlined{
-    position: absolute;
-    left: 0;
-    font-size: 1.5rem;
-    user-select: none;
-  }
-}
-.oc-input-box.suffix {
-  .material-symbols-outlined, .oc.suffix{
-    position: absolute;
-    right: 0;
-    font-size: 1.5rem;
-    user-select: none;
-  }
-}
-
-.oc-input-box {
-  position: relative;
-  margin-top: .5rem;
-
-  select * {
-    background-color: variables.$color-gray-6;
-  }
-
-  label {
-    position: absolute;
-    left: 0;
-    top: 0;
-    padding: 0.5rem 0.7rem;
-    font-size: 0.85rem;
-    color: variables.$color-gray-3;
-    pointer-events: none;
-    transition: 0.3s ease;
-    border-radius: 0.5rem;
-    white-space: nowrap
-  }
-  
-  
-  &.prefix {
-    .material-symbols-outlined,.oc.suffix{
-      padding: .5rem .7rem;
-    }
-    input{
-      padding-left: 1.75rem;
-    }
-    label{
-      padding: .7rem 2.5rem;
-    }
-  }
-
-  &.suffix {
-    .material-symbols-outlined,.oc.suffix {
-      padding: .5rem .7rem;
-    }
-    input{
-      padding-right: 1.75rem;
-    }
-    label{
-      padding: .7rem 0.7rem;
-    }
-  }
-
-  input, textarea, select {
-    font-size: 1rem;
-    border-radius: 0.7rem;
-    background-color: variables.$color-gray-6;
-    border: 1px solid variables.$color-gray-4;
-    outline: none;
-    padding: 0.6rem 0.9rem;
-    width: 100%;
-    transition: 0.3s ease;
-    color: variables.$color-gray-2;
-    font-weight: 500;
-
-    &:focus {
-      border: 1px solid variables.$color-brand-g-1;
-      box-shadow: 0px 4px 3.2px 0px rgba(0, 221, 163, 0.08);
-    }
-  }
-
-  input:not(:placeholder-shown) ~ label,
-  input:focus ~ label,
-  textarea:not(:placeholder-shown) ~ label,
-  textarea:focus ~ label,
-  select:valid ~ label, 
-  select:focus ~ label {
-    transform: translateY(-0.855rem) translateX(0.6rem);
-    color: variables.$color-brand-dp-1;
-    background-color: variables.$color-gray-6;
-    padding: 1px 7px;
-    font-weight: 500;
-  }
-
-}
-
-
-.error {
-  input, textarea, select {
-    border: 1px solid variables.$color-error;
-    box-shadow: 0px 4px 6.1px 0px rgba(161, 0, 0, 0.08);
-  }
-
-  small, label {
-    color: variables.$color-error !important;
-    font-weight: 600;
-  }
-}
-
-.oc-input-box.small {
-  input, textarea, select {
-    padding: 0.3rem 0.7rem;
-    border-radius: 0.5rem;
-  }
-
-  &.prefix {
-    .material-symbols-outlined{
-      padding: .35rem .7rem;
-      font-size: 1.25rem;
-    }
-    label{
-      padding: .45rem 2.5rem;
-    }
-  }
-
-  &.suffix {
-    .material-symbols-outlined {
-      padding: .35rem .7rem;
-    }
-    label{
-      padding: .45rem 0.7rem;
-    }
-  }
-
-  label {
-    padding: 0.5rem 0.7rem;
-  }
-  input:focus ~ label,
-  input:not(:placeholder-shown) ~ label,
-  textarea:focus ~ label,
-  textarea:not(:placeholder-shown) ~ label,
-  select:focus ~ label,
-  select:valid ~ label {
-    transform: translateY(-0.99rem) translateX(0.6rem);
-    color: variables.$color-gray-2;
-    background-color: variables.$color-white;
-    padding: 1px 7px;
-    font-weight: 500;
-  }
-}
-
-.oc-input-box.large {
-  input, textarea, select {
-    padding: 1rem;
-    border-radius: 1rem;
-  }
-
-  label {
-    padding: 1rem 0.7rem;
-  }
-
-  &.prefix {
-    .material-symbols-outlined{
-      padding: 1rem .7rem;
-    }
-    input{
-      padding-left: 2.5rem;
-    }
-    label{
-      padding: 1.1rem 2.5rem;
-    }
-  }
-
-  &.suffix {
-    .material-symbols-outlined {
-      padding: .9rem .7rem;
-    }
-    input{
-      padding-right: 2.5rem;
-    }
-    label{
-      padding: 1.1rem 0.7rem;
-    }
-  }
-
-  input:focus ~ label,
-  input:not(:placeholder-shown) ~ label,
-  textarea:focus ~ label,
-  textarea:not(:placeholder-shown) ~ label,
-  select:focus ~ label,
-  select:valid ~ label {
-    transform: translateY(-0.77rem) translateX(0.6rem);
-    color: variables.$color-gray-2;
-    background-color: variables.$color-white;
-    padding: 1px 7px;
-    font-weight: 500;
-  }
-}
-
-
-// Semantic-like input:
-
-/* Estilo geral do input */
-.semantic-input {
-  display: inline-block;
-  width: 100%;
-  padding: 10px 12px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #333;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(34, 36, 38, 0.15);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-/* Estilo ao passar o mouse */
-.semantic-input:hover {
-  border-color: #b3b3b3;
-}
-
-/* Estilo ao focar */
-.semantic-input:focus {
-  border-color: #85b7d9;
-  box-shadow: 0 0 0 2px rgba(34, 36, 38, 0.15);
-  outline: none;
-}
-
-/* Estilo para inputs desabilitados */
-.semantic-input:disabled {
-  background-color: #f9f9f9;
-  color: #b3b3b3;
-  border-color: #ddd;
-  cursor: not-allowed;
-}
+.oc-input-box.prefix {
+  .material-symbols-outlined{
+    position: absolute;
+    left: 0;
+    font-size: 1.5rem;
+    user-select: none;
+  }
+}
+.oc-input-box.suffix {
+  .material-symbols-outlined, .oc.suffix{
+    position: absolute;
+    right: 0;
+    font-size: 1.5rem;
+    user-select: none;
+  }
+}
+
+.oc-input-box {
+  position: relative;
+  margin-top: .5rem;
+
+  select * {
+    background-color: variables.$color-gray-6;
+  }
+
+  label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 0.5rem 0.7rem;
+    font-size: 0.85rem;
+    color: variables.$color-gray-3;
+    pointer-events: none;
+    transition: 0.3s ease;
+    border-radius: 0.5rem;
+    white-space: nowrap
+  }
+  
+  
+  &.prefix {
+    .material-symbols-outlined,.oc.suffix{
+      padding: .5rem .7rem;
+    }
+    input{
+      padding-left: 1.75rem;
+    }
+    label{
+      padding: .7rem 2.5rem;
+    }
+  }
+
+  &.suffix {
+    .material-symbols-outlined,.oc.suffix {
+      padding: .5rem .7rem;
+    }
+    input{
+      padding-right: 1.75rem;
+    }
+    label{
+      padding: .7rem 0.7rem;
+    }
+  }
+
+  input, textarea, select {
+    font-size: 1rem;
+    border-radius: 0.7rem;
+    background-color: variables.$color-gray-6;
+    border: 1px solid variables.$color-gray-4;
+    outline: none;
+    padding: 0.6rem 0.9rem;
+    width: 100%;
+    transition: 0.3s ease;
+    color: variables.$color-gray-2;
+    font-weight: 500;
+
+    &:focus {
+      border: 1px solid variables.$color-brand-g-1;
+      box-shadow: 0px 4px 3.2px 0px rgba(0, 221, 163, 0.08);
+    }
+  }
+
+  input:not(:placeholder-shown) ~ label,
+  input:focus ~ label,
+  textarea:not(:placeholder-shown) ~ label,
+  textarea:focus ~ label,
+  select:valid ~ label, 
+  select:focus ~ label {
+    transform: translateY(-0.855rem) translateX(0.6rem);
+    color: variables.$color-brand-dp-1;
+    background-color: variables.$color-gray-6;
+    padding: 1px 7px;
+    font-weight: 500;
+  }
+
+}
+
+
+.error {
+  input, textarea, select {
+    border: 1px solid variables.$color-error;
+    box-shadow: 0px 4px 6.1px 0px rgba(161, 0, 0, 0.08);
+  }
+
+  small, label {
+    color: variables.$color-error !important;
+    font-weight: 600;
+  }
+}
+
+.oc-input-box.small {
+  input, textarea, select {
+    padding: 0.3rem 0.7rem;
+    border-radius: 0.5rem;
+  }
+
+  &.prefix {
+    .material-symbols-outlined{
+      padding: .35rem .7rem;
+      font-size: 1.25rem;
+    }
+    label{
+      padding: .45rem 2.5rem;
+    }
+  }
+
+  &.suffix {
+    .material-symbols-outlined {
+      padding: .35rem .7rem;
+    }
+    label{
+      padding: .45rem 0.7rem;
+    }
+  }
+
+  label {
+    padding: 0.5rem 0.7rem;
+  }
+  input:focus ~ label,
+  input:not(:placeholder-shown) ~ label,
+  textarea:focus ~ label,
+  textarea:not(:placeholder-shown) ~ label,
+  select:focus ~ label,
+  select:valid ~ label {
+    transform: translateY(-0.99rem) translateX(0.6rem);
+    color: variables.$color-gray-2;
+    background-color: variables.$color-white;
+    padding: 1px 7px;
+    font-weight: 500;
+  }
+}
+
+.oc-input-box.large {
+  input, textarea, select {
+    padding: 1rem;
+    border-radius: 1rem;
+  }
+
+  label {
+    padding: 1rem 0.7rem;
+  }
+
+  &.prefix {
+    .material-symbols-outlined{
+      padding: 1rem .7rem;
+    }
+    input{
+      padding-left: 2.5rem;
+    }
+    label{
+      padding: 1.1rem 2.5rem;
+    }
+  }
+
+  &.suffix {
+    .material-symbols-outlined {
+      padding: .9rem .7rem;
+    }
+    input{
+      padding-right: 2.5rem;
+    }
+    label{
+      padding: 1.1rem 0.7rem;
+    }
+  }
+
+  input:focus ~ label,
+  input:not(:placeholder-shown) ~ label,
+  textarea:focus ~ label,
+  textarea:not(:placeholder-shown) ~ label,
+  select:focus ~ label,
+  select:valid ~ label {
+    transform: translateY(-0.77rem) translateX(0.6rem);
+    color: variables.$color-gray-2;
+    background-color: variables.$color-white;
+    padding: 1px 7px;
+    font-weight: 500;
+  }
+}
+
+
+// Semantic-like input:
+
+/* Estilo geral do input */
+.semantic-input {
+  display: inline-block;
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(34, 36, 38, 0.15);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Estilo ao passar o mouse */
+.semantic-input:hover {
+  border-color: #b3b3b3;
+}
+
+/* Estilo ao focar */
+.semantic-input:focus {
+  border-color: #85b7d9;
+  box-shadow: 0 0 0 2px rgba(34, 36, 38, 0.15);
+  outline: none;
+}
+
+/* Estilo para inputs desabilitados */
+.semantic-input:disabled {
+  background-color: #f9f9f9;
+  color: #b3b3b3;
+  border-color: #ddd;
+  cursor: not-allowed;
+}