JS-Tech/resj

View on GitHub
app/assets/stylesheets/pages/cards/wizards/edit.scss

Summary

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

.container-cards-wizards-edit {
  max-width: $content-width;
  padding: 0 $content-padding;
  margin: auto;

  // For the location container we can't use `display: none` because the map
  // needs to know the width. This is why we use the height+overflow
  // combination.
  .step:not(.current, .location) {
    display: none;
  }

  .step.current:not(.location) {
    display: block;
  }

  .step.location {
    overflow: hidden;
  }

  .step.location:not(.current) {
    height: 0;
  }

  div.map-location {
    p.label {
      padding: 10px 0 0px 0;
    }

    p.hint {
      font-weight: normal;
      font-size: 12px;
      padding: 0 0 3px 0;
      color: #999999;
    }

    details {
      font-size: 12px;
      color: #999999;

      input {
        color: #999999;
        padding: 3px;
      }
    }

    #mapbox {
      width: 100%;
      height: 300px;
    }
  }

  .timeline {
    font-size: 12px;
    padding: 30px 0 0 0;

    button {
      text-decoration: none;
      background: none;
      border: none;
      color: rgb(34, 34, 34);
      cursor: pointer;

      &:not(:first-of-type) {
        padding-left: 10px;

        &:before {
          content: ">";
          padding-right: 10px;
        }
      }

      &.current {
        font-weight: bold;
      }
    }
  }

  div.buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 50px 0 0 0;

    button {
      margin: 5px;

      &:not(.current) {
        display: none;
      }
    }
  }

  @media only screen and (max-width: $mobile-width) {
    padding: 0;

    form {
      padding-top: 0px !important;
      padding-bottom: 40px !important;
    }

    div.intro {
      padding-bottom: 40px !important;
    }

    div.buttons {
      flex-direction: column;
    }

    .timeline {
      display: none;
    }
  }
}