@vidro/map-handler 1.1.4 → 1.1.16

package/examples/integration/tool/css/master/_menu-toc.scss

@@ -1,135 +0,0 @@
-// main: style.scss
-
-.menu-toc{
-    line-height: 0;
-    font-size: 0;
-
-    > .sidebar{
-        display: flex;
-        flex-direction: column;
-        background-color: #e9e9e9;
-        padding: 0;
-        width: 270px;
-        max-width: 540px;
-        min-width: 150px;
-        box-sizing: border-box;
-        font-size: 16px;
-        line-height: 1.4em;
-        position: absolute;
-        top: $header-height-mobile;
-        bottom: 0;
-        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index:0;
-        
-        @include only-desktop{
-            top: $header-height-desktop;
-        }
-        
-        @media(max-width: 600px){
-            max-width: calc(100% - 60px);
-        }
-
-        &.closed{ transform: translateX(-100%); }
-        &.open{
-            transform: translateX(0);
-            box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.5);
-        }
-        
-        // Regular list
-        > ul:nth-child(1){
-            overflow-y: scroll;
-            flex-grow: 1;
-        }
-        
-        // Bottom list
-        > ul:nth-child(2){
-            > li{
-                border-top: 1px solid #FFF;
-                border-bottom: none;
-            }
-        }
-
-        > ul{
-            list-style: none;
-            margin: 0;
-            padding: 0;
-
-            > li{
-                margin: 0;
-                padding: 0;
-                border-bottom: 1px solid #FFFFFF;
-
-                > a{
-                    display: flex;
-                    flex-wrap: nowrap;
-                    align-items: center;
-                    transition: color, background-color .2s;
-                    text-transform: uppercase;
-                    font-size: 13px;
-                    font-weight: bold;
-                    color: $color-menu-text;
-                    background-color: #dadad9;
-
-                    .col-1,
-                    .col-3{
-                        flex-grow: 0;
-                        flex-shrink: 1;
-                    }
-                    .col-2{
-                        flex-grow: 1;
-                        flex-shrink: 0;
-                        flex-basis: 0;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
-
-                    &.active{
-                        background-color: $color-menu-item-active;
-                    }
-
-                    &.active{
-                        svg.chevron{
-                            transform: rotate(90deg);
-                            // margin: 10px 0 0 0;
-                        }
-                    }
-
-                    svg{
-                        display: inline-block;
-                        fill: $color-menu-text;
-                        padding: 5px 7px;
-                        vertical-align: middle;
-                        transition: transform, fill .4s cubic-bezier(0.5, 0, 0.19, 1.84);
-                        box-sizing: initial;
-                        
-                        &.ico{
-                            width: 19px;
-                            height: 19px;
-                            padding: 8px 8px;
-                        }
-
-                        &.chevron{
-                            margin: 0 0 0 0;
-                        }
-                    }
-                }
-
-                > div.content{
-                    display: none;
-                    padding: 20px;
-                    background-color: #f5f5f5;
-                    font-size: 13px;
-
-                    &.zero-padding{
-                        padding: 0;
-                    }
-                }
-            }
-        }
-
-        .ui-resizable-e{
-            right: 0;
-        }
-    }
-}

package/examples/integration/tool/css/master/_menu-tools.scss

@@ -1,187 +0,0 @@
-// main: style.scss
-
-.menu-tools{
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0px;
-    font-size: 0;
-    line-height: 0;
-    overflow: hidden;
-    padding-left: 10px;
-    pointer-events: none;
-
-    @media (min-width: 700px){
-        display: none;
-    }
-
-    a.menu-toggle{
-        display: inline-block;
-        padding: 15px;
-        background-color: $color-accent;
-        position: relative;
-        width: 60px;
-        height: 60px;
-        box-sizing: border-box;
-        z-index: 2;
-        pointer-events: auto;
-
-        > svg{
-            position: absolute;
-            display: block;
-            fill: white;
-            width: 30px;
-            height: 30px;
-        }
-
-        // &:hover{
-        //     svg{
-        //         fill: $color-accent;
-        //     }
-        // }
-
-        .hamburger, .times{
-            transform: translateX(0);
-            transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-            transition-property: transform, opacity, fill;
-        }
-
-        &.closed .times{ opacity: 0; transform: translateX(25px); }
-        &.open .hamburger{ opacity: 0; transform: translateX(-25px);}
-
-    }
-
-    ul{
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-        background-color: $color-menu-tools-mobile-background;
-        pointer-events: auto;
-        overflow-y: scroll;
-        position: absolute;
-        top: 60px;
-        bottom: 0;
-        z-index: 999;
-        
-        &::-webkit-scrollbar-thumb {
-            background: $color-menu-tools-mobile-scrollbar;
-        }
-
-        &.closed{
-            transform: translateX(80px);
-        }
-        &.open{
-            transform: translateX(0);
-            box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.5);
-        }
-
-        > li{
-            margin: 0;
-            padding: 0;
-
-            &:not(:last-child){
-                border-bottom: 1px solid rgba(0, 0, 0, .2);
-            }
-            &:not(:first-child){
-                border-top: 1px solid rgba(255, 255, 255, .2);
-            }
-
-            > button{
-                background: none;
-                border: none;
-                padding: 10px;
-                cursor: pointer;
-
-                svg{
-                    width: 37px;
-                }
-
-                svg path{
-                    fill: white;
-                }
-
-                &:focus{
-                    box-shadow: none;
-                    outline: none;
-                }
-
-                &:disabled{
-                    cursor: not-allowed;
-                    svg path{
-                        fill: fade-out(white, .8);
-                    }
-                }
-
-                &:hover:not(:disabled),
-                &.tool-selected:not(:disabled){
-                    background-color: $color-menu-tools-mobile-background;
-                    svg path{
-                        fill: white;
-                    }
-                }
-            }
-        }
-    }
-
-    // @media (max-width: 600px){
-    //     bottom: 230px;
-    // }
-
-    //
-    // @media (max-width: 600px){
-    //
-    //     * { box-shadow: 0 0 0 1px red; }
-    //
-    //     left: 0;
-    //     bottom: auto;
-    //     text-align: right;
-    //
-    //     ul{
-    //         * { box-shadow: 0 0 0 1px green; }
-    //         background-color: $color-menu-bg;
-    //
-    //         &.closed{ transform: translateX(100%); }
-    //         &.open{ transform: translateX(0); }
-    //
-    //         > li{
-    //             display: inline-block;
-    //             > a,
-    //             > button{
-    //                 background: none;
-    //             }
-    //         }
-    //     }
-    // }
-}
-
-// @media (min-width: 1281px){
-//
-//     .menu-tools a.menu-toggle{
-//         width: 45px;
-//         height: 45px;
-//         padding: 10px;
-//         overflow: hidden;
-//         svg{
-//             width: 25px;
-//             height: 25px;
-//         }
-//     }
-//
-//     .menu-tools ul{
-//         &.closed{ transform: translateX(45px); }
-//         &.open{ transform: translateX(0); }
-//     }
-//     .menu-tools ul li a,
-//     .menu-tools ul li button{
-//         padding: 12.5px;
-//         background-color: $color-menu-bg;
-//
-//         > svg{
-//             display: block;
-//             fill: white;
-//             width: 20px;
-//             height: 20px;
-//         }
-//     }
-// }

package/examples/integration/tool/css/master/_mixins.scss

@@ -1,42 +0,0 @@
-// main: style.scss
-
-$min-width-desktop: 700px;
-$max-width-tablet: 699px;
-$min-width-tablet: 501px;
-$max-width-mobile: 500px;
-
-@mixin only-desktop {
-    @media (min-width: $min-width-desktop){
-        @content;
-    }
-}
-
-@mixin only-tablet {
-    @media (min-width: $min-width-tablet) and (max-width: $max-width-tablet){
-        @content;
-    }
-}
-
-@mixin only-mobile {
-    @media (max-width: $max-width-mobile){
-        @content;
-    }
-}
-
-@mixin only-desktop-and-tablet {
-    @media (min-width: $min-width-tablet){
-        @content;
-    }
-}
-
-@mixin only-mobile-and-tablet {
-    @media (max-width: $max-width-tablet){
-        @content;
-    }
-}
-
-@mixin ellipsize{
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

package/examples/integration/tool/css/master/_notifyjs.scss

@@ -1,39 +0,0 @@
-// main: style.scss
-
-.notifyjs-corner{
-    padding: 0 60px;
-    top: 60px !important;
-    left: 50% !important;
-    transform: translateX(-50%);
-}
-
-.notifyjs-bootstrap-base {
-    font-weight: bold;
-    border: none !important;
-    padding-left: 0 !important;
-    text-shadow: none !important;
-    color: #FFFFFF !important;
-    padding: 10px 25px !important;
-    background-image: none !important;
-    text-align: center !important;
-
-    &.notifyjs-bootstrap-error {
-        // color: #84002f !important;
-        background-color: #ef1d67 !important;
-    }
-
-    &.notifyjs-bootstrap-warning{
-        // color: #a07800 !important;
-        background-color: #ffc000 !important;
-    }
-
-    &.notifyjs-bootstrap-success{
-        // color: #019554 !important;
-        background-color: #1cf395 !important;
-    }
-
-    &.notifyjs-bootstrap-info{
-        // color: #017a8c !important;
-        background-color: #0cd5f3 !important;
-    }
-}

package/examples/integration/tool/css/master/_ol-map-controls.scss

@@ -1,117 +0,0 @@
-// main: style.scss
-
-.ol-attribution.ol-logo-only {
-    bottom: 15px !important;
-    left: 15px !important;
-    width: 22px !important;
-    height: 22px !important;
-}
-
-.map-control-button{
-    display: inline-block !important;
-    display: none !important;
-    width: 40px !important;
-    height: 40px !important;
-    border-radius: 60px !important;
-    background-color: white !important;
-    margin: 10px 10px 10px 0 !important;
-    padding: 2px 6px 7px 6px !important;
-    box-sizing: border-box !important;
-    border-radius: 99px !important;
-    text-align: center !important;
-    font-size: 30px !important;
-    cursor: pointer;
-    color: black !important;
-    &:hover,
-    &:active,
-    &:focus{
-        background-color: white;
-        outline: none;
-    }
-}
-
-.ol-zoom{
-    right: 15px;
-    bottom: 15px;
-    top: inherit !important;
-    left: inherit !important;
-    background: none !important;
-    transition: all .2s;
-
-    .ol-zoom-out,
-    .ol-zoom-in{
-        @extend .map-control-button;
-    }
-}
-
-.ol-zoom-extent{
-    right: 155px;
-    bottom: 15px;
-    top: inherit !important;
-    left: inherit !important;
-    background: none !important;
-
-    button{
-        @extend .map-control-button;
-    }
-}
-
-// @media (max-width: 600px){
-//     .map-control-button{
-//         display: block !important;
-//     }
-//     .ol-zoom{
-//         right: 0px;
-//         bottom: 0px;
-//     }
-//     .ol-zoom-extent{
-//         right: 0px;
-//         bottom: 140px;
-//     }
-// }
-
-@media (min-width: 1281px){
-    .map-control-button{
-        width: 40px !important;
-        height: 40px !important;
-        border-radius: 50px !important;
-        margin: 5px 5px 5px 0 !important;
-        padding: 5px 6px 7px 6px !important;
-        font-size: 20px !important;
-    }
-    .ol-zoom-extent{
-        right: 105px;
-    }
-}
-.ol-scale-coordinates{
-  position: absolute;
-  width: auto;
-  bottom: 10px;
-  right: 5px;
-}
-.scale-line {
-
-}
-.ol-scale-line {
-  position: relative;
-  bottom: 0px;
-  right: 5px;
-  width: fit-content;
-  align: -webkit-center;
-}
-.ol-mouse-position{
-  position: relative;
-  bottom: 0px;
-  left: 0px;
-  height: 18px;
-  color: white;
-  text-align: center;
-  font-size: 12px;
-  background-color: rgba(0,60,136,.3);
-}
-.coordinates {
-  width: 150px;
-  right: 140px;
-  bottom: 36px;
-  position: relative;
-}