view src/DML/MainVisBundle/Resources/assets/bem-blocks/help.less @ 0:493bcb69166c

added public content

@import "../config.less";

.help {

    .position_fixed_everywhere();
    .font_standard();
    z-index: @z-index_help;
    
    background: @--popup-base-color;
    display: none;

    &_animating {
        .transition(opacity 0.2s linear);
    }
    
    &_state_hidden {
        display: none;
    }
    &_state_pre-hidden {
        pointer-events: none;
        display: block;
        opacity: 0;
    }
    &_state_pre-shown {
        display: block;
        opacity: 0;
    }
    &_state_shown {
        display: block;
    }
    
    // ==================================
    &__body {
        .border-radius(@--border-radius);
        .position_fixed_everywhere(@help--margin);
        .box-shadow(@help--box-shadow);
        background: #fff; 
        overflow: hidden;
        z-index: @z-index_help + 1;
    }
    
    // ==================================
    &__toc-container {
        .position_absolute_everywhere();
        right: auto;
        width: @help--toc-width;
        background: #eee;

        @media all and (max-width: @help--toc-hiding-threshold) {
            & {
                display: none;
            }
        }
    }

    // ==================================
    &__toc {
        padding: 1em 0 0 0;
        
    }
    

    // ==================================
    &__toc-element {
        position: relative;
        display: block;
        padding: .5em;
        text-decoration: none;
        color: #888;
        
        &:hover {
            color: #000;
        }
    }
    
    &__toc-element_current {
        color: #000;
        cursor: default;
    }
    &__toc-element_hierarchy_1 {
        padding-left: 25px;
    }
    &__toc-element_hierarchy_2 {
        padding-left: 25px;
    }
    &__toc-element_hierarchy_3 {
        padding-left: 40px;
    }

    // ==================================
    &__toc-pointer {

    }

    // ==================================
    &__content-container {
        .position_absolute_everywhere();
        left: @help--toc-width;
        overflow: scroll;

        @media all and (max-width: @help--toc-hiding-threshold) {
            & {
                left: 0;
            }
        }
    }
    
    // ==================================
    &__closer {
        position: fixed;
        cursor: pointer;
        height: 30px;
        width: 30px;
        background: no-repeat 0 0 url(data:image/png;base64,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);
        top: @help--margin - 15px;
        left: @help--margin - 15px;
        z-index: @z-index_help + 2;
        

        &_position_right {
            left: auto;
            right: @help--margin - 15px;
        }
    }
}