mirror of
https://github.com/lensapp/lens.git
synced 2024-09-20 22:07:31 +03:00
Styling catalog sidebar (#2496)
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
parent
99a464c61d
commit
ec28d884ae
@ -1,15 +1,48 @@
|
|||||||
.CatalogPage {
|
.CatalogPage {
|
||||||
--width: 100%;
|
--width: 100%;
|
||||||
--height: 100%;
|
--height: 100%;
|
||||||
--nav-column-width: 230px;
|
--nav-column-width: 200px;
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
.sidebarRegion {
|
.sidebarRegion {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
background-color: var(--sidebarBackground);
|
||||||
|
|
||||||
|
.sidebarHeader {
|
||||||
|
background: var(--sidebarLogoBackground);
|
||||||
|
height: var(--main-layout-header);
|
||||||
|
padding: 4px;
|
||||||
|
color: var(--textColorAccent);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .sidebar {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.sidebarTabs {
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
|
.Tab {
|
||||||
|
padding: 7px 10px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 36px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: var(--blue);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.contentRegion {
|
.contentRegion {
|
||||||
.content {
|
> .content {
|
||||||
padding: 20px 20px;
|
padding: 20px 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -114,10 +114,12 @@ export class Catalog extends React.Component {
|
|||||||
renderNavigation() {
|
renderNavigation() {
|
||||||
return (
|
return (
|
||||||
<Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
|
<Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
|
||||||
<div className="header">Catalog</div>
|
<div className="sidebarHeader">Catalog</div>
|
||||||
{ this.categories.map((category, index) => {
|
<div className="sidebarTabs">
|
||||||
return <Tab value={category.getId()} key={index} label={category.metadata.name} data-testid={`${category.getId()}-tab`} />;
|
{ this.categories.map((category, index) => {
|
||||||
})}
|
return <Tab value={category.getId()} key={index} label={category.metadata.name} data-testid={`${category.getId()}-tab`} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user