@bedrock-layout/css
Version:
bedrock-layout css version
134 lines (122 loc) • 2.69 kB
CSS
/*
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;
}