unexpected/static/main.less

Extensible BDD assertion toolkit

@headerColor: #162B34;
@headerHeight: 40px;
@navWidth: 330px;
@mobileSidebarColor: #030303;

.iOsScrollFix() {
    -webkit-overflow-scrolling: touch;
}

.layout() {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.layout-element() {
    .layout();
    position: absolute;
}

body {
    color: #333;
    background-color: white;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

h1, h2, h3, h4 {
    font-weight: bold;
}

nav {
    ul {
        padding: 10px;
        padding-right: 0;
    }
    li {
        list-style: none;
    }
    a {
        color: #333;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
}

header {
    .layout();
    height: @headerHeight;
    padding: 0;
    bottom: auto;
    color: white;
    background-color: @headerColor;
    z-index: 1;

    nav {
        padding-left: @headerHeight;
        .layout-element();
        ul {
            width: 100%;
            padding: 0;
            margin: 0;
        }
        li {
            display: block;
            float: left;
            margin: 0;
            box-sizing: border-box;
            height: @headerHeight;

            a {
                color: white;
                text-decoration: none;
                padding: 10px;
                display: inline-block;
            }
            a:hover {
                text-decoration: none;
            }
        }
        li:hover,
        li.active {
            background-color: lighten(@headerColor, 7%);
            a {
                text-decoration: none;
            }
        }
    }
}

.has-sidebar {
    .sidebar {
        .layout();
        top: @headerHeight;
        right: auto;
        width: @navWidth;
        padding: 0 20px;
        overflow-y: auto;
        .iOsScrollFix();
    }
}

.main {
    .layout();
    top: @headerHeight;
    overflow-y: auto;
    .iOsScrollFix();
}

nav {
    li.active a {
        text-decoration: underline;
    }
}

.content {
    margin-top: 27px;
    margin-left: auto;
    margin-right: auto;
    width: 790px;
}

.has-sidebar .main {
    left: @navWidth;
    .content {
        margin: 27px 30px;
        width: auto;
    }
}

.evaluation {
    background-color: #f5f2f0;
    background-color: darken(#f5f2f0, 3%);
    padding: 16px 32px;
    margin-top: -11px;
    border-top: solid thin #E2E2E2;
    font-size: 0.8em;
    line-height: 1.3;
}

code {
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    background-color: #f7f7f7;
    padding: 2px;
    border-radius: 2px;
}

.output,
.code {
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 13.63636302948px;
    white-space: nowrap;
    line-height: 1.45;
    margin: 0.5em 0;
    padding: 16px;
    overflow-x: auto;
    .iOsScrollFix();
}

.code {
    background-color: #f7f7f7;
}

.output {
    background-color: #f3f3f3;
}

.theme-dark {
    .code,
    .output {
        background-color: black;
        color: white;
    }

    .code + .output {
        border-top: thin solid #333;
    }
}

.code + .output {
    border-top: thin solid #ddd;
    margin-top: -0.5em;
}

.icon(@url) {
    display: inline-block;
    border: none;
    background-image: url(@url);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    outline: none;
    padding: 0;
    margin: 0;
}

.logo-icon {
    width: @headerHeight;
    height: @headerHeight;
    .icon('bug-icon.svg');
}

.menu-toggle-item {
    display: none;
}

.sidebar h3 {
    margin: 0;
    font-weight: normal;
    font-size: 1em;
}

@media only screen and (max-width : 900px) {
    body {
        font-size: 0.9em;
    }
    .output,
    .code {
        font-size: 0.7em;
    }
    .content {
        width: auto;
        margin: 27px 30px;
    }
    .has-sidebar {
        .sidebar {
            background-color: @mobileSidebarColor;
            color: white;
            padding: 10px 0;
            h3 {
                margin: 0;
                font-weight: bold;
                padding: 9px 0;
                padding-left: 20px;
            }
            a {
                display: block;
                color: white;
                padding: 9px 0;
                padding-left: 35px;
                &:hover {
                    text-decoration: none;
                }
            }
            li.active a {
                background-color: lighten(@mobileSidebarColor, 15%);
                text-decoration: none;
            }
            ul {
                margin: 0;
                padding: 0;
            }
        }
        .menu-toggle-item {
            display: initial;
        }
        .menu-toggle {
            width: @headerHeight;
            height: @headerHeight;
            .icon('menu-icon.svg');
        }
        .logo-icon {
            display: none;
        }

        header nav {
            padding-left: 0;
        }

        .main {
            left: 0;
        }
    }

    .has-sidebar.sidebar-hidden {
        .menu-toggle {
            transition: all 200ms;
            background-image: url('menu-icon.svg');
        }
        .sidebar {
            transition: all 200ms;
            transform: translateX(-100%);
        }
        .main {
            transition: all 200ms;
            transform: translateX(0);
        }
    }

    .has-sidebar.sidebar-visible {
        .menu-toggle {
            transition: all 200ms;
            transform: rotate(360deg);
            background-image: url('hide-menu-icon.svg');
        }
        .sidebar {
            transition: all 200ms;
            transform: translateX(0%);
        }
        .main {
            transition: all 200ms;
            transform: translateX(@navWidth);
        }
    }
}