From 2a8ea8f6690ab09dfc7b1cc62bdff5d297bc434c Mon Sep 17 00:00:00 2001 From: Cesar Date: Mon, 29 Feb 2016 17:18:00 -0500 Subject: [PATCH 01/12] First Commit --- demo/main.css | 5 +- lib/common/styles/_variables.scss | 189 ++++++++++++++++++++++++++- lib/components/ApiInfo/api-info.scss | 1 - lib/components/Method/method.scss | 8 +- lib/components/Redoc/redoc.scss | 121 +---------------- 5 files changed, 194 insertions(+), 130 deletions(-) diff --git a/demo/main.css b/demo/main.css index 8e9a6df3..5fa45cbc 100644 --- a/demo/main.css +++ b/demo/main.css @@ -1,9 +1,5 @@ body { - font-family: Verdana, Geneva, sans-serif; - font-size: 14px; - color: #333; margin: 0; - line-height: 1.5; padding-top: 50px; } @@ -16,6 +12,7 @@ nav input, nav button { outline: none; } nav header { + font-family: Monserrat, sans-serif; float: left; margin-left: 20px; font-size: 25px; diff --git a/lib/common/styles/_variables.scss b/lib/common/styles/_variables.scss index 9df2da78..8b8e7f55 100644 --- a/lib/common/styles/_variables.scss +++ b/lib/common/styles/_variables.scss @@ -1,15 +1,60 @@ -$headers-color: #00329F; -$method-headers-color: #253137; +// Colors +// --------------------------- +$primary-color : #0033a0; +$secondary-color : #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 : $regular; +$base-font-size : 1em; +$base-line-height : 1.4; +$text-color : $secondary-color; + +// 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: 1em; + +// Google Fonts +// --------------------------- +@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}); + +// 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-item-hpadding: 20px; $side-menu-item-vpadding: 5px; +// Sample Panel +// --------------------------- $samples-panel-bg-color: #263238; $samples-panel-width: 40%; $sample-panel-headers-color: #8A9094; @@ -18,3 +63,141 @@ $sample-panel-color: #CFD2D3; $tree-lines-color: #7D97CE; $side-menu-mobile-breakpoint: 1000px; + +// Global Styles +// --------------------------- +@for $index from 1 through 5 { + h#{$index}{ + font-family: $headers-font, $headers-font-family; + color: $headers-color; + font-weight: $headers-font-weight; + } +} + +h1 { font-size: $h1; } +h2 { font-size: $h2; } +h3 { font-size: $h3; } +h4 { font-size: $h4; } +h5 { font-size: $h5; } + +p { + font-size: $base-font-size; +} + +footer { + text-align: right; + padding: 10px; + font-size: 15px; + + a { + color: #999; + text-decoration: none; + } + + strong { + font-size: 18px; + color: $headers-color; + } +} + +/* global redoc styles */ + +:host p { + margin: 0; + margin-bottom: 1em; +} + +/* 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; + + code { + background-color: transparent; + + &:before, &:after { + content: none; + } + } + } + + 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 { + margin: 0; + font-size: $base-font-size; + 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; + } + } + + table th, table td { + padding: 6px 13px; + border: 1px solid #ddd; + } + + table th { + text-align: left; + font-weight: bold; + } +} diff --git a/lib/components/ApiInfo/api-info.scss b/lib/components/ApiInfo/api-info.scss index 0b76f7c9..805bba8b 100644 --- a/lib/components/ApiInfo/api-info.scss +++ b/lib/components/ApiInfo/api-info.scss @@ -1,6 +1,5 @@ @import '../../common/styles/variables'; .api-info-header { - color: $headers-color; font-weight: normal; } diff --git a/lib/components/Method/method.scss b/lib/components/Method/method.scss index 38e7fbd0..0672f3dc 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,9 +12,7 @@ responses-list, params-list { } .method-header { - font-size: 25px; - font-weight: 200; - color: $method-headers-color; + margin-bottom: 1em; } .method-endpoint { @@ -70,7 +68,7 @@ responses-list, params-list { .method-content { width: 100% - $samples-panel-width; - padding: 0 20px; + padding: 20px 20px; } .method-samples { diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index d8eefc6a..16111561 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -7,6 +7,10 @@ .redoc-wrap { position: relative; + font-family: $base-font, $base-font-family; + font-size: $em-size; + line-height: $base-line-height; + color: $text-color; } side-menu { @@ -74,120 +78,3 @@ api-logo { #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; - } -} - -/* global redoc styles */ - -:host p { - margin: 0; - margin-bottom: 1em; -} - -/* 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; - - code { - background-color: transparent; - - &:before, &:after { - content: none; - } - } - } - - 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 { - 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; - } - } - - table th, table td { - padding: 6px 13px; - border: 1px solid #ddd; - } - - table th { - text-align: left; - font-weight: bold; - } -} From d07e2f0026eb1a44f6097344307115735416c1e8 Mon Sep 17 00:00:00 2001 From: Cesar Date: Tue, 1 Mar 2016 13:08:02 -0500 Subject: [PATCH 02/12] Work on Request and Response Samples and overall padding --- lib/common/styles/_share-link.scss | 4 + lib/common/styles/_variables.scss | 116 ++---------------- lib/components/Method/method.html | 6 +- lib/components/Method/method.scss | 35 ++++-- lib/components/MethodsList/methods-list.scss | 2 +- lib/components/ParamsList/params-list.html | 6 +- lib/components/ParamsList/params-list.scss | 10 +- .../Redoc/redoc-loading-styles.scss | 3 +- lib/components/Redoc/redoc.scss | 99 ++++++++++++++- .../RequestSamples/request-samples.scss | 20 ++- .../ResponsesSamples/responses-samples.scss | 6 +- 11 files changed, 168 insertions(+), 139 deletions(-) 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 8b8e7f55..91c64c80 100644 --- a/lib/common/styles/_variables.scss +++ b/lib/common/styles/_variables.scss @@ -2,6 +2,7 @@ // --------------------------- $primary-color : #0033a0; $secondary-color : #263238; +$black : #263238; $green : #00aa13; $yellow : #f1c400; $red : #e53935; @@ -23,7 +24,7 @@ $base-font-family : sans-serif; $base-font-weight : $regular; $base-font-size : 1em; $base-line-height : 1.4; -$text-color : $secondary-color; +$text-color : $black; // Heading Font // --------------------------- @@ -55,19 +56,24 @@ $side-menu-item-vpadding: 5px; // Sample Panel // --------------------------- -$samples-panel-bg-color: #263238; +$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; $side-menu-mobile-breakpoint: 1000px; +// Border Radius +// --------------------------- +$border-radius: 2px; + // Global Styles // --------------------------- @for $index from 1 through 5 { h#{$index}{ + margin-top: 0; font-family: $headers-font, $headers-font-family; color: $headers-color; font-weight: $headers-font-weight; @@ -99,105 +105,3 @@ footer { color: $headers-color; } } - -/* global redoc styles */ - -:host p { - margin: 0; - margin-bottom: 1em; -} - -/* 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; - - code { - background-color: transparent; - - &:before, &:after { - content: none; - } - } - } - - 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 { - margin: 0; - font-size: $base-font-size; - 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; - } - } - - table th, table td { - padding: 6px 13px; - border: 1px solid #ddd; - } - - table th { - text-align: left; - font-weight: bold; - } -} diff --git a/lib/components/Method/method.html b/lib/components/Method/method.html index 1a428a93..08e3ed84 100644 --- a/lib/components/Method/method.html +++ b/lib/components/Method/method.html @@ -3,10 +3,10 @@

{{data.methodInfo.summary}}

-

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

+
{{tag}}
diff --git a/lib/components/Method/method.scss b/lib/components/Method/method.scss index 0672f3dc..9ca0dfa8 100644 --- a/lib/components/Method/method.scss +++ b/lib/components/Method/method.scss @@ -12,31 +12,40 @@ responses-list, params-list { } .method-header { - margin-bottom: 1em; + margin-bottom: .5em; } .method-endpoint { - margin: 0; - font-weight: 200; - font-size: 0; + margin: 0 0 2em 0; + display: block; + font-weight: $light; } -.method-endpoint > span { - padding-top: 3px; +.method-endpoint > h5 { + padding-top: 4px; padding-bottom: 3px; + margin: 0; + font-size: .8em; vertical-align: middle; - font-size: 14px; + display: inline-block; + border-radius: $border-radius; } .api-url { - color: #999; + color: lighten($text-color, 30%); margin-left: 10px; + margin-top: 2px; + position: relative; + top: 1px; + font-size: 1em!important; } .path { - font-family: monospace; - font-weight: bold; + font-weight: $bold; + position: relative; + top: 1px; color: $headers-color; + font-size: 1em!important; } .method-tags { @@ -68,13 +77,13 @@ responses-list, params-list { .method-content { width: 100% - $samples-panel-width; - padding: 20px 20px; + padding: 40px; } .method-samples { color: $sample-panel-color; width: 40%; - padding: 10px 20px; + padding: 40px; background: $samples-panel-bg-color; } @@ -124,7 +133,7 @@ responses-samples { } .http-method.put { - background-color: crimson; + background-color: $red; } .http-method.options { diff --git a/lib/components/MethodsList/methods-list.scss b/lib/components/MethodsList/methods-list.scss index bc6f128e..d81c67ca 100644 --- a/lib/components/MethodsList/methods-list.scss +++ b/lib/components/MethodsList/methods-list.scss @@ -2,7 +2,7 @@ @import '../../common/styles/share-link'; .tag-info { - padding: 0 20px; + padding: 40px; box-sizing: border-box; background-color: white; } diff --git a/lib/components/ParamsList/params-list.html b/lib/components/ParamsList/params-list.html index 0e623cf0..334018ce 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..62b4fa98 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 lighten($text-color, 60%); padding: 0.2em 0; - margin: 0.5em 0; - color: #253137; + margin: 3em 0 .5em 0; + color: $text-color; 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 16111561..d75ee2a4 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -29,7 +29,7 @@ api-info, .side-bar { } api-info { - padding: 10px 20px; + padding: 40px; } api-logo { @@ -78,3 +78,100 @@ api-logo { #api-content.menu-opened:after { display: block;; } + +/* global redoc styles */ + +:host p { + margin: 0; + margin-bottom: 1em; +} + +/* markdown elements */ + +:host .redoc-markdown-block { + 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 { + font-family: Courier, monospace; + background-color: rgba(0,0,0,0.04); + padding: 0.2em 0; + font-size: 1em; + border-radius: 3px; + + &:before, &:after { + letter-spacing: -0.2em; + content: "\\00a0"; + } + } + + p:last-of-type { + margin-bottom: 1em; + } + + 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; + } + } + + 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..ee6ea0f3 100644 --- a/lib/components/RequestSamples/request-samples.scss +++ b/lib/components/RequestSamples/request-samples.scss @@ -1,24 +1,32 @@ @import '../../common/styles/variables'; header { - font-size: 16px; - margin: 5px 0; + font-family: $headers-font; + font-size: .9em; + text-transform: uppercase; + margin: 0 0 12px 0; color: $sample-panel-headers-color; text-transform: uppercase; font-weight: normal; } :host > tabs > ul li { - font-size: 13px; + font-family: $headers-font; + font-size: .9em; + border-radius: $border-radius; margin: 2px 0; - padding: 2px 5px; + padding: 3px 10px 2px 10px; color: #8A9094; line-height: 1.25; color: $sample-panel-headers-color; + &.hover { + color: #ffffff; + } + &.active { - background-color: white; - color: #666; + background-color: #ffffff; + color: $text-color; } } diff --git a/lib/components/ResponsesSamples/responses-samples.scss b/lib/components/ResponsesSamples/responses-samples.scss index 9d33323f..c9547a85 100644 --- a/lib/components/ResponsesSamples/responses-samples.scss +++ b/lib/components/ResponsesSamples/responses-samples.scss @@ -9,8 +9,10 @@ schema-sample { } header { - font-size: 16px; - margin: 5px 0; + font-family: $headers-font; + font-size: .9em; + text-transform: uppercase; + margin: 0 0 12px 0; color: $sample-panel-headers-color; text-transform: uppercase; font-weight: normal; From 06cba79383895e4b62b7a78057bda642a1aa2a61 Mon Sep 17 00:00:00 2001 From: Cesar Date: Wed, 2 Mar 2016 14:48:55 -0500 Subject: [PATCH 03/12] Global styles and Menu style --- lib/common/styles/_variables.scss | 43 +-- .../JsonSchema/json-schema-common.scss | 4 +- lib/components/Method/method.scss | 10 +- lib/components/ParamsList/params-list.html | 4 +- lib/components/ParamsList/params-list.scss | 6 +- lib/components/Redoc/redoc.scss | 286 ++++++++++-------- .../RequestSamples/request-samples.scss | 2 +- lib/components/SideMenu/side-menu.html | 2 +- lib/components/SideMenu/side-menu.scss | 222 +++++++------- 9 files changed, 291 insertions(+), 288 deletions(-) diff --git a/lib/common/styles/_variables.scss b/lib/common/styles/_variables.scss index 91c64c80..b633bf4c 100644 --- a/lib/common/styles/_variables.scss +++ b/lib/common/styles/_variables.scss @@ -23,7 +23,7 @@ $base-font : Roboto; $base-font-family : sans-serif; $base-font-weight : $regular; $base-font-size : 1em; -$base-line-height : 1.4; +$base-line-height : 1.55em; $text-color : $black; // Heading Font @@ -37,7 +37,7 @@ $h1: 1.85714285714286em; $h2: 1.5714285714285714em; $h3: 1.2857142857142858em; $h4: 1.1428571428571428em; -$h5: 1em; +$h5: 0.929em; // Google Fonts // --------------------------- @@ -50,7 +50,7 @@ $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; @@ -68,40 +68,3 @@ $side-menu-mobile-breakpoint: 1000px; // Border Radius // --------------------------- $border-radius: 2px; - -// Global Styles -// --------------------------- -@for $index from 1 through 5 { - h#{$index}{ - margin-top: 0; - font-family: $headers-font, $headers-font-family; - color: $headers-color; - font-weight: $headers-font-weight; - } -} - -h1 { font-size: $h1; } -h2 { font-size: $h2; } -h3 { font-size: $h3; } -h4 { font-size: $h4; } -h5 { font-size: $h5; } - -p { - font-size: $base-font-size; -} - -footer { - text-align: right; - padding: 10px; - font-size: 15px; - - a { - color: #999; - text-decoration: none; - } - - strong { - font-size: 18px; - color: $headers-color; - } -} diff --git a/lib/components/JsonSchema/json-schema-common.scss b/lib/components/JsonSchema/json-schema-common.scss index e3e7ce97..9fb26d84 100644 --- a/lib/components/JsonSchema/json-schema-common.scss +++ b/lib/components/JsonSchema/json-schema-common.scss @@ -35,7 +35,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; display: inline-block; font-size: 14px; 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; @@ -76,7 +76,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; font-size: 12px; line-height: $param-name-height; vertical-align: middle; - font-weight: bold; + font-weight: normal; } .param-type.array:before { diff --git a/lib/components/Method/method.scss b/lib/components/Method/method.scss index 9ca0dfa8..8b5d9785 100644 --- a/lib/components/Method/method.scss +++ b/lib/components/Method/method.scss @@ -12,7 +12,7 @@ responses-list, params-list { } .method-header { - margin-bottom: .5em; + margin-bottom: .9em; } .method-endpoint { @@ -22,8 +22,8 @@ responses-list, params-list { } .method-endpoint > h5 { - padding-top: 4px; - padding-bottom: 3px; + padding-top: 1px; + padding-bottom: 0; margin: 0; font-size: .8em; vertical-align: middle; @@ -32,11 +32,11 @@ responses-list, params-list { } .api-url { - color: lighten($text-color, 30%); + color: rgba($text-color, .6); margin-left: 10px; margin-top: 2px; position: relative; - top: 1px; + top: 2px; font-size: 1em!important; } diff --git a/lib/components/ParamsList/params-list.html b/lib/components/ParamsList/params-list.html index 334018ce..64c9e80b 100644 --- a/lib/components/ParamsList/params-list.html +++ b/lib/components/ParamsList/params-list.html @@ -1,4 +1,4 @@ -

Parameters

+
Parameters
-

Request Body

+
Request Body
diff --git a/lib/components/ParamsList/params-list.scss b/lib/components/ParamsList/params-list.scss index 62b4fa98..8900423f 100644 --- a/lib/components/ParamsList/params-list.scss +++ b/lib/components/ParamsList/params-list.scss @@ -1,10 +1,10 @@ @import '../../common/styles/variables'; .param-list-header { - border-bottom: 1px solid lighten($text-color, 60%); + border-bottom: 1px solid rgba($text-color, .3); padding: 0.2em 0; - margin: 3em 0 .5em 0; - color: $text-color; + margin: 3.5em 0 .8em 0; + color: rgba($text-color, .5); font-weight: normal; text-transform: uppercase; } diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index d75ee2a4..2403d491 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -1,177 +1,219 @@ @import '../../common/styles/variables'; :host { - display: block; - box-sizing: border-box; + display: block; + box-sizing: border-box; } .redoc-wrap { - position: relative; - font-family: $base-font, $base-font-family; - font-size: $em-size; - line-height: $base-line-height; - color: $text-color; + 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: 40px; + 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; - @media (max-width: $side-menu-mobile-breakpoint) { - padding-top: 3em; - margin-left: 0; - } + margin-left: $side-bar-width; + @media (max-width: $side-menu-mobile-breakpoint) { + padding-top: 3em; + margin-left: 0; + } } #api-content:after { - content: ""; - position: absolute;; - left:0; - right: 0; - top: 0; - bottom: 0; - background-color: black; - opacity: 0.5; - transition: all 0.3s ease; - display: none; + content: ""; + position: absolute;; + left:0; + right: 0; + top: 0; + bottom: 0; + background-color: black; + opacity: 0.5; + transition: all 0.3s ease; + display: none; } #api-content.menu-opened:after { - display: block;; + display: block;; } /* 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; + 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(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); + 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: 1em; - border-radius: 3px; - - &:before, &:after { - letter-spacing: -0.2em; - content: "\\00a0"; + p:last-of-type { + margin-bottom: 1em; } - } - p:last-of-type { - margin-bottom: 1em; - } - - 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 ee6ea0f3..0c795619 100644 --- a/lib/components/RequestSamples/request-samples.scss +++ b/lib/components/RequestSamples/request-samples.scss @@ -2,7 +2,7 @@ header { font-family: $headers-font; - font-size: .9em; + font-size: $h5; text-transform: uppercase; margin: 0 0 12px 0; color: $sample-panel-headers-color; 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..b701ebd1 100644 --- a/lib/components/SideMenu/side-menu.scss +++ b/lib/components/SideMenu/side-menu.scss @@ -2,152 +2,150 @@ $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: $text-color; + 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 $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: 13px; + font-weight: $regular; + color: rgba($text-color, .6); + 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 $side-menu-item-hpadding; + 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); + } } From 8828043eb35f7713fa39ea5ea1a90bdb443e55b7 Mon Sep 17 00:00:00 2001 From: Cesar Date: Tue, 8 Mar 2016 15:03:05 -0500 Subject: [PATCH 04/12] Changes in fonts and definitions --- demo/index.html | 2 +- demo/main.css | 2 + lib/common/components/Tabs/tabs.scss | 23 ++++---- lib/common/components/Zippy/zippy.scss | 23 ++++---- lib/common/styles/_variables.scss | 2 +- .../JsonSchema/json-schema-common.scss | 25 +++------ lib/components/JsonSchema/json-schema.scss | 6 +- lib/components/Method/method.html | 41 +++++++------- lib/components/Method/method.scss | 56 +++++++------------ lib/components/Redoc/redoc.scss | 1 + .../RequestSamples/request-samples.scss | 3 +- .../ResponsesList/responses-list.html | 3 - .../ResponsesList/responses-list.scss | 4 +- .../ResponsesSamples/responses-samples.scss | 41 +++++++------- .../SchemaSample/schema-sample.scss | 9 +++ lib/components/SideMenu/side-menu.scss | 13 +++-- 16 files changed, 122 insertions(+), 132 deletions(-) diff --git a/demo/index.html b/demo/index.html index c189d992..9689dbea 100644 --- a/demo/index.html +++ b/demo/index.html @@ -14,7 +14,7 @@ - + diff --git a/demo/main.css b/demo/main.css index 5fa45cbc..863030ac 100644 --- a/demo/main.css +++ b/demo/main.css @@ -1,6 +1,8 @@ body { margin: 0; padding-top: 50px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } nav input, nav button { 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/_variables.scss b/lib/common/styles/_variables.scss index b633bf4c..4837e99f 100644 --- a/lib/common/styles/_variables.scss +++ b/lib/common/styles/_variables.scss @@ -21,7 +21,7 @@ $bold : 700; // --------------------------- $base-font : Roboto; $base-font-family : sans-serif; -$base-font-weight : $regular; +$base-font-weight : $light; $base-font-size : 1em; $base-line-height : 1.55em; $text-color : $black; diff --git a/lib/components/JsonSchema/json-schema-common.scss b/lib/components/JsonSchema/json-schema-common.scss index 9fb26d84..9ea192b7 100644 --- a/lib/components/JsonSchema/json-schema-common.scss +++ b/lib/components/JsonSchema/json-schema-common.scss @@ -33,7 +33,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; 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: $regular; box-sizing: border-box; @@ -72,8 +72,8 @@ $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: normal; @@ -81,23 +81,12 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; .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 { diff --git a/lib/components/JsonSchema/json-schema.scss b/lib/components/JsonSchema/json-schema.scss index 01d4ca51..a52680a2 100644 --- a/lib/components/JsonSchema/json-schema.scss +++ b/lib/components/JsonSchema/json-schema.scss @@ -1,7 +1,7 @@ @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; @@ -9,8 +9,8 @@ $array-marker-line-height: 1.5; .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; } diff --git a/lib/components/Method/method.html b/lib/components/Method/method.html index 08e3ed84..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 8b5d9785..f3cec22a 100644 --- a/lib/components/Method/method.scss +++ b/lib/components/Method/method.scss @@ -17,6 +17,9 @@ responses-list, params-list { .method-endpoint { margin: 0 0 2em 0; + padding: 10px 20px; + border-radius: $border-radius*2; + background-color: darken($black, 2%); display: block; font-weight: $light; } @@ -26,26 +29,28 @@ responses-list, params-list { padding-bottom: 0; margin: 0; font-size: .8em; + color: $black; vertical-align: middle; display: inline-block; border-radius: $border-radius; } .api-url { - color: rgba($text-color, .6); + color: rgba(#ffffff, .8); margin-left: 10px; margin-top: 2px; position: relative; - top: 2px; - font-size: 1em!important; + top: 1px; + font-family: $headers-font, $headers-font-family; + font-size: 0.929em!important; } .path { - font-weight: $bold; + font-family: $headers-font, $headers-font-family; position: relative; top: 1px; - color: $headers-color; - font-size: 1em!important; + color: #ffffff; + font-size: 0.929em!important; } .method-tags { @@ -91,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; } @@ -109,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: $red; -} - -.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/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index 2403d491..da6e8b70 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -99,6 +99,7 @@ api-logo { p { font-family: $base-font, $base-font-family; + font-weight: $base-font-weight; margin: 0; margin-bottom: 1em; line-height: $base-line-height; diff --git a/lib/components/RequestSamples/request-samples.scss b/lib/components/RequestSamples/request-samples.scss index 0c795619..1dc59c4d 100644 --- a/lib/components/RequestSamples/request-samples.scss +++ b/lib/components/RequestSamples/request-samples.scss @@ -4,7 +4,7 @@ header { font-family: $headers-font; font-size: $h5; text-transform: uppercase; - margin: 0 0 12px 0; + margin: 0; color: $sample-panel-headers-color; text-transform: uppercase; font-weight: normal; @@ -16,7 +16,6 @@ header { border-radius: $border-radius; margin: 2px 0; padding: 3px 10px 2px 10px; - color: #8A9094; line-height: 1.25; color: $sample-panel-headers-color; 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.scss b/lib/components/ResponsesSamples/responses-samples.scss index c9547a85..303b811e 100644 --- a/lib/components/ResponsesSamples/responses-samples.scss +++ b/lib/components/ResponsesSamples/responses-samples.scss @@ -1,37 +1,38 @@ @import '../../common/styles/variables'; tab, tabs { - display: block; + display: block; } schema-sample { - display: block; + display: block; } header { - font-family: $headers-font; - font-size: .9em; - text-transform: uppercase; - margin: 0 0 12px 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; - } + &.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.scss b/lib/components/SideMenu/side-menu.scss index b701ebd1..d2c7ac3e 100644 --- a/lib/components/SideMenu/side-menu.scss +++ b/lib/components/SideMenu/side-menu.scss @@ -13,7 +13,7 @@ $mobile-menu-compact-breakpoint: 550px; font-family: $headers-font, $headers-font-family; font-weight: $light; cursor: pointer; - color: $text-color; + color: rgba($text-color, .6); text-transform: uppercase; background-color: $side-bar-bg-color; -webkit-transition: all .15s ease-in-out; @@ -22,7 +22,7 @@ $mobile-menu-compact-breakpoint: 550px; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; display: block; - padding: $side-menu-item-vpadding $side-menu-item-hpadding; + padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding; &:hover, &.active { @@ -33,9 +33,10 @@ $mobile-menu-compact-breakpoint: 550px; .menu-subitems { margin: 0; - font-size: 13px; - font-weight: $regular; - color: rgba($text-color, .6); + font-size: 0.929em; + line-height: 1.2em; + font-weight: $light; + color: rgba($text-color, .9); padding: 0; height: 0; overflow: hidden; @@ -53,7 +54,7 @@ $mobile-menu-compact-breakpoint: 550px; list-style: none inside none; cursor: pointer; background-color: $side-menu-active-bg-color; - padding: $side-menu-item-vpadding $side-menu-item-hpadding; + padding: $side-menu-item-vpadding*2 $side-menu-item-hpadding*2; padding-left: $side-menu-item-hpadding*2; overflow: hidden; text-overflow: ellipsis; From bfa10bca839922f5843ac62bebffaf7b6238dd93 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Wed, 9 Mar 2016 00:27:19 +0200 Subject: [PATCH 05/12] Restyle JSONSchema component --- .../JsonSchema/json-schema-common.scss | 36 +++------- lib/components/JsonSchema/json-schema.html | 46 +++++++------ lib/components/JsonSchema/json-schema.js | 26 ------- lib/components/JsonSchema/json-schema.scss | 67 ++++++++++++++++--- 4 files changed, 93 insertions(+), 82 deletions(-) diff --git a/lib/components/JsonSchema/json-schema-common.scss b/lib/components/JsonSchema/json-schema-common.scss index 9ea192b7..001557b9 100644 --- a/lib/components/JsonSchema/json-schema-common.scss +++ b/lib/components/JsonSchema/json-schema-common.scss @@ -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,21 +19,10 @@ $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: 0.929em; padding: $cell-padding 0 $cell-padding 0; font-weight: $regular; @@ -41,6 +31,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; border-left: $line-border; white-space: nowrap; position: relative; + vertical-align: top; } .param-name-content { @@ -49,18 +40,10 @@ $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; -} - -.param { - display: flex; - display: -ms-flexbox; + width: 75%; } .param-required { @@ -108,6 +91,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; /* tree */ // Bullet + .param-name > span:before { content: ""; display: inline-block; @@ -127,7 +111,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; @@ -137,14 +121,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; 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 b8d0dbb1..ce42f923 100644 --- a/lib/components/JsonSchema/json-schema.js +++ b/lib/components/JsonSchema/json-schema.js @@ -128,30 +128,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 a52680a2..295a2585 100644 --- a/lib/components/JsonSchema/json-schema.scss +++ b/lib/components/JsonSchema/json-schema.scss @@ -7,6 +7,50 @@ $array-marker-line-height: 1.5; display: block; } +.param-schema > td { + border-left: $line-border; + padding: 0 10px; +} + +json-schema.nested-schema { + background-color: #F1F1F1; + padding: 10px 20px; + position: relative; + + &: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: $base-font-weight; @@ -50,19 +94,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 +138,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; - } -} From 8afa4d6c323c09fc955e88576021ca86c3d12613 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Wed, 9 Mar 2016 00:28:55 +0200 Subject: [PATCH 06/12] Fix treating refereced schemas with simple types (string, integer) as nested --- lib/components/JsonSchema/json-schema.js | 15 +++++++++------ lib/components/ParamsList/params-list.js | 3 ++- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/lib/components/JsonSchema/json-schema.js b/lib/components/JsonSchema/json-schema.js index ce42f923..02b7940c 100644 --- a/lib/components/JsonSchema/json-schema.js +++ b/lib/components/JsonSchema/json-schema.js @@ -108,15 +108,18 @@ export default class JsonSchema extends BaseComponent { propData.format = itemFormat; propData._isArray = true; propData.type = 'array ' + propData.items.type; - } - - if (propData.type === 'object') { + } else if (propData.type === 'object') { propData._displayType = propData.title || 'object'; - } - - if (!propData.type) { + } else if (!propData.type) { propData._displayType = '< * >'; propData._displayTypeHint = 'This field may contain data of any type'; + } else { + // here we are sure that property has simple type + // delete pointer for simple types to not show it as subschema + if (propData._pointer) { + propData._pointer = undefined; + propData._displayType = propData.title ? `${propData.title} (${propData.type})` : propData.type; + } } if (propData.format) propData._displayFormat = `<${propData.format}>`; diff --git a/lib/components/ParamsList/params-list.js b/lib/components/ParamsList/params-list.js index 1a053b5b..957d18b4 100644 --- a/lib/components/ParamsList/params-list.js +++ b/lib/components/ParamsList/params-list.js @@ -26,6 +26,7 @@ export default class ParamsList extends BaseComponent { paramsList = paramsList.map((paramData) => { let propPointer = paramData._pointer; + if (paramData.in === 'body') return paramData; return JsonSchema.injectPropData(paramData, paramData.name, propPointer); }); @@ -35,7 +36,7 @@ export default class ParamsList extends BaseComponent { let bodyParam = paramsMap.body[0]; bodyParam.pointer = bodyParam._pointer; this.data.bodyParam = bodyParam; - delete paramsMap.body; + paramsMap.body = undefined; } this.data.noParams = !(Object.keys(paramsMap).length || this.data.bodyParam); From f1347e881167f44ca5d078cc3e1f1fe65c3296d4 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 13 Mar 2016 02:48:17 +0200 Subject: [PATCH 07/12] Fix link in README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) From a0a209820facfc29f143e70a78c3404b3bd64604 Mon Sep 17 00:00:00 2001 From: Cesar Date: Mon, 14 Mar 2016 15:29:27 -0400 Subject: [PATCH 08/12] JSONSchema tree and table --- demo/main.css | 150 ++++++++++-------- lib/common/styles/_variables.scss | 2 +- .../JsonSchema/json-schema-common.scss | 13 +- lib/components/JsonSchema/json-schema.scss | 3 +- lib/components/Redoc/redoc.scss | 2 +- .../RequestSamples/request-samples.scss | 53 ++++--- .../ResponsesSamples/responses-samples.html | 2 +- .../ResponsesSamples/responses-samples.scss | 5 + 8 files changed, 131 insertions(+), 99 deletions(-) diff --git a/demo/main.css b/demo/main.css index 863030ac..d6523ba6 100644 --- a/demo/main.css +++ b/demo/main.css @@ -1,98 +1,118 @@ body { - margin: 0; - padding-top: 50px; - -webkit-font-smoothing: antialiased; + 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 { - font-family: Monserrat, sans-serif; - 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/styles/_variables.scss b/lib/common/styles/_variables.scss index 4837e99f..02d4b5ad 100644 --- a/lib/common/styles/_variables.scss +++ b/lib/common/styles/_variables.scss @@ -61,7 +61,7 @@ $samples-panel-width: 40%; $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; diff --git a/lib/components/JsonSchema/json-schema-common.scss b/lib/components/JsonSchema/json-schema-common.scss index ace05330..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; @@ -46,6 +46,10 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; width: 75%; } +.param-description { + font-size: 13px; +} + .param-required { color: red; font-weight: bold; @@ -93,8 +97,8 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin; 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; } @@ -142,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.scss b/lib/components/JsonSchema/json-schema.scss index 295a2585..10a33ce6 100644 --- a/lib/components/JsonSchema/json-schema.scss +++ b/lib/components/JsonSchema/json-schema.scss @@ -13,9 +13,10 @@ $array-marker-line-height: 1.5; } json-schema.nested-schema { - background-color: #F1F1F1; + background-color: $side-menu-active-bg-color; padding: 10px 20px; position: relative; + border-radius: $border-radius; &:before, &:after { content: ""; diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index da6e8b70..08bb614c 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -165,7 +165,7 @@ api-logo { } p:last-of-type { - margin-bottom: 1em; + margin-bottom: 0; } blockquote { diff --git a/lib/components/RequestSamples/request-samples.scss b/lib/components/RequestSamples/request-samples.scss index 1dc59c4d..4f14dfe2 100644 --- a/lib/components/RequestSamples/request-samples.scss +++ b/lib/components/RequestSamples/request-samples.scss @@ -1,41 +1,42 @@ @import '../../common/styles/variables'; header { - font-family: $headers-font; - font-size: $h5; - text-transform: uppercase; - margin: 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-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; + 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; - &.hover { - color: #ffffff; - } + &.hover { + background-color: rgba(white, .1); + color: #ffffff; + } - &.active { - background-color: #ffffff; - color: $text-color; - } + &.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/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 303b811e..cb9ab0cd 100644 --- a/lib/components/ResponsesSamples/responses-samples.scss +++ b/lib/components/ResponsesSamples/responses-samples.scss @@ -27,6 +27,11 @@ header { color: $sample-panel-headers-color; line-height: 1.25; + &:hover { + color: #ffffff; + background-color: rgba(white, .1); + } + &.active { background-color: white; color: $black; From ca2c01b8ac70a1965f3b7214f94cf3745106e641 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 14 Mar 2016 22:27:07 +0200 Subject: [PATCH 09/12] Make right panel fill all page --- lib/components/ApiInfo/api-info.html | 32 ++++++++-------- lib/components/ApiInfo/api-info.scss | 4 ++ lib/components/MethodsList/methods-list.scss | 18 +-------- lib/components/Redoc/redoc.scss | 40 ++++++++++---------- 4 files changed, 43 insertions(+), 51 deletions(-) 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 805bba8b..406f6725 100644 --- a/lib/components/ApiInfo/api-info.scss +++ b/lib/components/ApiInfo/api-info.scss @@ -3,3 +3,7 @@ .api-info-header { font-weight: normal; } + +> div { + width: 60%; +} diff --git a/lib/components/MethodsList/methods-list.scss b/lib/components/MethodsList/methods-list.scss index d81c67ca..72a40189 100644 --- a/lib/components/MethodsList/methods-list.scss +++ b/lib/components/MethodsList/methods-list.scss @@ -5,6 +5,7 @@ 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/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index 08bb614c..fb88a9d9 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -55,28 +55,30 @@ api-logo { } #api-content { - margin-left: $side-bar-width; - @media (max-width: $side-menu-mobile-breakpoint) { - padding-top: 3em; - margin-left: 0; - } + margin-left: $side-bar-width; + position: relative; + @media (max-width: $side-menu-mobile-breakpoint) { + padding-top: 3em; + margin-left: 0; + } } -#api-content:after { - content: ""; - position: absolute;; - left:0; - right: 0; - top: 0; - bottom: 0; - background-color: black; - opacity: 0.5; - transition: all 0.3s ease; +#api-content: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) { + #api-content:before { display: none; -} - -#api-content.menu-opened:after { - display: block;; + } } /* global redoc styles */ From 617d398dee87d286b09887e05c6b7bb5d2d76393 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 14 Mar 2016 22:27:45 +0200 Subject: [PATCH 10/12] move importing external css files outside the redoc --- demo/main.css | 5 +++++ lib/common/styles/_variables.scss | 5 ----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/demo/main.css b/demo/main.css index d6523ba6..932368be 100644 --- a/demo/main.css +++ b/demo/main.css @@ -1,3 +1,8 @@ +// Google Fonts +// --------------------------- +@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 { margin: 0; padding-top: 50px; diff --git a/lib/common/styles/_variables.scss b/lib/common/styles/_variables.scss index 02d4b5ad..fe23064a 100644 --- a/lib/common/styles/_variables.scss +++ b/lib/common/styles/_variables.scss @@ -39,11 +39,6 @@ $h3: 1.2857142857142858em; $h4: 1.1428571428571428em; $h5: 0.929em; -// Google Fonts -// --------------------------- -@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}); - // Side Bar // --------------------------- $side-bar-width: 260px; From f4ee0fa343a24364b5cc4a7a55c311eecf7cce2f Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 14 Mar 2016 22:36:32 +0200 Subject: [PATCH 11/12] minor fixes --- demo/index.html | 2 +- demo/main.css | 2 -- lib/components/ApiInfo/api-info.scss | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/demo/index.html b/demo/index.html index 9689dbea..c189d992 100644 --- a/demo/index.html +++ b/demo/index.html @@ -14,7 +14,7 @@ - + diff --git a/demo/main.css b/demo/main.css index 932368be..269620f7 100644 --- a/demo/main.css +++ b/demo/main.css @@ -1,5 +1,3 @@ -// Google Fonts -// --------------------------- @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}); diff --git a/lib/components/ApiInfo/api-info.scss b/lib/components/ApiInfo/api-info.scss index 406f6725..b0853443 100644 --- a/lib/components/ApiInfo/api-info.scss +++ b/lib/components/ApiInfo/api-info.scss @@ -4,6 +4,6 @@ font-weight: normal; } -> div { +:host > div { width: 60%; } From 681773758918cc6ea6be1f0acb87049c2549d4bd Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 14 Mar 2016 22:41:02 +0200 Subject: [PATCH 12/12] v0.7.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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"