digitransit-ui/app/component/util.scss

/*
  TOGGLE BUTTON
*/
$btn-highlight-opacity: 0.9;
$btn-inactive-background-color: $dark-gray;
$btn-bus-active-background-color: $bus-color;
$btn-tram-active-background-color: $tram-color;
$btn-rail-active-background-color: $rail-color;
$btn-subway-active-background-color: $metro-color;
$btn-ferry-active-background-color: $ferry-color;
$btn-air-active-background-color: $airplane-color;
$btn-citybike-active-background-color: $citybike-color;
$btn-radio-checked-background-color: $white;
$btn-icon-color-inactive: $medium-gray;
$btn-icon-color-active: $white;
$btn-icon-color-checked: $black;
$btn-width: 17px;
$btn-heigth: 17px;

.btn {
  background-color: $btn-inactive-background-color;
  text-align: center;
  display: inline-block;
  cursor: pointer;

  &:hover {
    opacity: $btn-highlight-opacity;
  }

  &.bus {
    background-color: $btn-bus-active-background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: $btn-bus-active-background-color;
    }
  }

  &.tram {
    background-color: $btn-tram-active-background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: $btn-tram-active-background-color;
    }
  }

  &.rail {
    background-color: $btn-rail-active-background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: $btn-rail-active-background-color;
    }
  }

  &.subway {
    background-color: $btn-subway-active-background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: $btn-subway-active-background-color;
    }
  }

  &.ferry {
    background-color: $btn-ferry-active-background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: $btn-ferry-active-background-color;
    }
  }

  &.airplane {
    background-color: $btn-air-active-background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: $btn-air-active-background-color;
    }
  }

  &.citybike {
    background-color: $btn-citybike-active-background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: $btn-citybike-active-background-color;
    }
  }

  &.walk,
  &.bicycle,
  &.car,
  &.car_park,
  &.public_transport {
    background-color: $btn-radio-checked-background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: $btn-radio-checked-background-color;
    }

    .icon {
      color: $btn-icon-color-checked;
    }
  }

  &.bus,
  &.tram,
  &.rail,
  &.subway,
  &.ferry,
  &.airplane,
  &.citybike {
    .icon {
      color: $btn-icon-color-active;
    }
  }

  .icon-holder {
    padding-top: 9pt;
    padding-bottom: 5pt;
  }

  .icon {
    color: $btn-icon-color-inactive;
  }
}

.btn-bar {
  display: flex;
  flex-direction: row;

  .btn {
    flex: 1;
    border-radius: 0;
    border-right: 1px solid $offcanvas-background;
    padding: 0;

    &:first-child {
      border-top-left-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }

    &:last-child {
      border-top-right-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }

  [class*='column'] + [class*='column']:last-child {
    border-right: none;
  }
}

.standalone-btn {
  background-color: $standalone-btn-color;
  padding: $padding-small $padding-medium;
  border-radius: 20px;

  .icon-holder {
    padding: 0;
    margin: 0;
    margin-bottom: -4px;
  }

  &:hover {
    background-color: $standalone-btn-hover-color;
  }
}

.secondary-button {
  border-radius: 4px;
  background-color: #fff;
  border: solid 1px #b7b7b7;
  font-family: $button-font-family;
  font-weight: $font-narrow-weight-medium;
  text-align: center;
  color: $link-button-color;
  font-size: $font-size-normal;
  padding: 0.92em $padding-large;
  display: flex;
  align-items: center;
  flex-direction: row;

  &:hover,
  &:focus,
  &:active {
    color: $link-color;
    background-color: #fff;
    border: solid 1px $link-color;
  }

  .icon {
    margin-right: 4px;
    width: 1.1em;
  }

  &.small {
    height: 28px;
    padding: 5px 15px;
  }

  @media print {
    display: none;
  }
}

.mobile {
  .secondary-button {
    font-size: $font-size-small;
    padding: 0.85em 1em;
  }

  .popup-container {
    min-width: 80%;
  }
}

.first-btn {
  border-top-left-radius: $border-radius;
  border-bottom-left-radius: $border-radius;
}

.last-btn {
  border-top-right-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
}

.popup-dark-overlay {
  background-color: rgba(0, 0, 0, 0.23);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1008;
  top: 0;
  left: 0;
}

.popup-container {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 437px;
  min-width: 320px;
  background-color: #fff;
  padding: 1em;
  border-radius: 4pt;
  transform: translate(-50%, -50%);

  .close-popup {
    button {
      background: none;
      padding: 0;
      margin: 0;
    }

    .icon.close {
      width: 1.4em;
      height: 1.4em;
      color: rgb(0, 122, 201);
    }
  }

  &.no-bike-allowed-popup {
    .popup-icon,
    .popup-text {
      text-align: center;
    }

    .popup-icon {
      margin-bottom: 1em;
    }

    .popup-text {
      margin-bottom: 1.5em;
      font-size: $font-size-large;
      user-select: none;
    }

    .close-popup {
      display: flex;
      flex-direction: row-reverse;
    }

    .icon {
      &.caution {
        width: 3.5em;
        height: 3.5em;
        fill: rgb(220, 4, 81);
        color: #fff;
      }
    }
  }
}

.mode-filter {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  height: 53px;
  text-align: center;
  align-items: flex-start;

  .btn {
    height: 45px;
  }
}

select {
  appearance: none;
}

.split-bars {
  display: flex;
  align-items: stretch;

  .split-bar {
    display: flex;
    align-items: center;
    flex-grow: 1;
  }
}

.split-bar--bar {
  border-left: 1px solid #ddd;
  margin-left: 0.7em;
  width: 0.7em;
}

.canceled {
  color: $cancelation-red;
  background: linear-gradient(
    to bottom,
    transparent calc(50% - 1px),
    $cancelation-red calc(50% - 1px),
    $cancelation-red calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}