hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Adding head-col to WizardLayout

Browse Source 
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront 2020-08-04 15:45:38 +03:00
parent a3c5d58b11
commit eca727bef6
2 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/components/layout/wizard-layout.scss
View File

@ -13,6 +13,12 @@
padding: $spacing;
}
> .head-col {
position: sticky;
background-color: var(--clusters-menu-bgc);
border-bottom: 1px solid $grey-800;
}
> .content-col {
margin-right: $spacing;
background-color: var(--clusters-menu-bgc);
@ -29,6 +35,10 @@
border-left: 1px solid #353a3e;
}
p {
line-height: 140%;
}
a {
color: $colorInfo;
}

7
src/renderer/components/layout/wizard-layout.tsx
View File

@ -5,6 +5,8 @@ import { cssNames, IClassName } from "../../utils";
interface Props {
className?: IClassName;
header?: React.ReactNode;
headerClass?: IClassName;
contentClass?: IClassName;
infoPanelClass?: IClassName;
infoPanel?: React.ReactNode;
@ -13,9 +15,12 @@ interface Props {
@observer
export class WizardLayout extends React.Component<Props> {
render() {
const { className, contentClass, infoPanelClass, infoPanel, children: content } = this.props;
const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, children: content } = this.props;
return (
<div className={cssNames("WizardLayout", className)}>
<div className={cssNames("head-col flex gaps align-center", headerClass)}>
{header}
</div>
<div className={cssNames("content-col flex column gaps", contentClass)}>
{content}
</div>