@tuki-io/tuki-widgets 0.0.134 → 0.0.136

package/projects/tuki/widgets/user-manage/src/user-manage-widget.component.scss

@@ -1,638 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900");
-
-$fa-font-path: "../../node_modules/font-awesome/fonts";
-
-$menu-font: Poppins, "Poppins", sans-serif;
-$main-font: Poppins, "Poppins", sans-serif;
-$font-size: 14px;
-$txt-color: rgba(0, 0, 0, 0.87);
-$table-title-color: rgba(0, 0, 0, 0.54);
-$txt-grey-color: #454e5e;
-$header-gradient: linear-gradient(90deg, #0d56aa, #0d56ab);
-$poppins-font: Poppins, "Poppins", sans-serif;
-
-$icon-color: #8e9fb7;
-$active-color: #0d56aa;
-$icon-box-color: #0773bc;
-$mark-color: #009fdb;
-$hover-color: #0985a0;
-$error-color: #c73636;
-$main-txt-color: #333;
-
-$table-border-color: rgba(0, 0, 0, 0.12);
-$input-border-color: rgba(0, 0, 0, 0.3);
-$bg-color: #f7f9fb;
-
-$error-bg-color: #f2dede;
-$error-border-color: #ebccd1;
-$error-txt-color: #bc1e1b;
-$qob-error-color: #e70707;
-
-$warning-bg-color: #fcf8e3;
-$warning-border-color: #e5e1cd;
-$warning-txt-color: #8a6d3b;
-
-$success-bg-color: #e3f4dc;
-$success-border-color: #b3d692;
-$success-txt-color: #3c763d;
-
-$read-only-txt-color: rgba(0, 0, 0, 0.38);
-$my-menu-txt-color: #555555;
-
-$page-background-color: #f3f6f6;
-$disabled-button-text-color: #babcc5;
-$dark-elements-color: #2c355d;
-$dark-disabled-btn-color: #dfe3e7;
-$disabled-color: #dfe3e7;
-$link-color: #0985a0;
-$title-color: #0985a0;
-$active-link-color: #0985a0;
-$text-color: #646464;
-$light-border-color: #dee5ea;
-$icon-background: #d2e5e5;
-
-// QOB style
-$navy: #2399da;
-$dark-blue: #2c355d;
-$qob-danger-color: #e70707;
-$qob-disabled-color: #d4d4d4;
-
-// WEBEX STYLE
-
-$webex-body-bg: #f7f7f7;
-
-$webex-icon-bg: #d0d0d0;
-$webex-icon-color: #2a2a2a;
-$webex-text-color: #252525;
-
-$webex-tr-hover-bg: #ededed;
-$webex-tr-border: #dedede;
-
-$webex-table-th-bg: #f7f7f7;
-$webex-table-th-txt: #636363;
-$webex-table-th-size: 12px;
-
-$webex-table-td-bg: #fff;
-$webex-table-td-txt: #636363;
-$webex-table-td-size: 14px;
-
-$webex-pagination-txt: #636363;
-$webex-pagination-hover-bg: #ededed;
-$users-management-title-color: #181818;
-
-.mat-error {
-  color: $error-color;
-  margin: 13px 0 0 0;
-}
-.select-box {
-  border-radius: 30px;
-  background: #f3f6f6;
-  border: 1px solid #e2e9ef;
-  height: 35px;
-  position: relative;
-
-  select {
-    border: none !important;
-    background: transparent;
-    height: 100%;
-    width: 92%;
-    margin: auto;
-    display: block;
-  }
-}
-
-option:focus,
-option:focus-visible {
-  border: none !important;
-  outline: none !important;
-}
-option {
-  height: 30px;
-  cursor: pointer;
-  color: $webex-pagination-txt;
-}
-option:hover {
-  background: $webex-pagination-hover-bg !important;
-}
-
-.fa:hover {
-  color: #0d56aa !important;
-}
-.mat-icon-button {
-  background: transparent;
-}
-.icon-webex-box {
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.7rem;
-  line-height: 1rem;
-  display: inline-block;
-  background: $webex-icon-bg;
-  border-radius: 2rem;
-  line-height: 40px;
-  text-align: center;
-}
-.icon-webex {
-  filter: invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg)
-    brightness(103%) contrast(90%);
-  background-repeat: no-repeat;
-  background-position: center;
-  display: inline-block;
-  height: 1rem;
-  width: 1rem;
-}
-.icon-webex-user {
-  background-image: url("./assets/icons/icon_user.svg");
-}
-.icon-user-status {
-  display: inline-block;
-}
-
-* {
-  margin: 0;
-}
-
-body {
-  background: $webex-body-bg;
-}
-body,
-th,
-td {
-  font-family: $main-font;
-  font-size: 14px;
-}
-th {
-  color: rgba(0, 0, 0, 0.54);
-  text-align: left;
-}
-td {
-  box-sizing: border-box;
-  padding: 10px 5px 10px 0;
-}
-.content-box {
-  margin: auto;
-  position: relative;
-  width: 95%;
-
-  table {
-    width: 100%;
-  }
-}
-.edit-icon-td {
-  width: 50px;
-  position: relative;
-
-  button {
-    position: absolute;
-    top: 4px;
-  }
-}
-.mat-progress-spinner circle,
-.mat-spinner circle {
-  stroke: gray !important;
-}
-.data-loader {
-  position: absolute;
-  top: calc(50% - 25px);
-  left: calc(50% - 25px);
-}
-.flex-box {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.spinner-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.spinner-container ::ng-deep .mat-progress-spinner circle,
-.mat-spinner circle {
-  stroke: #000000;
-}
-
-.user-info-box {
-  background: white;
-  display: flex;
-  gap: 2rem;
-  border-radius: 8px;
-  border: rgba(0, 0, 0, 0.2) 1px solid;
-  padding: 24px;
-  font-weight: 400;
-  font-size: 14px;
-
-  .user-box-title {
-    display: flex;
-    font-weight: 500;
-    font-size: 16px;
-    max-inline-size: 11.25rem;
-    flex: 1;
-    color: #000000f2;
-    margin-top: 3px;
-    font-family: $poppins-font;
-  }
-
-  .form-holder__inputs {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    & .input-holder {
-      display: flex;
-      gap: 1.5rem;
-      padding: 0.5rem 0;
-      font-size: 0.75rem;
-      line-height: 1.25;
-      align-items: center;
-      overflow: hidden;
-
-      &:nth-child(1) {
-        padding-top: 0;
-      }
-
-      &:last-child {
-        padding-bottom: 0;
-      }
-
-      &__name {
-        font-weight: 500 !important;
-        font-size: 14px !important;
-        flex-basis: 12rem;
-      }
-
-      &__input {
-        display: flex;
-        flex: 1;
-      }
-    }
-    .mat-divider {
-      margin: 0px !important;
-    }
-  }
-}
-.mat-divider {
-  margin: 5px 0 !important;
-}
-.info-boxes-container {
-  padding: 24px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-.header-box {
-  height: 60px;
-  width: 100%;
-  line-height: 60px;
-  background: white;
-  border-bottom: 1px solid #dedddd;
-
-  .header-back-block {
-    float: left;
-  }
-  .header-button-block {
-    float: right;
-  }
-}
-
-.webex-table {
-  width: 100%;
-  margin: auto;
-
-  tr {
-    border-bottom: 1px solid $webex-tr-border;
-  }
-  th {
-    background: $webex-table-th-bg;
-    color: $webex-table-th-txt;
-    font-size: $webex-table-th-size;
-  }
-  td {
-    background: $webex-table-td-bg;
-    color: $webex-table-td-txt;
-    font-size: $webex-table-td-size;
-  }
-  tr:hover td {
-    background: $webex-tr-hover-bg;
-    cursor: pointer;
-  }
-  th.mat-header-cell,
-  td.mat-cell,
-  td.mat-footer-cell {
-    border-bottom: 1px solid $webex-tr-border;
-  }
-  tr.mat-header-row {
-    height: 37px;
-  }
-}
-
-.mat-form-field {
-  padding: 0 0 5px 0;
-  width: 93%;
-}
-.mat-form-field.mat-form-field-disabled {
-  border-bottom: none;
-}
-.mat-error {
-  color: $error-color;
-  margin: 13px 0 0 0;
-}
-.select-box {
-  border-radius: 30px;
-  background: #f3f6f6;
-  border: 1px solid #e2e9ef;
-  height: 35px;
-  position: relative;
-
-  select {
-    border: none !important;
-    background: transparent;
-    height: 100%;
-    width: 92%;
-    margin: auto;
-    display: block;
-  }
-}
-
-option:focus,
-option:focus-visible {
-  border: none !important;
-  outline: none !important;
-}
-option {
-  height: 30px;
-  cursor: pointer;
-  color: $webex-pagination-txt;
-}
-option:hover {
-  background: $webex-pagination-hover-bg !important;
-}
-.mat-select {
-  height: 100% !important;
-  //line-height: 35px !important;
-}
-:host {
-  .info-holder,
-  .input-holder {
-    // display: grid;
-    // grid-template-columns: 30% 70%;
-    // align-items: baseline;
-
-    &__name {
-      font-weight: 500 !important;
-      font-size: 14px !important;
-    }
-    &__inputs {
-      & .input-holder {
-        // display: grid;
-        // grid-template-columns: 30% 70%;
-        // align-items: baseline;
-        &__name {
-          font-weight: 400 !important;
-          font-size: 14px !important;
-        }
-      }
-    }
-
-    &__input {
-      ::ng-deep .mat-form-field {
-        border: 0.0625rem solid #00000080 !important;
-        border-radius: 0.5rem;
-        color: #000000f2;
-        font-weight: 400;
-        font-size: 0.875rem;
-        max-inline-size: 18rem;
-        padding: 0;
-
-        .mat-form-field-wrapper {
-          margin: 0 !important;
-          padding-bottom: 0 !important;
-
-          .mat-form-field-flex {
-            .mat-form-field-outline-end {
-              border: none !important;
-            }
-
-            &:hover {
-              .mat-form-field-outline-start {
-                border: none !important;
-              }
-              .mat-form-field-outline-end {
-                border: none !important;
-              }
-            }
-          }
-        }
-
-        &:hover {
-          background-color: #00000012 !important;
-          border: 0.0625rem solid #00000080 !important;
-
-          // .mat-form-field-flex {
-          //   border: .0625rem solid #00000080 !important;
-          // }
-        }
-
-        &.mat-focused {
-          .mat-form-field-outline-start {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-
-.mat-divider {
-  margin: 12px 0;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.mat-form-field-appearance-outline .mat-form-field-infix {
-  padding: 0px !important;
-}
-
-.mat-divider {
-  margin: 12px 0;
-}
-
-::ng-deep .mat-form-field-wrapper {
-  height: 30px;
-}
-::ng-deep .mat-form-field-flex {
-  height: 30px;
-
-  .mat-form-field-outline-start {
-    display: none;
-  }
-}
-
-::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
-  height: 35px;
-}
-
-:ng-deep .mat-form-field-outline .mat-form-field-outline-thick {
-  height: 35px;
-}
-
-::ng-deep .mat-select {
-  line-height: 20px;
-}
-
-::ng-deep .mat-form-field-infix {
-  border-top: 0px !important;
-}
-::ng-deep .mat-tab-group {
-  font-family: "Inter", sans-serif;
-}
-
-::ng-deep .mat-tab-label {
-  font-weight: 500 !important;
-  // font-size: 16px !important;
-  font-size: 0.875rem !important;
-  height: auto !important;
-  min-width: auto !important;
-  padding: 0 !important;
-  opacity: 1 !important;
-  color: black !important;
-  margin: 0 !important;
-  box-shadow: 0 -3px 0 0 #000000e6;
-  margin-bottom: 0.225rem !important;
-  color: rgba(0, 0, 0, 0.6) !important;
-
-  &.mat-tab-label-active .mat-tab-label-content {
-    color: black !important;
-    font-weight: 500 !important;
-    font-size: 0.875rem !important;
-  }
-}
-
-::ng-deep .mat-ink-bar {
-  background-color: black !important;
-  height: 3px !important;
-}
-::ng-deep .mat-tab-labels {
-  gap: 30px;
-  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.4);
-  // color: rgba(0, 0, 0, 0.6) !important;
-  // font-size: 0.875rem !important;
-
-  .mat-tab-label {
-    font-size: 0.875rem !important;
-    color: $users-management-title-color !important;
-
-    &.mat-tab-label-active .mat-tab-label-content {
-      color: black !important;
-      font-weight: 500 !important;
-      font-size: 0.875rem !important;
-    }
-  }
-}
-::ng-deep .mat-progress-spinner {
-  position: absolute !important;
-  top: 40%;
-  left: 45%;
-}
-.app-icon {
-  height: 20px;
-  width: 20px;
-  display: inline-block;
-  cursor: pointer;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.app-icon {
-  transition: all 0.15s ease-out;
-}
-.icon-webex-right-arrow {
-  background-image: url("./assets/icons/arrow-right.svg");
-}
-.icon-webex-left-arrow {
-  background-image: url("./assets/icons/arrow-left.svg");
-}
-.go-back-box {
-  background: white;
-  border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
-  height: 60px;
-  width: 100%;
-  line-height: 60px;
-  cursor: pointer;
-}
-.go-back-box-container {
-  padding: 0 1rem;
-  display: flex;
-  justify-content: flex-start;
-
-  .icon-webex-left-arrow,
-  .go-back-title {
-    display: block;
-    height: 60px;
-  }
-  .go-back-title {
-    line-height: 61px;
-  }
-}
-.go-back-title {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-.tabs-container {
-  padding: 1.5rem 4.375rem 0;
-}
-
-::ng-deep .custom-toggle {
-  .mat-slide-toggle-bar {
-    position: relative;
-    width: 48px;
-    height: 25px;
-    flex-shrink: 0;
-    border-radius: 13px;
-    background-color: #cccccc;
-  }
-
-  .mat-slide-toggle-thumb {
-    height: 20px;
-    width: 20px;
-    position: absolute;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: 3px;
-    top: 5px;
-    background-color: white !important;
-    // small icon inside the thumb
-    &::after {
-      content: "\00D7"; // default: times (×)
-      font-size: 14px;
-      color: $icon-color;
-      line-height: 1;
-      display: block;
-      pointer-events: none;
-      transform: translateY(0);
-    }
-  }
-
-  &.mat-checked {
-    .mat-slide-toggle-thumb {
-      left: calc(100% - 11px) !important;
-      &::after {
-        content: "\2713"; // check mark ✓
-        color: $active-color;
-        font-weight: 700;
-        font-size: 10px;
-      }
-    }
-
-    .mat-slide-toggle-bar {
-      background: #1170cf !important;
-      }
-      .mat-slide-toggle-bar:hover {
-        background: #0353a8 !important;
-    }
-  }
-}