carriera-intern 0.0.0 → 1.1.76

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

@@ -1,564 +0,0 @@
-@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;
-}