diff --git a/README.md b/README.md index c39f95b2..e8376d83 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # ReDoc [![Build Status](https://travis-ci.org/Rebilly/ReDoc.svg?branch=master)](https://travis-ci.org/Rebilly/ReDoc) [![Coverage Status](https://coveralls.io/repos/Rebilly/ReDoc/badge.svg?branch=master&service=github)](https://coveralls.io/github/Rebilly/ReDoc?branch=master) [![Code Climate](https://codeclimate.com/github/Rebilly/ReDoc/badges/gpa.svg)](https://codeclimate.com/github/Rebilly/ReDoc) [![David](https://david-dm.org/Rebilly/ReDoc/dev-status.svg)](https://david-dm.org/Rebilly/ReDoc#info=devDependencies) [![Stories in Ready](https://badge.waffle.io/Rebilly/ReDoc.png?label=ready&title=Ready)](https://waffle.io/Rebilly/ReDoc) -[![npm](http://img.shields.io/npm/v/redoc.svg)](https://www.npmjs.com/package/swagger-parser) [![Bower](http://img.shields.io/bower/v/redoc.svg)](http://bower.io/) [![License](https://img.shields.io/npm/l/redoc.svg)](https://github.com/Rebilly/ReDoc/blob/master/LICENSE) +[![npm](http://img.shields.io/npm/v/redoc.svg)](https://www.npmjs.com/package/redoc) [![Bower](http://img.shields.io/bower/v/redoc.svg)](http://bower.io/) [![License](https://img.shields.io/npm/l/redoc.svg)](https://github.com/Rebilly/ReDoc/blob/master/LICENSE) [![Browser Compatibility](https://saucelabs.com/browser-matrix/redoc.svg)](https://saucelabs.com/u/redoc) diff --git a/demo/main.css b/demo/main.css index 8e9a6df3..269620f7 100644 --- a/demo/main.css +++ b/demo/main.css @@ -1,99 +1,121 @@ +@import url(http://fonts.googleapis.com/css?family=#{$base-font}:#{$light},#{$regular},#{$bold}); +@import url(http://fonts.googleapis.com/css?family=#{$headers-font}:#{$light},#{$regular}); + body { - font-family: Verdana, Geneva, sans-serif; - font-size: 14px; - color: #333; - margin: 0; - line-height: 1.5; - padding-top: 50px; + margin: 0; + padding-top: 50px; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -moz-tap-highlight-color: rgba(0,0,0,0); + -ms-tap-highlight-color: rgba(0,0,0,0); + -o-tap-highlight-color: rgba(0,0,0,0); + tap-highlight-color: rgba(0,0,0,0); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-smoothing: antialiased; + -webkit-osx-font-smoothing: grayscale; + -moz-osx-font-smoothing: grayscale; + osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; + -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.004); + -ms-text-shadow: 1px 1px 1px rgba(0,0,0,0.004); + text-shadow: 1px 1px 1px rgba(0,0,0,0.004); + text-rendering: optimizeSpeed!important; + font-smooth: always; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + text-size-adjust: 100%; } nav input, nav button { - font-size: 16px; - height: 28px; - box-sizing: border-box; - vertical-align: middle; - line-height: 1; - outline: none; + font-size: 16px; + height: 28px; + box-sizing: border-box; + vertical-align: middle; + line-height: 1; + outline: none; } nav header { - float: left; - margin-left: 20px; - font-size: 25px; - color: #00329F; - font-weight: bold; + font-family: Monserrat, sans-serif; + float: left; + margin-left: 20px; + font-size: 25px; + color: #00329F; + font-weight: bold; } nav input { - width: 50%; - box-sizing: border-box; - max-width: 500px; + width: 50%; + box-sizing: border-box; + max-width: 500px; - color: #555; - background-color: #fff; - border: 1px solid #ccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075); - -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; + color: #555; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } nav input:focus { - border-color: #66afe9; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); } nav button { - background-color: #fff; - color: #333; - padding: 2px 10px; + background-color: #fff; + color: #333; + padding: 2px 10px; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: 1px solid #ccc; - border-radius: 4px; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 1px solid #ccc; + border-radius: 4px; } nav button:hover { - background-color: #e6e6e6; - border-color: #adadad; + background-color: #e6e6e6; + border-color: #adadad; } nav button:active { - background-color: #d4d4d4; - border-color: #8c8c8c; + background-color: #d4d4d4; + border-color: #8c8c8c; } nav { - width: 100%; - height: 50px; - line-height: 50px; - text-align: center; - background-color: white; - border-bottom: 1px solid #ccc; - position: fixed; - top: 0; - z-index: 1; - box-sizing: border-box; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; + background-color: white; + border-bottom: 1px solid #ccc; + position: fixed; + top: 0; + z-index: 1; + box-sizing: border-box; } @media (min-width: 1000px) { - nav header { - position: absolute; - } + nav header { + position: absolute; + } } @media (max-width: 500px) { - nav input { - width: 70%; - } - nav header { - display: none; - } + nav input { + width: 70%; + } + nav header { + display: none; + } } diff --git a/lib/common/components/Tabs/tabs.scss b/lib/common/components/Tabs/tabs.scss index dc2f5e53..7c9ba4bf 100644 --- a/lib/common/components/Tabs/tabs.scss +++ b/lib/common/components/Tabs/tabs.scss @@ -19,30 +19,31 @@ li.active { &:before { content: ""; display: inline-block; - vertical-align: middle; - height: 6px; - width: 6px; + position: relative; + top: -2px; + height: 4px; + width: 4px; border-radius: 50%; margin-right: 0.5em; } } .tab-success:before { - box-shadow: 0 0 3px 0 #00aa11; - background-color: #00aa11; + box-shadow: 0 0 3px 0 $green; + background-color: $green; } .tab-error:before { - box-shadow: 0 0 3px 0 #E53935; - background-color: #E53935; + box-shadow: 0 0 3px 0 $red; + background-color: $red; } .tab-redirect:before { - box-shadow: 0 0 3px 0 #F88F00; - background-color: #F88F00; + box-shadow: 0 0 3px 0 $yellow; + background-color: $yellow; } .tab-info:before { - box-shadow: 0 0 3px 0 #66C2FF; - background-color: #66C2FF; + box-shadow: 0 0 3px 0 $primary-color; + background-color: $primary-color; } diff --git a/lib/common/components/Zippy/zippy.scss b/lib/common/components/Zippy/zippy.scss index f31e943b..516a95db 100644 --- a/lib/common/components/Zippy/zippy.scss +++ b/lib/common/components/Zippy/zippy.scss @@ -1,17 +1,18 @@ -$zippy-success-bg-color: #E1F5E3; -$zippy-success-color: #09AC1C; +$zippy-success-color: #00aa13; +$zippy-success-bg-color: rgba($zippy-success-color, .08); -$zippy-error-bg-color: #FBE7E7; -$zippy-error-color: #E54541; +$zippy-error-color: #e53935; +$zippy-error-bg-color: rgba($zippy-error-color, .06); -$zippy-info-bg-color: #E1EFF5; -$zippy-info-color: #096DAC; +$zippy-info-color: #0033a0; +$zippy-info-bg-color: rgba($zippy-info-color, .08); -$zippy-redirect-bg-color: #F5F0E1; -$zippy-redirect-color: #AC7C09; +$zippy-redirect-color: #263238; +$zippy-redirect-bg-color: rgba($zippy-redirect-color, .08); .zippy-title { padding: 10px; + border-radius: 2px; margin: 2px 0; line-height: 1.5em; background-color: #f2f2f2; @@ -39,10 +40,10 @@ $zippy-redirect-color: #AC7C09; } span.zippy-indicator { - font-size: 1.5em; - line-height: 1; + font-size: 1.2em; margin-right: 0.2em; - vertical-align: text-bottom; + position: relative; + top: 0; } .zippy-content { diff --git a/lib/common/styles/_share-link.scss b/lib/common/styles/_share-link.scss index a3ad5415..d20a00da 100644 --- a/lib/common/styles/_share-link.scss +++ b/lib/common/styles/_share-link.scss @@ -18,6 +18,10 @@ vertical-align: middle; } +.sharable-header { + color: $secondary-color; +} + .sharable-header:hover .share-link:before, .share-link:hover:before { visibility: visible; } diff --git a/lib/common/styles/_variables.scss b/lib/common/styles/_variables.scss index 9df2da78..fe23064a 100644 --- a/lib/common/styles/_variables.scss +++ b/lib/common/styles/_variables.scss @@ -1,20 +1,65 @@ -$headers-color: #00329F; -$method-headers-color: #253137; +// Colors +// --------------------------- +$primary-color : #0033a0; +$secondary-color : #263238; +$black : #263238; +$green : #00aa13; +$yellow : #f1c400; +$red : #e53935; +// Font +// --------------------------- +$em-size : 14px; + +// Font weights +// --------------------------- +$light : 300; +$regular : 400; +$bold : 700; + +// Base Font +// --------------------------- +$base-font : Roboto; +$base-font-family : sans-serif; +$base-font-weight : $light; +$base-font-size : 1em; +$base-line-height : 1.55em; +$text-color : $black; + +// Heading Font +// --------------------------- +$headers-font : Montserrat; +$headers-font-family : sans-serif; +$headers-font-weight : $regular; +$headers-color : $primary-color; +$method-headers-color : $primary-color; +$h1: 1.85714285714286em; +$h2: 1.5714285714285714em; +$h3: 1.2857142857142858em; +$h4: 1.1428571428571428em; +$h5: 0.929em; + +// Side Bar +// --------------------------- $side-bar-width: 260px; $side-bar-bg-color: #FAFAFA; - $side-menu-item-color: #384248; $side-menu-even-bg-color: #F0F0F0; -$side-menu-active-bg-color: #DEDEDE; +$side-menu-active-bg-color: #f0f0f0; $side-menu-item-hpadding: 20px; $side-menu-item-vpadding: 5px; -$samples-panel-bg-color: #263238; +// Sample Panel +// --------------------------- +$samples-panel-bg-color: $black; $samples-panel-width: 40%; -$sample-panel-headers-color: #8A9094; -$sample-panel-color: #CFD2D3; +$sample-panel-headers-color: lighten($black, 50%); +$sample-panel-color: lighten($black, 80%); -$tree-lines-color: #7D97CE; +$tree-lines-color: rgba($primary-color, .5); $side-menu-mobile-breakpoint: 1000px; + +// Border Radius +// --------------------------- +$border-radius: 2px; diff --git a/lib/components/ApiInfo/api-info.html b/lib/components/ApiInfo/api-info.html index a2d3033d..05765f17 100644 --- a/lib/components/ApiInfo/api-info.html +++ b/lib/components/ApiInfo/api-info.html @@ -1,15 +1,17 @@ -

{{data.title}} ({{data.version}})

-

-

- - Contact: - - {{data.contact.name || data.contact.url}} - - {{data.contact.email}} - - License: - {{data.license.name}} - {{data.license.name}} - -

+
+

{{data.title}} ({{data.version}})

+

+

+ + Contact: + + {{data.contact.name || data.contact.url}} + + {{data.contact.email}} + + License: + {{data.license.name}} + {{data.license.name}} + +

+
diff --git a/lib/components/ApiInfo/api-info.scss b/lib/components/ApiInfo/api-info.scss index 0b76f7c9..b0853443 100644 --- a/lib/components/ApiInfo/api-info.scss +++ b/lib/components/ApiInfo/api-info.scss @@ -1,6 +1,9 @@ @import '../../common/styles/variables'; .api-info-header { - color: $headers-color; font-weight: normal; } + +:host > div { + width: 60%; +} diff --git a/lib/components/JsonSchema/json-schema-common.scss b/lib/components/JsonSchema/json-schema-common.scss index 1c13d370..d61e4899 100644 --- a/lib/components/JsonSchema/json-schema-common.scss +++ b/lib/components/JsonSchema/json-schema-common.scss @@ -1,6 +1,6 @@ @import '../../common/styles/variables'; $lines-width: 1px; -$bullet-size: 7px; +$bullet-size: 1px; $cell-spacing: 25px; $cell-padding: 10px; $bullet-margin: 10px; @@ -11,6 +11,7 @@ $param-name-height: 20px; $sub-schema-offset: ($bullet-size/2) + $bullet-margin; +/* .param-schema { padding-left: $sub-schema-offset - $lines-width; border-left: $line-border; @@ -18,29 +19,19 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; .param-wrap { position: relative; -} - -.param-schema:before { - content: ""; - position: absolute; - left: $sub-schema-offset; - top: ($param-name-height/2) + $cell-padding; - bottom: 0; - border-left: $line-border; -} +}*/ .param-name { - flex-grow: 0; - -ms-flex-grow: 0; - display: inline-block; - font-size: 14px; + + font-size: 0.929em; padding: $cell-padding 0 $cell-padding 0; - font-weight: bold; + font-weight: $regular; box-sizing: border-box; line-height: $param-name-height; border-left: $line-border; white-space: nowrap; position: relative; + vertical-align: top; } .param-name-content { @@ -49,18 +40,14 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; } .param-info { - //width: 100%; - flex-grow: 1; - -ms-flex-grow: 1; padding: $cell-padding 0; box-sizing: border-box; border-bottom: 1px solid #ccc; - display: inline-block; + width: 75%; } -.param { - display: flex; - display: -ms-flexbox; +.param-description { + font-size: 13px; } .param-required { @@ -72,32 +59,21 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; } .param-type { - color: #999; - font-size: 12px; + color: $black; + font-size: 0.929em; line-height: $param-name-height; vertical-align: middle; - font-weight: bold; + font-weight: normal; } .param-type.array:before { content: "Array of "; - color: #999; + color: $black; + font-weight: $base-font-weight; } -.param-type.string, .enum-value.string { - color: rgba(0, 80, 0, 0.7); -} - -.param-type.integer, .param-type.number, .enum-value.number { - color: rgba(74, 139, 179, 0.8); -} - -.param-type.object { - color: rgba(0, 50, 159, 0.7); -} - -.param-type.boolean, .enum-value.boolean { - color: firebrick; +.param-type { + color: rgba($black, 0.4); } .param-type.with-hint { @@ -116,12 +92,13 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; /* tree */ // Bullet + .param-name > span:before { content: ""; display: inline-block; width: $bullet-size; - height: $bullet-size; - background-color: $tree-lines-color; + height: $bullet-size + 6; + background-color: $primary-color; margin: 0 $bullet-margin; vertical-align: middle; } @@ -135,7 +112,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; top: ($param-name-height/2) + $cell-padding; } -.param-wrap:first-of-type > .param > .param-name:before { + .param:first-of-type > .param-name:before { content: ""; display: block; position: absolute; @@ -145,14 +122,14 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; height: ($param-name-height/2) + $cell-padding; } -.param-wrap:last-of-type > .param > .param-name { - position: static; +.param:last-of-type > .param-name { + position: relative; &:after { content: ""; display: block; position: absolute; - left: -$lines-width; + left: -$lines-width - 1px; border-left: $line-border-erase; top: ($param-name-height/2) + $cell-padding + $lines-width; background-color: white; @@ -169,7 +146,8 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; } .param-enum { - color: #666; + color: $text-color; + font-size: 13px; &:before { content: "Values: {" diff --git a/lib/components/JsonSchema/json-schema.html b/lib/components/JsonSchema/json-schema.html index 14cf99ca..c43fe903 100644 --- a/lib/components/JsonSchema/json-schema.html +++ b/lib/components/JsonSchema/json-schema.html @@ -2,13 +2,13 @@ {{_displayType}} -
-
-
-
+ + + + + +
+ + + + + + +
diff --git a/lib/components/JsonSchema/json-schema.js b/lib/components/JsonSchema/json-schema.js index 8faaa8f7..29b547d9 100644 --- a/lib/components/JsonSchema/json-schema.js +++ b/lib/components/JsonSchema/json-schema.js @@ -130,30 +130,4 @@ export default class JsonSchema extends BaseComponent { return propData; } - - ngAfterViewInit() { - // adjust widht only on parent level - let $el = this.$element.parentElement; - while($el && $el.tagName !== 'JSON-SCHEMA' && $el.tagName !== 'REDOC') { - $el = $el.parentElement; - } - if ($el && $el.tagName === 'REDOC' ) { - this.adjustNameColumnWidth(); - } - } - - adjustNameColumnWidth() { - // TODO handle internal schemes differently - - let names = [].slice.call(this.$element.querySelectorAll('.param-name-content')); - let widths = names.map(el => el.offsetWidth); - let maxWidth = Math.max(...widths); - if (!maxWidth) return; - names.forEach(el => { - el.parentNode.style.minWidth = maxWidth + 'px'; - }); - - let discrValues = this.$element.querySelector('tabs ul'); - if (discrValues) discrValues.style.paddingLeft = maxWidth + 'px'; - } } diff --git a/lib/components/JsonSchema/json-schema.scss b/lib/components/JsonSchema/json-schema.scss index 01d4ca51..10a33ce6 100644 --- a/lib/components/JsonSchema/json-schema.scss +++ b/lib/components/JsonSchema/json-schema.scss @@ -1,16 +1,61 @@ @import 'json-schema-common'; /* styles for array-schema for array */ -$array-marker-font-sz: 12px; +$array-marker-font-sz: 13px; $array-marker-line-height: 1.5; :host { display: block; } +.param-schema > td { + border-left: $line-border; + padding: 0 10px; +} + +json-schema.nested-schema { + background-color: $side-menu-active-bg-color; + padding: 10px 20px; + position: relative; + border-radius: $border-radius; + + &:before, &:after { + content: ""; + width: 0; + height: 0; + position: absolute; + top: 0; + border-style: solid; + border-color: transparent; + border-width: 10px 15px 0; + margin-left: -7.5px; + border-top-color: white; + } + &:before { + left: 10%; + } + + &:after { + right: 10%; + } + + .param:first-of-type > .param-name:before, .param:last-of-type > .param-name:after { + border-color: #f1f1f1; + } +} + +.param.complex > .param-info { + border-bottom: 0; +} + +.params-wrap { + border-collapse: collapse; + width: 100%; +} + .params-wrap.params-array:before, .params-wrap.params-array:after { display: block; - font-weight: bold; - color: #999; + font-weight: $base-font-weight; + color: $black; font-size: $array-marker-font-sz; line-height: $array-marker-line-height; } @@ -50,19 +95,31 @@ $array-marker-line-height: 1.5; } .param.discriminator { - > div { + > .param-info { padding-bottom: 0; border-bottom: 0; } + + > .param-name:after { + display: none; + } } .discriminator-info { font-weight: bold; } +.discriminator-wrap > td { + border-left: $line-border; + padding: 0; +} + :host tabs { display: block; - border-left: 1px solid $tree-lines-color; +} + +:host ul { + text-align: center; } :host tabs li { @@ -82,10 +139,3 @@ $array-marker-line-height: 1.5; background-color: $headers-color; } } - -tabs .params-wrap > .param-wrap:first-of-type .param-name { - border-left: 0; - &:before { - display: none; - } -} diff --git a/lib/components/Method/method.html b/lib/components/Method/method.html index 1a428a93..66bb8814 100644 --- a/lib/components/Method/method.html +++ b/lib/components/Method/method.html @@ -1,28 +1,31 @@
-
-

- {{data.methodInfo.summary}} -

-

- {{data.httpMethod}} - {{data.apiUrl}} {{data.path}} -

-
- {{tag}} -
-

+

+

+ {{data.methodInfo.summary}} +

+
+ {{tag}} +
+

-
-
+
+
+
Definition
+ +
{{data.httpMethod}}
+ {{data.apiUrl}} {{data.path}} +
- - +
+ +
- +
+
-
+
diff --git a/lib/components/Method/method.scss b/lib/components/Method/method.scss index 38e7fbd0..f3cec22a 100644 --- a/lib/components/Method/method.scss +++ b/lib/components/Method/method.scss @@ -4,7 +4,7 @@ :host { padding-bottom: 100px; display: block; - border-bottom: 2px solid rgba(127, 127, 127, 0.25); + border-bottom: 1px solid rgba(127, 127, 127, 0.25); } responses-list, params-list { @@ -12,33 +12,45 @@ responses-list, params-list { } .method-header { - font-size: 25px; - font-weight: 200; - color: $method-headers-color; + margin-bottom: .9em; } .method-endpoint { - margin: 0; - font-weight: 200; - font-size: 0; + margin: 0 0 2em 0; + padding: 10px 20px; + border-radius: $border-radius*2; + background-color: darken($black, 2%); + display: block; + font-weight: $light; } -.method-endpoint > span { - padding-top: 3px; - padding-bottom: 3px; +.method-endpoint > h5 { + padding-top: 1px; + padding-bottom: 0; + margin: 0; + font-size: .8em; + color: $black; vertical-align: middle; - font-size: 14px; + display: inline-block; + border-radius: $border-radius; } .api-url { - color: #999; + color: rgba(#ffffff, .8); margin-left: 10px; + margin-top: 2px; + position: relative; + top: 1px; + font-family: $headers-font, $headers-font-family; + font-size: 0.929em!important; } .path { - font-family: monospace; - font-weight: bold; - color: $headers-color; + font-family: $headers-font, $headers-font-family; + position: relative; + top: 1px; + color: #ffffff; + font-size: 0.929em!important; } .method-tags { @@ -70,13 +82,13 @@ responses-list, params-list { .method-content { width: 100% - $samples-panel-width; - padding: 0 20px; + padding: 40px; } .method-samples { color: $sample-panel-color; width: 40%; - padding: 10px 20px; + padding: 40px; background: $samples-panel-bg-color; } @@ -84,13 +96,16 @@ responses-samples { display: block; } -.method-samples header { - font-size: 16px; - margin: 5px 0; +.method-samples header, +.method-samples > h5 { color: $sample-panel-headers-color; text-transform: uppercase; } +.method-samples > h5 { + margin-bottom: 8px; +} + .method-samples schema-sample { display: block; } @@ -102,41 +117,17 @@ responses-samples { } .method-description { - padding: 30px 0; + padding: 6px 0 10px 0; margin: 0; } .http-method { - color: white; - background-color: #1976D3; + color: $black; + background: #ffffff; padding: 3px 10px; text-transform: uppercase; } -.http-method.delete { - background-color: red; -} - -.http-method.post { - background-color: #00329F; -} - -.http-method.patch { - background-color: orange; -} - -.http-method.put { - background-color: crimson; -} - -.http-method.options { - background-color: black; -} - -.http-method.head { - background-color: darkkhaki; -} - @media (max-width: 1100px) { .methods:before { display: none; diff --git a/lib/components/MethodsList/methods-list.scss b/lib/components/MethodsList/methods-list.scss index bc6f128e..72a40189 100644 --- a/lib/components/MethodsList/methods-list.scss +++ b/lib/components/MethodsList/methods-list.scss @@ -2,9 +2,10 @@ @import '../../common/styles/share-link'; .tag-info { - padding: 0 20px; + padding: 40px; box-sizing: border-box; background-color: white; + width: 60%; } .tag-info:after, .tag-info:before { @@ -22,20 +23,3 @@ display: block; position: relative;; } - -.methods:before { - content: ""; - background: $samples-panel-bg-color; - height: 100%; - width: $samples-panel-width; - top: 0; - right: 0; - position: absolute; - z-index: -1; -} - -@media (max-width: 1100px) { - .methods:before { - display: none; - } -} diff --git a/lib/components/ParamsList/params-list.html b/lib/components/ParamsList/params-list.html index 0e623cf0..64c9e80b 100644 --- a/lib/components/ParamsList/params-list.html +++ b/lib/components/ParamsList/params-list.html @@ -1,6 +1,7 @@ -

Parameters

+
Parameters
-

Request Body

+
Request Body
+
diff --git a/lib/components/ParamsList/params-list.scss b/lib/components/ParamsList/params-list.scss index 9f8603c6..8900423f 100644 --- a/lib/components/ParamsList/params-list.scss +++ b/lib/components/ParamsList/params-list.scss @@ -1,10 +1,12 @@ +@import '../../common/styles/variables'; + .param-list-header { - border-bottom: 1px solid #999; - font-size: 18px; + border-bottom: 1px solid rgba($text-color, .3); padding: 0.2em 0; - margin: 0.5em 0; - color: #253137; + margin: 3.5em 0 .8em 0; + color: rgba($text-color, .5); font-weight: normal; + text-transform: uppercase; } @import '../JsonSchema/json-schema-common'; diff --git a/lib/components/Redoc/redoc-loading-styles.scss b/lib/components/Redoc/redoc-loading-styles.scss index 0e4f4bd9..df8bea85 100644 --- a/lib/components/Redoc/redoc-loading-styles.scss +++ b/lib/components/Redoc/redoc-loading-styles.scss @@ -13,11 +13,12 @@ redoc.loading { } redoc.loading:before { + font-family: Montserrat; content: "Loading..."; font-size: 28px; text-align: center; padding-top: 40px; - color: #3F5C9C; + color: #0033a0; font-weight: bold; display: block; position: absolute; diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index d8eefc6a..fb88a9d9 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -1,193 +1,222 @@ @import '../../common/styles/variables'; :host { - display: block; - box-sizing: border-box; + display: block; + box-sizing: border-box; } .redoc-wrap { - position: relative; + position: relative; + font-family: $base-font, $base-font-family; + font-size: $em-size; + line-height: $base-line-height; + color: $text-color; } side-menu { - display: block; - box-sizing: border-box; + display: block; + box-sizing: border-box; } methods-list { - display: block; - overflow: hidden; + display: block; + overflow: hidden; } api-info, .side-bar { - display: block; - padding: 10px 0; + display: block; + padding: 10px 0; } api-info { - padding: 10px 20px; + padding: 40px; } api-logo { - display: block; - text-align: center; + display: block; + text-align: center; - @media (max-width: $side-menu-mobile-breakpoint) { - display: none; - } + @media (max-width: $side-menu-mobile-breakpoint) { + display: none; + } } [sticky-sidebar] { - width: $side-bar-width; - background-color: $side-bar-bg-color; - overflow-y: auto; - overflow-x: hidden; + width: $side-bar-width; + background-color: $side-bar-bg-color; + overflow-y: auto; + overflow-x: hidden; - @media (max-width: $side-menu-mobile-breakpoint) { - z-index: 1; - width: 100%; - bottom: auto !important; - } + @media (max-width: $side-menu-mobile-breakpoint) { + z-index: 1; + width: 100%; + bottom: auto !important; + } } #api-content { margin-left: $side-bar-width; + position: relative; @media (max-width: $side-menu-mobile-breakpoint) { - padding-top: 3em; - margin-left: 0; + padding-top: 3em; + margin-left: 0; } } -#api-content:after { +#api-content:before { content: ""; - position: absolute;; - left:0; - right: 0; + background: $samples-panel-bg-color; + height: 100%; + width: $samples-panel-width; top: 0; - bottom: 0; - background-color: black; - opacity: 0.5; - transition: all 0.3s ease; - display: none; + right: 0; + position: absolute; + z-index: -1; } -#api-content.menu-opened:after { - display: block;; -} -footer { - text-align: right; - padding: 10px; - font-size: 15px; - - a { - color: #999; - text-decoration: none; - } - - strong { - font-size: 18px; - color: $headers-color; +@media (max-width: 1100px) { + #api-content:before { + display: none; } } /* global redoc styles */ -:host p { - margin: 0; - margin-bottom: 1em; +@for $index from 1 through 5 { + :host h#{$index}{ + margin-top: 0; + font-family: $headers-font, $headers-font-family; + color: $headers-color; + font-weight: $headers-font-weight; + } } +:host { + h1 { font-size: $h1; } + h2 { font-size: $h2; } + h3 { font-size: $h3; } + h4 { font-size: $h4; } + h5 { font-size: $h5; } + + p { + font-family: $base-font, $base-font-family; + font-weight: $base-font-weight; + margin: 0; + margin-bottom: 1em; + line-height: $base-line-height; + } + + a { + text-decoration: none; + color: $primary-color; + } + + p > code { + color: $red; + border: 1px solid rgba(38,50,56,0.1); + } + + strong { + font-size: 18px; + color: $headers-color; + } + + footer { + text-align: right; + padding: 10px; + font-size: 15px; + } +} + + + /* markdown elements */ :host .redoc-markdown-block { - pre { - font-family: Courier, monospace; - white-space: pre-wrap; - background-color: rgba(0,0,0,0.04); - padding: 10px; - overflow-x: auto; - line-height: normal; - border-radius: 3px; + pre { + font-family: Courier, monospace; + white-space: pre-wrap; + background-color: rgba(38,50,56,0.04); + padding: 12px 14px 15px 14px; + overflow-x: auto; + line-height: normal; + border-radius: $border-radius; + border: 1px solid rgba(38,50,56,0.1); + + code { + background-color: transparent; + + &:before, &:after { + content: none; + } + } + } code { - background-color: transparent; + font-family: Courier, monospace; + background-color: rgba(38,50,56,0.04); + padding: 0.1em 0 0.2em 0; + font-size: 1em; + border-radius: $border-radius; - &:before, &:after { - content: none; - } + &:before, &:after { + letter-spacing: -0.2em; + content: "\\00a0"; + } } - } - code { - font-family: Courier, monospace; - background-color: rgba(0,0,0,0.04); - padding: 0.2em 0; - font-size: 0.85em; - border-radius: 3px; - - &:before, &:after { - letter-spacing: -0.2em; - content: "\\00a0"; + p:last-of-type { + margin-bottom: 0; } - } - p { - margin: 0; - margin-bottom: 1em; - } - - p:last-of-type { - margin-bottom: 0; - } - - blockquote { - margin: 0; - margin-bottom: 1em; - padding: 0 15px; - color: #777; - border-left: 4px solid #ddd; - } - - img { - max-width: 100%; - box-sizing: content-box; - } - - ul, ol { - padding-left: 2em; - margin: 0; - margin-bottom: 1em; - } - - table { - display: block; - width: 100%; - overflow: auto; - word-break: normal; - word-break: keep-all; - border-collapse: collapse; - border-spacing: 0; - margin-top: 0.5em; - margin-bottom: 0.5em; - } - - table tr { - background-color: #fff; - border-top: 1px solid #ccc; - - &:nth-child(2n) { - background-color: #f8f8f8; + blockquote { + margin: 0; + margin-bottom: 1em; + padding: 0 15px; + color: #777; + border-left: 4px solid #ddd; } - } - table th, table td { - padding: 6px 13px; - border: 1px solid #ddd; - } + img { + max-width: 100%; + box-sizing: content-box; + } - table th { - text-align: left; - font-weight: bold; - } + ul, ol { + padding-left: 2em; + margin: 0; + margin-bottom: 1em; + } + + table { + display: block; + width: 100%; + overflow: auto; + word-break: normal; + word-break: keep-all; + border-collapse: collapse; + border-spacing: 0; + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + table tr { + background-color: #fff; + border-top: 1px solid #ccc; + + &:nth-child(2n) { + background-color: #f8f8f8; + } + } + + table th, table td { + padding: 6px 13px; + border: 1px solid #ddd; + } + + table th { + text-align: left; + font-weight: bold; + } } diff --git a/lib/components/RequestSamples/request-samples.scss b/lib/components/RequestSamples/request-samples.scss index 4270dc84..4f14dfe2 100644 --- a/lib/components/RequestSamples/request-samples.scss +++ b/lib/components/RequestSamples/request-samples.scss @@ -1,34 +1,42 @@ @import '../../common/styles/variables'; header { - font-size: 16px; - margin: 5px 0; - color: $sample-panel-headers-color; - text-transform: uppercase; - font-weight: normal; + font-family: $headers-font; + font-size: $h5; + text-transform: uppercase; + margin: 0; + color: $sample-panel-headers-color; + text-transform: uppercase; + font-weight: normal; } :host > tabs > ul li { - font-size: 13px; - margin: 2px 0; - padding: 2px 5px; - color: #8A9094; - line-height: 1.25; - color: $sample-panel-headers-color; + font-family: $headers-font; + font-size: .9em; + border-radius: $border-radius; + margin: 2px 0; + padding: 3px 10px 2px 10px; + line-height: 1.25; + color: $sample-panel-headers-color; - &.active { - background-color: white; - color: #666; - } + &.hover { + background-color: rgba(white, .1); + color: #ffffff; + } + + &.active { + background-color: #ffffff; + color: $text-color; + } } :host tabs ul { - padding-top: 10px; + padding-top: 10px; } pre { - overflow-x: auto; - word-break: break-all; - word-wrap: break-word; - white-space: pre-wrap; + overflow-x: auto; + word-break: break-all; + word-wrap: break-word; + white-space: pre-wrap; } diff --git a/lib/components/ResponsesList/responses-list.html b/lib/components/ResponsesList/responses-list.html index a002e919..9fd2d762 100644 --- a/lib/components/ResponsesList/responses-list.html +++ b/lib/components/ResponsesList/responses-list.html @@ -11,9 +11,6 @@
-
- Response schema -
diff --git a/lib/components/ResponsesList/responses-list.scss b/lib/components/ResponsesList/responses-list.scss index 6dd25bfc..40f96f63 100644 --- a/lib/components/ResponsesList/responses-list.scss +++ b/lib/components/ResponsesList/responses-list.scss @@ -1,7 +1,9 @@ +@import '../../common/styles/variables'; + .responses-list-header { font-size: 18px; padding: 0.2em 0; - margin: 0.5em 0; + margin: 3em 0 1.1em 0; color: #253137; font-weight: normal; } diff --git a/lib/components/ResponsesSamples/responses-samples.html b/lib/components/ResponsesSamples/responses-samples.html index 31de7dac..9b7eade1 100644 --- a/lib/components/ResponsesSamples/responses-samples.html +++ b/lib/components/ResponsesSamples/responses-samples.html @@ -1,4 +1,4 @@ -
Responses samples
+
Response samples
diff --git a/lib/components/ResponsesSamples/responses-samples.scss b/lib/components/ResponsesSamples/responses-samples.scss index 9d33323f..cb9ab0cd 100644 --- a/lib/components/ResponsesSamples/responses-samples.scss +++ b/lib/components/ResponsesSamples/responses-samples.scss @@ -1,35 +1,43 @@ @import '../../common/styles/variables'; tab, tabs { - display: block; + display: block; } schema-sample { - display: block; + display: block; } header { - font-size: 16px; - margin: 5px 0; - color: $sample-panel-headers-color; - text-transform: uppercase; - font-weight: normal; + font-family: $headers-font; + font-size: 0.929em; + text-transform: uppercase; + margin: 0; + color: $sample-panel-headers-color; + text-transform: uppercase; + font-weight: normal; } :host > tabs > ul li { - font-size: 13px; - margin: 2px 0; - padding: 2px 5px; - color: #8A9094; - line-height: 1.25; - color: $sample-panel-headers-color; + font-family: $headers-font; + font-size: 0.929em; + border-radius: $border-radius; + margin: 2px 0; + padding: 2px 8px 3px 8px; + color: $sample-panel-headers-color; + line-height: 1.25; - &.active { - background-color: white; - color: #666; - } + &:hover { + color: #ffffff; + background-color: rgba(white, .1); + } + + &.active { + background-color: white; + color: $black; + } } :host tabs ul { - padding-top: 10px; + padding-top: 10px; } diff --git a/lib/components/SchemaSample/schema-sample.scss b/lib/components/SchemaSample/schema-sample.scss index 3d5bb3fc..13463cca 100644 --- a/lib/components/SchemaSample/schema-sample.scss +++ b/lib/components/SchemaSample/schema-sample.scss @@ -1,3 +1,5 @@ +@import '../../common/styles/variables'; + pre { background-color: transparent; padding: 0; @@ -62,6 +64,13 @@ pre { padding-left: 6px; } + .redoc-json { + padding: 20px; + border-radius: $border-radius*2; + background-color: darken($black, 2%); + margin-bottom: 36px; + } + ul, .redoc-json ul { list-style-type: none; padding: 0px; diff --git a/lib/components/SideMenu/side-menu.html b/lib/components/SideMenu/side-menu.html index 754cde31..e4aad5ea 100644 --- a/lib/components/SideMenu/side-menu.html +++ b/lib/components/SideMenu/side-menu.html @@ -6,7 +6,7 @@
-

API reference

+
API reference
diff --git a/lib/components/SideMenu/side-menu.scss b/lib/components/SideMenu/side-menu.scss index 727191da..d2c7ac3e 100644 --- a/lib/components/SideMenu/side-menu.scss +++ b/lib/components/SideMenu/side-menu.scss @@ -2,152 +2,151 @@ $mobile-menu-compact-breakpoint: 550px; .menu-header { - text-transform: uppercase; - color: $headers-color; - padding: 0 $side-menu-item-hpadding; - margin: 10px 0; - font-size: 16px; + text-transform: uppercase; + color: $headers-color; + padding: 0 $side-menu-item-hpadding; + margin: 10px 0; } .menu-cat-header { - font-size: 15px; - cursor: pointer; - color: $side-menu-item-color; - text-transform: uppercase; - background-color: $side-bar-bg-color; + font-size: $h5; + font-family: $headers-font, $headers-font-family; + font-weight: $light; + cursor: pointer; + color: rgba($text-color, .6); + text-transform: uppercase; + background-color: $side-bar-bg-color; + -webkit-transition: all .15s ease-in-out; + -moz-transition: all .15s ease-in-out; + -ms-transition: all .15s ease-in-out; + -o-transition: all .15s ease-in-out; + transition: all .15s ease-in-out; + display: block; + padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding; - display: block; - padding: $side-menu-item-vpadding $side-menu-item-hpadding; -} - -.menu-cat:nth-of-type(even) .menu-cat-header { - background-color: $side-menu-even-bg-color; -} - -.menu-cat .menu-cat-header.active { - background-color: darken($side-menu-active-bg-color, 5%); + &:hover, + &.active { + color: $primary-color; + background-color: $side-menu-active-bg-color; + } } .menu-subitems { - margin: 0; - padding: 0; - height: 0; - overflow: hidden; + margin: 0; + font-size: 0.929em; + line-height: 1.2em; + font-weight: $light; + color: rgba($text-color, .9); + padding: 0; + height: 0; + overflow: hidden; + + &.active { + height: auto; + } + + & li { + -webkit-transition: all .15s ease-in-out; + -moz-transition: all .15s ease-in-out; + -ms-transition: all .15s ease-in-out; + -o-transition: all .15s ease-in-out; + transition: all .15s ease-in-out; + list-style: none inside none; + cursor: pointer; + background-color: $side-menu-active-bg-color; + padding: $side-menu-item-vpadding*2 $side-menu-item-hpadding*2; + padding-left: $side-menu-item-hpadding*2; + overflow: hidden; + text-overflow: ellipsis; + } + + & li:hover, + & li.active { + background: darken($side-menu-active-bg-color, 6%); + } } -.menu-subitems.active { - height: auto; -} -.menu-subitems li { - list-style: none inside none; - cursor: pointer; - - padding: $side-menu-item-vpadding $side-menu-item-hpadding; - padding-left: $side-menu-item-hpadding*2; - background-color: $side-bar-bg-color; - overflow: hidden; - text-overflow: ellipsis; -} - -.menu-subitems li:nth-of-type(even) { - background-color: $side-menu-even-bg-color; -} - -// invert item colors for odd categories -.menu-cat:nth-of-type(odd) { - .menu-subitems li { - background-color: $side-menu-even-bg-color; - } - - .menu-subitems li:nth-of-type(even) { - background-color: $side-bar-bg-color; - } -} - -.menu-cat .menu-subitems { - li.active, li.active:nth-of-type(even) { - background-color: $side-menu-active-bg-color; - } +.menu-subitems li.active { } .mobile-nav { - display: none; - height: 3em; - line-height: 3em; - box-sizing: border-box; - border-bottom: 1px solid #ccc; - cursor: pointer; - - &:after { - content: ""; - display: inline-block; - width: 3em; + display: none; height: 3em; - background: url('data:image/svg+xml;utf8,'); - background-size: 70%; - background-repeat: no-repeat; - background-position: center; + line-height: 3em; + box-sizing: border-box; + border-bottom: 1px solid #ccc; + cursor: pointer; - float: right; - vertical-align: middle; - } + &:after { + content: ""; + display: inline-block; + width: 3em; + height: 3em; + background: url('data:image/svg+xml;utf8,'); + background-size: 70%; + background-repeat: no-repeat; + background-position: center; - .menu-header { - padding: 0 10px 0 20px; - font-size: 0.95em; - - @media (max-width: $mobile-menu-compact-breakpoint) { - display: none; + float: right; + vertical-align: middle; + } + + .menu-header { + padding: 0 10px 0 20px; + font-size: 0.95em; + + @media (max-width: $mobile-menu-compact-breakpoint) { + display: none; + } } - } } @media (max-width: $side-menu-mobile-breakpoint) { - .mobile-nav { - display: block; - } + .mobile-nav { + display: block; + } - #resources-nav { - height: 0; - overflow-y: auto; - transition: all 0.3s ease; - } + #resources-nav { + height: 0; + overflow-y: auto; + transition: all 0.3s ease; + } - #resources-nav .menu-header { - display: none; - } + #resources-nav .menu-header { + display: none; + } - .menu-subitems { - height: auto; - } + .menu-subitems { + height: auto; + } } .selected-tag { - text-transform: capitalize; + text-transform: capitalize; } .selected-endpoint:before { - content: "/"; - padding: 0 2px; - color: #ccc; + content: "/"; + padding: 0 2px; + color: #ccc; } .selected-endpoint:empty:before { - display: none; + display: none; } .selected-item-info { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - box-sizing: border-box; - max-width: 350px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + box-sizing: border-box; + max-width: 350px; - @media (max-width: $mobile-menu-compact-breakpoint) { - display: inline-block; - padding: 0 20px; - max-width: 80%; - max-width: calc(100% - 4em); - } + @media (max-width: $mobile-menu-compact-breakpoint) { + display: inline-block; + padding: 0 20px; + max-width: 80%; + max-width: calc(100% - 4em); + } } diff --git a/package.json b/package.json index 87ac4913..d2848030 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "redoc", "description": "Swagger-generated API Reference Documentation", - "version": "0.6.6", + "version": "0.7.0", "repository": { "type": "git", "url": "git://github.com/Rebilly/ReDoc"