digitransit-ui/app/component/departure.scss

@function drop_off_svg($color, $alpha: 0.9999999) {
  @return 'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2713%27%20height%3D%2712%27%3E%3Cg%20stroke%3D%27none%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20fill%3D%27#{rgba($color, $alpha)}%27%20d%3D%27M6.06%2C0%20C9.38%2C0%2012.08%2C2.68%2012.08%2C6.02%20C12.08%2C9.34%209.38%2C12.02%206.06%2C12.02%20C2.74%2C12.02%200.04%2C9.34%200.04%2C6.02%20C0.04%2C2.68%202.74%2C0%206.06%2C0%20Z%20M7.2%2C9.2%20L7.2%2C5.94%20C7.2%2C5.3%206.78%2C4.8%206.14%2C4.8%20L5.04%2C4.8%20C4.5%2C4.8%204.18%2C5.16%204.18%2C5.62%20C4.18%2C6.02%204.44%2C6.44%205.28%2C6.44%20L5.28%2C9.2%20C5.28%2C9.84%205.62%2C10.34%206.24%2C10.34%20C6.88%2C10.34%207.2%2C9.84%207.2%2C9.2%20Z%20M7.36%2C2.78%20L7.36%2C2.68%20C7.36%2C2%206.8%2C1.56%206.06%2C1.56%20C5.32%2C1.56%204.76%2C2%204.76%2C2.68%20L4.76%2C2.78%20C4.76%2C3.46%205.32%2C3.92%206.06%2C3.92%20C6.8%2C3.92%207.36%2C3.46%207.36%2C2.78%20Z%27%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E';
}

@function last_stop_svg($color, $alpha: 0.9999999) {
  @return 'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2719%27%20height%3D%2719%27%3E%3Cline%20x1%3D%272%27%20y1%3D%2710%27%20x2%3D%2710%27%20y2%3D%2710%27%20stroke%3D%27#{rgba($color, $alpha)}%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20stroke-width%3D%272.5%27%20stroke%3D%27#{rgba($color, $alpha)}%27%20fill%3D%27white%27%20cx%3D%2711%27%20cy%3D%2710%27%20r%3D%274%27%2F%3E%3C%2Fsvg%3E';
}

.departure {
  // parent class for time, vehicle-number, destination
  background: $white;
  display: flex;
  justify-content: flex-start;
  margin: 0;
  overflow-y: visible;
  position: relative;
  white-space: nowrap;

  .vehicle-number {
    width: 2.5em;
  }

  & .route-number {
    width: 3em;
  }

  .route-destination {
    flex: 1;
    padding-left: 0.5em;
  }

  .departure-canceled {
    color: $cancelation-red;

    .icon-container {
      padding-right: $padding-xsmall;

      .icon {
        color: white;
        fill: $cancelation-red;
      }
    }
  }
}

.route-detail-text {
  color: $black;

  @include font-narrow-book;

  font-size: $font-size-normal;
  padding-right: 1em;

  .vehicle-number {
    mask-image: none;
  }
}

.time,
.vehicle-number,
.destination,
.bicycle-rental-station,
.city-bike-station-name,
.city-bike-station-availability {
  display: inline-block;
}

.time {
  @include font-narrow-medium;

  width: 3.25em;
  padding-right: 0.25em;
  margin-right: 0.25em;
  text-align: right;
}

.vehicle-number {
  @include font-narrow-medium;

  padding: 0 5px;
  vertical-align: top;
  overflow: hidden;
  mask-image: linear-gradient(
    to left,
    transparent,
    rgba(0, 0, 0, 0.2) 5px,
    black 7px,
    black
  );
}

.departure > div,
.departure > span {
  vertical-align: middle;
}

.desktop .route-destination {
  width: calc(100% - 12.5em);
}

.route-destination {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 1.2em;

  .last-stop-icon {
    vertical-align: middle;
    display: inline-block;
    width: 19px;
    height: 22px;

    &::after {
      vertical-align: middle;
    }

    &.bus {
      background: url(last_stop_svg($bus-color));
    }

    &.tram {
      background: url(last_stop_svg($tram-color));
    }

    &.rail {
      background: url(last_stop_svg($rail-color));
    }

    &.subway {
      background: url(last_stop_svg($metro-color));
    }

    &.ferry {
      background: url(last_stop_svg($ferry-color));
    }

    &.citybike {
      background: url(last_stop_svg($citybike-color));
    }
  }

  .drop-off-stop-icon {
    margin-right: 0.5em;
    display: inline-block;
    width: 13px;
    height: 12px;
    background: url(drop_off_svg($gray));
  }
}

.popup .route-destination:last-child {
  width: calc(100% - 7.5em);
}

.popup .route-destination {
  width: calc(100% - 9.5em);
}

.distance {
  display: inline-block;
}

.platform-short {
  @include font-narrow-book;

  width: 3em;
  color: $gray;
  font-size: $font-size-small;
  text-align: right;
}

.platform-number {
  @include font-narrow-book;

  margin-left: 0.5em;
  color: $gray;
  font-size: $font-size-small;
  text-align: right;
}

.platform-code {
  background: $background-color-lighter;
  color: #333;
  width: 28px;
  height: 24px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: $font-weight-medium;
  text-align: center;
  margin-left: 13px;

  &.empty {
    background: none;
  }
}

// route-number component
.route-number {
  vertical-align: top;
  position: relative;
  display: flex;
  min-width: 64px;

  &.vertical {
    max-width: 100%;

    .vehicle-number {
      max-width: 100%;
    }

    .empty {
      &.return-citybike {
        height: 13px;
      }

      &.scooter {
        height: 10px;
      }
    }
  }
}

.icon.realtime-icon {
  position: relative;
  top: -0.7em;
  left: 0.1em;
  height: 0.5em;
  width: 0.5em;
}

.card .canceled .time {
  margin-top: inherit;
  margin-bottom: inherit;
  padding-top: inherit;
  padding-bottom: inherit;
}

.stop-page .departure {
  .time {
    width: 50px;
  }
}

.desktop .stop-page .departure {
  .time {
    margin-right: 30px;
  }

  & .route-number {
    width: 100px;
  }
}

.capacity-information-modal {
  .capacity-info-row {
    display: flex;
    height: 20px;
    margin-top: 8px;

    h4 {
      text-transform: none;
      margin-top: 0;
      padding-top: 0;
      padding-left: 20px;
      font-size: 15px;
    }
  }

  .capacity-info-explanation {
    margin: 0;
    margin-left: 36px;
    font-size: 13px;
  }

  .explanations-heading {
    font-size: 15px;
  }

  .capacity-heading {
    margin-bottom: 5px;
  }

  .capacity-text {
    margin-top: 0;
  }
}

.departure-row:focus-within {
  outline: 2px auto #333 !important;
}

.departure-row {
  @include font-narrow-book;

  font-size: $id-font-size;
  font-weight: $id-font-weight;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;

  td {
    position: relative;

    a {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 1;
    }

    a:focus {
      outline: none;
    }

    .platform-code {
      display: flex;
      justify-content: center;
    }
  }

  .capacity-cell {
    width: 25px;

    .capacity-icon-container {
      padding-left: 7px;
      margin-top: 15px;
      cursor: pointer;

      svg {
        margin-top: 4px;
      }
    }
  }

  .headsign {
    color: #333;
  }

  .route-arrival {
    color: #333;

    @include font-medium;

    font-size: 0.75rem;
    padding-right: 8px;
    position: relative;
    top: -1px;

    &.realtime {
      color: $realtime-color;
    }

    &.canceled {
      color: $cancelation-red;
    }
  }

  .route-number-container {
    background-color: currentcolor;
    position: relative;
    border-radius: 3px;

    a {
      justify-content: center;
    }

    .route-number {
      justify-content: center;
      align-items: center;
      display: flex;
      height: 100%;
      line-height: 1;
      color: $white;
      min-width: unset;
      white-space: nowrap;
      overflow: hidden;

      .icon-container {
        position: unset;
      }
    }

    .icon-container {
      position: absolute;
      left: -3px;
      bottom: -5px;

      .icon-circle {
        stroke-width: 12;
        stroke: white;
      }

      .icon {
        width: 1em;
        height: 1em;
        display: block;
        overflow: visible;

        &.circle {
          width: 0.75em;
          height: 0.75em;
        }
      }
    }
  }
}