@vidro/map-handler 1.0.4 → 1.0.8

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

@@ -0,0 +1,416 @@
+//main: style.scss
+
+.form{
+    font-size: 13px;
+    label{
+        display: block;
+        color: $color-menu-text-dimmed;
+        font-weight: bold;
+    }
+    input[type=text],
+    input[type=password],
+    textarea{
+        border: none;
+        background-color: white;
+        border-radius: 3px;
+        padding: 6px 16px;
+        font-size: 13px;
+
+        &:focus,
+        &:active{
+            outline: none !important;
+        }
+
+        &.block{
+            width: 100%;
+            box-sizing: border-box;
+        }
+    }
+}
+
+.form-control,
+.form-group{
+    margin: 1em 0;
+}
+
+.btn{
+    background-color: black;
+    color: white;
+    margin: 1px 25px 1px 0;
+    border-radius: 3px;
+    padding: 5px 15px;
+    font-size: 12px;
+    border: none;
+    background-color: $color-btn-default;
+    border: 1px solid #717171;
+    cursor: pointer;
+    &[disabled]{
+        opacity: .5;
+    }
+
+    &.btn-default-light{
+        background-color: $color-btn-default-light;
+        border: solid 1px #cececd;
+        color: #1c1c1b;
+        font-weight: 600;
+    }
+
+    &.va-top{
+        vertical-align: top;
+    }
+
+    svg{
+        fill: white;
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+    }
+
+    &.btn-success{
+        background-color: $color-btn-success;
+        border: 1px solid #009e89;
+    }
+
+    &.btn-accent{
+        background-color: $color-btn-accent;
+        border: 1px solid #004386;
+    }
+
+    &.btn-danger{
+        background-color: $color-btn-danger;
+        border: 1px solid #b5223f;
+    }
+
+    &:first-child{
+        margin-left: 0;
+    }
+    &:last-child{
+        margin-right: 0;
+    }
+
+}
+
+.form-condensed-bottomsheet{
+
+    .control{
+        display: flex;
+        justify-content: space-between;
+        margin: .45em 0;
+
+        input,
+        select{
+            background-color: white;
+            border: none;
+            width: 110px;
+            border-radius: 3px;
+            padding: 5px 8px;
+            box-sizing: border-box;
+
+            &[disabled]{
+                opacity: .7;
+            }
+        }
+    }
+
+
+}
+
+// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+// A partir de aquí, están los nuevos. Lo anterior
+// debería poder eliminarse con el tiempo.
+// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+.form-component{
+
+    &.form-component--key-value{
+        display: flex;
+        flex-direction: row;
+        margin: 3px 0;
+
+        label{
+            // width: 30%;
+            font-size: 13px;
+            color: #1c1c1b;
+            white-space: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        input[type=text]{
+            // width: 70%;
+            padding: 4px;
+            font-size: 11px;
+            background-color: #ffffff;
+	        border: solid 1px #e5e5e5;
+        }
+
+        > :nth-child(1){
+          width: 30%;
+        }
+        > :nth-child(2){
+          width: 70%;
+        }
+    }
+
+    &.form-component--select-multiple,
+    &.form-component--list-box{
+        padding: 5px 0;
+
+        label{
+            margin-bottom: 5px;
+            display: block;
+        }
+
+        ul,
+        select{
+            display: block;
+            width: 100%;
+            border: 1px solid #e5e5e5;
+        }
+
+        ul{
+            border: 1px solid #e5e5e5;
+            background-color: white;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            
+            overflow-y: auto;
+
+            > li{
+                color: #1c1c1b;
+                font-size: 11px;
+                margin: 0;
+                padding: 5px;
+                border-bottom: 1px solid #efefef;
+                cursor: pointer;
+
+                &:last-child(){
+                    border-bottom: none;
+                }
+                &:hover{
+                    background-color: #f7f7f7;
+                }
+
+                &.active{
+                    background-color: #005cb8;
+                    color: white;
+                }
+            }
+        }
+    }
+
+    &.form-component--equal-buttons-row{
+        display: flex;
+        flex-direction: row;
+        padding: 5px 0;
+
+        button{
+            flex-shrink: 1;
+            flex-grow: 1;
+        }
+    }
+
+    &.form-component--equal-columns-row{
+        display: flex;
+        flex-direction: row;
+        padding: 5px 0;
+
+        > div {
+            flex-grow: 1;
+            flex-basis: 0;
+
+            &:not(:last-child){
+                margin-right: 25px;
+            }
+        }
+    }
+
+    &.form-component--divider{
+        margin: 15px -25px;
+        box-sizing: border-box;
+        border-top: 1px solid #e5e5e5;
+        border-bottom: 1px solid white;
+    }
+
+    &.form-component--divider-huge{
+        margin: 15px -25px;
+        box-sizing: border-box;
+        background-color: #e5e5e5;
+        height: 7px;
+        box-shadow: 0 1px 0 0 #cecece,  // "Inner" bottom
+                    0 -1px 0 0 #cecece, // "Inner" top
+                    0 2px 0 0 white,    // Outer bottom
+                    0 -2px 0 0 white;   // Outer top
+    }
+
+    &.form-component--label-and-input{
+
+        label{
+            display: block;
+            margin-bottom: 5px;
+        }
+
+        &.formError{
+            input{
+                border: 1px solid red;
+            }
+            .error{
+                font-size: 11px;
+                color: red;
+                text-align: right;
+            }
+        }
+
+        input{
+            padding: 4px;
+            font-size: 11px;
+            background-color: #ffffff;
+            border: solid 1px #e5e5e5;
+            width: 100%;
+        }
+
+        select{
+            padding: 4px;
+            font-size: 11px;
+            background-color: #ffffff;
+            background-image: url(../../img/ic/caret-down-bottomsheet.svg);
+            background-repeat: no-repeat;
+            background-position: right center;
+            border: solid 1px #e5e5e5;
+            width: 100%;
+            -webkit-appearance: none;
+            border-radius: 0;
+        }
+
+        textarea{
+            padding: 4px;
+            font-size: 11px;
+            background-color: #ffffff;
+            border: solid 1px #e5e5e5;
+            width: 100%;
+            resize: vertical;
+            height: 100px;
+        }
+    }
+
+    &.form-component--photo-gallery{
+        &.two-cols > ul > li{
+            width: calc(50% - 10px);
+            &:nth-child(even){
+                margin-left: 10px;
+            }
+            &:nth-child(odd){
+                margin-right: 10px;
+            }
+        }
+
+        &.three-cols > ul > li{
+            width: calc(33% - 13px);
+            &:nth-child(3n+2){
+                margin: 0 20px;
+            }
+        }
+
+        > ul{
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            > li{
+                margin: 0;
+                display: inline-block;
+                background-color: #7a7a7a;
+                padding: 2px;
+                margin-bottom: 20px;
+                min-width: 100px;
+                margin-right: 5px;
+                > div.photo{
+                    background-color: #FFFFFF;
+                    background-image: url(../../img/ic/image-gallery-placeholder.svg);
+                    background-position: center center;
+                    background-repeat: no-repeat;
+                    position: relative;
+                    padding-top: 75%;
+
+                    > img{
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+                > div.doc{
+                    background-color: #FFFFFF;
+                    background-image: url(../../img/doc-gallery-placeholder.svg);
+                    background-position: center center;
+                    background-repeat: no-repeat;
+                    position: relative;
+                    padding-top: 75%;
+
+                    > img{
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+                > div.footer{
+                    padding: 5px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    button{
+                        background: none;
+                        border: none;
+                        display: block;
+
+                        img{
+                            display: block;
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+
+    .spacer-5{
+        height: 5px;
+    }
+    .spacer-10{
+        height: 10px;
+    }
+    .spacer-15{
+        height: 15px;
+    }
+}
+
+.uib-datepicker-popup.dropdown-menu{
+    position: absolute;
+    left: 10px !important;
+    right: 10px !important;
+    background-color: white;
+    margin: 0;
+    margin-top: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    box-shadow: 0 5px 17px 0 rgba(0,0,0,0.3);
+    border-radius: 2px;
+
+    li{
+        margin: 0;
+        padding: 0;
+    }
+
+    table{
+        width: 100%;
+        outline: none !important;
+
+        .btn{
+            padding: 4px 4px;
+            font-size: 11px;
+        }
+    }
+}

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

@@ -0,0 +1,134 @@
+// main: style.scss
+
+$header-height-mobile: 60px;
+$header-height-desktop: 47px;
+
+header{
+    width: 100%;
+    height: $header-height-mobile;
+    background-color: $color-accent;
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    flex-direction: row;
+
+    @include only-desktop{
+        height: $header-height-desktop;
+    }
+
+    a.menu-toggle{
+        display: inline-block;
+        padding: $header-height-mobile / 4;
+        background-color: $color-accent;
+        width: $header-height-mobile;
+        height: $header-height-mobile;
+        box-sizing: border-box;
+        @include only-desktop{
+            width: $header-height-desktop;
+            height: $header-height-desktop;
+            padding: $header-height-desktop / 4;
+        }
+
+
+        > svg{
+            position: absolute;
+            display: block;
+            width: $header-height-mobile / 2;
+            height: $header-height-mobile / 2;
+            @include only-desktop{
+                width: $header-height-desktop / 2;
+                height: $header-height-desktop / 2;
+            }
+            path{ fill: white; }
+        }
+
+        .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(- $header-height-mobile / 2); }
+        &.open .hamburger{ opacity: 0; transform: translateX($header-height-mobile / 2);}
+
+        @include only-desktop{
+            &.closed .times{ opacity: 0; transform: translateX(- $header-height-desktop / 4); }
+            &.open .hamburger{ opacity: 0; transform: translateX($header-height-desktop / 4);}
+        }
+
+    }
+
+    > .brand{
+        flex-grow: 1;
+        flex-shrink: 1;
+
+        @include only-desktop{
+            padding-top: 3px;
+        }
+
+        @include only-mobile-and-tablet{
+            padding-top: 9px;
+        }
+    }
+
+    > ul.tools{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        float: right;
+        font-size: 0;
+
+        @media (max-width: 699px){
+            display: none;
+        }
+
+        > li {
+            display: inline-block;
+
+            &:not(:last-child){
+                border-right: 1px solid $color-ul-tools-first;
+            }
+            &:not(:first-child){
+                border-left: 1px solid $color-ul-tools-last;
+            }
+
+            > button{
+                background: none;
+                border: none;
+                padding: 10px;
+                height: $header-height-desktop;
+                cursor: pointer;
+
+                svg{
+                    height: 24px;
+                    width: 24px;
+
+                    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-tb-tool-selected;
+                    svg path{
+                        fill: white;
+                    }
+                }
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,135 @@
+// 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;
+        }
+    }
+}