react-admin-panel-orient/src/assets/styles/_posts.scss

.posts {
  &__pagination {
    width: 100%;
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: flex-end;

    input {
      border-radius: 0.5rem;
      border: none !important;
      width: 5%;
      text-align: center;
      font-weight: bold;
    }

    button {
      @include transition-std;
      cursor: pointer;
      color: $base-gray;
      font-size: 1.6rem;
      width: 15%;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      background: $base-blue;

      &:hover {
        @include transition-std;
        background: $hover-blue;
      }
    }
  }
  &__select {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;

    label {
      display: flex;

      gap: 0.8rem;
      font-size: 1.4rem;
    }

    input {
      background: $light-black;
      color: $base-gray;
      font-size: 1.6rem;
      padding: 1rem 1.2rem;
      border-radius: 0.2rem;
      cursor: default;
      border-radius: 0.5rem;
    }

    &__wrapper {
      display: flex;
      gap: 1rem;
    }
  }
  select {
    padding: 1rem 1.2rem;
    color: $base-gray;
    background: $light-black;
    border-radius: 0.5rem;
  }

  &.inner {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  &__table {
    &.disabled {
      pointer-events: none;
    }

    &__head {
      min-height: unset !important;
      background: $light-black;
    }

    th {
      padding: 0.3rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      cursor: pointer;
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 1.6rem;
      justify-self: center;
      background: transparent;
      @include transition-std;
      span {
        width: 100%;
        color: $base-gray;
        @include transition-std;
      }

      &.active {
        background: $light-blue;

        @include transition-std;
        span {
          color: $base-black;
          @include transition-std;
        }
      }
    }

    .post-link {
      background: $base-black;
      &:nth-child(2n) {
        background: $light-blue;
        td {
          color: $light-black;

          svg {
            fill: $base-black;
          }
        }
      }
    }

    tr {
      min-height: 7rem;
      padding: 1rem;
      display: grid;
      grid-template-columns: 1fr 2.5fr 2fr 2fr 2fr 1.5fr 3fr;
      gap: 1rem;
    }

    td {
      color: $base-gray;
      text-align: center;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      justify-self: center;
      font-size: 1.2rem;
      align-self: center;

      a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      svg {
        width: 2rem;
        height: 2rem;
      }
    }

    tbody {
      min-height: 20rem;
      position: relative;
      // max-height: 70vh;
      // overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
  }
}

.post {
  padding-bottom: 4rem;
  &.inner {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  h1 {
    font-size: 2.4rem;
  }

  &__head {
    svg {
      width: 5rem;
      height: 5rem;
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 3rem;

    &__btn {
      display: flex;
      align-items: center;
      gap: 1rem;

      border-radius: 0.2rem;
      cursor: pointer;
      width: 100%;
      padding: 1rem 1.2rem;
      color: $base-gray;
      font-size: 1.6rem;
      background-color: $base-blue;

      @include transition-std;
      &:hover {
        @include transition-std;
        background-color: $hover-blue;
      }
    }

    input {
      font-size: 1.6rem;
      padding: 0.6rem 1.2rem;
      border-radius: 0.5rem;
      cursor: default;
      background: $light-black;
    }

    textarea {
      background: $light-black;
      cursor: default;
      padding: 0.6rem 1.2rem;
      resize: none;
      font-size: 1.6rem;
      border-radius: 0.5rem;
    }

    &__block {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;

      h4 {
        font-size: 1.6rem;
      }
    }

    &__table {
      thead {
        tr {
          min-height: unset !important;
          background: $light-black;
        }
      }

      th {
        cursor: pointer;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 1.6rem;
        justify-self: center;
        background: transparent;
        @include transition-std;
      }

      tr {
        background: $base-black;
        &:nth-child(2n) {
          background: $light-blue;
          td {
            color: $light-black;

            svg {
              fill: $base-black;
            }
          }
        }
      }

      tr {
        min-height: 7rem;
        padding: 1rem;
        display: grid;
        grid-template-columns: 1fr repeat(4, 2fr);
        gap: 1rem;
      }

      td {
        color: $base-gray;
        text-align: center;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        justify-self: center;
        font-size: 1.2rem;
        align-self: center;

        a {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        svg {
          width: 2rem;
          height: 2rem;
        }
      }

      tbody {
        min-height: 20rem;
        position: relative;
        display: flex;
        flex-direction: column;
      }
    }
  }
}

.table {
  &__empty {
    font-size: 1.6rem;

    text-align: center;
  }
}