ouidade/dev-epau.archi.fr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

event addClass when in view fonctionne mais animation non

Browse Source
This commit is contained in:
ouidade
2021-04-19 20:11:12 +02:00
parent 25cc038e98
commit aa9e3d6cc5
11 changed files with 135 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/epau-antimatter/scss/template/_buttons.scss
+1 -1
View File
@@ -6,4 +6,4 @@
.button-secondary {
@extend %button;
@include button-color($secondary-link);
}
}
user/themes/epau-antimatter/scss/template/_core.scss
+1 -2
View File
@@ -41,7 +41,7 @@ b, strong {
#body {
@extend .default-animation;
@extend .padding-horiz;
background: $page-bg;
padding-top: $header-height + $padding-vert;
padding-bottom: $footer-height + $padding-vert + 2rem;
@@ -55,4 +55,3 @@ b, strong {
.right {
float: right;
}
user/themes/epau-antimatter/scss/template/_custom.scss
+44 -74
View File
@@ -10,7 +10,9 @@
}
}
.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 {
padding-left: 3rem;
}
#body > script:first-child + .grav-lightslider {
margin-top: -3rem;
@@ -60,22 +62,25 @@
#logo {
position: relative;
display: flex;
flex-direction: row;
// &.active {
// a:after {
// top: 0;
// visibility: visible;
// @include transform(scaleX(0.75));
// }
// }
@include transform(scale(0.75));
&.active {
a:after {
top: 0;
visibility: visible;
@include transform(scale(0.75));
@extend .default-animation;
}
}
img {
padding: 0.5rem;
max-height: 3rem;
margin:auto;
}
#gouv {
padding-right: 3rem;
padding-right: 2rem;
}
}
@@ -139,7 +144,7 @@
}
}
@keyframes anim {
@keyframes animate {
0% {width: 0%;}
100% {width: 100%;}
@@ -160,7 +165,7 @@
.souligne.toright {
// opacity: 0;
// transition: opacity 1s ease-in-out;
animation: anim 1.2s 1 normal ease-in-out forwards;
animation: animate 1.2s 1 normal ease-in-out forwards;
}
.souligne.toleft {
animation: glissement 1.2s 1 normal ease-in-out forwards;
@@ -313,20 +318,6 @@
/*Style du module TEXTE lorsqu'il est ouvert*/
.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*/
.bouton-ouverture {
position: relative;
cursor: pointer;
border: solid;
background-color: transparent;
text-transform: uppercase;
left: 45%;
margin-top: 3rem;
margin-bottom: 5rem;
// align-self: flex-end;
// margin-right: 2rem;
// margin: auto;
}
}
/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
@@ -338,23 +329,6 @@
left: 0;
right: 0;
// background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
.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;
// align-self: flex-end;
// margin-right: 2rem;
// margin: auto;
}
}
.bouton-ouverture {
@@ -362,14 +336,12 @@
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;
// align-self: flex-end;
// margin-right: 2rem;
// margin: auto;
// margin-top: 3rem;
margin-bottom: 2rem;
}
@@ -500,8 +472,9 @@
// }
.bouton {
border: solid;
border: solid !important;
background-color: transparent;
border-radius: 0px !important;
text-transform: uppercase;
align-self: flex-end;
margin:auto;
@@ -526,14 +499,14 @@
}
.modal.open{
display: block;
.bouton {
border: solid;
background-color: transparent;
text-transform: uppercase;
align-self: flex-end;
margin:auto;
margin-bottom: 2rem;
}
// .bouton {
// border: solid !important;
// background-color: transparent;
// text-transform: uppercase;
// align-self: flex-end;
// margin:auto;
// margin-bottom: 2rem;
// }
}
// #modal .mask{
@@ -580,21 +553,6 @@
}
// .modal .container .message{
// padding: 5% 10% 5% 5%;
//
// }
// .modal .container a.close{
// position: absolute;
// right: 5%;
// top:5%;
// color: black;
// font-size: 30px;
// }
// .modal .container a.close:hover{
// color: black;
// }
#new-footer {
// position:absolute;
@@ -666,7 +624,19 @@
}
}
}
}
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;
}
user/themes/epau-antimatter/scss/template/_header.scss
+13 -13
View File
@@ -144,19 +144,19 @@ $dropdown-color: #f6f6f6;
-webkit-backface-visibility: hidden;
&:before, &:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: $core-accent;
visibility: hidden;
@include transform(scaleX(0));
@include transition(all 0.2s ease);
}
// &:before, &:after {
// content: "";
// position: absolute;
// width: 100%;
// height: 1px;
// bottom: 0;
// left: 0;
// background-color: $core-accent;
// visibility: hidden;
// @include transform(scaleX(0));
// @include transition(all 0.2s ease);
//
// }
&:hover:before {
visibility: visible;
user/themes/epau-antimatter/scss/template/modules/_buttons.scss
+1 -1
View File
@@ -13,7 +13,7 @@
background: $white;
color: $color;
border: 1px solid $color;
border-radius: 3px;
// border-radius: 3px;
&:hover {
background: $color;
color: $white;