lrm-valhalla/css/leaflet.routing.valhalla.css

Support for Valhalla by Mapzen in Leaflet Machine

/*
    Oroginally written by Per Liedman for Leaflet Routing Machine : https://github.com/perliedman/leaflet-routing-machine ,
    Several classes were re-written by Hanbyul Jo for Valhalla plugin for Leaflet Routing Machine : https://github.com/valhalla/lrm-valhalla
*/

html,body{
  width:100%;
  height:100%;
  margin:0;
}
#map{
  width:100%;
  height:100%;
}

.leaflet-routing-container {
    width: 320px;
    background-color: white;
    padding-top: 4px;
    transition: all 0.2s ease;
}

.leaflet-control-container .leaflet-routing-container-hide {
    width: 32px;
    height: 32px;
}

.leaflet-routing-container h2 {
    font-size: 14px;
}

.leaflet-routing-container h3 {
    font-size: 12px;
    font-weight: normal;
}

.leaflet-routing-collapsible .leaflet-routing-geocoders {
    margin-top: 20px;
}

.leaflet-routing-alt, .leaflet-routing-geocoders {
    padding: 6px;
    margin-top: 2px;
    margin-bottom: 6px;
    border-bottom: 1px solid #ccc;
    max-height: 320px;
    overflow-y: auto;
    transition: all 0.2s ease;
}

.leaflet-control-container .leaflet-routing-container-hide .leaflet-routing-alt, 
.leaflet-control-container .leaflet-routing-container-hide .leaflet-routing-geocoders {
    display: none;
}

.leaflet-bar .leaflet-routing-alt:last-child {
    border-bottom: none;
}

.leaflet-routing-alt-minimized {
    color: #888;
    max-height: 64px;
    overflow: hidden;
    cursor: pointer;
}

.leaflet-routing-alt table {
    border-collapse: collapse;
}

.leaflet-routing-alt tr:hover {
    background-color: #eee;
    cursor: pointer;
}

.leaflet-routing-alt::-webkit-scrollbar {
    width: 8px;
}

.leaflet-routing-alt::-webkit-scrollbar-track {
    border-radius: 2px;
    background-color: #eee;
}

.leaflet-routing-alt::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #888;
}

.info::before{
    -webkit-background-size: 54px 18px;
    background-size: 54px 18px;
    background-image:url('modes.icons.svg');
    margin: 0;
    content: '';
    display: inline-block;
    vertical-align: top;
    background-repeat: no-repeat;
    width:18px;
    height:18px;
}

.info.auto::before{ background-position: 1px 0;}
.info.bicycle::before{ background-position: -18px 0;}
.info.pedestrian::before{ background-position: -36px 0;}

.leaflet-routing-icon {
    -webkit-background-size: 576 16px;
    background-size: 576px 16px;
    background-repeat: no-repeat;
    background-image:url('leaflet.routing.icons.png');
    margin: 0;
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 16px;
}

.leaflet-routing-icon-kStart { background-position: 0 0; }
.leaflet-routing-icon-kStartRight { background-position: -18px 0; }
.leaflet-routing-icon-kStartLeft { background-position: -36px 0; }
.leaflet-routing-icon-kDestination { background-position: -54px 0; }
.leaflet-routing-icon-kDestinationRight { background-position: -72px 0; }
.leaflet-routing-icon-kDestinationLeft { background-position: -90px 0; }
.leaflet-routing-icon-kBecomes { background-position: -108px 0; }
.leaflet-routing-icon-kContinue { background-position: -126px 0; }
.leaflet-routing-icon-kSlightRight { background-position: -144px 0; }
.leaflet-routing-icon-kRight { background-position: -162px 0; }
.leaflet-routing-icon-kSharpRight { background-position: -180px 0; }
.leaflet-routing-icon-kUturnRight { background-position: -198px 0; }
.leaflet-routing-icon-kUturnLeft { background-position: -216px 0; }
.leaflet-routing-icon-kSharpLeft { background-position: -234px 0; }
.leaflet-routing-icon-kLeft { background-position: -252px 0; }
.leaflet-routing-icon-kSlightLeft { background-position: -270px 0; }
.leaflet-routing-icon-kRampStraight { background-position: -288px 0; }
.leaflet-routing-icon-kRampRight { background-position: -306px 0; }
.leaflet-routing-icon-kRampLeft { background-position: -324px 0; }
.leaflet-routing-icon-kExitRight { background-position: -342px 0; }
.leaflet-routing-icon-kExitLeft { background-position: -360px 0; }
.leaflet-routing-icon-kStayStraight { background-position: -378px 0; }
.leaflet-routing-icon-kStayRight { background-position: -396px 0; }
.leaflet-routing-icon-kStayLeft { background-position: -414px 0; }
.leaflet-routing-icon-kMerge { background-position: -432px 0; }
.leaflet-routing-icon-kRoundaboutEnter { background-position: -450px 0; }
.leaflet-routing-icon-kRoundaboutExit { background-position: -504px 0; }
.leaflet-routing-icon-kFerryEnter { background-position: -540px 0; }
.leaflet-routing-icon-kFerryExit { background-position: -558px 0; }



.leaflet-routing-geocoders div {
    padding: 4px 0px 4px 0px;
}

.leaflet-routing-geocoders input {
    width: 303px;
    width: calc(100% - 4px);
    line-height: 1.67;
    border: 1px solid #ccc;
}

.leaflet-routing-geocoders button {
    font: bold 18px 'Lucida Console', Monaco, monospace;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    margin: 0;
    margin-right: 3px;
    float: right;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.leaflet-routing-add-waypoint:after {
    content: '+';
}

.leaflet-routing-reverse-waypoints:after {
    font-weight: normal;
    content: '\21c5';
}

.leaflet-routing-geocoders button:hover {
    background-color: #eee;
}

.leaflet-routing-geocoders input,.leaflet-routing-remove-waypoint,.leaflet-routing-geocoder {
    position: relative;
}

.leaflet-routing-geocoder-result {
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    position: absolute;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    z-index: 1000; /* Arbitrary, but try to be above "most" things. */
}

.leaflet-routing-geocoder-result table {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    background-color: white;
    cursor: pointer;
}

.leaflet-routing-geocoder-result-open {
    max-height: 800px;
}

.leaflet-routing-geocoder-selected, .leaflet-routing-geocoder-result tr:hover {
    background-color: #eee;
}

.leaflet-routing-geocoder-no-results {
    font-style: italic;
    color: #888;
}

.leaflet-routing-remove-waypoint {
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.leaflet-routing-remove-waypoint:after {
    position: absolute;
    display: block;
    width: 15px;
    height: 1px;
    z-index: 1;
    right: 1px;
    top: 4px;
    bottom: 0;
    margin: auto;
    padding: 2px;
    font-size: 18px;
    font-weight: bold;
    content: "\00d7";
    text-align: center;
    cursor: pointer;
    color: #ccc;
    background: white;
    padding-bottom: 16px;
    margin-top: -16px;
    padding-right: 4px;
    line-height: 1;
}

.leaflet-routing-remove-waypoint:hover {
    color: black;
}

.leaflet-routing-instruction-distance {
    width: 48px;
}

.leaflet-routing-collapse-btn {
    position: absolute;
    top: 0;
    right: 6px;
    font-size: 24px;
    color: #ccc;
    font-weight: bold;
}

.leaflet-routing-collapse-btn:after {
    content: '\00d7';
}

.leaflet-routing-container-hide .leaflet-routing-collapse-btn {
    position: relative;
    left: 4px;
    top: 4px;
    display: block;
    width: 26px;
    height: 23px;
    background-image: url('routing-icon.png');
}

.leaflet-routing-container-hide .leaflet-routing-collapse-btn:after {
    content: none;
}

.leaflet-top .leaflet-routing-container.leaflet-routing-container-hide {
    margin-top: 10px !important;
}
.leaflet-right .leaflet-routing-container.leaflet-routing-container-hide {
    margin-right: 10px !important;
}
.leaflet-bottom .leaflet-routing-container.leaflet-routing-container-hide {
    margin-bottom: 10px !important;
}
.leaflet-left .leaflet-routing-container.leaflet-routing-container-hide {
    margin-left: 10px !important;
}



@media only screen and (max-width: 640px) {
    .leaflet-routing-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        height: 100%;
    }
}