init git
This commit is contained in:
mohadese namavar
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<section class="amazing-offers">
|
||||
<div>
|
||||
<aside>
|
||||
<h2>
|
||||
<span>{{ $t("amazingOffers") }}</span>
|
||||
<span>{{ $t("asanMarket") }}</span>
|
||||
</h2>
|
||||
<img src="/images/amazing.svg" />
|
||||
</aside>
|
||||
<Swiper :slides-per-view="'auto'">
|
||||
<SwiperSlide v-for="(product, i) in amazingOffers" :key="i">
|
||||
<ProductCard :data="product" type="main" />
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { amazingOffers } = inject('data')
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.amazing-offers {
|
||||
@apply w-full flex justify-center;
|
||||
@apply mt-[2.6rem] lg:mt-[11.3rem];
|
||||
|
||||
&>div {
|
||||
@apply max-w-full w-full flex shrink-0 bg-[#F2F2F2] overflow-hidden;
|
||||
@apply gap-2.5 pr-2.5 h-max;
|
||||
@apply lg:container lg:rounded-2xl lg:pr-[2.6rem] lg:gap-[2.4rem];
|
||||
|
||||
aside {
|
||||
@apply bg-[linear-gradient(to_bottom,_#47B556_0%,_#F2F2F200_60%)];
|
||||
@apply flex flex-col items-center justify-between;
|
||||
@apply relative rounded-[0.6rem] shrink-0 mt-2;
|
||||
@apply w-[6.2rem] h-[11.5rem] pt-4 px-2.5;
|
||||
@apply lg:w-[11.6rem] lg:h-[20.1rem] lg:my-7 lg:px-5;
|
||||
|
||||
&::before {
|
||||
@apply content-['_'] absolute inset-[0.2rem] bg-[#F2F2F2] rounded-lg;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply flex flex-col items-center justify-center z-0 gap-2;
|
||||
|
||||
span {
|
||||
@apply text-center first:text-[#163D22] last:text-primary-600;
|
||||
@apply font-vazir font-black text-base lg:text-3xl;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@apply w-[3.4rem] h-[4.3rem] lg:w-[9.6rem] lg:h-[12rem] self-start lg:-mb-20 z-0;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
@apply w-full h-full rounded-xl relative rtl lg:ltr lg:px-6;
|
||||
|
||||
.swiper-wrapper {
|
||||
@apply mt-2 mb-3 lg:my-6 z-0;
|
||||
|
||||
.swiper-slide {
|
||||
@apply h-max w-max ml-[0.3rem] lg:ml-6 first:ml-0 rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
@apply content-['_'] w-6 absolute inset-y-0 -right-6 z-10;
|
||||
@apply shadow-[-5px_0px_23px_0px_#00000040] max-lg:hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@apply content-['_'] w-6 absolute inset-y-0 -left-6 z-10;
|
||||
@apply shadow-[5px_0px_23px_0px_#00000040] max-lg:hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<section class="asan-service">
|
||||
<a href="http://jobs.asan-service.com/" target="_blank">
|
||||
<img src="/images/asan-service.svg" alt="" />
|
||||
</a>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss">
|
||||
.asan-service {
|
||||
@apply w-full overflow-hidden max-lg:hidden;
|
||||
|
||||
a {
|
||||
img {
|
||||
@apply mx-auto xl:h-[20.6rem] object-contain object-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<section class="home-banners">
|
||||
<div>
|
||||
<router-link v-for="({link, image}, i) in banners" :key="i" :to="link">
|
||||
<img :src="image" />
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { banners } = inject('data')
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home-banners {
|
||||
@apply w-full flex justify-center mt-6 lg:mt-[6.5rem];
|
||||
|
||||
div {
|
||||
@apply flex flex-wrap justify-center gap-3 lg:gap-[1.4rem] ;
|
||||
|
||||
a {
|
||||
img {
|
||||
@apply object-contain w-[21.3rem] h-[6.6rem] lg:w-[47.9rem] lg:h-[18.8rem];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<section class="est-products">
|
||||
<div>
|
||||
<div v-for="(items, key) in { newProduct, topProduct }" :key="key">
|
||||
<h2>{{ $t(key) }}</h2>
|
||||
<h3>
|
||||
<span>
|
||||
{{ $t("toViewProducts", { title: $t(key) }) }}
|
||||
</span>
|
||||
<router-link to="/products">
|
||||
{{ $t("clickHere") }}
|
||||
</router-link>
|
||||
</h3>
|
||||
<div>
|
||||
<template v-for="(btn, i) in btns.arrows" :key="i">
|
||||
<Button v-if="device == 'desktop'" v-bind="btn" />
|
||||
</template>
|
||||
<Swiper v-bind="swipers[key]" :class="key">
|
||||
<SwiperSlide v-for="(item, i) in items" :key="i">
|
||||
<ProductCard :data="item" type="main" />
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
<HomeMostPopularThisWeek />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { newProduct, topProduct } = inject('data')
|
||||
const { swipers, btns } = inject('init')
|
||||
const { device } = inject('service')
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.est-products {
|
||||
@apply w-full bg-[#F6F8FA] py-6 lg:py-20 overflow-hidden;
|
||||
|
||||
&>div {
|
||||
@apply w-full lg:container flex flex-col mx-auto;
|
||||
|
||||
&>div:not([class]) {
|
||||
@apply flex flex-col;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
@apply order-last mt-10 lg:mt-20;
|
||||
}
|
||||
|
||||
&>h2 {
|
||||
@apply text-[#0B1F11] font-bold font-vazir mr-6 lg:mr-4;
|
||||
@apply text-lg lg:text-3xl;
|
||||
}
|
||||
|
||||
&>h3 {
|
||||
@apply flex items-center gap-1.5 mt-1.5 mr-6 font-vazir;
|
||||
@apply text-sm lg:text-xl lg:mt-2 lg:mr-4;
|
||||
|
||||
span {
|
||||
@apply text-[#8C8C8C] lg:leading-9;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-primary-600 font-bold lg:leading-[2.8rem];
|
||||
}
|
||||
}
|
||||
|
||||
&>div {
|
||||
@apply flex gap-10 w-full h-max mt-2 mb-8 lg:my-16 relative;
|
||||
|
||||
.swiper {
|
||||
@apply w-full h-max mx-0 p-2.5 lg:py-4;
|
||||
|
||||
.swiper-wrapper {
|
||||
@apply w-max h-max;
|
||||
|
||||
.swiper-slide {
|
||||
@apply h-max w-max rtl ml-3 lg:ml-5 last:ml-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>button {
|
||||
@apply w-10 h-10 self-center absolute text-xl p-0 bg-[#B2B2B2] border-none #{!important};
|
||||
@apply first-of-type:-right-16 last-of-type:-left-16 max-lg:hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<section class="latest-posts">
|
||||
<div>
|
||||
<h2>{{ $t('mediaAndContent') }}</h2>
|
||||
<h3>
|
||||
<span>{{ $t('toViewLatestMediaAndContent') }}</span>
|
||||
<router-link to="/blog">{{ $t('clickHere') }}</router-link>
|
||||
</h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="(post, i) in lastBlog" :key="i">
|
||||
<BlogCard :data="post" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { lastBlog } = inject('data')
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.latest-posts {
|
||||
@apply w-full flex justify-center mt-[5.3rem] lg:mt-[8.8rem];
|
||||
|
||||
&>div {
|
||||
@apply container flex flex-col w-full;
|
||||
|
||||
&>h2 {
|
||||
@apply text-[#0B1F11] font-bold font-vazir mr-6 lg:mr-4;
|
||||
@apply text-lg lg:text-3xl;
|
||||
}
|
||||
|
||||
&>h3 {
|
||||
@apply flex items-center gap-1.5 mt-1.5 mr-6 font-vazir;
|
||||
@apply text-sm lg:text-xl lg:mt-2 lg:mr-4;
|
||||
|
||||
span {
|
||||
@apply text-[#8C8C8C] leading-9;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-primary-600 font-bold leading-[2.8rem];
|
||||
}
|
||||
}
|
||||
|
||||
&>div {
|
||||
@apply w-full flex lg:overflow-x-auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
&>ul {
|
||||
@apply flex flex-wrap lg:flex-nowrap justify-center gap-5 mx-2 lg:w-max h-max mt-4 lg:my-12 self-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<section class="main-categories">
|
||||
<Swiper slides-per-view="auto">
|
||||
<SwiperSlide v-for="(item, i) in store.items" :key="i">
|
||||
<router-link :to="{ path: '/search', query: { category: item.link } }">
|
||||
<img :src="item.headerImage" />
|
||||
<h3>{{ $t(item.name) }}</h3>
|
||||
</router-link>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const store = useCategoriesStore();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.main-categories {
|
||||
@apply w-full flex mt-12 lg:mt-[9.6rem];
|
||||
|
||||
.swiper {
|
||||
@apply container py-2 lg:py-4 max-lg:px-4;
|
||||
|
||||
.swiper-wrapper {
|
||||
@apply w-max mx-auto;
|
||||
|
||||
.swiper-slide {
|
||||
@apply w-max ml-2.5 lg:ml-[1.4rem] last:ml-0;
|
||||
|
||||
a {
|
||||
@apply flex flex-col items-center shrink-0;
|
||||
@apply w-[6.3rem] gap-2.5 pb-4;
|
||||
@apply lg:w-[10.8rem] lg:gap-5 lg:pb-6;
|
||||
|
||||
// &::before {
|
||||
// @apply content-['_'] h-[5.6rem] lg:h-[10.8rem] rounded-2xl absolute bottom-0 inset-x-0 -z-10;
|
||||
// @apply shadow-[3px_2px_10px_#87C29A] lg:shadow-[5px_5px_19px_0px_#87C29A,_-5px_-1px_15px_0px_#ffffffcc];
|
||||
// background: linear-gradient(
|
||||
// 133deg,
|
||||
// #e9ecef 0%,
|
||||
// white 100%
|
||||
// );
|
||||
// }
|
||||
|
||||
img {
|
||||
@apply w-[4.4rem] h-[4.4rem] rounded-full lg:w-[9.1rem] lg:h-32;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-[#191919] font-medium font-vazir;
|
||||
@apply text-[0.625em] lg:text-[1.1875em];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="most-popular-this-week">
|
||||
<h2>{{ $t("mostPopularsThisWeek") }}</h2>
|
||||
<router-link to="/">
|
||||
<span>{{ $t("show") }}</span>
|
||||
<i class="isax isax-arrow-left" />
|
||||
</router-link>
|
||||
<ul>
|
||||
<li v-for="(brand, i) in topBrand" :key="i">
|
||||
<router-link :to="{ path: '/search', query: { brand: brand.link } }">
|
||||
<img :src="brand.logo" :alt="brand.title" />
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { topBrand } = inject('data')
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.most-popular-this-week {
|
||||
background: linear-gradient(270deg, #6ea89a 0%, #597c74 100%);
|
||||
@apply container flex flex-wrap-reverse items-center rounded-lg;
|
||||
@apply w-auto p-3 gap-1.5 mx-6 max-w-[97.1rem] min-h-[5.6rem];
|
||||
@apply min-[445px]:justify-center sm:flex-row sm:mx-2 sm:gap-4;
|
||||
@apply lg:h-[7.6rem] lg:px-7 lg:gap-[1.6rem] xl:px-[4.4rem];
|
||||
|
||||
h2 {
|
||||
@apply text-white font-bold font-vazir whitespace-nowrap;
|
||||
@apply text-xl lg:text-3xl;
|
||||
}
|
||||
|
||||
&>a {
|
||||
@apply w-[5.1rem] h-7 flex justify-center items-center gap-1.5 rounded bg-white px-2.5 py-[0.3rem] order-first;
|
||||
@apply lg:w-32 lg:h-[2.6rem] lg:gap-3 lg:px-[0.9rem] text-[#549887] min-[445px]:order-none;
|
||||
|
||||
span {
|
||||
@apply text-[0.7em] lg:text-[1.2em] font-medium font-iran-sans;
|
||||
}
|
||||
|
||||
i {
|
||||
@apply text-lg lg:text-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply flex gap-[1.4rem] lg:gap-[2.6rem] items-center mb-1.5 sm:mb-0 md:mr-auto;
|
||||
|
||||
li {
|
||||
@apply h-max py-px;
|
||||
|
||||
img {
|
||||
@apply object-contain w-14 h-6 lg:w-12 lg:h-12;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<section class="popular-categories">
|
||||
<div>
|
||||
<h2>{{ $t("popularCategories") }}</h2>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="({ link, headerImage, name }, i) in topCategory" :key="i">
|
||||
<router-link :to="{ path: '/search', query: { category: link } }">
|
||||
<div>
|
||||
<!-- <span :style="style(bg)"></span> -->
|
||||
<img :src="headerImage" />
|
||||
</div>
|
||||
<h3>{{ name }}</h3>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { topCategory } = inject('data')
|
||||
|
||||
const bg = reactive({ from: '#E1FFEB', to: '#D8E7FA' })
|
||||
const style = (bg) => `background: linear-gradient(143.73deg, ${bg.from} 5.62%, ${bg.to} 99.35%)`
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.popular-categories {
|
||||
@apply w-full flex justify-center mt-16 lg:mt-[10.8rem];
|
||||
|
||||
&>div {
|
||||
@apply container flex flex-col items-center gap-10 lg:gap-16 w-full;
|
||||
|
||||
h2 {
|
||||
@apply text-[#0B1F11] text-xl lg:text-3xl font-bold font-vazir;
|
||||
}
|
||||
|
||||
&>div {
|
||||
@apply overflow-x-auto w-full rtl;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply rtl grid grid-rows-2 grid-flow-col gap-[1.9rem] w-max mx-auto lg:gap-0 lg:gap-y-8;
|
||||
|
||||
li {
|
||||
a {
|
||||
@apply m-auto flex flex-col items-center;
|
||||
@apply w-[4.6rem] h-[6rem] justify-between;
|
||||
@apply lg:w-[16.2rem] lg:h-[15.6rem] lg:gap-[0.6rem];
|
||||
|
||||
div {
|
||||
@apply flex relative h-full w-full xl:pt-2.5;
|
||||
|
||||
// span {
|
||||
// @apply rounded-full -z-10;
|
||||
// @apply w-[4.3rem] h-[4.3rem];
|
||||
// @apply lg:w-[11.8rem] lg:h-[11.8rem];
|
||||
// }
|
||||
|
||||
img {
|
||||
@apply m-auto object-contain absolute left-1/2 -translate-x-1/2;
|
||||
@apply w-[3.6rem] h-[3rem];
|
||||
@apply lg:w-[11.8rem] lg:h-[11.8rem];
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-[#191919] font-bold font-vazir;
|
||||
@apply text-[0.7em] lg:text-[1.2em] truncate w-full text-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<section class="producers">
|
||||
<h2>{{ title }}</h2>
|
||||
<ul>
|
||||
<li v-for="({ link, logo, title }, i) in creatorBrand" :key="i">
|
||||
<router-link :to="{ path: '/search', query: { brand: link } }">
|
||||
<img :src="logo" :alt="title" />
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps(['title'])
|
||||
|
||||
const { creatorBrand } = inject('data')
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.producers {
|
||||
@apply w-full min-h-[18.9rem] bg-[#FAFAFA] flex flex-col items-center gap-12 py-12 mt-16 max-lg:hidden;
|
||||
|
||||
h2 {
|
||||
@apply text-primary-600 text-3xl font-bold font-vazir;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply w-full flex flex-wrap items-center justify-center gap-12;
|
||||
|
||||
li {
|
||||
@apply h-[2.8rem] w-11;
|
||||
|
||||
img {
|
||||
@apply w-full h-full object-contain object-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<section class="reviews">
|
||||
<Swiper slides-per-view="auto">
|
||||
<SwiperSlide v-for="(review, i) in reviews" :key="i">
|
||||
<router-link :to="'blog/' + review.link">
|
||||
<img :src="review.coverPath" />
|
||||
<h2>{{ review.title }}</h2>
|
||||
<i class="isax isax-arrow-circle-left5" />
|
||||
</router-link>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { reviews } = inject('data')
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.reviews {
|
||||
@apply w-full flex justify-center my-9 lg:my-[4.4rem];
|
||||
|
||||
.swiper {
|
||||
@apply container py-2 lg:py-4 rtl max-lg:px-4;
|
||||
|
||||
.swiper-wrapper {
|
||||
@apply w-max;
|
||||
|
||||
.swiper-slide {
|
||||
@apply w-min ml-2.5 lg:ml-6 last:ml-0;
|
||||
|
||||
a {
|
||||
@apply flex items-end justify-between relative rounded-lg overflow-hidden text-white z-0;
|
||||
@apply w-[9.9rem] h-[7.6rem] gap-4 px-[0.3rem] pb-2.5;
|
||||
@apply lg:w-[18.3rem] lg:h-56 lg:gap-[1.3rem] lg:p-6;
|
||||
|
||||
img {
|
||||
@apply absolute inset-0 z-0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(180deg, #0000 43.02%, #00000096 100%);
|
||||
@apply content-['_'] absolute inset-0 z-[1];
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-xs lg:text-[1.3em] lg:leading-8 font-black font-iran-sans z-[2] whitespace-break-spaces;
|
||||
}
|
||||
|
||||
i {
|
||||
@apply text-lg lg:text-2xl z-[2] -mb-2 lg:-mb-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<section class="top-slider">
|
||||
<template v-for="(btn, i) in btns.arrows" :key="i">
|
||||
<Button v-if="device == 'desktop'" v-bind="btn" />
|
||||
</template>
|
||||
<Swiper v-bind="swipers.topSlider">
|
||||
<SwiperSlide v-for="{ link, images, title, id } in sliders" :key="id">
|
||||
<router-link :to="link">
|
||||
<img :title="title" :src="images[device]" />
|
||||
</router-link>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { swipers, btns } = inject('init')
|
||||
const { device } = inject('service')
|
||||
const { sliders } = inject('data')
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.top-slider {
|
||||
@apply w-full h-max flex z-0;
|
||||
|
||||
.swiper {
|
||||
@apply w-full h-max;
|
||||
|
||||
.swiper-wrapper {
|
||||
@apply z-0 h-max bg-gray-50;
|
||||
|
||||
.swiper-slide {
|
||||
@apply w-screen h-full;
|
||||
|
||||
a {
|
||||
img {
|
||||
@apply w-full object-cover h-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>button {
|
||||
@apply self-center absolute p-0 bg-white/40 border-none max-lg:hidden z-10 #{!important};
|
||||
@apply lg:w-8 lg:h-8 lg:text-base lg:first-of-type:right-8 lg:last-of-type:left-9 #{!important};
|
||||
@apply xl:w-9 xl:h-9 xl:text-lg xl:first-of-type:right-12 xl:last-of-type:left-12 #{!important};
|
||||
@apply 2xl:w-10 2xl:h-10 2xl:text-xl 2xl:first-of-type:right-16 2xl:last-of-type:left-16 #{!important};
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user