otimus-library 0.3.9 → 0.3.11

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

@@ -1,213 +1,213 @@
-@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 {
-    z-index: 5;
-    .material-symbols-outlined,.oc.suffix{
-      padding: .5rem .7rem;
-    }
-    input{
-      padding-left: 1.75rem;
-    }
-    label{
-      padding: .7rem 2.5rem;
-    }
-  }
-
-  &.suffix {
-    z-index: 5;
-    .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;
-    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-1;
-    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;
-  }
-}
-
-.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 {
-    z-index: 5;
-    .material-symbols-outlined{
-      padding: .35rem .7rem;
-      font-size: 1.25rem;
-      color: variables.$color-shui-ui-8;
-    }
-    label{
-      padding: .45rem 2.5rem;
-    }
-  }
-
-  &.suffix {
-    z-index: 5;
-    .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 {
-    z-index: 5;
-    .material-symbols-outlined{
-      padding: 1rem .7rem;
-    }
-    input{
-      padding-left: 2.5rem;
-    }
-    label{
-      padding: 1.1rem 2.5rem;
-    }
-  }
-
-  &.suffix {
-    z-index: 5;
-    .material-symbols-outlined {
-      padding: .9rem .7rem;
-    }
-    input{
-      padding-right: 2.5rem;
-    }
-    label{
-      padding: 1.1rem 0.7rem;
-    }
-  }
-}
-
-.oc.suffix, .oc.prefix, .material-symbols-outlined {
-  z-index: 5 !important;
+@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 {
+    z-index: 5;
+    .material-symbols-outlined,.oc.suffix{
+      padding: .5rem .7rem;
+    }
+    input{
+      padding-left: 1.75rem;
+    }
+    label{
+      padding: .7rem 2.5rem;
+    }
+  }
+
+  &.suffix {
+    z-index: 5;
+    .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;
+    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-1;
+    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;
+  }
+}
+
+.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 {
+    z-index: 5;
+    .material-symbols-outlined{
+      padding: .35rem .7rem;
+      font-size: 1.25rem;
+      color: variables.$color-shui-ui-8;
+    }
+    label{
+      padding: .45rem 2.5rem;
+    }
+  }
+
+  &.suffix {
+    z-index: 5;
+    .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 {
+    z-index: 5;
+    .material-symbols-outlined{
+      padding: 1rem .7rem;
+    }
+    input{
+      padding-left: 2.5rem;
+    }
+    label{
+      padding: 1.1rem 2.5rem;
+    }
+  }
+
+  &.suffix {
+    z-index: 5;
+    .material-symbols-outlined {
+      padding: .9rem .7rem;
+    }
+    input{
+      padding-right: 2.5rem;
+    }
+    label{
+      padding: 1.1rem 0.7rem;
+    }
+  }
+}
+
+.oc.suffix, .oc.prefix, .material-symbols-outlined {
+  z-index: 5 !important;
 }

package/styles/components/table/table.scss

@@ -1,98 +1,98 @@
-@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;
-  }
-
-  &.refreshing tr {
-    opacity: 0.3 !important;
-    animation: refreshing 1.3s ease-in-out infinite;
-    animation-fill-mode: both;
-  }
-
-  @for $i from 1 through 10 {
-    &.refreshing tr:nth-child(#{$i}) {
-      animation-delay: #{($i - 1) * 0.2}s;
-    }
-  }
-}
-
-.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 {
-  background-color: #f5f5f5 !important;
-}
-
-.button-row {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-}
-
-@keyframes refreshing {
-  0% {
-    opacity: 0.3;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 0.3;
-  }
-}
-
-@import './table.shui.scss';
+@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;
+  }
+
+  &.refreshing tr {
+    opacity: 0.3 !important;
+    animation: refreshing 1.3s ease-in-out infinite;
+    animation-fill-mode: both;
+  }
+
+  @for $i from 1 through 10 {
+    &.refreshing tr:nth-child(#{$i}) {
+      animation-delay: #{($i - 1) * 0.2}s;
+    }
+  }
+}
+
+.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 {
+  background-color: #f5f5f5 !important;
+}
+
+.button-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+@keyframes refreshing {
+  0% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}
+
+@import './table.shui.scss';