in with the new

src/style/_authorize.scss

@@ -0,0 +1,80 @@
+.auth-btn-wrapper
+{
+    display: flex;
+
+    padding: 10px 0;
+
+    justify-content: center;
+}
+
+.auth-wrapper
+{
+    display: flex;
+
+    flex: 1;
+    justify-content: flex-end;
+
+    .authorize
+    {
+        padding-right: 20px;
+    }
+}
+
+.auth-container
+{
+    margin: 0 0 10px 0;
+    padding: 10px 20px;
+
+    border-bottom: 1px solid #ebebeb;
+
+    &:last-of-type
+    {
+        margin: 0;
+        padding: 10px 20px;
+
+        border: 0;
+    }
+
+    h4
+    {
+        margin: 5px 0 15px 0 !important;
+    }
+
+    .wrapper
+    {
+        margin: 0;
+        padding: 0;
+    }
+
+    input[type=text],
+    input[type=password]
+    {
+        min-width: 230px;
+    }
+
+    .errors
+    {
+        font-size: 12px;
+
+        padding: 10px;
+
+        border-radius: 4px;
+
+        @include text_code();
+    }
+}
+
+.scopes
+{
+    h2
+    {
+        font-size: 14px;
+
+        @include text_headline();
+    }
+}
+
+.scope-def
+{
+    padding: 0 0 20px 0;
+}

src/style/_buttons.scss

@@ -0,0 +1,170 @@
+.btn
+{
+    font-size: 14px;
+    font-weight: bold;
+
+    padding: 5px 23px;
+
+    transition: all .3s;
+
+    border: 2px solid #888;
+    border-radius: 4px;
+    background: transparent;
+    box-shadow: 0 1px 2px rgba(#000,.1);
+
+    @include text_headline();
+
+    &[disabled]
+    {
+        cursor: not-allowed;
+
+        opacity: .3;
+    }
+
+    &:hover
+    {
+        box-shadow: 0 0 5px rgba(#000,.3);
+    }
+
+    &.cancel
+    {
+        border-color: #ff6060;
+
+        @include text_headline(#ff6060);
+    }
+
+    &.authorize
+    {
+        line-height: 1;
+
+        display: inline;
+
+        color: $_color-post;
+        border-color: $_color-post;
+
+
+        span
+        {
+            float: left;
+
+            padding: 4px 20px 0 0;
+        }
+
+        svg
+        {
+            fill: $_color-post;
+        }
+    }
+
+    &.execute
+    {
+        animation: pulse 2s infinite;
+
+        color: #fff;
+        border-color: #4990e2;
+    }
+}
+
+
+@keyframes pulse
+{
+    0%
+    {
+        color: #fff;
+        background: #4990e2;
+        box-shadow: 0 0 0 0 rgba(#4990e2, .8);
+    }
+    70%
+    {
+        //color: #4990e2;
+        //background: transparent;
+        box-shadow: 0 0 0 5px rgba(#4990e2, 0);
+    }
+    100%
+    {
+        color: #fff;
+        background: #4990e2;
+        box-shadow: 0 0 0 0 rgba(#4990e2, 0);
+    }
+}
+
+.btn-group
+{
+    display: flex;
+
+    padding: 30px;
+
+    .btn
+    {
+        flex: 1;
+
+        &:first-child
+        {
+            border-radius: 4px 0 0 4px;
+        }
+
+        &:last-child
+        {
+            border-radius: 0 4px 4px 0;
+        }
+    }
+}
+
+.authorization__btn
+{
+    padding: 0 10px;
+
+    border: none;
+    background: none;
+
+    &.locked
+    {
+        opacity: 1;
+    }
+
+    &.unlocked
+    {
+        opacity: .4;
+    }
+}
+
+.expand-methods,
+.expand-operation
+{
+    border: none;
+    background: none;
+
+    svg
+    {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.expand-methods
+{
+    padding: 0 10px;
+
+    &:hover
+    {
+        svg
+        {
+            fill: #444;
+        }
+    }
+
+    svg
+    {
+        transition: all .3s;
+
+        fill: #777;
+    }
+}
+
+
+button
+{
+    cursor: pointer;
+
+    outline: none;
+}

src/style/_colors.scss

@@ -0,0 +1,11 @@
+// Methods
+$_color-post: #49cc90;
+$_color-get: #61affe;
+$_color-put: #fca130;
+$_color-delete: #f93e3e;
+$_color-head: #9012fe;
+$_color-patch: #50e3c2;
+$_color-disabled: #ebebeb;
+$_color-options: #0d5aa7;
+
+$methods: (post: $_color-post),(get: $_color-get), (put: $_color-put),(delete: $_color-delete),(head: $_color-head),(patch: $_color-patch),(deprecated: $_color-disabled),(options: $_color-options)

src/style/_errors.scss

@@ -0,0 +1,57 @@
+.errors-wrapper
+{
+    margin: 20px;
+    padding: 10px 20px;
+
+    animation: scaleUp .5s;
+
+    border: 2px solid $_color-delete;
+    border-radius: 4px;
+    background: rgba($_color-delete, .1);
+
+    .errors
+    {
+        h4
+        {
+            font-size: 14px;
+
+            margin: 0 0 10px 0;
+
+            @include text_code();
+        }
+    }
+
+    hgroup
+    {
+        display: flex;
+
+        align-items: center;
+
+        h4
+        {
+            font-size: 20px;
+
+            margin: 0;
+
+            flex: 1;
+            @include text_headline();
+        }
+    }
+}
+
+
+@keyframes scaleUp
+{
+    0%
+    {
+        transform: scale(.8);
+
+        opacity: 0;
+    }
+    100%
+    {
+        transform: scale(1);
+
+        opacity: 1;
+    }
+}

src/style/_form.scss

@@ -0,0 +1,188 @@
+select
+{
+    font-size: 14px;
+    font-weight: bold;
+
+    padding: 5px 40px 5px 10px;
+
+    border: 2px solid #41444e;
+    border-radius: 4px;
+    background: #f7f7f7 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+ICAgIDxwYXRoIGQ9Ik0xMy40MTggNy44NTljLjI3MS0uMjY4LjcwOS0uMjY4Ljk3OCAwIC4yNy4yNjguMjcyLjcwMSAwIC45NjlsLTMuOTA4IDMuODNjLS4yNy4yNjgtLjcwNy4yNjgtLjk3OSAwbC0zLjkwOC0zLjgzYy0uMjctLjI2Ny0uMjctLjcwMSAwLS45NjkuMjcxLS4yNjguNzA5LS4yNjguOTc4IDBMMTAgMTFsMy40MTgtMy4xNDF6Ii8+PC9zdmc+) right 10px center no-repeat;
+    background-size: 20px;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,.25);
+
+    @include text_headline();
+    appearance: none;
+
+    &[multiple]
+    {
+        margin: 5px 0;
+        padding: 5px;
+
+        background: #f7f7f7;
+    }
+}
+
+.opblock-body select
+{
+    min-width: 230px;
+}
+
+label
+{
+    font-size: 12px;
+    font-weight: bold;
+
+    margin: 0 0 5px 0;
+
+    @include text_headline();
+}
+
+
+input[type=text],
+input[type=password],
+input[type=search],
+input[type=email]
+{
+    min-width: 100px;
+    margin: 5px 0;
+    padding: 8px 10px;
+
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background: #fff;
+
+    &.invalid
+    {
+        animation: shake .4s 1;
+
+        border-color: $_color-delete;
+        background: lighten($_color-delete, 35%);
+    }
+}
+
+@keyframes shake
+{
+    10%,
+    90%
+    {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80%
+    {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70%
+    {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60%
+    {
+        transform: translate3d(4px, 0, 0);
+    }
+}
+
+textarea
+{
+    font-size: 12px;
+
+    width: 100%;
+    min-height: 280px;
+    padding: 10px;
+
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    background: rgba(#fff,.8);
+
+    @include text_code();
+
+    &:focus
+    {
+        border: 2px solid $_color-get;
+    }
+
+    &.curl
+    {
+        font-size: 12px;
+
+        min-height: 100px;
+        margin: 0;
+        padding: 10px;
+
+        resize: none;
+
+        border-radius: 4px;
+        background: #41444e;
+
+        @include text_code(#fff);
+    }
+}
+
+
+.checkbox
+{
+    padding: 5px 0 10px;
+
+    transition: opacity .5s;
+
+    color: #333;
+
+    label
+    {
+        display: flex;
+    }
+
+    p
+    {
+        font-weight: normal !important;
+        font-style: italic;
+
+        margin: 0 !important;
+
+        @include text_code();
+    }
+
+    input[type=checkbox]
+    {
+        display: none;
+
+        & + label > .item
+        {
+            position: relative;
+            top: 3px;
+
+            display: inline-block;
+
+            width: 16px;
+            height: 16px;
+            margin: 0 8px 0 0;
+            padding: 5px;
+
+            cursor: pointer;
+
+            border-radius: 1px;
+            background: #e8e8e8;
+            box-shadow: 0 0 0 2px #e8e8e8;
+
+            flex: none;
+
+            &:active
+            {
+                transform: scale(.9);
+            }
+        }
+
+        &:checked + label > .item
+        {
+            background: #e8e8e8 url(data:image/svg+xml,%0A%3Csvg%20width%3D%2210px%22%20height%3D%228px%22%20viewBox%3D%223%207%2010%208%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-34%22%20stroke%3D%22none%22%20fill%3D%22%2341474E%22%20fill-rule%3D%22evenodd%22%20points%3D%226.33333333%2015%203%2011.6666667%204.33333333%2010.3333333%206.33333333%2012.3333333%2011.6666667%207%2013%208.33333333%22%3E%3C/polygon%3E%0A%3C/svg%3E) center center no-repeat;
+        }
+    }
+}

src/style/_information.scss

@@ -0,0 +1,94 @@
+
+
+
+.info
+{
+    margin: 50px 0;
+
+    hgroup.main
+    {
+        margin: 0 0 20px 0;
+        a
+        {
+            font-size: 12px;
+        }
+    }
+    p
+    {
+        font-size: 14px;
+
+        @include text_body();
+    }
+
+    code
+    {
+        padding: 3px 5px;
+
+        border-radius: 4px;
+        background: rgba(#000,.05);
+
+        @include text_code(#9012fe);
+    }
+
+    a
+    {
+        font-size: 14px;
+
+        transition: all .4s;
+
+        @include text_body(#4990e2);
+
+        &:hover
+        {
+            color: darken(#4990e2, 15%);
+        }
+    }
+    > div
+    {
+        margin: 0 0 5px 0;
+    }
+
+    .base-url
+    {
+        font-size: 12px;
+        font-weight: 300 !important;
+
+        margin: 0;
+
+        @include text_code();
+    }
+
+    .title
+    {
+        font-size: 36px;
+
+        margin: 0;
+
+        @include text_body();
+
+        small
+        {
+            font-size: 10px;
+
+            position: relative;
+            top: -5px;
+
+            display: inline-block;
+
+            margin: 0 0 0 5px;
+            padding: 2px 4px;
+
+            vertical-align: super;
+
+            border-radius: 57px;
+            background: #7d8492;
+
+            pre
+            {
+                margin: 0;
+
+                @include text_headline(#fff);
+            }
+        }
+    }
+}

src/style/_layout.scss

@@ -0,0 +1,581 @@
+html
+{
+    box-sizing: border-box;
+}
+*,
+*:before,
+*:after
+{
+    box-sizing: inherit;
+}
+
+body
+{
+    margin: 0;
+
+    background: #fafafa;
+}
+
+.wrapper
+{
+    width: 100%;
+    max-width: 1460px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.opblock-tag-section
+{
+    display: flex;
+    flex-direction: column;
+
+    &.is-open
+    {
+        .opblock-tag
+        {
+            // svg
+            // {
+            //     -moz-transform: rotate(90deg);
+            //          transform: rotate(90deg);
+            // }
+        }
+    }
+}
+
+.opblock-tag
+{
+    display: flex;
+
+    padding: 10px 20px 10px 10px;
+
+    cursor: pointer;
+    transition: all .2s;
+
+    border-bottom: 1px solid rgba(#3b4151, .3);
+
+    align-items: center;
+
+    &:hover
+    {
+        background: rgba(#000,.02);
+    }
+}
+
+@mixin method($color)
+{
+    border-color: $color;
+    background: rgba($color, .1);
+
+    .opblock-summary-method
+    {
+        background: $color;
+    }
+
+    .opblock-summary
+    {
+        border-color: $color;
+    }
+}
+
+
+
+
+.opblock-tag
+{
+    font-size: 24px;
+
+    margin: 0 0 5px 0;
+
+    @include text_headline();
+
+    &.no-desc
+    {
+        span
+        {
+            flex: 1;
+        }
+    }
+
+    svg
+    {
+        transition: all .4s;
+    }
+
+    small
+    {
+        font-size: 14px;
+        font-weight: normal;
+
+        padding: 0 10px;
+
+        flex: 1;
+        @include text_body();
+    }
+}
+
+.parаmeter__type
+{
+    font-size: 12px;
+
+    padding: 5px 0;
+
+    @include text_code();
+}
+
+.view-line-link
+{
+    position: relative;
+    top: 3px;
+
+    width: 20px;
+    margin: 0 5px;
+
+    cursor: pointer;
+    transition: all .5s;
+}
+
+.opblock
+{
+    margin: 0 0 15px 0;
+
+    border: 1px solid #000;
+    border-radius: 4px;
+    box-shadow: 0 0 3px rgba(#000,.19);
+
+
+    &.is-open
+    {
+        .opblock-summary
+        {
+            border-bottom: 1px solid #000;
+        }
+    }
+
+    .opblock-section-header
+    {
+        display: flex;
+
+        padding: 8px 20px;
+
+        background: rgba(#fff,.8);
+        box-shadow: 0 1px 2px rgba(#000,.1);
+
+        align-items: center;
+
+        label
+        {
+            font-size: 12px;
+            font-weight: bold;
+
+            display: flex;
+
+            margin: 0;
+
+            align-items: center;
+            @include text_headline();
+
+            span
+            {
+                padding: 0 10px 0 0;
+            }
+        }
+
+        h4
+        {
+            font-size: 14px;
+
+            margin: 0;
+
+            flex: 1;
+            @include text_headline();
+        }
+    }
+
+    .opblock-summary-method
+    {
+        font-size: 14px;
+        font-weight: bold;
+
+        min-width: 80px;
+        padding: 6px 15px;
+
+        text-align: center;
+
+        border-radius: 3px;
+        background: #000;
+        text-shadow: 0 1px 0 rgba(#000,.1);
+
+        @include text_headline(#fff);
+    }
+
+    .opblock-summary-path,
+    .opblock-summary-path__deprecated
+    {
+        font-size: 16px;
+
+        display: flex;
+
+        padding: 0 10px;
+
+        @include text_code();
+        align-items: center;
+
+        .view-line-link
+        {
+            position: relative;
+            top: 2px;
+
+            width: 0;
+            margin: 0;
+
+            cursor: pointer;
+            transition: all .5s;
+        }
+
+        &:hover
+        {
+            .view-line-link
+            {
+                width: 18px;
+                margin: 0 5px;
+            }
+        }
+    }
+
+    .opblock-summary-path__deprecated
+    {
+        text-decoration: line-through;
+    }
+
+    .opblock-summary-description
+    {
+        font-size: 13px;
+
+        flex: 1;
+        @include text_body();
+    }
+
+    .opblock-summary
+    {
+        display: flex;
+
+        padding: 5px;
+
+        cursor: pointer;
+
+        align-items: center;
+    }
+
+    &.opblock-post
+    {
+        @include method($_color-post);
+    }
+
+    &.opblock-put
+    {
+        @include method($_color-put);
+    }
+
+    &.opblock-delete
+    {
+        @include method($_color-delete);
+    }
+
+    &.opblock-get
+    {
+        @include method($_color-get);
+    }
+
+    &.opblock-deprecated
+    {
+        opacity: .6;
+
+        @include method($_color-disabled);
+    }
+}
+
+
+.tab
+{
+    display: flex;
+
+    margin: 20px 0 10px 0;
+    padding: 0;
+
+    list-style: none;
+
+    li
+    {
+        font-size: 12px;
+
+        min-width: 100px;
+        min-width: 90px;
+        padding: 0;
+
+        cursor: pointer;
+
+        @include text_headline();
+
+        &:first-of-type
+        {
+            position: relative;
+
+            padding-left: 0;
+
+            &:after
+            {
+                position: absolute;
+                top: 0;
+                right: 6px;
+
+                width: 1px;
+                height: 100%;
+
+                content: '';
+
+                background: rgba(#000,.2);
+            }
+        }
+
+        &.active
+        {
+            font-weight: bold;
+        }
+    }
+}
+
+.opblock-description-wrapper,
+.opblock-title_normal
+{
+    font-size: 12px;
+
+    margin: 0 0 5px 0;
+    padding: 15px 20px;
+
+    @include text_body();
+
+    h4
+    {
+        font-size: 12px;
+
+        margin: 0 0 5px 0;
+
+        @include text_body();
+    }
+
+    p
+    {
+        font-size: 14px;
+
+        margin: 0;
+
+        @include text_body();
+    }
+}
+
+.execute-wrapper
+{
+    padding: 20px;
+
+    text-align: right;
+
+    .btn
+    {
+        width: 100%;
+        padding: 8px 40px;
+    }
+}
+
+.body-param-options
+{
+    display: flex;
+    flex-direction: column;
+
+    .body-param-edit
+    {
+        padding: 10px 0;
+    }
+
+    label
+    {
+        padding: 8px 0;
+        select
+        {
+            margin: 3px 0 0 0;
+        }
+    }
+}
+
+.responses-inner
+{
+    padding: 20px;
+
+    h5,
+    h4
+    {
+        font-size: 12px;
+
+        margin: 10px 0 5px 0;
+
+        @include text_body();
+    }
+}
+
+.response-col_status
+{
+    font-size: 14px;
+
+    @include text_body();
+
+    .response-undocumented
+    {
+        font-size: 11px;
+
+        @include text_code(#999);
+    }
+}
+
+.response-col_description__inner
+{
+    span
+    {
+        font-size: 12px;
+        font-style: italic;
+
+        display: block;
+
+        margin: 10px 0;
+        padding: 10px;
+
+        border-radius: 4px;
+        background: #41444e;
+
+        @include text_code(#fff);
+
+        p
+        {
+            margin: 0;
+        }
+    }
+}
+
+
+.opblock-body pre
+{
+    font-size: 12px;
+
+    margin: 0;
+    padding: 10px;
+
+    border-radius: 4px;
+    background: #41444e;
+
+    @include text_code(#fff);
+    span
+    {
+        color: #fff !important;
+    }
+}
+
+.scheme-container
+{
+    margin: 0 0 20px 0;
+    padding: 30px 0;
+
+    background: #fff;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
+
+    .schemes
+    {
+        display: flex;
+
+        align-items: center;
+
+        > label
+        {
+            font-size: 12px;
+            font-weight: bold;
+
+            display: flex;
+            flex-direction: column;
+
+            margin: -20px 15px 0 0;
+
+            @include text_headline();
+
+            select
+            {
+                min-width: 130px;
+
+                text-transform: uppercase;
+            }
+        }
+    }
+}
+
+
+.loading-container
+{
+    padding: 40px 0 60px;
+    .loading
+    {
+        position: relative;
+
+
+        &:after
+        {
+            font-size: 10px;
+            font-weight: bold;
+
+            position: absolute;
+            top: 50%;
+            left: 50%;
+
+            content: 'loading';
+            transform: translate(-50%,-50%);
+            text-transform: uppercase;
+
+            @include text_headline();
+        }
+
+        &:before
+        {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+
+            display: block;
+
+            width: 60px;
+            height: 60px;
+            margin: -30px -30px;
+
+            content: '';
+            animation: rotation 1s infinite linear, opacity .5s;
+
+            opacity: 1;
+            border: 2px solid rgba(#555, .1);
+            border-top-color: rgba(#000, .6);
+            border-radius: 100%;
+
+            backface-visibility: hidden;
+
+            @keyframes rotation
+            {
+                to
+                {
+                    transform: rotate(360deg);
+                }
+            }
+        }
+    }
+}
+
+
+@keyframes blinker
+{
+    50%
+    {
+        opacity: 0;
+    }
+}

src/style/_mixins.scss

@@ -0,0 +1,168 @@
+// - - - - - - - - - - - - - - - - - - -
+// - - _mixins.scss module
+// styles for the _mixins.scss module
+@function calculateRem($size)
+{
+    $remSize: $size / 16px;
+    @return $remSize * 1rem;
+}
+
+@mixin font-size($size)
+{
+    font-size: $size;
+    font-size: calculateRem($size);
+}
+
+%clearfix
+{
+    *zoom: 1;
+    &:before,
+    &:after
+    {
+        display: table;
+
+        content: ' ';
+    }
+    &:after
+    {
+        clear: both;
+    }
+}
+
+@mixin size($width, $height: $width)
+{
+    width: $width;
+    height: $height;
+}
+
+$ease: (
+  in-quad:      cubic-bezier(.550,  .085, .680, .530),
+  in-cubic:     cubic-bezier(.550,  .055, .675, .190),
+  in-quart:     cubic-bezier(.895,  .030, .685, .220),
+  in-quint:     cubic-bezier(.755,  .050, .855, .060),
+  in-sine:      cubic-bezier(.470,  .000, .745, .715),
+  in-expo:      cubic-bezier(.950,  .050, .795, .035),
+  in-circ:      cubic-bezier(.600,  .040, .980, .335),
+  in-back:      cubic-bezier(.600, -.280, .735, .045),
+  out-quad:     cubic-bezier(.250,  .460, .450, .940),
+  out-cubic:    cubic-bezier(.215,  .610, .355, 1.000),
+  out-quart:    cubic-bezier(.165,  .840, .440, 1.000),
+  out-quint:    cubic-bezier(.230,  1.000, .320, 1.000),
+  out-sine:     cubic-bezier(.390,  .575, .565, 1.000),
+  out-expo:     cubic-bezier(.190,  1.000, .220, 1.000),
+  out-circ:     cubic-bezier(.075,  .820, .165, 1.000),
+  out-back:     cubic-bezier(.175,  .885, .320, 1.275),
+  in-out-quad:  cubic-bezier(.455,  .030, .515, .955),
+  in-out-cubic: cubic-bezier(.645,  .045, .355, 1.000),
+  in-out-quart: cubic-bezier(.770,  .000, .175, 1.000),
+  in-out-quint: cubic-bezier(.860,  .000, .070, 1.000),
+  in-out-sine:  cubic-bezier(.445,  .050, .550, .950),
+  in-out-expo:  cubic-bezier(1.000,  .000, .000, 1.000),
+  in-out-circ:  cubic-bezier(.785,  .135, .150, .860),
+  in-out-back:  cubic-bezier(.680, -.550, .265, 1.550)
+);
+
+@function ease($key)
+{
+    @if map-has-key($ease, $key)
+    {
+        @return map-get($ease, $key);
+    }
+
+    @warn 'Unkown \'#{$key}\' in $ease.';
+    @return null;
+}
+
+
+@mixin ease($key)
+{
+    transition-timing-function: ease($key);
+}
+
+@mixin text-truncate
+{
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+@mixin aspect-ratio($width, $height)
+{
+    position: relative;
+    &:before
+    {
+        display: block;
+
+        width: 100%;
+        padding-top: ($height / $width) * 100%;
+
+        content: '';
+    }
+    > iframe
+    {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+$browser-context: 16;
+
+@function em($pixels, $context: $browser-context)
+{
+    @if (unitless($pixels))
+    {
+        $pixels: $pixels * 1px;
+    }
+
+    @if (unitless($context))
+    {
+        $context: $context * 1px;
+    }
+
+    @return $pixels / $context * 1em;
+}
+
+@mixin maxHeight($height)
+{
+    @media (max-height: $height)
+    {
+        @content;
+    }
+}
+
+
+@mixin breakpoint($class)
+{
+    @if $class == tablet
+    {
+        @media (min-width: 768px) and (max-width: 1024px)
+        {
+            @content;
+        }
+    }
+
+    @else if $class == mobile
+    {
+        @media (min-width: 320px) and (max-width : 736px)
+        {
+            @content;
+        }
+    }
+
+    @else if $class == desktop
+    {
+        @media (min-width: 1400px)
+        {
+            @content;
+        }
+    }
+
+    @else
+    {
+        @warn 'Breakpoint mixin supports: tablet, mobile, desktop';
+    }
+}

src/style/_modal.scss

@@ -0,0 +1,102 @@
+.dialog-ux
+{
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    .backdrop-ux
+    {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        background: rgba(#000,.8);
+    }
+
+    .modal-ux
+    {
+        position: absolute;
+        z-index: 9999;
+        top: 50%;
+        left: 50%;
+
+        width: 100%;
+        min-width: 300px;
+        max-width: 650px;
+
+        transform: translate(-50%,-50%);
+
+        border: 1px solid #ebebeb;
+        border-radius: 4px;
+        background: #fff;
+        box-shadow: 0 10px 30px 0 rgba(0,0,0,.20);
+    }
+
+    .modal-ux-content
+    {
+        overflow-y: auto;
+
+        max-height: 540px;
+        padding: 20px;
+
+        p
+        {
+            font-size: 12px;
+
+            margin: 0 0 5px 0;
+
+            color: #41444e;
+
+            @include text_body();
+        }
+
+        h4
+        {
+            font-size: 18px;
+            font-weight: 600;
+
+            margin: 15px 0 0 0;
+
+            @include text_headline();
+        }
+    }
+
+    .modal-ux-header
+    {
+        display: flex;
+
+        padding: 12px 0;
+
+        border-bottom: 1px solid #ebebeb;
+
+        align-items: center;
+
+        .close-modal
+        {
+            padding: 0 10px;
+
+            border: none;
+            background: none;
+
+            appearance: none;
+        }
+
+
+        h3
+        {
+            font-size: 20px;
+            font-weight: 600;
+
+            margin: 0;
+            padding: 0 20px;
+
+            flex: 1;
+            @include text_headline();
+        }
+    }
+}

src/style/_models.scss

@@ -0,0 +1,234 @@
+.model
+{
+    font-size: 12px;
+    font-weight: 300;
+
+    @include text_code();
+    &-toggle
+    {
+        font-size: 10px;
+
+        position: relative;
+        top: 6px;
+
+        display: inline-block;
+
+        margin: auto .3em;
+
+        cursor: pointer;
+        transition: transform .15s ease-in;
+        transform: rotate(90deg);
+        transform-origin: 50% 50%;
+
+        &.collapsed
+        {
+            transform: rotate(0deg);
+        }
+
+        &:after
+        {
+            display: block;
+
+            width: 20px;
+            height: 20px;
+
+            content: '';
+
+            background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%0A%3C/svg%3E%0A) center center no-repeat;
+            background-size: 100%;
+        }
+    }
+
+    &-jump-to-path
+    {
+        position: relative;
+
+        cursor: pointer;
+
+        .view-line-link
+        {
+            position: absolute;
+            top: -.4em;
+
+            cursor: pointer;
+        }
+    }
+
+    &-title
+    {
+        position: relative;
+
+        &:hover .model-hint
+        {
+            visibility: visible;
+        }
+    }
+
+    &-hint
+    {
+        position: absolute;
+        top: -1.8em;
+
+        visibility: hidden;
+
+        padding: .1em .5em;
+
+        white-space: nowrap;
+
+        color: #ebebeb;
+        border-radius: 4px;
+        background: rgba(#000,.7);
+    }
+}
+
+
+section.models
+{
+    margin: 30px 0;
+
+    border: 1px solid rgba(#3b4151, .3);
+    border-radius: 4px;
+
+    &.is-open
+    {
+        padding: 0 0 20px;
+        h4
+        {
+            margin: 0 0 5px 0;
+
+            border-bottom: 1px solid rgba(#3b4151, .3);
+
+
+            svg
+            {
+                transform: rotate(90deg);
+            }
+        }
+    }
+    h4
+    {
+        font-size: 16px;
+
+        display: flex;
+
+        margin: 0;
+        padding: 10px 20px 10px 10px;
+
+        cursor: pointer;
+        transition: all .2s;
+
+        @include text_headline(#777);
+        align-items: center;
+
+        svg
+        {
+            transition: all .4s;
+        }
+
+        span
+        {
+            flex: 1;
+        }
+
+        &:hover
+        {
+            background: rgba(#000,.02);
+        }
+    }
+
+    h5
+    {
+        font-size: 16px;
+
+        margin: 0 0 10px 0;
+
+        @include text_headline(#777);
+    }
+
+    .model-jump-to-path
+    {
+        position: relative;
+        top: 5px;
+    }
+
+    .model-container
+    {
+        margin: 0 20px 15px;
+
+        transition: all .5s;
+
+        border-radius: 4px;
+        background: rgba(#000,.05);
+
+        &:hover
+        {
+            background: rgba(#000,.07);
+        }
+
+        &:first-of-type
+        {
+            margin: 20px;
+        }
+
+        &:last-of-type
+        {
+            margin: 0 20px;
+        }
+    }
+
+    .model-box
+    {
+        background: none;
+    }
+}
+
+
+.model-box
+{
+    padding: 10px;
+
+    border-radius: 4px;
+    background: rgba(#000,.1);
+
+    .model-jump-to-path
+    {
+        position: relative;
+        top: 4px;
+    }
+}
+
+
+.model-title
+{
+    font-size: 16px;
+
+    @include text_headline(#555);
+}
+
+
+span
+{
+    > span.model
+    {
+        padding: 0 0 0 10px;
+
+        .brace-close
+        {
+            padding: 0 0 0 10px;
+        }
+    }
+}
+
+.prop-type
+{
+    color: #55a;
+}
+
+.prop-enum
+{
+    display: block;
+}
+.prop-format
+{
+    color: #999;
+}

src/style/_table.scss

@@ -0,0 +1,141 @@
+table
+{
+    width: 100%;
+    padding: 0 10px;
+
+    border-collapse: collapse;
+
+    &.model
+    {
+        tbody
+        {
+            tr
+            {
+                td
+                {
+                    padding: 0;
+
+                    vertical-align: top;
+
+                    &:first-of-type
+                    {
+                        width: 100px;
+                        padding: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    &.headers
+    {
+        td
+        {
+            font-size: 12px;
+            font-weight: 300;
+
+            vertical-align: middle;
+
+            @include text_code();
+        }
+    }
+
+    tbody
+    {
+        tr
+        {
+            td
+            {
+                padding: 10px 0 0 0;
+
+                vertical-align: top;
+
+                &:first-of-type
+                {
+                    width: 20%;
+                    padding: 10px 0;
+                }
+            }
+        }
+    }
+
+    thead
+    {
+        tr
+        {
+            th,
+            td
+            {
+                font-size: 12px;
+                font-weight: bold;
+
+                padding: 12px 0;
+
+                text-align: left;
+
+                border-bottom: 1px solid rgba(#3b4151, .2);
+
+                @include text_body();
+            }
+        }
+    }
+}
+
+.parameters-col_description
+{
+    p
+    {
+        font-size: 14px;
+
+        margin: 0;
+
+        @include text_body();
+    }
+
+    input[type=text]
+    {
+        width: 100%;
+        max-width: 340px;
+    }
+}
+
+.parameter__name
+{
+    font-size: 16px;
+    font-weight: normal;
+
+    @include text_headline();
+
+    &.required
+    {
+        font-weight: bold;
+
+        &:after
+        {
+            font-size: 10px;
+
+            position: relative;
+            top: -6px;
+
+            padding: 5px;
+
+            content: 'required';
+
+            color: rgba(#f00, .6);
+        }
+    }
+}
+
+.parameter__in
+{
+    font-size: 12px;
+    font-style: italic;
+
+    @include text_code(#888);
+}
+
+
+.table-container
+{
+    padding: 20px;
+}

src/style/_topbar.scss

@@ -0,0 +1,60 @@
+.topbar
+{
+    padding: 8px 30px;
+
+    background-color: #89bf04;
+    .topbar-wrapper
+    {
+        display: flex;
+
+        align-items: center;
+    }
+    a
+    {
+        font-size: 1.5em;
+        font-weight: bold;
+
+        display: flex;
+
+        text-decoration: none;
+
+        flex: 1;
+        align-items: center;
+        @include text_headline(#fff);
+
+        span
+        {
+            margin: 0;
+            padding: 0 10px;
+        }
+    }
+
+    .download-url-wrapper
+    {
+        display: flex;
+
+        input[type=text]
+        {
+            min-width: 350px;
+            margin: 0;
+
+            border: 2px solid #547f00;
+            border-radius: 4px 0 0 4px;
+            outline: none;
+        }
+
+        .download-url-button
+        {
+            font-size: 16px;
+            font-weight: bold;
+
+            padding: 4px 40px;
+
+            border: none;
+            border-radius: 0 4px 4px 0;
+            background: #547f00;
+
+            @include text_headline(#fff);
+        }
+    }
+}

src/style/_type.scss

@@ -0,0 +1,21 @@
+@mixin text_body($color: #3b4151)
+{
+    font-family: 'Open Sans', sans-serif;
+
+    color: $color;
+}
+
+@mixin text_code($color: #3b4151)
+{
+    font-family: 'Source Code Pro', monospace;
+    font-weight: 600;
+
+    color: $color;
+}
+
+@mixin text_headline($color: #3b4151)
+{
+    font-family: 'Titillium Web', sans-serif;
+
+    color: $color;
+}

src/style/main.scss

@@ -0,0 +1,17 @@
+.swagger-ui
+{
+    @import 'mixins';
+    @import 'variables';
+    @import 'colors';
+    @import 'type';
+    @import 'layout';
+    @import 'buttons';
+    @import 'form';
+    @import 'modal';
+    @import 'models';
+    @import 'table';
+    @import 'topbar';
+    @import 'information';
+    @import 'authorize';
+    @import 'errors';
+}