Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Handling the big buttons variation

Browse Source
This commit is contained in:
Antoine M 2026-01-27 13:58:11 +01:00
parent 1fd5427c0f
commit 0a1b3193eb
2 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/css/app.css
View File

@ -86,6 +86,7 @@
@import './blocks/wp-block-table.css'; @import './blocks/wp-block-table.css';
@import './blocks/wp-block-details.css'; @import './blocks/wp-block-details.css';
@import './blocks/wp-block-image.css'; @import './blocks/wp-block-image.css';
@import './blocks/wp-block-buttons.css';
@import './blocks/variants.css'; @import './blocks/variants.css';

49
resources/css/blocks/wp-block-buttons.css Normal file
View File

@ -0,0 +1,49 @@
.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;
}