@stratusjs/idx/src/property/list.component.less

AngularJS idx/property Service and Components bundle to be used as an add on to StratusJS

/*
Nothing should be outside 'stratus-idx-property-list' or it will leak into other modules
Additionally 'stratus-idx-property-list .property-list-default' ensures still CSS only affects the default template and not others
z-index can cause a bleeding effect on popups (z-index 100 equates to the top most item for angular, use the lowest number possible and work up)
TODO Need to size this based on column and window
FIXME we CANNOT rely of media queries, it needs to know the sizing of the element or else widgets may never get properly sized. (if used as modular widgets)
*/
@tablet: ~"(max-width: 959px)";
@phone: ~"(max-width: 600px)";
@desktop-only: ~"(min-width: 600px)";
stratus-idx-property-list .property-list-default {
  .no-results {
    padding: 200px 40px 0;
    font-size: 24px;
    text-align: center;
    background: url('../src/property/images/no-results.png') no-repeat center 80px;
    background-size: 80px;
  }

  /* Generic dotted underline */
  .dotted-spaced-underline {
    background-image: linear-gradient(to right, #333 25%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
  }

  /* Generic Arrows */
  i {
    &.arrow {
      display: inline-block;
      border: solid black;
      border-width: 0 3px 3px 0;
      padding: 3px;
      margin: 1px;
      &.small {
        border-width: 0 2px 2px 0;
        padding: 2px;
      }
      &.large {
        border-width: 0 4px 4px 0;
        padding: 4px;
      }
      &.grey {
        border-color: #aaa;
      }
      &.right {
        transform: rotate(-45deg);
      }
      &.left {
        transform: rotate(135deg);
      }
      &.up {
        transform: rotate(-135deg);
      }
      &.down {
        transform: rotate(45deg);
      }
    }
  }

  /* Sort Options Button */
  .sort-options-container {
    margin: 10px 0 0;
    float: right;
    .options-button,
    .options-button a {
      font-size: 13px;
      font-weight: normal;
      font-style: italic;
      text-transform: none;
      color: #444;
    }
  }

  /* Filters */
  .search-full {
    border: 1px solid #ddd;
  }
  .search-mini {
    max-width: 50%;
  }

  /* Structure */
  .three-per-row {
    .property-container {
      width: 33.333%;

      @media (max-width: 999px) {
        width: 50%;
        padding-left: 0;
        padding-right: 0;
      }

      @media (max-width: 600px) {
        width: 100%;
      }
      &:nth-child(2n),
      &:nth-child(2n) + .property-container {
        clear: unset;
      }
      &:nth-child(3n) {
        clear: right;
      }
      &:nth-child(3n) + .property-container {
        clear: left;
      }

      @media (max-width: 999px) {
        &:nth-child(3n),
        &:nth-child(3n) + .property-container {
          clear: unset;
        }
        &:nth-child(2n) {
          clear: right;
        }
        &:nth-child(2n) + .property-container {
          clear: left;
        }
      }

      @media (max-width: 600px) {
        &:nth-child(2n),
        &:nth-child(2n) + .property-container {
          clear: unset;
        }
      }
    }
  }
  .four-per-row {
    .property-container {
      width: 25%;

      @media (max-width: 959px) {
        width: 50%;
        padding-left: 0;
        padding-right: 0;
      }

      @media (max-width: 600px) {
        width: 100%;
      }
      &:nth-child(2n),
      &:nth-child(2n) + .property-container {
        clear: unset;
      }
      &:nth-child(4n) {
        clear: right;
      }
      &:nth-child(4n) + .property-container {
        clear: left;
      }

      @media (max-width: 959px) {
        &:nth-child(4n),
        &:nth-child(4n) + .property-container {
          clear: unset;
        }
        &:nth-child(2n) {
          clear: right;
        }
        &:nth-child(2n) + .property-container {
          clear: left;
        }
      }

      @media (max-width: 600px) {
        &:nth-child(2n),
        &:nth-child(2n) + .property-container {
          clear: unset;
        }
      }
    }
  }
  .five-per-row {
    .property-container {
      width: 20%;

      @media (max-width: 959px) {
        width: 50%;
        padding-left: 0;
        padding-right: 0;
      }

      @media (max-width: 600px) {
        width: 100%;
      }
      &:nth-child(2n),
      &:nth-child(2n) + .property-container {
        clear: unset;
      }
      &:nth-child(5n) {
        clear: right;
      }
      &:nth-child(5n) + .property-container {
        clear: left;
      }

      @media (max-width: 959px) {
        &:nth-child(5n),
        &:nth-child(5n) + .property-container {
          clear: unset;
        }
        &:nth-child(2n) {
          clear: right;
        }
        &:nth-child(2n) + .property-container {
          clear: left;
        }
      }

      @media (max-width: 600px) {
        &:nth-child(2n),
        &:nth-child(2n) + .property-container {
          clear: unset;
        }
      }
    }
  }

  /* Property */
  .property-container {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 16px;
    text-align: center;
    float: left;
    width: 100%;

    @media @desktop-only {
      width: 50%;
      &:nth-child(2n) {
        clear: right;
      }
      &:nth-child(2n) + .property-container {
        clear: left;
      }
    }
    md-card {
      &.property-item {
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, .15);
        transition: background-color linear 1000ms;

        /* IDX Image */
        .property-image {
          position: relative;
          background: #000;
          .btn {
            transform: translate(-50%, -50%) scale(0.5);
            -webkit-transform: translate(-50%, -50%) scale(0.5);
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            opacity: 0;
            padding: 6px 8px;
            color: #fff;
            background: none;
            border: 1px solid #fff;
            &:hover {
              transform: translate(-50%, -50%) scale(1);
              -webkit-transform: translate(-50%, -50%) scale(1);
              color: #222;
              background: #fff;
            }
          }
          .image-wrapper {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }
          img {
            width: 100%;
          }
          a {
            &,
            * {
              transition: all 0.2s ease-out;
              -webkit-transition: all 0.2s ease-out;
            }

            display: block;
            position: relative;
          }
          &:hover a {
            .image-wrapper {
              opacity: 0.7;
            }
            .btn {
              transform: translate(-50%, -50%) scale(1);
              -webkit-transform: translate(-50%, -50%) scale(1);
              opacity: 1;
            }
          }
          .property-status {
            z-index: 1;
            position: absolute;
            right: 10px;
            top: 10px;
            display: table;
            margin: 0 auto;
            padding: 2px 4px 2px 5px;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1.4;
            text-shadow: 0 0 3px rgba(0, 0, 0, .2);
            background-color: rgba(0, 0, 0, .6);
            color: #fff;
          }
        }
        .property-content {
          padding: 40px;
          .status-price-container .property-price {
            float: right;
            font-size: 14px;
            font-weight: normal;
            color: #333;
            text-align: right;
          }

          /* Property Address */
          .property-address {
            margin: 0 0 24px;
            padding: 0 0 24px;
            h4 {
              margin: 0;
              min-width: 160px;
              font-size: 14px;
              text-transform: uppercase;
              color: #222;
              letter-spacing: 1px;
              .city {
                margin-top: 10px;
                font-size: 10px;
                letter-spacing: 1px;
                display: block;
              }
            }
            a {
              font-weight: bold;
              color: #222;
              &:hover {
                color: #666;
              }
            }
          }
          .property-data {
            padding: 0;
            font-size: 13px;
            line-height: 2;
            .property-type > span {
              /* \0a is for '&nbsp', which is need if this the template is minified and spans spaces are removed */
              &::after {
                display: inline;
                content: '\0a|\0a';
                padding: 0 2px;
              }
              &:last-child::after {
                content: '';
              }
            }
          }

          /* MLS service + number */
          .mls-service-name {
            font-size: 11px;
            text-align: center;
            margin-top: 10px;
            color: #666;
            img {
              display: inline-block;
              width: unset;
              max-height: 15px;
            }
          }
        }
        &.highlight {
          background-color: rgba(0, 0, 0, .12);
        }
      }
    }
  }

  /* Property List */
  .list-container {
    margin: 10px -8px 0;

    /* Details button */

    .property-button-container {
      .button {
        margin: 0 auto;
      }
    }
  }

  /* List Pager */
  .pager-container {
    margin: 20px 0;
    font-size: 13px;
    .pager-section {
      float: right;
      .pager-count {
        float: left;
        font-weight: bold;
        color: #222;
        padding-top: 10px;
        .pager-totals {
          font-style: italic;
          font-weight: normal;
          text-transform: none;
          color: #666;
          padding-right: 10px;
        }
      }
      .pager-button {
        margin: 0 5px 0 0;
        min-width: 0;
        float: left;
        background: none;
        border: 1px solid rgba(0, 0, 0, .2);
        padding: 14px;
        outline: none;
        line-height: 8px;
        > .arrow {
          border-color: #222;
        }
        svg g {
          fill: #222;
        }
        svg g {
          fill: #222;
        }
        &:hover {
          color: #fff;
          background-color: #222;
          border-color: #222;
          > .arrow {
            border-color: #fff;
          }
          svg g {
            fill: #fff;
          }
        }
        &.disabled {
          &,
          &:hover {
            background: none;
            border: 1px solid rgba(0, 0, 0, .1);
          }
          > .arrow,
          > .arrow:hover {
            border-color: #ddd;
          }
        }
      }
      .page-input {
        margin: 0;
        float: left;
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
        input[type=number] {
          -moz-appearance: textfield;
          max-width: 40px;
        }
      }
      .search-more-filters {
        padding: 7px;
        font-size: 11px;
        color: #222;
        &:hover {
          color: #fff;
          background: #222;
          svg g {
            fill: #fff;
          }
        }
      }
    }
  }

  /* Disclaimer - Only affects this List's disclaimer */
  stratus-idx-disclaimer .disclaimer-outer-container {
    margin-top: 20px;
    padding-top: 20px;
    text-transform: none;
    letter-spacing: normal;
  }
}

/* TODO move to separate less file */
/* Dialog box */
.stratus-idx-property-list-dialog {
  transform: none;
  -webkit-transform: none;
  max-width: 95%;
  max-height: 95%;

  /* Keep Close Button floating at top right */
  .popup-close-button-container {
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    position: fixed;
    z-index: 2;
    top: 2%;
    right: 2%;
    padding: 6px;
    background: transparent;
    border-radius: 50%;
    &:hover {
      background: #fff;
    }
    .close-button {
      transition: all 0.2s ease-out;
      width: 30px;
      height: 30px;
      background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z'/%3E%3C/svg%3E ");
      background-repeat: no-repeat;
      background-position: center;
      border: 1px solid #000;
      border-radius: 25px;
      &:hover {
        opacity: 0.8;
      }
    }
  }
}

/* md-dialog-backdrop css removed as this is Sitetheory specific and was already moved to SitetheoryPropertyBundle-PropertyFilter */