Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updating card hover and focus

Browse Source
This commit is contained in:
Antoine M 2024-01-09 09:28:13 +01:00
parent afe63a83ba
commit a15d95fd3e
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
template-components/cards/card-frequent-question.php
View File

@ -2,12 +2,6 @@
$mots_cles = get_the_terms($args['post_ID'], 'mots-cles'); $mots_cles = get_the_terms($args['post_ID'], 'mots-cles');
$thematique_icon = get_field('taxonomy_pictures', $args['thematique'])['icon']; $thematique_icon = get_field('taxonomy_pictures', $args['thematique'])['icon'];
// echo '<pre>';
// print_r($thematique_icon);
// print_r($mots_cles);
// print_r($args);
// echo '</pre>';
?> ?>
<div class="card-frequent-question card-<?php echo $args['thematique']->slug ?>"> <div class="card-frequent-question card-<?php echo $args['thematique']->slug ?>">

37
template-components/cards/card-frequent_question.css
View File

@ -1,5 +1,6 @@
.card-frequent-question { .card-frequent-question {
@apply shadowed p-8 rounded-3xl relative; @apply shadowed p-8 rounded-3xl relative;
transition: all 0.3s ease-in-out;
&__icon { &__icon {
max-width: 80px; max-width: 80px;
@ -18,33 +19,61 @@
@apply py-1 px-4 rounded-lg; @apply py-1 px-4 rounded-lg;
} }
} }
&:hover {
transform: scale(1.015) translateY(-8px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
}
&.card-acoustique:hover, &.card-acoustique:hover,
&.card-petites-coproprietes:hover { &.card-petites-coproprietes:hover,
&.card-acoustique .cta--with-arrow-button:focus-visible,
&.card-petites-coproprietes .cta--with-arrow-button:focus-visible {
@apply !outline-acoustique-coproprietes;
.cta_arrow_button { .cta_arrow_button {
@apply filter-acoustique-coproprietes; @apply filter-acoustique-coproprietes;
} }
} }
&.card-au-quotidien:hover, &.card-au-quotidien:hover,
&.card-isolation:hover { &.card-isolation:hover,
&.card-au-quotidien .cta--with-arrow-button:focus-visible,
&.card-isolation .cta--with-arrow-button:focus-visible {
@apply !outline-isolation-quotidien;
.cta_arrow_button { .cta_arrow_button {
@apply filter-isolation-quotidien; @apply filter-isolation-quotidien;
} }
} }
&.card-energies:hover, &.card-energies:hover,
&.card-urbanisme:hover { &.card-urbanisme:hover,
&.card-energies .cta--with-arrow-button:focus-visible,
&.card-urbanisme .cta--with-arrow-button:focus-visible {
@apply !outline-energies-urbanisme;
.cta_arrow_button { .cta_arrow_button {
@apply filter-energies-urbanisme; @apply filter-energies-urbanisme;
} }
} }
&.card-location:hover {
&.card-location:hover,
&.card-location .cta--with-arrow-button:focus-visible {
@apply !outline-location-renovation-circulaire;
.cta_arrow_button { .cta_arrow_button {
@apply filter-location-renovation-circulaire; @apply filter-location-renovation-circulaire;
} }
} }
&.card-patrimoine .cta--with-arrow-button:focus-visible,
&.card-patrimoine:hover { &.card-patrimoine:hover {
@apply !outline-patrimoine-renovation;
.cta_arrow_button { .cta_arrow_button {
@apply filter-patrimoine-renovation; @apply filter-patrimoine-renovation;
} }
} }
.cta--with-arrow-button:focus-visible {
@apply rounded-full;
outline-style: solid;
outline-width: 1px;
outline-offset: 6px;
}
} }