@vidro/map-handler 1.0.6 → 1.0.9

package/examples/integration/tool/css/master/_bottom-sheet.scss

@@ -0,0 +1,142 @@
+// main: style.scss
+
+.forms-area{
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    left: 0;
+    pointer-events: none;
+}
+
+.bottom-sheet{
+    width: 470px;
+    max-width: 100%;
+    overflow: hidden;
+    font-size: 12px;
+    position: absolute;
+    top: 60px;
+    right: 0;
+    background-color: #f5f5f5;
+    transform: translateX(100%);
+    transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: auto;
+    height: calc(100% - 60px);
+
+    &.visible{
+        transform: translateX(0px);
+        box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.5);
+        
+        &.with-side-tools-open{
+            max-width: calc(100% - 60px);
+            @media (max-width: 700px){
+                transform: translateX(-60px);
+            }
+        }
+    }
+
+    .title{
+        color: $color-text;
+        padding: 5px 17px;
+        font-size: 13px;
+        font-weight: bold;
+        background-color: #dadad9;
+        text-transform: uppercase;
+        border-bottom: 1px solid white;
+
+        span, img{
+            vertical-align: middle;
+        }
+    }
+
+    .padded{
+        padding: 10px 20px;
+
+        &.border-top{
+            border-top: 1px solid $color-accent;
+        }
+    }
+
+    .scrollable_content{
+        max-height: calc(100% - 80px);
+        bottom: 0;
+        overflow-y: scroll;
+        p{
+            margin-top: .5em;
+            margin-bottom: .5em;
+        }
+    }
+
+    .visit-info{
+        background-color: white;
+        padding: 1em 1.5em;
+        border-bottom: 1px solid $color-accent;
+    }
+
+    .feature{
+        overflow: auto;
+        display: flex;
+        margin: 3px 0;
+
+        .fieldname{
+            flex-shrink: 1;
+            flex-grow: 1;
+            overflow: hidden;
+        }
+
+        .actions{
+            flex-shrink: 0;
+            flex-grow: 0;
+            button{
+                margin-right: 0;
+            }
+
+            .update-group{
+                input{
+                    font-size: 12px;
+                    padding: 4px;
+                    border: none;
+                    width: 60px;
+                    margin: 0;
+                    vertical-align: middle;
+                    &:focus{
+                        outline: none;
+                        box-shadow: none;
+                    }
+
+                }
+                button{
+                    margin: 0;
+                    padding: 0;
+                    border-radius: 0;
+                    vertical-align: middle;
+                    img{
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+
+    .note{
+        padding: 1em 1.5em;
+        border-bottom: 1px solid $color-accent;
+    }
+
+    .label{
+        display: block;
+        color: $color-text;
+        font-weight: bold;
+    }
+
+    span.text-dimmed{
+        color: $color-menu-text-dimmed;
+    }
+}
+
+@media (max-width: 600px){
+    .bottom-sheet{
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,35 @@
+// main: style.scss
+$color-header-login: #dadad9;
+$color-header-common: #dadad9;
+$color-primary: #ffffff;
+$color-accent:  #005cb8;
+$color-text: #1c1c1b;
+$color-menu-bg: transparentize($color-primary, 0.2);
+$color-tb-tool-selected: #004c99;
+
+$color-menu-text-dimmed: #888888;
+
+$color-btn-success: #00bfa5;
+$color-btn-danger:  #ff1744;
+$color-btn-default: #8b8b8b;
+$color-btn-default-light: #dadad9;
+$color-btn-accent: $color-accent;
+
+$color-menu-background: #FFFFFF;
+$color-menu-text: $color-text;
+$color-menu-item-active: #dadad9;
+$color-menu-dropdown-background: #f5f5f5;
+$color-menu-item-divider: #e9e9e9;
+/* separator lines between buttons */
+$color-ul-tools-first: #004387;
+$color-ul-tools-last: #5292CE;
+/* end separator lines between buttons */
+
+/* mobile tools background color */
+$color-menu-tools-mobile-background: $color-accent;
+$color-menu-tools-mobile-scrollbar: #003a75;
+/* end mobile tools background color */
+/* map backgound color */
+$map-background-color: white;
+/* attributes table */
+$selectedRowColor: #5292CE;

package/examples/integration/tool/css/master/_dropdown-form.scss

@@ -0,0 +1,167 @@
+//main: style.scss
+
+.drop-down-form{
+    display: flex;
+    flex-direction: column;
+    width: 350px;
+    min-width: 320px;
+    max-width: 100%;
+    overflow: hidden;
+    font-size: 12px;
+    // Needs this !important because of the jQuery UI resize. 
+    position: absolute !important; 
+    left: auto !important;
+    top: $header-height-mobile;
+    right: 0;
+    bottom: 0;
+    max-height: 100%;
+    background-color: #f5f5f5;
+    transform: translateX(calc(100% + 20px)); // 100 panel + 20px shadow
+    transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: auto;
+    box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.5);
+    
+    @include only-desktop{
+        top: $header-height-desktop;
+    }
+    
+    &.visible{
+        transform: translateX(0px);
+        
+        &.with-side-tools-open{
+            max-width: calc(100% - 60px);
+            @media (max-width: 700px){
+                transform: translateX(-60px);
+            }
+        }
+    }
+    
+    > .header{
+        .title{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            color: $color-text;
+            padding: 5px 7px;
+            font-size: 13px;
+            font-weight: bold;
+            background-color: #dadad9;
+            text-transform: uppercase;
+            border-bottom: 1px solid #adadad;
+            
+            > .ico-area{
+                > img,
+                > svg{
+                    display: block;
+                    margin-right: 5px;
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+            > span.title-area{
+                flex-grow: 1;
+                flex-shrink: 1;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+            > .buttons-area{
+                line-height: 0;
+                flex-shrink: 0;
+                
+                button{
+                    padding: 0;
+                    background: none;
+                    border: none;
+                    margin-left: 5px;
+                    
+                    img{
+                        display: block;
+                    }
+                }
+            }
+        }
+        
+        .tabs{
+            ul{
+                list-style: none;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                flex-flow: row;
+            }
+            li{
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: 0;
+                min-width: 0;
+                border-bottom: 1px solid #adadad;
+                transition: all .3s;
+                
+                &:not(:last-child){
+                    border-right: 1px solid #adadad;
+                }
+                
+                &.active{
+                    border-bottom: 1px solid transparent;
+                }
+                
+            }
+            
+            li.active button{
+                outline: none;
+                background-color: #f5f5f5;
+                border: 1px solid white;
+                border-bottom: 1px solid transparent;
+            }
+            
+            button{
+                @include ellipsize;
+                background: none;
+                border: none;
+                display: block;
+                width: 100%;
+                border-radius: 0;
+            	font-size: 13px;
+            	font-weight: bold;
+            	letter-spacing: -0.5px;
+            	color: #1c1c1b;
+                padding: 8px 3px;
+                background-color: #e9e9e9;
+                cursor: pointer;
+                border: 1px solid transparent;
+                transition: all .3s;
+                
+                &:active,
+                &:focus{
+                    outline: none;
+                }
+            }
+                
+        }
+    }
+    
+    > .content{
+        padding: 15px 25px;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        
+        // flex-grow: 1;    // Uncomment this lines to let the footer
+        // flex-shrink: 1;  // at the bottom of the window
+        
+        .tab-content:not(:first-child){
+            display: none;
+        }
+    }
+    
+    > .footer{
+        z-index: 1; // Draw the shadow over the .content
+        padding: 15px 25px;
+        box-shadow:
+            0 -1px 0 0 #FFF,
+            0 -2px 0 0 #e5e5e5,
+            0 1px 0 0 #e5e5e5,
+            0 2px 0 0 #FFF;
+    }
+
+}