@vidro/map-handler 1.0.7 → 1.0.8

package/examples/integration/tool/css/master/_toc-layouts.scss

@@ -0,0 +1,173 @@
+// main: style.scss
+
+// All levels
+
+.toc-layouts{
+    font-size: 13px;
+    font-weight: bold;
+
+    ul{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li{
+            padding: 0;
+            margin: 0;
+            display: block;
+            
+            @include only-mobile-and-tablet{
+                &:not(:last-child) .title{
+                    border-bottom: 1px solid #e2e2e2;
+                }
+            }
+            
+            .title{
+                overflow: hidden;
+                text-transform: uppercase;
+                display:flex;
+                flex-wrap: nowrap;
+
+                .title-text{
+                    cursor: pointer;
+                    padding: 6px 10px 6px 0;
+                    display: inline-block;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    flex-grow: 1;
+                }
+            }
+
+            &.no-margin{
+                margin: 0;
+            }
+
+            img.chevron,
+            svg.chevron{
+                transition: all .2s cubic-bezier(0, 0, 0.5, 1.5);
+                transform: rotate(-90deg);
+                cursor: pointer;
+                margin: 6px;
+                flex-shrink: 0;
+                
+                path{ fill: $color-menu-text; }
+            }
+
+            &.active{
+                > .title > img.chevron,
+                > .title > svg.chevron{
+                    transform: rotate(0deg);
+                }
+                >ul{
+                    display: block;
+                }
+            }
+
+            &.selected{
+                background-color: #ececec;
+            }
+        }
+        
+        .legend{
+            overflow: hidden;
+
+            .ico-space{
+                vertical-align: middle;
+            }
+            
+            img{
+                display: inline-block;
+                vertical-align: middle;
+                margin: -5px 10px 8px 6px;
+            }
+        }
+    }
+
+}
+
+// First level
+
+.toc-layouts > ul{
+    margin: 0px 0;
+    
+    > li {
+        &:first-child(){
+            margin-top: 0;
+        }
+    }
+}
+
+// Second level
+
+.toc-layouts > ul > li > ul{
+    display: none;
+    color: $color-menu-text-dimmed;
+    
+    > li > .title{
+        padding-left: 29px;
+    }
+    
+    > .legend{
+        padding-left: 19px;
+    }
+
+}
+
+// Third level
+
+.toc-layouts > ul > li > ul > li > ul{
+    display: none;
+    
+    > li >.title{
+        padding-left: 57px;
+    }
+    
+    > .legend{
+        padding-left: 47px;
+    }
+
+}
+
+// Fourth level
+
+.toc-layouts > ul > li > ul > li > ul > li > ul{
+    display: none;
+    
+    > .legend{
+        padding-left: 75px;
+    }
+}
+
+.ico-space{
+    float: left;
+    padding: 9px;
+    
+    svg{
+        width: 16px;
+        height: 16px;
+        display:block;
+        
+        path{
+            fill: $color-menu-text;
+        }
+    }
+}
+
+.watchable{
+    float: left;
+    cursor: pointer;
+
+    svg.eye{ display:none; path{ fill: $color-accent; } }
+    svg.eye-off{ display:block; path { fill: $color-menu-text; } }
+
+    &.watching{
+        svg.eye{ display:block;}
+        svg.eye-off{ display:none;}
+    }
+
+    &.disabled{
+        opacity: .3;
+        cursor: not-allowed;
+    }
+}

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

@@ -0,0 +1,34 @@
+// main: style.scss
+
+.tooltipbase {
+    position: relative;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    color: white;
+    padding: 4px 8px;
+    opacity: 0.7;
+    white-space: nowrap;
+}
+.tooltip-measure {
+    opacity: 1;
+    font-weight: bold;
+    &:before,
+    &:before {
+        border-top: 6px solid rgba(0, 0, 0, 0.5);
+        border-right: 6px solid transparent;
+        border-left: 6px solid transparent;
+        content: "";
+        position: absolute;
+        bottom: -6px;
+        margin-left: -7px;
+        left: 50%;
+    }
+}
+.tooltip-static {
+    background-color: #ffcc33;
+    color: black;
+    border: 1px solid white;
+    &:before {
+        border-top-color: #ffcc33;
+    }
+}

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

@@ -0,0 +1,266 @@
+// compileCompressed: ../dist/home.min.css, sourceMap: true
+
+@charset "utf-8";
+@import "_colors";
+
+
+
+body{
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: white;
+    font-family: 'Open Sans', sans-serif;
+    color: #1c1c1b;
+}
+[v-cloak] { display: none; }
+header{
+    background-color: $color-header-common;
+    margin-bottom: 70px;
+
+    .flex{
+        display: flex;
+
+        .col-1{
+            img{
+                padding: 4px 0;
+            }
+        }
+
+        .col-2{
+            flex-grow: 1;
+            flex-shrink: 1;
+            align-self: center;
+            margin-left: 15px;
+
+            .text-1{
+            	font-size: 17px;
+            	font-weight: bold;
+                line-height: 1;
+                // margin: 0;
+                @media (max-width: 991px){
+                    display: none;
+                }
+            }
+
+            .text-2{
+            	font-size: 14px;
+            	font-weight: bold;
+                line-height: 1;
+                margin: 0;
+                @media (max-width: 991px){
+                    display: none;
+                }
+            }
+        }
+
+        .col-3{
+            text-align: right;
+            position: relative;
+
+            a{
+                display: inline-block;
+                padding: 25px 1em;
+                font-size: 15px;
+                font-weight: bold;
+
+                svg{
+                    vertical-align: middle;
+                    margin: 0 .5em;
+                }
+                svg path{
+                    fill: #1c1c1b;
+                }
+
+                &:hover,
+                &:active{
+                    background-color: #f5f5f5;
+                    color: $color-primary;
+                    svg path{
+                        fill: $color-primary;
+                    }
+                }
+            }
+
+            ul{
+                position: absolute;
+                z-index: 1;
+                background-color: #f5f5f5;
+                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+                width: 100%;
+                text-align: left;
+                display: none;
+
+                a{
+                    width: 100%;
+                    padding: 1em 1.2em;
+                    font-size: 13px;
+                    color: #1c1c1b;
+
+                    &:hover,
+                    &:active{
+                        color: #1c1c1b;
+                        background-color: #dadad9;
+                        svg path{
+                            fill: #1c1c1b;
+                        }
+                    }
+                }
+            }
+
+            &.menu-visible{
+                > a{
+                    background-color: #f5f5f5;
+                    color: $color-primary;
+                    svg path{
+                        fill: $color-primary;
+                    }
+                }
+                > ul{
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
+table{
+
+    width: 100%;
+    border-spacing: 3px;
+    border-collapse: separate;
+
+    td, th{
+        padding: 7px 8px;
+        font-size: 15px;
+
+        svg{
+            vertical-align: middle;
+        }
+    }
+
+    thead{
+        td{
+            font-weight: bold;
+            background-color: #f5f5f5;
+        }
+        th{
+            font-weight: 400;
+            background-color: #dadad9;
+        }
+
+
+    }
+
+    tbody{
+        td{
+            background-color: #f5f5f5;
+            font-weight: 600;
+        }
+    }
+
+}
+
+a{
+    color: inherit;
+    svg path{
+        fill: #1c1c1b;
+    }
+    &.block{
+        display: block;
+    }
+
+    &:hover,
+    &:focus,
+    &:active{
+        color: #005DB4;
+        text-decoration: none;
+
+        svg path{
+            fill: #005DB4;
+        }
+    }
+}
+
+footer{
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    margin: 50px 0;
+
+    .divider{
+        width: 1px;
+        height: 54px;
+        background-color: #434448;
+    }
+
+    .col-1, .col-2, .col-3{
+        margin: 0 15px;
+    }
+
+    .col-1{
+        margin-left: 0;
+    }
+
+    .col-2{
+        text-align: left;
+    }
+
+    .col-3{
+        text-align: left;
+        margin-right: 0;
+    }
+
+    h4{
+        font-size: 17px;
+    	font-weight: bold;
+    	color: #56565c;
+    }
+
+    p{
+        color: #58585e;
+    }
+
+    @media (max-width: 991px){
+        display: block;
+        .divider{
+            display: none;
+        }
+        .col-1, .col-2, .col-3{
+            text-align: center;
+            margin: 0 15px;
+
+            .img-responsive{
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+    }
+
+
+}
+
+.row.equal {
+    display: flex;
+    flex-wrap: wrap;
+ }
+.thumbnail {
+    width: 260px;
+    height: 100%;
+}
+.greenDot{
+  fill: #00cd15;
+}
+.redDot{
+  fill: #950000;
+}
+.rolesCaption{
+  margin: 20px;
+}
+.roleChooser {
+  background-color: #eee;
+  padding-top: 25px;
+}
+.roleChooser img {
+  padding-bottom: 25px;
+}

package/examples/integration/tool/css/master/style-login.scss

@@ -0,0 +1,240 @@
+// compileCompressed: ../dist/style-login.min.css, sourceMap: true
+
+@charset "utf-8";
+@import "_colors";
+body{
+    margin: 0;
+    padding: 0;
+    font-family: 'Open Sans', sans-serif;
+    color: #1c1c1b;
+    background-color: white;
+    letter-spacing: -0.5px;
+    a{
+        color: inherit;
+        text-decoration: none;
+    }
+}
+
+.container{
+    width: 100%;
+    max-width: 700px;
+    padding: 0 15px;
+    margin: 0 auto;
+    box-sizing: border-box;;
+}
+
+.header{
+    background: $color-header-login;
+    padding: 5px 0;
+    margin-bottom: 60px;
+    background-color: $color-header-login;
+    .container{
+        max-width: 500px;
+    }
+
+    img.logo {
+        display: inline-block;
+        margin-right: 5px;
+        vertical-align: middle;
+    }
+
+    div.text{
+        display: inline-block;
+        vertical-align: middle;
+        max-width: 100%;
+        font-weight: bold;
+
+        div{
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100%;
+
+            &.a{ font-size: 17px; }
+            &.b{ font-size: 14px; }
+        }
+
+    }
+    @media (max-width: 620px){
+        text-align: center;
+        img.logo{
+            display: block;
+            margin: 20px auto;
+        }
+        div.text{
+            display: block;
+        }
+    }
+}
+
+.form-title{
+    width: 100%;
+    max-width: 450px;
+    margin: 0 auto 3px auto;
+    background-color: #dadad9;
+    box-sizing: border-box;
+    font-size: 13px;
+    text-transform: uppercase;
+    padding: 6px 10px;
+    font-weight: bold;
+
+    img,
+    span{
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    img{
+        margin: 0 6px 0 7px;
+        width: 23px;
+        height: 24px;
+    }
+
+}
+
+form{
+    font-size: 13px;
+    background-color: #f5f5f5;
+    width: 100%;
+    max-width: 450px;
+    margin: 0 auto;
+    margin-bottom: 100px;
+    padding: 12px 48px 1px 48px;
+    box-sizing: border-box;
+
+    .form-control,
+    .form-group{
+        margin: 8px 0;
+
+        &.form-group-double,
+        &.form-control-double{
+            margin: 2em 0;
+        }
+    }
+    label{
+        display: block;
+        font-size: 13px;
+        font-weight: bold;
+        line-height: 18px;
+        margin-bottom: 5px;
+    }
+    input[type=text],
+    input[type=password],
+    textarea{
+        border: none;
+        background-color: white;
+        border-radius: 3px;
+        padding: 8px 16px;
+        font-size: 14px;
+
+        &:focus,
+        &:active{
+            outline: none !important;
+        }
+
+        &.block{
+            width: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+    button{
+        color: #005cb8;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 13px;
+        vertical-align: middle;
+        font-weight: bold;
+        text-transform: uppercase;
+
+        img{
+            vertical-align: middle;
+            margin-left: .1em;
+            margin-top: -3px;
+            width: 23px;
+            height: 24px;
+        }
+    }
+}
+
+.footer{
+    width: 100%;
+    max-width: 1000px;
+    margin: 25px auto;
+
+    @media (min-width: 850px){
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+    }
+    @media (max-width: 849px){
+        text-align: center;
+    }
+
+    .title{
+        color: #58585e;
+        font-size: 17px;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+
+    .col{
+        padding: 1em;
+        color: #808089;
+        text-align: center;
+        font-size: 14px;
+        letter-spacing: 0;
+
+        &.col-1{
+            // img{ display: block; }
+            flex-basis: 33%;
+        }
+        &.col-2{
+            width: 420px;
+            border-left: 3px solid #6f6f6e;
+            border-right: 3px solid #6f6f6e;
+            flex-shrink: 0;
+
+            @media (max-width: 849px){
+                width: inherit;
+                border: none;
+                box-sizing: border-box;
+            }
+        }
+        &.col-3{
+            flex-basis: 33%;
+        }
+
+    }
+
+    .separator{
+        height: 50px;
+        background-color: #6f6f6e;
+        width: 3px;
+        display: none;
+
+        @media (max-width: 700px){
+            display: none;
+        }
+    }
+
+}
+.login-error{
+  color: red;
+  font-weight: bold;
+  text-align: center;
+}
+#loginError{
+  display: none;
+}
+#networkIndicatorOnline{
+  float: right;
+  display: none;
+}
+#networkIndicatorOffline{
+  float: right;
+  display: none;
+}