aglio-theme-olio/styles/layout-default.less

Default theme for the Aglio API Blueprint renderer

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700|Inconsolata|Raleway:200);

/* Page-wide variables */
@padding: 12px;
@border-radius: 6px;
@font-size: 14px;

@base-font: 'Roboto', Helvetica, sans-serif;
@title-font: 'Raleway', Helvetica, sans-serif;
@code-font: 'Inconsolata', monospace;

/* Element styles */
body {
  color: @text-color;
  background: @background-color;
  font-family: @base-font;
  font-size: @font-size;
  line-height: 1.42;
}

header {
    border-bottom: 1px solid @group-background-color;
    margin-bottom: @padding;
}

h1, h2, h3, h4, h5 {
    margin: @padding 0;

    & .permalink {
        margin-left: @padding / 2;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    &:hover .permalink {
        opacity: 1;
    }
}

h1 {
    font-family: @title-font;
    font-size: 36px;
    font-weight: 500;
}

h2 {
    font-family: @title-font;
    font-size: 30px;
    font-weight: 500;
}

h3 {
    font-size: 100%;
    text-transform: uppercase;
}

h5 {
    font-size: 100%;
    font-weight: normal;
}

p {
    margin: 0 0 10px;

    &.choices {
      line-height: 1.6;
    }
}

a {
    color: @link-color;
    text-decoration: none;
}

li {
    p {
        margin: 0;
    }
}

dl {
    dt {
        float: left;
        width: 160px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
    }

    dd {
        margin-left: 180px;
    }
}

blockquote {
    font-size: 17.5px;
    padding: 10px 20px;
    margin: @padding 0;
    border-left: 5px solid @quote-border-color;

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

pre {
    background-color: @code-block-background-color;
    padding: @padding;
    border: 1px solid @code-block-border-color;
    border-radius: @border-radius;

    code {
        background-color: transparent;
        border: none;
    }
}

code {
    color: @inline-code-text-color;
    background-color: @inline-code-background-color;
    font-family: @code-font;
    padding: 1px 4px;
    border: 1px solid @code-block-border-color;
    border-radius: 3px;
}

nav {
    position: fixed;
    top: @padding * 2;
    bottom: 0;
    overflow-y: auto;

    .resource-group {
      padding: 0;

      .heading {
        position: relative;

        .chevron {
          position: absolute;
          top: @padding;
          right: @padding;
          opacity: 0.5;
        }

        a {
          display: block;
          color: @text-color;
          opacity: 0.7;
          border-left: 2px solid transparent;
          margin: 0;

          &:hover {
            border-left: 2px solid @text-color;
          }
        }
      }
    }

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

        a {
            display: block;
            font-size: 13 * @font-size / 14;
            color: @text-color;
            opacity: 0.7;
            padding: (2 * @padding / 3) @padding;
            border-top: 1px solid @group-border-color;
            border-left: 2px solid transparent;

            &:hover {
                border-left: 2px solid @text-color;
            }
        }

        /* Spacing for first level items */
        & > li {
            margin: 0;

            &:first-child {
                margin-top: -@padding;
            }

            &:last-child {
                margin-bottom: -@padding;
            }
        }

        /* Adjust spacing for nested lists */
        ul {
            a {
                padding-left: @padding * 2;
            }

            li {
                margin: 0;

                &:first-child {
                    margin-top: 0;
                }

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

    /* Remove the top border from the first item in each group */
    & > div > div > ul > li:first-child > a {
        border-top: none;
    }
}

/* Generic classes */
.preload * {
    transition: none !important;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.badge {
    display: inline-block;
    float: right;
    min-width: 10px;
    min-height: @font-size;
    padding: 3px 7px;
    font-size: 12px;
    color: @group-text-color;
    background-color: @group-background-color;
    border-radius: 10px;
    margin-top: -2px;

    &.get {
      color: contrast(@get-background-color,
                      lighten(@get-color, 30%),
                      darken(@get-color, 25%));
      background-color: @get-background-color;
    }

    &.head {
      color: contrast(@head-background-color,
                      lighten(@head-color, 30%),
                      darken(@head-color, 25%));
      background-color: @head-background-color;
    }

    &.options {
      color: contrast(@options-background-color,
                      lighten(@options-color, 30%),
                      darken(@options-color, 25%));
      background-color: @options-background-color;
    }

    &.put {
      color: contrast(@put-background-color,
                      lighten(@put-color, 30%),
                      darken(@put-color, 25%));
      background-color: @put-background-color;
    }

    &.patch {
      color: contrast(@patch-background-color,
                      lighten(@patch-color, 30%),
                      darken(@patch-color, 25%));
      background-color: @patch-background-color;
    }

    &.post {
      color: contrast(@post-background-color,
                      lighten(@post-color, 30%),
                      darken(@post-color, 25%));
      background-color: @post-background-color;
    }

    &.delete {
      color: contrast(@delete-background-color,
                      lighten(@delete-color, 30%),
                      darken(@delete-color, 25%));
      background-color: @delete-background-color;
    }
}

.collapse-button {
    float: right;

    .close {
        display: none;
        color: @link-color;
        cursor: pointer;
    }

    .open {
        color: @link-color;
        cursor: pointer;
    }

    &.show {
        .close {
            display: inline;
        }

        .open {
            display: none;
        }
    }
}

.collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

/* Layout classes */
nav {
    width: 220px;
}

.container {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;

    .row {
        .content {
            margin-left: 220px + (@padding * 2);
            width: 720px - (@padding * 2);
        }

        &:after {
            content: '';
            display: block;
            clear: both;
        }
    }
}

.container-fluid {
    nav {
        width: 22%;
    }

    .row {
        .content {
            margin-left: 24%;
            width: 76%;
        }
    }
}

@media (max-width: 1200px) {
    nav {
        width: 200px;
    }

    .container {
        max-width: 840px;

        .row {
            .content {
                margin-left: 200px + (@padding * 2);
                width: 630px - (@padding * 2);
            }
        }
    }
}

@media (max-width: 992px) {
    nav {
        width: 170px;
    }

    .container {
        max-width: 720px;

        .row {
            .content {
                margin-left: 170px + (@padding * 2);
                width: 550px - (@padding * 2);
            }
        }
    }
}

@media (max-width: 768px) {
    nav {
        display: none;
    }

    .container {
        width: 95%;
        max-width: none;
    }

    .container .row, .container-fluid .row {
        .content {
            margin-left: auto;
            margin-right: auto;
            width: 95%;
        }
    }
}

/* Context-specific and API color classes */
.back-to-top {
    position: fixed;
    z-index: 1;
    bottom: 0px;
    right: 24px;
    padding: 4px 8px;
    color: fadeout(@text-color, 50%);
    background-color: @group-background-color;
    text-decoration: none !important;
    border-top: 1px solid @group-border-color;
    border-left: 1px solid @group-border-color;
    border-right: 1px solid @group-border-color;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.resource-group {
    padding: @padding;
    margin-bottom: @padding;
    border: 1px solid @group-border-color;
    border-radius: @border-radius;

    h2, .heading a {
        padding: @padding;
        margin: -@padding -@padding @padding -@padding;
        background-color: @group-background-color;
        border-bottom: 1px solid @group-border-color;
        border-top-left-radius: @border-radius;
        border-top-right-radius: @border-radius;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

nav .resource-group{
  .heading a {
    margin-bottom: 0;
  }

  .collapse-content {
    padding: 0;
  }
}

.action {
    margin-bottom: @padding;
    padding: @padding @padding 0 @padding;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: @border-radius;

    h4 {
        padding: @padding;
        margin: -@padding -@padding @padding -@padding;
        border-bottom: 1px solid transparent;
        border-top-left-radius: @border-radius;
        border-top-right-radius: @border-radius;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        .name {
            float: right;
            font-weight: normal;
        }

        .method {
            padding: @padding / 2 @padding;
            margin-right: @padding;
            border-radius: 3px;

            &.get {
                color: contrast(@get-color);
                background-color: @get-color;
            }

            &.head {
                color: contrast(@head-color);
                background-color: @head-color;
            }

            &.options {
                color: contrast(@options-color);
                background-color: @options-color;
            }

            &.put {
                color: contrast(@put-color);
                background-color: @put-color;
            }

            &.patch {
                color: contrast(@patch-color);
                background-color: @patch-color;
            }

            &.post {
                color: contrast(@post-color);
                background-color: @post-color;
            }

            &.delete {
                color: contrast(@delete-color);
                background-color: @delete-color;
            }
        }

        code {
            color: @title-code-text-color;
            background-color: @title-code-background-color;
            border-color: @title-code-border-color;
        }
    }

    .title {
        border-bottom: 1px solid @group-background-color;
        margin: 0 -@padding -1px -@padding;
        padding: @padding;
    }

    &.get {
        border-color: @get-border-color;

        h4 {
            color: @get-color;
            background: @get-background-color;
            border-bottom-color: @get-border-color;
        }
    }

    &.head {
        border-color: @head-border-color;

        h4 {
            color: @head-color;
            background: @head-background-color;
            border-bottom-color: @head-border-color;
        }
    }

    &.options {
        border-color: @options-border-color;

        h4 {
            color: @options-color;
            background: @options-background-color;
            border-bottom-color: @options-border-color;
        }
    }

    &.post {
        border-color: @post-border-color;

        h4 {
            color: @post-color;
            background: @post-background-color;
            border-bottom-color: @post-border-color;
        }
    }

    &.put {
        border-color: @put-border-color;

        h4 {
            color: @put-color;
            background: @put-background-color;
            border-bottom-color: @put-border-color;
        }
    }

    &.patch {
        border-color: @patch-border-color;

        h4 {
            color: @patch-color;
            background: @patch-background-color;
            border-bottom-color: @patch-border-color;
        }
    }

    &.delete {
        border-color: @delete-border-color;

        h4 {
            color: @delete-color;
            background: @delete-background-color;
            border-bottom-color: @delete-border-color;
        }
    }
}