carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/rating_review/single-review/single-review.component.scss

@@ -0,0 +1,887 @@
+@use "../../../../styles/review_variables.scss" as *;
+
+svg-icon {
+  width: 18px !important;
+  height: 18px !important;
+  display: grid;
+  place-items: center;
+  color: $color-review-icon-dark;
+  /* path {
+    fill: $color-review-icon-dark;
+  } */
+  svg {
+    display: grid;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+  }
+}
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.personal {
+  font-weight: 700;
+  line-height: 18px;
+  color: $color-span;
+}
+.edited {
+  color: $color-blue;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.current-rating-like {
+  color: $color-like !important;
+}
+.current-rating-dislike {
+  color: $color-dislike !important;
+}
+
+.active-like {
+  :hover {
+    .like-icon {
+      color: red;
+    }
+  }
+}
+
+.review-wrapper.modal-type {
+  background-color: $color-dark;
+  max-width: 456px;
+  border-radius: 2px;
+  padding: 2px;
+  margin-left: 6px;
+  margin-right: 6px;
+  &.not-editing {
+    background-color: transparent;
+
+    .upper {
+      padding: 2px 2px 0px 4px;
+      .info {
+        display: flex;
+        align-items: center;
+        .name {
+          color: black;
+        }
+      }
+
+      .controls {
+        display: flex;
+        align-items: center;
+      }
+
+      .edit-time {
+        font-size: 14px;
+      }
+    }
+    .lower {
+      background-color: transparent;
+      color: black;
+      max-width: 100%;
+      line-height: 18px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-wrap: break-word;
+      font-size: 14px !important;
+    }
+    .controls {
+      display: flex;
+      gap: 4px;
+      visibility: hidden;
+      .pencil-icon {
+        color: $color-review-icon-dark !important;
+        &:hover {
+          background-color: rgba($color-review-icon-dark, 0.2) !important;
+          color: $color-review-icon-dark-hover !important;
+          & + span {
+            opacity: 1;
+          }
+        }
+      }
+      .trash-icon {
+        &:hover {
+          background-color: $color-trash-background !important;
+          path {
+            fill: $color-trash-fill !important;
+          }
+          & + span {
+            opacity: 1;
+          }
+        }
+      }
+      svg-icon {
+        display: grid;
+        place-items: center;
+        width: 18px;
+        height: 18px;
+        padding: 2px;
+        cursor: pointer;
+        &:hover {
+          background-color: $color-text-gray;
+          path {
+            fill: $color-review-icon-dark-hover;
+          }
+        }
+      }
+    }
+    &:hover {
+      background-color: $color-light-gray;
+      .controls {
+        visibility: visible;
+      }
+    }
+  }
+  .upper {
+    padding: 2px 2px 2px 4px;
+    display: flex;
+    justify-content: space-between;
+    .info {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      .name {
+        line-height: 18px;
+        font-weight: 600;
+        color: white;
+      }
+
+      .dot {
+        color: $color-review-icon-dark;
+      }
+
+      .description {
+        color: $color-review-icon-dark;
+        font-weight: 500;
+        line-height: 18px;
+      }
+
+      .edit-time {
+        color: $color-review-icon-dark;
+        font-weight: 500;
+        line-height: 18px;
+      }
+    }
+    .rating {
+      display: flex;
+      gap: 4px;
+      align-items: center;
+      padding-bottom: 4px;
+      .like-icon {
+        display: grid;
+        place-items: center;
+        background-color: transparent !important;
+        &:hover {
+          & + span {
+            opacity: 1;
+          }
+          path {
+            fill: $color-review-hover;
+          }
+        }
+        path {
+          fill: $color-review-icon-dark;
+        }
+
+        &.like-active {
+          :hover {
+            path {
+              fill: $color-like-active-hover;
+            }
+          }
+          path {
+            fill: $color-like;
+          }
+        }
+      }
+      .dislike-icon {
+        display: grid;
+        place-items: center;
+        background-color: transparent !important;
+        &:hover {
+          & + span {
+            opacity: 1;
+          }
+          path {
+            fill: $color-review-hover;
+          }
+        }
+        path {
+          fill: $color-review-icon-dark;
+        }
+        &.dislike-active {
+          :hover {
+            path {
+              fill: $color-dislike-active-hover;
+            }
+          }
+          path {
+            fill: $color-dislike;
+          }
+        }
+      }
+      .separator {
+        border: 1px solid $color-review-icon-dark;
+        height: 14px;
+      }
+      svg-icon {
+        width: 18px;
+        height: 18px;
+        display: grid;
+        place-items: center;
+        background-color: $color-light;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      .checkmark-icon {
+        transition: transform 0.2s ease-in-out;
+
+        &:hover {
+          background-color: white;
+          transform: scale(calc(22 / 18));
+          & + span {
+            opacity: 1;
+          }
+
+          svg {
+            transform: scale(calc(18 / 22));
+          }
+        }
+        svg {
+          fill: $color-light;
+          width: 14px;
+          border-radius: 1px;
+        }
+        path {
+          fill: $color-dark;
+        }
+      }
+      .cancel-icon {
+        transition: transform 0.2s ease-in-out;
+
+        &:hover {
+          background-color: white;
+          transform: scale(calc(22 / 18));
+
+          & + span {
+            opacity: 1;
+          }
+
+          svg {
+            transform: scale(calc(22 / 18));
+          }
+        }
+        svg {
+          fill: $color-light;
+          width: 14px;
+          border-radius: 1px;
+        }
+        path {
+          fill: $color-dark;
+        }
+      }
+    }
+  }
+  .lower {
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    padding: 2px 4px 4px 4px;
+    line-height: 18px;
+    cursor: text;
+  }
+}
+
+.profile-img {
+  width: 22px;
+}
+
+.lower {
+  color: $color-white;
+  outline: none;
+  overflow-y: auto;
+  padding: 2px 4px 4px 4px;
+  text-indent: 0;
+  display: block;
+  background-color: $color-dark;
+  border-radius: 2px;
+  font-size: 11px;
+  font-weight: 400;
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:empty::after {
+    content: attr(data-placeholder);
+    color: $color-review-icon-dark;
+    line-height: 14px;
+    margin-left: 4px;
+  }
+
+}
+
+.svg-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.bottom-divider-dark {
+  margin: 6px 6px 0;
+  border-bottom: 1px solid $color-divider;
+}
+.bottom-divider-light {
+  margin: 4px 0 2px;
+  border-bottom: 1px solid $color-review-icon-dark-hover;
+}
+
+// dark
+svg-icon {
+  display: inline-block;
+  border-radius: 1px;
+  display: grid;
+  place-items: center;
+  &:hover {
+    cursor: pointer;
+  }
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+.review-wrapper.table-type {
+  background-color: $color-divider !important;
+  color: $color-review-icon-dark;
+  border-radius: 2px;
+  max-width: 252px;
+  padding: 2px;
+  cursor: auto !important; 
+
+  &.not-editing {
+    background-color: $color-modal-dark-bg !important;
+    cursor: pointer !important;
+    &:hover {
+      background-color: $color-review-icon-dark-hover !important;
+      .lower {
+        background-color: $color-review-icon-dark-hover !important;
+      }
+      .expand-icon {
+        opacity: 1;
+      }
+      .collapse-icon {
+        opacity: 1;
+      }
+    }
+    .upper {
+      display: flex;
+      align-items: start;
+      background-color: transparent;
+
+      .info {
+        display: flex;
+        align-items: center;
+        padding: 0 !important;
+        .column {
+          display: flex;
+          .upper-row {
+            display: flex;
+            align-items: center;
+            line-height: 14px;
+            height: 14px;
+            .name {
+              font-weight: 600;
+              color: $color-white !important;
+              font-size: 11px;
+            }
+            .personal {
+              line-height: 14px !important;
+            }
+            .current-rating-like {
+              transform: scaleX(-1);
+            }
+          }
+          .lower-row {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 11px;
+            font-weight: 500;
+            line-height: 14px !important;
+            .edit-time {
+              color: $color-review-icon-dark;
+            }
+            .edited {
+              color: $color-light-blue;
+              line-height: 14px !important;
+            }
+          }
+        }
+      }
+
+      .rating {
+        .svg-group {
+          svg-icon {
+            background-color: red !important;
+          }
+        }
+      }
+
+      .controls {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .lower {
+      cursor: pointer !important;
+      padding: 2px !important;
+      background-color: $color-modal-dark-bg !important;
+      color: $color-white;
+    }
+  }
+  .upper {
+    display: flex;
+    align-items: start;
+    padding: 0 2px;
+    .info {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 0 2px;
+      .column {
+        font-size: 11px;
+        height: 26px;
+        .upper-row {
+          display: flex;
+          gap: 4px;
+          .name {
+            font-weight: 600;
+            font-size: 11px;
+            line-height: 14px;
+            color: $color-review-icon-dark-hover;
+          }
+          svg-icon {
+            width: 18px !important;
+            height: 18px;
+            display: flex;
+            align-items: center;
+          }
+        }
+        .lower-row {
+          display: flex;
+          .description {
+            line-height: 14px;
+            font-size: 11px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+    .rating {
+      display: flex;
+      margin-left: auto;
+      gap: 4px;
+      padding: 2px 0;
+      .like-icon {
+        width: 14px;
+        height: 14px;
+        &.like-active {
+          path {
+            fill: $color-like;
+          }
+          &:hover {
+            path {
+              fill: $color-like-active-hover-dark;
+            }
+          }
+        }
+        &:hover:not(.like-active) {
+          path {
+            fill: $color-review-icon-dark-hover;
+          }
+        }
+      }
+      .dislike-icon {
+        width: 14px;
+        height: 14px;
+        display: grid;
+        place-items: center;
+        &.dislike-active {
+          path {
+            fill: $color-dislike;
+          }
+          &:hover {
+            path {
+              fill: $color-trash-fill;
+            }
+          }
+        }
+        &:hover:not(.dislike-active) {
+          path {
+            fill: $color-review-icon-dark-hover;
+          }
+        }
+      }
+      .separator-table {
+        border: 1px solid $color-text-gray;
+        height: 14px;
+        margin: auto;
+      }
+      .checkmark-icon {
+        background-color: $color-review-icon-dark !important;
+        transition: transform 0.3s ease-in-out;
+        &:hover {
+          background-color: $color-review-icon-dark-hover !important;
+          transform: scale(calc(22 / 18));
+          & + span {
+            opacity: 1;
+          }
+          svg {
+            transform: scale(calc(18 / 22));
+          }
+        }
+        path {
+          fill: $color-divider;
+        }
+        svg {
+          fill: $color-light;
+          width: 14px;
+          border-radius: 1px;
+        }
+      }
+      .cancel-icon {
+        background-color: $color-review-icon-dark !important;
+        transition: transform 0.3s ease-in-out;
+        &:hover {
+          background-color: $color-review-icon-dark-hover !important;
+          transform: scale(calc(22 / 18));
+
+          & + span {
+            opacity: 1;
+          }
+          svg {
+            transform: scale(calc(18 / 22));
+          }
+        }
+        path {
+          fill: $color-divider;
+        }
+        svg {
+          fill: transparent !important;
+          width: 14px;
+          border-radius: 1px;
+        }
+      }
+    }
+    .controls {
+      margin-left: auto;
+      display: flex;
+      gap: 4px;
+      padding: 0 2px;
+      visibility: hidden;
+
+      .pencil-icon {
+        padding: 2px;
+        &:hover {
+          background-color: $color-icon-black;
+          path {
+            fill: $color-divider;
+          }
+        }
+      }
+      .trash-icon {
+        padding: 2px;
+        &:hover {
+          background-color: $color-icon-black;
+          path {
+            fill: $color-divider;
+          }
+        }
+      }
+    }
+  }
+  &:hover {
+    cursor: pointer;
+    .controls {
+      visibility: visible !important;
+    }
+  }
+  .lower {
+    background-color: $color-divider !important;
+    color: $color-modal-dark-bg;
+    line-height: 14px;
+    padding: 2px 4px !important;
+    cursor: text !important;
+  }
+}
+
+.review-wrapper.details-type {
+  background-color: $color-dark;
+  max-width: 300px;
+  padding: 2px;
+  border-radius: 2px;
+  &.not-editing {
+    background-color: transparent;
+    &:hover {
+      background-color: #eeeeee;
+    }
+    .upper {
+      .info {
+        display: flex;
+        align-items: center;
+        .column {
+          display: flex;
+          .upper-row {
+            .name {
+              font-weight: 600;
+              color: $color-review-icon-dark-hover !important;
+              font-size: 11px;
+            }
+          }
+        }
+      }
+
+      .rating {
+        .svg-group {
+          svg-icon {
+            background-color: red !important;
+          }
+        }
+      }
+
+      .controls {
+        display: flex;
+        align-items: center;
+      }
+
+      .edit-time {
+        font-size: 14px;
+      }
+    }
+    .lower {
+      background-color: transparent;
+      color: black;
+      max-width: 100%;
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
+    .controls {
+      display: flex;
+      gap: 4px;
+      visibility: hidden;
+      .pencil-icon {
+        &:hover {
+          & + span {
+            opacity: 1;
+          }
+        }
+      }
+      .trash-icon {
+        &:hover {
+          background-color: $color-trash-background !important;
+          path {
+            fill: $color-trash-fill !important;
+          }
+          & + span {
+            opacity: 1;
+          }
+        }
+      }
+      svg-icon {
+        display: grid;
+        place-items: center;
+        width: 18px;
+        height: 18px;
+        padding: 2px;
+        cursor: pointer;
+        &:hover {
+          background-color: $color-text-gray;
+          path {
+            fill: $color-review-icon-dark-hover;
+          }
+        }
+      }
+    }
+    &:hover {
+      background-color: $color-light-gray;
+      .controls {
+        visibility: visible;
+      }
+    }
+  }
+  .upper {
+    display: flex;
+    align-items: start;
+    .info {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 0 2px;
+      .column {
+        display: flex;
+        font-size: 11px;
+        .upper-row {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          .name {
+            font-weight: 600;
+            color: $color-white;
+            line-height: 14px !important;
+          }
+          .personal {
+            line-height: 14px;
+          }
+          svg-icon {
+            width: 14px !important;
+            height: 14px;
+            display: flex;
+            align-items: center;
+          }
+        }
+        .lower-row {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          .description {
+            font-weight: 500;
+            line-height: 14px;
+            font-size: 11px;
+            color: $color-review-icon-dark;
+          }
+
+          .edit-time {
+            line-height: 14px;
+            color: $color-review-icon-dark;
+            font-weight: 500;
+            font-size: 11px;
+          }
+          .edited {
+            line-height: 14px;
+          }
+        }
+      }
+    }
+    .rating {
+      display: flex;
+      margin-left: auto;
+      gap: 4px;
+      padding: 2px 0;
+      svg-icon {
+        width: 14px;
+        height: 14px;
+        display: grid;
+        place-items: center;
+      }
+      .like-icon {
+        &.like-active {
+          color: $color-like;
+          background-color: transparent;
+        }
+        &:hover:not(.like-active) {
+          color: $color-review-hover;
+        }
+      }
+      .dislike-icon {
+        &.dislike-active {
+          color: $color-dislike;
+        }
+        &:hover:not(.dislike-active) {
+          color: $color-review-hover;
+        }
+      }
+      .checkmark-icon {
+        background-color: $color-review-icon-dark !important;
+        color: $color-dark;
+        transition: transform 0.2s ease-in-out;
+        &:hover {
+          background-color: $color-white !important;
+          transform: scale(calc(22 / 18));
+          & + span {
+            opacity: 1;
+          }
+          svg {
+            transform: scale(calc(18 / 22));
+          }
+        }
+      }
+      .cancel-icon {
+        background-color: $color-review-icon-dark !important;
+        transition: transform 0.2s ease-in-out;
+        color: $color-dark;
+
+        &:hover {
+          background-color: $color-white !important;
+          transform: scale(calc(22 / 18));
+
+          & + span {
+            opacity: 1;
+          }
+          svg {
+            transform: scale(calc(22 / 18));
+          }
+        }
+      }
+    }
+    .controls {
+      margin-left: auto;
+      display: flex;
+      gap: 4px;
+      padding: 0 2px;
+      opacity: 0;
+      pointer-events: none;
+      .svg-group {
+        display: flex;
+        height: 100%;
+        align-items: start;
+        padding: 2px;
+        .pencil-icon {
+          &:hover {
+            background-color: $color-icon-black;
+            path {
+              fill: $color-divider;
+            }
+          }
+        }
+        .trash-icon {
+          &:hover {
+            background-color: $color-icon-black;
+            path {
+              fill: $color-divider;
+            }
+          }
+        }
+      }
+    }
+  }
+  .lower {
+    line-height: 14px !important;
+    padding: 2px 4px !important;
+    cursor: text;
+  }
+  &:hover {
+    cursor: pointer;
+    .controls {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+  }
+}
+
+.expand-icon {
+  padding: 4px 2px;
+  margin-left: auto;
+  path {
+    fill: $color-review-hover;
+  }
+  opacity: 0;
+}
+.collapse-icon {
+  transform: rotate(180deg);
+  padding: 4px 2px;
+  margin-left: auto;
+  path {
+    fill: $color-review-hover;
+  }
+  opacity: 0;
+}