| Current Path : /home/smartbloks/.trash/extendify/utility-framework/classes/ |
| Current File : /home/smartbloks/.trash/extendify/utility-framework/classes/columns.css |
/*
The .ext utility is a top-level class that we use to target contents within our patterns.
We use it here to ensure columns blocks display well across themes.
*/
.wp-block-columns[class*="fullwidth-cols"] {
/* no suggestion */
margin-bottom: unset;
}
.wp-block-column.editor\:pointer-events-none {
/* no suggestion */
@apply ext-my-0 !important;
}
/* Some popular themes use padding instead of core margin for columns; remove it */
.ext .wp-block-columns .wp-block-column[style*="padding"] {
/* no suggestion */
@apply ext-px-0 !important;
}
/* Some popular themes add double spacing between columns; remove it */
.ext
.wp-block-columns
+ .wp-block-columns:not([class*="mt-"]):not([class*="my-"]) {
/* no suggestion */
@apply ext-mt-0 !important;
}
[class*="fullwidth-cols"] .wp-block-column:first-child,
[class*="fullwidth-cols"] .wp-block-group:first-child {
/* no suggestion */
@apply ext-mt-0;
}
[class*="fullwidth-cols"] .wp-block-column:last-child,
[class*="fullwidth-cols"] .wp-block-group:last-child {
/* no suggestion */
@apply ext-mb-0;
}
[class*="fullwidth-cols"] .wp-block-column:first-child > * {
/* no suggestion */
@apply ext-mt-0;
}
[class*="fullwidth-cols"] .wp-block-column > *:first-child {
/* no suggestion */
@apply ext-mt-0;
}
[class*="fullwidth-cols"] .wp-block-column > *:last-child {
/* no suggestion */
@apply ext-mb-0;
}
.ext .is-not-stacked-on-mobile .wp-block-column {
/* no suggestion */
@apply ext-mb-0;
}
/* Add base margin bottom to all columns */
.wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile)
> .wp-block-column:not(:last-child) {
/* no suggestion */
@apply ext-mb-base;
}
@screen tablet {
.wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile)
> .wp-block-column:not(:last-child) {
/* no suggestion */
@apply ext-mb-0;
}
}
/* Remove margin bottom from "not-stacked" columns */
.wp-block-columns[class*="fullwidth-cols"].is-not-stacked-on-mobile
> .wp-block-column {
/* no suggestion */
@apply ext-mb-0 !important;
}
@media (min-width: 600px) and (max-width: 781px) {
.wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile)
> .wp-block-column:nth-child(even) {
/* no suggestion */
margin-left: var(--wp--style--block-gap, 2em);
}
}
/*
The `tablet:fullwidth-cols` and `desktop:fullwidth-cols` utilities are used
to counter the core/columns responsive for at our breakpoints.
*/
@media (max-width: 781px) {
.tablet\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) {
@apply ext-flex-wrap;
}
.tablet\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile)
> .wp-block-column {
@apply ext-ml-0 !important;
flex-basis: 100% !important; /* Required to negate core/columns flex-basis */
}
}
@media (max-width: 1079px) {
.desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) {
@apply ext-flex-wrap;
}
.desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile)
> .wp-block-column {
@apply ext-ml-0 !important;
flex-basis: 100% !important; /* Required to negate core/columns flex-basis */
}
.desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile)
> .wp-block-column:not(:last-child) {
@apply ext-mb-base !important;
}
}