JS-Tech/resj

View on GitHub
app/assets/stylesheets/pages/cards/show.scss

Summary

Maintainability
Test Coverage
@import "../../global/variables";

.container-cards-show {
  &.disabled {
    background: image-url("cards/disabled-card-bg-2.png");
    background-size: 15px;
  }

  .std-top {
    background-image: image-url("cards/fond-groupe.jpg");
  }

  .std-container {
    p.outdated {
      font-weight: bold;
      color: #ff5e5e;
      padding: 0 0 20px 0;
    }

    p.website {
      color: $color-red;
      padding: 50px 0 0 0;

      a {
        background-color: $color-red;
        color: #fff;
        padding: 7px 35px;
        margin: 0 0 0 10px;
        text-decoration: none;
      }
    }

    h2.contact {
      /* displayed on mobile */
      display: none;
      text-transform: uppercase;
      color: $color-red;
      padding: 30px 0 5px 0;
    }

    div.redbox {
      background-color: $color-red;
      color: #fff;
      padding: 18px 28px;
      margin: 60px 0 0 0;

      h3 {
        font-size: 1em;
        padding: 0 0 7px 0;

        &:not(:first-of-type) {
          padding: 20px 0 7px 0;
        }
      }

      p {
        padding: 0 0 5px 0;
      }
    }

    p.last-updated {
      font-size: 10px;
      padding: 20px 0 0 0;
      color: #bbb;
    }

    & > div:nth-child(2) {
      flex: 2;
      color: $color-red;

      h2 {
        text-transform: uppercase;
        color: $color-red;
      }

      div.map-holder {
        position: relative;
        padding: 40px 0;

        div#mapbox {
          width: 100%;
          height: 400px;
        }
      }

      h2.location {
        padding: 40px 0 20px 0;
      }

      .location-info {
        padding: 0 0 50px 0;
      }
    }
  }

  @media only screen and (max-width: $mobile-width) {
    .std-container {
      & > div:nth-child(1) {
        p.website {
          display: flex;
          flex-direction: column;
          margin: 0;

          span {
            text-transform: uppercase;
            font-size: 34px;
          }

          a {
            margin: 20px 0px 10px 0;
            text-align: center;
            padding: 20px;
          }
        }

        h2.contact {
          display: block;
        }

        div.redbox {
          margin: 10px 0 0 0;
        }
      }

      & > div:nth-child(2) {
        & > h2 {
          padding: 0 $mobile-padding 10px $mobile-padding;
        }

        div.map-holder {
          padding: 10px 0 40px 0;
        }

        .location-info {
          padding: 0 $mobile-padding 50px $mobile-padding;
        }
      }
    }
  }
}