carriera-intern 0.0.0

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

@@ -0,0 +1,564 @@
+@use "../../../../styles/review_variables.scss" as *;
+
+svg-icon {
+  svg {
+    width: 18px;
+    height: 18px;
+    path {
+      fill-opacity: 1;
+    }
+  }
+}
+
+p {
+  margin: 0 !important;
+}
+
+button {
+  border: none !important;
+}
+
+.y-divider {
+  border: 1px solid $color-divider;
+  height: 18px;
+}
+
+.x-divider {
+  width: 100%;
+  margin-bottom: 4px;
+  border: 1px solid $color-review-icon-dark-hover;
+}
+
+.column {
+  display: flex;
+  width: 100%;
+  height: 26px !important;
+}
+
+.disabled-btn {
+  background-color: $color-light-disabled !important;
+  color: $color-review-hover !important;
+}
+
+.modal-wrapper {
+  max-width: 468px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: absolute;
+  width: 100%;
+  .filter {
+    padding: 4px 6px;
+    .left-side {
+      .count-heading {
+        line-height: 18px;
+        font-size: 14px;
+        color: $color-review-icon-dark-hover;
+      }
+      .circle {
+        padding: 2px 5px;
+        width: 21px;
+      }
+    }
+  }
+
+  .filter-group {
+    padding: 0px;
+  }
+
+  .heading-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 4px 6px;
+  }
+}
+
+.table-wrapper {
+  max-width: 260px;
+  padding: 4px;
+  border-radius: 3px;
+
+  .reviews-window {
+    height: 100% !important;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .filter {
+    padding: 0px;
+    padding-left: 4px;
+    margin-bottom: 4px;
+    height: 18px;
+    .left-side {
+      display: flex;
+      align-items: center;
+      .count-heading {
+        text-transform: uppercase;
+        font-size: 11px;
+        line-height: 14px;
+        font-weight: 800;
+        color: $color-white;
+      }
+
+      .circle {
+        background-color: $color-review-icon-dark-hover;
+      }
+    }
+
+    .date-group {
+      span {
+        font-size: 11px;
+        line-height: 14px;
+        font-weight: 500;
+        color: $color-white;
+      }
+
+      svg-icon {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  .btn-filters {
+    margin: 4px 0;
+    div {
+      font-size: 11px;
+      line-height: 14px;
+      font-weight: 700;
+    }
+  }
+
+  .add-review {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 6px 4px 4px;
+    height: 26px;
+    border-radius: 2px;
+    transition: background-color .2s ease;
+    span {
+      line-height: 18px;
+      font-size: 11px;
+      font-weight: 700;
+      color: $color-light-blue;
+    }
+
+    .filter-group {
+      padding: 0 !important;
+      display: flex;
+      align-items: center;
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+      .plus-icon {
+        width: 14px !important;
+        height: 14px !important;
+        background-color: transparent !important;
+        path {
+          fill: $color-icon-base !important;
+        }
+      }
+    }
+    &:hover {
+      background-color: $color-blue-transparent;
+      cursor: pointer;
+      span {
+        path {
+          fill: $color-white;
+        }
+      }
+      .filter-group {
+        .plus-icon {
+          path {
+            fill: $color-light-blue !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.details-wrapper {
+  max-width: 300px;
+}
+
+.heading {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 4px 6px;
+
+  .heading-text {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+
+    p {
+      font-weight: 800;
+      font-size: 18px;
+    }
+
+    span {
+      background-color: $color-review-icon-dark;
+      color: white;
+      font-weight: 700;
+      vertical-align: middle;
+      padding: 4px 8px;
+      border-radius: 2px;
+    }
+  }
+
+  .icons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 60px;
+
+    svg-icon {
+      width: 18px;
+      height: 18px;
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      path {
+        fill: $color-review-icon-dark;
+      }
+    }
+  }
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+}
+
+.btn-filters {
+  display: flex;
+  border-radius: 2px;
+  padding: 4px;
+  gap: 4px;
+  justify-content: space-between;
+  background-color: $color-dark;
+
+  div {
+    width: 33%;
+    text-align: center;
+    border-radius: 1px;
+    padding: 2px 8px;
+    gap: 10px;
+    font-weight: 700;
+    color: $color-review-icon-dark;
+    transition: background-color .4s ease, color .4s ease;
+    &:hover {
+      cursor: pointer;
+    }
+    &.active {
+      background-color: $color-modal-dark-bg;
+      color: white;
+    }
+  }
+}
+
+.filter {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.rating_review {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-right: auto;
+  .left-side {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .counter {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+.filter-group {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  align-items: center;
+  border-radius: 2px;
+  padding: 4px !important;
+  gap: 4px;
+
+  &.active-group {
+    background-color: $color-icon-black;
+    cursor: pointer;
+    .cancel-icon {
+      path {
+        fill: white;
+      }
+    }
+    .count {
+      color: white;
+    }
+    &:hover {
+      background-color: $color-review-icon-dark-hover;
+      .cancel-icon {
+        display: flex;
+      }
+      .count {
+        display: none;
+      }
+    }
+  }
+  &.non-active-group {
+    &:hover {
+      background-color: $color-light-gray !important;
+      cursor: pointer;
+      svg-icon {
+        path {
+          fill: $color-review-icon-dark-hover !important;
+        }
+      }
+    }
+    &:hover:has(.most-likes) {
+      .like-icon {
+        path {
+          fill: $color-like !important;
+        }
+      }
+    }
+
+    &:hover:has(.most-dislikes) {
+      .dislike-icon {
+        path {
+          fill: $color-dislike !important;
+        }
+      }
+    }
+  }
+
+  svg-icon {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    color: $color-review-icon-dark;
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .cancel-icon {
+    width: 14px;
+    height: 14px;
+    display: none;
+  }
+
+  .like-icon {
+    svg {
+      margin-bottom: auto !important;
+    }
+    &.active {
+      color: $color-like;
+      background-color: transparent;
+    }
+    &.most-likes {
+      color: $color-like;
+      background-color: transparent;
+    }
+  }
+  .dislike-icon {
+    &.active {
+      color: $color-dislike;
+      background-color: transparent;
+    }
+    &.most-dislikes {
+      color: $color-dislike;
+      background-color: transparent;
+    }
+  }
+  .pencil-icon {
+    &.active {
+      path {
+        fill: $color-white !important;
+      }
+      opacity: 0.7;
+      background-color: transparent;
+    }
+  }
+
+  .plus-icon {
+    width: 26px;
+    height: 26px;
+    display: grid;
+    place-items: center;
+    position: relative;
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    path {
+      fill: $color-icon-base;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background-color: $color-rect-positive;
+      path {
+        fill: $color-icon-base-hover;
+      }
+    }
+  }
+
+  .count {
+    font-weight: 800;
+    font-size: 11px;
+    width: 14px;
+    height: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $color-review-icon-dark;
+  }
+
+  .most-likes {
+    .like-icon {
+      color: green !important;
+    }
+  }
+
+  .most-dislikes {
+    .dislike-icon {
+      color: red !important;
+    }
+  }
+}
+
+p {
+  font-weight: 800;
+}
+
+.date-group {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-left: 6px;
+  line-height: 18px;
+  svg-icon {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+  }
+}
+.circle {
+  width: 18px;
+  height: 18px;
+  border-radius: 60px;
+  background-color: $color-icon-black;
+  color: white;
+  padding: 4px 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.disabled {
+  pointer-events: none !important;
+  svg {
+    path {
+      fill: $color-review-hover !important;
+    }
+  }
+}
+
+.main-window {
+  .ilustration {
+    width: 100% !important;
+    object-fit: contain;
+    object-position: center;
+    svg-icon {
+      width: 100% !important;
+      svg {
+        width: 100% !important;
+        height: 100% !important;
+      }
+    }
+  }
+}
+
+.reviews-window {
+  height: 100% !important;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.button-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    font-size: 14px;
+    font-weight: 700;
+    padding: 6px;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+
+  .delete-close {
+    display: flex;
+    gap: 12px;
+    .delete {
+      color: $color-negative;
+      width: 100px;
+    }
+    .close {
+      width: 150px;
+    }
+  }
+
+  .save-btn {
+    background-color: $color-blue;
+    color: white;
+    min-width: 150px;
+  }
+}
+
+
+.empty-state {
+  cursor: none;
+  pointer-events: none;
+  svg-icon {
+    path {
+      fill: $color-icon;
+    }
+  }
+  span {
+    color: $color-icon;
+  }
+}
+
+.bottom-divider-light {
+  width: 100%;
+  margin-top: 6px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid $color-divider;
+}