1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-05 05:25:27 +02:00

WIP new document UX/UI

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

View file

@ -7,7 +7,7 @@
> .start-button {
text-align: center;
margin: 60px 0;
margin: 30px 0 20px 0;
position: relative;
color: $color-gray-light;

View file

@ -20,6 +20,10 @@
> .document-customfields {
margin-bottom: 4rem;
background-color: $color-off-white;
border: 1px solid $color-border;
padding: 20px 40px;
@include border-radius(3px);
.row {
padding: 5px 0;
@ -33,8 +37,8 @@
.heading {
font-size: 1.1rem;
font-weight: bold;
color: $color-off-black;
font-weight: 700;
color: $color-dark;
text-align: left;
}

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

View file

@ -42,6 +42,10 @@
vertical-align: text-top;
}
}
> .delete {
text-align: right;
}
}
}
}