mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
e0279f93f9
The new back-to-top button will show after scrolling a short distance down a long page. Closes #44.
167 lines
2.9 KiB
SCSS
167 lines
2.9 KiB
SCSS
@import "reset";
|
|
@import "variables";
|
|
@import "fonts";
|
|
@import "mixins";
|
|
@import "html";
|
|
@import "text";
|
|
@import "grid";
|
|
@import "blocks";
|
|
@import "buttons";
|
|
@import "forms";
|
|
@import "tables";
|
|
@import "animations";
|
|
@import "tinymce";
|
|
@import "highlightjs";
|
|
@import "image-manager";
|
|
@import "header";
|
|
@import "lists";
|
|
@import "pages";
|
|
|
|
[v-cloak], [v-show] {display: none;}
|
|
|
|
[ng\:cloak], [ng-cloak], .ng-cloak {
|
|
display: none !important;
|
|
}
|
|
|
|
// Jquery Sortable Styles
|
|
.dragged {
|
|
position: absolute;
|
|
opacity: 0.5;
|
|
z-index: 2000;
|
|
}
|
|
body.dragging, body.dragging * {
|
|
cursor: move !important;
|
|
}
|
|
|
|
// User Avatar Images
|
|
.avatar {
|
|
border-radius: 100%;
|
|
background-color: #EEE;
|
|
width: 30px;
|
|
height: 30px;
|
|
&.med {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
&.large {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
// 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: table;
|
|
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;
|
|
}
|
|
}
|
|
|
|
// Loading icon
|
|
$loadingSize: 10px;
|
|
.loading-container {
|
|
position: relative;
|
|
display: block;
|
|
height: $loadingSize;
|
|
margin: $-xl auto;
|
|
> div {
|
|
width: $loadingSize;
|
|
height: $loadingSize;
|
|
border-radius: $loadingSize;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
transform: translate3d(0, 0, 0);
|
|
animation-name: loadingBob;
|
|
animation-duration: 1.4s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
|
|
margin-right: 4px;
|
|
background-color: $color-page;
|
|
animation-delay: 0.3s;
|
|
}
|
|
> div:first-child {
|
|
left: -($loadingSize+$-xs);
|
|
background-color: $color-book;
|
|
animation-delay: 0s;
|
|
}
|
|
> div:last-child {
|
|
left: $loadingSize+$-xs;
|
|
background-color: $color-chapter;
|
|
animation-delay: 0.6s;
|
|
}
|
|
}
|
|
|
|
|
|
// Search results
|
|
.search-results > h3 a {
|
|
font-size: 0.66em;
|
|
color: $primary;
|
|
padding-left: $-m;
|
|
i {
|
|
padding-right: $-s;
|
|
}
|
|
}
|
|
|
|
// Back to top link
|
|
$btt-size: 40px;
|
|
#back-to-top {
|
|
background-color: rgba($primary, 0.4);
|
|
position: fixed;
|
|
bottom: $-m;
|
|
right: $-m;
|
|
padding: $-xs $-s;
|
|
cursor: pointer;
|
|
color: #FFF;
|
|
width: $btt-size;
|
|
height: $btt-size;
|
|
border-radius: $btt-size;
|
|
transition: all ease-in-out 180ms;
|
|
opacity: 0;
|
|
z-index: 999;
|
|
&:hover {
|
|
width: $btt-size*3.4;
|
|
background-color: rgba($primary, 1);
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.inner {
|
|
width: $btt-size*3.4;
|
|
}
|
|
i {
|
|
margin: 0;
|
|
font-size: 28px;
|
|
padding: 0 $-s 0 0;
|
|
}
|
|
span {
|
|
line-height: 12px;
|
|
position: relative;
|
|
top: -5px;
|
|
}
|
|
} |