ol-ext/src/control/Routing.css

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

.ol-control.ol-routing {
  top: 0.5em;
  left: 3em;
  max-height: 90%;
  overflow-y: auto;
}
.ol-touch .ol-control.ol-routing {
  left: 3.5em;
}
.ol-control.ol-routing.ol-searching {
  opacity: .5;
}

.ol-control.ol-routing .ol-car,
.ol-control.ol-routing > button {
  position: relative;
}
.ol-control.ol-routing .ol-car:after,
.ol-control.ol-routing > button:after {
  content: "";
  position: absolute;
  width: .78em;
  height: 0.6em;
  border-radius: 40% 50% 0 0 / 50% 70% 0 0;
  box-shadow: inset 0 0 0 0.065em, -0.35em 0.14em 0 -0.09em, inset 0 -0.37em, inset -0.14em 0.005em;
  clip: rect(0 1em .5em -1em);
  top: .35em;
  left: .4em;
}
.ol-control.ol-routing .ol-car:before,
.ol-control.ol-routing > button:before {
  content: "";
  position: absolute;
  width: .28em;
  height: .28em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1em, 0.65em 0;
  top: 0.73em;
  left: .20em;
}
.ol-control.ol-routing .ol-pedestrian:after {
  content: "";
  position: absolute;
  width: .3em;
  height: .4em;
  top: .25em;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0.3em 0, 0.1em 0.5em 0 -0.1em, -0.1em 0.5em 0 -0.1em, 0.25em 0.1em 0 -0.1em, -0.25em 0.1em 0 -0.1em;
  border-top: .2em solid transparent;
}
.ol-control.ol-routing .ol-pedestrian:before {
  content: "";
  position: absolute;
  width: .3em;
  height: .3em;
  top: .1em;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: currentColor;
}

.ol-control.ol-routing .content {
  margin: .5em;
}

.ol-control.ol-routing.ol-collapsed .content {
  display: none;
}

.ol-routing .ol-search.ol-collapsed ul {
	display: none;
}
.ol-routing .ol-search ul .copy {
  display: none;
}
.ol-routing .ol-search ul.history {
  /* display: none; */
}
.ol-routing .content .search-input > div > * {
  display: inline-block;
  vertical-align: top;
}
.ol-routing .ol-result ul {
  list-style: none;
  display: block;
}
.ol-routing .ol-result li {
  position: relative;
  min-height: 1.65em;
}
.ol-routing .ol-result li i {
  display: block;
  font-size: .8em;
  font-weight: bold;
}

.ol-routing .ol-result li:before {
  content: "";
  border: 5px solid transparent;
  position: absolute;
  left: -1.75em;
  border-bottom-color: #369;
  border-width: .6em .4em .6em;
  transform-origin: 50% 125%;
  box-shadow: 0 0.65em 0 -0.25em #369;
  top: -.8em;
}
.ol-routing .ol-result li:after {
  content: "";
  position: absolute;
  width: 0.25em;
  height: .6em;
  left: -1.5em;
  background: #369;
  top: .6em;
  border-radius: 0.1em;
}
.ol-routing .ol-result li.R:before {
  transform: rotate(90deg);
}
.ol-routing .ol-result li.FR:before {
  transform: rotate(45deg);
}
.ol-routing .ol-result li.L:before {
  transform: rotate(-90deg);
}
.ol-routing .ol-result li.FL:before {
  transform: rotate(-45deg);
}

.ol-routing .content > i {
  vertical-align: middle;
  margin: 0 .3em 0 .1em;
  font-style: normal;
}
.ol-routing .ol-button,
.ol-routing .ol-button:focus,
.ol-routing .ol-pedestrian,
.ol-routing .ol-car {
  font-size: 1.1em;
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  color: rgba(0,60,136,1);
  background-color: transparent;
  margin: 0 .1em;
  opacity: .5;
  vertical-align: middle;
  outline: none;
  cursor: pointer;
}
.ol-routing .ol-constraints {
  display: block;
}

.ol-routing .ol-button:hover,
.ol-routing .ol-button.selected,
.ol-routing i.selected {
  opacity: 1;
  background: transparent;
}
.ol-routing .ol-method {
  display: block;
}


.ol-control.ol-routing {
  background-color: rgba(255,255,255,.25);
}
.ol-control.ol-routing:hover {
  background-color: rgba(255,255,255,.75);
}

.search-input > div > button:before {
  content: '\00b1';
}