webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Converted jQuery bits into raw JS components

Browse Source
This commit is contained in:
Dan Brown
2017-08-06 21:08:03 +01:00
parent 5e5928a8a6
commit 2a069880cd
23 changed files with 387 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
resources/assets/sass/_animations.scss
View File

@ -36,41 +36,12 @@
}
}
.anim.notification {
transform: translate3d(580px, 0, 0);
animation-name: notification;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
&.stopped {
animation-name: notificationStopped;
}
}
@keyframes notification {
0% {
transform: translate3d(580px, 0, 0);
}
10% {
transform: translate3d(0, 0, 0);
}
90% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(580px, 0, 0);
}
}
@keyframes notificationStopped {
0% {
transform: translate3d(580px, 0, 0);
}
10% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
.anim.menuIn {
transform-origin: 100% 0%;
animation-name: menuIn;
animation-duration: 120ms;
animation-delay: 0s;
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
}
@keyframes menuIn {
@ -85,14 +56,6 @@
}
}
.anim.menuIn {
transform-origin: 100% 0%;
animation-name: menuIn;
animation-duration: 120ms;
animation-delay: 0s;
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
}
@keyframes loadingBob {
0% {
transform: translate3d(0, 0, 0);

63
resources/assets/sass/_components.scss
View File

@ -1,4 +1,65 @@
.overlay {
// System wide notifications
[notification] {
position: fixed;
top: 0;
right: 0;
margin: $-xl*2 $-xl;
padding: $-l $-xl;
background-color: #EEE;
border-radius: 3px;
box-shadow: $bs-med;
z-index: 999999;
display: block;
cursor: pointer;
max-width: 480px;
transition: transform ease-in-out 360ms;
transform: translate3d(580px, 0, 0);
i, span {
display: table-cell;
}
i {
font-size: 2em;
padding-right: $-l;
}
span {
vertical-align: middle;
}
&.pos {
background-color: $positive;
color: #EEE;
}
&.neg {
background-color: $negative;
color: #EEE;
}
&.warning {
background-color: $secondary;
color: #EEE;
}
&.showing {
transform: translate3d(0, 0, 0);
}
}
[chapter-toggle] {
cursor: pointer;
margin: 0;
transition: all ease-in-out 180ms;
user-select: none;
i.zmdi-caret-right {
transition: all ease-in-out 180ms;
transform: rotate(0deg);
transform-origin: 25% 50%;
}
&.open {
//margin-bottom: 0;
}
&.open i.zmdi-caret-right {
transform: rotate(90deg);
}
}
[overlay] {
background-color: rgba(0, 0, 0, 0.333);
position: fixed;
z-index: 95536;

27
resources/assets/sass/_lists.scss
View File

@ -9,7 +9,6 @@
.inset-list {
display: none;
overflow: hidden;
margin-bottom: $-l;
}
h5 {
display: block;
@ -22,6 +21,9 @@
border-left-color: $color-page-draft;
}
}
.entity-list-item {
margin-bottom: $-m;
}
hr {
margin-top: 0;
}
@ -51,23 +53,6 @@
margin-right: $-s;
}
}
.chapter-toggle {
cursor: pointer;
margin: 0 0 $-l 0;
transition: all ease-in-out 180ms;
user-select: none;
i.zmdi-caret-right {
transition: all ease-in-out 180ms;
transform: rotate(0deg);
transform-origin: 25% 50%;
}
&.open {
margin-bottom: 0;
}
&.open i.zmdi-caret-right {
transform: rotate(90deg);
}
}
.sidebar-page-nav {
$nav-indent: $-s;
@ -171,7 +156,7 @@
background-color: rgba($color-chapter, 0.12);
}
}
.chapter-toggle {
[chapter-toggle] {
padding-left: $-s;
}
.list-item-chapter {
@ -336,8 +321,10 @@ ul.pagination {
h4, a {
line-height: 1.2;
}
p {
.entity-item-snippet {
display: none;
}
p {
font-size: $fs-m * 0.8;
padding-top: $-xs;
margin: 0;

40
resources/assets/sass/styles.scss
View File

@ -66,44 +66,6 @@ body.dragging, body.dragging * {
}
}
// System wide notifications
.notification {
position: fixed;
top: 0;
right: 0;
margin: $-xl*2 $-xl;
padding: $-l $-xl;
background-color: #EEE;
border-radius: 3px;
box-shadow: $bs-med;
z-index: 999999;
display: block;
cursor: pointer;
max-width: 480px;
i, span {
display: table-cell;
}
i {
font-size: 2em;
padding-right: $-l;
}
span {
vertical-align: middle;
}
&.pos {
background-color: $positive;
color: #EEE;
}
&.neg {
background-color: $negative;
color: #EEE;
}
&.warning {
background-color: $secondary;
color: #EEE;
}
}
// Loading icon
$loadingSize: 10px;
.loading-container {
@ -151,7 +113,7 @@ $loadingSize: 10px;
// Back to top link
$btt-size: 40px;
#back-to-top {
[back-to-top] {
background-color: $primary;
position: fixed;
bottom: $-m;