Phillip Thelen
d3b63abdd3
* Add option to search for users by email or username in admin panel * Make Admin panel design more consistent * fix test * fix width of items * escape regex for searching users * load own user when pressing enter on empty field * add styling for warning buttons * improve sub styling * fix checkbox alignment in admin panel * Unify date preview display * Fix bottom button display * admin panel display improvements * remove autocannon file * search improvements * time travel button display fix * fix loading spinner * fix sorting * Split email search into multiple queries * fix email search * remove console * fix line break
79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
v-once
|
|
class="loading-spinner"
|
|
:class="{'loading-spinner-purple': darkColor}"
|
|
role="text"
|
|
:aria-label="$t('loading')"
|
|
>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='scss' scoped>
|
|
@import '~@/assets/scss/colors.scss';
|
|
|
|
// NOTE: the loader is currently set to work inside standard buttons
|
|
// To properly work outside of them some abstraction will be needed
|
|
// for the height and width
|
|
|
|
// Original CSS from https://loading.io/css/ released under the CC0 License
|
|
|
|
.loading-spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 1.5px;
|
|
margin-bottom: 1.5px;
|
|
}
|
|
|
|
.loading-spinner div {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid $white;
|
|
border-radius: 50%;
|
|
animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-color: $white transparent transparent transparent;
|
|
}
|
|
|
|
.loading-spinner-purple div {
|
|
border-color: $purple-200 transparent transparent transparent;
|
|
}
|
|
|
|
.loading-spinner div:nth-child(1) {
|
|
animation-delay: -0.45s;
|
|
}
|
|
.loading-spinner div:nth-child(2) {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.loading-spinner div:nth-child(3) {
|
|
animation-delay: -0.15s;
|
|
}
|
|
|
|
@keyframes loading-spinner {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
darkColor: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
};
|
|
|
|
</script>
|