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

Using tailwind inline to style close button

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-12-27 13:48:40 +03:00
parent f1cbe3a4d8
commit 5062df1780
2 changed files with 13 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/renderer/components/layout/setting-layout.scss
View File

@ -138,41 +138,7 @@
}
> .toolsRegion {
.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(--textColorTertiary);
}
}
.esc {
text-align: center;
margin-top: 4px;
font-weight: 600;
font-size: 14px;
color: var(--textColorDimmed);
pointer-events: none;
}
}
width: 45px;
}
}

16
src/renderer/components/layout/setting-layout.tsx
View File

@ -104,11 +104,19 @@ export class SettingLayout extends React.Component<SettingLayoutProps> {
<div className="toolsRegion">
{
this.props.provideBackButtonNavigation && (
<div className="fixedTools">
<div className="closeBtn" role="button" aria-label="Close" onClick={back}>
<Icon material="close" />
<div className="fixed top-[60px]">
<div
className="w-[35px] h-[35px] grid place-items-center pointer border-2 rounded-full border-solid border-textDimmed hover:bg-[#72767d25] active:translate-y-px"
role="button"
aria-label="Close"
onClick={back}
>
<Icon material="close" className="text-textAccent opacity-60" />
</div>
<div className="esc" aria-hidden="true">
<div
className="text-center mt-3 font-bold text-lg select-none text-textDimmed pointer-events-none"
aria-hidden="true"
>
ESC
</div>
</div>