@vixcom/ui 1.3.0 → 1.5.0

package/src/styles/animations.scss

@@ -22,14 +22,14 @@
 }
 
 .loading::after {
-  content: '\f110' !important;
+  content: '\f110';
   /* font-size: 200%; */
   font-family: 'FontAwesome';
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 1 !important;
-  background-color: unset !important;
+  opacity: 1;
+  background-color: unset;
   animation: rotate-clockwise 0.25s linear infinite;
 }
 
@@ -108,7 +108,7 @@
 }
 
 .infinite {
-  animation-iteration-count: infinite
+  animation-iteration-count: infinite;
 }
 
 @keyframes fade-out-half {
@@ -123,44 +123,44 @@
 
 @keyframes x-ind-move {
   from {
-    transform: translateX(1rem)
+    transform: translateX(1rem);
   }
 }
 
 @keyframes drop-down {
   from {
-    transform: translateY(0)
+    transform: translateY(0);
   }
 }
 
 @keyframes rotate-clockwise {
   from {
-    transform: rotate(0deg)
+    transform: rotate(0deg);
   }
 
   to {
-    transform: rotate(1turn)
+    transform: rotate(1turn);
   }
 }
 
 @-webkit-keyframes rotate-clockwise {
   from {
-    transform: rotate(0deg)
+    transform: rotate(0deg);
   }
 
   to {
-    transform: rotate(1turn)
+    transform: rotate(1turn);
   }
 }
 
 @keyframes zoom-in-logo {
   from {
     transform-origin: center;
-    transform: scale(0)
+    transform: scale(0);
   }
 
   to {
-    transform: scale(1)
+    transform: scale(1);
   }
 }
 
@@ -177,15 +177,14 @@
   z-index: 1;
 
   &.show {
-    display: flex
+    display: flex;
   }
 }
 
 .show,
 .collapsed {
-
-  &[class*="collapse-icon"],
-  [class*="collapse-icon"] {
+  &[class*='collapse-icon'],
+  [class*='collapse-icon'] {
     transform: rotateX(-0.5turn);
   }
-}
+}

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');
@@ -67,6 +60,10 @@ input {
   background-color: currentColor;
 }
 
+.bg-inherit {
+  background-color: inherit;
+}
+
 .inactive {
   color: #bcbccb;
 }
@@ -95,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/owl.carousel.scss

@@ -7,8 +7,8 @@
 }
 
 .owl-carousel.fullwidth .owl-stage {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .carousel .carousel-item {
@@ -26,15 +26,14 @@
 }
 
 .owl-carousel {
-
   .owl-stage {
-    /* padding-left: 0 !important; */
+    /* padding-left: 0; */
     display: flex;
   }
 
   .owl-item {
     padding-left: 0.25rem;
-    // min-height: 6rem !important;
+    // min-height: 6rem;
 
     .flex-card {
       border-radius: 0.75rem;
@@ -84,9 +83,9 @@
         opacity: 1;
       }
 
-      &+.owl-dot {
+      & + .owl-dot {
         margin-left: 0.5rem;
       }
     }
   }
-}
+}

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);