| 1 |
/* |
| 2 |
The .ext utility is a top-level class that we use to target contents within our patterns. |
| 3 |
We use it here to ensure columns blocks display well across themes. |
| 4 |
*/ |
| 5 |
.wp-block-columns[class*="fullwidth-cols"] { |
| 6 |
/* no suggestion */ |
| 7 |
margin-bottom: unset; |
| 8 |
} |
| 9 |
|
| 10 |
/* Some popular themes use padding instead of core's margin for columns; remove it */ |
| 11 |
.ext .wp-block-columns .wp-block-column[style*="padding"] { |
| 12 |
/* no suggestion */ |
| 13 |
@apply ext-px-0 !important; |
| 14 |
} |
| 15 |
|
| 16 |
/* Some popular themes add double spacing between columns; remove it */ |
| 17 |
.ext |
| 18 |
.wp-block-columns |
| 19 |
+ .wp-block-columns:not([class*="mt-"]):not([class*="my-"]) { |
| 20 |
/* no suggestion */ |
| 21 |
@apply ext-mt-0 !important; |
| 22 |
} |
| 23 |
|
| 24 |
[class*="fullwidth-cols"] .wp-block-column:first-child, |
| 25 |
[class*="fullwidth-cols"] .wp-block-group:first-child { |
| 26 |
/* no suggestion */ |
| 27 |
@apply ext-mt-0; |
| 28 |
} |
| 29 |
|
| 30 |
[class*="fullwidth-cols"] .wp-block-column:last-child, |
| 31 |
[class*="fullwidth-cols"] .wp-block-group:last-child { |
| 32 |
/* no suggestion */ |
| 33 |
@apply ext-mb-0; |
| 34 |
} |
| 35 |
|
| 36 |
[class*="fullwidth-cols"] .wp-block-column:first-child > * { |
| 37 |
/* no suggestion */ |
| 38 |
@apply ext-mt-0; |
| 39 |
} |
| 40 |
|
| 41 |
[class*="fullwidth-cols"] .wp-block-column > *:first-child { |
| 42 |
/* no suggestion */ |
| 43 |
@apply ext-mt-0; |
| 44 |
} |
| 45 |
|
| 46 |
[class*="fullwidth-cols"] .wp-block-column > *:last-child { |
| 47 |
/* no suggestion */ |
| 48 |
@apply ext-mb-0; |
| 49 |
} |
| 50 |
|
| 51 |
.ext .is-not-stacked-on-mobile .wp-block-column { |
| 52 |
/* no suggestion */ |
| 53 |
@apply ext-mb-0; |
| 54 |
} |
| 55 |
|
| 56 |
/* Add base margin bottom to all columns */ |
| 57 |
.wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile) |
| 58 |
> .wp-block-column:not(:last-child) { |
| 59 |
/* no suggestion */ |
| 60 |
@apply ext-mb-base; |
| 61 |
} |
| 62 |
|
| 63 |
@screen tablet { |
| 64 |
.wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile) |
| 65 |
> .wp-block-column:not(:last-child) { |
| 66 |
/* no suggestion */ |
| 67 |
@apply ext-mb-0; |
| 68 |
} |
| 69 |
} |
| 70 |
|
| 71 |
/* Remove margin bottom from "not-stacked" columns */ |
| 72 |
.wp-block-columns[class*="fullwidth-cols"].is-not-stacked-on-mobile |
| 73 |
> .wp-block-column { |
| 74 |
/* no suggestion */ |
| 75 |
@apply ext-mb-0 !important; |
| 76 |
} |
| 77 |
|
| 78 |
@media (min-width: 600px) and (max-width: 781px) { |
| 79 |
.wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile) |
| 80 |
> .wp-block-column:nth-child(even) { |
| 81 |
/* no suggestion */ |
| 82 |
margin-left: var(--wp--style--block-gap, 2em); |
| 83 |
} |
| 84 |
} |
| 85 |
|
| 86 |
/* |
| 87 |
The `tablet:fullwidth-cols` and `desktop:fullwidth-cols` utilities are used |
| 88 |
to counter the core/columns responsive for at our breakpoints. |
| 89 |
*/ |
| 90 |
@media (max-width: 781px) { |
| 91 |
.tablet\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) { |
| 92 |
@apply ext-flex-wrap; |
| 93 |
} |
| 94 |
|
| 95 |
.tablet\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) |
| 96 |
> .wp-block-column { |
| 97 |
@apply ext-ml-0 !important; |
| 98 |
flex-basis: 100% !important; /* Required to negate core/columns flex-basis */ |
| 99 |
} |
| 100 |
} |
| 101 |
|
| 102 |
@media (max-width: 1079px) { |
| 103 |
.desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) { |
| 104 |
@apply ext-flex-wrap; |
| 105 |
} |
| 106 |
|
| 107 |
.desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) |
| 108 |
> .wp-block-column { |
| 109 |
@apply ext-ml-0 !important; |
| 110 |
flex-basis: 100% !important; /* Required to negate core/columns flex-basis */ |
| 111 |
} |
| 112 |
|
| 113 |
.desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) |
| 114 |
> .wp-block-column:not(:last-child) { |
| 115 |
@apply ext-mb-base !important; |
| 116 |
} |
| 117 |
} |
| 118 |
|
