mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
d6846d74eb
* Remove unused nested folders from components * Remove nested folders * Standardize composables output * Fix import inconsistencies * Same trick for directives * Same for routes * Replace reliance root grouped export in favor of explicit imports * Replace reliance on implicit imports * Remove nested folder structure * Consistent use of non-default exports in utils * Remove nested folder structure from private components * Fix test mock * Remove extraneous component registration for valuenull * Fix stores provider * Fix logo sprite
145 lines
2.2 KiB
Vue
145 lines
2.2 KiB
Vue
<template>
|
|
<div :class="type" class="v-skeleton-loader">
|
|
<template v-if="type === 'list-item-icon'">
|
|
<div class="icon" />
|
|
<div class="text" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: 'input',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
--v-skeleton-loader-color: var(--background-page);
|
|
--v-skeleton-loader-background-color: var(--background-subdued);
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.v-skeleton-loader {
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: progress;
|
|
}
|
|
|
|
@mixin loader {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: var(--v-skeleton-loader-background-color);
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, var(--v-skeleton-loader-color), transparent);
|
|
transform: translateX(-100%);
|
|
opacity: 0.5;
|
|
animation: loading 1.5s infinite;
|
|
content: '';
|
|
}
|
|
|
|
@keyframes loading {
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.input,
|
|
.input-tall {
|
|
width: 100%;
|
|
height: var(--input-height);
|
|
border: var(--border-width) solid var(--v-skeleton-loader-background-color);
|
|
border-radius: var(--border-radius);
|
|
|
|
@include loader;
|
|
}
|
|
|
|
.input-tall {
|
|
height: var(--input-height-tall);
|
|
}
|
|
|
|
.block-list-item {
|
|
width: 100%;
|
|
height: var(--input-height);
|
|
border-radius: var(--border-radius);
|
|
|
|
@include loader;
|
|
|
|
& + & {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.block-list-item-dense {
|
|
width: 100%;
|
|
height: 44px;
|
|
border-radius: var(--border-radius);
|
|
|
|
@include loader;
|
|
|
|
& + & {
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
flex-grow: 1;
|
|
height: 12px;
|
|
border-radius: 6px;
|
|
|
|
@include loader;
|
|
}
|
|
|
|
.list-item-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 46px;
|
|
|
|
.icon {
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 12px;
|
|
border-radius: 50%;
|
|
|
|
@include loader;
|
|
}
|
|
|
|
.text {
|
|
flex-grow: 1;
|
|
height: 12px;
|
|
border-radius: 6px;
|
|
|
|
@include loader;
|
|
}
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity var(--medium) var(--transition);
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
</style>
|