From 2a8ea8f6690ab09dfc7b1cc62bdff5d297bc434c Mon Sep 17 00:00:00 2001 From: Cesar Date: Mon, 29 Feb 2016 17:18:00 -0500 Subject: [PATCH] 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; - } -}