Tubeline navigation prototype for Modelling and Services

index.html.erb

<div class="tubeline tubeline-line" data-module="toggle">
  <a href="#" data-controls="primary-nav"
              data-expanded="true"
              class="tubeline-heading">
              Learning to drive a car
  </a>
  <div class="" id="primary-nav"><span class="arrow"></span>
    <ol class="tubeline-list">
      <li>
        <a href="#">Check you're allowed to drive</a>
      </li>
      <li>
        <a href="#">Get a provisional driving licence</a>
      </li>
      <li>
        <a href="#">Driving lessons and practice</a>
      </li>
      <li class="highlighted">
        <a href="#">Prepare for your theory test</a>
      </li>
      <li>
        <a href="#">Book and manage your theory test</a>
      </li>
      <li>
        <a href="#">Book and manage your driving test</a>
      </li>
      <li>
        <a href="#">When you pass</a>
      </li>
    </ol>
  </div>
</div>

<div class="tubeline" data-module="toggle">
  <a href="#" data-controls="secondary-nav"
              data-expanded="false"
              class="tubeline-heading">
              Learning to drive a motorbike or moped
  </a>
  <div class="js-hidden" id="secondary-nav"><span class="arrow"></span>
    <ol class="tubeline-list">
      <li>
        <a href="#">Check you're allowed to drive</a>
      </li>
      <li class="highlighted">
        <a href="#">Get a provisional driving licence</a>
        <a href="#">Let's see how badly this breaks</a>
      </li>
      <li>
        <a href="#">Driving lessons and practice</a>
      </li>
    </ol>
  </div>
</div>

tubeline.scss

/* tubeline navigation */
.tubeline {
  $tubeline-dark-blue: #002d94;

  margin-bottom: 1px;

  .tubeline-heading {
    display: block;
    padding: $gutter / 4 $gutter / 2;
    background: $tubeline-dark-blue;
    color: $white;
  }

  .tubeline-list {
    padding: $gutter / 2 0;
    margin-left: $gutter;

    li {
      position: relative;
      padding: $gutter / 8 $gutter / 2;
      list-style: decimal;
    }

    a {
      display: block;

      & + a {
        margin-top: 0.5em;
      }
    }

    .highlighted {
      z-index: 1;
      background: $grey-3;
      font-weight: bold;

      &:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: -$gutter;
        width: $gutter;
        height: 100%;
        background: $grey-3;
      }
    }
  }

  &.tubeline-line {
    $dotsize: 0.5em;

    .tubeline-list {
      position: relative;
      margin: 0;

      li {
        position: relative;
        padding: $gutter / 8 0;
        padding-left: $gutter;
        list-style: none;

        &:before {
          content: "";
          position: absolute;
          z-index: 3;
          width: $dotsize;
          height: $dotsize;
          top: $dotsize;
          left: $gutter / 2;
          margin-left: -$dotsize / 2;
          background: $black;
          border-radius: 100%;
        }

        &:after {
          content: "";
          position: absolute;
          z-index: 2;
          width: 1px;
          height: 100%;
          top: $dotsize;
          left: $gutter / 2;
          margin-left: -1px;
          background: $grey-2;
        }

        &:last-child {
          &:after {
            display: none;
          }
        }

        a {
          float: none;
          width: auto;
        }
      }
    }
  }
}