feat: d-flex => flex
This commit is contained in:
parent
8bcfafbeb6
commit
2da0b9ef14
@ -25,7 +25,7 @@ const bars = computed(() => {
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex items-center justify-evenly">
|
||||
<div class="flex items-center justify-evenly">
|
||||
<div class="cursor-default" v-for="(item, index) in bars" :key="index">
|
||||
<div class="tooltip" :data-tip="item.height">
|
||||
<span
|
||||
|
@ -249,7 +249,7 @@ onMounted(() => {
|
||||
<Icon icon="mdi-account-tie" class="text-3xl" />
|
||||
</div>
|
||||
|
||||
<div class="ml-3 d-flex flex-column justify-center">
|
||||
<div class="ml-3 flex flex-column justify-center">
|
||||
<h4>
|
||||
{{ v.min_self_delegation }} {{ staking.params.bond_denom }}
|
||||
</h4>
|
||||
|
@ -72,7 +72,7 @@ const resetAuthCode = () => {
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<div class="d-flex justify-end flex-wrap gap-3">
|
||||
<div class="flex justify-end flex-wrap gap-3">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
|
@ -109,7 +109,7 @@ const addressTypes = [
|
||||
--v-border-opacity: 1;"
|
||||
@click="selectedAddress = type.title"
|
||||
>
|
||||
<div class="d-flex align-center font-weight-medium gap-2 text-xl mb-1">
|
||||
<div class="flex align-center font-weight-medium gap-2 text-xl mb-1">
|
||||
<VIcon
|
||||
size="24"
|
||||
:icon="type.icon"
|
||||
|
@ -141,7 +141,7 @@ const resolveCategories = (val: string) => {
|
||||
|
||||
<!-- 👉 Append Inner -->
|
||||
<template #append-inner>
|
||||
<div class="d-flex align-center mt-n1">
|
||||
<div class="flex align-center mt-n1">
|
||||
<div
|
||||
class="text-base text-disabled cursor-pointer me-2"
|
||||
@click="clearSearchAndCloseDialog"
|
||||
@ -274,12 +274,12 @@ const resolveCategories = (val: string) => {
|
||||
>
|
||||
<slot name="noData">
|
||||
<VCardText class="h-100">
|
||||
<div class="app-bar-search-suggestions d-flex flex-column align-center justify-center text-high-emphasis h-100">
|
||||
<div class="app-bar-search-suggestions flex flex-column align-center justify-center text-high-emphasis h-100">
|
||||
<VIcon
|
||||
size="75"
|
||||
icon="mdi-file-remove-outline"
|
||||
/>
|
||||
<div class="d-flex align-center flex-wrap justify-center gap-2 text-h6 my-3">
|
||||
<div class="flex align-center flex-wrap justify-center gap-2 text-h6 my-3">
|
||||
<span>No Result For </span>
|
||||
<span>"{{ searchQuery }}"</span>
|
||||
</div>
|
||||
@ -287,7 +287,7 @@ const resolveCategories = (val: string) => {
|
||||
v-if="props.noDataSuggestion"
|
||||
class="mt-8"
|
||||
>
|
||||
<span class="d-flex justify-center text-disabled">Try searching for</span>
|
||||
<span class="flex justify-center text-disabled">Try searching for</span>
|
||||
<h6
|
||||
v-for="suggestion in props.noDataSuggestion"
|
||||
:key="suggestion.title"
|
||||
|
@ -53,8 +53,8 @@ const { copy, copied } = useClipboard({ source: computed(() => props.code[prefer
|
||||
<div v-show="isCodeShown">
|
||||
<VDivider />
|
||||
|
||||
<VCardText class="d-flex gap-y-3 flex-column">
|
||||
<div class="d-flex justify-end">
|
||||
<VCardText class="flex gap-y-3 flex-column">
|
||||
<div class="flex justify-end">
|
||||
<VBtnToggle
|
||||
v-model="preferredCodeLanguage"
|
||||
mandatory
|
||||
|
@ -11,7 +11,7 @@ defineEmits<Emit>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-5 py-3 d-flex align-center bg-var-theme-background">
|
||||
<div class="px-5 py-3 flex align-center bg-var-theme-background">
|
||||
<h3 class="font-weight-medium text-xl">
|
||||
{{ props.title }}
|
||||
</h3>
|
||||
|
@ -63,7 +63,7 @@ const handleKeyDown = (event: KeyboardEvent, index: number) => {
|
||||
</h6>
|
||||
<div
|
||||
ref="refOtpComp"
|
||||
class="d-flex align-center gap-4"
|
||||
class="flex align-center gap-4"
|
||||
>
|
||||
<VTextField
|
||||
v-for="i in props.totalInput"
|
||||
|
@ -83,7 +83,7 @@ const pricingPlans = [
|
||||
</div>
|
||||
|
||||
<!-- 👉 Annual and monthly price toggler -->
|
||||
<div class="d-flex align-center justify-center mx-auto py-10">
|
||||
<div class="flex align-center justify-center mx-auto py-10">
|
||||
<VLabel
|
||||
for="pricing-plan-toggle"
|
||||
class="me-2"
|
||||
@ -162,7 +162,7 @@ const pricingPlans = [
|
||||
|
||||
<!-- 👉 Plan price -->
|
||||
<VCardText class="position-relative text-center">
|
||||
<div class="d-flex justify-center align-center">
|
||||
<div class="flex justify-center align-center">
|
||||
<sup class="text-sm font-weight-medium me-1">$</sup>
|
||||
<h1 class="text-5xl font-weight-medium text-primary">
|
||||
{{ annualMonthlyPlanPriceToggler ? Math.floor(Number(plan.yearlyPrice) / 12) : plan.monthlyPrice }}
|
||||
|
@ -18,7 +18,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center">
|
||||
<VCardText class="flex align-center">
|
||||
<VAvatar
|
||||
size="40"
|
||||
rounded
|
||||
@ -32,8 +32,8 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<div class="flex flex-column">
|
||||
<div class="flex align-center flex-wrap">
|
||||
<h6 class="text-h6">
|
||||
{{ kFormatter(props.stats) }}
|
||||
</h6>
|
||||
|
@ -17,7 +17,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center">
|
||||
<VCardText class="flex align-center">
|
||||
<VAvatar
|
||||
v-if="props.icon"
|
||||
rounded
|
||||
@ -36,7 +36,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
|
||||
<div
|
||||
v-if="props.change"
|
||||
:class="isPositive ? 'text-success' : 'text-error'"
|
||||
class="d-flex align-center text-sm font-weight-medium mt-n4"
|
||||
class="flex align-center text-sm font-weight-medium mt-n4"
|
||||
>
|
||||
<span>{{ isPositive ? `+${props.change}` : props.change }}%</span>
|
||||
|
||||
|
@ -31,7 +31,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
|
||||
{{ props.subtitle }}
|
||||
</VChip>
|
||||
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<div class="flex align-center flex-wrap">
|
||||
<h5 class="text-h5 me-2">
|
||||
{{ props.stats }}
|
||||
</h5>
|
||||
|
@ -42,7 +42,7 @@ watch(selectedOption, () => {
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex align-center mb-1">
|
||||
<div class="flex align-center mb-1">
|
||||
<h6 class="cr-title text-base">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
|
@ -35,7 +35,7 @@ watch(selectedOption, () => {
|
||||
class="custom-input custom-checkbox rounded cursor-pointer"
|
||||
:class="selectedOption.includes(item.value) ? 'active' : ''"
|
||||
>
|
||||
<div class="d-flex flex-column align-center text-center gap-2">
|
||||
<div class="flex flex-column align-center text-center gap-2">
|
||||
<VIcon
|
||||
size="32"
|
||||
:icon="item.icon"
|
||||
|
@ -40,7 +40,7 @@ watch(selectedOption, () => {
|
||||
<VRadio :value="item.value" />
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex align-center mb-1">
|
||||
<div class="flex align-center mb-1">
|
||||
<h6 class="cr-title text-base">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
|
@ -36,7 +36,7 @@ watch(selectedOption, () => {
|
||||
class="custom-input custom-radio rounded cursor-pointer"
|
||||
:class="selectedOption === item.value ? 'active' : ''"
|
||||
>
|
||||
<div class="d-flex flex-column align-center text-center gap-2">
|
||||
<div class="flex flex-column align-center text-center gap-2">
|
||||
<VIcon
|
||||
size="32"
|
||||
:icon="item.icon"
|
||||
|
@ -52,7 +52,7 @@ const resetPhoneNumber = () => {
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<div class="d-flex flex-wrap justify-end gap-3">
|
||||
<div class="flex flex-wrap justify-end gap-3">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
|
@ -61,7 +61,7 @@ const markAllReadOrUnread = () => {
|
||||
offset="14px"
|
||||
:close-on-content-click="false"
|
||||
>
|
||||
<VCard class="d-flex flex-column">
|
||||
<VCard class="flex flex-column">
|
||||
<!-- 👉 Header -->
|
||||
<VCardItem class="notification-section">
|
||||
<VCardTitle class="text-lg">
|
||||
@ -123,7 +123,7 @@ const markAllReadOrUnread = () => {
|
||||
|
||||
<!-- Slot: Append -->
|
||||
<template #append>
|
||||
<div class="d-flex flex-column align-center gap-4">
|
||||
<div class="flex flex-column align-center gap-4">
|
||||
<VBadge
|
||||
dot
|
||||
:color="notification.isRead ? 'primary' : '#a8aaae'"
|
||||
|
@ -93,7 +93,7 @@ const referAndEarnSteps = [
|
||||
Enter your friend's email address and invite them to join Materio 😍
|
||||
</p>
|
||||
<VForm
|
||||
class="d-flex align-center gap-4"
|
||||
class="flex align-center gap-4"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VTextField
|
||||
@ -114,7 +114,7 @@ const referAndEarnSteps = [
|
||||
You can also copy and send it or share it on your social media. 🚀
|
||||
</p>
|
||||
<VForm
|
||||
class="d-flex align-center flex-wrap gap-3"
|
||||
class="flex align-center flex-wrap gap-3"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VTextField
|
||||
@ -129,7 +129,7 @@ const referAndEarnSteps = [
|
||||
</template>
|
||||
</VTextField>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
<div class="flex gap-3">
|
||||
<VBtn
|
||||
icon
|
||||
class="rounded"
|
||||
|
@ -173,8 +173,8 @@ const membersList: Member[] = [
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<div class="d-flex justify-space-between flex-wrap gap-3 mt-6">
|
||||
<h6 class="text-sm font-weight-semibold d-flex align-start">
|
||||
<div class="flex justify-space-between flex-wrap gap-3 mt-6">
|
||||
<h6 class="text-sm font-weight-semibold flex align-start">
|
||||
<VIcon
|
||||
icon="mdi-account-group-outline"
|
||||
class="me-2"
|
||||
|
@ -32,7 +32,7 @@ const router = useRouter()
|
||||
<VCard
|
||||
width="340"
|
||||
max-height="560"
|
||||
class="d-flex flex-column"
|
||||
class="flex flex-column"
|
||||
>
|
||||
<VCardItem class="py-4">
|
||||
<VCardTitle>Shortcuts</VCardTitle>
|
||||
|
@ -86,7 +86,7 @@ const headerValues = computed(() => {
|
||||
class="app-customizer"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="customizer-heading d-flex align-center justify-space-between">
|
||||
<div class="customizer-heading flex align-center justify-space-between">
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
THEME CUSTOMIZER
|
||||
@ -149,13 +149,13 @@ const headerValues = computed(() => {
|
||||
<h6 class="mt-3 text-base font-weight-regular">
|
||||
Primary Color
|
||||
</h6>
|
||||
<div class="d-flex gap-x-4 mt-2">
|
||||
<div class="flex gap-x-4 mt-2">
|
||||
<div
|
||||
v-for="(color, index) in colors"
|
||||
:key="color"
|
||||
style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; transition: all 0.25s ease;"
|
||||
:style="{ backgroundColor: getBoxColor(initialThemeColors[color], index) }"
|
||||
class="cursor-pointer d-flex align-center justify-center"
|
||||
class="cursor-pointer flex align-center justify-center"
|
||||
:class="{ 'elevation-4': vuetifyTheme.current.value.colors.primary === getBoxColor(initialThemeColors[color], index) }"
|
||||
@click="setPrimaryColor(getBoxColor(initialThemeColors[color], index))"
|
||||
>
|
||||
@ -219,7 +219,7 @@ const headerValues = computed(() => {
|
||||
/>
|
||||
</VRadioGroup>
|
||||
<!-- 👉 Navbar blur -->
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div class="flex align-center justify-space-between">
|
||||
<VLabel
|
||||
for="customizer-navbar-blur"
|
||||
class="text-high-emphasis"
|
||||
@ -258,7 +258,7 @@ const headerValues = computed(() => {
|
||||
<!-- 👉 Collapsed Menu -->
|
||||
<div
|
||||
v-if="appContentLayoutNav === AppContentLayoutNav.Vertical"
|
||||
class="d-flex align-center justify-space-between"
|
||||
class="flex align-center justify-space-between"
|
||||
>
|
||||
<VLabel
|
||||
for="customizer-menu-collapsed"
|
||||
@ -278,7 +278,7 @@ const headerValues = computed(() => {
|
||||
<!-- 👉 Semi Dark Menu -->
|
||||
<div
|
||||
class="align-center justify-space-between"
|
||||
:class="vuetifyTheme.global.name.value === 'light' && appContentLayoutNav === AppContentLayoutNav.Vertical ? 'd-flex' : 'd-none'"
|
||||
:class="vuetifyTheme.global.name.value === 'light' && appContentLayoutNav === AppContentLayoutNav.Vertical ? 'flex' : 'd-none'"
|
||||
>
|
||||
<VLabel
|
||||
for="customizer-menu-semi-dark"
|
||||
@ -300,7 +300,7 @@ const headerValues = computed(() => {
|
||||
<!-- SECTION MISC -->
|
||||
<CustomizerSection title="MISC">
|
||||
<!-- 👉 RTL -->
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div class="flex align-center justify-space-between">
|
||||
<VLabel
|
||||
for="customizer-rtl"
|
||||
class="text-high-emphasis"
|
||||
@ -321,7 +321,7 @@ const headerValues = computed(() => {
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="5"
|
||||
class="d-flex align-center"
|
||||
class="flex align-center"
|
||||
>
|
||||
<VLabel
|
||||
for="route-transition"
|
||||
|
@ -204,7 +204,7 @@ const dialogVisibleUpdate = (val: boolean) => {
|
||||
<!-- 👉 Submit and Cancel -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex flex-wrap justify-center gap-4"
|
||||
class="flex flex-wrap justify-center gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
|
@ -46,7 +46,7 @@ const plansList = [
|
||||
</VCardSubtitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="d-flex align-center flex-wrap flex-sm-nowrap px-15">
|
||||
<VCardText class="flex align-center flex-wrap flex-sm-nowrap px-15">
|
||||
<VSelect
|
||||
v-model="selectedPlan"
|
||||
label="Choose Plan"
|
||||
@ -67,8 +67,8 @@ const plansList = [
|
||||
<p class="font-weight-medium mb-2">
|
||||
User current plan is standard plan
|
||||
</p>
|
||||
<div class="d-flex justify-space-between flex-wrap">
|
||||
<div class="d-flex align-center me-3">
|
||||
<div class="flex justify-space-between flex-wrap">
|
||||
<div class="flex align-center me-3">
|
||||
<sup class="text-primary">$</sup>
|
||||
<h3 class="text-h3 font-weight-semibold text-primary">
|
||||
99
|
||||
|
@ -74,7 +74,7 @@ const handleNavScroll = (evt: Event) => {
|
||||
<!-- 👉 Header -->
|
||||
<div class="nav-header">
|
||||
<slot name="nav-header">
|
||||
<RouterLink to="/" class="app-logo d-flex align-center gap-x-2 app-title-wrapper">
|
||||
<RouterLink to="/" class="app-logo flex align-center gap-x-2 app-title-wrapper">
|
||||
<VNodeRenderer :nodes="config.app.logo" />
|
||||
|
||||
<Transition name="vertical-nav-app-title">
|
||||
|
Loading…
Reference in New Issue
Block a user