mr-legend_wiki/lib/tpl/sprintdoc/css/area_nav-metabox.less

/**
 * This file provides the design styles for the metatabbox
 */

#spr__meta-box {
    .display-flex();
    .flex-direction();
    .justify-content(flex-end);

    position: relative;
    float: right;
    max-width: 40%;
    margin-top: -(@page_padding-top); // reverse padding-top of .page container
    margin-right: -1px;

    // >= 1024
    @media @screen_min-md {
        height: @page-header_height;
        border: 1px solid transparent;
    }

    // < 1024
    @media @screen_max-md {
        position: relative;
        top: .2rem;
        right: auto;
        float: none;
        max-width: 100%;
        min-height: @page-header_height;
        height: auto;
        border: 0 none;
    }

    &.sticky {
        position: fixed;
        top: 0;

        ul.meta-tabs > li > a {
            border-top-color: @ini_background_site;
            border-bottom-color: @noopentasks-border;
            border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;

        }

        .meta-content .tab-pane.active {
            max-height: 80vh;
            overflow: auto;
        }
    }

    + .msg-area + a {
        clear: right;
        margin-top: 20px;
    }

    .tab-container {
        display: table;

        @media @screen_max-md {
            display: block;
            width: 100%;
        }
    }

    .box-content {
        position: relative;
        height: 0;
        overflow-y: visible;
    }


    /* + + + + +  tab controls  + + + + + */
    ul.meta-tabs {
        list-style: none;
        line-height: 160%;
        margin: 0;
        padding: 0;

        @media @screen_min-md {
            white-space: nowrap;
            text-align: right;
        }

        &::before,
        &::after {
            content: '';
            clear: both;
            display: table;
            box-sizing: border-box;
        }

        > li:first-child {
            > a {
                margin-left: 0;
            }
        }

        > li {
            position: relative;
            display: inline-block;
            vertical-align: bottom;
            margin: 0;

            @media @screen_min-md {
                margin-left: .3rem;
            }

            @media @screen_max-md {
                margin-right: .4rem;
                margin-bottom: .2rem;
            }

            > a {
                cursor: pointer;
                position: relative;
                display: block;
                font-size: @font-size-small;
                transition: @transition background-color, @transition border-color, @transition color;

                @media @screen_min-md {
                    background-color: @ini_background_site;
                    border: 1px solid @noopentasks-border;
                    border-bottom-color: @ini_background_site;
                    border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
                    color: @ini_nav_menu_color;
                    margin-left: 4px;
                    padding: .3em 1rem .1em;
                }

                @media @screen_max-md {
                    background-color: @ini_background;
                    top: 0;
                    border: 1px solid @ini_existing;
                    color: @ini_existing;
                    margin-top: .2rem;
                    margin-left: 0;
                    padding: .2em .3rem;
                }

                * {
                    cursor: pointer;
                    color: inherit;
                    font-size: inherit;
                }

                .prefix {
                    position: relative;
                    color: inherit;
                    font-size: @font-size-small;
                }

                &:hover,
                &:focus,
                &:active {
                    text-decoration: none;

                    @media @screen_min-md {
                        background-color: @ini_background;
                        border-color: @ini_existing;
                        color: @ini_existing;
                    }

                    @media @screen_max-md {
                        background-color: @ini_existing;
                        border-color: @ini_background;
                        color: @ini_background;
                    }
                }
            }

            &.active {
                > a {
                    cursor: default;
                    background-color: @ini_background;
                    border-color: @ini_existing;
                    border-bottom-color: @ini_background;
                    color: @ini_existing;

                    @media @screen_max-md {
                        background-color: @ini_existing;
                        border-bottom-color: @ini_existing;
                        border-radius: 0;
                        color: @ini_background;
                    }
                }
            }
        }
    }

    /* + + + + +  toggle content  + + + + + */
    .meta-content {
        margin-top: -1px;

        @media @screen_max-md {
            clear: both;
            margin-top: 2px;
        }

        .tab-pane {
            position: absolute;
            top: 0;
            right: 0;
            display: none;
            width: 100%;
            background-color: @ini_background;
            border: 1px solid @ini_existing;

            @media @screen_min-xs {
                min-width: 20em;
            }

            @media @screen_min-md {
                border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
            }

            &.active {
                display: block;
            }

            a {
                color: @ini_existing;
            }

            > div {
                font-size: @font-size-small;
                padding: .8rem .5rem .5rem;

                * {
                    font-size: inherit;
                }

                p {
                    padding-left: 1em;
                }

                ul {
                    list-style: none;
                    padding-left: 0;
                }

                li {
                    list-style-image: none; // overwrite universally styles
                    margin-left: 0;
                    padding-left: 1em;
                }
            }

            &#spr__tab-tags {
                > div {
                    ul {
                        li {
                            padding-left: 0;
                        }
                    }
                }
            }

            #dw__toc {
                width: auto;
                float: none;
                margin: 0;
                padding: .6rem .5rem .5rem .8rem;
                background: transparent;
                border: 0 none;

                h3 {
                    display: none;
                }

                > div {
                    padding: 0;
                }

                > div ul.toc {
                    font-size: @font-size-small;
                    padding-left: .5em;

                    a {
                        font-size: @font-size-small;
                        display: inline-block;
                        padding-left: 10px;
                        position: relative;
                    }

                    div.li {
                        position: relative;
                        padding: .15em 0;

                        &::before {
                            content: '';
                            position: absolute;
                            top: .6em;
                            left: 0;
                            display: inline-block;
                            width: 4px;
                            height: 4px;
                            overflow: hidden;
                            background-color: @ini_existing;
                        }
                    }
                }

                > div > ul.toc {
                    padding: 0;
                }
            }
        }
    }

    /* + + + + +  tab issues  + + + + + */
    #spr__tab-issues {
        ul.mmissuelist {
            padding-left: 0;
            margin-top: 1rem;

            li {
                &.noissue {
                    font-size: @font-size-small;
                    list-style-type: none;
                    margin-left: 0;

                    .li {
                        font-size: @font-size-small;
                        margin-left: .5rem;
                    }
                }

                a {
                    display: inline-block;
                }
            }

            img {
                vertical-align: bottom;
                margin-right: .3rem;
            }

            .mm__status {
                padding-left: .3rem;
                padding-right: .3rem;
            }

            form {
                vertical-align: text-top;
            }
        }
    }

    /* + + + + +  tab issues  + + + + + */
    /* see plugins/magic-matcher.less   */
    #spr__tab-issues {
        ul.mmissuelist {
            padding-left: 0;
            margin-top: .5rem;
            margin-bottom: .6rem;

            li {
                list-style-type: none;
                margin-top: .3rem;
                margin-left: .5rem;

                &.noissue {
                    list-style-type: none;
                    margin-left: 0;
                }
            }

            a {
                display: inline-block;
                font-size: @font-size-small;

                * {
                    font-size: inherit;
                }
            }

            img {
                vertical-align: bottom;
                margin-right: .3rem;
            }

            .mm__status {
                display: inline-block;
                text-decoration: none;
                padding-left: .3rem;
                padding-right: .3rem;
            }

            form {
                vertical-align: text-top;

                button {
                    background: @ini_button_background;
                    border-color: @ini_button_background;
                    color: @ini_button_color;
                    font-size: @font-size-small;
                    padding: .2em .3em;

                    &[name="removeIssue"] {
                        min-width: 20px;
                        font-size: .94rem;
                        font-weight: bold;
                        line-height: 95%;
                        text-align: center;
                        padding: 0 .1rem .1rem;
                        margin-left: .5rem;
                    }

                    &:hover,
                    &:focus,
                    &:active {
                        background: @ini_button_color;
                        color: @ini_button_background;
                    }
                }
            }
        }
    }
}