feat: d-flex => flex

This commit is contained in:
Alisa | Side.one 2023-05-27 23:37:59 +08:00
parent 8bcfafbeb6
commit 2da0b9ef14
25 changed files with 46 additions and 46 deletions

View File

@ -25,7 +25,7 @@ const bars = computed(() => {
}); });
</script> </script>
<template> <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="cursor-default" v-for="(item, index) in bars" :key="index">
<div class="tooltip" :data-tip="item.height"> <div class="tooltip" :data-tip="item.height">
<span <span

View File

@ -249,7 +249,7 @@ onMounted(() => {
<Icon icon="mdi-account-tie" class="text-3xl" /> <Icon icon="mdi-account-tie" class="text-3xl" />
</div> </div>
<div class="ml-3 d-flex flex-column justify-center"> <div class="ml-3 flex flex-column justify-center">
<h4> <h4>
{{ v.min_self_delegation }} {{ staking.params.bond_denom }} {{ v.min_self_delegation }} {{ staking.params.bond_denom }}
</h4> </h4>

View File

@ -72,7 +72,7 @@ const resetAuthCode = () => {
class="mb-4" class="mb-4"
/> />
<div class="d-flex justify-end flex-wrap gap-3"> <div class="flex justify-end flex-wrap gap-3">
<VBtn <VBtn
color="secondary" color="secondary"
variant="tonal" variant="tonal"

View File

@ -109,7 +109,7 @@ const addressTypes = [
--v-border-opacity: 1;" --v-border-opacity: 1;"
@click="selectedAddress = type.title" @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 <VIcon
size="24" size="24"
:icon="type.icon" :icon="type.icon"

View File

@ -141,7 +141,7 @@ const resolveCategories = (val: string) => {
<!-- 👉 Append Inner --> <!-- 👉 Append Inner -->
<template #append-inner> <template #append-inner>
<div class="d-flex align-center mt-n1"> <div class="flex align-center mt-n1">
<div <div
class="text-base text-disabled cursor-pointer me-2" class="text-base text-disabled cursor-pointer me-2"
@click="clearSearchAndCloseDialog" @click="clearSearchAndCloseDialog"
@ -274,12 +274,12 @@ const resolveCategories = (val: string) => {
> >
<slot name="noData"> <slot name="noData">
<VCardText class="h-100"> <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 <VIcon
size="75" size="75"
icon="mdi-file-remove-outline" 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>No Result For </span>
<span>"{{ searchQuery }}"</span> <span>"{{ searchQuery }}"</span>
</div> </div>
@ -287,7 +287,7 @@ const resolveCategories = (val: string) => {
v-if="props.noDataSuggestion" v-if="props.noDataSuggestion"
class="mt-8" 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 <h6
v-for="suggestion in props.noDataSuggestion" v-for="suggestion in props.noDataSuggestion"
:key="suggestion.title" :key="suggestion.title"

View File

@ -53,8 +53,8 @@ const { copy, copied } = useClipboard({ source: computed(() => props.code[prefer
<div v-show="isCodeShown"> <div v-show="isCodeShown">
<VDivider /> <VDivider />
<VCardText class="d-flex gap-y-3 flex-column"> <VCardText class="flex gap-y-3 flex-column">
<div class="d-flex justify-end"> <div class="flex justify-end">
<VBtnToggle <VBtnToggle
v-model="preferredCodeLanguage" v-model="preferredCodeLanguage"
mandatory mandatory

View File

@ -11,7 +11,7 @@ defineEmits<Emit>()
</script> </script>
<template> <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"> <h3 class="font-weight-medium text-xl">
{{ props.title }} {{ props.title }}
</h3> </h3>

View File

@ -63,7 +63,7 @@ const handleKeyDown = (event: KeyboardEvent, index: number) => {
</h6> </h6>
<div <div
ref="refOtpComp" ref="refOtpComp"
class="d-flex align-center gap-4" class="flex align-center gap-4"
> >
<VTextField <VTextField
v-for="i in props.totalInput" v-for="i in props.totalInput"

View File

@ -83,7 +83,7 @@ const pricingPlans = [
</div> </div>
<!-- 👉 Annual and monthly price toggler --> <!-- 👉 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 <VLabel
for="pricing-plan-toggle" for="pricing-plan-toggle"
class="me-2" class="me-2"
@ -162,7 +162,7 @@ const pricingPlans = [
<!-- 👉 Plan price --> <!-- 👉 Plan price -->
<VCardText class="position-relative text-center"> <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> <sup class="text-sm font-weight-medium me-1">$</sup>
<h1 class="text-5xl font-weight-medium text-primary"> <h1 class="text-5xl font-weight-medium text-primary">
{{ annualMonthlyPlanPriceToggler ? Math.floor(Number(plan.yearlyPrice) / 12) : plan.monthlyPrice }} {{ annualMonthlyPlanPriceToggler ? Math.floor(Number(plan.yearlyPrice) / 12) : plan.monthlyPrice }}

View File

@ -18,7 +18,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
<template> <template>
<VCard> <VCard>
<VCardText class="d-flex align-center"> <VCardText class="flex align-center">
<VAvatar <VAvatar
size="40" size="40"
rounded rounded
@ -32,8 +32,8 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
/> />
</VAvatar> </VAvatar>
<div class="d-flex flex-column"> <div class="flex flex-column">
<div class="d-flex align-center flex-wrap"> <div class="flex align-center flex-wrap">
<h6 class="text-h6"> <h6 class="text-h6">
{{ kFormatter(props.stats) }} {{ kFormatter(props.stats) }}
</h6> </h6>

View File

@ -17,7 +17,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
<template> <template>
<VCard> <VCard>
<VCardText class="d-flex align-center"> <VCardText class="flex align-center">
<VAvatar <VAvatar
v-if="props.icon" v-if="props.icon"
rounded rounded
@ -36,7 +36,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
<div <div
v-if="props.change" v-if="props.change"
:class="isPositive ? 'text-success' : 'text-error'" :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> <span>{{ isPositive ? `+${props.change}` : props.change }}%</span>

View File

@ -31,7 +31,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
{{ props.subtitle }} {{ props.subtitle }}
</VChip> </VChip>
<div class="d-flex align-center flex-wrap"> <div class="flex align-center flex-wrap">
<h5 class="text-h5 me-2"> <h5 class="text-h5 me-2">
{{ props.stats }} {{ props.stats }}
</h5> </h5>

View File

@ -42,7 +42,7 @@ watch(selectedOption, () => {
/> />
</div> </div>
<div class="flex-grow-1"> <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"> <h6 class="cr-title text-base">
{{ item.title }} {{ item.title }}
</h6> </h6>

View File

@ -35,7 +35,7 @@ watch(selectedOption, () => {
class="custom-input custom-checkbox rounded cursor-pointer" class="custom-input custom-checkbox rounded cursor-pointer"
:class="selectedOption.includes(item.value) ? 'active' : ''" :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 <VIcon
size="32" size="32"
:icon="item.icon" :icon="item.icon"

View File

@ -40,7 +40,7 @@ watch(selectedOption, () => {
<VRadio :value="item.value" /> <VRadio :value="item.value" />
</div> </div>
<div class="flex-grow-1"> <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"> <h6 class="cr-title text-base">
{{ item.title }} {{ item.title }}
</h6> </h6>

View File

@ -36,7 +36,7 @@ watch(selectedOption, () => {
class="custom-input custom-radio rounded cursor-pointer" class="custom-input custom-radio rounded cursor-pointer"
:class="selectedOption === item.value ? 'active' : ''" :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 <VIcon
size="32" size="32"
:icon="item.icon" :icon="item.icon"

View File

@ -52,7 +52,7 @@ const resetPhoneNumber = () => {
class="mb-4" class="mb-4"
/> />
<div class="d-flex flex-wrap justify-end gap-3"> <div class="flex flex-wrap justify-end gap-3">
<VBtn <VBtn
color="secondary" color="secondary"
variant="tonal" variant="tonal"

View File

@ -61,7 +61,7 @@ const markAllReadOrUnread = () => {
offset="14px" offset="14px"
:close-on-content-click="false" :close-on-content-click="false"
> >
<VCard class="d-flex flex-column"> <VCard class="flex flex-column">
<!-- 👉 Header --> <!-- 👉 Header -->
<VCardItem class="notification-section"> <VCardItem class="notification-section">
<VCardTitle class="text-lg"> <VCardTitle class="text-lg">
@ -123,7 +123,7 @@ const markAllReadOrUnread = () => {
<!-- Slot: Append --> <!-- Slot: Append -->
<template #append> <template #append>
<div class="d-flex flex-column align-center gap-4"> <div class="flex flex-column align-center gap-4">
<VBadge <VBadge
dot dot
:color="notification.isRead ? 'primary' : '#a8aaae'" :color="notification.isRead ? 'primary' : '#a8aaae'"

View File

@ -93,7 +93,7 @@ const referAndEarnSteps = [
Enter your friend's email address and invite them to join Materio 😍 Enter your friend's email address and invite them to join Materio 😍
</p> </p>
<VForm <VForm
class="d-flex align-center gap-4" class="flex align-center gap-4"
@submit.prevent="() => {}" @submit.prevent="() => {}"
> >
<VTextField <VTextField
@ -114,7 +114,7 @@ const referAndEarnSteps = [
You can also copy and send it or share it on your social media. 🚀 You can also copy and send it or share it on your social media. 🚀
</p> </p>
<VForm <VForm
class="d-flex align-center flex-wrap gap-3" class="flex align-center flex-wrap gap-3"
@submit.prevent="() => {}" @submit.prevent="() => {}"
> >
<VTextField <VTextField
@ -129,7 +129,7 @@ const referAndEarnSteps = [
</template> </template>
</VTextField> </VTextField>
<div class="d-flex gap-3"> <div class="flex gap-3">
<VBtn <VBtn
icon icon
class="rounded" class="rounded"

View File

@ -173,8 +173,8 @@ const membersList: Member[] = [
</VListItem> </VListItem>
</VList> </VList>
<div class="d-flex justify-space-between flex-wrap gap-3 mt-6"> <div class="flex justify-space-between flex-wrap gap-3 mt-6">
<h6 class="text-sm font-weight-semibold d-flex align-start"> <h6 class="text-sm font-weight-semibold flex align-start">
<VIcon <VIcon
icon="mdi-account-group-outline" icon="mdi-account-group-outline"
class="me-2" class="me-2"

View File

@ -32,7 +32,7 @@ const router = useRouter()
<VCard <VCard
width="340" width="340"
max-height="560" max-height="560"
class="d-flex flex-column" class="flex flex-column"
> >
<VCardItem class="py-4"> <VCardItem class="py-4">
<VCardTitle>Shortcuts</VCardTitle> <VCardTitle>Shortcuts</VCardTitle>

View File

@ -86,7 +86,7 @@ const headerValues = computed(() => {
class="app-customizer" class="app-customizer"
> >
<!-- 👉 Header --> <!-- 👉 Header -->
<div class="customizer-heading d-flex align-center justify-space-between"> <div class="customizer-heading flex align-center justify-space-between">
<div> <div>
<h6 class="text-h6"> <h6 class="text-h6">
THEME CUSTOMIZER THEME CUSTOMIZER
@ -149,13 +149,13 @@ const headerValues = computed(() => {
<h6 class="mt-3 text-base font-weight-regular"> <h6 class="mt-3 text-base font-weight-regular">
Primary Color Primary Color
</h6> </h6>
<div class="d-flex gap-x-4 mt-2"> <div class="flex gap-x-4 mt-2">
<div <div
v-for="(color, index) in colors" v-for="(color, index) in colors"
:key="color" :key="color"
style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; transition: all 0.25s ease;" style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; transition: all 0.25s ease;"
:style="{ backgroundColor: getBoxColor(initialThemeColors[color], index) }" :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) }" :class="{ 'elevation-4': vuetifyTheme.current.value.colors.primary === getBoxColor(initialThemeColors[color], index) }"
@click="setPrimaryColor(getBoxColor(initialThemeColors[color], index))" @click="setPrimaryColor(getBoxColor(initialThemeColors[color], index))"
> >
@ -219,7 +219,7 @@ const headerValues = computed(() => {
/> />
</VRadioGroup> </VRadioGroup>
<!-- 👉 Navbar blur --> <!-- 👉 Navbar blur -->
<div class="d-flex align-center justify-space-between"> <div class="flex align-center justify-space-between">
<VLabel <VLabel
for="customizer-navbar-blur" for="customizer-navbar-blur"
class="text-high-emphasis" class="text-high-emphasis"
@ -258,7 +258,7 @@ const headerValues = computed(() => {
<!-- 👉 Collapsed Menu --> <!-- 👉 Collapsed Menu -->
<div <div
v-if="appContentLayoutNav === AppContentLayoutNav.Vertical" v-if="appContentLayoutNav === AppContentLayoutNav.Vertical"
class="d-flex align-center justify-space-between" class="flex align-center justify-space-between"
> >
<VLabel <VLabel
for="customizer-menu-collapsed" for="customizer-menu-collapsed"
@ -278,7 +278,7 @@ const headerValues = computed(() => {
<!-- 👉 Semi Dark Menu --> <!-- 👉 Semi Dark Menu -->
<div <div
class="align-center justify-space-between" 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 <VLabel
for="customizer-menu-semi-dark" for="customizer-menu-semi-dark"
@ -300,7 +300,7 @@ const headerValues = computed(() => {
<!-- SECTION MISC --> <!-- SECTION MISC -->
<CustomizerSection title="MISC"> <CustomizerSection title="MISC">
<!-- 👉 RTL --> <!-- 👉 RTL -->
<div class="d-flex align-center justify-space-between"> <div class="flex align-center justify-space-between">
<VLabel <VLabel
for="customizer-rtl" for="customizer-rtl"
class="text-high-emphasis" class="text-high-emphasis"
@ -321,7 +321,7 @@ const headerValues = computed(() => {
<VRow> <VRow>
<VCol <VCol
cols="5" cols="5"
class="d-flex align-center" class="flex align-center"
> >
<VLabel <VLabel
for="route-transition" for="route-transition"

View File

@ -204,7 +204,7 @@ const dialogVisibleUpdate = (val: boolean) => {
<!-- 👉 Submit and Cancel --> <!-- 👉 Submit and Cancel -->
<VCol <VCol
cols="12" cols="12"
class="d-flex flex-wrap justify-center gap-4" class="flex flex-wrap justify-center gap-4"
> >
<VBtn type="submit"> <VBtn type="submit">
Submit Submit

View File

@ -46,7 +46,7 @@ const plansList = [
</VCardSubtitle> </VCardSubtitle>
</VCardItem> </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 <VSelect
v-model="selectedPlan" v-model="selectedPlan"
label="Choose Plan" label="Choose Plan"
@ -67,8 +67,8 @@ const plansList = [
<p class="font-weight-medium mb-2"> <p class="font-weight-medium mb-2">
User current plan is standard plan User current plan is standard plan
</p> </p>
<div class="d-flex justify-space-between flex-wrap"> <div class="flex justify-space-between flex-wrap">
<div class="d-flex align-center me-3"> <div class="flex align-center me-3">
<sup class="text-primary">$</sup> <sup class="text-primary">$</sup>
<h3 class="text-h3 font-weight-semibold text-primary"> <h3 class="text-h3 font-weight-semibold text-primary">
99 99

View File

@ -74,7 +74,7 @@ const handleNavScroll = (evt: Event) => {
<!-- 👉 Header --> <!-- 👉 Header -->
<div class="nav-header"> <div class="nav-header">
<slot name="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" /> <VNodeRenderer :nodes="config.app.logo" />
<Transition name="vertical-nav-app-title"> <Transition name="vertical-nav-app-title">