aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/components/app/Ellipsis.vue
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components/app/Ellipsis.vue')
-rw-r--r--docs/components/app/Ellipsis.vue66
1 files changed, 0 insertions, 66 deletions
diff --git a/docs/components/app/Ellipsis.vue b/docs/components/app/Ellipsis.vue
deleted file mode 100644
index 87f4629..0000000
--- a/docs/components/app/Ellipsis.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-defineProps({
- width: {
- type: String,
- default: '10rem'
- },
- height: {
- type: String,
- default: '10rem'
- },
- zIndex: {
- type: String,
- default: '10'
- },
- top: {
- type: String,
- default: '0'
- },
- left: {
- type: String,
- default: 'auto'
- },
- right: {
- type: String,
- default: 'auto'
- },
- blur: {
- type: String,
- default: '50px'
- },
- colors: {
- type: Array as PropType<string[]>,
- default: () => ['rgba(0, 71, 225, 0.22)', 'rgba(26, 214, 255, 0.22)', 'rgba(0, 220, 130, 0.22)']
- }
-})
-</script>
-
-<template>
- <div class="ellipsis">
- <div class="ellipsis-item" />
- </div>
-</template>
-
-<style scoped lang="ts">
-css({
- '.ellipsis': {
- pointerEvents: 'none',
- position: 'absolute',
- top: (props) => props.top,
- insetInlineStart: (props) => props.left,
- insetInlineEnd: (props) => props.right,
- zIndex: (props) => props.zIndex,
- width: '-webkit-fill-available',
- maxWidth: (props) => props.width,
- height: (props) => props.height,
- filter: (props) => `blur(${props.blur})`,
- '.ellipsis-item': {
- width: '100%',
- height: '100%',
- background: (props) => `linear-gradient(97.62deg, ${props?.colors?.[0]} 2.27%, ${props?.colors?.[1]} 50.88%, ${props?.colors?.[2]} 98.48%)`,
- }
- }
-})
-</style>