@vixcom/ui 1.1.0 → 1.2.0

package/{styles → src/styles}/helper/primefaces.scss

@@ -1,373 +1,373 @@
-@import '../mixins';
-
-.p-component {
-  font-size: 100%;
-  font-family: unset;
-}
-
-.p-steps {
-  .p-steps-item {
-    &.p-highlight .p-steps-number {
-      background-color: var(--secondary);
-    }
-
-    .p-steps-number {
-      background-color: var(--primary);
-      color: var(--white);
-    }
-  }
-}
-
-.p-tabview {
-  &.no-header .p-tabview-nav {
-    display: none;
-  }
-
-  & &-nav {
-    align-items: stretch;
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    border: none;
-
-    li {
-      min-width: 20%;
-
-      &.p-highlight {
-        min-width: 30%;
-      }
-
-      .p-tabview-nav-link {
-        height: 100%;
-      }
-    }
-  }
-}
-
-.p-dialog-mask,
-.p-component-overlay,
-.p-dialog-mask.p-component-overlay {
-  z-index: 4;
-}
-
-.p-dialog {
-  min-width: 50%;
-  max-width: 95%;
-  max-height: 95%;
-  z-index: 1;
-
-  .p-confirm-dialog .p-confirm-dialog-icon {
-    font-size: 300%;
-  }
-
-  .p-dialog-header {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-
-    .p-dialog-header-close:hover {
-      color: var(--danger);
-    }
-  }
-
-  .p-dialog-content {
-    padding: 0.25rem 1.5rem;
-
-    .p-confirm-dialog-message {
-      white-space: pre-wrap;
-    }
-  }
-
-  .p-dialog-footer {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    padding: 1.5rem;
-    gap: 0.5rem;
-
-    button {
-      border: none;
-      padding: 0.5rem 1.25rem;
-      text-transform: capitalize;
-    }
-
-    > * {
-      margin-top: 1rem;
-    }
-  }
-}
-
-.p-overlaypanel {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  max-height: 100%;
-  z-index: 1;
-
-  .p-overlaypanel-content {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
-}
-
-.p-toast {
-  z-index: 5;
-}
-
-.p-badge {
-  font-size: 0.75rem;
-}
-
-.input > .p-inputtext {
-  padding: 0;
-  color: unset;
-  font-size: unset;
-}
-
-.p-inputtext {
-  width: 100%;
-
-  &:enabled {
-    margin-bottom: 0;
-
-    :hover {
-      border-color: unset;
-    }
-  }
-}
-
-.p-input-icon-left,
-.p-input-icon-right {
-  display: flex;
-
-  i {
-    display: flex;
-    align-items: center;
-    position: relative;
-    top: 0;
-    margin-top: 0;
-  }
-}
-
-.p-dropdown {
-  border-color: currentColor;
-}
-
-*:not(.p-paginator) > .p-dropdown {
-  width: 100%;
-}
-
-p-chart {
-  width: 100%;
-
-  canvas {
-    width: 100%;
-    min-width: 100%;
-  }
-}
-
-.p-calendar {
-  /* width: 100%; */
-
-  .p-datepicker {
-    min-width: unset;
-
-    .p-datepicker-header {
-      .p-datepicker-month {
-        border: none;
-      }
-    }
-
-    &:not(.p-datepicker-inline) {
-      box-shadow: unset;
-
-      & > * {
-        position: relative;
-      }
-
-      &::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;
-      }
-    }
-
-    table td > span {
-      width: 2.25rem;
-      height: 2.25rem;
-    }
-
-    .p-datepicker-buttonbar {
-      padding: 0;
-    }
-  }
-}
-
-.p-panel {
-  > {
-    :first-child {
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
-    }
-
-    :last-child {
-      border-bottom-left-radius: inherit;
-      border-bottom-right-radius: inherit;
-    }
-  }
-
-  & + .p-panel {
-    margin-top: 1rem;
-  }
-}
-
-.p-accordion {
-  .p-accordion-header-link {
-    border-radius: inherit;
-  }
-
-  // &:not(.default) {
-  //   .p-accordion-header-link {
-  //     padding: 0.75rem;
-  //   }
-
-  //   .p-accordion-content {
-  //     padding: 0;
-  //   }
-  // }
-}
-
-.p-carousel {
-  width: 100%;
-
-  .p-carousel-container {
-    position: relative;
-
-    .p-carousel-prev,
-    .p-carousel-next {
-      position: absolute;
-      box-shadow: var(--card-shadow);
-      z-index: 1;
-    }
-
-    .p-carousel-next {
-      right: 0;
-    }
-  }
-
-  .p-carousel-items-content {
-    /* padding: 1rem; */
-    position: relative;
-    z-index: 0;
-
-    .p-carousel-items-container {
-      gap: 0.5rem;
-
-      .p-carousel-item {
-        display: flex;
-        justify-content: center;
-        /* padding: 0 0.5rem; */
-        /* border: thin solid transparent; */
-
-        &:hover {
-          border-color: var(--primary);
-        }
-      }
-    }
-
-    .p-carousel-item-active:nth-of-type(2) {
-      /* padding: 0 0.125rem; */
-      // transform: scale(1.25);
-    }
-  }
-
-  .p-carousel-indicators {
-    .p-carousel-indicator button {
-      border: none;
-      height: 0.25rem;
-      border-radius: 0.125rem;
-    }
-  }
-}
-
-.p-paginator {
-  &-left-content {
-    margin-right: none;
-  }
-
-  &-right-content {
-    margin-left: none;
-  }
-}
-
-@media (max-width: 575.98px) {
-  .p-dialog {
-    min-width: 95%;
-
-    .p-dialog-footer p-footer {
-      /* justify-content: center; */
-      /* flex-direction: column; */
-    }
-  }
-
-  .p-toast {
-    width: auto;
-    left: 0.5rem;
-    right: 0.5rem;
-  }
-}
-
-.p-message {
-  .p-message-wrapper {
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-}
-
-.p-toast .p-toast-message {
-  .p-toast-icon-close {
-    min-width: 2rem;
-    border: none;
-  }
-}
-
-.p-selectbutton {
-  display: flex;
-
-  > .p-button {
-    width: 100%;
-    padding: 1rem;
-  }
-}
-
-.p-button {
-  text-transform: capitalize;
-  font-size: 120%;
-
-  &:hover {
-    background-color: hsl(var(--primary-hs), calc(var(--primary-l) - 20%));
-  }
-}
-
-.p-hidden-accessible {
-  display: none;
-}
-
-// @each $color,
-// $colorValue in $app-colors-mapped {
-//   .p-toast-message-#{$color} {
-//     background-color: var(--#{$color});
-//     color: var(--#{$color}-c);
-//   }
-
-//   .p-badge-#{$color} {
-//     background-color: var(--#{$color});
-//     color: var(--#{$color}-c);
-//   }
-// }
+@import '../mixins';
+
+.p-component {
+  font-size: 100%;
+  font-family: unset;
+}
+
+.p-steps {
+  .p-steps-item {
+    &.p-highlight .p-steps-number {
+      background-color: var(--secondary);
+    }
+
+    .p-steps-number {
+      background-color: var(--primary);
+      color: var(--white);
+    }
+  }
+}
+
+.p-tabview {
+  &.no-header .p-tabview-nav {
+    display: none;
+  }
+
+  & &-nav {
+    align-items: stretch;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    border: none;
+
+    li {
+      min-width: 20%;
+
+      &.p-highlight {
+        min-width: 30%;
+      }
+
+      .p-tabview-nav-link {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.p-dialog-mask,
+.p-component-overlay,
+.p-dialog-mask.p-component-overlay {
+  z-index: 4;
+}
+
+.p-dialog {
+  min-width: 50%;
+  max-width: 95%;
+  max-height: 95%;
+  z-index: 1;
+
+  .p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 300%;
+  }
+
+  .p-dialog-header {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+
+    .p-dialog-header-close:hover {
+      color: var(--danger);
+    }
+  }
+
+  .p-dialog-content {
+    padding: 0.25rem 1.5rem;
+
+    .p-confirm-dialog-message {
+      white-space: pre-wrap;
+    }
+  }
+
+  .p-dialog-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    padding: 1.5rem;
+    gap: 0.5rem;
+
+    button {
+      border: none;
+      padding: 0.5rem 1.25rem;
+      text-transform: capitalize;
+    }
+
+    > * {
+      margin-top: 1rem;
+    }
+  }
+}
+
+.p-overlaypanel {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  z-index: 1;
+
+  .p-overlaypanel-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+}
+
+.p-toast {
+  z-index: 5;
+}
+
+.p-badge {
+  font-size: 0.75rem;
+}
+
+.input > .p-inputtext {
+  padding: 0;
+  color: unset;
+  font-size: unset;
+}
+
+.p-inputtext {
+  width: 100%;
+
+  &:enabled {
+    margin-bottom: 0;
+
+    :hover {
+      border-color: unset;
+    }
+  }
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+  display: flex;
+
+  i {
+    display: flex;
+    align-items: center;
+    position: relative;
+    top: 0;
+    margin-top: 0;
+  }
+}
+
+.p-dropdown {
+  border-color: currentColor;
+}
+
+*:not(.p-paginator) > .p-dropdown {
+  width: 100%;
+}
+
+p-chart {
+  width: 100%;
+
+  canvas {
+    width: 100%;
+    min-width: 100%;
+  }
+}
+
+.p-calendar {
+  /* width: 100%; */
+
+  .p-datepicker {
+    min-width: unset;
+
+    .p-datepicker-header {
+      .p-datepicker-month {
+        border: none;
+      }
+    }
+
+    &:not(.p-datepicker-inline) {
+      box-shadow: unset;
+
+      & > * {
+        position: relative;
+      }
+
+      &::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;
+      }
+    }
+
+    table td > span {
+      width: 2.25rem;
+      height: 2.25rem;
+    }
+
+    .p-datepicker-buttonbar {
+      padding: 0;
+    }
+  }
+}
+
+.p-panel {
+  > {
+    :first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    :last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+  }
+
+  & + .p-panel {
+    margin-top: 1rem;
+  }
+}
+
+.p-accordion {
+  .p-accordion-header-link {
+    border-radius: inherit;
+  }
+
+  // &:not(.default) {
+  //   .p-accordion-header-link {
+  //     padding: 0.75rem;
+  //   }
+
+  //   .p-accordion-content {
+  //     padding: 0;
+  //   }
+  // }
+}
+
+.p-carousel {
+  width: 100%;
+
+  .p-carousel-container {
+    position: relative;
+
+    .p-carousel-prev,
+    .p-carousel-next {
+      position: absolute;
+      box-shadow: var(--card-shadow);
+      z-index: 1;
+    }
+
+    .p-carousel-next {
+      right: 0;
+    }
+  }
+
+  .p-carousel-items-content {
+    /* padding: 1rem; */
+    position: relative;
+    z-index: 0;
+
+    .p-carousel-items-container {
+      gap: 0.5rem;
+
+      .p-carousel-item {
+        display: flex;
+        justify-content: center;
+        /* padding: 0 0.5rem; */
+        /* border: thin solid transparent; */
+
+        &:hover {
+          border-color: var(--primary);
+        }
+      }
+    }
+
+    .p-carousel-item-active:nth-of-type(2) {
+      /* padding: 0 0.125rem; */
+      // transform: scale(1.25);
+    }
+  }
+
+  .p-carousel-indicators {
+    .p-carousel-indicator button {
+      border: none;
+      height: 0.25rem;
+      border-radius: 0.125rem;
+    }
+  }
+}
+
+.p-paginator {
+  &-left-content {
+    margin-right: none;
+  }
+
+  &-right-content {
+    margin-left: none;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .p-dialog {
+    min-width: 95%;
+
+    .p-dialog-footer p-footer {
+      /* justify-content: center; */
+      /* flex-direction: column; */
+    }
+  }
+
+  .p-toast {
+    width: auto;
+    left: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+.p-message {
+  .p-message-wrapper {
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+}
+
+.p-toast .p-toast-message {
+  .p-toast-icon-close {
+    min-width: 2rem;
+    border: none;
+  }
+}
+
+.p-selectbutton {
+  display: flex;
+
+  > .p-button {
+    width: 100%;
+    padding: 1rem;
+  }
+}
+
+.p-button {
+  text-transform: capitalize;
+  font-size: 120%;
+
+  &:hover {
+    background-color: hsl(var(--primary-hs), calc(var(--primary-l) - 20%));
+  }
+}
+
+.p-hidden-accessible {
+  display: none;
+}
+
+// @each $color,
+// $colorValue in $app-colors-mapped {
+//   .p-toast-message-#{$color} {
+//     background-color: var(--#{$color});
+//     color: var(--#{$color}-c);
+//   }
+
+//   .p-badge-#{$color} {
+//     background-color: var(--#{$color});
+//     color: var(--#{$color}-c);
+//   }
+// }