[K7]: Responsive page layout components #13162
Conversation
| display: flex; | ||
| flex-direction: row; | ||
| align-items: stretch; | ||
| min-height: 400px; // Temporary till we have a better doc system. |
There was a problem hiding this comment.
This is a non-destructive hack I have I needed so that I can show off the centering in the documentation layer. Once the doc tools allow me to view these on their own, a lot of heights will likely turn to 100%.
When that happens, if we decide to fix the header, we'll lightly adjust .kuiPage to compensate.
|
@cjcenizal I didn't end up putting everything in folders. Mostly because the files are so minimal, it seemed pretty weird to make all that cruft and require more |
snide
added
the
Team:Platform-Design
| &.kuiPageContent--horizontalCenter { | ||
| width: auto; | ||
| margin: auto; | ||
| } |
There was a problem hiding this comment.
Can we unnest these modifiers to avoid the added specificity?
.kuiPageContent {
padding: $kuiSizeL;
background: $kuiColorEmptyShade;
border: $kuiBorderThin;
border-radius: $kuiBorderRadius;
width: 100%;
}
.kuiPageContent--verticalCenter {
align-self: center;
}
.kuiPageContent--horizontalCenter {
width: auto;
margin: auto;
}| @@ -0,0 +1,19 @@ | |||
| .kuiPageContentHeaderSection { | |||
|
|
|||
| & + & { | |||
There was a problem hiding this comment.
❗️ ❗️ ❗️ ❗️ ❗️ ❗️ ❗️ ❗️ ❗️
| ); | ||
| }; | ||
|
|
||
| KuiPageContent.PropTypes = { |
There was a problem hiding this comment.
I'll add additional tests for these after we merge.
Page layout components added to KUI.
Page layout components added to KUI.
Page layout components added to KUI.
Adds components for page layouts.