_sass/_layout.scss
/*
**  Global border-box reset
**  Source: https://css-tricks.com/box-sizing/
*/
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

/*
** Helpers
*/
.hidden {
    display: none;
}

/*
** Theme Styles
*/
input::-ms-clear,
input::-ms-reveal {
    display: none !important;
}

body {
    @include display-flex;
    @include flex-direction(column);
    overflow-x: hidden;
    background-color: $body-background-color;

    &.nav-open {
        overflow-y: auto;

        nav,
        header > form {
            display: block;
        }

        header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: auto;
        }
    }

    // Desktop
    @media (min-width: $mobile-break) {
        display: block;
        height: 100%;
        padding: 0 0 0 $nav-width;

        &.nav-open {
            overflow: auto;
        }
    }
}

.main {
    @include display-flex;
    @include flex-direction(column);
    flex: 1;

    & > * {
        width: 100%;
    }

    // Desktop
    @media (min-width: $mobile-break) {
        margin-top: 0;
        height: 100%;
    }
}

header {
    $emblem-size: 35px;
    $emblem-vertical-padding: ($nav-header-height - $emblem-size) / 2;
    $emblem-horizontal-padding: $space;

    // overflow-x: hidden;
    z-index: 1;
    background-color: $nav-background-color;
    @include box-shadow;

    #nav-search-input {
        @include box-shadow;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    h1 {
        padding: $emblem-vertical-padding $emblem-horizontal-padding;
        height: $nav-header-height;
        background-color: $brand-colour;
        color: #fff;
        margin: 0;
        font-size: 1.7rem;
        line-height: 0.8;
        letter-spacing: 0;
        font-weight: 600;
        text-indent: 0;
        @include display-flex();
        @include flex-direction(row);
        @include align-items(center);
        border-bottom: 1px solid rgba(0, 0, 0, 0.075);

        img {
            height: $emblem-size;
            width: $emblem-size;
            margin-right: $space - 5;
        }
    }

    $nav-image: $baseurl + "/images/menu.svg";
    .open-nav {
        background-image: url($nav-image);
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: 100%;
        width: $emblem-size;
        height: $emblem-size;
        border: 0;
        position: absolute;
        top: $emblem-vertical-padding;
        right: $emblem-horizontal-padding;
        border-radius: 2px;

        &:focus {
            outline: none;
            background-color: rgba(0, 0, 0, 0.05);
        }

        &:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
    }

    // Desktop
    @media (min-width: $mobile-break) {
        position: fixed;
        width: $nav-width;
        top: 0;
        left: 0;
        bottom: 0;

        .open-nav {
            display: none;
        }

        h1 {
            @include box-shadow;
        }

        // Enable scrolling of nav items
        nav {
            max-height: calc(100vh - 11rem);
            overflow-y: auto;
        }
    }
}

.content {
    position: relative;
    background-color: $content-background-color;
    color: $content-color;
    // fixes footer positioning for IE 11
    flex: 1 0 auto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;

    h2 {
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: -0.24px;
        margin-top: 0;
        margin-bottom: 20px;
    }

    h3:not(:first-child):before {
        content: "";
        @extend hr;
        margin: 60px 0;
    }

    p {
        margin-bottom: 48px;
    }

    p + ol,
    p + ul {
        margin-top: -28px;
        margin-bottom: 48px;
    }

    h2 + ol, h2 + ul {
        margin-bottom: 48px;
    }
}

.content,
.page-header {
    max-width: 100%;
    padding: 0 ($space + 5) 0;
    margin: 48px auto 0 auto;
    overflow-wrap: break-word;

    // Desktop
    @media (min-width: $mobile-break) {
        max-width: $content-max-width;
    }
}

.page-header {
    h2,
    h3 {
        margin: 0;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    h2 {
        font-size: 2rem;
        font-style: normal;
        font-weight: 500;
        margin-left: -1px;
        margin-bottom: 32px;
        color: #888;
        letter-spacing: 0;

        & a {
            color: #888;
        }
    }

    h3 {
        font-size: 4rem;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        margin-left: -4px;
    }

    // Desktop
    @media (min-width: $mobile-break) {
        h2 {
            font-size: 20px;
            line-height: 24px;
        }

        h3 {
            font-size: 48px;
        }
    }

    @media (min-width: $full-width-break) {
        margin-top: 55px;
    }
}

nav,
header > form {
    display: none;

    // Desktop
    @media (min-width: $mobile-break) {
        display: block;
    }
}

nav > ul {
    padding: $space / 2 0;

    & + ul {
        border-top: 1px solid rgba(0, 0, 0, 0.075);
    }
}

.nav-item {
    display: block;
    line-height: 1;
    margin: 0;

    nav:not(.full-navigation) & > ul {
        display: none;
    }

    nav:not(.full-navigation) &.current > ul {
        display: block;
    }

    > a {
        color: #666;
        text-decoration: none;
        font-size: 1.4rem;
        padding: $space / 2 0 $space / 2 $space * 2;
        display: block;
    }

    &.current.page > a {
      background-color: rgba(0, 0, 0, 0.05);
    }

    &.current > a,
    > a:active,
    > a:hover {
        color: #111;
    }

    &.top-level > a {
        line-height: 1.5;
        font-weight: 600;
        padding-left: $space;
    }

    &.second-level>a {
        line-height: 1.5;
        font-weight: 600;
        padding-left: $space * 2;
    }

    &.second-level>ul>li>a {
        padding-left: $space * 3;
    }

    .nav-open nav:not(.full-navigation) & > ul {
        display: initial;
    }
}

.settings-panel-example {
    @extend p;
    @include display-flex();
    @include flex-direction(column);

    .example {
        max-width: 300px;
        background-color: #fafafa;
        margin: 0;
        padding: 0;
        font-size: 0;
        line-height: 1;
        border-radius: 2px;
        overflow: hidden;
    }

    @media (min-width: 960px) {
        @include flex-direction(row);

        .details {
            @include flex(1);
            margin-right: 20px;
        }

        p + .highlight > pre {
            margin-bottom: 0;
        }

        .example {
            @include flex(0 0 300px);
            max-width: 100%;
        }
    }
}

.highlight {
    margin-left: 0;
    margin-right: 0;
}

h3 + .warning {
    margin-top: 1.75em;
}

h4 code {
    background: $nav-background-color;
    color: $content-color;
    background-color: transparent;
    font-weight: 700;
    padding: 0;
    font-size: 1.1em;
    line-height: 1;
}

h4 svg {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -2px;
    fill: #2e2e2e;
    height: 23px;
}

.required {
    position: relative;
}

.required::after {
    content: "REQUIRED";
    font-size: 12px;
    position: absolute;
    top: 5px;
    line-height: 1;
    color: $brand-colour;
    padding-left: 5px;
}

#search-results {
    margin: 0;
    padding: 0;

    li {
        list-style: none;
        margin: 0;
        padding: 0;

        h4 {
            font-size: 2rem;
        }

        p {
            line-height: 1.5;
        }
    }
}

.search-input {
    -webkit-appearance: none;
    display: block;
    margin: 0;
    padding: 10px 20px 10px 15px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
    border-left: 5px solid transparent;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.8;

    &:focus {
        outline: none;
        border-left-color: $brand-colour;
    }

    .main & {
        border: 1px solid rgba(0, 0, 0, 0.075);
        border-radius: 4px;

        &:focus {
            border: 1px solid $brand-colour;
        }
    }
}

.changelog {
    &,
    > div {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .date {
        color: #888;
        font-style: italic;
    }
}

.badge {
    padding: 2px 5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    border-radius: 2px;
    background: #eee;
    font-weight: bold;

    &.major {
        background: $brand-colour;
        color: #fff;
    }
}

blockquote {
    border-left: 5px solid #fd0;
    padding: 10px 15px;
    margin-left: -15px;
    margin-right: -10px;
    margin-top: 0;
    margin-bottom: 48px;
    background-color: $brand-colour-light;
    border-color: $brand-colour;

    p:last-child {
        margin-bottom: 0;
    }

    @media (max-width: $full-width-break) {
        margin-left: 0;
        margin-right: 0;
    }
}

img {
    max-width: 100%;
    height: auto;
}

video {
    max-width: 100%;
    height: auto;
}

.editor-link {
    display: none;
    margin-top: 0;

    .btn {
        border: 0;
        border-radius: 2px;
        width: 100%;
        max-width: 500px;
        font-size: 2rem;
        text-decoration: none;
        padding: 10px 15px;
        margin: 0;
        font-size: 18px;
        cursor: pointer;
        background-color: #f7e064;
        color: #333;
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);

        &:hover {
            background-color: #f4d525;
            color: #333;
        }
    }
}

.cms-editor-active .editor-link {
    display: block;
}

/* Page Footer */
.footer {
    border-top: 1px solid #ddd;
    margin-top: auto;

    .content {
        @include display-flex;
        color: $footer-color;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 0.75em;
    }

    &__nav {
        @include display-flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        & > * {
            display: inline-block;
        }

        a {
            color: inherit;
            text-decoration: none;
            white-space: nowrap;

            &:hover {
                color: $content-color;
                text-decoration: underline;
            }
        }

        &__sep {
            width: 2px;
            height: 2px;
            background-color: $footer-color;
            border-radius: 100%;
            margin: 0 0.5em;
        }
    }
}

/*
** IE 8 Styles
*/
.lt-ie9 {
    body {
        height: 100%;
        width: 100%;
    }

    header,
    header h1,
    nav,
    .main {
        display: block;
    }

    header {
        width: 30%;
        float: left;

        h1 {
            font-size: 1.5em;

            & > * {
                display: inline-block;
            }

            img {
                display: none;
            }
        }

        nav .nav-item > ul {
            display: none;
        }
        nav .nav-item.current > ul {
            display: block;
        }
    }

    .main {
        width: 70%;
        height: 100%;
        float: right;
    }
}