@vixcom/ui 1.4.0 → 1.6.0

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/index.scss

@@ -0,0 +1,6 @@
+.gm-style,
+.jse-main {
+  button {
+    min-width: unset;
+  }
+}

package/src/styles/helper/primefaces.scss

@@ -1,8 +1,17 @@
 @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 +68,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 +90,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 +116,15 @@
     display: flex;
     flex-direction: column;
     min-height: 100%;
+
+    & > {
+      header,
+      footer {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+    }
   }
 }
 
@@ -117,13 +136,22 @@
   font-size: 0.75rem;
 }
 
+.p-float-label {
+  display: flex;
+
+  .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 {
@@ -148,8 +176,16 @@
   }
 }
 
+.p-dropdown-panel {
+  width: 1px;
+}
+
 .p-dropdown {
-  border-color: currentColor;
+  border-radius: var(--border-radius);
+
+  & &-label {
+    display: flex;
+  }
 }
 
 *:not(.p-paginator) > .p-dropdown {
@@ -246,7 +282,7 @@ p-chart {
 .p-carousel {
   width: 100%;
 
-  .p-carousel-container {
+  &-container {
     position: relative;
 
     .p-carousel-prev,
@@ -261,7 +297,7 @@ p-chart {
     }
   }
 
-  .p-carousel-items-content {
+  &-items-content {
     /* padding: 1rem; */
     position: relative;
     z-index: 0;
@@ -306,7 +342,22 @@ p-chart {
   }
 }
 
-@media (max-width: 575.98px) {
+.p-datatable {
+  &-thead {
+    text-transform: capitalize;
+  }
+
+  &-thead > tr > th,
+  &-tbody > tr > td {
+    padding: 0.25rem 0.5rem;
+
+    .p-row-toggler {
+      min-width: unset;
+    }
+  }
+}
+
+@media (max-width: 576px) {
   .p-dialog {
     min-width: 95%;
 
@@ -348,7 +399,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 +410,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

@@ -9,7 +9,6 @@ script {
 * {
   scrollbar-color: hsl(var(--muted-hs), calc(var(--muted-l) + 40%)) transparent;
   scrollbar-width: thin;
-  cursor: default;
   word-break: break-word;
 }
 
@@ -36,11 +35,7 @@ script {
   padding: 0.5rem;
 }
 
-::-moz-selection {
-  color: var(--white);
-  background: hsl(var(--muted-hs), calc(var(--muted-l) + 20%));
-}
-
+::-moz-selection,
 ::selection {
   color: var(--white);
   background: hsl(var(--muted-hs), calc(var(--muted-l) + 20%));
@@ -88,9 +83,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 +144,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 +155,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 +212,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 +262,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 +290,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 +696,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 +974,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 +998,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 +1032,9 @@ button,
     margin-top: 0.5rem;
   }
 
-  // .icon {
-  //   font-size: 80%;
-  // }
+  .icon {
+    font-size: 125%;
+  }
 }
 
 .button-group {
@@ -1393,11 +1344,6 @@ table {
       background-color: inherit;
       z-index: 0;
     }
-
-    .bg-svg {
-      -webkit-mask-image: url('/assets/bg/flex-card-bg-icons.svg');
-      mask-image: url('/assets/bg/flex-card-bg-icons.svg');
-    }
   }
 
   .img,
@@ -1452,6 +1398,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;
 
@@ -1460,47 +1419,31 @@ table {
   }
 }
 
-.text-strick-line {
-  display: flex;
+.strike-line {
+  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,8 +1499,15 @@ table {
   }
 }
 
+.card-group {
+  .card + .card {
+    margin-top: 1rem;
+  }
+}
+
 .flex-list,
-.item-list {
+.item-list,
+.menu {
   margin: 1.5rem 0;
   list-style: none;
   display: flex;
@@ -1796,6 +1746,7 @@ table {
 
 img {
   max-width: 100%;
+  object-fit: contain;
 }
 
 .img-fullwidth {
@@ -1840,6 +1791,14 @@ img {
   }
 }
 
+.bg-svg {
+  height: 100%;
+  background-color: currentColor;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
 .rounded-inherit {
   border-radius: inherit;
 }
@@ -1895,7 +1854,8 @@ section {
 
 /* Above Tablets/Mini PC */
 @media (min-width: 769px) {
-  .item-list {
+  .item-list,
+  .menu {
     .item > .value {
       margin-left: 1rem;
       text-align: right;
@@ -1974,7 +1934,8 @@ section {
     width: 100%;
   }
 
-  .item-list {
+  .item-list,
+  .menu {
     &:not(.has-connector) {
       gap: 1rem;
     }