handling css path for moving acf blocks to plugin

This commit is contained in:
Antoine M 2023-12-20 10:08:48 +01:00
parent 075e722a6d
commit 4b8a70a33d
6 changed files with 240 additions and 0 deletions

View File

@ -0,0 +1,43 @@
#block-aides-financieres {
.section_titling {
@apply max-w-screen-md;
}
.card-large-content {
@apply lg:grid grid-cols-2 gap-12;
&__renolution-details {
/* .logo_renolution { */
.renolution__logo {
@apply p-6 mb-8 bg-white shadowed w-fit rounded-3xl;
}
.renolution__title {
@apply text-lg font-bold text-secondary pb-3;
}
.cta {
@apply mt-8;
}
.renolution__guide-external-links {
@apply grid grid-cols-2 gap-12 pt-6;
.question_title {
@apply text-black font-bold pt-6 pb-2;
}
.question_explanation {
@apply text-sm;
}
.question_url {
@apply block text-sm text-black font-bold mt-2 py-2;
&:hover {
@apply text-secondary;
}
img {
@apply inline-block ml-1 -mt-1;
}
}
}
}
&__renolution-illustration-picture {
@apply ml-auto;
}
}
}

View File

@ -0,0 +1,24 @@
#block-demarches-administratives {
&.card-large-content-container--has-illustration {
@apply pt-64;
}
.card-large-content--has-illustration {
@apply pt-28;
}
.card-large-content__top-illustration {
transform: translate(-50%, -70%);
}
.card-large-content__links-container {
@apply grid-cols-1
md:grid-cols-2
lg:grid-cols-4
gap-x-12;
.card-large-content__link {
/* @apply flex flex-col; */
.cta {
@apply self-end px-6 w-full text-center md:w-fit;
}
}
}
}

View File

@ -0,0 +1,66 @@
.home-header {
@apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20
mb-24;
isolation: isolate;
/* relative */
/* bg-red-100 */
/* aspect-ratio: 1.5; */
/* min-height: 80vh; */
/* background-color: #fbfff5a6; */
&__titling {
@apply max-w-[580px]
relative
z-10
lg:absolute
mb-[-100px]
lg:mb-0;
}
&__title {
@apply text-3xl md:text-4xl font-medium pb-6 pt-16;
line-height: 1.2;
}
&__scroll-down-indicator {
@apply bg-primary rounded-full flex justify-center items-center mt-6;
width: 80px;
height: 80px;
&__arrow {
animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99);
/* cubic-bezier(0.01, 0.61, 0.39, 1); */
/* cubic-bezier(0.18, 0.89, 0.3, 1); */
}
}
&__fresque {
@apply w-full;
z-index: -1;
@apply bg-purple-50;
img {
@apply w-full h-full max-h-full object-contain;
/* object-position: 100% 100%; */
@screen lg {
/* object-position: 100% 0%; */
}
}
@media (max-aspect-ratio: 16 / 9) {
img {
/* @apply bg-red-100; */
}
}
@media (min-aspect-ratio: 16 / 9) {
img {
/* @apply bg-green-100; */
}
}
}
}
@keyframes bouncingArrow {
0% {
transform: translateY(4px);
}
100% {
transform: translateY(-6px);
}
}

View File

@ -0,0 +1,17 @@
.section_latest_news {
@apply py-24;
.section_titling {
@apply max-w-md mx-auto;
}
.articles_container {
@apply grid
grid-cols-1
sm:grid-cols-2
xl:grid-cols-4
max-w-screen-2xl
px-8
py-16
gap-8
mx-auto;
}
}

View File

@ -0,0 +1,7 @@
#block-questions-frequentes {
@apply py-28 px-8;
}
.questions-frequentes-grid {
@apply grid md:grid-cols-2 lg:grid-cols-3 gap-8 gap-x-8 max-w-screen-xl mx-auto;
}

View File

@ -0,0 +1,83 @@
.swiper-content {
@apply lg:px-24 relative max-w-screen-2xl mx-auto;
/* @apply bg-fuchsia-100; */
}
.swiper-container {
height: auto;
@apply px-3 overflow-hidden;
/* @apply bg-yellow-50; */
}
.swiper-wrapper {
@apply pt-24 pb-16 w-full flex-col lg:flex-row gap-y-20;
}
.swiper-slide {
@apply h-auto;
.card-thematique {
@apply h-full;
}
}
.thematique-button-next,
.thematique-button-prev {
@apply absolute top-1/2 z-50 opacity-80 hidden lg:block;
width: 60px;
height: 60px;
&:hover,
&:focus {
@apply opacity-100;
filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%)
contrast(117%);
}
&:focus {
@apply rounded-full;
}
}
.thematique-button-next {
@apply right-0 transform;
}
.thematique-button-prev {
@apply left-0;
}
.swiper-pagination {
@apply hidden lg:block;
}
.swiper-pagination-bullet {
@apply w-3 h-3 mx-2 opacity-100 bg-white !border-2 !border-solid border-black opacity-80;
}
.swiper-pagination-bullet:focus {
outline-offset: 4px;
}
.swiper-pagination-bullet-active {
@apply bg-secondary !border-secondary opacity-100;
}
/* .swiper-slide {
background-color: red !important;
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} */
.section-show-thematiques {
@apply pt-8 pb-8 px-8 md:px-16;
.thematiques-container {
@apply grid
grid-cols-3
gap-8
gap-y-32
max-w-screen-xl
mx-auto
pt-16;
}
}