digitransit-ui/app/component/util.scss

/*
  SLIDER
*/
$slider-gray: #575757;

.slider-container {
  padding: 10px 0 7px;

  h4 {
    margin: 0;
  }

  .sub-header-h5 {
    line-height: 0.75;
  }
}

/* This sets the actual clickable area. In webkit even the thumb cannot be
   clicked unless the cursor is in the input element. */
.slider {
  // no height because it hides range on windows mobile  height: 21px;
  background: none;
  cursor: pointer;
}

input[type='range'].slider:focus {
  outline: none;
}

/* Track is the line where the circle moves */
$track-box-shadow:
  0.9px 0.9px 1px #000,
  0 0 0.9px #0d0d0d;
$track-border: 2px solid $slider-gray;

/* Mixins work, but straight nested definitions don't */
@mixin track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #000;
  border-radius: 3px;
  border: $track-border;
}

/* Thumb is the circle on the track */
@mixin thumb {
  box-shadow:
    0 1.3px 0.2px #000,
    0 0 1px #c1c1c1;
  border: 3px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 15px;
  background: $slider-gray;
  box-sizing: border-box; /* Default in webkit, not in Gecko */
  cursor: ew-resize;
}

input[type='range'].slider {
  appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  margin: 3px 0 1em;

  &::-webkit-slider-runnable-track {
    @include track;
  }

  &:focus::-webkit-slider-runnable-track {
    background: #0d0d0d;
  }

  &::-moz-range-track {
    @include track;

    height: 3px;
  }

  &::-ms-track {
    @include track;

    background: transparent; /* Hides the slider so custom styles can be added */
    border-color: transparent;
    color: transparent;
    border-width: 10px;
  }

  &::-ms-fill-lower {
    background: #000;
    border: $track-border;
    border-radius: 6px;
  }

  &::-ms-fill-upper {
    background: #000;
    border: $track-border;
    border-radius: 6px;
  }

  &:focus::-ms-fill-lower {
    background: #000;
  }

  &:focus::-ms-fill-upper {
    background: #0d0d0d;
  }

  &::-webkit-slider-thumb {
    @include thumb;

    appearance: none;

    /* You need to specify a margin in Chrome,
       but in Firefox and IE it is automatic */
    margin-top: -10.5px;
  }

  &::-moz-range-thumb {
    @include thumb;
  }

  /* Prevent Firefox from drawing an ugly dotted line over the thumb */
  &::-moz-focus-outer {
    border: 0;
  }

  &::-ms-thumb {
    @include thumb;

    height: 24px;
  }
}

$thumb-color-pink: $favourite-color;

.slider-container.active,
.slider-container.modified {
  input[type='range'].slider::-webkit-slider-thumb {
    background-color: $thumb-color-pink !important;
  }

  input[type='range'].slider::-moz-range-thumb {
    background-color: $thumb-color-pink !important;
  }

  input[type='range'].slider::-ms-thumb {
    background-color: $thumb-color-pink !important;
  }
}

/*
  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-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)
  );
}