@vixcom/ui 1.3.0 → 1.5.0

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

@@ -2,11 +2,15 @@
 
 /* Scrollbar - Start */
 
+script {
+  display: none;
+}
+
 * {
   scrollbar-color: hsl(var(--muted-hs), calc(var(--muted-l) + 40%)) transparent;
   scrollbar-width: thin;
   cursor: default;
-  /* word-break: break-word; */
+  word-break: break-word;
 }
 
 ::-webkit-scrollbar {
@@ -23,6 +27,7 @@
 
 ::-webkit-scrollbar-thumb {
   background-color: hsl(var(--muted-hs), calc(var(--muted-l) + 40%));
+  background-clip: padding-box;
   border-radius: 0;
 }
 
@@ -49,6 +54,7 @@ body {
   color: var(--default, --white-c);
   font-size: var(--font-size);
   font-weight: normal;
+  margin: 0;
 }
 
 %title {
@@ -82,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;
@@ -141,68 +144,36 @@ a:not(.link) {
 
 .main-logo {
   display: inline-flex;
-  width: 10rem;
   max-width: 100%;
   object-fit: contain;
 }
 
 .page-header {
-  padding: 1rem 1.5rem;
+  padding: 0 1rem;
   display: flex;
   align-items: center;
-  position: relative;
-  z-index: 1;
 
   &.position-sticky,
   &.sticky {
-    position: sticky !important;
+    position: sticky;
     top: 0;
     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;
+    }
   }
 }
 
@@ -246,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;
 
@@ -283,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; */
@@ -304,35 +290,11 @@ hr {
 }
 
 hr[class*='s-']:not(.default) {
-  background-color: transparent !important;
+  background-color: transparent;
   margin: 0;
   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);
 }
@@ -410,12 +372,14 @@ textarea {
   }
 }
 
-ul {
+ul,
+menu {
   list-style: none;
   padding-left: 0;
 }
 
 label {
+  margin: 0;
   cursor: pointer;
 
   &.radio,
@@ -424,7 +388,6 @@ label {
     &-container {
       display: flex;
       align-items: center;
-      margin: 1rem 0;
 
       .label > * {
         margin-bottom: 0;
@@ -446,13 +409,14 @@ label {
   .active,
   input:not(:checked) ~ .label.off,
   input:checked ~ .label:not(.off) {
-    color: var(--secondary);
+    // TODO: Check if parent background color is secondary
+    // color: var(--secondary);
     font-weight: bold;
   }
 
   input[type='radio'],
   input[type='checkbox'] {
-    margin: 0 0.5rem;
+    // margin: 0 0.5rem;
   }
 }
 
@@ -476,9 +440,6 @@ input {
     -webkit-appearance: none;
     appearance: none;
     border: none;
-    width: 2rem;
-    min-width: 2rem;
-    height: 1rem;
     padding: 0;
     margin: 0;
     border-radius: 0.5rem;
@@ -486,6 +447,12 @@ input {
     color: unset;
     opacity: 1;
 
+    &:not(.default) {
+      width: 2rem;
+      min-width: 2rem;
+      height: 1rem;
+    }
+
     &::before {
       content: '';
       display: block;
@@ -555,11 +522,11 @@ input {
     display: inline-block;
     justify-content: center;
     align-items: center;
-    width: 1rem !important;
+    width: 1rem;
     min-width: 1rem;
     height: 1rem;
     min-height: 1rem;
-    padding: 0.125rem !important;
+    padding: 0.125rem;
     margin: 0;
 
     &::after {
@@ -615,19 +582,19 @@ input {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: inherit !important;
+    border-radius: inherit;
     /* font-weight: bold; */
     align-self: stretch;
     min-width: unset;
 
     &:not(:last-child) {
-      border-top-right-radius: 0 !important;
-      border-bottom-right-radius: 0 !important;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
 
     &:not(:first-child) {
-      border-top-left-radius: 0 !important;
-      border-bottom-left-radius: 0 !important;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
   }
 
@@ -734,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,
@@ -786,8 +753,8 @@ option[disabled]:first-of-type {
     }
 
     .addon {
-      background-color: var(--danger) !important;
-      color: var(--white) !important;
+      background-color: var(--danger);
+      color: var(--white);
     }
 
     > {
@@ -801,7 +768,6 @@ option[disabled]:first-of-type {
   &.has-warning {
     &::after,
     .hint {
-      /* font-weight: bold; */
       color: var(--warning);
     }
 
@@ -853,7 +819,6 @@ option[disabled]:first-of-type {
     justify-content: space-between;
     overflow: hidden;
     gap: 0.125rem;
-    /* border-radius: 5rem; */
     @include before-content;
 
     &::before {
@@ -883,15 +848,11 @@ option[disabled]:first-of-type {
 
 .tabs {
   position: relative;
-  margin-bottom: 1rem;
   display: flex;
   overflow-x: scroll;
   flex-wrap: nowrap;
-  /* align-items: center; */
   width: 100%;
-  padding: 0.125rem 1.25rem;
   gap: 0.5rem;
-  /* z-index: 1; */
 
   > .tab {
     display: inline-flex;
@@ -901,7 +862,7 @@ option[disabled]:first-of-type {
     padding: 0.25rem;
     border: none;
     border-radius: 0.25rem;
-    /* font-weight: bold; */
+    gap: 0.25rem;
     min-width: 5rem;
     flex: 0 0 auto;
     transition: background-color 0.25s;
@@ -929,44 +890,24 @@ option[disabled]:first-of-type {
     @extend %no-scrollbar;
   }
 
-  &.overlap {
-    @include after-content;
-
-    &::after {
-      background-color: inherit;
-    }
-  }
-
   &.md {
-    .tab {
-      background-color: transparent !important;
-
-      &.active {
-        border-bottom: medium solid;
-      }
-    }
-  }
-
-  &.md,
-  &.overlap {
-    // @extend &.no-scrollbar;
-
     > .tab {
-      margin-bottom: 0;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       padding: 0.25rem 0.5rem;
+      background-color: transparent;
 
+      &.active {
+        border-bottom: medium solid;
+      }
       .label {
         margin: 0.5rem;
       }
     }
   }
-}
 
-.tabs-container {
-  .tabs {
-    .tab {
+  &.overlap {
+    > .tab {
       position: relative;
 
       &::before,
@@ -998,11 +939,11 @@ option[disabled]:first-of-type {
 
 .border {
   &-dashed {
-    border-style: dashed !important;
+    border-style: dashed;
   }
 
   &-current {
-    border-color: currentColor !important;
+    border-color: currentColor;
   }
 }
 
@@ -1033,17 +974,21 @@ option[disabled]:first-of-type {
   border-radius: 0.5rem;
 }
 
+button,
 .button {
   position: relative;
-  padding: 0.25rem 1.5rem;
-  font-size: 120%;
-  /* font-weight: bold; */
-  min-width: 7.5rem;
   display: inline-flex;
-  gap: 0.5rem;
+  border-radius: var(--border-radius, 0.25rem);
+  padding: 0.25rem 0.75rem;
+  font-size: 120%;
+  min-width: 5rem;
+  gap: 0.25rem;
   justify-content: center;
   align-items: center;
-  /* border: none; */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 1px;
 
   &:focus {
     outline: 1px solid hsl(var(--secondary-hs), calc(var(--secondary-l) + 50%));
@@ -1058,10 +1003,9 @@ option[disabled]:first-of-type {
   }
 
   &.button-circle {
-    width: 3rem;
-    height: 3rem;
+    min-width: 5rem;
+    min-height: 5rem;
     display: inline-flex;
-    min-width: unset !important;
     padding: 0.5rem;
     align-items: center;
     justify-content: center;
@@ -1093,9 +1037,9 @@ option[disabled]:first-of-type {
     margin-top: 0.5rem;
   }
 
-  // .icon {
-  //   font-size: 80%;
-  // }
+  .icon {
+    font-size: 125%;
+  }
 }
 
 .button-group {
@@ -1151,7 +1095,7 @@ table {
 
     tr,
     > .row {
-      background-color: inherit !important;
+      background-color: inherit;
 
       & + tr,
       & + .row {
@@ -1407,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');
     }
   }
 
@@ -1464,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;
 
@@ -1472,48 +1429,31 @@ table {
   }
 }
 
-.title-strick,
 .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) > {
@@ -1569,6 +1509,12 @@ table {
   }
 }
 
+.card-group {
+  .card + .card {
+    margin-top: 1rem;
+  }
+}
+
 .flex-list,
 .item-list {
   margin: 1.5rem 0;
@@ -1924,11 +1870,10 @@ section {
   }
 }
 
-/* Below Tables/Mini PC */
+/* Tables/Mini PC Below */
 @media (max-width: 768px) {
   .page-header,
   .section-header {
-    padding: 0;
     flex-wrap: wrap;
 
     input[type='search'] {
@@ -1949,14 +1894,6 @@ section {
     }
   }
 
-  .tabs {
-    padding: 1.25rem 0.125rem;
-
-    &.overlap {
-      padding: 0;
-    }
-  }
-
   .table-container {
     &:not(.is-sticky) .row.table-header {
       display: none;
@@ -1990,7 +1927,7 @@ section {
   }
 }
 
-/* Below Mobile */
+/* Mobile Below */
 @media (max-width: 576px) {
   .card {
     width: 100%;