UNPKG

@bedrock-layout/css

Version:
134 lines (122 loc) 2.69 kB
/* center.css */ [data-bedrock-center] { --maxWidth: initial; --max-width: var(--maxWidth, initial); box-sizing: content-box; max-inline-size: var(--max-width, 100%); } [data-bedrock-center][data-bedrock-center] { margin-inline-start: auto; margin-inline-end: auto; margin-inline: auto; } [data-bedrock-center~="center-children"] { display: flex; flex-direction: column; align-items: center; } [data-bedrock-center~="center-text"] { text-align: center; } [data-bedrock-center~="maxWidth:sizeContent1"] { --max-width: 20ch; } [data-bedrock-center~="maxWidth:sizeContent2"] { --max-width: 45ch; } [data-bedrock-center~="maxWidth:sizeContent3"] { --max-width: 60ch; } [data-bedrock-center~="maxWidth:sizeHeader1"] { --max-width: 20ch; } [data-bedrock-center~="maxWidth:sizeHeader2"] { --max-width: 25ch; } [data-bedrock-center~="maxWidth:sizeHeader3"] { --max-width: 35ch; } [data-bedrock-center~="maxWidth:sizeXxs"] { --max-width: 240px; } [data-bedrock-center~="maxWidth:sizeXs"] { --max-width: 360px; } [data-bedrock-center~="maxWidth:sizeSm"] { --max-width: 480px; } [data-bedrock-center~="maxWidth:sizeMd"] { --max-width: 768px; } [data-bedrock-center~="maxWidth:sizeLg"] { --max-width: 1024px; } [data-bedrock-center~="maxWidth:sizeXl"] { --max-width: 1440px; } [data-bedrock-center~="maxWidth:sizeXxl"] { --max-width: 1920px; } /* center.css */ [data-br-center] { --maxWidth: initial; --max-width: var(--maxWidth, initial); box-sizing: content-box; max-inline-size: var(--max-width, 100%); } [data-br-center][data-br-center] { margin-inline-start: auto; margin-inline-end: auto; margin-inline: auto; } [data-br-center~="center-children"] { display: flex; flex-direction: column; align-items: center; } [data-br-center~="center-text"] { text-align: center; } [data-br-center~="maxWidth:sizeContent1"] { --max-width: 20ch; } [data-br-center~="maxWidth:sizeContent2"] { --max-width: 45ch; } [data-br-center~="maxWidth:sizeContent3"] { --max-width: 60ch; } [data-br-center~="maxWidth:sizeHeader1"] { --max-width: 20ch; } [data-br-center~="maxWidth:sizeHeader2"] { --max-width: 25ch; } [data-br-center~="maxWidth:sizeHeader3"] { --max-width: 35ch; } [data-br-center~="maxWidth:sizeXxs"] { --max-width: 240px; } [data-br-center~="maxWidth:sizeXs"] { --max-width: 360px; } [data-br-center~="maxWidth:sizeSm"] { --max-width: 480px; } [data-br-center~="maxWidth:sizeMd"] { --max-width: 768px; } [data-br-center~="maxWidth:sizeLg"] { --max-width: 1024px; } [data-br-center~="maxWidth:sizeXl"] { --max-width: 1440px; } [data-br-center~="maxWidth:sizeXxl"] { --max-width: 1920px; }