Visual cosmetics
parent
4329d06867
commit
09e1273571
|
@ -10,7 +10,9 @@
|
||||||
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
||||||
<div class="md:w-40 relative">
|
<div class="md:w-40 relative">
|
||||||
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||||
|
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
||||||
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
||||||
|
@ -58,7 +60,9 @@ export default {
|
||||||
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
||||||
<div class="md:w-40 relative">
|
<div class="md:w-40 relative">
|
||||||
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||||
|
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
||||||
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
||||||
|
@ -97,7 +101,9 @@ export default {
|
||||||
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
||||||
<div class="md:w-40 relative">
|
<div class="md:w-40 relative">
|
||||||
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||||
|
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
||||||
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
||||||
|
@ -170,7 +176,9 @@ export default {
|
||||||
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
||||||
<div class="md:w-40 relative">
|
<div class="md:w-40 relative">
|
||||||
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||||
|
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
||||||
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
||||||
|
|
|
@ -5,9 +5,9 @@
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
||||||
|
|
||||||
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
|
<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
|
||||||
<template #container="{ closeCallback }">
|
<template #container="{ closeCallback }">
|
||||||
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
<div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
||||||
<path
|
<path
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
@ -46,9 +46,9 @@ export default {
|
||||||
basic: `
|
basic: `
|
||||||
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
||||||
|
|
||||||
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
|
<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
|
||||||
<template #container="{ closeCallback }">
|
<template #container="{ closeCallback }">
|
||||||
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
<div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
||||||
<path
|
<path
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
@ -80,9 +80,9 @@ export default {
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
||||||
|
|
||||||
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
|
<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
|
||||||
<template #container="{ closeCallback }">
|
<template #container="{ closeCallback }">
|
||||||
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
<div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
||||||
<path
|
<path
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
@ -126,9 +126,9 @@ export default {
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
||||||
|
|
||||||
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
|
<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
|
||||||
<template #container="{ closeCallback }">
|
<template #container="{ closeCallback }">
|
||||||
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
<div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
||||||
<path
|
<path
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
|
|
@ -5,9 +5,9 @@
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
||||||
|
|
||||||
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
|
<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
|
||||||
<template #container="{ closeCallback }">
|
<template #container="{ closeCallback }">
|
||||||
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
<div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
||||||
<path
|
<path
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
@ -46,9 +46,9 @@ export default {
|
||||||
basic: `
|
basic: `
|
||||||
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
<Button label="Login" icon="pi pi-user" @click="visible = true" />
|
||||||
|
|
||||||
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
|
<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
|
||||||
<template #container="{ closeCallback }">
|
<template #container="{ closeCallback }">
|
||||||
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
<div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
|
||||||
<path
|
<path
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
|
|
@ -159,7 +159,7 @@ export default {
|
||||||
padding: '0.25rem 0.25rem',
|
padding: '0.25rem 0.25rem',
|
||||||
gap: '2px',
|
gap: '2px',
|
||||||
header: {
|
header: {
|
||||||
padding: '0.5rem 0.75rem 0.25rem 0.75rem'
|
padding: '0.5rem 1rem 0.25rem 1rem'
|
||||||
},
|
},
|
||||||
option: {
|
option: {
|
||||||
padding: '0.5rem 0.75rem',
|
padding: '0.5rem 0.75rem',
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
root: {
|
root: {
|
||||||
borderRadius: '{content.border.radius}',
|
borderRadius: '{content.border.radius}',
|
||||||
borderWidth: '0 0 0 6px',
|
borderWidth: '1px',
|
||||||
transitionDuration: '{transition.duration}'
|
transitionDuration: '{transition.duration}'
|
||||||
},
|
},
|
||||||
content: {
|
content: {
|
||||||
|
@ -32,7 +32,7 @@ export default {
|
||||||
light: {
|
light: {
|
||||||
info: {
|
info: {
|
||||||
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
|
||||||
borderColor: '{blue.500}',
|
borderColor: 'transparent',
|
||||||
color: '{blue.600}',
|
color: '{blue.600}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -45,7 +45,7 @@ export default {
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
|
||||||
borderColor: '{green.500}',
|
borderColor: 'transparent',
|
||||||
color: '{green.600}',
|
color: '{green.600}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -58,7 +58,7 @@ export default {
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
|
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
|
||||||
borderColor: '{yellow.500}',
|
borderColor: 'transparent',
|
||||||
color: '{yellow.600}',
|
color: '{yellow.600}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -71,7 +71,7 @@ export default {
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
|
||||||
borderColor: '{red.500}',
|
borderColor: 'transparent',
|
||||||
color: '{red.600}',
|
color: '{red.600}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -84,7 +84,7 @@ export default {
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
background: '{surface.100}',
|
background: '{surface.100}',
|
||||||
borderColor: '{surface.500}',
|
borderColor: 'transparent',
|
||||||
color: '{surface.600}',
|
color: '{surface.600}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -97,7 +97,7 @@ export default {
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
background: '{surface.900}',
|
background: '{surface.900}',
|
||||||
borderColor: '{primary.color}',
|
borderColor: 'transparent',
|
||||||
color: '{surface.50}',
|
color: '{surface.50}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -112,7 +112,7 @@ export default {
|
||||||
dark: {
|
dark: {
|
||||||
info: {
|
info: {
|
||||||
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
borderColor: 'transparent',
|
||||||
color: '{blue.500}',
|
color: '{blue.500}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -125,7 +125,7 @@ export default {
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
borderColor: 'transparent',
|
||||||
color: '{green.500}',
|
color: '{green.500}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -138,7 +138,7 @@ export default {
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
borderColor: 'transparent',
|
||||||
color: '{yellow.500}',
|
color: '{yellow.500}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -151,7 +151,7 @@ export default {
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
borderColor: 'transparent',
|
||||||
color: '{red.500}',
|
color: '{red.500}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -164,7 +164,7 @@ export default {
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
background: '{surface.800}',
|
background: '{surface.800}',
|
||||||
borderColor: '{surface.700}',
|
borderColor: 'transparent',
|
||||||
color: '{surface.300}',
|
color: '{surface.300}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
@ -177,7 +177,7 @@ export default {
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
background: '{surface.0}',
|
background: '{surface.0}',
|
||||||
borderColor: '{primary.color}',
|
borderColor: 'transparent',
|
||||||
color: '{surface.950}',
|
color: '{surface.950}',
|
||||||
shadow: 'none',
|
shadow: 'none',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
|
|
Loading…
Reference in New Issue