af83/chouette-core

//----------------------//
//  Routes Stop Points  //
//----------------------//

#stop_points {
  .nested-head > .wrapper > div:first-child {
    padding-left: 20px;
  }
  .nested-fields {
    height: 100%;
    > .wrapper {
      height: 100%;
      > div:first-child {
        position: relative;
        padding-left: 25px;
        overflow: hidden;

        // IE FIX
        span {
          position: relative;

          &:before {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border: 2px solid $darkgrey;
            border-radius: 50%;
            position: absolute;
            z-index: 5;
            left: -20px;
            top: 50%;
            margin-top: -5px;
            box-sizing: border-box;
          }
          &:after {
            content: '';
            display: block;
            width: 4px;
            margin: 0 3px;
            background-color: rgba($grey, 0.5);
            position: absolute;
            z-index: 3;
            top: -100px;
            left: -20px;
            bottom: -100px;
          }
        }
      }
      + .map_container {
        > .map_metas {
          position: relative;
          padding-left: 30px;

          &:before {
            content: '';
            display: block;
            width: 4px;
            margin: 0 3px;
            background-color: rgba($grey, 0.5);
            position: absolute;
            z-index: 3;
            top: 0;
            bottom: 0;
            left: 10px;
          }
        }
      }
    }
    &:last-child > .wrapper:last-child > div:first-child {
      span:after {
        bottom: 5px;
      }
    }
  }
  .nested-fields:first-child > .wrapper > div:first-child,
  .nested-head + .nested-fields > .wrapper > div:first-child {
    span:after {
      top: 5px;
    }
  }
  .nested-head + .nested-fields > .wrapper > div:first-child,
  .nested-fields:last-child > .wrapper:last-child > div:first-child {
    span:before {
      content: '•';
      color: $darkgrey;
      text-align: center;
      font-size: 28px;
      letter-spacing: 0;
      text-indent: -0.01em;
      line-height: 12px;
      width: 15px;
      height: 15px;
      left: -23px;
      top: 50%;
      margin-top: -8px;
    }
  }
}