@vixcom/ui 1.4.0 → 1.5.0

package/src/styles/colors.scss

@@ -11,23 +11,16 @@
 * {color}-c = The corresponding Text color of the color, if it is used as a background.
 */
 
-@each $k, $v in $app-colors-mapped {
+@each $k, $v in $colors-mapped {
   // Texts
-  @include mapped-color-variant('.text-#{$k}', $k, $v);
-  @include mapped-neon-color-variant('.text-neon-#{$k}', $k, $v);
+  @include color-variant('.text-#{$k}', $k, $v);
+  @include 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);
+  @include bg-color-variant('.bg-#{$k}', $k, $v);
+  @include gradient-variant('.bg-g-#{$k}', $k, $v);
+  @include outline-variant('.bg-outline-#{$k}', $k, $v);
+  @include group-bg-color-variant('.tabs-#{$k}', $k, $v);
+  @include group-bg-color-variant('.dots-#{$k}', $k, $v);
 
   .border-#{$k} {
     border-color: map-get($v, 'bg');
@@ -99,7 +92,7 @@ input {
   position: relative;
   z-index: 1;
 
-  & > * {
+  > * {
     position: relative;
   }
 

package/src/styles/fonts.scss

@@ -2,15 +2,52 @@
 * @Author Vixson
 * @Description Font variables and Logics
 */
+@import 'mixins';
 
-@for $n from 1 through 6 {
+%heading-size {
+  font-size: var(--heading-size);
+  @include unify-selector(svg, &) {
+    transform: scale(calc(var(--heading-size) / 10));
+  }
+}
+
+$heading-start: (
+  k: 1,
+  v: 200,
+);
+$heading-end: (
+  k: 6,
+  v: 100,
+);
+
+@for $n from map-get($heading-start, 'k') through map-get($heading-end, 'k') {
   h#{$n},
   .h#{$n},
-  .font-#{7 - $n} {
+  .font-#{(map-get($heading-end, 'k') - $n+1)} {
     --heading-size: calc(
-      var(--heading-start) -
-        (#{$n - 1} * (var(--heading-start) - var(--heading-end)) / 5)
+      var(--heading-start, #{map-get($heading-start, 'v')}#{'%'}) -
+        (
+          #{$n -
+            1} *
+            (
+              var(--heading-start, #{map-get($heading-start, 'v')}#{'%'}) -
+                var(--heading-end, #{map-get($heading-end, 'v')}#{'%'})
+            ) /
+            #{(map-get($heading-end, 'k') - map-get($heading-start, 'k'))}
+        )
     );
-    font-size: var(--heading-size);
+    @extend %heading-size;
   }
 }
+
+.font-sm {
+  font-size: 75%;
+}
+
+.font-md {
+  font-size: 90%;
+}
+
+.font-lg {
+  font-size: 250%;
+}

package/src/styles/helper/primefaces.scss

@@ -1,8 +1,16 @@
 @import '../mixins';
 
 .p-component {
-  font-size: 100%;
-  font-family: unset;
+  & [class*='p-']:not(.pi) {
+    font: {
+      size: inherit;
+      weight: inherit;
+    }
+  }
+
+  * {
+    font-family: inherit;
+  }
 }
 
 .p-steps {
@@ -59,16 +67,21 @@
     font-size: 300%;
   }
 
-  .p-dialog-header {
+  &-header {
+    display: flex;
+    align-items: center;
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
 
-    .p-dialog-header-close:hover {
+    &-close:hover {
       color: var(--danger);
     }
+    &-icons button {
+      min-width: unset;
+    }
   }
 
-  .p-dialog-content {
+  &-content {
     padding: 0.25rem 1.5rem;
 
     .p-confirm-dialog-message {
@@ -76,21 +89,17 @@
     }
   }
 
-  .p-dialog-footer {
+  &-footer {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
     padding: 1.5rem;
     gap: 0.5rem;
 
     button {
-      border: none;
-      padding: 0.5rem 1.25rem;
-      text-transform: capitalize;
-    }
-
-    > * {
-      margin-top: 1rem;
+      margin: 0;
     }
   }
 }
@@ -106,6 +115,15 @@
     display: flex;
     flex-direction: column;
     min-height: 100%;
+
+    & > {
+      header,
+      footer {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+    }
   }
 }
 
@@ -117,13 +135,20 @@
   font-size: 0.75rem;
 }
 
+.p-float-label {
+  .p-dropdown .p-placeholder {
+    opacity: 1;
+  }
+}
+
 .input > .p-inputtext {
   padding: 0;
   color: unset;
   font-size: unset;
 }
 
-.p-inputtext {
+.p-inputtext,
+.p-inputnumber {
   width: 100%;
 
   &:enabled {
@@ -150,6 +175,15 @@
 
 .p-dropdown {
   border-color: currentColor;
+  & &-label {
+    display: flex;
+  }
+
+  &-item {
+    > img {
+      width: 100%;
+    }
+  }
 }
 
 *:not(.p-paginator) > .p-dropdown {
@@ -306,7 +340,7 @@ p-chart {
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 576px) {
   .p-dialog {
     min-width: 95%;
 
@@ -348,7 +382,6 @@ p-chart {
 
 .p-button {
   text-transform: capitalize;
-  font-size: 120%;
 
   &:hover {
     background-color: hsl(var(--primary-hs), calc(var(--primary-l) - 20%));
@@ -360,7 +393,7 @@ p-chart {
 }
 
 // @each $color,
-// $colorValue in $app-colors-mapped {
+// $colorValue in $colors-mapped {
 //   .p-toast-message-#{$color} {
 //     background-color: var(--#{$color});
 //     color: var(--#{$color}-c);

package/src/styles/index.scss

@@ -2,9 +2,6 @@
 * @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 'main.css';
 @import 'sizes.css';

package/src/styles/main.scss

@@ -88,9 +88,6 @@ b {
 .bg-text,
 .bg-text-color {
   position: relative;
-  display: inline-flex;
-  // align-items: center;
-  // justify-content: center;
 
   &:hover::after {
     opacity: 0.125;
@@ -152,11 +149,9 @@ a:not(.link) {
 }
 
 .page-header {
-  padding: 1rem 1.5rem;
+  padding: 0 1rem;
   display: flex;
   align-items: center;
-  position: relative;
-  z-index: 1;
 
   &.position-sticky,
   &.sticky {
@@ -165,49 +160,20 @@ a:not(.link) {
     left: 0;
   }
 
-  .main-title {
-    margin-bottom: 0;
-    font-size: 125%;
-
-    @include unify-selector(img, &) {
-      width: 10rem;
-    }
-  }
-}
-
-.flex-container {
-  display: flex;
-  flex-wrap: wrap;
-  /* align-items: flex-end; */
-  margin: 0.5rem 0;
-  gap: 0.5rem;
-
-  > * {
-    /* align-self: flex-start; */
-    margin-bottom: 0;
-  }
-}
-
-.page-header {
-  margin: 1rem 0;
-  padding: 0 1rem;
-  display: flex;
-  align-items: center;
-
   .page-title {
     text-transform: capitalize;
     margin-right: auto;
-    margin-bottom: 1rem;
-    color: var(--primary);
-
     font: {
       size: 200%;
       weight: normal;
     }
-  }
 
-  .button {
-    min-width: auto;
+    .button {
+      min-width: auto;
+    }
+    @include unify-selector(img, &) {
+      width: 10rem;
+    }
   }
 }
 
@@ -251,6 +217,19 @@ a:not(.link) {
   }
 }
 
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  /* align-items: flex-end; */
+  margin: 0.5rem 0;
+  gap: 0.5rem;
+
+  > * {
+    /* align-self: flex-start; */
+    margin-bottom: 0;
+  }
+}
+
 .row > [class*='col'] {
   margin-bottom: 1em;
 
@@ -288,7 +267,9 @@ a:not(.link) {
 }
 
 [class*='sq-'] {
-  @include flex-center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex: unset;
   padding: 0;
   /* margin: auto; */
@@ -314,30 +295,6 @@ hr[class*='s-']:not(.default) {
   border: 0;
 }
 
-.s-sm {
-  padding: 0.25rem;
-}
-
-.s-1 {
-  padding: 0.5rem;
-}
-
-.s-2 {
-  padding: 0.75rem;
-}
-
-.s-3 {
-  padding: 1.5rem;
-}
-
-.s-4 {
-  padding: 2.5rem;
-}
-
-.s-5 {
-  padding: 5rem;
-}
-
 .dropdown-menu-right .dropdown-menu {
   transform: translate(-100%, 0);
 }
@@ -744,18 +701,18 @@ option[disabled]:first-of-type {
     margin-top: 0.5rem;
   }
 
-  &:has(input:invalid) {
-    color: var(--danger);
-  }
+  // &:has(input:invalid) {
+  //   color: var(--danger);
+  // }
 
-  &:has(input:focus:empty),
-  &:has(input:focus:placeholder-shown) {
-    &::before,
-    .label {
-      // @include append-selector() {
-      background-color: var(--primary);
-    }
-  }
+  // &:has(input:focus:empty),
+  // &:has(input:focus:placeholder-shown) {
+  //   &::before,
+  //   .label {
+  //     // @include append-selector() {
+  //     background-color: var(--primary);
+  //   }
+  // }
 
   // &>label,
   &::before,
@@ -1022,9 +979,9 @@ button,
   position: relative;
   display: inline-flex;
   border-radius: var(--border-radius, 0.25rem);
-  padding: 0.25rem;
+  padding: 0.25rem 0.75rem;
   font-size: 120%;
-  min-width: 7.5rem;
+  min-width: 5rem;
   gap: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -1046,10 +1003,9 @@ button,
   }
 
   &.button-circle {
-    width: 3rem;
-    height: 3rem;
+    min-width: 5rem;
+    min-height: 5rem;
     display: inline-flex;
-    min-width: unset;
     padding: 0.5rem;
     align-items: center;
     justify-content: center;
@@ -1081,9 +1037,9 @@ button,
     margin-top: 0.5rem;
   }
 
-  // .icon {
-  //   font-size: 80%;
-  // }
+  .icon {
+    font-size: 125%;
+  }
 }
 
 .button-group {
@@ -1395,8 +1351,8 @@ table {
     }
 
     .bg-svg {
-      -webkit-mask-image: url('/assets/bg/flex-card-bg-icons.svg');
-      mask-image: url('/assets/bg/flex-card-bg-icons.svg');
+      -webkit-mask-image: url('/assets/images/card-bg.svg');
+      mask-image: url('/assets/images/card-bg.svg');
     }
   }
 
@@ -1452,6 +1408,19 @@ table {
   }
 }
 
+.grid-item {
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  grid-template-rows: 1fr;
+  align-items: center;
+
+  :nth-child(1) {
+    grid-row: 1/-1;
+  }
+  :nth-child(2) {
+  }
+}
+
 .text-spaced {
   letter-spacing: 0.25rem;
 
@@ -1461,46 +1430,30 @@ table {
 }
 
 .text-strick-line {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   align-items: center;
   justify-content: center;
-
-  & .label,
-  &::content {
-    width: 100%;
-  }
+  gap: 0.5rem;
 
   &::before,
   &::after {
     content: '';
     display: inline-block;
-    margin: 0 0.5rem;
-    width: 100%;
     height: 1px;
-    max-width: 10rem;
     background-color: currentColor;
   }
 }
 
 .card {
-  @include before-content;
-
-  &:not(.flat) {
-    /* overflow: unset; */
-    border: none;
-    z-index: 0;
-
-    & > * {
-      /* position: relative; */
-    }
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius);
 
-    &::before {
-      box-shadow: var(--card-shadow);
-    }
-  }
+  @include before-content;
 
-  & + .card {
-    margin-top: 1rem;
+  &:not(.flat)::before {
+    box-shadow: var(--card-shadow);
   }
 
   &:not(.card-body) > {
@@ -1556,6 +1509,12 @@ table {
   }
 }
 
+.card-group {
+  .card + .card {
+    margin-top: 1rem;
+  }
+}
+
 .flex-list,
 .item-list {
   margin: 1.5rem 0;

package/src/styles/menu.scss

@@ -133,7 +133,6 @@ nav,
     gap: 0.75rem;
     padding: 0.5rem 1rem;
     text-decoration: none;
-    color: currentColor;
 
     .label {
       transition: position 0.25s linear 0.125s, transform 0.25s linear 0.125s,

package/src/styles/sizes.scss

@@ -158,38 +158,3 @@ $directions: (
     }
   }
 }
-
-$heading-start: (
-  k: 1,
-  v: 200,
-);
-$heading-end: (
-  k: 6,
-  v: 100,
-);
-$heading-difference: math.div(
-  (map-get($heading-start, 'v') - map-get($heading-end, 'v')),
-  (map-get($heading-end, 'k') - map-get($heading-start, 'k'))
-);
-
-@for $n from map-get($heading-start, 'k') through map-get($heading-end, 'k') {
-  $_value: map-get($heading-start, 'v') - (($n - 1) * $heading-difference);
-
-  h#{$n},
-  .h#{$n},
-  .font-#{(map-get($heading-end, 'k') - ($n+1))} {
-    font-size: #{$_value}#{'%'};
-  }
-}
-
-.font-sm {
-  font-size: 75%;
-}
-
-.font-md {
-  font-size: 90%;
-}
-
-.font-lg {
-  font-size: 250%;
-}

package/src/styles/variables.scss

@@ -2,13 +2,13 @@
 
 :root {
   --font-size: var(--o-font-size, #{$font-size});
-  --card-shadow: #{$card-shadow};
+  --card-shadow: var(--shadow-1);
   --background-color: #{$background-color};
   --heading-start: 200%;
   --heading-end: 100%;
 
   /* Color Variables */
-  @each $k, $v in $app-colors-mapped {
+  @each $k, $v in $colors-mapped {
     /* ---COLOR-#{$k}-START--- */
     --#{$k}: #{map-get($v, 'bg')};
     /* ---HSL-#{$k}--- */
@@ -23,7 +23,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 576px) {
   :root {
     --font-size: calc(var(--o-font-size) / 1.15);
   }