From 8a5804f3119a6abf1828811cbe5781d2354357d6 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 1 Nov 2016 09:57:06 +0200 Subject: [PATCH 01/17] Fix sourcemaps after livereload --- build/webpack.dev.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/build/webpack.dev.js b/build/webpack.dev.js index 449f6d50..3235c5fe 100644 --- a/build/webpack.dev.js +++ b/build/webpack.dev.js @@ -8,8 +8,7 @@ const IS_PRODUCTION = process.env.NODE_ENV === "production"; // TODO Refactor common parts of config module.exports = { - context: root(), - devtool: 'source-map', + devtool: '#inline-source-map', resolve: { extensions: ['.ts', '.js', '.json', '.css'], @@ -51,7 +50,9 @@ module.exports = { path: root('dist'), filename: '[name].js', sourceMapFilename: '[name].[id].map', - chunkFilename: '[id].chunk.js' + chunkFilename: '[id].chunk.js', + // devtoolModuleFilenameTemplate: "[resource-path]", + // devtoolFallbackModuleFilenameTemplate: "[resource-path]?[hash]", }, module: { From f89bf8fd60dd4237267363225fe7d94ae0ab19c4 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 1 Nov 2016 10:08:54 +0200 Subject: [PATCH 02/17] Add description for securityDefinitions --- demo/swagger.yaml | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/demo/swagger.yaml b/demo/swagger.yaml index ac84c381..17d45c4c 100644 --- a/demo/swagger.yaml +++ b/demo/swagger.yaml @@ -26,6 +26,14 @@ info: This API features Cross-Origin Resource Sharing (CORS) implemented in compliance with [W3C spec](https://www.w3.org/TR/cors/). And that allows cross-domain communication from the browser. All responses have a wildcard same-origin which makes them completely public and accessible to everyone, including any code on any site. + # Authentication + Petstore offers two forms of authentication: + - API Key + - OAuth2 + + OAuth2 - an open protocol to allow secure authorization in a simple + and standard method from web, mobile and desktop applications. + version: 1.0.0 title: Swagger Petstore termsOfService: 'http://swagger.io/terms/' @@ -48,6 +56,9 @@ tags: description: Operations about user securityDefinitions: petstore_auth: + description: | + Get access to data while protecting your account credentials. + OAuth2 is also a safer and more secure way to give you access. type: oauth2 authorizationUrl: 'http://petstore.swagger.io/api/oauth/dialog' flow: implicit @@ -55,6 +66,8 @@ securityDefinitions: 'write:pets': modify pets in your account 'read:pets': read your pets api_key: + description: | + For this sample, you can use the api key `special-key` to test the authorization filters. type: apiKey name: api_key in: header From e31e7c6798e264190be56ed868d237418b4adee5 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 1 Nov 2016 16:58:48 +0200 Subject: [PATCH 03/17] update dependencies --- package.json | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 78c400c2..afeedbc0 100644 --- a/package.json +++ b/package.json @@ -61,13 +61,12 @@ "branch-release": "^1.0.3", "chalk": "^1.1.3", "codelyzer": "^1.0.0-beta.3", - "copy-webpack-plugin": "^3.0.1", "core-js": "^2.4.1", "coveralls": "^2.11.9", - "css-loader": "^0.24.0", + "css-loader": "^0.25.0", "deploy-to-gh-pages": "^1.1.2", "http-server": "^0.9.0", - "istanbul-instrumenter-loader": "^0.2.0", + "istanbul-instrumenter-loader": "^1.0.0", "jasmine-core": "^2.4.1", "jasmine-spec-reporter": "^2.4.0", "karma": "^1.2.0", @@ -96,16 +95,15 @@ "style-loader": "^0.13.1", "ts-helpers": "^1.1.1", "tslint": "^3.15.1", - "tslint-stylish": "^2.1.0-beta", "typescript": "^2.0.3", "webpack": "^2.1.0-beta.25", - "webpack-dev-server": "^2.1.0-beta.6", + "webpack-dev-server": "^2.1.0-beta.10", "zone.js": "^0.6.25" }, "dependencies": { "dropkickjs": "^2.1.10", "hint.css": "^2.3.2", - "json-pointer": "^0.5.0", + "json-pointer": "^0.6.0", "json-schema-ref-parser": "^3.1.2", "openapi-sampler": "^0.3.2", "prismjs": "^1.5.1", From 93e7ed04f7580e3f92cb88d9b07a1f0d52e0b916 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 1 Nov 2016 16:59:06 +0200 Subject: [PATCH 04/17] Remove codeclimate --- .codeclimate.yml | 12 ------------ README.md | 2 +- 2 files changed, 1 insertion(+), 13 deletions(-) delete mode 100644 .codeclimate.yml diff --git a/.codeclimate.yml b/.codeclimate.yml deleted file mode 100644 index 6ed0167a..00000000 --- a/.codeclimate.yml +++ /dev/null @@ -1,12 +0,0 @@ -engines: - eslint: - enabled: true - scss-lint: - enabled: true - fixme: - enabled: true -ratings: - paths: - - "lib/**" -exclude_paths: - - "**.spec.js" diff --git a/README.md b/README.md index 533d86d6..854c8b9e 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # ReDoc **OpenAPI/Swagger-generated API Reference Documentation** -[![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) [![Tested on APIs.guru](http://api.apis.guru/badges/tested_on.svg)](https://APIs.guru) [![Code Climate](https://codeclimate.com/github/Rebilly/ReDoc/badges/gpa.svg)](https://codeclimate.com/github/Rebilly/ReDoc) [![dependencies Status](https://david-dm.org/Rebilly/ReDoc/status.svg)](https://david-dm.org/Rebilly/ReDoc) [![devDependencies Status](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) +[![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) [![Tested on APIs.guru](http://api.apis.guru/badges/tested_on.svg)](https://APIs.guru) [![dependencies Status](https://david-dm.org/Rebilly/ReDoc/status.svg)](https://david-dm.org/Rebilly/ReDoc) [![devDependencies Status](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/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) From 22494e125f7c679d9046c379113a7bffb984f553 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 1 Nov 2016 16:59:29 +0200 Subject: [PATCH 05/17] remove unused import from webpack config --- build/webpack.prod.js | 1 - 1 file changed, 1 deletion(-) diff --git a/build/webpack.prod.js b/build/webpack.prod.js index 8fc8ef45..5fc59973 100644 --- a/build/webpack.prod.js +++ b/build/webpack.prod.js @@ -3,7 +3,6 @@ const webpack = require('webpack'); const VERSION = JSON.stringify(require('../package.json').version); const root = require('./helpers').root; -const CopyWebpackPlugin = require('copy-webpack-plugin'); const BANNER = `ReDoc - OpenAPI/Swagger-generated API Reference Documentation ------------------------------------------------------------- From 9d4a903ef2f9a4c1aa8245f0bcd7d80102a13916 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 1 Nov 2016 17:00:38 +0200 Subject: [PATCH 06/17] Start refactoring css + minor UI improvements --- lib/components/ApiInfo/api-info.html | 8 +- lib/components/ApiInfo/api-info.scss | 22 +- lib/components/ApiLogo/api-logo.scss | 9 + .../JsonSchema/_json-schema-common.scss | 237 +++++----- lib/components/JsonSchema/json-schema.html | 9 +- lib/components/JsonSchema/json-schema.scss | 14 +- lib/components/Method/method.html | 4 +- lib/components/Method/method.scss | 65 ++- lib/components/MethodsList/methods-list.scss | 6 +- lib/components/ParamsList/params-list.html | 2 +- lib/components/Redoc/redoc.html | 2 +- lib/components/Redoc/redoc.scss | 439 +++++++++--------- .../RequestSamples/request-samples.scss | 67 +-- .../ResponsesList/responses-list.scss | 12 +- .../ResponsesSamples/responses-samples.scss | 55 +-- .../SchemaSample/schema-sample.scss | 4 + .../security-definitions.html | 64 ++- .../security-definitions.scss | 12 +- lib/components/SideMenu/side-menu.scss | 225 ++++----- lib/shared/components/Tabs/tabs.scss | 7 +- lib/shared/components/Zippy/zippy.scss | 6 + lib/shared/styles/_variables.scss | 56 ++- 22 files changed, 670 insertions(+), 655 deletions(-) diff --git a/lib/components/ApiInfo/api-info.html b/lib/components/ApiInfo/api-info.html index b8a8428c..19d5924b 100644 --- a/lib/components/ApiInfo/api-info.html +++ b/lib/components/ApiInfo/api-info.html @@ -1,5 +1,5 @@ -
-

{{info.title}} ({{info.version}})

+
+

{{info.title}} ({{info.version}})

Download OpenAPI (fka Swagger) specification: Download @@ -17,5 +17,7 @@ {{info.license.name}}

- + + +
diff --git a/lib/components/ApiInfo/api-info.scss b/lib/components/ApiInfo/api-info.scss index 0c7c1a81..b029683a 100644 --- a/lib/components/ApiInfo/api-info.scss +++ b/lib/components/ApiInfo/api-info.scss @@ -1,28 +1,24 @@ @import '../../shared/styles/variables'; -.api-info-header { - font-weight: normal; -} - -:host > div { - width: 60%; - padding: 40px; +:host > .api-info-wrapper { box-sizing: border-box; + padding: $section-spacing; + width: 60%; + @media (max-width: $right-panel-squash-breakpoint) { width: 100%; } } -a.openapi-button { - padding: 3px 8px 4px 8px; - color: $primary-color; +.openapi-button { border: 1px solid $primary-color; - margin-left: 0.5em; + color: $primary-color; font-weight: normal; + margin-left: 0.5em; + padding: 3px 8px 4px; } :host /deep/ [section] { - padding-top: 60px; - margin-top: 20px; + padding-top: 2 * $section-spacing; } diff --git a/lib/components/ApiLogo/api-logo.scss b/lib/components/ApiLogo/api-logo.scss index 7f78e62b..cf1cc7f6 100644 --- a/lib/components/ApiLogo/api-logo.scss +++ b/lib/components/ApiLogo/api-logo.scss @@ -1,5 +1,14 @@ @import '../../shared/styles/variables'; +:host { + display: block; + text-align: center; + + @media (max-width: $side-menu-mobile-breakpoint) { + display: none; + } +} + img { max-height: 150px; width: auto; diff --git a/lib/components/JsonSchema/_json-schema-common.scss b/lib/components/JsonSchema/_json-schema-common.scss index d50ad788..da8abf41 100644 --- a/lib/components/JsonSchema/_json-schema-common.scss +++ b/lib/components/JsonSchema/_json-schema-common.scss @@ -5,26 +5,16 @@ $cell-spacing: 25px; $cell-padding: 10px; $bullet-margin: 10px; $line-border: $lines-width solid $tree-lines-color; -$line-border-erase: ($lines-width + 1px) solid #fff; +$line-border-erase: ($lines-width + 1px) solid $background-color; + +$border-color: lighten($secondary-color, 50%); +$nullable-color: #3195a6; +$hint-border: 1px dotted rgba(38, 50, 56, 0.4); $param-name-height: 20px; $sub-schema-offset: ($bullet-size / 2) + $bullet-margin; -.param-name { - position: relative; - border-left: $line-border; - padding: $cell-padding 0; - vertical-align: top; - line-height: $param-name-height; - - white-space: nowrap; - font-size: 0.929em; - font-weight: $regular; - - box-sizing: border-box; -} - .param-name-wrap { display: inline-block; padding-right: $cell-spacing; @@ -32,10 +22,9 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin; } .param-info { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $border-color; padding: $cell-padding 0; width: 75%; - line-height: 1em; box-sizing: border-box; } @@ -46,7 +35,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin; margin-right: 6px; margin-left: 6px; border-radius: $border-radius; - background-color: rgba($primary-color, .1); + background-color: rgba($primary-color, 0.1); padding: 0 4px; color: rgba($primary-color, 0.7); } @@ -58,7 +47,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin; .param-required { vertical-align: middle; line-height: $param-name-height; - color: #f00; + color: $red; font-size: 12px; font-weight: bold; } @@ -66,7 +55,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin; .param-nullable { vertical-align: middle; line-height: $param-name-height; - color: #3195a6; + color: $nullable-color; font-size: 12px; font-weight: bold; } @@ -77,82 +66,103 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin; color: rgba($black, 0.4); font-size: 0.929em; font-weight: normal; + + &.array::before { + content: $array-text; + color: $black; + font-weight: $base-font-weight; + } + + &.tuple::before { + content: $tuple-text; + color: $black; + font-weight: $base-font-weight; + } + + &.with-hint { + display: inline-block; + margin-bottom: 0.4em; + border-bottom: $hint-border; + padding: 0; + cursor: help; + } + + &-trivial { + display: inline-block; + } + + &-file { + font-weight: bold; + text-transform: capitalize; + } } -.param-type.array:before { - content: "Array of "; - color: $black; - font-weight: $base-font-weight; -} - -.param-type.tuple:before { - content: "Tuple"; - color: $black; - font-weight: $base-font-weight; -} - -.param-type.with-hint { - display: inline-block; - margin-bottom: 0.4em; - border-bottom: 1px dotted rgba(38,50,56,0.4); - padding: 0; - cursor: help; -} - -.param-type-trivial { - display: inline-block; -} - -.param-type-file { - font-weight: bold; - text-transform: capitalize; -} - -/* tree */ +// tree // Bullet -.param-name > span:before { - content: ""; - display: inline-block; - width: $bullet-size; - height: $bullet-size + 6; - background-color: $primary-color; - margin: 0 $bullet-margin; - vertical-align: middle; -} - -.param-name > span:after { - content: ""; - position: absolute; - border-top: $line-border; - width: $bullet-margin; - left: 0; - top: ($param-name-height/2) + $cell-padding + 1; -} - - .param:first-of-type > .param-name:before { - content: ""; - display: block; - position: absolute; - left: -$lines-width; - top: 0; - border-left: $line-border-erase; - height: ($param-name-height/2) + $cell-padding + 1; -} - -.param:last-of-type > .param-name, .param.last > .param-name { +.param-name { + border-left: $line-border; + box-sizing: border-box; position: relative; - &:after { - content: ""; + padding: $cell-padding 0; + vertical-align: top; + line-height: $param-name-height; + + white-space: nowrap; + font-size: 0.929em; + font-weight: $regular; + + > span::before { + content: ''; + display: inline-block; + width: $bullet-size; + height: $bullet-size + 6; + background-color: $primary-color; + margin: 0 $bullet-margin; + vertical-align: middle; + } + + > span::after { + content: ''; + position: absolute; + border-top: $line-border; + width: $bullet-margin; + left: 0; + top: ($param-name-height / 2) + $cell-padding + 1; + } +} + +.param:first-of-type { + + > .param-name::before { + content: ''; display: block; position: absolute; - left: -$lines-width - 1px; + left: -$lines-width; + top: 0; border-left: $line-border-erase; - top: ($param-name-height/2) + $cell-padding + $lines-width + 1; - background-color: white; - bottom: 0; + height: ($param-name-height / 2) + $cell-padding + 1; + } +} + +.param:last-of-type, +.param.last { + + > .param-name { + position: relative; + + &::after { + content: ''; + display: block; + position: absolute; + left: -$lines-width - 1px; + border-left: $line-border-erase; + top: ($param-name-height / 2) + $cell-padding + $lines-width + 1; + background-color: $background-color; + bottom: 0; + } } } @@ -160,33 +170,46 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin; border-left-color: transparent; } -.param-schema .param-wrap:first-of-type .param-name:before { - display: none !important; +.param-schema { + .param-wrap:first-of-type { + .param-name::before { + display: none; + } + } } -.param-schema.last > td { - border-left: 0; +.param-schema.last { + > td { + border-left: 0; + } } .param-enum { color: $text-color; - font-size: 13px; + font-size: 0.95em; - &:before { - content: 'Values: {'; - } - - &:after { - content: '}'; - } - - > .enum-value { - &:after { - content: ", "; - } - - &:last-of-type:after { - content: none; - } + &::before { + content: 'Valid values: '; } } + +.param-default { + font-size: 0.95em; + + &::before { + content: 'Default: '; + } +} + +.param-enum-value, +.param-default-value { + background-color: $background-color; + border: 1px solid rgba($secondary-color, 0.2); + margin: 2px 3px; + padding: 0 5px; + border-radius: 2px; + color: $secondary-color; + display: inline-block; + min-width: 20px; + text-align: center; +} diff --git a/lib/components/JsonSchema/json-schema.html b/lib/components/JsonSchema/json-schema.html index 67d70ff8..495f2d7f 100644 --- a/lib/components/JsonSchema/json-schema.html +++ b/lib/components/JsonSchema/json-schema.html @@ -57,7 +57,7 @@ {{prop._name}} - {{prop._enumItem?.val | json}} + {{prop._enumItem?.val | json}} @@ -72,14 +72,15 @@ Required Nullable -
Default: {{prop.default | json}}
+
+ {{prop.default | json}} +
- {{enumItem.val | json}} + {{enumItem.val | json}}
- This field value determines the exact schema: diff --git a/lib/components/JsonSchema/json-schema.scss b/lib/components/JsonSchema/json-schema.scss index cf46b185..a189df47 100644 --- a/lib/components/JsonSchema/json-schema.scss +++ b/lib/components/JsonSchema/json-schema.scss @@ -1,8 +1,9 @@ @import 'json-schema-common'; -/* styles for array-schema for array */ +// styles for array-schema for array $array-marker-font-sz: 13px; $array-marker-line-height: 1.5; + :host { display: block; } @@ -15,6 +16,7 @@ $array-marker-line-height: 1.5; .derived-schema { display: none; } + .derived-schema.active { display: block; } @@ -156,13 +158,7 @@ table { } .discriminator-info { - font-weight: $regular; - margin-bottom: 10px; - - > span { - font-size: 0.9em; - font-weight: $light; - } + margin-top: 5px; } .discriminator-wrap:not(.empty) > td { @@ -214,7 +210,7 @@ li:before { } } -.param-enum-value { +.param-name-enumvalue { padding: 2px; background-color: #e6ebf6; diff --git a/lib/components/Method/method.html b/lib/components/Method/method.html index 20d908a5..861ff11a 100644 --- a/lib/components/Method/method.html +++ b/lib/components/Method/method.html @@ -13,12 +13,12 @@
-
Definition
+

Definition

{{method.httpMethod}}
{{method.apiUrl}}{{method.path}}{{method.apiUrl}}{{method.path}}
diff --git a/lib/components/Method/method.scss b/lib/components/Method/method.scss index af11795f..8d644a94 100644 --- a/lib/components/Method/method.scss +++ b/lib/components/Method/method.scss @@ -12,14 +12,6 @@ border-bottom: 0; } -h2 { - color: $secondary-color; -} - -responses-list, params-list { - display: block; -} - .method-header { margin-bottom: .9em; } @@ -35,7 +27,7 @@ responses-list, params-list { overflow-x: auto; } -.method-endpoint > h5 { +.method-endpoint > .method-params-subheader { padding-top: 1px; padding-bottom: 0; margin: 0; @@ -46,43 +38,42 @@ responses-list, params-list { border-radius: $border-radius; } -.api-url { +.method-api-url { color: rgba(#ffffff, .6); margin-left: 10px; margin-top: 2px; position: relative; top: 1px; font-family: $headers-font, $headers-font-family; - font-size: 0.929em!important; -} + font-size: 0.929em; -.path { - font-family: $headers-font, $headers-font-family; - position: relative; - top: 1px; - color: #ffffff; - font-size: 0.929em!important; + &-path { + font-family: $headers-font, $headers-font-family; + position: relative; + top: 1px; + color: #ffffff; + } } .method-tags { margin-top: 20px; -} -.method-tags a { - font-size: 16px; - color: #999; - display: inline-block; - padding: 0 0.5em; - text-decoration: none; -} + > a { + font-size: 16px; + color: #999; + display: inline-block; + padding: 0 0.5em; + text-decoration: none; -.method-tags a:before { - content: '#'; - margin-right: -0.4em; -} + &:before { + content: '#'; + margin-right: -0.4em; + } -.method-tags a:first-of-type { - padding: 0; + &:first-of-type { + padding: 0; + } + } } .method-content, .method-samples { @@ -93,20 +84,16 @@ responses-list, params-list { .method-content { width: 100% - $samples-panel-width; - padding: 40px; + padding: $section-spacing; } .method-samples { color: $sample-panel-color; width: 40%; - padding: 40px; + padding: $section-spacing; background: $samples-panel-bg-color; } -responses-samples { - display: block; -} - .method-samples header, .method-samples > h5 { color: $sample-panel-headers-color; @@ -137,6 +124,8 @@ responses-samples { background: #ffffff; padding: 3px 10px; text-transform: uppercase; + display: inline-block; + margin: 0; } [select-on-click] { diff --git a/lib/components/MethodsList/methods-list.scss b/lib/components/MethodsList/methods-list.scss index 4a5cbf3b..0cfbfa50 100644 --- a/lib/components/MethodsList/methods-list.scss +++ b/lib/components/MethodsList/methods-list.scss @@ -1,7 +1,11 @@ @import '../../shared/styles/variables'; +:host { + display: block; + overflow: hidden; +} .tag-info { - padding: 40px; + padding: $section-spacing; box-sizing: border-box; background-color: white; width: 60%; diff --git a/lib/components/ParamsList/params-list.html b/lib/components/ParamsList/params-list.html index 4000f8ea..c717ad15 100644 --- a/lib/components/ParamsList/params-list.html +++ b/lib/components/ParamsList/params-list.html @@ -16,7 +16,7 @@ title="{{param._displayTypeHint}}"> {{param._displayType}} {{param._displayFormat}} {{param._range}} Required -
Default: {{param.default | json}}
+
{{param.default | json}}
{{enumItem.val | json}}
diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html index 8b4476ad..89bacc5c 100644 --- a/lib/components/Redoc/redoc.html +++ b/lib/components/Redoc/redoc.html @@ -7,7 +7,7 @@
-
+
diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index 0570a1a4..cb9833f2 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -1,88 +1,64 @@ @import '../../shared/styles/variables'; :host { - display: block; - box-sizing: border-box; + display: block; + box-sizing: border-box; - -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%; + -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%; } .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 { - display: block; - box-sizing: border-box; -} - -methods-list { - display: block; - overflow: hidden; -} - -api-info, .side-bar { - display: block; - padding: 10px 0; -} - -api-logo { - display: block; - text-align: center; - - @media (max-width: $side-menu-mobile-breakpoint) { - display: none; - } + position: relative; + font-family: $base-font, $base-font-family; + font-size: $em-size; + line-height: $base-line-height; + color: $text-color; } [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; - } -} - -#api-content { - margin-left: $side-bar-width; - position: relative; @media (max-width: $side-menu-mobile-breakpoint) { - padding-top: 3em; - margin-left: 0; + z-index: 1; + width: 100%; + bottom: auto !important; } } -#api-content:before { +.api-content { + margin-left: $side-bar-width; + position: relative; + @media (max-width: $side-menu-mobile-breakpoint) { + padding-top: 3em; + margin-left: 0; + } +} + +.api-content:before { content: ""; background: $samples-panel-bg-color; height: 100%; @@ -91,178 +67,19 @@ api-logo { right: 0; position: absolute; z-index: -1; -} - -@media (max-width: $right-panel-squash-breakpoint) { - #api-content:before { + @media (max-width: $right-panel-squash-breakpoint) { display: none; } } -/* global redoc styles */ - -@for $index from 1 through 5 { - :host /deep/ h#{$index}{ - margin-top: 0; - font-family: $headers-font, $headers-font-family; - color: $headers-color; - font-weight: $headers-font-weight; - } -} - -:host /deep/ { - 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); - } - - .hint--inversed { - &:before { - border-top-color: #fff; - } - - &:after { - background: #fff; - color: #383838; - } - } - - @import '../../shared/styles/share-link'; -} - -footer { - position: relative; - text-align: right; - padding: 10px 40px; - font-size: 15px; - margin-top: -35px; - color: white; - a { - color: white; - } - strong { - font-size: 18px; - } -} - - -/* markdown elements */ - -:host /deep/ .redoc-markdown-block { - pre { - font-family: Courier, monospace; - white-space: pre-wrap; - background-color: #263238; - color: white; - 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(38,50,56,0.04); - padding: 0.1em 0 0.2em 0; - font-size: 1em; - border-radius: $border-radius; - - &:before, &:after { - letter-spacing: -0.2em; - content: "\00a0"; - } - } - - 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; - } -} .redoc-error { padding: 20px; text-align: center; - color: #cc0000; + color: $red; > h2 { - color: #cc0000; + color: $red; font-size: 40px; } } @@ -272,3 +89,161 @@ footer { margin: 0 auto; font-size: 18px; } + +/* global redoc styles */ + +@for $index from 1 through 5 { + :host /deep/ h#{$index}{ + margin-top: 0; + font-family: $headers-font, $headers-font-family; + color: $secondary-color; + font-weight: $headers-font-weight; + line-height: 1.4em; + } +} + +:host /deep/ { + h1 { font-size: $h1; color: $headers-color; } + 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); + } + + .hint--inversed { + &:before { + border-top-color: #fff; + } + + &:after { + background: #fff; + color: #383838; + } + } + + @import '../../shared/styles/share-link'; +} + +footer { + position: relative; + text-align: right; + padding: 10px $section-spacing; + font-size: 15px; + margin-top: -35px; + color: white; + a { + color: white; + } + strong { + font-size: 18px; + } +} + + +/* markdown elements */ + +:host /deep/ .redoc-markdown-block { + pre { + font-family: Courier, monospace; + white-space: pre-wrap; + background-color: #263238; + color: white; + 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(38,50,56,0.04); + padding: 0.1em 0 0.2em 0; + font-size: 1em; + border-radius: $border-radius; + + &:before, &:after { + letter-spacing: -0.2em; + content: "\00a0"; + } + } + + 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/RequestSamples/request-samples.scss b/lib/components/RequestSamples/request-samples.scss index b5496886..ab4a227f 100644 --- a/lib/components/RequestSamples/request-samples.scss +++ b/lib/components/RequestSamples/request-samples.scss @@ -2,6 +2,7 @@ :host { overflow: hidden; + display: block; } .action-buttons { @@ -37,48 +38,48 @@ } 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 /deep/ > 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 { - background-color: rgba(white, .1); - 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 /deep/ tabs ul { padding-top: 10px; } -pre { - overflow-x: auto; - word-break: break-all; - word-wrap: break-word; - white-space: pre-wrap; - margin-top: 0; - overflow-x: auto; - padding: 20px; - border-radius: 4px; - background-color: #222d32; - margin-bottom: 36px; +.code-sample pre { + overflow-x: auto; + word-break: break-all; + word-wrap: break-word; + white-space: pre-wrap; + margin-top: 0; + overflow-x: auto; + padding: 20px; + border-radius: 4px; + background-color: #222d32; + margin-bottom: 36px; } diff --git a/lib/components/ResponsesList/responses-list.scss b/lib/components/ResponsesList/responses-list.scss index 34063c49..4058ff2e 100644 --- a/lib/components/ResponsesList/responses-list.scss +++ b/lib/components/ResponsesList/responses-list.scss @@ -1,9 +1,13 @@ @import '../../shared/styles/variables'; +:host { + display: block; +} + .responses-list-header { font-size: 18px; padding: 0.2em 0; - margin: 3em 0 1.1em 0; + margin: 3em 0 1.1em; color: #253137; font-weight: normal; } @@ -45,13 +49,13 @@ header { margin-right: 6px; margin-left: 6px; border-radius: $border-radius; - background-color: rgba($primary-color, .1); + background-color: rgba($primary-color, 0.1); padding: 0 4px; color: rgba($primary-color, 0.7); } -.header-type.array:before { - content: "Array of "; +.header-type.array::before { + content: $array-text; color: $black; font-weight: $base-font-weight; } diff --git a/lib/components/ResponsesSamples/responses-samples.scss b/lib/components/ResponsesSamples/responses-samples.scss index b8ea1cba..db0f4f24 100644 --- a/lib/components/ResponsesSamples/responses-samples.scss +++ b/lib/components/ResponsesSamples/responses-samples.scss @@ -2,46 +2,39 @@ :host { overflow: hidden; -} - -tab, tabs { - display: block; -} - -schema-sample { - display: block; + display: block; } header { - font-family: $headers-font; - font-size: 0.929em; - text-transform: uppercase; - margin: 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 /deep/ > tabs > ul li { - 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; + 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; - &:hover { - color: #ffffff; - background-color: rgba(white, .1); - } + &:hover { + color: #ffffff; + background-color: rgba(white, .1); + } - &.active { - background-color: white; - color: $black; - } + &.active { + background-color: white; + color: $black; + } } :host /deep/ 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 2f0ecedf..714eac34 100644 --- a/lib/components/SchemaSample/schema-sample.scss +++ b/lib/components/SchemaSample/schema-sample.scss @@ -1,5 +1,9 @@ @import '../../shared/styles/variables'; +:host { + display: block; +} + pre { background-color: transparent; padding: 0; diff --git a/lib/components/SecurityDefinitions/security-definitions.html b/lib/components/SecurityDefinitions/security-definitions.html index e858c36b..165b6ea7 100644 --- a/lib/components/SecurityDefinitions/security-definitions.html +++ b/lib/components/SecurityDefinitions/security-definitions.html @@ -2,39 +2,37 @@

{{def.name}}

-
- - - - - - - - - - -
Security scheme type: {{def.details._displayType}}
{{def.details.in}} parameter name: {{def.details.name}}
+ + + + + + + + + - +
Security scheme type: {{def.details._displayType}}
{{def.details.in}} parameter name: {{def.details.name}}
+
diff --git a/lib/components/SecurityDefinitions/security-definitions.scss b/lib/components/SecurityDefinitions/security-definitions.scss index 37974052..2d2a1da8 100644 --- a/lib/components/SecurityDefinitions/security-definitions.scss +++ b/lib/components/SecurityDefinitions/security-definitions.scss @@ -1,16 +1,16 @@ @import '../../shared/styles/variables'; +:host { + display: block; +} + .security-definition:not(:last-of-type) { border-bottom: 1px solid rgba($text-color, .3); padding-bottom: 20px; } -h2, h3 { - color: $secondary-color; -} - :host h2 { - padding-top: 40px; + padding-top: $section-spacing; } h3 { @@ -18,7 +18,7 @@ h3 { font-size: 1em; } -:host .redoc-markdown-block table { +:host .security-scopes-details, :host .security-details { margin-top: 20px; } diff --git a/lib/components/SideMenu/side-menu.scss b/lib/components/SideMenu/side-menu.scss index 72a935fd..83a1be64 100644 --- a/lib/components/SideMenu/side-menu.scss +++ b/lib/components/SideMenu/side-menu.scss @@ -1,72 +1,77 @@ @import '../../shared/styles/variables'; $mobile-menu-compact-breakpoint: 550px; +:host { + display: block; + box-sizing: border-box; +} + .menu-header { - text-transform: uppercase; - color: $headers-color; - padding: 0 $side-menu-item-hpadding; - margin: 10px 0; + text-transform: uppercase; + color: $headers-color; + padding: 0 $side-menu-item-hpadding; + margin: 10px 0; } .menu-cat-header { - 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; + 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; + + &:hover, + &.active { + color: $primary-color; + background-color: $side-menu-active-bg-color; + } + + &[hidden] { + display: none; + } +} + +.menu-subitems { + margin: 0; + font-size: 0.929em; + line-height: 1.2em; + font-weight: $light; + color: rgba($text-color, .9); + padding: 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; - display: block; - padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding; - - &:hover, - &.active { - color: $primary-color; - background-color: $side-menu-active-bg-color; - } - - &[hidden] { - display: none; - } -} - -.menu-subitems { - margin: 0; - font-size: 0.929em; - line-height: 1.2em; - font-weight: $light; - color: rgba($text-color, .9); - padding: 0; + 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; + } - &.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%); - } + & li:hover, + & li.active { + background: darken($side-menu-active-bg-color, 6%); + } } @@ -74,82 +79,82 @@ $mobile-menu-compact-breakpoint: 550px; } .mobile-nav { - display: none; + 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; height: 3em; - line-height: 3em; - box-sizing: border-box; - border-bottom: 1px solid #ccc; - cursor: pointer; + background: url('data:image/svg+xml;utf8,'); + background-size: 70%; + background-repeat: no-repeat; + background-position: center; - &: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; + float: right; + vertical-align: middle; + } - 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; - } + .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/lib/shared/components/Tabs/tabs.scss b/lib/shared/components/Tabs/tabs.scss index 7c9ba4bf..5921feeb 100644 --- a/lib/shared/components/Tabs/tabs.scss +++ b/lib/shared/components/Tabs/tabs.scss @@ -1,5 +1,9 @@ @import '../../styles/variables'; +:host { + display: block; +} + ul { display: block; margin: 0; @@ -12,9 +16,6 @@ li { cursor: pointer; } -li.active { -} - .tab-success, .tab-error, .tab-redirect, .tab-info { &:before { content: ""; diff --git a/lib/shared/components/Zippy/zippy.scss b/lib/shared/components/Zippy/zippy.scss index 208057b3..a93ab00b 100644 --- a/lib/shared/components/Zippy/zippy.scss +++ b/lib/shared/components/Zippy/zippy.scss @@ -50,6 +50,12 @@ $zippy-redirect-bg-color: rgba($zippy-redirect-color, .08); .zippy-indicator svg { height: 1.2em; vertical-align: middle; + transition: all 0.3s ease; + transform: rotateZ(-180deg); +} + +.zippy-hidden > .zippy-title svg { + transform: rotateZ(0); } diff --git a/lib/shared/styles/_variables.scss b/lib/shared/styles/_variables.scss index 4a87b835..95ff58d8 100644 --- a/lib/shared/styles/_variables.scss +++ b/lib/shared/styles/_variables.scss @@ -1,48 +1,52 @@ // Colors // --------------------------- -$primary-color : #0033a0; -$secondary-color : #263238; -$black : #263238; -$green : #00aa13; -$yellow : #f1c400; -$red : #e53935; +$primary-color: #0033a0; +$secondary-color: #263238; +$black: #263238; +$green: #00aa13; +$yellow: #f1c400; +$red: #e53935; +$background-color: #fff; -$em-size : 14px; +$em-size: 14px; // Font weights // --------------------------- -$light : 300; -$regular : 400; -$bold : 700; +$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; +$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; +$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; +// spacings +$section-spacing: 40px; + // Side Bar // --------------------------- $side-bar-width: 260px; -$side-bar-bg-color: #FAFAFA; +$side-bar-bg-color: #fafafa; $side-menu-item-color: #384248; -$side-menu-even-bg-color: #F0F0F0; +$side-menu-even-bg-color: #f0f0f0; $side-menu-active-bg-color: #f0f0f0; $side-menu-item-hpadding: 20px; $side-menu-item-vpadding: 5px; @@ -54,7 +58,7 @@ $samples-panel-width: 40%; $sample-panel-headers-color: lighten($black, 50%); $sample-panel-color: lighten($black, 80%); -$tree-lines-color: rgba($primary-color, .5); +$tree-lines-color: rgba($primary-color, 0.5); $side-menu-mobile-breakpoint: 1000px; $right-panel-squash-breakpoint: 1100px; @@ -62,3 +66,7 @@ $right-panel-squash-breakpoint: 1100px; // Border Radius // --------------------------- $border-radius: 2px; + +// texts +$array-text: 'Array of '; +$tuple-text: 'Tuple '; From 77eeb53a489db44660298ed51bb782b0e8a50180 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 1 Nov 2016 17:21:32 +0200 Subject: [PATCH 07/17] Render pattern property (#42) --- lib/components/JsonSchema/_json-schema-common.scss | 14 ++++++++++++++ lib/components/JsonSchema/json-schema.html | 4 +++- lib/components/ParamsList/params-list.html | 9 ++++++--- 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/lib/components/JsonSchema/_json-schema-common.scss b/lib/components/JsonSchema/_json-schema-common.scss index da8abf41..bc4d44d3 100644 --- a/lib/components/JsonSchema/_json-schema-common.scss +++ b/lib/components/JsonSchema/_json-schema-common.scss @@ -193,6 +193,20 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin; } } +.param-pattern { + color: $nullable-color; + white-space: nowrap; + + &::before, + &::after { + content: '/'; + margin: 0 3px; + font-size: 1.2em; + font-weight: bold; + vertical-align: bottom; + } +} + .param-default { font-size: 0.95em; diff --git a/lib/components/JsonSchema/json-schema.html b/lib/components/JsonSchema/json-schema.html index 495f2d7f..295f2d1a 100644 --- a/lib/components/JsonSchema/json-schema.html +++ b/lib/components/JsonSchema/json-schema.html @@ -23,8 +23,9 @@ Nullable
- {{enumItem.val | json}} + {{enumItem.val | json}}
+ {{schema.pattern}}