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

FEATURE Styling the shape variations and behaviours
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2026-03-24 15:36:27 +01:00
parent dd6d2369b8
commit 41ad51d03e
1 changed files with 87 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
resources/css/blocks/content-box.css
View File

@ -3,78 +3,102 @@
}
.content-box {
@apply relative px-4 md:px-8;
&--variant-framed {
@apply border border-carhop-green-600;
}
&--variant-backgrounded {
@apply py-16;
background-color: var(--content-box-background-color, transparent);
}
&--variant-framed-backgrounded {
@apply py-16;
@apply border border-carhop-green-600;
background-color: var(--content-box-background-color, transparent);
}
&--shape-straight {
@apply py-16;
background-color: var(--content-box-background-color, transparent);
}
&--shapeA,
&--shapeB {
@apply !relative;
background-color: transparent !important;
&.alignwide,
&.aligncontained {
@apply !mx-auto;
.content-box__innerblocks {
@apply z-10 relative;
}
}
&.aligncontained {
@apply !max-w-screen-lg;
.content-box__shape {
@apply top-0 left-0 w-full h-full absolute;
}
/* &.alignwide {
@apply py-16;
background-color: var(--content-box-background-color, transparent);
}
&.alignwide,
&.aligncontained {
@apply !mx-auto;
}
&.aligncontained {
@apply !max-w-screen-lg;
}
/* &.alignwide {
@apply max-w-screen-lg;
} */
.wp-block-group {
.wp-block-group {
}
&--bg-light {
--content-box-text-color: var(--wp--preset--color--carhop-green);
--advised-text-color: var(--wp--preset--color--carhop-green, inherit);
}
&--bg-dark {
--content-box-text-color: #fff;
--advised-text-color: #fff;
p {
color: var(--advised-text-color, inherit);
}
&--bg-light {
--content-box-text-color: var(--wp--preset--color--carhop-green);
--advised-text-color: var(--wp--preset--color--carhop-green, inherit);
}
.wp-block-carhop-blocks-cta {
--cta-current-color: #fff;
color: blue;
&--bg-dark {
--content-box-text-color: #fff;
--advised-text-color: #fff;
p {
color: var(--advised-text-color, inherit);
}
.wp-block-carhop-blocks-cta {
--cta-current-color: #fff;
color: blue;
&:after {
/* background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg'); */
filter: brightness(41);
}
}
a[target='_blank'] {
&:after {
background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg');
}
&:after {
/* background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg'); */
filter: brightness(41);
}
}
&__innerblocks {
@apply mx-auto px-4 md:px-8;
> :not(.alignwide):not(.alignfull) {
@apply max-w-screen-lg mx-auto;
a[target='_blank'] {
&:after {
background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg');
}
}
&.alignwide .content-box__innerblocks {
> :not(.alignfull) {
@apply max-w-screen-xl mx-auto;
}
}
h3 {
/* @apply title-small font-bold; */
}
}
/* h1.wp-block-heading {
&__innerblocks {
@apply mx-auto px-4 md:px-8;
> :not(.alignwide):not(.alignfull) {
@apply max-w-screen-lg mx-auto;
}
}
&.alignwide .content-box__innerblocks {
> :not(.alignfull) {
@apply max-w-screen-xl mx-auto;
}
}
h3 {
/* @apply title-small font-bold; */
}
/* h1.wp-block-heading {
@apply !text-4xl mb-12;
}
@ -84,15 +108,15 @@
h4.wp-block-heading {
@apply !text-2xl uppercase nunito font-medium tracking-widest pb-1;
} */
ul + h3,
p + h3 {
@apply mt-12;
}
ul + h3,
p + h3 {
@apply mt-12;
}
h3 + p {
@apply !mt-3;
}
/* p > a {
h3 + p {
@apply !mt-3;
}
/* p > a {
transition: all 0.3s ease-out;
@apply underline underline-offset-8;
text-decoration-thickness: 1px;
@ -100,15 +124,14 @@
@apply underlined-link underlined-link--white;
} */
ul {
list-style: disc;
}
> ul {
padding-left: 1.5rem;
}
.carhop-heading:not(:first-child) {
@apply pt-32;
}
ul {
list-style: disc;
}
> ul {
padding-left: 1.5rem;
}
.carhop-heading:not(:first-child) {
@apply pt-32;
}
main > .content-box:first-child {
@ -143,7 +166,7 @@ body.wp-admin.post-type-articles .content-box,
body.single-activites .content-box,
body.wp-admin.post-type-page .content-box,
body.page .content-box {
@apply py-16;
/* @apply py-16; */
color: var(--content-box-text-color);
.carhop-heading p {