@basic-ui-components-stc/basic-ui-components 1.0.0

package/dist/assets/scss/components/_lists.scss

@@ -0,0 +1,171 @@
+.list-unstyled {
+  list-style: none;
+  padding: 0;
+}
+
+.dotted-list {
+  list-style: none;
+  margin-bottom: 0;
+  li {
+    display: flex;
+    align-items: baseline;
+    margin: 0 -5px 10px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    &:before {
+      content: "";
+      min-width: 9px;
+      height: 9px;
+      background-color: var(--coral);
+      margin: 0 5px;
+    }
+  }
+  &.gray-dot {
+    li {
+      &:before {
+        background-color: var(--light-gray);
+      }
+    }
+  }
+  &.dark-gray-dot {
+    li {
+      &:before {
+        background-color:var(--dark-gray);
+      }
+    }
+  }
+}
+
+
+.user-list, .category-list{
+  display: grid !important;
+  grid-auto-flow: column;
+  // grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* see notes below */
+  grid-template-columns: 260px;
+  grid-gap: .75rem;
+  padding-top: 0 !important;
+  padding-bottom: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  &.column{
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+
+    overflow: auto;
+    .mat-mdc-list-item{
+      min-width: auto !important;
+      max-width: initial !important;
+      height: 70px !important;
+    }
+  }
+  .mat-mdc-list-item{
+    // width: 260px !important;
+    min-width: 260px !important;
+    max-width: 260px !important;
+    height: 53px !important;
+    background-color: var(--light-gray);
+    border: 1px solid var(--light-gray);
+    margin-bottom: 0;
+    .img-card{
+      order: -1;
+    }
+    .mat-line{
+      white-space: normal;
+      max-width: 144px;
+    }
+  }
+}
+
+.chip-list{
+  display: flex !important;
+  flex-wrap: nowrap;
+  padding-top: 0 !important;
+  margin: 0 !important;
+  grid-gap: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  .mat-mdc-list-item{
+    width: auto !important;
+    height: 28px !important;
+    background-color: var(--light-gray);
+    border: 1px solid var(--light-gray);
+    /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
+    /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
+    .mat-list-item-content{
+      padding: 0 .5rem !important;
+      .mat-line{
+        font-size: 0.75rem;
+      }
+      .mat-mdc-icon-button{
+        min-width: 16px !important;
+        width: 16px !important;
+        height: 16px !important;
+      }
+    }
+  }
+}
+
+
+mat-selection-list.mat-mdc-selection-list {
+    --mdc-list-list-item-label-text-font: var(--font-family);
+    --mdc-list-list-item-label-text-size: .875rem;
+    --mdc-list-list-item-label-text-weight: 500;
+    --mdc-list-list-item-supporting-text-font: var(--font-family);
+    --mdc-list-list-item-supporting-text-size: .75rem;
+    --mdc-list-list-item-supporting-text-color: var(--black);
+    --mdc-list-list-item-supporting-text-weight: 400;
+    --mdc-list-list-item-supporting-text-line-height: 1;
+
+    --mdc-list-list-item-leading-icon-color: var(--dark-gray);
+
+
+    padding: 0;
+
+    .mdc-list-item {
+      height: auto;
+      padding: 1rem;
+      gap: 1rem;
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--gray);
+      }
+
+      &__start{
+        margin: 0 !important;
+      }
+
+      &__content {
+        align-self: center;
+      }
+
+      &__primary-text, &__secondary-text {
+        &::before, &::after {
+          content: none !important;
+        }
+      }
+
+      &__primary-text{
+        margin-bottom: 0 !important;
+      }
+
+      &__secondary-text{
+        margin-top: .3rem;
+      }
+
+      .mdc-list-item__end {
+        --mdc-radio-disabled-selected-icon-color: #000;
+        --mdc-radio-disabled-unselected-icon-color: #000;
+        --mdc-radio-unselected-focus-icon-color: var(--gray);
+        --mdc-radio-unselected-hover-icon-color: var(--gray);
+        --mdc-radio-unselected-icon-color: var(--gray);
+        --mdc-radio-unselected-pressed-icon-color: var(--gray);
+        --mdc-radio-selected-focus-icon-color: var(--coral);
+        --mdc-radio-selected-hover-icon-color: var(--coral);
+        --mdc-radio-selected-icon-color: var(--coral);
+        --mdc-radio-selected-pressed-icon-color: var(--coral);
+        --mat-mdc-radio-ripple-color: #000;
+        --mat-mdc-radio-checked-ripple-color: var(--coral);
+        margin: 0 !important;
+      }
+    }
+  }

package/dist/assets/scss/components/_loading.scss

@@ -0,0 +1,38 @@
+.loading-bg {
+  height: 30px;
+  background-color: #eeeeee;
+  background-image: linear-gradient(90deg, #eeeeee 25%, #e6e6e6 37%, #eeeeee 63%);
+  background-size: 400% 100%;
+  -webkit-animation: loading-background 1.4s ease infinite;
+  animation: loading-background 1.4s ease infinite;
+  width: 100%;
+  text-indent: -99999999px;
+}
+
+.loading-bg-white {
+  height: 30px;
+  background-image: linear-gradient(90deg, var(--rgb-off-white) 25%, #e6e6e6 37%, #fff 63%);
+  background-size: 400% 100%;
+  -webkit-animation: loading-background 1.4s ease infinite;
+  animation: loading-background 1.4s ease infinite;
+  width: 100%;
+  text-indent: -99999999px;
+}
+
+.loading-btn {
+  height: 2.8125rem;
+  width: 150px;
+}
+
+.loading-small {
+  height: 20px;
+}
+
+@keyframes loading-background {
+  0% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0 50%
+  }
+}

package/dist/assets/scss/components/_ngx-pagination.scss

@@ -0,0 +1,66 @@
+.ngx-pagination{
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: var(--pagination-justify);
+  gap: 1rem;
+  li{
+    min-width: var(--default-size-sm);
+    height: var(--default-size-sm);
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden;
+
+    color: var(--black);
+    background-color: var(--white);
+    box-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);
+    transition: var(--default-transition);
+
+    &:hover, &.current{
+      @extend .pagination-active;
+    }
+
+    a{
+      cursor: pointer;
+    }
+
+    a,> span, button{
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      text-decoration: none;
+      color: inherit;
+      background: transparent !important;
+      border: none;
+      padding: 0 .3rem;
+      border-radius: inherit !important;
+    }
+
+    &.pagination-previous, &.pagination-next{
+      background-color: transparent;
+      box-shadow: none;
+      &.disabled{
+        color: var(--dark-gray);
+      }
+      ds-icon{
+        [dir=rtl] & {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+}
+
+
+.pagination-active{
+  color: var(--white);
+  background-color: var(--purple);
+}

package/dist/assets/scss/components/_page-title.scss

@@ -0,0 +1,18 @@
+.page-title{
+  display: flex;
+  justify-content: space-between;
+  h1{
+    font-size: 1.6875rem;
+    font-weight: var(--font-medium);
+    color: var(--black);
+    @media (max-width: 768px){
+      font-size: 1.2rem;
+    }
+  }
+  .page-title-actions{
+    .btn{
+      min-width: 117px;
+      height: 35px;
+    }
+  }
+}

package/dist/assets/scss/components/_progress.scss

@@ -0,0 +1,70 @@
+.progress-container{
+  border-radius: 10px;
+  border: 4px solid var(--white);
+  //padding: 2px;
+  position: relative;
+  overflow: hidden;
+  height: 16px;
+  width: 100%;
+  max-width: 350px;
+  background-color: var(--light-gray);
+  box-shadow: 0 0 0 2px var(--off-white);
+  &.default-progress {
+    border-radius: 0;
+    border: 0;
+    box-shadow: none;
+    height: 18px;
+    min-width: 250px;
+    background-color:  var(--gray);
+    &::after{
+      content: none;
+    }
+  }
+  &.radius-0{
+    border-radius: 0;
+    border: 0;
+    box-shadow: none;
+  }
+  &.mini{
+    max-width: 115px;
+    min-width: 115px;
+    height: 10px;
+    border: 0;
+    box-shadow: none;
+    // border: 2px solid var(--off-white);
+    // box-shadow: 0 0 0 1px var(--off-white);
+  }
+  &.dark{
+    background-color:  var(--gray);
+  }
+  &::after{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    background-image: linear-gradient(to right, transparent calc(100% - 5px),var(--white) 0);
+    background-size: calc((100% - 5*5px)/6 + 5px) 100%;
+  }
+
+  .progress-bar{
+    background-color:var(--green);
+
+    height: 100%;
+    width: 0;
+    //border: 2px solid var(--white);
+    &.info{
+      background-color:  var(--sea-light);
+    }
+
+    &.warning{
+      background-color: var(--yellow);
+    }
+
+    &.success{
+      background-color:var(--green);
+    }
+  }
+}

package/dist/assets/scss/components/_repeated-list.scss

@@ -0,0 +1,38 @@
+.avatar-logo {
+  //--default-size: 32px;
+  --avatar-bg: var(--white) !important;
+  --avatar-border: 1px solid var(--gray);
+  --avatar-padding: .3rem;
+  box-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);
+}
+
+
+.subsidiariesList, .default-list-group {
+  .repeated-list-group {
+    --repeated-gap: 0 !important;
+
+    &--item:not(:first-child) {
+      margin-inline-start: -10px;
+    }
+  }
+}
+
+.default-list-group {
+  .repeated-list-group--avatar figure{
+    --avatar-padding: 0;
+    --avatar-border: none;
+  }
+}
+
+
+ds-avatar.repeated-list-group--avatar {
+
+  figure {
+
+    @extend .avatar-logo;
+
+    img {
+      object-fit: contain;
+    }
+  }
+}

package/dist/assets/scss/components/_scrollbar.scss

@@ -0,0 +1,32 @@
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+
+::-webkit-scrollbar-track {
+  background: #ececec;
+  -webkit-box-shadow: none;
+  border: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 12%);
+  border-radius: 5px;
+  -webkit-box-shadow: none;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  -webkit-box-shadow: none;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: #888;
+  -webkit-box-shadow: none;
+}
+
+// firefox
+*{
+  scrollbar-color: #a4a4a4 #fff;
+  scrollbar-width: thin;
+}

package/dist/assets/scss/components/_status.scss

@@ -0,0 +1,119 @@
+// uncomment the below to override custom webcomponents by change the $root-colors and also u can change the status name from status color array
+
+//@use "../variables";
+//
+//
+//$status-colors: (
+//  purple: --ds-purple,
+//  secondary: --ds-secondary,
+//  coral: --ds-coral,
+//  pending: --ds-gray,
+//  info: --ds-sea-light,
+//  success: --ds-green,
+//  warning: --ds-yellow,
+//  rejected: --ds-red,
+//  //orange: var(--ds-orange),
+//);
+//
+//@mixin generate_status($colors) {
+//  // Colors, RGB Colors
+//  @each $color, $value in $colors {
+//
+//    ds-status[status = #{"" +$color}] {
+//      &::part(base){
+//        --status-bg: rgb(var(#{$value}));
+//        --status-color: white;
+//      }
+//    }
+//
+//    ds-status.opacity[status = #{"" +$color}] {
+//      &::part(base){
+//        --status-bg: rgb(var(#{$value}-80));
+//        --status-color: rgb(var(#{$value}));
+//
+//        @if( $color == gray ){
+//          --status-color: rgb(var(--ds-black));
+//        }
+//      }
+//    }
+//  }
+//}
+//
+//@include generate_status($status-colors);
+
+
+
+
+
+// the old status
+
+//.status{
+//  min-width: 97px;
+//  //width: 75px;
+//  min-height: 27px;
+//  padding: 0 15px;
+//  font-size: 0.875rem;
+//  font-weight: var(--font-medium);
+//  display: inline-flex;
+//  align-items: center;
+//  justify-content: center;
+//  text-transform: capitalize;
+//  line-height: 1;
+//
+//  &.new, &.active{
+//    color:  var(--sea-light);
+//    background-color: rgba( var(--rgb-sea-light), .1);
+//  }
+//  &.waiting{
+//    color: $yellow;
+//    background-color: #F9F2D1;
+//  }
+//  &.dropped, &.rejected{
+//    color: $danger;
+//    background-color: #FBECEF;
+//  }
+//  &.onhold{
+//    color: var(--black);
+//    background-color: rgba(#E1E2E3, .45);
+//  }
+//  &.pending{
+//    color: var(--black);
+//    //background-color: rgba(#E1E2E3, .45);
+//    background-color: #F9F2D1;
+//  }
+//  &.approved, &.completed{
+//    color:var(--green);
+//    background-color: #E9F4F1;
+//  }
+//  &.published, &.inprogress, &.submitted{
+//    color:var(--purple);
+//    background-color: #EFD9FF;
+//  }
+//  .page-header &, .notification-center &{
+//    color:var(--white);
+//    &.new, &.active{
+//      background-color:  var(--sea-light);
+//    }
+//    &.waiting{
+//      background-color: $yellow;
+//    }
+//    &.dropped, &.rejected{
+//      background-color: $danger;
+//    }
+//    &.onhold{
+//      background-color: var(--black);
+//    }
+//    &.pending{
+//      color: var(--black);
+//      background-color:var(--dark-gray);
+//    }
+//    &.approved, &.completed{
+//      background-color:var(--green);
+//    }
+//    &.published, &.inprogress{
+//      background-color:var(--purple);
+//    }
+//  }
+//}
+
+