@import "../style/variable";

.dev-tools { .tools {
    .sources {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .code, .raw {
            background: #fff;
            padding: $common-padding;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            min-height: 100%;
        }
        .image {
            padding: $common-padding;
            .img-container {
                text-align: center;
                img {
                    max-width: 100%;
                    box-shadow: $box-shadow;
                }
            }
            .img-info {
                text-align: center;
                margin-top: 20px;
                color: $gray;
            }
        }
        .http {
            .breadcrumb {
                background: #fff;
                padding: $common-padding;
                margin-bottom: 10px;
                word-break: break-all;
            }
            .section {
                background: #fff;
                h2 {
                    background: $blue;
                    padding: $common-padding;
                    color: #fff;
                    font-size: 16px;
                }
                margin-bottom: 10px;
                table {
                    td {
                        font-size: 14px;
                        padding: 5px 10px;
                    }
                    .key {
                        white-space: nowrap;
                    }
                }
            }
            .response {
                background: #fff;
                padding: $common-padding;
                margin-bottom: 10px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
        }
        .json {
            font-size: 14px;
            line-height: 1.2;
            background: #fff;
            min-height: 100%;
            padding: $common-padding 25px 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            &, ul {
                list-style: none !important;
            }
            ul {
                padding: 0 !important;
                padding-left: 20px !important;
                margin: 0 !important;
            }
            li {
                position: relative;
                white-space: nowrap;
            }
            & > li > .key,
            & .array .key {
                display: none;
            }
            .array .object .key {
                display: inline;
            }
            li:after {
                content: ",";
            }
            li:last-child:after {
                content: "";
            }
            .null {
                color: #a71d5d;
            }
            .string {
                color: #183691;
            }
            .number {
                color: #0086b3;
            }
            .boolean {
                color: #a71d5d;
            }
            .key {
                color: #183691;
            }
            .expanded:before {
                content: "-";
                font-size: 1.5em;
                width: 13px;
                text-align: center;
                line-height: 13px;
                font-family: sans-serif;
                position: absolute;
                left: -15px;
                top: 0;
            }
            .collapsed:before {
                content: "+";
                font-size: 1.5em;
                color: #000;
                top: 1px;
            }
            li .collapsed ~ .close:before {
                content: "... ";
                color: #999;
            }
            .hidden ~ ul {
                display: none;
            }
            span {
                position: static !important;
            }
        }
    }
} }