80 lines
1.5 KiB
SCSS
80 lines
1.5 KiB
SCSS
.cta {
|
|
@apply block;
|
|
&--round {
|
|
@apply w-20 h-20;
|
|
border-radius: 50%;
|
|
}
|
|
&--construction {
|
|
@apply bg-construction;
|
|
}
|
|
&--lhoist {
|
|
@apply bg-lhoistdark;
|
|
}
|
|
&--button-icon {
|
|
@apply relative border-none cursor-pointer;
|
|
|
|
text-decoration: none;
|
|
transition: all 0.4s ease-in-out;
|
|
&:after {
|
|
@apply absolute w-10 h-10 z-20 left-1/2 top-1/2;
|
|
content: "";
|
|
transform: translate(-50%, -50%);
|
|
background-position: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
&:hover {
|
|
scale: 1.2;
|
|
}
|
|
}
|
|
&--play {
|
|
@apply p-3;
|
|
&:after {
|
|
@apply w-10 h-9;
|
|
background-image: url("../../../img/icons/icon-play.svg");
|
|
translate: 6px 1px;
|
|
}
|
|
}
|
|
&--next {
|
|
&:after {
|
|
background-image: url("../../../img/icons/arrow-next.svg");
|
|
}
|
|
}
|
|
&--previous {
|
|
&:after {
|
|
background-image: url("../../../img/icons/arrow-previous.svg");
|
|
}
|
|
}
|
|
&--home {
|
|
&:after {
|
|
background-image: url("../../../img/icons/home.svg");
|
|
}
|
|
}
|
|
&--back {
|
|
&:after {
|
|
background-image: url("../../../img/icons/icon-back.svg");
|
|
}
|
|
}
|
|
&--close {
|
|
&:after {
|
|
background-image: url("../../../img/icons/icon-cross.svg");
|
|
}
|
|
}
|
|
&--start {
|
|
@apply text-5xl text-white p-8 py-4 flex items-center gap-6 h-fit;
|
|
line-height: 0.4;
|
|
|
|
span {
|
|
@apply block text-zuume;
|
|
}
|
|
&:after {
|
|
@apply inline-block static;
|
|
transform: none;
|
|
background-image: url("../../../img/icons/arrow-start.svg");
|
|
}
|
|
}
|
|
}
|
|
.motion-button {
|
|
@apply bg-transparent w-fit h-fit border-none;
|
|
}
|