raml2html-werk-theme/assets/docs.less

a bulma and open-color based single-page theme that is easily searchable and offline-ready

@import (less) "../node_modules/bulma/css/bulma.css";
@import (less) "../node_modules/open-color/open-color.css";

@import (less) "../.cache/fira-sans/fonts.css";
@import (less) "../.cache/fira-code/fira_code.css";

@import "./styles/hljs";

@border-color: #dbdbdb;

:root {
    --font-family-default: 'Fira Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-mono: 'Fira Code', "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font: 400 16px/1.3 var(--font-family-default);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-family-default);
}

a {
    color: var(--oc-indigo-9);
}

pre,
code {
    font-family: var(--font-family-mono);
    width: 100%;
}

code {
    word-wrap: break-word;
    max-width: 100%;
}

address {
    font-style: normal;
}

details summary {
    cursor: pointer;
}

abbr {
    @media print {
        text-decoration: none;
    }
}

pre, code {
    page-break-inside: avoid;

    @media print {
        white-space: pre-wrap;
    }
}

h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
}

:root:not(.has-js) .requires-js {
    display: none !important;
}

.is-hidden-print {
    @media print {
        display: none !important;
    }
}

.is-new-page {
    page-break-before: always;

    > h1, > h2, > h3, > h4, > h5, > h6 {
        &:first-child + .is-new-page {
            page-break-before: avoid;
        }
    }
}

.keep-on-page {
    page-break-inside: avoid;

    .group.is-new-page > .group-header:first-child + .group-resource-group-marker + & {
        page-break-inside: auto;
    }
}

label.dropdown-item:hover {
    background-color: #f5f5f5;
    color: #0a0a0a;
    cursor: pointer;
}

.sidebar {
    background-color: var(--oc-gray-2);
    height: 100%;

    nav {
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
}

.value {
    font-family: var(--font-family-mono);
    user-select: all;
}

.subsection + .subsection {
    margin-top: 2rem;
}

.hero {
    background-color: var(--oc-indigo-9);

    &,
    & .title,
    & .subtitle {
        color: whitesmoke;
    }
}

.hero-body.is-flex {
    align-items: center;
    justify-content: space-between;
}

.table {
    &.is-property-list {
        background: transparent;

        th {
            font-weight: 500;
            color: var(--oc-gray-7);
            max-width: 350px;
            word-wrap: break-word;
        }

        td {
            filter: grayscale(1);
            font-size: .9rem;
        }

        .title + &,
        .subtitle + & {
            margin-top: -1rem;
        }
    }
}

.typedef {

}

.typedef-standalone {
    margin-bottom: 1.5rem;
}

.typedef-type {
    display: block;
    color: var(--oc-gray-6);
    font-style: normal;
    font-size: .9em;
    font-weight: normal;

    .typedef-standalone & {
        font-size: 1rem;
    }

    &:first-letter {
        text-transform: uppercase;
    }

    code {
        background: transparent;
        padding: 0;
        filter: grayscale(.5);
    }
}

.typedef-required {
    font-weight: 500;
    color: var(--oc-gray-6);
}

.has-priority-1 {
    opacity: 1;
}

.has-priority-2 {
    opacity: .75;
}

.has-priority-3 {
    opacity: .5;
}

.has-priority-4 {
    opacity: .25;
}

.column.is-nav {
    word-wrap: break-word;
    position: relative;

    @media screen and (min-width: 769px) {
        min-width: 300px;
        max-width: 33.333vw;
    }
}

.content {
    max-width: 100%;

    p, li, th, td {
        max-width: 42rem;
    }

    table {
        width: auto;
        max-width: none;
    }
}

.group {
    + .group {
        margin-top: 7.5rem;
    }
}

.group-title {
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--oc-gray-3);

    .title {
        margin-bottom: .5rem;
    }
}

.group-header {
    .content {
        margin-bottom: 3rem;
    }
}

.group-endpoint {
    & + &,
    .group-resource-group-marker + & {
        margin-top: 5rem;
    }

    &:first-of-type {
        margin-top: 0;
    }

    > header {
        margin-bottom: 1.5rem;
    }
}

.menu-list {
    > li > a:not(.is-active) + ul {
        display: none;
    }

    // todo once scroll-spy is implemented remove this
    a.is-active {
        background-color: transparent !important;
        color: #4a4a4a !important;
    }
}

.method {
    font-family: var(--font-family-mono);
    padding: .0em .25em;

    &,
    .subtitle & {
        font-weight: 500;
        color: white;
    }

    &.is-get {
        background-color: var(--oc-green-6);
    }

    &.is-post {
        background-color: var(--oc-orange-6);
    }
  
    &.is-patch {
        background-color: var(--oc-grape-6);
    }

    &.is-put {
        background-color: var(--oc-blue-6);
    }

    &.is-delete {
        background-color: var(--oc-red-6);
    }
}

.anchor {
    opacity: 0;
    font-size: .8em;
    transition: opacity .2s;
    color: var(--oc-gray-4);
    display: inline-block;
    margin-left: .5rem;

    .title:hover &,
    .title:focus &,
    .subtitle:hover &,
    .subtitle:focus & {
        opacity: 1;
    }
}

.title {
    &.is-anchored {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .subtitle {
            flex: none;
            width: 100%;
        }
    }
}

.indent {
    margin-left: 3.75rem;
    padding-left: 1.5rem;
    border-left: 1px solid @border-color;

    &:not(:last-child) {
        margin-bottom: 1.5rem;
    }
}

.tabbable {
    display: inline-flex;
    flex-direction: column;
    min-width: 50%;

    &.is-vertical {
        flex-direction: row;
        min-height: 6rem;

        > .tabs {
            margin-right: 1.5rem;
            margin-bottom: 0;
            overflow-x: hidden;
            min-width: 3.75rem;

            ul {
                flex-direction: column;
                align-items: flex-end;
            }

            &.is-boxed {
                ul {
                    border-bottom: none !important;
                    border-right: 1px solid @border-color;
                }

                a {
                    border-radius: 3px 0 0 3px;
                    margin-bottom: 0;
                    margin-right: -1px;

                    &:hover {
                        background-color: whitesmoke;
                        border-bottom-color: transparent;
                        border-right-color: @border-color;
                    }
                }

                li.is-active a {
                    border-right-color: transparent !important;
                    border-bottom-color: @border-color !important;
                }
            }
        }
    }
}

.tabbable-contents {
    // show first child until tabs-javascript component is initialized
    .tabbable:not([data-component-ready]) & > :first-child {
        display: block;
    }

    > * {
        display: none;

        &.is-active {
            display: block;
        }
    }
}

.tabs {
    align-items: stretch;

    .title {
        margin: 0;
        padding-right: 1.5rem;
        border-bottom: 1px solid @border-color;
        display: flex;
        align-items: center;
    }
}

.status {
    &:before {
        content: attr(data-code);
    }

    &[data-code^="1"],
    &[data-code^="2"],
    &[data-code^="3"] {
        color: var(--oc-green-6);
    }

    &[data-code^="4"] {
        color: var(--oc-red-6);
    }

    &[data-code^="5"] {
        color: var(--oc-orange-6);
    }
}

.flag {
    .group-endpoint-header & {
        &,
        .flag-name,
        .flag-value {
            color: #aaa;
            font-size: .75rem;
        }
    }

    &.is-string {
        .flag-name::after {
            content: ':';
        }
    }

    &:not(:first-child)::before {
        content: ' | '
    }
}