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

package/dist/assets/scss-old/_general.scss

@@ -0,0 +1,401 @@
+html {
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+
+  font-size: var(--html-fs);
+  line-height: var(--default-line-height);
+
+  @media (min-width: 1920px) {
+    --html-fs: 16px;
+  }
+  @media screen and (max-width: 1366px) and (max-height: 768px) and (min-width: 768px) {
+    html {
+      //  transform: scale(.5);
+      // or simply
+      zoom: .8
+    }
+  }
+}
+
+body {
+  --body-bg: var(--off-white);
+  //min-height: 100%;
+  height: 100%;
+  margin: 0;
+  font-size: 1rem;
+  font-family: "STC_Forward", serif;
+  //overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--body-bg);
+
+  [dir="rtl"] & {
+    direction: rtl;
+    text-align: right;
+  }
+  &.NoScrool {
+    overflow: hidden;
+  }
+}
+
+.cdk-global-scrollblock {
+  position: static !important;
+  overflow: hidden !important;
+}
+
+.mat-drawer-container-has-open {
+  //position: fixed;
+  z-index: 4;
+
+  .mat-drawer {
+    z-index: 4;
+  }
+
+  .mat-drawer-backdrop {
+    z-index: 4;
+    position: fixed;
+  }
+}
+
+::-webkit-selection {
+  color: white;
+  background: var(--purple) !important;
+}
+
+::-moz-selection {
+  background-color: var(--purple) !important;
+  color: white;
+}
+
+::selection {
+  background-color: var(--purple) !important;
+  color: white;
+}
+
+app-root {
+  height: 100%;
+}
+
+.custom-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 30px;
+  width: 100%;
+
+  @media (max-width: 576px) {
+    padding: 0 16px;
+  }
+}
+
+.custom-mini-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0 30px;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    padding: 0 16px;
+  }
+}
+
+.hub-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 90px;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    padding: 0 16px;
+  }
+}
+
+.nav-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 30px;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    padding: 0 16px;
+  }
+}
+
+.hub-container-fluid {
+  max-width: 100%;
+  width: 100%;
+  margin: 0 auto;
+  padding-left: 90px;
+  padding-right: 40px;
+
+  [dir="rtl"] & {
+    padding-left: 40px;
+    padding-right: 90px;
+  }
+
+  @media (max-width: 768px) {
+    padding: 0 16px;
+  }
+}
+
+
+.hub-container-mini {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0 70px;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    padding: 0 16px;
+  }
+}
+
+[class^='col-'] {
+  float: none !important;
+}
+
+.core {
+  min-height: calc(100vh - 135px);
+  margin-top: 60px;
+
+  &.under-hub {
+    @media (min-width: 768px) {
+      width: calc(100% - 50px);
+      margin-left: 50px;
+      padding: 1.5rem;
+
+      [dir="rtl"] & {
+        margin-right: 50px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.hub-nav {
+  background-color:var(--white);
+  overflow: hidden;
+
+  ul {
+    margin: 0 -1.5rem;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    list-style: none;
+    flex-wrap: wrap;
+
+    li {
+      margin: 0 0.5rem;
+
+      a {
+        display: block;
+        color:var(--dark-gray);
+        line-height: 2rem;
+        padding: 0.5rem 1rem;
+        text-decoration: none;
+        font-weight: var(--font-regular);
+        position: relative;
+
+        &:before {
+          content: '';
+          bottom: 0;
+          left: 0;
+          right: 0;
+          position: absolute;
+          height: 5px;
+          background-color: transparent;
+          width: 100%;
+        }
+
+        &:hover,
+        &.active {
+          color: var(--purple);
+
+          &:before {
+            background-color: var(--purple);
+          }
+        }
+
+        &.active {
+          font-weight: var(--font-medium);
+        }
+      }
+    }
+  }
+}
+
+.hub-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  h1 {
+    font-size: 2.1875rem;
+    font-weight: var(--font-bold);
+
+    @media (max-width: 768px) {
+      font-size: 1.25rem;
+    }
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    margin: 15px -0.5rem;
+
+    .btn {
+      margin: 0 0.5rem;
+      min-width: 175px;
+    }
+  }
+}
+
+.categories {
+  // margin: 0 -.3rem;
+  display: flex;
+  align-items: center;
+  grid-gap: 0.6rem;
+
+  .page-header & {
+    .item {
+      background-color:var(--white);
+      color: var(--purple);
+    }
+  }
+
+  .item {
+    // margin: 0 .3rem;
+    background-color: var(--light-gray);
+    color: var(--black);
+    padding: 0 0.75rem;
+    height: 37px;
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.users-avatar {
+  // margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  // width: 50px;
+  .item {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    +.item {
+      margin-left: -8px;
+
+      [dir="rtl"] & {
+        margin-right: -8px;
+        margin-left: 0;
+      }
+    }
+
+    &:hover {
+      .name {
+        opacity: 1;
+      }
+    }
+
+    .img-card {
+      cursor: pointer;
+      margin: 0;
+      border: 1px solid white;
+    }
+
+    .name {
+      position: absolute;
+      transform-origin: center;
+      left: 50%;
+      transform: translateX(-50%);
+      opacity: 0;
+      top: -26px;
+      height: 20px;
+      padding: 0 5px;
+      border-radius: 5px;
+      background-color: var(--black);
+      color:var(--white);
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      transition: all 0.3s linear;
+
+      [dir="rtl"] & {
+        left: auto;
+        right: 50%;
+        transform: translateX(50%);
+      }
+    }
+  }
+
+  .more {
+    margin: 0 10px;
+  }
+}
+
+
+.disabled{
+  pointer-events: none !important;
+}
+
+
+
+
+.lg-outer {
+  direction: ltr;
+}
+
+.required-field {
+  font-size: 1rem;
+  color: var(--red);
+  font-weight: bold;
+}
+
+.ellipsis-txt {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap !important;
+}
+
+.toast-bottom-left {
+  bottom: 65px;
+}
+
+
+
+@media (min-width: 768px) {
+  .w-md-50 {
+    width: 50% !important;
+  }
+
+  .w-md-75 {
+    width: 75% !important;
+  }
+
+  .w-md-100 {
+    width: 100% !important;
+  }
+
+  .w-md-auto {
+    width: auto !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .w-sm-50 {
+    width: 50% !important;
+  }
+
+  .w-sm-75 {
+    width: 75% !important;
+  }
+
+  .w-sm-100 {
+    width: 100% !important;
+  }
+}

package/dist/assets/scss-old/_reset.scss

@@ -0,0 +1,60 @@
+* {
+  &:active,
+  :focus {
+    outline: none !important; // 1
+  }
+}
+
+input:disabled {
+  opacity: 1;
+  background: transparent;
+  box-shadow: none;
+}
+
+a, button{
+  text-decoration: none;
+  background-image: none;
+  text-shadow: none
+}
+a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
+}
+
+input.focus, textarea.focus{
+  background: transparent;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+input[type="text"], input[type="password"], input[type="file"], input[type="submit"], input[type="button"], input[type="reset"], select, textarea, .textarea, button, .aui-field-input-text {
+  background: inherit;
+  border-color: inherit;
+  color: inherit;
+  text-shadow: none;
+  font-weight: inherit;
+  font: inherit;
+}
+
+body{
+  input[type="checkbox"]:checked+span:not(.box) {
+    border-color: transparent;
+    background-color: transparent;
+    &:before{
+      content: none;
+    }
+  }
+}
+
+[class^="col-"]{
+  float: none;
+}

package/dist/assets/scss-old/_variables.scss

@@ -0,0 +1,18 @@
+$root-colors: (
+  black: #1D252D,
+  purple: #4F008C,
+  secondary: #A54EE1,
+  coral: #FF375E,
+  dark-gray: #8E9AA0,
+  gray: #DEE0E2,
+  light-gray: #F3F3F1,
+  off-white: #F8F8F8,
+  sea-light: #1BCED8,
+  green: #00C48C,
+  yellow: #FFDD40,
+  blue: #376DFF,
+  red: #CF2543,
+  orange: #FF6A39,
+  white: white,
+  transparent: transparent,
+);

package/dist/assets/scss-old/angular-material/_accordion.scss

@@ -0,0 +1,130 @@
+.primary-accordion, .mat-accordion{
+  --accordion-height: 3.4375rem;
+  --accordion-bc: var(--white);
+  --accordion-bc-active: var(--white);
+  --accordion-side-border-color: transparent;
+  --accordion-side-border-color-active: transparent;
+  --accordion-side-border-width: 1px;
+  --accordion-radius: 6px;
+  --accordion-title-fs: 1.125rem;
+  --accordion-title-fw: var(--font-medium);
+  --accordion-title-fc: var(--black);
+  --accordion-border: 1px solid transparent;
+  --accordion-border-active: 1px solid var(--dark-gray);
+  --accordion-shadow: var(--box-shadow);
+  --accordion-shadow-active: none;
+
+  --panel-padding: 0 1rem;
+  --panel-body-border: 0;
+  --panel-body-radius: 0 0 4px 4px;
+  --panel-body-padding: 1.5rem;
+
+  --indicator-color: var(--black);
+  --indicator-color-active: var(--black);
+  --indicator-bc: var(--light-gray);
+  --indicator-bc-active: var(--light-gray);
+  --indicator-size: 30px;
+  --indicator-radius: 50%;
+
+  --indicator-icon: "\ea2c";
+  --indicator-icon-size: 1rem;
+  --indicator-icon-active: "\ea2c";
+
+
+
+
+
+  .mat-expansion-panel{
+    border-radius: var(--accordion-radius) !important;
+    box-shadow: var(--accordion-shadow) !important;
+    border: var(--accordion-border);
+    transition: var(--default-transition);
+    &.mat-expanded{
+      --accordion-side-border-color: var(--accordion-side-border-color-active);
+      --accordion-border: var(--accordion-border-active);
+      --accordion-shadow: var(--accordion-shadow-active);
+
+      --accordion-bc: var(--accordion-bc-active);
+
+
+      --indicator-bc: var(--indicator-bc-active);
+      --indicator-color: var(--indicator-color-active);
+      --indicator-icon: var(--indicator-icon-active);
+    }
+    .mat-expansion-panel-header{
+      height: var(--accordion-height) !important;
+      background-color: var(--accordion-bc) !important;
+      border-radius: var(--accordion-radius);
+      padding: var(--panel-padding);
+      border-width: 0;
+      border-left-width: var(--accordion-side-border-width);
+      border-style: solid;
+      border-color: var(--accordion-side-border-color);
+      transition: var(--defult-transition);
+      [dir=rtl] & {
+        border-left-width: 0;
+        border-right-width: var(--accordion-side-border-width);
+      }
+      .mat-content{
+        align-items: center;
+      }
+      .panel-title{
+        min-width: 40%;
+        width: 40%;
+      }
+      .panel-user-status{
+        min-width: 60%;
+        width: 60%;
+        padding: 0 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .user-delegate{
+          min-width: 80px;
+        }
+        .panel-user{
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+      }
+
+      .panel-title{
+        color: var(--black);
+      }
+
+      .panel-user-name{
+        color: var(--black);
+      }
+      .mat-expansion-indicator{
+        background-color: var(--indicator-bc);
+        width: var(--indicator-size);
+        height: var(--indicator-size);
+        border-radius: var(--indicator-radius);
+        align-items: center;
+        justify-content: center;
+        display: flex;
+
+        &::after {
+          transform: none !important;
+          padding: 4px;
+          border: none !important;
+          margin: 0;
+          content: var(--indicator-icon);
+          font-family: var(--font-icon);
+          font-size: var(--indicator-icon-size);
+          color: var(--indicator-color);
+        }
+      }
+
+    }
+    .mat-expansion-panel-body{
+      padding: var(--panel-body-padding) !important;
+      border: var(--panel-body-border) !important;
+      border-radius: var(--panel-body-radius);
+      overflow: hidden;
+    }
+  }
+}
+
+

package/dist/assets/scss-old/angular-material/_checkbox.scss

@@ -0,0 +1,48 @@
+.mat-checkbox {
+  --checkbox-border-width: 2px;
+  --checkbox-border: var(--gray);
+  --checkbox-border-active: var(--coral);
+  --checkbox-bg: var(--white);
+  --checkbox-bg-active: var(--coral);
+  --checkbox-size: 24px;
+  --checkbox-radius: 4px;
+
+  &.mat-checkbox-checked {
+    --checkbox-border: var(--checkbox-border-active);
+    --checkbox-bg: var(--checkbox-bg-active)
+  }
+
+  .mat-checkbox-layout {
+    gap: 0.5rem;
+    align-items: center;
+
+    .mat-checkbox-label {
+      white-space: normal;
+    }
+
+    .mat-checkbox-inner-container {
+      height: var(--checkbox-size);
+      width: var(--checkbox-size);
+      margin: 0;
+
+      .mat-checkbox-frame {
+        border-width: var(--checkbox-border-width);
+        border-style: solid;
+        border-color: var(--checkbox-border);
+        border-radius: var(--checkbox-radius);
+        background-color: var(--checkbox-bg);
+        transition: background-color, border-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);
+      }
+
+      .mat-checkbox-background {
+        background-color: transparent;
+      }
+    }
+  }
+
+
+  .mat-checkbox-checkmark-path {
+    stroke: var(--white);
+  }
+}
+

package/dist/assets/scss-old/angular-material/_chip-list.scss

@@ -0,0 +1,32 @@
+// mat-chip-list
+.primary-chip{
+  &.small{
+    .mat-chip{
+      height: var(--default-size-sm);
+    }
+  }
+  .mat-chip-list-wrapper{
+    overflow: auto;
+    flex-wrap: nowrap;
+  }
+  .mat-chip{
+    color: var(--black);
+    background-color: var(--light-gray);
+    border: 1px solid var(--light-gray);
+    height: 24px;
+    border-radius: 0;
+    padding: 0 10px;
+    white-space: nowrap;
+    &::after {
+      background: transparent;
+    }
+    .mat-icon{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color:var(--dark-gray);
+      opacity: 1;
+    }
+  }
+}

package/dist/assets/scss-old/angular-material/_chips.scss

@@ -0,0 +1,42 @@
+.mat-chip-list-wrapper{
+  --chips-bc: var(--light-gray);
+  --chips-bc-hover: var(--light-gray);
+  --chips-fs: 0.875rem;
+  --chips-fw: var(--font-regular);
+  --chips-fc: var(--black);
+  --chips-padding: 0.5rem 0.75rem;
+  --chips-radius: 3px;
+  --chips-margin: 0;
+  --chips-gap: 0.75rem;
+
+
+  margin: 0 !important;
+  gap: 0.5rem;
+  .mat-chip{
+    margin: var(--chips-margin) !important;
+    background-color: var(--chips-bc);
+    font-size: var(--chips-fs);
+    font-weight: var(--chips-fw);
+    color: var(--chips-fc);
+    padding: var(--chips-padding) !important;
+    border-radius: var(--chips-radius);
+    gap: var(--chips-gap);
+    .mat-chip-remove{
+      margin: 0;
+      opacity: 1 !important;
+      &::part(base){
+        --btn-height: 20px;
+        --btn-width: 20px;
+        --btn-min-width: 20px;
+        --btn-padding: 0;
+        --btn-fs: 1rem;
+        --btn-color: var(--red);
+        --btn-bg-color: var(--white);
+        --btn-border-color: var(--white);
+        &:hover{
+          --btn-color: var(--red);
+        }
+      }
+    }
+  }
+}