otimus-library 0.2.1 → 0.2.2

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

@@ -1,195 +1,195 @@
-@use '../../variables.scss';
-
-.shui-input-box.prefix {
-  .material-symbols-outlined{
-    position: absolute;
-    left: 0;
-    font-size: 1.5rem;
-    user-select: none;
-  }
-}
-.shui-input-box.suffix {
-  .material-symbols-outlined, .oc.suffix{
-    position: absolute;
-    right: 0;
-    font-size: 1.5rem;
-    user-select: none;
-  }
-}
-
-.shui-input-box {
-  position: relative;
-  margin-top: .5rem;
-
-  select * {
-    background-color: variables.$color-shui-base-1;
-  }
-
-  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 {
-    .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;
-    background-color: variables.$color-shui-base-1;
-    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;
-  }
-
-  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);
-    padding: 1px 7px;
-    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;
-  }
-}
-
-.shui-input-box::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;
-}
-.shui-input-box:focus-within::before {
-  width: 100%;
-}
-
-
-.error {
-  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;
-  }
-}
-
-.shui-input-box.small{
-  input, textarea, select {
-    max-height: 36px;
-    padding-top: 1rem;
-  }
-
-  &.prefix {
-    .material-symbols-outlined{
-      padding: .35rem .7rem;
-      font-size: 1.25rem;
-      color: variables.$color-shui-ui-8;
-    }
-    label{
-      padding: .45rem 2.5rem;
-    }
-  }
-
-  &.suffix {
-    .material-symbols-outlined {
-      padding: .35rem .7rem;
-      color: variables.$color-shui-ui-8;
-    }
-    label{
-      padding: .45rem 0.7rem;
-    }
-  }
-}
-
-.shui-input-box.large {
-  input, textarea, select {
-    height: 46px;
-  }
-
-  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;
-    }
-  }
-}
+@use '../../variables.scss';
+
+.shui-input-box.prefix {
+  .material-symbols-outlined{
+    position: absolute;
+    left: 0;
+    font-size: 1.5rem;
+    user-select: none;
+  }
+}
+.shui-input-box.suffix {
+  .material-symbols-outlined, .oc.suffix{
+    position: absolute;
+    right: 0;
+    font-size: 1.5rem;
+    user-select: none;
+  }
+}
+
+.shui-input-box {
+  position: relative;
+  margin-top: .5rem;
+
+  select * {
+    background-color: variables.$color-shui-base-1;
+  }
+
+  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 {
+    .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;
+    background-color: variables.$color-shui-base-1;
+    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;
+  }
+
+  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);
+    padding: 1px 7px;
+    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;
+  }
+}
+
+.shui-input-box::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;
+}
+.shui-input-box:focus-within::before {
+  width: 100%;
+}
+
+
+.error {
+  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;
+  }
+}
+
+.shui-input-box.small{
+  input, textarea, select {
+    max-height: 36px;
+    padding-top: 1rem;
+  }
+
+  &.prefix {
+    .material-symbols-outlined{
+      padding: .35rem .7rem;
+      font-size: 1.25rem;
+      color: variables.$color-shui-ui-8;
+    }
+    label{
+      padding: .45rem 2.5rem;
+    }
+  }
+
+  &.suffix {
+    .material-symbols-outlined {
+      padding: .35rem .7rem;
+      color: variables.$color-shui-ui-8;
+    }
+    label{
+      padding: .45rem 0.7rem;
+    }
+  }
+}
+
+.shui-input-box.large {
+  input, textarea, select {
+    height: 46px;
+  }
+
+  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;
+    }
+  }
+}

package/styles/components/table/table.scss

@@ -1,69 +1,69 @@
-@use '../../variables.scss';
-
-.oc.table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 20px 0;
-  font-size: 1em;
-  font-family: 'Arial', sans-serif;
-  
-  thead {
-    min-height: 50px ;
-    height: 50px;
-  }
-
-  tr {
-    background-color: white;
-    transition: 0.1s ease;
-    // border: 1px solid variables.$color-gray-6;
-    border-top: 0;
-    border-bottom: 0;
-  }
-}
-
-.oc.table th, .oc.table td {
-  padding: 13px 15px;
-  text-align: left;
-}
-
-.oc.table th {
-  background-color: variables.$color-gray-6;
-  color: variables.$color-brand-p-1;
-  font-weight: 600;
-}
-
-.oc.table.striped tr:nth-child(even) {
-  background-color: rgba(variables.$color-gray-6, 0.5);
-}
-
-.oc.table td {
-  border-bottom: 1px solid variables.$color-gray-5;
-}
-
-.oc.table th:first-child, .oc.table td:first-child {
-  border-top-left-radius: 10px;
-}
-
-.oc.table th:last-child, .oc.table td:last-child {
-  border-top-right-radius: 10px;
-}
-
-.oc.table th:first-child, .oc.table td:first-child {
-  border-bottom-left-radius: 10px;
-}
-
-.oc.table th:last-child, .oc.table td:last-child {
-  border-bottom-right-radius: 10px;
-}
-
-.oc.table tr:hover {
-  filter: brightness(0.95);
-}
-
-.button-row {
-  display: flex;
-  justify-content: flex-end;
-  gap: .75rem;
-}
-
+@use '../../variables.scss';
+
+.oc.table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+  font-size: 1em;
+  font-family: 'Arial', sans-serif;
+  
+  thead {
+    min-height: 50px ;
+    height: 50px;
+  }
+
+  tr {
+    background-color: white;
+    transition: 0.1s ease;
+    // border: 1px solid variables.$color-gray-6;
+    border-top: 0;
+    border-bottom: 0;
+  }
+}
+
+.oc.table th, .oc.table td {
+  padding: 13px 15px;
+  text-align: left;
+}
+
+.oc.table th {
+  background-color: variables.$color-gray-6;
+  color: variables.$color-brand-p-1;
+  font-weight: 600;
+}
+
+.oc.table.striped tr:nth-child(even) {
+  background-color: rgba(variables.$color-gray-6, 0.5);
+}
+
+.oc.table td {
+  border-bottom: 1px solid variables.$color-gray-5;
+}
+
+.oc.table th:first-child, .oc.table td:first-child {
+  border-top-left-radius: 10px;
+}
+
+.oc.table th:last-child, .oc.table td:last-child {
+  border-top-right-radius: 10px;
+}
+
+.oc.table th:first-child, .oc.table td:first-child {
+  border-bottom-left-radius: 10px;
+}
+
+.oc.table th:last-child, .oc.table td:last-child {
+  border-bottom-right-radius: 10px;
+}
+
+.oc.table tr:hover {
+  filter: brightness(0.95);
+}
+
+.button-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: .75rem;
+}
+
 @import './table.shui.scss';

package/styles/components/table/table.shui.scss

@@ -1,49 +1,49 @@
-@use '../../variables.scss';
-
-.shui .oc.table,
-.shui.oc.table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 20px 0;
-  font-size: 1em;
-  font-family: 'Arial', sans-serif;
-
-  thead {
-    min-height: 50px;
-    height: 50px;
-  }
-
-  tr {
-    background-color: white;
-    transition: 0.1s ease;
-    border: none;
-    border-top: 0;
-    border-bottom: 0;
-  
-    &:hover {
-      filter: brightness(0.95);
-    }
-  }
-
-  th, td {
-    padding: 15px;
-    text-align: left;
-  }
-
-  th {
-    background-color: transparent;
-    border-bottom: 1px solid rgba(variables.$color-shui-ui-5, 0.75);
-    color: variables.$color-shui-ui-1;
-    font-weight: 600;
-    padding: 12px 15px;
-  }
-
-  td {
-    border-bottom: 1px solid rgba(variables.$color-shui-ui-6, 0.5);
-    font-size: 0.9rem;
-  }
-
-  &.striped tr:nth-child(even) {
-    background-color: white;
-  }
-}
+@use '../../variables.scss';
+
+.shui .oc.table,
+.shui.oc.table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+  font-size: 1em;
+  font-family: 'Arial', sans-serif;
+
+  thead {
+    min-height: 50px;
+    height: 50px;
+  }
+
+  tr {
+    background-color: white;
+    transition: 0.1s ease;
+    border: none;
+    border-top: 0;
+    border-bottom: 0;
+  
+    &:hover {
+      filter: brightness(0.95);
+    }
+  }
+
+  th, td {
+    padding: 15px;
+    text-align: left;
+  }
+
+  th {
+    background-color: transparent;
+    border-bottom: 1px solid rgba(variables.$color-shui-ui-5, 0.75);
+    color: variables.$color-shui-ui-1;
+    font-weight: 600;
+    padding: 12px 15px;
+  }
+
+  td {
+    border-bottom: 1px solid rgba(variables.$color-shui-ui-6, 0.5);
+    font-size: 0.9rem;
+  }
+
+  &.striped tr:nth-child(even) {
+    background-color: white;
+  }
+}

package/styles/components/tooltip.scss

@@ -1,27 +1,27 @@
-.oc-tooltip {
-  margin: 0;
-  position: absolute;
-  padding: 0.35rem 0.7rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-  background-color: #F8F9FF;
-  border: 1px solid white;
-  border-radius: 0.75rem;
-  box-shadow: 0px 3px 6.5px 0px rgba(0, 0, 0, 0.20);
-  transition: 0.15s ease;
-  max-width: 400px;
-  z-index: 1000;
-  pointer-events: none;
-  animation: show-up 0.15s ease;
-  &.mouse-tracking {
-    border-top-left-radius: 0;
-  }
-}
-
-@keyframes show-up {
-  from {
-    opacity: 0;
-  } to {
-    opacity: 1;
-  }
+.oc-tooltip {
+  margin: 0;
+  position: absolute;
+  padding: 0.35rem 0.7rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  background-color: #F8F9FF;
+  border: 1px solid white;
+  border-radius: 0.75rem;
+  box-shadow: 0px 3px 6.5px 0px rgba(0, 0, 0, 0.20);
+  transition: 0.15s ease;
+  max-width: 400px;
+  z-index: 1000;
+  pointer-events: none;
+  animation: show-up 0.15s ease;
+  &.mouse-tracking {
+    border-top-left-radius: 0;
+  }
+}
+
+@keyframes show-up {
+  from {
+    opacity: 0;
+  } to {
+    opacity: 1;
+  }
 }