job-offers.scss

.job-offers__main {
  @extend %grid-layer;
}

.job-offers__content {
  @extend %grid-layer-main;
  @extend %containerV;
}

.job-offers__newoffer {
  @extend %grid-layer-links;
  @extend %containerV;
}

#job-offers {

  .plus-button {
    @extend .howto;
    background-color: $color-43-100-50;
    color: $color-0-0-100;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    .icon-plus {
      font-size: 20px;
      justify-content: center;
      margin: 0.5rem 0.5rem 0.5rem 0;

    }
  }

  #offers-list {
    @extend %grid-layer;

    >sib-form {
      grid-column-start: start;
      grid-column-end: middle;
      grid-row-start: start;
      grid-row-end: middle;
    }

    >div {
      grid-column-start: start;
      grid-column-end: end;
      grid-row-start: middle;
      grid-row-end: end;

      &:first-of-type {
        margin-top: 5rem;
      }

      >sib-display {
        @include window-style-modal();
        display: block;
        font-size: 1.5rem;
        margin: 1.7rem 0;
        padding: 3.4rem;

        [name='user-thumb'] {
          align-items: center;
          display: flex;
          margin: -0.25em;

          >* {
            margin: 0.25em;
          }

          [name='author.first_name'] {
            color: $color-0-0-29;
            font-weight: 600;
          }

          sib-multiple[name$='groups'] {
            display: flex;

            label {
              display: none;
            }

            >* {
              @extend %user-role;
            }
          }

          hd-user-avatar {
            background-color: $color-0-0-100;
            border-radius: 50%;
            height: 4.25rem;
            overflow: hidden;
            position: relative;
            width: 4.25rem;

            img {
              height: 100%;
              left: 0;
              object-fit: cover;
              position: absolute;
              top: 0;
              width: 100%;
            }
          }
        }

        [name='creationDate'] {
          display: block;
          margin-bottom: 0.7rem;
          margin-top: 2rem;
        }

        [name='title'] {
          @extend h3;
          display: block;
          font-weight: bold;
          line-height: 19px;
        }

        [name='description'] {
          display: block;
          line-height: 1.6;
          margin-bottom: 1.6rem;
        }

        [name='skills'] {
          label {
            display: none;
          }
        }

        [name='send'] {
          color: $color-244-73-62;
          font-size: 1.3rem;
          float: right;

          >sib-link {
            cursor: pointer;
            @include icon('speech');

            &::before {
              font-size: 1.5rem;
              margin-right: 1.2rem;
            }
          }
        }

        [name='status'] {
          float: right;
          display: flex;
          align-items: center;
          margin: -0.25em;

          >* {
            margin: 0.25em;
          }

          strong {
            background-color: $color-244-73-62;
            border: none;
            border-radius: 100em;
            color: $color-0-0-100;
            display: inline-block;
            font-weight: normal;
            padding: 0.85rem 1.7rem;
          }
        }
      }
    }
  }

}