otimus-library 0.0.49 → 0.0.51

package/styles/components/buttons.scss

@@ -1,226 +1,226 @@
-@use '../variables.scss';
-
-.oc.button {
-  height: 3rem;
-
-  padding: 0 2rem;
-
-  background-color: variables.$color-gray-4;
-  color: variables.$color-gray-1;
-
-  border-radius: 0.5rem;
-  border: none;
-
-  font-weight: 500;
-  font-size: 1rem;
-  transition: 0.15s ease;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-
-  cursor: pointer;
-
-  span{
-    pointer-events: none;
-  }
-
-  &.align-left{
-    padding-left: 1rem;
-  }
-
-  &.align-right{
-    padding-right: 1rem;
-  }
-
-  // EFECTS
-  &:hover{
-    filter: brightness(0.96);
-
-    *> {
-      filter: brightness(1.3);
-    }
-  }
-
-  &:active{
-    transform: translateY(1.5px);
-  }
-
-  &.white {
-    background-color: variables.$color-white;
-    color: variables.$color-gray-3;
-  }
-
-  &.no-bg{
-    color: variables.$color-gray-3;
-    background-color: transparent;
-
-    &:hover{
-      background-color: variables.$color-gray-6;
-    }
-  }
-
-  &.error{
-    background-color: variables.$color-error;
-    color: variables.$color-gray-6;
-  }
-
-  //Purple Tones
-  &.p-1{
-    background-color: variables.$color-brand-p-1;
-    color: variables.$color-gray-6;
-  }
-  
-  &.p-2{
-    background-color: variables.$color-brand-p-2;
-    color: variables.$color-gray-6;
-  }
-
-  &.p-3{
-    background-color: variables.$color-brand-p-4;
-    color: variables.$color-gray-6;
-  }
-
-  &.p-4{
-    background-color: variables.$color-brand-p-6;
-    color: variables.$color-gray-6;
-  }
-  
-  //Green Tones
-  &.g-1{
-    background-color: variables.$color-brand-g-1;
-    color: variables.$color-brand-p-2;
-  }
-
-  &.g-2{
-    background-color: variables.$color-brand-g-2;
-    color: variables.$color-brand-p-2;
-  }
-
-  &.g-3{
-    background-color: variables.$color-brand-g-3;
-    color: variables.$color-brand-p-2;
-  }
-
-  &.g-4{
-    background-color: variables.$color-brand-g-6;
-    color: variables.$color-brand-p-2;
-  }
-  
-  &.gray-1 {
-    background-color: variables.$color-gray-6;
-    color: variables.$color-gray-3
-  }
-
-  &.gray-2{
-    background-color: variables.$color-gray-4;
-    color: variables.$color-gray-1
-  }
-
-  &.gray-3{
-    background-color: variables.$color-gray-3;
-    color: variables.$color-gray-6;
-  }
-
-  &.gray-4{
-    background-color: variables.$color-gray-2;
-    color: variables.$color-gray-6;
-  }
-
-  &.gray-5{
-    background-color: variables.$color-gray-1;
-    color: variables.$color-gray-6;
-  }
-  
-  // SIZES
-  &.tiny {
-    height: 2rem !important;
-  }
-
-  &.small{
-    height: 2.5rem !important;
-  }
-
-  &.large{
-    height: 3.5rem !important;
-  }
-
-  //ICON
-  &.icon{
-    height: 3rem;
-    width: 3rem;
-    padding: 0;
-
-    gap: 0 ;
-
-    &.tiny{
-      width: 2rem !important;
-    }
-
-    &.small{
-      width: 2.5rem !important;
-      padding: 0;
-    }
-
-    &.large{
-      width: 3.5rem !important;
-      padding: 0;
-    
-      // font-size: 2rem !important;
-    }
-  }
-
-  &.outlined{
-    background-color: transparent;
-    border: 2px solid;
-
-    //Purple Tones
-    &.p-1{
-      color: variables.$color-brand-p-1;
-    }
-    
-    &.p-2{
-      color: variables.$color-brand-p-2;
-    }
-  
-    &.p-3{
-      color: variables.$color-brand-p-4;
-    }
-  
-    &.p-4{
-      color: variables.$color-brand-p-6;
-    }
-    
-    //Green Tones
-    &.g-1{
-      color: variables.$color-brand-g-1;
-    }
-  
-    &.g-2{
-      color: variables.$color-brand-g-2;
-    }
-  
-    &.g-3{
-      color: variables.$color-brand-g-3;
-    }
-  
-    &.g-4{
-      color: variables.$color-brand-g-6;
-    }
-     
-    //Gray
-
-    &.gray-1{
-      color: variables.$color-gray-3;
-    }
-
-    &.gray-2{
-      color: variables.$color-gray-2;
-    }
-
-    &.gray-3{
-      color: variables.$color-gray-1;
-    }
-  }
-}
+@use '../variables.scss';
+
+.oc.button {
+  height: 3rem;
+
+  padding: 0 2rem;
+
+  background-color: variables.$color-gray-4;
+  color: variables.$color-gray-1;
+
+  border-radius: 0.5rem;
+  border: none;
+
+  font-weight: 500;
+  font-size: 1rem;
+  transition: 0.15s ease;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  cursor: pointer;
+
+  span{
+    pointer-events: none;
+  }
+
+  &.align-left{
+    padding-left: 1rem;
+  }
+
+  &.align-right{
+    padding-right: 1rem;
+  }
+
+  // EFECTS
+  &:hover{
+    filter: brightness(0.96);
+
+    *> {
+      filter: brightness(1.3);
+    }
+  }
+
+  &:active{
+    transform: translateY(1.5px);
+  }
+
+  &.white {
+    background-color: variables.$color-white;
+    color: variables.$color-gray-3;
+  }
+
+  &.no-bg{
+    color: variables.$color-gray-3;
+    background-color: transparent;
+
+    &:hover{
+      background-color: variables.$color-gray-6;
+    }
+  }
+
+  &.error{
+    background-color: variables.$color-error;
+    color: variables.$color-gray-6;
+  }
+
+  //Purple Tones
+  &.p-1{
+    background-color: variables.$color-brand-p-1;
+    color: variables.$color-gray-6;
+  }
+  
+  &.p-2{
+    background-color: variables.$color-brand-p-2;
+    color: variables.$color-gray-6;
+  }
+
+  &.p-3{
+    background-color: variables.$color-brand-p-4;
+    color: variables.$color-gray-6;
+  }
+
+  &.p-4{
+    background-color: variables.$color-brand-p-6;
+    color: variables.$color-gray-6;
+  }
+  
+  //Green Tones
+  &.g-1{
+    background-color: variables.$color-brand-g-1;
+    color: variables.$color-brand-p-2;
+  }
+
+  &.g-2{
+    background-color: variables.$color-brand-g-2;
+    color: variables.$color-brand-p-2;
+  }
+
+  &.g-3{
+    background-color: variables.$color-brand-g-3;
+    color: variables.$color-brand-p-2;
+  }
+
+  &.g-4{
+    background-color: variables.$color-brand-g-6;
+    color: variables.$color-brand-p-2;
+  }
+  
+  &.gray-1 {
+    background-color: variables.$color-gray-6;
+    color: variables.$color-gray-3
+  }
+
+  &.gray-2{
+    background-color: variables.$color-gray-4;
+    color: variables.$color-gray-1
+  }
+
+  &.gray-3{
+    background-color: variables.$color-gray-3;
+    color: variables.$color-gray-6;
+  }
+
+  &.gray-4{
+    background-color: variables.$color-gray-2;
+    color: variables.$color-gray-6;
+  }
+
+  &.gray-5{
+    background-color: variables.$color-gray-1;
+    color: variables.$color-gray-6;
+  }
+  
+  // SIZES
+  &.tiny {
+    height: 2rem !important;
+  }
+
+  &.small{
+    height: 2.5rem !important;
+  }
+
+  &.large{
+    height: 3.5rem !important;
+  }
+
+  //ICON
+  &.icon{
+    height: 3rem;
+    width: 3rem;
+    padding: 0;
+
+    gap: 0 ;
+
+    &.tiny{
+      width: 2rem !important;
+    }
+
+    &.small{
+      width: 2.5rem !important;
+      padding: 0;
+    }
+
+    &.large{
+      width: 3.5rem !important;
+      padding: 0;
+    
+      // font-size: 2rem !important;
+    }
+  }
+
+  &.outlined{
+    background-color: transparent;
+    border: 2px solid;
+
+    //Purple Tones
+    &.p-1{
+      color: variables.$color-brand-p-1;
+    }
+    
+    &.p-2{
+      color: variables.$color-brand-p-2;
+    }
+  
+    &.p-3{
+      color: variables.$color-brand-p-4;
+    }
+  
+    &.p-4{
+      color: variables.$color-brand-p-6;
+    }
+    
+    //Green Tones
+    &.g-1{
+      color: variables.$color-brand-g-1;
+    }
+  
+    &.g-2{
+      color: variables.$color-brand-g-2;
+    }
+  
+    &.g-3{
+      color: variables.$color-brand-g-3;
+    }
+  
+    &.g-4{
+      color: variables.$color-brand-g-6;
+    }
+     
+    //Gray
+
+    &.gray-1{
+      color: variables.$color-gray-3;
+    }
+
+    &.gray-2{
+      color: variables.$color-gray-2;
+    }
+
+    &.gray-3{
+      color: variables.$color-gray-1;
+    }
+  }
+}

package/styles/components/inputs.scss

@@ -1,114 +1,114 @@
-
-.oc-input-box {
-  position: relative;
-
-  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
-  }
-
-  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-p-2;
-    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;
-  }
-}
-
-.small {
-  input, textarea, select {
-    padding: 0.3rem 0.7rem;
-    border-radius: 0.5rem;
-  }
-
-  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;
-  }
-}
-
-.large {
-  input, textarea, select {
-    padding: 1rem;
-    border-radius: 1rem;
-  }
-
-  label {
-    padding: 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;
-  }
-}
+
+.oc-input-box {
+  position: relative;
+
+  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
+  }
+
+  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-p-2;
+    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;
+  }
+}
+
+.small {
+  input, textarea, select {
+    padding: 0.3rem 0.7rem;
+    border-radius: 0.5rem;
+  }
+
+  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;
+  }
+}
+
+.large {
+  input, textarea, select {
+    padding: 1rem;
+    border-radius: 1rem;
+  }
+
+  label {
+    padding: 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;
+  }
+}