@vixcom/ui 1.6.2 → 1.7.1

package/src/styles/helper/primefaces.scss

@@ -53,6 +53,12 @@
   }
 }
 
+.p-tabmenu {
+  &-nav {
+    align-items: flex-end;
+  }
+}
+
 .p-dialog-mask,
 .p-component-overlay,
 .p-dialog-mask.p-component-overlay {
@@ -138,9 +144,33 @@
   font-size: 0.75rem;
 }
 
-body .p-float-label {
-  display: flex;
-  flex-wrap: wrap;
+.p-float-label {
+  &,
+  &.p-inputgroup {
+    display: flex;
+  }
+
+  :focus,
+  .p-filled {
+    ~ label {
+      top: 0;
+      transform: translateY(-100%);
+    }
+  }
+
+  label {
+    margin-top: 0;
+    /* top: 50%; */
+    left: 0;
+    padding: 0.25rem;
+    transform: translateY(-50%);
+
+    &.bottom {
+      transform: translateY(100%);
+      top: unset;
+      bottom: 0;
+    }
+  }
 
   .p-dropdown .p-placeholder {
     opacity: 1;
@@ -156,16 +186,18 @@ body .p-float-label {
 .p-input-icon-left,
 .p-input-icon-right {
   display: flex;
+  align-items: center;
 
   i {
     display: flex;
     align-items: center;
-    position: relative;
-    top: 0;
+    position: absolute;
+    top: unset;
     margin-top: 0;
   }
 }
-.p-input-group {
+
+.p-inputgroup {
   .p-button {
     width: unset;
   }
@@ -179,7 +211,7 @@ body .p-float-label {
   border-radius: var(--border-radius);
 
   & &-label {
-    display: flex;
+    /* display: flex; */
   }
 }
 
@@ -200,12 +232,13 @@ body .p-float-label {
   }
 }
 
-*:not(.p-paginator) > {
-  .p-dropdown,
-  .p-inputtext,
-  .p-inputnumber {
-    width: 100%;
-  }
+.p-dropdown,
+.p-calendar,
+.p-password,
+.p-inputtext,
+.p-inputnumber {
+  width: 100%;
+  flex: 1 1 auto;
 }
 
 p-chart {
@@ -217,47 +250,47 @@ p-chart {
   }
 }
 
-.p-calendar {
-  /* width: 100%; */
-
-  .p-datepicker {
-    min-width: unset;
+.p-datepicker {
+  min-width: unset;
 
-    .p-datepicker-header {
-      .p-datepicker-month {
-        border: none;
-      }
+  .p-datepicker-header {
+    .p-datepicker-month {
+      border: none;
     }
+  }
 
-    &:not(.p-datepicker-inline) {
-      box-shadow: unset;
-
-      & > * {
-        position: relative;
-      }
+  &:not(.p-datepicker-inline) {
+    box-shadow: unset;
 
-      &::before {
-        content: '';
-        display: block;
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        box-shadow: var(--card-shadow);
-        border-radius: inherit;
-        top: 0;
-        left: 0;
-        z-index: 0;
-      }
+    & > * {
+      position: relative;
     }
 
-    table td > span {
-      width: 2.25rem;
-      height: 2.25rem;
+    &::before {
+      content: '';
+      display: block;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      box-shadow: var(--card-shadow);
+      border-radius: inherit;
+      top: 0;
+      left: 0;
+      z-index: 0;
     }
+  }
 
-    .p-datepicker-buttonbar {
-      padding: 0;
-    }
+  .p-datepicker-buttonbar {
+    padding: 0;
+  }
+
+  .p-timepicker span {
+    font-size: inherit;
+  }
+
+  table td > span {
+    width: 2.25rem;
+    height: 2.25rem;
   }
 }
 
@@ -279,6 +312,15 @@ p-chart {
   }
 }
 
+.p-timeline-horizontal {
+  &.p-timeline-left .p-timeline-event-opposite {
+    text-align: left;
+  }
+  &.p-timeline-right .p-timeline-event-opposite {
+    text-align: right;
+  }
+}
+
 .p-accordion {
   .p-accordion-header-link {
     border-radius: inherit;
@@ -349,6 +391,13 @@ p-chart {
 }
 
 .p-paginator {
+  background-color: unset;
+  padding: 0;
+
+  .p-inputwrapper {
+    width: unset;
+  }
+
   &-left-content {
     margin-right: none;
   }
@@ -359,18 +408,31 @@ p-chart {
 }
 
 .p-datatable {
+  &-header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
   &-thead {
     text-transform: capitalize;
   }
 
   &-thead > tr > th,
   &-tbody > tr > td {
-    padding: 0.25rem 0.5rem;
+    /* max-width: 1px; */
+    padding: 0.5rem;
 
     .p-row-toggler {
       min-width: unset;
     }
   }
+  tr.p-datatable-row-expansion > td {
+    padding: {
+      left: 5%;
+      right: 5%;
+    }
+  }
 }
 
 .p-message {
@@ -398,7 +460,7 @@ p-chart {
 
 .p-button {
   width: unset;
-  min-width: 2.5rem;
+  /* min-width: 2.5rem; */
   /* text-transform: capitalize; */
 
   &:hover {

package/src/styles/main.scss

@@ -360,9 +360,16 @@ textarea {
   &::-moz-input-placeholder,
   &:-webkit-input-placeholder,
   &::-webkit-input-placeholder {
+    text-transform: capitalize;
     display: none;
     color: currentColor;
-    opacity: 0.75;
+  }
+
+  &:focus {
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      opacity: 0.75;
+    }
   }
 }
 
@@ -378,20 +385,18 @@ label {
 
   &.radio,
   &.checkbox {
-    &,
-    &-container {
-      display: flex;
-      align-items: center;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 
-      .label > * {
-        margin-bottom: 0;
-      }
+    .label > * {
+      margin-bottom: 0;
+    }
 
-      & + {
-        .radio,
-        .checkbox {
-          margin-top: 1rem;
-        }
+    & + {
+      .radio,
+      .checkbox {
+        /* margin-top: 1rem; */
       }
     }
   }
@@ -1396,7 +1401,7 @@ table {
 
 .grid-item {
   display: grid;
-  grid-template-columns: 1fr 4fr;
+  grid-template-columns: minmax(1.5rem, 1fr) 6fr;
   grid-template-rows: 1fr;
   align-items: center;
 
@@ -1433,11 +1438,13 @@ table {
 
 .card {
   display: flex;
-  flex-direction: column;
   border-radius: var(--border-radius);
 
   @include before-content;
 
+  &:not(.h) {
+    flex-direction: column;
+  }
   &:not(.flat)::before {
     box-shadow: var(--card-shadow);
     z-index: -1;
@@ -1742,6 +1749,7 @@ table {
 }
 
 img {
+  height: 100%;
   max-width: 100%;
   object-fit: contain;
 }

package/src/styles/menu.scss

@@ -79,7 +79,8 @@ input.main-menu-trigger {
     ~ * {
       main,
       .page {
-        > footer {
+        > footer,
+        & + footer {
           background-color: var(--secondary);
           color: var(--secondary-c);
         }
@@ -97,7 +98,7 @@ input.main-menu-trigger {
 .main-menu-toggle {
   position: relative;
   font-size: 120%;
-  z-index: 1;
+  /* z-index: 1; */
 }
 
 .menu-container {
@@ -118,11 +119,13 @@ nav,
   align-items: center;
 }
 
-nav,
-.nav,
 .menu-container {
-  flex: 1 1 100%;
-  gap: 0.5rem;
+  nav,
+  .nav,
+  & {
+    flex: 1 1 100%;
+    gap: 0.5rem;
+  }
 }
 
 nav,
@@ -179,6 +182,14 @@ nav,
   &:has(> .side-menu) {
     &.grid {
       grid-template-columns: 1fr 4fr;
+
+      &:has(> header + main) {
+        grid-auto-rows: 1fr;
+      }
+
+      main {
+        grid-row: span 18;
+      }
     }
 
     > {
@@ -208,11 +219,9 @@ nav,
 
   &.grid {
     display: grid;
-    // TODO: set grid direction to `row`
-    grid-template-rows: 1fr;
 
     > .side-menu {
-      grid-row: 1 / -1;
+      grid-row: span 20;
     }
   }
 }
@@ -229,8 +238,8 @@ nav,
     flex-direction: column;
   }
 
-  img {
-    max-height: 5rem;
+  .menu-snap img {
+    max-height: 2.5rem;
   }
 
   nav,
@@ -274,6 +283,7 @@ nav,
 .menu-snap {
   display: flex;
   overflow: scroll;
+  flex-basis: auto;
 
   .item {
     padding: 0.125%;
@@ -323,11 +333,11 @@ main {
   transition: width 0.5s;
   overflow-y: scroll;
   z-index: 0;
+}
 
-  footer {
-    background-color: var(--primary);
-    color: var(--primary-c);
-  }
+.main-menu-container > footer {
+  background-color: var(--primary);
+  color: var(--primary-c);
 }
 
 /* Mobile or PC (Tablet Excluded) */
@@ -346,7 +356,7 @@ main {
     }
 
     #{selector.nest('input.main-menu-trigger:not(:checked)','~,~ *', '.side-menu > .menu-snap')} {
-      flex-basis: 25%;
+      /* flex-basis: 25%; */
     }
 
     &.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
@@ -354,7 +364,7 @@ main {
     }
 
     &.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
-      grid-template-columns: 1fr 20fr;
+      grid-template-columns: 1fr 10fr;
       @include mini-side-menu-toggled;
     }
 
@@ -386,6 +396,10 @@ main {
 /* Above Mobile */
 @media (min-width: 577px) {
   .main-menu-container {
+    input.main-menu-trigger {
+      z-index: -1;
+    }
+
     .full-menu,
     .float-menu {
       .menu-container {
@@ -401,6 +415,13 @@ main {
         }
       }
     }
+    &:has(> .side-menu) {
+      &.grid {
+        > #{'header,footer'} {
+          grid-column: 2;
+        }
+      }
+    }
   }
 }
 
@@ -420,7 +441,7 @@ main {
     // WARN: Browser compatibility on :has pseudo-property
 
     &.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) {
-      grid-template-columns: 1fr 12fr;
+      grid-template-columns: 1fr 6fr;
       @include mini-side-menu-toggled;
     }
 
@@ -446,7 +467,7 @@ main {
 @media (max-width: 768px) {
   .main-menu-container {
     #{selector.nest('input.main-menu-trigger:checked','~,~ *', '.side-menu > .menu-snap')} {
-      flex-basis: 25%;
+      /* flex-basis: 25%; */
     }
 
     input.main-menu-trigger {
@@ -547,7 +568,7 @@ main {
   }
 
   .main-menu-container {
-    #{selector.nest('input.main-menu-trigger:checked','~,~ *','.main-menu', 'nav, .nav,.menu-container')},
+    #{selector.nest('input.main-menu-trigger:checked','~,~ *','.main-menu', selector.unify('nav, .nav,.menu-container',':not(.menu-snap)'))},
     &.flex {
       flex-direction: column;
     }