48 lines
1.6 KiB
CSS
48 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);}
|