From a0a209820facfc29f143e70a78c3404b3bd64604 Mon Sep 17 00:00:00 2001 From: Cesar Date: Mon, 14 Mar 2016 15:29:27 -0400 Subject: [PATCH] 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;