geopicker.scss

$geo-main-breakpoint: $main-breakpoint;
$map-height: 325px;
$map-width: 65%;
$input-width: 27%;
$separator-width: 4%;
$input-button-border: 2px solid #aaaaaa;

.esri-geopoint-marker {
    $size: 24px;

    @extend .icon-marker;

    @extend .icon;

    margin-top: -#{$size};
    margin-left: -(0.5 * $size);
    width: $size;
    height: $size;
    font-size: $size;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: rgb(80, 142, 205);
}

.esri-geopicker {
    margin-top: 25px;
    padding-bottom: 15px;
    border-bottom: 1px $gray-light dashed;

    .center-mark {
        position: absolute;
        left: 50%;
        top: 50%;
    }

    input.esri-search__input[type=text] {
        width: 100%;
        box-shadow: none;
    }

    .geo-inputs {
        position: relative;
        margin: 25px $separator-width 10px 0;
        width: 100%;

        @include display-flex;

        @include flex-wrap(wrap);

        justify-content: space-between;

        /*
        .disabled-msg {
            display: none;
            color: $state-danger-text;
        }
        */
        &.mgrs-input-mode {
            .geo.mgrs {
                display: block;
            }

            .geo {
                &.lat, &.long {
                    display: none;
                }
            }
        }

        &.dms-input-mode {
            .geo.lat-dms, .geo.long-dms {
                display: flex;
            }

            .geo {
                &.lat, &.long {
                    display: none;
                }
            }
        }

        &.utm-input-mode {
            .geo.zone-utm, .geo.hemisphere-utm, .geo.easting-utm, .geo.northing-utm {
                display: block;
            }

            .geo {
                &.lat, &.long {
                    display: none;
                }
            }
        }

        &.alt-hide {
            .alt {
                display: none;

                //visibility: hidden;
           
            }

            .acc-empty {
                // allow to stretch to full width
                max-width: none;
                flex: 70%;
            }
        }
    }

    .toggle-map-visibility-btn, .toggle-input-visibility-btn {
        position: absolute;
        margin-top: 8px;
        left: calc(50% - 15px);
        background: none;
        border-top: 3px solid #aaaaaa;
        border-left: $input-button-border;
        border-right: $input-button-border;
        border-bottom: none;
        height: 7px;
        width: 30px;
        padding: 0;
        z-index: 10;
    }

    .toggle-input-visibility-btn {
        margin-top: 0;
        margin-bottom: 8px;
    }

    &.hide-input {
        .geo-inputs {
            justify-content: flex-end;

            label:not(.acc-empty) {
                display: none;
            }

            .acc-empty {
                flex-direction: row-reverse;
                margin-top: 0;

                .geo-label, [name="acc"][type="number"] {
                    display: none;
                }
            }
        }

        .toggle-input-visibility-btn {
            border-bottom: 3px solid #aaaaaa;
            border-top: none;
        }
    }

    .map-canvas-wrapper {
        @include clearfix;

        position: relative;
        width: $map-width;
        padding-left: $separator-width;
        border-left: solid 1px $groupline;
        width: 100%;
        height: $map-height;
        padding-left: 0;
        border-left: none;

        &.hide-map {
            height: auto;

            .map-canvas {
                display: none;
            }

            .center-mark {
                display: none;
            }

            .toggle-map-visibility-btn {
                border-bottom: 3px solid #aaaaaa;
                border-top: none;
            }

            + .geo-inputs {
                .btn[name="geodetect"] {
                    display: block;
                }
            }
        }
    }

    .btn[name=geodetect] {
        float: right;
        display: none;
        margin: 0 0 0 15px;
        line-height: 0.9em;
    }

    .btn-icon-only[name=empty] {
        width: 30px;
        margin: 0 0 1px 0;
    }

    .geo-selector {
        @include display-flex;

        flex: 100%;
        justify-content: flex-end;

        select[name="geo-input-type"] {
            max-width: 250px;
            margin: 0;
        }
    }

    @media screen and (max-width: 450px) {
        label.geo.acc-empty {
            flex: 100%;
            max-width: none;
        }
    }

    label.geo {
        @include font-normal;

        @include flex(50%);

        max-width: 47%;
        display: block;
        border: none;
        padding: 0;
        margin: 15px 0 0 0;

        // truncate label when it doesn't fit
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        // --- end truncate

        &.acc-empty {
            @include display-flex;

            @include flex-direction(row);

            @include flex-wrap(nowrap);

            > .geo-label {
                flex: none;
            }

            > * {
                align-self: flex-end;
            }
        }

        &.mgrs {
            flex: 100%;
            max-width: none;
            display: none;

            input {
                max-width: 47%;
                min-width: 165px;
            }
        }

        &.lat-dms, &.long-dms {
            @include flex-wrap(wrap);

            justify-content: space-between;
            display: none;
            min-width: 45%;
        }

        &.zone-utm {
            display: none;
            min-width: 60px;
            flex: 10%;
            padding-right: 10px;
        }

        &.hemisphere-utm {
            display: none;
            min-width: 80px;
            padding-right: 10px;
            flex: 20%;
        }

        &.easting-utm {
            padding-right: 10px;
            min-width: 125px;
        }

        &.northing-utm {
            min-width: 115px;
        }

        &.easting-utm, &.northing-utm {
            display: none;
            flex: 30%;
        }

        .geo-label {
            flex: 100%;

            ~ span {
                position: relative;
                margin-right: 5px;
            }

            + span,
            + span + span {
                flex: 22%;
            }

            + span + span + span {
                flex: 30%;
            }
        }

        [name=alt] {
            margin-bottom: 0;
        }

        [name=acc][type=number][readonly] {
            @include input-as-text;

            padding: 0 5px 1px 5px;
            flex: 1;

            // for some reason, this requires a width
            width: 30px;
        }

        [name=lat-deg], [name=long-deg] {
            min-width: 64px;

            ::after {
                display: block;
                position: absolute;
                content: "°";
            }
        }

        [name=lat-min], [name=long-min] {
            min-width: 54px;
        }

        [name=lat-deg], [name=lat-min], [name=long-deg], [name=long-min] {
            //flex: 22%;
            width: 100%;
        }

        [name=lat-sec], [name=long-sec] {
            //flex: 30%;
            //margin-right: 10px;
            width: 100%;
            min-width: 84px;
        }

        [name=lat-hem], [name=long-hem] {
            //flex: 20%;
            max-width: 40px;
        }

        [name=hemisphere-utm] {
            width: 100%;
        }

        .geo-unit {
            position: absolute;
            top: 10px;
            right: 4px;
        }
    }

    input[name=lat], input[name=long], input[name=mgrs], input[name=zone-utm], input[name=easting-utm], input[name=northing-utm], input[name=alt], input[name=acc] {
        float: none;

        @include border-box;

        width: 100%;
    }

    .interaction-blocker {
        display: none;
        width: 100%;
        height: 100%;
        z-index: 10;
        position: absolute;
        opacity: 0.4;
        background: grey;
    }

    .map-canvas {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 3px;
        height: 100%;

        //$map-height;
        cursor: crosshair;

        img {
            max-width: none;
        }
    }

    &.readonly, &.no-scroll {
        .map-canvas-wrapper:not(.hide-map) {
            .interaction-blocker {
                display: block;
            }
        }
    }

    // This is a hack. It would be nicer to use ESRI's JS API to disable interaction
    // once that is available in v4.x. 
    // https://geonet.esri.com/thread/177744?q=disable%20navigation
    &.no-scroll:not(.readonly) {
        // hacking esri
        .esri-ui-top-left {
            z-index: 11;
        }
    }
}

// correct readonly input display in notes
.readonly .esri-geopicker input[readonly]:not([type=radio]):not([type=checkbox]) {
    display: block;
}

// touch corrections for search field on map
.touch .map-canvas input[type=text] {
    border: inherit;
    margin: inherit;
}

// RTL support
.or[dir=rtl] .esri-geopicker {
    .btn[name=geodetect] {
        float: left;
        margin: 0 15px 0 0;
    }

    .geo-inputs {
        //position: relative;
        margin-right: 0;
        margin-left: $separator-width;
    }

    .geo-unit {
        right: auto;
        left: 4px;
    }

    .geo-label {
        ~ span {
            margin-left: 5px;
            margin-right: 0;
        }
    }

    .esri-ui-top-left {
        align-items: flex-end;
    }
}