@vixcom/ui 1.0.0

package/styles/colors.scss

@@ -0,0 +1,117 @@
+@import 'mixins';
+
+/**
+* HSL Darken = level - n; Lighten = level + n.
+** Darken Color = hsl(var(--{color}-hs), calc(var(--{color}-l) - n%))
+** Lighten Color = hsl(var(--{color}-hs), calc(var(--{color}-l) + n%))
+* {color}-hs = The Hue and Saturation level of the color.
+* {color}-l = Lightness level of the color.
+* {color}-a = Alpha level of the color.
+* {color}-c = The corresponding Text color of the color, if it is used as a background.
+*/
+
+@each $k,
+$v in $app-colors-mapped {
+  // Texts
+  @include mapped-color-variant('.text-#{$k}', $k, $v);
+  @include mapped-neon-color-variant('.text-neon-#{$k}', $k, $v);
+  // Background
+  @include mapped-bg-color-variant('.bg-#{$k}', $k, $v);
+  @include mapped-g-color-variant('.bg-g-#{$k}', $k, $v);
+  @include mapped-tabs-variant('.tabs-#{$k}', $k, $v);
+  @include mapped-alert-variant('.alert-#{$k}', $k, $v);
+  @include mapped-outline-variant('.bg-outline-#{$k}', $k, $v);
+  // Buttons
+  @include mapped-bg-color-variant('.btn-#{$k}', $k, $v);
+  @include mapped-g-color-variant('.btn-g-#{$k}', $k, $v);
+  @include mapped-outline-variant('.btn-outline-#{$k}', $k, $v);
+  // Badges
+  @include mapped-bg-color-variant('.badge-#{$k}', $k, $v);
+  @include mapped-outline-variant('.badge-outline-#{$k}', $k, $v);
+
+  .border-#{$k} {
+    border-color: map-get($v, 'bg')
+  }
+}
+
+@each $v in (0, 25, 50, 75, 100) {
+  .opacity-#{$v} {
+    opacity: $v/100;
+  }
+}
+
+button,
+input {
+
+  &.focus,
+  &:focus-within,
+  &:focus {
+    outline: none;
+    box-shadow: none !important
+  }
+}
+
+.bg-transparent,
+.btn-transparent,
+.tabs-transparent,
+.alert-transparent {
+  border: none;
+  background-color: transparent !important;
+  color: currentColor !important;
+}
+
+.bg-current,
+.btn-current,
+.tabs-current,
+.alert-current {
+  border: none;
+  background-color: currentColor;
+  // color: currentColor !important;
+}
+
+.inactive {
+  color: #BCBCCB
+}
+
+
+.shadow- {
+  &1 {
+    &::before {
+      box-shadow: var(--black) 0 3px 9px -3px;
+    }
+  }
+}
+
+.shadow-inset {
+  &-1 {
+    &::before {
+      box-shadow: inset var(--black) 0 3px 9px -3px;
+    }
+  }
+}
+
+[class*=shadow-] {
+  position: relative;
+  z-index: 1;
+
+  &>* {
+    position: relative;
+  }
+
+  @include before-content;
+}
+
+input,
+input::placeholder,
+input::-webkit-input-placeholder {
+  color: currentColor !important
+}
+
+.text-unset,
+.text-color-unset {
+  color: unset
+}
+
+.text-current {
+  color: currentColor
+}

package/styles/fonts.scss

@@ -0,0 +1,16 @@
+/** 
+* @Author Vixson
+* @Description Font variables and Logics
+*/
+
+@for $n from 1 through 6 {
+  h#{$n},
+  .h#{$n},
+  .font-#{7 - $n} {
+    --heading-size: calc(
+      var(--heading-start) -
+        (#{$n - 1} * (var(--heading-start) - var(--heading-end)) / 5)
+    );
+    font-size: var(--heading-size);
+  }
+}

package/styles/grid.scss

@@ -0,0 +1,4 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}

package/styles/helper/owl.carousel.scss

@@ -0,0 +1,92 @@
+/** 
+* Owl Carousel Library Patch
+*/
+
+/* .carousel.fullwidth .carousel-item {
+  width: 100%;
+}
+
+.owl-carousel.fullwidth .owl-stage {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.carousel .carousel-item {
+  margin-right: 1rem;
+  width: 90%;
+} */
+
+.owl-carousel.partical {
+  margin-left: -1.25rem;
+  margin-right: -1.25rem;
+}
+
+.owl-carousel.partical .owl-stage-outer {
+  min-width: 100vw;
+}
+
+.owl-carousel {
+
+  .owl-stage {
+    /* padding-left: 0 !important; */
+    display: flex;
+  }
+
+  .owl-item {
+    padding-left: 0.25rem;
+    // min-height: 6rem !important;
+
+    .flex-card {
+      border-radius: 0.75rem;
+      height: 100%;
+      border: none;
+
+      .bg-image {
+        // background-clip: border-box;
+        // background-image: attr(data-src './assets/bg/flex-card-bg.svg');
+        // background-size: cover;
+        // background-repeat: no-repeat;
+        object-fit: cover;
+        position: absolute;
+        display: block;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        z-index: 0;
+      }
+
+      .content {
+        align-self: stretch;
+
+        .title {
+          margin-bottom: 0.5rem;
+        }
+      }
+    }
+  }
+
+  .owl-dots {
+    display: flex;
+    flex-wrap: nowrap;
+    text-align: center;
+
+    .owl-dot {
+      height: 0.125rem;
+      width: 100%;
+      /* width: 2.5rem; */
+      margin-right: 0.25rem;
+      background-color: currentColor;
+      opacity: 0.125;
+      transition: all 0.75s;
+
+      &.active {
+        opacity: 1;
+      }
+
+      &+.owl-dot {
+        margin-left: 0.5rem;
+      }
+    }
+  }
+}

package/styles/helper/primefaces.scss

@@ -0,0 +1,364 @@
+@import '../mixins';
+
+.p-component {
+  font-size: 100%;
+  font-family: unset;
+}
+
+.p-steps {
+  .p-steps-item {
+    &.p-highlight .p-steps-number {
+      background-color: var(--secondary) !important;
+    }
+
+    .p-steps-number {
+      background-color: var(--primary) !important;
+      color: var(--white) !important;
+    }
+  }
+}
+
+.p-tabview {
+  &.no-header .p-tabview-nav {
+    display: none;
+  }
+
+  & &-nav {
+    align-items: stretch;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    border: none !important;
+
+    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) !important;
+    }
+  }
+
+  .p-dialog-content {
+    padding: 0.25rem 1.5rem;
+  }
+
+  .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;
+    }
+
+    .btn {
+      margin: 0;
+
+      & + .btn {
+        margin-left: 0.5rem;
+      }
+    }
+
+    > * {
+      margin-top: 1rem;
+    }
+  }
+}
+
+.p-overlaypanel {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  z-index: 1 !important;
+
+  .p-overlaypanel-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+}
+
+.p-toast {
+  z-index: 5 !important;
+}
+
+.p-badge {
+  font-size: 0.75rem !important;
+}
+
+.input > .p-inputtext {
+  padding: 0;
+  color: unset;
+  font-size: unset;
+}
+
+.p-inputtext {
+  width: 100%;
+
+  &:enabled {
+    margin-bottom: 0;
+
+    :hover {
+      border-color: unset;
+    }
+  }
+}
+
+.p-dropdown {
+  border-color: currentColor;
+}
+
+*:not(.p-paginator) > .p-dropdown {
+  width: 100%;
+}
+
+p-chart {
+  width: 100% !important;
+
+  canvas {
+    width: 100% !important;
+    min-width: 100% !important;
+  }
+}
+
+.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 !important;
+      border-top-right-radius: inherit !important;
+    }
+
+    :last-child {
+      border-bottom-left-radius: inherit !important;
+      border-bottom-right-radius: inherit !important;
+    }
+  }
+
+  & + .p-panel {
+    margin-top: 1rem;
+  }
+}
+
+.p-accordion {
+  .p-accordion-header-link {
+    border-radius: inherit !important;
+  }
+
+  // &: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 !important;
+      border-radius: 0.125rem !important;
+    }
+  }
+}
+
+.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 !important;
+    left: 0.5rem !important;
+    right: 0.5rem !important;
+  }
+}
+
+.p-message {
+  .p-message-icon {
+    margin-right: 1rem;
+  }
+}
+
+.p-toast .p-toast-message {
+  .p-toast-icon-close {
+    min-width: 2rem;
+    border: none !important;
+  }
+}
+
+.p-selectbutton {
+  display: flex;
+
+  > .p-button {
+    width: 100%;
+    padding: 1rem;
+  }
+}
+
+.p-button {
+  font-size: 120%;
+  border-color: unset;
+  background-color: unset;
+  // background-color: var(--primary);
+
+  &: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}) !important;
+//     color: var(--#{$color}-c) !important;
+//   }
+
+//   .p-badge-#{$color} {
+//     background-color: var(--#{$color}) !important;
+//     color: var(--#{$color}-c) !important;
+//   }
+// }

package/styles/helper/tailwindcss.scss

@@ -0,0 +1,4 @@
+.grid>div {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}

package/styles/index.scss

@@ -0,0 +1,25 @@
+/* 
+* @Author: Vixson
+* @Description: Unique and Very Responsive Admin Dashboard UI
+*/
+@import 'mixins';
+// @import 'https://unpkg.com/bootstrap@latest/dist/css/bootstrap.min.css';
+@import 'external/bootstrap.css';
+@import 'variables.css';
+@import 'app.css';
+@import 'sizes.css';
+@import 'colors.css';
+@import 'animations.css';
+@import 'polyfills.css';
+
+@font-face {
+  font-family: 'AppTitle';
+  src: url('/fonts/NotoSans-Bold.ttf');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'AppContent';
+  src: url('/fonts/Roboto-Regular.ttf');
+  font-weight: normal;
+}