123 lines
2.0 KiB
CSS
123 lines
2.0 KiB
CSS
.split-view {
|
|
width: 100%;
|
|
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
grid-column: screen !important;
|
|
|
|
.split-view__half {
|
|
flex-basis: 50%;
|
|
container-type: inline-size;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:nth-child(1) {
|
|
grid-column: left-half;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
grid-column: right-half;
|
|
}
|
|
}
|
|
|
|
&.split-view--without-column-gap {
|
|
.split-view__half {
|
|
&:nth-child(1) {
|
|
grid-column-end: center;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
grid-column-start: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.split-view--bleed--bleed {
|
|
grid-column: bleed;
|
|
|
|
.split-view__half {
|
|
&:nth-child(1) {
|
|
grid-column-start: bleed-start;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
grid-column-end: bleed-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.split-view--bleed-left--screen {
|
|
.split-view__half {
|
|
&:nth-child(1) {
|
|
grid-column-start: screen-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.split-view--bleed-right--screen {
|
|
.split-view__half {
|
|
&:nth-child(2) {
|
|
grid-column-end: screen-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.split-view--bleed-left--bleed {
|
|
.split-view__half {
|
|
&:nth-child(1) {
|
|
grid-column-start: bleed-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.split-view--bleed-right--bleed {
|
|
.split-view__half {
|
|
&:nth-child(2) {
|
|
grid-column-end: bleed-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
@container (max-width: 640px) {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
row-gap: var(--row-gap);
|
|
|
|
.split-view__half:nth-child(1),
|
|
.split-view__half:nth-child(2) {
|
|
grid-column: content !important;
|
|
}
|
|
|
|
&.split-view--bleed-right--bleed {
|
|
.split-view__half:nth-child(2) {
|
|
grid-column: bleed !important;
|
|
}
|
|
}
|
|
|
|
&.split-view--bleed-left--bleed {
|
|
.split-view__half:nth-child(1) {
|
|
grid-column: bleed !important;
|
|
}
|
|
}
|
|
|
|
&.split-view--bleed-right--screen {
|
|
.split-view__half:nth-child(2) {
|
|
grid-column: screen !important;
|
|
}
|
|
}
|
|
|
|
&.split-view--bleed-left--screen {
|
|
.split-view__half:nth-child(1) {
|
|
grid-column: screen !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.split-view--without-row-gap {
|
|
row-gap: 0;
|
|
}
|
|
}
|