Change chevron animation for FAQ links

This commit is contained in:
mDuo13
2021-07-01 17:27:21 -07:00
parent 999627fade
commit 07ab9309dc
3 changed files with 44 additions and 26 deletions

View File

@@ -115,31 +115,37 @@ p + .readmore {
border-radius: 5px;
padding: 32px;
h3 {
width: calc(100% - 32px);
a {
position: relative;
padding-right: 2rem;
&:hover {
color: $white;
}
&::after {
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-ms-transition: transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transform: rotateX(180deg);
position: absolute;
right: -32px;
top: calc(50% - 12px);
display: inline-flex;
content: url(../../img/icons/purple-arrow.svg);
}
&.collapsed {
&::after {
transform: rotateX(360deg);
}
}
// &::after {
// -webkit-transition: transform 0.3s ease-out;
// -moz-transition: transform 0.3s ease-out;
// -ms-transition: transform 0.3s ease-out;
// -o-transition: transform 0.3s ease-out;
// transition: transform 0.3s ease-out;
// transform: rotateX(180deg);
// position: absolute;
// right: -32px;
// top: calc(50% - 12px);
// display: inline-flex;
// content: url(../../img/icons/purple-arrow.svg);
// }
// &.collapsed {
// &::after {
// transform: rotateX(360deg);
// }
// }
}
}
.chevron {
position: absolute;
top: 0;
right: 0;
}
}