diff --git a/resources/css/app.css b/resources/css/app.css index 7688ece..49dec98 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -86,6 +86,7 @@ @import './blocks/wp-block-table.css'; @import './blocks/wp-block-details.css'; @import './blocks/wp-block-image.css'; +@import './blocks/wp-block-buttons.css'; @import './blocks/variants.css'; diff --git a/resources/css/blocks/wp-block-buttons.css b/resources/css/blocks/wp-block-buttons.css new file mode 100644 index 0000000..a90497c --- /dev/null +++ b/resources/css/blocks/wp-block-buttons.css @@ -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; +}