Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-09-21 03:08:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Move sidemenu into sidebar

Browse Source
This commit is contained in:
Roman Hotsiy 2015-12-20 22:19:56 +02:00
parent f5394eec94
commit 7795ef5b15
5 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,14 @@
$headers-color: #00329F;
$method-headers-color: #253137;
$side-bar-width: 260px;
$side-bar-bg-color: #FAFAFA;
$side-menu-item-color: #384248;
$side-menu-bg-color: #FAFAFA;
$side-menu-even-bg-color: #F0F0F0;
$side-menu-active-bg-color: #E6E6E6;
$side-menu-item-hpadding: 20px;
$side-menu-item-vpadding: 5px;
$side-menu-width: 260px;
$samples-panel-bg-color: #263238;
$samples-panel-width: 40%;

4
lib/components/Redoc/redoc.html
View File

@ -1,4 +1,6 @@
<side-menu> </side-menu>
<div class="side-bar">
<side-menu> </side-menu>
</div>
<div class="api-content">
<api-info> </api-info>
<methods-list> </methods-list>

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

@ -5,7 +5,7 @@ side-menu {
box-sizing: border-box;
}
api-info, side-menu {
api-info, .side-bar {
display: block;
padding: 10px 0;
}
@ -14,15 +14,15 @@ api-info {
padding: 10px 20px;
}
side-menu {
.side-bar {
position: fixed;
width: $side-menu-width;
width: $side-bar-width;
height: 100%;
overflow-y: auto;
overflow-x: hidden;;
background-color: $side-menu-bg-color;
background-color: $side-bar-bg-color;
}
.api-content {
margin-left: $side-menu-width;
margin-left: $side-bar-width;
}

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

@ -32,7 +32,7 @@ export default class SideMenu extends BaseComponent {
this.zone = zone;
this.adapter = new BrowserDomAdapter();
this.scrollParent = detectScollParent(document.querySelector('side-menu'));
this.scrollParent = detectScollParent(document.querySelector('methods-list'));
// for some reason constructor is not run inside zone
// as workaround running it manually

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

@ -4,15 +4,17 @@
text-transform: uppercase;
color: $headers-color;
padding: 0 $side-menu-item-hpadding;
margin: 10px 0;
font-size: 16px;
}
.menu-cat-header {
font-weight: bold;
//font-weight: bold;
font-size: 15px;
cursor: pointer;
color: $side-menu-item-color;
text-transform: uppercase;
background-color: $side-menu-bg-color;
background-color: $side-bar-bg-color;
display: block;
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
@ -39,7 +41,7 @@
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
padding-left: $side-menu-item-hpadding*2;
background-color: $side-menu-bg-color;
background-color: $side-bar-bg-color;
overflow: hidden;
text-overflow: ellipsis;
}
@ -55,7 +57,7 @@
}
.menu-subitems li:nth-of-type(even) {
background-color: $side-menu-bg-color;
background-color: $side-bar-bg-color;
}
}