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>
<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

View File

@ -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>

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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

View File

@ -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>

View File

@ -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"

View File

@ -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 }}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -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"

View File

@ -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"

View File

@ -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'"

View File

@ -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"

View File

@ -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"

View File

@ -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>

View File

@ -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"

View File

@ -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

View File

@ -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

View File

@ -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">