ol-ext/control/Isochrone.css

A set of cool extensions for OpenLayers (ol) in node modules structure

.ol-control.ol-routing.ol-isochrone .ol-method-time,
.ol-control.ol-routing.ol-isochrone .ol-method-distance,
.ol-control.ol-routing.ol-isochrone > button {
  position: relative;
}
.ol-control.ol-routing.ol-isochrone .ol-method-time:before,
.ol-control.ol-routing.ol-isochrone > button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: .1em solid currentColor;
  width: .8em;
  height: .8em;
  border-radius: 50%;
  box-shadow: 0 -0.5em 0 -0.35em, 0.4em -0.35em 0 -0.35em;
  clip: unset;
}
.ol-control.ol-routing.ol-isochrone .ol-method-time:after,
.ol-control.ol-routing.ol-isochrone > button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg);
  border-radius: 50%;
  border: .3em solid transparent;
  border-right-color: currentColor;
  box-shadow: none;
  box-sizing: border-box;
  clip: unset;
}

.ol-control.ol-routing.ol-isochrone .ol-method-distance:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  width: 1em;
  height: .5em;
  border: .1em solid currentColor;
  box-sizing: border-box
}
.ol-control.ol-routing.ol-isochrone .ol-method-distance:after {
  content: '';
  position: absolute;
  width: .1em;
  height: .15em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  box-shadow: inset 0 -0.15em, 0 0.1em, 0.25em 0.1em, -0.25em 0.1em;
}

.ol-control.ol-routing.ol-isochrone .ol-direction-direct:before,
.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: .3em;
  height: .3em;
  border-radius: 50%;
  border: .1em solid currentColor;
  box-sizing: border-box;
  box-shadow: 0.25em 0 0 -0.05em;
}
.ol-control.ol-routing.ol-isochrone .ol-direction-direct:after,
.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  border: .4em solid transparent;
  border-width: .4em 0 .4em .4em;
  border-color: transparent currentColor;
}
.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:after {
  border-width: .4em .4em .4em 0;
}

.ol-control.ol-isochrone.ol-collapsed .content {
  display: none;
}
.ol-control.ol-isochrone input[type="number"] {
  width: 3em;
  text-align: right;
  margin: 0 .1em;
}
.ol-control.ol-isochrone .ol-distance input[type="number"] {
  width: 5em;
}

.ol-isochrone .ol-time,
.ol-isochrone .ol-distance {
  display: none;
}
.ol-isochrone .ol-time.selected,
.ol-isochrone .ol-distance.selected {
  display: block;
}