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

package/dist/assets/scss-old/hub/_new-hub.scss

@@ -0,0 +1,115 @@
+#hub-top-nav .hub-top-nav-ul a {
+  text-decoration: none;
+}
+
+.NoScrool header{
+  z-index: 0;
+}
+
+.NoScrool .hup-main-wrapper{
+  z-index: 999;
+  //position: relative;
+}
+
+.hup-main-container:not([aria-hidden="true"]) ~ .cdk-overlay-container {
+  z-index: 8;
+}
+
+body.NoScrool .hup-main-container ~ .cdk-overlay-container {
+  z-index: 1000;
+}
+
+//.STC-container{
+//  all: unset;
+//  padding: 0 !important;
+//  max-width: none !important;
+//  flex: 100% !important;
+//  width: 100% !important;
+//  &.hide{
+//    display: none;
+//  }
+//  > .main-container{
+//    padding-top: 0;
+//    padding-right: 0;
+//    padding-left: 0;
+//    background-color: transparent;
+//    box-shadow: none;
+//  }
+//}
+//
+//
+//#main-content {
+//  // max-width: 1400px;
+//  margin: 40px auto;
+//  // padding: 0 70px;
+//  // width: 100%;
+//}
+
+
+
+
+.mat-drawer-container {
+  z-index: initial !important;
+  .mat-drawer-backdrop{
+    position: fixed !important;
+    z-index: 12 !important;
+  }
+  .mat-drawer {
+    z-index: 13 !important;
+  }
+}
+
+
+
+.appListActive{
+  #itemsNavigationSpan{
+    .appIcon {
+      min-width: 20px;
+    }
+  }
+}
+
+
+#outlookItemsView{
+
+  .hubInbox_SearchContainer{
+    .stc-custom-tag-search{
+      display: flex;
+      .closeSearchPanel {
+        width: 40px;
+        height: 40px;
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+  hr {
+    background-color: var(--gray) !important;
+  }
+  .mat-drawer-container{
+    .mat-drawer-backdrop{
+      z-index: 801 !important;
+    }
+    .mat-drawer {
+      z-index: 803!important;
+    }
+
+    @media only screen and (max-width: 767px) {
+      form.ng-untouched.ng-pristine {
+        padding: 0 !important;
+      }
+    }
+  }
+
+  .filertHeader {
+    .dropdown.px-5{
+      padding-right: 5px !important;
+      padding-left: 5px !important;
+    }
+    .mb-5 {
+      margin-bottom: 5px !important;
+    }
+  }
+
+}
+

package/dist/assets/scss-old/mixins/_button-mixin.scss

@@ -0,0 +1,98 @@
+@mixin gen-buttons($button-type) {
+  @each $color-name, $color in $root-colors {
+    &.button-#{"" + $color-name}{
+      border-color: $color;
+
+      @if $button-type == flat {
+
+        @if  $color-name == white {
+          color: var(--coral);
+        } @else {
+          color:var(--white);
+        }
+      }
+      @else if $button-type == square {
+        background-color: rgba($color, .2);
+        color: $color;
+        @if  $color-name == white {
+          color: var(--coral) !important;
+        }
+      }
+      @else {
+        color: $color;
+      }
+      .mat-button-focus-overlay{
+        background-color: $color;
+        @if $button-type == square {
+          background-color: rgba($color, .3);
+          @if  $color-name == white {
+            background-color: rgba($color, 1);
+          }
+        }
+      }
+      &:hover{
+
+        @if $button-type == flat{
+          color: $color;
+        }
+        @else if $button-type == square{
+          color: $color;
+        }
+        @else if  $color-name == white {
+          color: var(--coral);
+        }
+        @else {
+          color:var(--white);
+        }
+      }
+    }
+    //
+    //@if $button-type == stroked {
+    //  &.button-#{"" + $color-name}{
+    //    border-color: $color;
+    //    color: $color;
+    //    .mat-button-focus-overlay{
+    //      background-color: $color;
+    //    }
+    //    &:hover{
+    //      color:var(--white));
+    //      @if  $color-name == white {
+    //        color: var(--coral) !important;
+    //      }
+    //
+    //    }
+    //  }
+    //}
+    //
+    //
+    //@else if $button-type == flat {
+    //  &.button-#{"" + $color-name}{
+    //    border-color: $color;
+    //    color:var(--white));
+    //    @if $color-name == white {
+    //      color: var(--coral) !important;
+    //    }
+    //    .mat-button-focus-overlay{
+    //      background-color: $color;
+    //    }
+    //    &:hover{
+    //      color: $color;
+    //    }
+    //  }
+    //}
+    //
+    //
+    //@else if $button-type == square {
+    //  &.add{
+    //    background-color:  rgba(var(--rgb-green),.2);
+    //    color:var(--green);
+    //    .mat-button-focus-overlay{
+    //      background-color:  rgba(var(--rgb-green),.3);
+    //    }
+    //  }
+    //}
+
+  }
+}
+
+

package/dist/assets/scss-old/mixins/_colors-mixin.scss

@@ -0,0 +1,56 @@
+// @use "sass:color";
+@function hexToRGB($hex) {
+  @return red($hex), green($hex), blue($hex);
+  // @if type-of($hex) == 'color' {
+  //   $red: red($hex);
+  //   $green: green($hex);
+  //   $blue: blue($hex);
+  //   @return "#{color.red($hex)}, #{color.green($hex)}, #{color.blue($hex)}";
+  // } @else {
+  //   @error "The provided value (#{$hex}) is not a color.";
+  // }
+}
+
+
+@mixin generate_colors($colors) {
+  // Colors, RGB Colors
+  @each $color, $value in $colors {
+    //--#{"" +$color}: rgb(#{hexToRGB($value)});
+    @if($color == transparent){
+      --transparent: transparent;
+    }@else {
+      --#{("" +$color)}: rgb(#{hexToRGB($value)});
+      --rgb-#{"" +$color}: #{hexToRGB($value)};
+    }
+
+
+    .bc-#{"" +$color} {
+      background-color:  var(--#{$color});
+    };
+    .fc-#{"" +$color} {
+      color:  var(--#{$color});
+    };
+
+    //@for $i from 99 through 20 {
+    //
+    //  @if ($i % 20 == 0 and (($color != white) and ($color != transparent))) {
+    //    $percentage: $i*1%;
+    //
+    //    --#{"" +$color}-#{$i}: #{hexToRGB(mix(white, $value, $percentage))};
+    //    //--#{"" +$color}-op-#{$i}: rgba(#{hexToRGB(mix(white, $value, $percentage))}, math.div($i, 100));
+    //
+    //
+    //    .bc-#{"" +$color}-#{$i} {
+    //      background-color: rgb(var(--#{$color}-#{$i}));
+    //    }
+    //    //.bc-#{"" +$color}-#{$i} {
+    //    //  --#{"" +$color}-op-#{$i}: rgba(hexToRGB(mix(white, $value, $percentage)), math.div($i, 100));
+    //    //}
+    //
+    //    .fc-#{"" +$color}-#{$i} {
+    //      color: rgb(var(#{$color}-#{$i}));
+    //    }
+    //  }
+    //}
+  }
+}

package/dist/assets/scss-old/mixins/_fonts-mixin.scss

@@ -0,0 +1,38 @@
+@use 'sass:math';
+
+@mixin fonts {
+  @for $i from 7 through 90 {
+    @if ($i > 12) {
+      .fs-#{$i} {
+        font-size: unquote(($i / 16) + 'rem');
+      }
+
+      .fs-#{$i}-imp {
+        font-size: unquote(($i / 16) + 'rem') !important;
+      }
+
+      @media(max-width: 768px) {
+        .fs-md-#{$i} {
+          font-size: unquote(($i / 16) + 'rem') !important;
+        }
+      }
+    } @else {
+      .fs-#{$i} {
+        font-size: unquote($i + 'px');
+      }
+
+      .fs-#{$i}-imp {
+        font-size: unquote($i + 'px') !important;
+      }
+
+      @media(max-width: 768px) {
+        .fs-md-#{$i} {
+          font-size: unquote($i + 'px') !important;
+        }
+      }
+    }
+
+  }
+}
+
+@include fonts;

package/dist/assets/scss-old/mixins/_radius-mixin.scss

@@ -0,0 +1,11 @@
+@use 'sass:math';
+
+@mixin radius {
+  @for $i from 0 through 15 {
+    .radius-#{$i} {
+      border-radius: unquote(($i / 16) + 'rem');
+    }
+  }
+}
+
+@include radius;

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

@@ -0,0 +1,4 @@
+@use "colors-mixin";
+@use "fonts-mixin";
+@use "radius-mixin";
+//@use "button-mixin";

package/dist/assets/scss-old/web-components/_alert.scss

@@ -0,0 +1,32 @@
+@use "sass:meta";
+
+$alert-colors: (
+  info: sea-light,
+  success: green,
+  warning: yellow,
+  danger: red,
+);
+
+@mixin generate_alerts($colors) {
+  // Colors, RGB Colors
+  @each $color, $value in $colors {
+
+    ds-alert[type = #{"" +$color}] {
+      &::part(base){
+        --alert-bc: rgba(var(--rgb-#{$value}), 10%);
+        --alert-border-c: var(--#{$value});
+
+
+        @if $color == warning {
+          --alert-icon-color: var(--black);
+        } @else {
+          --alert-icon-color: var(--#{$value});
+        }
+      }
+    }
+  }
+}
+
+@include generate_alerts($alert-colors);
+
+

package/dist/assets/scss-old/web-components/_buttons.scss

@@ -0,0 +1,92 @@
+ //uncomment the below to override custom webcomponents by change the $root-colors
+
+@mixin generate_btn($colors) {
+  // Colors, RGB Colors
+  @each $color, $value in $colors {
+
+    ds-button[color = #{"" +$color}] {
+      &::part(base){
+        outline: none;
+      }
+      @if($color == transparent or $color == white) {
+        --btn-bg-color: transparent;
+        --btn-color: var(--coral);
+        --btn-border-color: white;
+        --btn-overlay-color: white;
+        &[shape = 'outline']{
+          &::part(base)  {
+            --btn-bg-color: transparent;
+            --btn-color: white;
+            &:hover{
+              //--btn-color: rgb(var(--btn-bg-color));
+              color: var(--coral);
+            }
+          }
+
+        }
+
+
+        &[shape = 'flat']{
+          &::part(base)  {
+            background-color: transparent;
+            &:hover{
+              color: var(--coral);
+              --btn-border-color: var(--coral);
+
+            }
+          }
+
+        }
+
+        &[shape = 'text']{
+          &::part(base)  {
+            &:hover{
+              //--btn-color: rgb(var(--btn-bg-color));
+              color: var(--coral) !important;
+            }
+          }
+
+        }
+      } @else {
+        //--btn-color: rgb(var(--ds-#{$color}));
+        --btn-bg-color:  transparent;
+        --btn-border-color: var(--#{$color});
+        --btn-overlay-color: var(--#{$color});
+        &[shape = 'outline'] {
+          &::part(base)  {
+            --btn-color: var(--#{$color});
+          }
+        }
+        &[shape = 'text']{
+          &::part(base)  {
+            color: var(--#{$color});
+            &:hover{
+              opacity: .8;
+            }
+          }
+
+        }
+      }
+
+    };
+
+
+    ds-button[disabled], ds-button[loading] {
+      &::part(base) {
+        //color: var(--gray) !important;
+        //--btn-bg-color: var(--light-gray);
+        //--btn-border-color: var(--light-gray);
+        //--btn-overlay-color: var(--light-gray);
+
+      }
+    }
+  }
+}
+
+
+@include generate_btn($root-colors);
+
+
+
+
+

package/dist/assets/scss-old/web-components/_status.scss

@@ -0,0 +1,66 @@
+$statusColors: (
+  purple: purple,
+  new: secondary,
+  coral: coral,
+  pending: dark-gray,
+  info: sea-light,
+  success: green,
+  warning: yellow,
+  danger: red,
+  //orange: var(--ds-orange),
+);
+
+@mixin generateStatus($colors) {
+  // Colors, RGB Colors
+  @each $color, $value in $colors {
+
+    ds-approvals{
+      &::part(#{"" +$color}) {
+        --approval-icon-bg: var(--#{$value});
+      }
+      &::part(icon_success){
+        --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 14'%3E%3Cpath fill='white' d='M5.705 10.973 16.549.25 18 1.675 5.705 13.75 0 8.147l1.377-1.425 4.328 4.25Z'/%3E%3C/svg%3E");
+      }
+      &::part(status_#{"" +$color}) {
+        --status-bg: rgba(var(--rgb-#{$value}), 10%);
+
+        @if $color == warning {
+          --status-color: var(--black);
+          --status-bg: rgba(var(--rgb-yellow), 30%);
+        } @else {
+          --status-color: var(--#{$value});
+        }
+      }
+    }
+
+    ds-status[no-opacity][status = #{"" +$color}] {
+      &::part(base){
+        --status-bg: var(--#{$value});
+        --status-color: var(--white);
+
+        @if $value == yellow {
+          --status-color: var(--black);
+        } @else {
+          --status-color: var(--white);
+        }
+      }
+    }
+
+    ds-status[status = #{"" +$color}] {
+      &::part(base){
+        --status-bg: rgba(var(--rgb-#{$value}), 10%);
+
+        @if $value == yellow {
+          --status-color: var(--black);
+          --status-bg: rgba(var(--rgb-yellow), 30%);
+        } @else {
+          --status-color: var(--#{$value});
+        }
+      }
+    }
+  }
+}
+
+@include generateStatus($statusColors);
+
+

package/dist/assets/scss-old/web-components/web-components.scss

@@ -0,0 +1,3 @@
+@use "status";
+@use "buttons";
+@use "alert";