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;
transition: all 1s ease-in-out;
}
.header--collapsed .qdd-header {
opacity: 1 !important;
}
@media (max-width: 810px) {
.header--collapsed {
width: 100%;
@@ -478,6 +481,9 @@ header .header:hover + .header_nav_container {
transform-origin: bottom right;
transition: all 0s ease-in-out;
}
.header--collapsed-already .qdd-header {
opacity: 1 !important;
}
@media (max-width: 810px) {
.header--collapsed-already {
width: 100%;
@@ -571,8 +577,7 @@ footer {
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
width: auto;
height: 40px;
padding-left: 1rem;
padding-bottom: 1rem;
padding-bottom: 0.2rem;
}
@media (max-width: 700px) {
.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 {
opacity: 1;
transform: scale(2);
}
@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 {
opacity: 0;
animation-delay: 0.2s;
animation-name: blink;
animation-duration: 5s;
animation-duration: 10s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
animation-delay: 0.4s;
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 {
opacity: 0;
animation-delay: 0.8s;
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 {
0%, 100% {
@@ -2430,9 +2443,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
display: none;
}
.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");
padding-right: 0.5rem;
padding-right: 0.2rem;
padding-left: 0.2rem;
}
.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/) -->
<svg
width="7mm"
height="7mm"
width="35px"
height="35px"
viewBox="0 0 10.531931 10.531931"
version="1.1"
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;
}
&::after{
display: inline-block;
display: inline-flex;
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{
.field_field_logo{
.qdd-header{
opacity: 0;
&.animated{
opacity: 1;
transform: scale(2);
@media(max-width:820px) {
transform: scale(1);
}
.blink-blue {
opacity: 0;
// animation: blink 3s 3;
animation-delay: 0.2s;
animation-name: blink;
animation-duration: 5s;
animation-duration: 10s;
}
.blink-red {
animation-delay: 0.4s;
opacity: 0;
animation-delay: 0.8s;
animation-name: blink;
animation-duration: 5s;
animation-duration: 10s;
}
.blink-black {
animation-delay: 0.6s;
opacity: 0;
animation-delay: 1.5s;
animation-name: blink;
animation-duration: 5s;
animation-duration: 10s;
}
.blink-black2 {
animation-delay: 0.8s;
opacity: 0;
animation-delay: 2s;
animation-name: blink;
animation-duration: 5s;
animation-duration: 10s;
}
@keyframes blink {
0%, 100% {

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

@@ -57,8 +57,8 @@ footer{
img{
width: auto;
height: 40px;
padding-left: 1rem;
padding-bottom: 1rem;
// padding-left: 1rem;
padding-bottom: 0.2rem;
@media(max-width: 700px){
height: 30px;
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%;
transform-origin: bottom right;
transition: all 1s ease-in-out;
.qdd-header{
opacity: 1 !important;
}
@media(max-width: 810px){
width: 100%;
height: 170px;
@@ -220,6 +223,9 @@ header{
width: 45%;
transform-origin: bottom right;
transition: all 0s ease-in-out;
.qdd-header{
opacity: 1 !important;
}
@media(max-width: 810px){
width: 100%;
height: 170px;