78 lines
1.7 KiB
CSS
78 lines
1.7 KiB
CSS
a[target='_blank'] {
|
|
@apply external-link;
|
|
}
|
|
.external-link {
|
|
&:after {
|
|
@apply content-[''] w-7 h-7 ml-2 inline-block;
|
|
background-image: url('../resources/img/carhop-fleche-lien-externe-full--green.svg');
|
|
transform: translateY(6px);
|
|
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
}
|
|
.underlined-link {
|
|
transition: all 0.3s ease-out;
|
|
@apply underline underline-offset-8;
|
|
text-decoration-thickness: 1px;
|
|
&--white {
|
|
@apply decoration-white;
|
|
&:hover {
|
|
@apply decoration-carhop-green-300;
|
|
}
|
|
}
|
|
&--green {
|
|
@apply decoration-carhop-green-700;
|
|
&:hover {
|
|
@apply decoration-carhop-green-400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.internal-link-with-icon {
|
|
@apply flex items-center;
|
|
transition: transform 0.3s ease-out;
|
|
&:after {
|
|
flex-shrink: 0;
|
|
transition: transform 0.3s ease-out;
|
|
@apply content-[''] w-10 h-10 ml-2 inline-block;
|
|
background-image: url('../resources/img/carhop-fleche-lien-externe-full--outline-green.svg');
|
|
transform: rotate(0deg) translateX(0px);
|
|
}
|
|
&:hover:after {
|
|
transform: translateX(4px) rotate(45deg);
|
|
}
|
|
&:hover {
|
|
filter: brightness(1.2);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 8px;
|
|
transform: translateX(-4px);
|
|
}
|
|
&--white {
|
|
@apply text-white;
|
|
&:after {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.internal-link-self-page-anchor {
|
|
&:hover {
|
|
transform: translateX(0);
|
|
}
|
|
&:after {
|
|
transform: rotate(135deg) translateX(0px);
|
|
}
|
|
&:hover:after {
|
|
transform: translateX(0px) translateY(6px) rotate(135deg);
|
|
}
|
|
}
|
|
|
|
.no-external-icon {
|
|
&:after {
|
|
@apply !hidden;
|
|
}
|
|
}
|