Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-11-04 01:37:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Global styles and Menu style

Browse Source
This commit is contained in:
Cesar 2016-03-02 14:48:55 -05:00
parent d07e2f0026
commit 06cba79383
9 changed files with 291 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
lib/common/styles/_variables.scss
View File

@ -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;
}
}

4
lib/components/JsonSchema/json-schema-common.scss
View File

@ -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 {

10
lib/components/Method/method.scss
View File

@ -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;
}

4
lib/components/ParamsList/params-list.html
View File

@ -1,4 +1,4 @@
<h4 class="param-list-header" *ngIf="data.params.length"> Parameters </h4>
<h5 class="param-list-header" *ngIf="data.params.length"> Parameters </h5>
<template ngFor [ngForOf]="data.params" #paramType="$implicit">
<header class="paramType"> {{paramType.place}} Parameters </header>
<br>
@ -23,7 +23,7 @@
</template>
<div *ngIf="data.bodyParam">
<h4 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h4>
<h5 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h5>
<div class="body-param-description" innerHtml="{{data.bodyParam.description | marked}}"></div>
<div>

6
lib/components/ParamsList/params-list.scss
View File

@ -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;
}

50
lib/components/Redoc/redoc.scss
View File

@ -81,11 +81,53 @@ api-logo {
/* global redoc styles */
:host p {
@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 {
@ -110,10 +152,10 @@ api-logo {
code {
font-family: Courier, monospace;
background-color: rgba(0,0,0,0.04);
padding: 0.2em 0;
background-color: rgba(38,50,56,0.04);
padding: 0.1em 0 0.2em 0;
font-size: 1em;
border-radius: 3px;
border-radius: $border-radius;
&:before, &:after {
letter-spacing: -0.2em;

2
lib/components/RequestSamples/request-samples.scss
View File

@ -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;

2
lib/components/SideMenu/side-menu.html
View File

@ -6,7 +6,7 @@
</span>
</div>
<div id="resources-nav">
<h2 class="menu-header"> API reference </h2>
<h5 class="menu-header"> API reference </h5>
<div *ngFor="var cat of data.menu; #idx = index" class="menu-cat">
<label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ngClass]="{active: cat.active}"> {{cat.name}}</label>

64
lib/components/SideMenu/side-menu.scss
View File

@ -6,69 +6,67 @@ $mobile-menu-compact-breakpoint: 550px;
color: $headers-color;
padding: 0 $side-menu-item-hpadding;
margin: 10px 0;
font-size: 16px;
}
.menu-cat-header {
font-size: 15px;
font-size: $h5;
font-family: $headers-font, $headers-font-family;
font-weight: $light;
cursor: pointer;
color: $side-menu-item-color;
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;
}
.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;
font-size: 13px;
font-weight: $regular;
color: rgba($text-color, .6);
padding: 0;
height: 0;
overflow: hidden;
}
.menu-subitems.active {
&.active {
height: auto;
}
}
.menu-subitems li {
& 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;
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;
& li:hover,
& li.active {
background: darken($side-menu-active-bg-color, 6%);
}
}
.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 {