diff options
Diffstat (limited to 'core/src/components/UnifiedSearch/SearchResultPlaceholder.vue')
-rw-r--r-- | core/src/components/UnifiedSearch/SearchResultPlaceholder.vue | 68 |
1 files changed, 0 insertions, 68 deletions
diff --git a/core/src/components/UnifiedSearch/SearchResultPlaceholder.vue b/core/src/components/UnifiedSearch/SearchResultPlaceholder.vue deleted file mode 100644 index 7eb0915b359..00000000000 --- a/core/src/components/UnifiedSearch/SearchResultPlaceholder.vue +++ /dev/null @@ -1,68 +0,0 @@ -<template> - <svg - class="unified-search__result-placeholder" - xmlns="http://www.w3.org/2000/svg" - fill="url(#unified-search__result-placeholder-gradient)"> - <defs> - <linearGradient id="unified-search__result-placeholder-gradient"> - <stop offset="0%" stop-color="#ededed"><animate attributeName="stop-color" - values="#ededed; #ededed; #cccccc; #cccccc; #ededed" - dur="2s" - repeatCount="indefinite" /></stop> - <stop offset="100%" stop-color="#cccccc"><animate attributeName="stop-color" - values="#cccccc; #ededed; #ededed; #cccccc; #cccccc" - dur="2s" - repeatCount="indefinite" /></stop> - </linearGradient> - </defs> - <rect class="unified-search__result-placeholder-icon" /> - <rect class="unified-search__result-placeholder-line-one" /> - <rect class="unified-search__result-placeholder-line-two" :style="{width: `calc(${randWidth}%)`}" /> - </svg> -</template> - -<script> -export default { - name: 'SearchResultPlaceholder', - - data() { - return { - randWidth: Math.floor(Math.random() * 20) + 30, - } - }, -} -</script> - -<style lang="scss" scoped> -$clickable-area: 44px; -$margin: 10px; - -.unified-search__result-placeholder { - width: calc(100% - 2 * #{$margin}); - height: $clickable-area; - margin: $margin; - - &-icon { - width: $clickable-area; - height: $clickable-area; - rx: var(--border-radius); - ry: var(--border-radius); - } - - &-line-one, - &-line-two { - width: calc(100% - #{$margin + $clickable-area}); - height: 1em; - x: $margin + $clickable-area; - } - - &-line-one { - y: 5px; - } - - &-line-two { - y: 25px; - } -} - -</style> |