mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Add esc button
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
parent
f18b594df7
commit
5c94e2ece5
@ -220,11 +220,6 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Margins
|
|
||||||
.marginTop40 {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// app's common loading indicator, displaying on the route transitions
|
// app's common loading indicator, displaying on the route transitions
|
||||||
#loading {
|
#loading {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -90,16 +90,50 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> .contentRegion {
|
> .contentRegion {
|
||||||
|
display: flex;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
> .content {
|
> .content {
|
||||||
width: var(--width);
|
width: var(--width);
|
||||||
padding: 60px 40px 80px;
|
padding: 60px 40px 80px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
> .toolsRegion {
|
||||||
line-height: 140%;
|
.fixedTools {
|
||||||
|
position: fixed;
|
||||||
|
top: 60px;
|
||||||
|
|
||||||
|
.closeBtn {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border: 2px solid var(--textColorDimmed);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #72767d4d;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Icon {
|
||||||
|
color: var(--textColorSecondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.esc {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--textColorDimmed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import React from "react";
|
|||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import { autobind, cssNames, IClassName } from "../../utils";
|
import { autobind, cssNames, IClassName } from "../../utils";
|
||||||
import { navigation } from "../../navigation";
|
import { navigation } from "../../navigation";
|
||||||
|
import { Icon } from "../icon";
|
||||||
|
|
||||||
export interface PageLayoutProps extends React.DOMAttributes<any> {
|
export interface PageLayoutProps extends React.DOMAttributes<any> {
|
||||||
className?: IClassName;
|
className?: IClassName;
|
||||||
@ -74,6 +75,16 @@ export class PageLayout extends React.Component<PageLayoutProps> {
|
|||||||
<div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
|
<div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="toolsRegion">
|
||||||
|
<div className="fixedTools">
|
||||||
|
<div className="closeBtn" role="button" aria-label="Close">
|
||||||
|
<Icon material="close"/>
|
||||||
|
</div>
|
||||||
|
<div className="esc" aria-hidden="true">
|
||||||
|
ESC
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user