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

Add media queries

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-04-01 12:20:41 +03:00
parent 5c94e2ece5
commit 2755f13887
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/components/+preferences/preferences.tsx
View File

@ -66,6 +66,11 @@ export class Preferences extends React.Component {
label="Application" label="Application"
active={this.activeTab == PreferencesTab.Application} active={this.activeTab == PreferencesTab.Application}
/> />
<Tab
value={PreferencesTab.Proxy}
label="Proxy"
active={this.activeTab == PreferencesTab.Proxy}
/>
<Tab <Tab
value={PreferencesTab.Kubernetes} value={PreferencesTab.Kubernetes}
label="Kubernetes" label="Kubernetes"

12
src/renderer/components/layout/page-layout.scss
View File

@ -1,8 +1,7 @@
.PageLayout { .PageLayout {
--width: 60%; --width: 75%;
--nav-width: 180px; --nav-width: 180px;
--nav-column-width: 30vw; --nav-column-width: 30vw;
--spacing: calc(var(--unit) * 2);
position: relative; position: relative;
width: 100%; width: 100%;
@ -10,14 +9,17 @@
display: grid !important; display: grid !important;
grid-template-columns: 1fr; grid-template-columns: 1fr;
&.showNavigation { @include media("<1000px") {
--width: 75%; --width: 85%;
}
&.showNavigation {
grid-template-columns: var(--nav-column-width) 1fr; grid-template-columns: var(--nav-column-width) 1fr;
> .content-wrapper { > .content-wrapper {
> .content { > .content {
width: 100%; width: 100%;
max-width: 800px;
padding-left: 1px; // Fix visual content crop padding-left: 1px; // Fix visual content crop
padding-right: calc(var(--nav-column-width) - var(--nav-width)); padding-right: calc(var(--nav-column-width) - var(--nav-width));
} }
@ -53,7 +55,6 @@
font-weight: 800; font-weight: 800;
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
color: var(--textColorSecondary);
&:first-child { &:first-child {
padding-top: 0; padding-top: 0;
@ -71,6 +72,7 @@
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
color: var(--textColorSecondary);
&::after { &::after {
content: none; content: none;