event addClass when in view fonctionne mais animation non

This commit is contained in:
2021-04-19 20:11:12 +02:00
parent 25cc038e98
commit aa9e3d6cc5
11 changed files with 135 additions and 234 deletions
@@ -52,7 +52,7 @@ b, strong, label, th {
.right {
float: right; }
.default-animation, #body, #header, #header #logo h3, #header #navbar ul.navigation, .modular .showcase .button {
.default-animation, #body, #header, #header #logo h3, #header #navbar ul.navigation, #logo.active a:after, .modular .showcase .button {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease; }
@@ -156,23 +156,6 @@ b, strong, label, th {
display: inline-block;
padding: 0.3rem 0.8rem;
-webkit-backface-visibility: hidden; }
#header #navbar ul.navigation li a:before, #header #navbar ul.navigation li a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
#header #navbar ul.navigation li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(0.75);
@@ -528,8 +511,7 @@ td {
.button {
background: #fff;
color: #000;
border: 1px solid #000;
border-radius: 3px; }
border: 1px solid #000; }
.button:hover {
background: #000;
color: #fff; }
@@ -539,8 +521,7 @@ td {
.button-secondary {
background: #fff;
color: #F6635E;
border: 1px solid #F6635E;
border-radius: 3px; }
border: 1px solid #F6635E; }
.button-secondary:hover {
background: #F6635E;
color: #fff; }
@@ -813,6 +794,9 @@ ul.pagination {
.grav-lightslider .lSSlideOuter .lSPager.lSpg > li a {
z-index: 1; }
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
padding-left: 3rem; }
#body > script:first-child + .grav-lightslider {
margin-top: -3rem; }
@@ -849,14 +833,28 @@ ul.pagination {
font-weight: 900; }
#logo {
position: relative;
display: flex;
flex-direction: row; }
flex-direction: row;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-ms-transform: scale(0.75);
-o-transform: scale(0.75);
transform: scale(0.75); }
#logo.active a:after {
top: 0;
visibility: visible;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-ms-transform: scale(0.75);
-o-transform: scale(0.75);
transform: scale(0.75); }
#logo img {
padding: 0.5rem;
max-height: 3rem;
margin: auto; }
#logo #gouv {
padding-right: 3rem; }
padding-right: 2rem; }
#body p:empty {
display: none; }
@@ -892,7 +890,7 @@ ul.pagination {
.titre_bsn p {
padding-right: 15%; }
@keyframes anim {
@keyframes animate {
0% {
width: 0%; }
100% {
@@ -907,7 +905,7 @@ ul.pagination {
width: 100%; } }
.after-h1 .souligne.toright {
animation: anim 1.2s 1 normal ease-in-out forwards; }
animation: animate 1.2s 1 normal ease-in-out forwards; }
.after-h1 .souligne.toleft {
animation: glissement 1.2s 1 normal ease-in-out forwards; }
@@ -967,15 +965,6 @@ ul.pagination {
.texte-cache.ouvert {
max-height: 300vh;
/* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ }
.texte-cache.ouvert .bouton-ouverture {
position: relative;
cursor: pointer;
border: solid;
background-color: transparent;
text-transform: uppercase;
left: 45%;
margin-top: 3rem;
margin-bottom: 5rem; }
/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
.texte-cache:not(.ouvert)::after {
@@ -985,27 +974,17 @@ ul.pagination {
bottom: 0;
left: 0;
right: 0; }
.texte-cache:not(.ouvert)::after .bouton-ouverture {
position: relative;
justify-content: center;
cursor: pointer;
border: solid;
background-color: transparent;
text-transform: uppercase;
left: 45%;
margin-top: 3rem;
margin-bottom: 5rem; }
.bouton-ouverture {
position: relative;
justify-content: center;
cursor: pointer;
border: solid;
border-radius: 0px !important;
background-color: transparent;
text-transform: uppercase;
left: 45%;
margin-top: 3rem;
margin-bottom: 5rem; }
margin-bottom: 2rem; }
.gouvernance {
background-color: #000;
@@ -1084,8 +1063,9 @@ ul.pagination {
transition: 0.2s ease-in-out; }
.bouton {
border: solid;
border: solid !important;
background-color: transparent;
border-radius: 0px !important;
text-transform: uppercase;
align-self: flex-end;
margin: auto;
@@ -1102,13 +1082,6 @@ ul.pagination {
.modal.open {
display: block; }
.modal.open .bouton {
border: solid;
background-color: transparent;
text-transform: uppercase;
align-self: flex-end;
margin: auto;
margin-bottom: 2rem; }
.modal .container {
position: absolute;
@@ -1183,6 +1156,19 @@ ul.pagination {
#new-footer .footer .contact p {
margin: 0; }
button:focus {
border: solid !important;
background-color: transparent;
border-radius: 0px !important;
text-transform: uppercase;
align-self: flex-end;
margin: auto;
margin-bottom: 2rem;
outline: -webkit-focus-ring-color auto 0px;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 0px; }
.modular.header-image #header {
background-color: rgba(255, 255, 255, 0);
box-shadow: none; }