mirror of
https://github.com/lensapp/lens.git
synced 2024-09-20 13:57:23 +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 {
|
||||
--width: 100%;
|
||||
--height: 100%;
|
||||
--nav-column-width: 230px;
|
||||
text-align: left;
|
||||
--nav-column-width: 200px;
|
||||
|
||||
.sidebarRegion {
|
||||
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 {
|
||||
.content {
|
||||
> .content {
|
||||
padding: 20px 20px;
|
||||
}
|
||||
}
|
||||
|
@ -114,10 +114,12 @@ export class Catalog extends React.Component {
|
||||
renderNavigation() {
|
||||
return (
|
||||
<Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
|
||||
<div className="header">Catalog</div>
|
||||
{ this.categories.map((category, index) => {
|
||||
return <Tab value={category.getId()} key={index} label={category.metadata.name} data-testid={`${category.getId()}-tab`} />;
|
||||
})}
|
||||
<div className="sidebarHeader">Catalog</div>
|
||||
<div className="sidebarTabs">
|
||||
{ this.categories.map((category, index) => {
|
||||
return <Tab value={category.getId()} key={index} label={category.metadata.name} data-testid={`${category.getId()}-tab`} />;
|
||||
})}
|
||||
</div>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user