Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-02 03:55:24 +02:00
Code Releases Activity

WIP new document UX/UI

Browse source
This commit is contained in:
Harvey Kandola 2018-05-29 18:26:04 +01:00
parent 21ba55a58f
commit 36be6243ad
23 changed files with 910 additions and 4231 deletions
Download patch file Download diff file Expand all files Collapse all files

148
gui/app/styles/view/document/doc-toc.scss
View file

@ -1,96 +1,72 @@
.document-toc {
@include border-radius(3px);
@include ease-in();
margin: 0;
padding: 0 20px 20px 20px;
background-color: $color-off-white;
border: 1px solid $color-border;
// overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
box-sizing: border-box; // ensures width/height properties (and min/max properties) includes content, padding and border
z-index: 777;
display: block;
position: relative; //
width: 100%; //
height: 500px;
transform: none; //
.document-sidebar {
background-color: $color-white;
margin: 20px 20px;
> .header {
@include sticky();
flex-direction: column;
top: 0;
padding-top: 20px;
margin: 0;
background-color: $color-off-white;
> .document-toc {
@include border-radius(3px);
@include ease-in();
@include sticky();
margin: 0;
padding: 0 20px 20px 20px;
display: block;
// height: calc(100vh - 180px);
> .title {
color: $color-gray;
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 20px;
text-align: center;
}
> .header {
top: 0;
padding-top: 20px;
margin: 0;
> .toc-controls {
margin: 0 0 0 0;
text-align: center;
> .disabled {
cursor: not-allowed !important;
> .toc-controls {
margin: 0 0 0 0;
text-align: center;
> .material-icons {
color: $color-gray-light;
}
}
}
}
> .disabled {
cursor: not-allowed !important;
> .index-list {
padding: 0;
list-style: none;
font-size: 0.9rem;
overflow-x: hidden;
list-style-type: none;
margin: 0 0 0 0;
> .material-icons {
color: $color-gray-light;
}
}
}
}
.item {
@extend .no-select;
padding: 4px 0;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: nowrap;
overflow: hidden;
> .link {
color: $color-dark;
font-weight: bold;
&:hover {
color: $color-link;
}
> .index-list {
padding: 0;
list-style: none;
font-size: 0.9rem;
overflow-x: hidden;
list-style-type: none;
margin: 0 0 0 0;
> .numbering {
color: $color-gray;
font-weight: bold;
display: inline-block;
margin-right: 10px;
}
}
.item {
@extend .no-select;
padding: 4px 0;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: nowrap;
overflow: hidden;
> .selected {
color: $color-link;
}
}
}
> .link {
color: $color-dark;
font-weight: bold;
&:hover {
color: $color-link;
}
> .numbering {
color: $color-gray;
font-weight: bold;
display: inline-block;
margin-right: 10px;
}
}
> .selected {
color: $color-link;
}
}
}
}
}
.document-toc-desktop {
margin: 30px 0 30px 0;
display: inline-block;
position: fixed;
top: 150px;
right: 30px;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}