Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-13 12:26:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Side menu styling

Browse Source
This commit is contained in:
Roman Hotsiy 2015-11-26 22:06:54 +02:00
parent 917fd7632b
commit 96418ba54d
4 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,12 @@
$headers-color: #00329F; $headers-color: #00329F;
$method-headers-color: #253137; $method-headers-color: #253137;
$side-menu-item-color: #384248;
$side-menu-bg-color: #FAFAFA; $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; $side-menu-width: 260px;
$samples-panel-bg-color: #263238; $samples-panel-bg-color: #263238;

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

@ -7,6 +7,10 @@ side-menu {
api-info, side-menu { api-info, side-menu {
display: block; display: block;
padding: 10px 0;
}
api-info {
padding: 10px 20px; padding: 10px 20px;
} }

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

@ -1,5 +1,5 @@
<h2 class="menu-header"> Api reference </h2> <h2 class="menu-header"> Api reference </h2>
<div *ng-for="var cat of data.menu; #idx = index"> <div *ng-for="var cat of data.menu; #idx = index" class="menu-cat">
<label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ng-class]="{active: cat.active}"> {{cat.name}}</label> <label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ng-class]="{active: cat.active}"> {{cat.name}}</label>
<ul class="menu-subitems" [ng-class]="{active: cat.active}"> <ul class="menu-subitems" [ng-class]="{active: cat.active}">

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

@ -1,25 +1,30 @@
@import '../../common/styles/variables';
.menu-header { .menu-header {
text-transform: uppercase; text-transform: uppercase;
color: #1976D3; color: $headers-color;
padding: 0 $side-menu-item-hpadding;
} }
$side-menu-item-color: #384248;
$side-menu-bg: #FAFAFA;
$side-menu-even-bg: #F0F0F0;
$side-menu-active-bg-color: #E6E6E6;
.menu-cat-header { .menu-cat-header {
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
color: $side-menu-item-color; color: $side-menu-item-color;
text-transform: uppercase; text-transform: uppercase;
background-color: $side-menu-bg; background-color: $side-menu-bg-color;
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-subitems { .menu-subitems {
padding-left: 20px;
margin: 0; margin: 0;
padding: 0;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
} }
@ -30,10 +35,31 @@ $side-menu-active-bg-color: #E6E6E6;
.menu-subitems li { .menu-subitems li {
list-style: none inside none; list-style: none inside none;
padding: 5px 0;
cursor: pointer; cursor: pointer;
padding: $side-menu-item-vpadding 0;
padding-left: $side-menu-item-hpadding*2;
background-color: $side-menu-bg-color;
overflow: hidden;
text-overflow: ellipsis;
} }
.menu-item.active, .menu-subitems li.active { .menu-subitems li:nth-of-type(even) {
color: #1976D3; 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-menu-bg-color;
}
}
.menu-cat-header.active, .menu-subitems li.active {
background-color: $side-menu-active-bg-color !important;
font-weight: bold;
} }