bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix anim header

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-15 14:30:53 +02:00
parent 7a3a139c3f
commit 119451da1a
6 changed files with 56 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -445,6 +445,9 @@ header .header:hover + .header_nav_container {
transform-origin: bottom right; transform-origin: bottom right;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
} }
.header--collapsed .qdd-header {
opacity: 1 !important;
}
@media (max-width: 810px) { @media (max-width: 810px) {
.header--collapsed { .header--collapsed {
width: 100%; width: 100%;
@@ -478,6 +481,9 @@ header .header:hover + .header_nav_container {
transform-origin: bottom right; transform-origin: bottom right;
transition: all 0s ease-in-out; transition: all 0s ease-in-out;
} }
.header--collapsed-already .qdd-header {
opacity: 1 !important;
}
@media (max-width: 810px) { @media (max-width: 810px) {
.header--collapsed-already { .header--collapsed-already {
width: 100%; width: 100%;
@@ -571,8 +577,7 @@ footer {
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img { .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
width: auto; width: auto;
height: 40px; height: 40px;
padding-left: 1rem; padding-bottom: 0.2rem;
padding-bottom: 1rem;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img { .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
@@ -1413,7 +1418,11 @@ footer {
} }
} }
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
opacity: 0;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
opacity: 1;
transform: scale(2); transform: scale(2);
} }
@media (max-width: 820px) { @media (max-width: 820px) {
@@ -1422,24 +1431,28 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
} }
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
opacity: 0;
animation-delay: 0.2s; animation-delay: 0.2s;
animation-name: blink; animation-name: blink;
animation-duration: 5s; animation-duration: 10s;
} }
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
animation-delay: 0.4s; opacity: 0;
animation-name: blink;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
animation-delay: 0.6s;
animation-name: blink;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
animation-delay: 0.8s; animation-delay: 0.8s;
animation-name: blink; animation-name: blink;
animation-duration: 5s; animation-duration: 10s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
opacity: 0;
animation-delay: 1.5s;
animation-name: blink;
animation-duration: 10s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
opacity: 0;
animation-delay: 2s;
animation-name: blink;
animation-duration: 10s;
} }
@keyframes blink { @keyframes blink {
0%, 100% { 0%, 100% {
@@ -2430,9 +2443,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
display: none; display: none;
} }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::after { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::after {
display: inline-block; display: inline-flex;
content: url("../img/noun-arrow-to-right.svg"); content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.5rem; padding-right: 0.2rem;
padding-left: 0.2rem;
} }
.node-type-static main { .node-type-static main {

4
web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg vendored
View File

@@ -2,8 +2,8 @@
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
width="7mm" width="35px"
height="7mm" height="35px"
viewBox="0 0 10.531931 10.531931" viewBox="0 0 10.531931 10.531931"
version="1.1" version="1.1"
id="svg1" id="svg1"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

5
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/partenaires.scss
View File

@@ -94,9 +94,10 @@
display: none; display: none;
} }
&::after{ &::after{
display: inline-block; display: inline-flex;
content: url("../img/noun-arrow-to-right.svg"); content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.5rem; padding-right: 0.2rem;
padding-left: 0.2rem;
} }
} }

21
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss
View File

@@ -2,35 +2,40 @@ header{
#block-quartiers-de-demain-logoquartiersdedemain{ #block-quartiers-de-demain-logoquartiersdedemain{
.field_field_logo{ .field_field_logo{
.qdd-header{ .qdd-header{
opacity: 0;
&.animated{ &.animated{
opacity: 1;
transform: scale(2); transform: scale(2);
@media(max-width:820px) { @media(max-width:820px) {
transform: scale(1); transform: scale(1);
} }
.blink-blue { .blink-blue {
opacity: 0;
// animation: blink 3s 3; // animation: blink 3s 3;
animation-delay: 0.2s; animation-delay: 0.2s;
animation-name: blink; animation-name: blink;
animation-duration: 5s; animation-duration: 10s;
} }
.blink-red { .blink-red {
animation-delay: 0.4s; opacity: 0;
animation-delay: 0.8s;
animation-name: blink; animation-name: blink;
animation-duration: 5s; animation-duration: 10s;
} }
.blink-black { .blink-black {
animation-delay: 0.6s; opacity: 0;
animation-delay: 1.5s;
animation-name: blink; animation-name: blink;
animation-duration: 5s; animation-duration: 10s;
} }
.blink-black2 { .blink-black2 {
animation-delay: 0.8s; opacity: 0;
animation-delay: 2s;
animation-name: blink; animation-name: blink;
animation-duration: 5s; animation-duration: 10s;
} }
@keyframes blink { @keyframes blink {
0%, 100% { 0%, 100% {

4
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
View File

@@ -57,8 +57,8 @@ footer{
img{ img{
width: auto; width: auto;
height: 40px; height: 40px;
padding-left: 1rem; // padding-left: 1rem;
padding-bottom: 1rem; padding-bottom: 0.2rem;
@media(max-width: 700px){ @media(max-width: 700px){
height: 30px; height: 30px;
padding-left: 0; padding-left: 0;

6
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@@ -193,6 +193,9 @@ header{
width: 45%; width: 45%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
.qdd-header{
opacity: 1 !important;
}
@media(max-width: 810px){ @media(max-width: 810px){
width: 100%; width: 100%;
height: 170px; height: 170px;
@@ -220,6 +223,9 @@ header{
width: 45%; width: 45%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 0s ease-in-out; transition: all 0s ease-in-out;
.qdd-header{
opacity: 1 !important;
}
@media(max-width: 810px){ @media(max-width: 810px){
width: 100%; width: 100%;
height: 170px; height: 170px;