npm - carriera-intern - Versions diffs - 0.0.0 → 1.1.76 - Mend

carriera-intern 0.0.0 → 1.1.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (600) hide show

package/projects/carriera-intern-components/src/app/components/document-preview/document-preview.component.scss DELETED Viewed

@@ -1,1115 +0,0 @@
-@use "variables" as *;
-@use "bootstrap/scss/bootstrap";
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
-}
-body {
-  margin: 0;
-  line-height: inherit;
-  background-color: white;
-  font-family:
-    "Montserrat",
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Helvetica,
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji";
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
-}
-p,
-ul,
-ol,
-dl,
-blockquote,
-figure,
-pre {
-  margin: 0;
-}
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-/* Remove default list styles on ul, ol */
-ul,
-ol {
-  padding-left: 1.5rem;
-  list-style-position: outside;
-}
-/* Link styles */
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-/* Tables */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-/* Remove outline for focus on mouse users, but keep it for keyboard */
-:focus:not(:focus-visible) {
-  outline: none;
-}
-.document-image {
-  height: 140px;
-  margin: auto;
-  object-fit: cover;
-  box-shadow: 0 0 4px #00000026;
-  max-width: 140px;
-}
-.document-image-container {
-  position: relative;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-.badge-tag-container {
-  position: absolute;
-  bottom: 0;
-}
-.badges {
-  display: flex;
-  gap: 2px; // ? Some designs use 4px gaps
-  /* &:first-child {
-    margin-bottom: 2px;
-  } */
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-.file-type {
-  text-transform: uppercase;
-}
-.badge {
-  font-size: 11px;
-  font-weight: 800;
-  color: white;
-  line-height: 14px;
-  padding: 2px 4px;
-  border-radius: 1px;
-  transition: opacity 0.2s ease-in-out;
-  text-align: center;
-  background-color: #91919166; // TODO: Change to proper colors once merged with main
-  transition: background-color 0.2s ease-in-out;
-}
-.tag {
-  @extend .badge;
-  font-weight: 700;
-  max-width: 130px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 2px !important;
-}
-.category-tag {
-  @extend .tag;
-}
-.user-tag {
-  @extend .tag;
-  background-color: $color-blue-500-40 !important;
-}
-.pdf {
-  background-color: $color-pdf-opacity;
-}
-.video {
-  background-color: $color-video-opacity;
-}
-.image {
-  background-color: $color-image-opacity;
-}
-svg-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.document {
-  height: 178px;
-  width: 148px;
-  padding: 4px;
-  background-color: $color-surface-input-neutral;
-  border-radius: 2px;
-  position: relative;
-  opacity: 1;
-  cursor: pointer;
-  &.has-expired {
-    opacity: 0.4;
-    pointer-events: none;
-  }
-  &:hover:not(.noTouch) {
-    background-color: $color-surface-input-neutral-hover;
-    .badge {
-      background-color: $color-icon-base-neutral;
-    }
-    .user-tag {
-      background-color: $color-blue-300 !important;
-    }
-    .pdf {
-      background-color: $color-pdf;
-    }
-    .video {
-      background-color: $color-video;
-    }
-    .image {
-      background-color: $color-image;
-    }
-    .document-actions {
-      opacity: 1;
-    }
-  }
-}
-.document-name {
-  width: 140px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  background-color: #eeeeee;
-  margin-top: 4px;
-  .file-name {
-    color: $color-text-base-content;
-    background-color: $color-surface-input-neutral;
-    font-size: 14px;
-    border-radius: 1px;
-    line-height: 18px;
-    padding: 4px 6px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    transition: background-color 0.3s ease;
-    &:hover {
-      background-color: #ffffff;
-      cursor: text;
-    }
-  }
-}
-.noTagOption {
-  .label {
-    opacity: 0 !important;
-    pointer-events: none;
-  }
-}
-.file-size {
-  font-weight: 600;
-}
-.icon {
-  width: 30px;
-  height: 30px;
-  padding: 6px;
-}
-.document-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  width: 140px;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-}
-.document-actions-container {
-  background-color: $color-black-200-90;
-  border-radius: 1px;
-  display: flex;
-  &:last-child {
-    margin-left: auto;
-  }
-}
-.document-actions-button {
-  background-color: transparent;
-  border: none;
-  height: 30px;
-  width: 30px;
-  padding: 0;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  color: #dadada;
-  outline: none;
-  &.tagIcon {
-    background-color: $color-text-base-heading !important;
-    color: #ffffff;
-    border-radius: 1px;
-  }
-  &:hover {
-    color: #ffffff;
-  }
-  &:focus {
-    outline: none;
-  }
-}
-.delete-modal {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  bottom: 0;
-  transform: translateY(-50%);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  opacity: 0;
-  height: 140px;
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  gap: 20px;
-  justify-content: center;
-  .delete-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .delete-header .delete-header-text {
-    text-align: center;
-    padding-top: 18px;
-    padding-left: 12px;
-    padding-right: 12px;
-    font-size: 14px !important;
-    font-weight: 500;
-    line-height: 18px;
-    color: $color-text-base-heading;
-  }
-}
-.document.delete-modal-large {
-  .document-image-container {
-    background-color: $color-surface-input-neutral !important;
-  }
-  .document-image {
-    opacity: 0.1;
-  }
-  .badges {
-    opacity: 0;
-  }
-  .document-actions-container {
-    opacity: 0;
-  }
-  .delete-modal {
-    opacity: 1 !important;
-    pointer-events: auto !important;
-    z-index: 10;
-  }
-}
-.document.noTouch {
-  pointer-events: none;
-  background-color: $color-surface-input-neutral-hover !important;
-  /*  > *:not(.delete-modal) {
-    opacity: 0.5;
-  } */
-  .document-image {
-    opacity: 0.1;
-  }
-  .badges {
-    opacity: 0;
-  }
-  .document-actions-container {
-    opacity: 0;
-  }
-  .delete-modal {
-    opacity: 1 !important;
-    pointer-events: auto !important;
-    z-index: 10;
-  }
-}
-.document.buttonsVisibility {
-  .document-actions {
-    opacity: 1;
-  }
-  &.drawerMode {
-    .document-actions {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-    }
-  }
-}
-.modal-buttons {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  gap: 4px;
-}
-.modal-buttons button {
-  border-radius: 2px;
-  font-weight: 500;
-  padding: 4px;
-  width: 100%;
-  vertical-align: middle;
-  color: $color-text-base-inverse;
-  cursor: pointer;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: 11px;
-  line-height: 14px;
-}
-.delete-button {
-  background-color: $color-text-base-negative;
-  transition: background-color 0.3s ease;
-  &:hover {
-    background-color: $color-surface-input-negative-focus;
-  }
-}
-.cancel-button {
-  background-color: $color-inverse-icon-base-disable;
-  transition: background-color 0.3s ease;
-  &:hover {
-    background-color: $color-inverse-surface-input-neutral;
-  }
-}
-//Tag Popover
-.tag-popover {
-  border-radius: 3px;
-  padding: 4px;
-  background-color: $color-black-500 !important;
-  opacity: 1;
-  transition: opacity 0.2s ease;
-  width: 196px;
-  .dropdown-list {
-    max-height: 244px !important;
-    overflow-y: auto;
-    user-select: none;
-    .tag-header {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-      margin-bottom: 4px;
-      padding-bottom: 2px;
-      cursor: pointer;
-      .header {
-        display: flex;
-        padding: 4px 6px 4px 4px;
-        width: 100%;
-        place-items: center;
-        justify-content: space-between;
-        gap: 6px;
-        .tag-header-text {
-          color: $color-icon-base-disable;
-          font-size: 11px;
-          font-weight: 700;
-          line-height: 18px;
-        }
-        .minus-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 14px;
-          height: 14px;
-          color: $color-text-base-content-subtle;
-        }
-      }
-      .divider {
-        width: 100%;
-        height: 1px;
-        background-color: #424242;
-      }
-    }
-    .tag-list {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      .tag-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        padding: 4px;
-        border-radius: 2px;
-        padding: 4px 6px 4px 4px;
-        cursor: pointer;
-        &:hover {
-          background-color: $color-inverse-surface-input-neutral;
-        }
-        .tag-text {
-          color: $color-text-base-inverse;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 18px;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-        .checkmark-icon {
-          display: none;
-          align-items: center;
-          justify-content: center;
-          width: 14px;
-          height: 14px;
-          color: $color-inverse-icon-base-positive;
-        }
-      }
-      .selectedDesign {
-        .tag-text {
-          width: 156px;
-        }
-        .checkmark-icon {
-          display: flex;
-        }
-        span {
-          font-weight: 700;
-        }
-      }
-    }
-    &::-webkit-scrollbar {
-      background-color: $color-text-base-content;
-      border-radius: 0 3px 3px 0;
-      width: 7px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: #919191;
-      width: 2px;
-      border: 2px solid $color-text-base-content;
-      border-radius: 3px;
-    }
-  }
-}
-//Large View
-.large-view {
-  &.document {
-    width: 100%;
-    max-width: 100%;
-    min-width: 302px;
-    aspect-ratio: 1 / 1;
-    height: auto;
-    min-height: 302px;
-    background-color: $color-text-base-inverse;
-    box-shadow: 0 0 4px #00000026;
-    position: relative;
-    border-radius: 3px;
-    padding: 4px;
-    transition:
-      background-color 0.2s ease,
-      opacity 0.2s ease;
-    &:hover:not(.noTouch) {
-      background-color: $color-white-50;
-      .document-image-container {
-        background-color: $color-surface-input-neutral;
-      }
-      .document-actions {
-        opacity: 1;
-      }
-      .document-image-container .badge-tag-container .badges .tag {
-        background-color: $color-icon-base-positive;
-        opacity: 1;
-      }
-    }
-    .document-name {
-      background-color: $color-icon-base-inverse !important;
-      border-radius: 2px;
-      box-shadow: 0px 0px 2px 0px #00000026;
-      width: auto;
-      height: 26px;
-      position: absolute;
-      bottom: 8px;
-      left: 8px;
-      right: 8px;
-      .file-name {
-        background-color: $color-icon-base-inverse;
-        color: $color-text-base-content;
-        &:hover {
-          background-color: $color-icon-base-inverse;
-          cursor: text;
-        }
-      }
-    }
-  }
-  .document-image-container {
-    width: 100%;
-    height: 100%;
-    border-radius: 2px;
-    transition: background-color 0.2s ease;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 4px;
-    .document-image {
-      width: auto;
-      height: auto;
-      max-width: 100%;
-      max-height: 100%;
-      object-fit: contain;
-      box-shadow: 0px 0px 4px 0px #00000026;
-    }
-    .badge-tag-container {
-      width: 100%;
-      height: 100%;
-      .badges:first-child {
-        position: absolute;
-        left: 4px;
-        gap: 4px;
-        margin-top: 4px;
-      }
-      .tag {
-        background-color: $color-blue-500-40;
-        position: static;
-        max-width: unset !important;
-      }
-      .new-tag {
-        background-color: $color-green-300;
-        font-size: 11px;
-        font-weight: 700;
-        line-height: 14px;
-        color: $color-text-base-inverse;
-        padding: 2px 4px;
-        border-radius: 1px;
-        text-transform: uppercase;
-        position: static;
-      }
-      .bottomTags {
-        position: absolute;
-        gap: 4px;
-        left: 4px;
-        bottom: 34px;
-      }
-    }
-  }
-  .document-actions {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-    .document-actions-container {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      margin-right: 8px;
-      .delete {
-        transition: color 0.2s ease-in-out;
-        &:hover {
-          .icon {
-            color: $color-red-100;
-          }
-        }
-      }
-    }
-  }
-  .delete-modal {
-    height: 100%;
-    width: 100%;
-    gap: 0;
-    .delete-header .delete-header-text {
-      text-align: center;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 18px;
-      color: $color-text-base-heading;
-      padding: 0;
-      width: 167px;
-    }
-    .modal-buttons {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 6px;
-      margin-top: 38px;
-      .delete-button,
-      .cancel-button {
-        text-transform: none;
-        font-size: 14px;
-        font-weight: 700;
-        line-height: 20px;
-        padding: 6px;
-        width: 150px;
-      }
-    }
-  }
-}
-//CDL Details Mode-------------------------------------------------------->
-.cdl-details-mode {
-  width: аuto !important;
-  height: auto !important;
-  background-color: transparent !important;
-  transition: background-color 0.3s ease-in-out !important;
-  display: flex !important;
-  flex-direction: column !important;
-  flex: 1 !important;
-  overflow: hidden !important;
-  &.document-portrait {
-    aspect-ratio: 1 / 1;
-  }
-  &.document-landscape:not(.multiple-details-docs) {
-    aspect-ratio: 3 / 2;
-    .document-image-container {
-      .document-image {
-        height: 100% !important;
-        width: 100% !important;
-        max-width: 100% !important;
-        max-height: 100% !important;
-        object-fit: cover !important;
-      }
-    }
-  }
-  &:not(.document-portrait):not(.document-landscape) {
-    aspect-ratio: 3 / 2;
-  }
-  .document-image-container {
-    width: 100% !important;
-    height: 100% !important;
-    flex: 1 !important;
-    min-height: 0 !important;
-    max-height: 408px !important;
-    display: flex !important;
-    justify-content: center !important;
-    align-items: center !important;
-    .document-image {
-      height: auto !important;
-      width: auto !important;
-      max-width: 100% !important;
-      max-height: 100% !important;
-      margin: 0 !important;
-      object-fit: contain !important;
-      box-shadow: 0px 0px 4px 0px #00000026;
-    }
-  }
-  .document-actions {
-    display: flex;
-    align-items: center;
-    justify-content: end !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
-    position: absolute !important;
-    top: 4px !important;
-    left: unset !important;
-    right: 4px !important;
-    transition: opacity 0.3s ease-in-out !important;
-    .label,
-    .delete {
-      display: none !important;
-    }
-  }
-  .badge-tag-container {
-    position: absolute !important;
-    bottom: 28px !important;
-    left: 0px !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
-    transition: opacity 0.3s ease-in-out !important;
-  }
-  .document-name {
-    position: absolute !important;
-    bottom: 4px !important;
-    left: 4px !important;
-    right: 4px !important;
-    width: auto !important;
-    border-radius: 1px;
-    opacity: 0 !important;
-    pointer-events: none !important;
-    transition: opacity 0.3s ease-in-out !important;
-    background-color: #ffffffb2 !important;
-    &:has(.input) {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-    }
-  }
-  &.multiple-details-docs {
-    &.document-portrait,
-    &.document-landscape,
-    &:not(.document-portrait):not(.document-landscape) {
-      aspect-ratio: 1 / 1 !important;
-    }
-    &.document-portrait {
-      .document-image-container {
-        .document-image {
-          height: 100% !important;
-          width: auto !important;
-          object-fit: contain !important;
-        }
-      }
-    }
-    &.document-landscape {
-      .document-image-container {
-        .document-image {
-          height: auto !important;
-          width: 100% !important;
-          object-fit: cover !important;
-        }
-      }
-    }
-  }
-  &:hover {
-    background-color: $color-surface-input-neutral !important;
-    .document-name:not(.input) {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-      .file-name {
-        box-shadow: 0px 0px 2px 0px #00000026;
-        color: $color-black-700 !important;
-        background-color: $color-white-70 !important;
-      }
-    }
-    .badge-tag-container {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-    }
-    .document-actions {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-    }
-  }
-}
-//Drawer Mode-------------------------------------------------------->
-.drawerMode {
-  width: 194px !important;
-  height: 194px !important;
-  background-color: transparent !important;
-  .document-image-container {
-    width: 100% !important;
-    height: 100% !important;
-    display: flex !important;
-    justify-content: center !important;
-    align-items: center !important;
-    .document-image {
-      width: auto !important;
-      height: auto !important;
-      max-width: 186px !important;
-      max-height: 186px !important;
-      object-fit: contain !important;
-      margin: 0 !important;
-      box-shadow: 0px 0px 2px 0px #00000026 !important;
-      display: block !important;
-      user-select: none !important;
-      -webkit-user-select: none !important;
-      -moz-user-select: none !important;
-      -ms-user-select: none !important;
-    }
-    .badge-tag-container {
-      position: absolute !important;
-      bottom: 28px !important;
-      left: 0 !important;
-      right: 0 !important;
-    }
-    .badges {
-      .user-tag {
-        background-color: $color-blue-300 !important;
-        margin-bottom: 1px !important;
-      }
-      .category-tag {
-        background-color: $color-black-100 !important;
-        margin-bottom: 1px !important;
-      }
-      .tag:not(.user-tag):not(.category-tag) {
-        display: none !important;
-      }
-      &:has(.file-type) {
-        opacity: 0 !important;
-        pointer-events: none !important;
-        transition: opacity 0.2s ease-in-out !important;
-      }
-      &:has(.user-tag),
-      &:has(.category-tag) {
-        position: absolute !important;
-        bottom: -28px !important;
-        border-radius: 1px;
-        transition: bottom 0.1s ease-in-out !important;
-        margin-bottom: 0 !important;
-      }
-    }
-  }
-  .document-name {
-    position: absolute !important;
-    bottom: 4px !important;
-    left: 4px !important;
-    right: 4px !important;
-    width: auto !important;
-    border-radius: 1px;
-    opacity: 0 !important;
-    pointer-events: none !important;
-    transition: opacity 0.1s ease-in-out !important;
-    background-color: #ffffffb2 !important;
-    box-shadow: 0px 0px 2px 0px #00000026;
-    &.editing,
-    &:has(.input) {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-    }
-  }
-  .document-actions {
-    width: 100% !important;
-    position: absolute !important;
-    top: 4px !important;
-    left: 0 !important;
-    right: 0 !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
-    display: flex !important;
-    justify-content: space-between !important;
-    align-items: flex-start !important;
-  }
-  .document-actions-container {
-    &.label {
-      margin-left: 4px !important;
-    }
-    &:not(.label) {
-      margin-right: 4px !important;
-    }
-  }
-  &:hover:not(.noTouch):not(.buttonsVisibility) {
-    background-color: $color-surface-input-neutral !important;
-    .document-name:not(.input) {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-      .file-name {
-        box-shadow: 0px 0px 2px 0px #00000026;
-        color: $color-black-700 !important;
-        background-color: $color-white-70 !important;
-      }
-    }
-    .document-actions {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-    }
-    .document-name {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-    }
-    .document-image-container {
-      .badges {
-        .category-tag,
-        .user-tag {
-          margin-bottom: 2px !important;
-        }
-        &:has(.file-type) {
-          opacity: 1 !important;
-          pointer-events: auto !important;
-        }
-        &:has(.user-tag),
-        &:has(.category-tag) {
-          position: absolute !important;
-          bottom: 20px !important;
-        }
-      }
-    }
-  }
-}
-//Cover Details Mode------------------------------------------------->
-.is-cover-details {
-  width: 100% !important;
-  height: 100% !important;
-  background-color: transparent !important;
-  padding: 0 !important;
-  &.has-expired-cover-details {
-    cursor: default;
-    pointer-events: none;
-    .document-image-container {
-      .document-image {
-        filter: grayscale(100%);
-      }
-    }
-  }
-  .document-image-container {
-    width: 100% !important;
-    height: auto !important;
-    max-height: 416px !important;
-    .document-image {
-      height: 100% !important;
-      max-width: 100% !important;
-      width: 100% !important;
-      object-fit: contain !important;
-      border-radius: 2px;
-      &.expired-image {
-        filter: grayscale(100%) opacity(50%);
-      }
-    }
-  }
-  .document-name,
-  .badge-tag-container {
-    display: none !important;
-  }
-  .document-actions {
-    opacity: 0 !important;
-    pointer-events: none !important;
-    position: absolute !important;
-    top: 4px !important;
-    left: unset !important;
-    right: 4px !important;
-    transition: opacity 0.3s ease-in-out !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: end !important;
-    .label,
-    .delete {
-      display: none !important;
-    }
-  }
-  &:hover {
-    .document-actions {
-      opacity: 1 !important;
-      pointer-events: auto !important;
-    }
-  }
-}
-//Has Expired
-/* .document.has-expired {
-  opacity: 0.4;
-  pointer-events: none;
-} */