68 lines
1.6 KiB
CSS
68 lines
1.6 KiB
CSS
:root {
|
|
--ui-container: var(--breakpoint-2xl);
|
|
}
|
|
|
|
/* Container padding */
|
|
@utility px-container {
|
|
@apply px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
/* Container sizes */
|
|
@utility container {
|
|
@apply mx-auto px-container max-w-(--breakpoint-2xl);
|
|
}
|
|
@utility container-xl {
|
|
@apply container max-w-(--breakpoint-xl);
|
|
}
|
|
@utility container-lg {
|
|
@apply container max-w-(--breakpoint-lg);
|
|
}
|
|
@utility container-md {
|
|
@apply container max-w-(--breakpoint-md);
|
|
}
|
|
@utility container-sm {
|
|
@apply container max-w-(--breakpoint-sm);
|
|
}
|
|
@utility container-fluid {
|
|
@apply container max-w-screen;
|
|
}
|
|
@utility container-none {
|
|
@apply w-full max-w-screen;
|
|
}
|
|
|
|
/* Split containers */
|
|
:root {
|
|
--container-outside-margin: 0;
|
|
--container-width: 100vw;
|
|
@variant sm {
|
|
--container-outside-margin: calc(50vw - theme("screens.sm") / 2);
|
|
--container-width: theme("screens.sm");
|
|
}
|
|
@variant md {
|
|
--container-outside-margin: calc(50vw - theme("screens.md") / 2);
|
|
--container-width: theme("screens.md");
|
|
}
|
|
@variant lg {
|
|
--container-outside-margin: calc(50vw - theme("screens.lg") / 2);
|
|
--container-width: theme("screens.lg");
|
|
}
|
|
@variant xl {
|
|
--container-outside-margin: calc(50vw - theme("screens.xl") / 2);
|
|
--container-width: theme("screens.xl");
|
|
}
|
|
@variant 2xl {
|
|
--container-outside-margin: calc(50vw - theme("screens.2xl") / 2);
|
|
--container-width: theme("screens.2xl");
|
|
}
|
|
}
|
|
|
|
@utility container-left {
|
|
@apply ml-(--container-outside-margin) px-container;
|
|
}
|
|
@utility container-right {
|
|
@apply mr-(--container-outside-margin) px-container;
|
|
}
|
|
@utility container-half {
|
|
width: calc(var(--container-width) / 2);
|
|
}
|