50 lines
1.2 KiB
CSS
50 lines
1.2 KiB
CSS
.wp-block-buttons.is-style-big-buttons {
|
|
@apply mx-auto flex flex-col justify-center mt-4 mb-12;
|
|
@apply px-4;
|
|
@screen lg {
|
|
flex-direction: row;
|
|
@apply px-0;
|
|
}
|
|
.wp-block-button {
|
|
@apply shrink w-full;
|
|
flex-shrink: 1;
|
|
flex-grow: 1;
|
|
flex-basis: 100%;
|
|
@screen lg {
|
|
@apply w-fit;
|
|
flex-grow: 0;
|
|
flex-basis: calc(50% - var(--wp--style--block-gap, 0.5em) * 0.5);
|
|
}
|
|
.wp-block-button__link {
|
|
@apply fjalla uppercase text-left flex justify-between items-center bg-white text-primary;
|
|
@apply text-3xl;
|
|
&:after {
|
|
@apply content-[''] block w-16 h-16 bg-no-repeat;
|
|
|
|
transition: transform 0.3s ease-out;
|
|
background-image: url('../resources/img/carhop-fleche-full-green.svg');
|
|
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.wp-block-button__link {
|
|
@apply bg-carhop-green-900 text-white;
|
|
}
|
|
.wp-block-button__link:after {
|
|
transform: translateX(10px);
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.wp-block-buttons {
|
|
@apply !max-w-screen-lg;
|
|
}
|
|
|
|
.wp-block-buttons.alignwide,
|
|
.wp-block-buttons.alignfull {
|
|
@apply max-w-none;
|
|
}
|