diff --git a/demo/index.html b/demo/index.html index e1727b543a..55e1954393 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,30 +4,15 @@ ReDoc - - + + - - - diff --git a/demo/main.css b/demo/main.css index 15e5458987..4e41b69a8a 100644 --- a/demo/main.css +++ b/demo/main.css @@ -1,133 +1,3 @@ body { 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%; - font-family: Monserrat, sans-serif; -} - -nav input, nav button { - 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; -} - -nav input { - width: 50%; - box-sizing: border-box; - max-width: 500px; - padding: 0 10px; - - color: #555; - background-color: #fff; - border: 1px solid #ccc; - -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); -} - -nav button { - 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; -} - -nav button:hover { - background-color: #e6e6e6; - border-color: #adadad; -} -nav button:active { - 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; -} - -nav iframe { - margin: 10px 0; - position: absolute; - right: 0; - top: 0; -} - -header a { - color: inherit; - text-decoration: none; -} -@media (min-width: 1000px) { - nav header { - position: absolute; - } -} - -@media (max-width: 500px) { - nav input { - width: 70%; - } - nav header { - display: none; - } - - nav iframe { - display: none; - } -} +} \ No newline at end of file diff --git a/lib/components/ParamsList/params-list.scss b/lib/components/ParamsList/params-list.scss index 12b7f981b8..9cbc7fdf26 100644 --- a/lib/components/ParamsList/params-list.scss +++ b/lib/components/ParamsList/params-list.scss @@ -7,11 +7,11 @@ $hint-color: #999999; } .param-list-header { - border-bottom: 1px solid rgba($text-color, .3); + // border-bottom: 1px solid rgba($text-color, .3); // padding: 0.2em 0; margin: 3em 0 1em 0; color: rgba($text-color, .5); - font-weight: normal; + font-weight: 600; text-transform: uppercase; } diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html index 2bb172a71f..5f574c80e9 100644 --- a/lib/components/Redoc/redoc.html +++ b/lib/components/Redoc/redoc.html @@ -4,13 +4,12 @@

Oops... ReDoc failed to render this spec

-
+
-
diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index 59becb06c0..647bff4aa3 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -63,7 +63,7 @@ side-menu { .api-content { margin-left: $side-bar-width; - z-index: 50; + z-index: 100; position: relative; // height: 100vh; // overflow: scroll; @@ -80,7 +80,7 @@ side-menu { bottom: 0; right: 0; left: $side-bar-width; - z-index: 1; + z-index: 85; &-actual { background: $samples-panel-bg-color; @@ -114,6 +114,10 @@ side-menu { /* global menu items styles (search results + menu) */ :host /deep/ { + mark { + background-color: $yellow; + } + .menu-item-header > span { display: inline-block; vertical-align: middle; @@ -359,4 +363,4 @@ footer { text-align: left; font-weight: bold; } -} +} \ No newline at end of file diff --git a/lib/components/SchemaSample/schema-sample.scss b/lib/components/SchemaSample/schema-sample.scss index ff3fbf9e53..a7d3ab7786 100644 --- a/lib/components/SchemaSample/schema-sample.scss +++ b/lib/components/SchemaSample/schema-sample.scss @@ -137,6 +137,12 @@ pre { border-radius: $border-radius*2; background-color: darken($black, 2%); margin-bottom: 36px; + font-family: $mono-font, $mono-font-family; + font-size: $mono-font-size; + line-height: $mono-line-height; + li { + font-family: $mono-font, $mono-font-family; + } } ul, .redoc-json ul { diff --git a/lib/components/Search/redoc-search.html b/lib/components/Search/redoc-search.html index aef24371a7..d3dbc389a1 100644 --- a/lib/components/Search/redoc-search.html +++ b/lib/components/Search/redoc-search.html @@ -9,7 +9,10 @@
  • - {{item.menuItem?.metadata?.operation}} {{item.menuItem.name}} + + + + {{item.menuItem.name}} +
    • diff --git a/lib/components/Search/redoc-search.scss b/lib/components/Search/redoc-search.scss index 601917af58..4db724bd0e 100644 --- a/lib/components/Search/redoc-search.scss +++ b/lib/components/Search/redoc-search.scss @@ -6,13 +6,15 @@ } .search-input-wrap { - padding: 0 20px; + padding: 0 10px; > svg { width: 13px; height: 27px; display: inline-block; position: absolute; + left: 21px; + top: 12px; path { fill: lighten($text-color, 20%); @@ -25,6 +27,7 @@ width: 13px; text-align: center; right: 20px; + top: 12px; height: 28px; line-height: 28px; vertical-align: middle; @@ -35,16 +38,17 @@ input { width: 100%; box-sizing: border-box; - padding: 5px 20px 5px 20px; + padding: 5px 20px 5px 28px; border: 0; - border-bottom: 1px solid darken($side-bar-bg-color, 10%); - font-weight: bold; + border: 1px solid darken($side-bar-bg-color, 10%); + font-weight: normal; - font-size: 13px; + font-size: 15px; color: $text-color; - background-color: transparent; + background-color: #fff; outline: none; + border-radius: 30px; } .search-results { @@ -58,15 +62,24 @@ input { border-top: 1px solid darken($side-bar-bg-color, 10%); line-height: 1.2; - min-height: 150px; max-height: 250px; + font-family: $base-font-family; > li { display: block; cursor: pointer; - font-family: Montserrat, sans-serif; + font-family: $base-font-family; + font-weight: 500; font-size: 13px; - padding: 5px 20px; + padding: 4px 20px; + padding-left: 44px; + position: relative; + i.fa { + position: absolute; + left: 20px; + color: $red; + top: 6px; + } &:hover { background-color: darken($side-bar-bg-color, 10%); @@ -74,8 +87,12 @@ input { } li.menu-item-depth-1 { - color: $primary-color; - text-transform: uppercase; + // color: $primary-color; + // text-transform: uppercase; + } + + li.menu-item-depth-2 { + font-size: 0.9em; } > li.disabled { diff --git a/lib/components/SideMenu/side-menu-items.html b/lib/components/SideMenu/side-menu-items.html index 726900cd3f..7a65149ca8 100644 --- a/lib/components/SideMenu/side-menu-items.html +++ b/lib/components/SideMenu/side-menu-items.html @@ -1,11 +1,10 @@
    • diff --git a/lib/components/SideMenu/side-menu-items.scss b/lib/components/SideMenu/side-menu-items.scss index ebdec6698f..f9d8a24e51 100644 --- a/lib/components/SideMenu/side-menu-items.scss +++ b/lib/components/SideMenu/side-menu-items.scss @@ -60,7 +60,7 @@ .menu-subitems { margin: 0; - font-size: 0.929em; + font-size: $h5; line-height: 1.2em; font-weight: $light; color: rgba($text-color, .9); @@ -78,7 +78,7 @@ font-family: $headers-font, $headers-font-family; font-weight: $light; font-size: $h5; - text-transform: uppercase; + // text-transform: uppercase; } // do not capitalize method summuary in level-1 menu @@ -98,7 +98,8 @@ .menu-item-depth-2 { > .menu-item-header { - padding-left: $side-menu-item-hpadding; + padding-left: $side-menu-item-hpadding * 2; + font-size: 0.9em; } > .menu-item-header:hover, @@ -119,7 +120,8 @@ font-family: $headers-font, $headers-font-family; color: rgba($text-color, .4); text-transform: uppercase; - font-size: 0.8em; + font-size: 0.9em; + font-weight: 600; padding-bottom: 0; cursor: default; diff --git a/lib/shared/styles/_variables.scss b/lib/shared/styles/_variables.scss index 67f49c1847..5ad078d822 100644 --- a/lib/shared/styles/_variables.scss +++ b/lib/shared/styles/_variables.scss @@ -1,15 +1,15 @@ // Colors // --------------------------- -$primary-color: #0033a0; -$secondary-color: #263238; -$black: #263238; -$green: #00aa13; -$yellow: #f1c400; -$red: #e53935; +$primary-color: #EF3934; +$secondary-color: #282C36; +$black: #282C36; +$green: #44C95B; +$yellow: #FFB400; +$red: #EF3934; $background-color: #fff; $border-color: #ccc; -$em-size: 14px; +$em-size: 15px; // Font weights // --------------------------- @@ -19,24 +19,32 @@ $bold: 700; // Base Font // --------------------------- -$base-font: Roboto; -$base-font-family: sans-serif; +$base-font: "Cera Pro"; +$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; $base-font-weight: $light; $base-font-size: 1em; $base-line-height: 1.5em; $text-color: $black; +// Mono Font +// --------------------------- +$mono-font: "Andale Mono"; +$mono-font-family: monospace; +$mono-font-size: 0.85em; +$mono-line-height: 1.3em; +$text-color: $black; + // Heading Font // --------------------------- -$headers-font: Montserrat; -$headers-font-family: sans-serif; +$headers-font: "Cera Pro"; +$headers-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; $headers-font-weight: $regular; $headers-color: $primary-color; $h1: 1.85714285714286em; $h2: 1.5714285714285714em; $h3: 1.2857142857142858em; $h4: 1.1428571428571428em; -$h5: 0.929em; +$h5: 1em; // spacings $section-spacing: 40px; diff --git a/package.json b/package.json index f2d5a7ec98..2e0b90b5f3 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,7 @@ "module": "dist/redoc.module.js", "types": "dist/redoc.module.d.ts", "scripts": { - "start": - "webpack-dev-server --config build/webpack.dev.js --content-base demo", + "start": "webpack-dev-server --config build/webpack.dev.js --content-base demo", "start:prod": "NODE_ENV=production npm start", "test": "npm run lint && node ./build/run_tests.js", "lint": "tslint -e \"lib/**/*{ngfactory|css.shim}.ts\" lib/**/*.ts", @@ -27,14 +26,12 @@ "e2e-server": "http-server -p 3000 tests/e2e", "e2e-copy": "cp dist/redoc.min.js tests/e2e/", "webdriver": "webdriver-manager update", - "deploy": - "node ./build/prepare_deploy.js && deploy-to-gh-pages --update demo", + "deploy": "node ./build/prepare_deploy.js && deploy-to-gh-pages --update demo", "branch-release": "git reset --hard && branch-release", "clean": "rimraf dist .tmp compiled lib/**/*.css", "ngc": "ngc -p tsconfig.json", "inline": "ng2-inline -o .tmp -r --compress \"lib/**/*.ts\"", - "build:module": - "npm run build:sass && npm run inline && ngc -p tsconfig.aot.json && npm run module:css", + "build:module": "npm run build:sass && npm run inline && ngc -p tsconfig.aot.json && npm run module:css", "module:css": "node build/join-module-css.js", "webpack:prod": "webpack --config build/webpack.prod.js --profile --bail", "build:sass": "node-sass -q -o lib lib",