@viewdo/dxp-story-player-assets/less/templates/vanillabean/scenes/navigation.less

## Installation

.viewdo-nav(@primary: #2d5174, @secondary: #6d5f8c, @theme: default){

    section[class^="affirm"]{

        .ivx-state-navigation-header {
            p, ul {
              max-width: 85%;
              margin: 1rem auto;
            }
        }

        .ivx-navigation-state-links-container{
            position: fixed;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            width: 100%;
            left: 50%;

            .viewdo-nav-back,
            .viewdo-nav-next{
                font-size: .875rem;
                text-transform: uppercase;
                position: absolute;
                padding: 1rem;
                background: black;
                box-sizing: border-box;
                transform: translateY(-50%);  
                cursor: pointer;
                text-decoration: none;
                color: inherit;                              
            }           
    
            .viewdo-nav-back:before,
            .viewdo-nav-next:after{
                content: '';
                display: inline-block;
                width: 1.5rem;
                height: 19px;
                vertical-align: bottom;
                margin-right: 0.5rem;
            }
    
            .viewdo-nav-back:before{
                text-align: left;
                margin-right: 0.5rem;
                background-image: url(https://static.dxp.media/viewdo/vanilla-bean/images/icons/arrow-left.svg);
                background-size: contain;
                margin-right: 0.5rem;
            }
    
            .viewdo-nav-next:after{
                text-align: right;
                margin-left: 0.5rem;
                background-image: url(https://static.dxp.media/viewdo/vanilla-bean/images/icons/arrow-right.svg);
                background-size: contain;
            }             
            
            .viewdo-nav-back{
                left: 0px;
            }

            .viewdo-nav-next{
                right: 0px;
            }
        }        

        ._viewDoNavMobile{

            .ivx-navigation-state-links-container{
                body #state-player {
                    overflow-y: scroll;
                    -webkit-overflow-scrolling: touch;
                }
                section[class^="affirm"] .ivx-navigation-state-links-container {
                    top: initial;
                    bottom: 8rem;
                }
                .viewdo-nav-back,
                .viewdo-nav-next{
                    line-height: 1;
                    border-radius: 100%;
                    z-index: 1000;
                    
                    span{
                        display: none;
                    }
                }
                .viewdo-nav-back {
                    margin-left: 1rem;
                }
                .viewdo-nav-next {
                    margin-right: 1rem;
                }
                .viewdo-nav-back:before{
                    margin-right: 0;
                    width: 1rem;
                    height: 13px;
                    margin-right: 0px;
                }
                .viewdo-nav-next:after{
                    margin-left: 0;
                    width: 1rem;
                    height: 13px;
                    margin-right: 0px;            
                }         
            }
            #global-img {
                padding-top: 10rem;
              }
        }
    
        .responsive(mobile,{
            ._viewDoNavMobile;
        });  

    }   

}