outline view

This commit is contained in:
Artur Adib 2012-04-12 17:19:57 -07:00
parent a8bb575fd8
commit e92656712f
2 changed files with 23 additions and 9 deletions

View File

@ -407,14 +407,14 @@ body {
width: 188px; width: 188px;
top: 33px; top: 33px;
bottom: 0; bottom: 0;
padding: 52px 4px 0; padding: 16px 4px 0;
overflow: auto; overflow: auto;
} }
#outlineView.hidden { #outlineView.hidden {
display:none; display:none;
} }
.outlineEntry { /*.outlineItem {
width: -moz-calc(100% - 8px); width: -moz-calc(100% - 8px);
height: 20px; height: 20px;
padding: 2px 0 0 10px; padding: 2px 0 0 10px;
@ -427,7 +427,7 @@ body {
cursor: default; cursor: default;
} }
.outlineEntry:hover { .outlineItem:hover {
background-color: hsla(0,0%,100%,.02); background-color: hsla(0,0%,100%,.02);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box; background-clip: padding-box;
@ -437,7 +437,7 @@ body {
color: hsla(0,0%,100%,.9); color: hsla(0,0%,100%,.9);
} }
.outlineEntry.selected { .outlineItem.selected {
background-color: hsla(0,0%,100%,.08); background-color: hsla(0,0%,100%,.08);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box; background-clip: padding-box;
@ -446,6 +446,25 @@ body {
0 0 1px hsla(0,0%,0%,.2); 0 0 1px hsla(0,0%,0%,.2);
color: hsla(0,0%,100%,1); color: hsla(0,0%,100%,1);
} }
*/
.outlineItem > .outlineItems {
margin-left: 20px;
}
.outlineItem > a {
text-decoration: none;
color: hsla(0,0%,100%,.8);
font-size: 12px;
}
.outlineItem > a:hover {
background-color: hsla(0,0%,100%,.1);
color: hsla(0,0%,100%,.9);
}
canvas { canvas {
margin: auto; margin: auto;

View File

@ -79,11 +79,6 @@
</div> </div>
<div id="outlineView" class="hidden"> <div id="outlineView" class="hidden">
<div class="outlineEntry selected">Page 1</div>
<div class="outlineEntry">Page 2</div>
<div class="outlineEntry">Page 3</div>
<div class="outlineEntry">Page 4</div>
<div class="outlineEntry">Page 5</div>
</div> </div>
</div> </div>