Migrated shrink and grow

pull/5806/head
Cagatay Civici 2024-05-30 02:48:15 +03:00
parent d96f59fb59
commit ec6156f1ce
7 changed files with 30 additions and 30 deletions

View File

@ -22,7 +22,7 @@
<div class="flex flex-col w-6/12 gap-8 pt-20 pr-4">
<div class="box p-6 animate-fadein animate-duration-500">
<div class="flex gap-2">
<div class="w-24 flex-shrink-0">
<div class="w-24 shrink-0">
<span class="text-surface-500 dark:text-surface-400 font-medium block mb-4">Amount</span>
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" />
</div>

View File

@ -11,7 +11,7 @@
@contextmenu="onRightClick($event, product.id)"
>
<div class="flex flex-wrap p-2 items-center gap-4">
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-bold">{{ product.name }}</span>
<div class="flex items-center gap-2">
@ -87,7 +87,7 @@ export default {
@contextmenu="onRightClick($event, product.id)"
>
<div class="flex flex-wrap p-2 items-center gap-4">
<img class="w-16 flex-shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
<img class="w-16 shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-bold">{{ product.name }}</span>
<div class="flex items-center gap-2">
@ -122,7 +122,7 @@ export default {
@contextmenu="onRightClick($event, product.id)"
>
<div class="flex flex-wrap p-2 items-center gap-4">
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-bold">{{ product.name }}</span>
<div class="flex items-center gap-2">
@ -212,7 +212,7 @@ export default {
@contextmenu="onRightClick($event, product.id)"
>
<div class="flex flex-wrap p-2 items-center gap-4">
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-bold">{{ product.name }}</span>
<div class="flex items-center gap-2">

View File

@ -6,7 +6,7 @@
<Drawer v-model:visible="visible">
<template #container="{ closeCallback }">
<div class="flex flex-col h-full">
<div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
<div class="flex items-center justify-between px-6 pt-4 shrink-0">
<span class="inline-flex items-center gap-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@ -21,7 +21,7 @@
<span class="font-semibold text-2xl text-primary">Your Logo</span>
</span>
<span>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
</span>
</div>
<div class="overflow-y-auto">
@ -202,7 +202,7 @@ export default {
<Drawer v-model:visible="visible">
<template #container="{ closeCallback }">
<div class="flex flex-col h-full">
<div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
<div class="flex items-center justify-between px-6 pt-4 shrink-0">
<span class="inline-flex items-center gap-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--p-primary-color)" />
@ -211,7 +211,7 @@ export default {
<span class="font-semibold text-2xl text-primary">Your Logo</span>
</span>
<span>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
</span>
</div>
<div class="overflow-y-auto">
@ -385,7 +385,7 @@ export default {
<Drawer v-model:visible="visible">
<template #container="{ closeCallback }">
<div class="flex flex-col h-full">
<div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
<div class="flex items-center justify-between px-6 pt-4 shrink-0">
<span class="inline-flex items-center gap-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@ -400,7 +400,7 @@ export default {
<span class="font-semibold text-2xl text-primary">Your Logo</span>
</span>
<span>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
</span>
</div>
<div class="overflow-y-auto">
@ -586,7 +586,7 @@ export default {
<Drawer v-model:visible="visible">
<template #container="{ closeCallback }">
<div class="flex flex-col h-full">
<div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
<div class="flex items-center justify-between px-6 pt-4 shrink-0">
<span class="inline-flex items-center gap-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@ -601,7 +601,7 @@ export default {
<span class="font-semibold text-2xl text-primary">Your Logo</span>
</span>
<span>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
</span>
</div>
<div class="overflow-y-auto">

View File

@ -6,7 +6,7 @@
<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
@ -33,7 +33,7 @@ export default {
<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
@ -52,7 +52,7 @@ export default {
<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
@ -87,7 +87,7 @@ export default {
<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">

View File

@ -6,7 +6,7 @@
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
@ -34,7 +34,7 @@ export default {
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
@ -53,7 +53,7 @@ export default {
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
@ -88,7 +88,7 @@ export default {
<PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">

View File

@ -16,7 +16,7 @@
<div class="overflow-auto">
<div style="min-width: 1200px">
<div class="flex gap-4 mb-4">
<div class="flex-shrink-0 w-56"></div>
<div class="shrink-0 w-56"></div>
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q1</div>
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q2</div>
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q3</div>
@ -25,7 +25,7 @@
<div class="flex flex-col gap-4">
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
<div class="shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Theming</h2>
@ -99,7 +99,7 @@
</div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
<div class="shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
@ -129,7 +129,7 @@
<div class="flex-1 flex gap-4 flex-col"></div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
<div class="shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
@ -144,7 +144,7 @@
<div class="flex-1 flex gap-4 flex-col"></div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
<div class="shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
@ -167,7 +167,7 @@
<div class="flex-1 flex gap-4 flex-col"></div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
<div class="shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>

View File

@ -160,7 +160,7 @@
<span class="text-2xl font-bold text-surface-500 dark:text-surface-400">$99</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<ul class="list-none p-0 m-0 grow text-lg">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span class="font-bold">1 Designer</span>
@ -202,7 +202,7 @@
<span class="text-2xl font-bold text-surface-500 dark:text-surface-400">$249</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<ul class="list-none p-0 m-0 grow text-lg">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span class="font-bold">Up to 5 Designers</span>
@ -244,7 +244,7 @@
<span class="text-2xl font-bold">EXCLUSIVE DEALS</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<ul class="list-none p-0 m-0 grow text-lg">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span class="font-bold">Unlimited Designers</span>