From 06cba79383895e4b62b7a78057bda642a1aa2a61 Mon Sep 17 00:00:00 2001 From: Cesar Date: Wed, 2 Mar 2016 14:48:55 -0500 Subject: [PATCH] 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); + } }