mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Move SettingsLayout styles to css modules
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
7b0f4a1899
commit
1d8b7e15e0
@ -21,18 +21,15 @@
|
||||
|
||||
.SettingLayout {
|
||||
--nav-column-width: 30vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
color: var(--settingsColor);
|
||||
position: fixed;
|
||||
z-index: 13!important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: unset;
|
||||
left: 0;
|
||||
display: grid;
|
||||
color: var(--settingsColor);
|
||||
background-color: var(--settingsBackground);
|
||||
z-index: 100;
|
||||
|
||||
&.showNavigation {
|
||||
grid-template-columns: var(--nav-column-width) 1fr;
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import "./setting-layout.scss";
|
||||
import styles from "./settings-layout.module.css";
|
||||
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
@ -29,16 +29,13 @@ import { Icon } from "../icon";
|
||||
|
||||
export interface SettingLayoutProps extends React.DOMAttributes<any> {
|
||||
className?: IClassName;
|
||||
contentClass?: IClassName;
|
||||
provideBackButtonNavigation?: boolean;
|
||||
contentGaps?: boolean;
|
||||
navigation?: React.ReactNode;
|
||||
back?: (evt: React.MouseEvent | KeyboardEvent) => void;
|
||||
}
|
||||
|
||||
const defaultProps: Partial<SettingLayoutProps> = {
|
||||
provideBackButtonNavigation: true,
|
||||
contentGaps: true,
|
||||
back: () => navigation.goBack(),
|
||||
};
|
||||
|
||||
@ -76,32 +73,32 @@ export class SettingLayout extends React.Component<SettingLayoutProps> {
|
||||
|
||||
render() {
|
||||
const {
|
||||
contentClass, provideBackButtonNavigation,
|
||||
contentGaps, navigation, children, back, ...elemProps
|
||||
provideBackButtonNavigation,
|
||||
navigation, children, back, ...elemProps
|
||||
} = this.props;
|
||||
const className = cssNames("SettingLayout", { showNavigation: navigation }, this.props.className);
|
||||
const className = cssNames(styles.Settings, { [styles.showNavigation]: navigation }, this.props.className);
|
||||
|
||||
return (
|
||||
<div {...elemProps} className={className}>
|
||||
{ navigation && (
|
||||
<nav className="sidebarRegion">
|
||||
<div className="sidebar">
|
||||
<nav className={styles.sidebarRegion}>
|
||||
<div className={styles.sidebar}>
|
||||
{navigation}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
<div className="contentRegion" id="ScrollSpyRoot">
|
||||
<div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
|
||||
<div className={styles.contentRegion}>
|
||||
<div className={styles.content}>
|
||||
{children}
|
||||
</div>
|
||||
<div className="toolsRegion">
|
||||
<div className={styles.toolsRegion}>
|
||||
{
|
||||
this.props.provideBackButtonNavigation && (
|
||||
<div className="fixedTools">
|
||||
<div className="closeBtn" role="button" aria-label="Close" onClick={back}>
|
||||
<div className={styles.tools}>
|
||||
<div className={styles.closeBtn} role="button" aria-label="Close" onClick={back}>
|
||||
<Icon material="close" />
|
||||
</div>
|
||||
<div className="esc" aria-hidden="true">
|
||||
<div className={styles.esc} aria-hidden="true">
|
||||
ESC
|
||||
</div>
|
||||
</div>
|
||||
|
||||
147
src/renderer/components/layout/settings-layout.module.css
Normal file
147
src/renderer/components/layout/settings-layout.module.css
Normal file
@ -0,0 +1,147 @@
|
||||
/**
|
||||
* Copyright (c) 2021 OpenLens Authors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
* the Software without restriction, including without limitation the rights to
|
||||
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
* the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
* subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
.Settings {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
background-color: var(--settingsBackground);
|
||||
z-index: 100;
|
||||
|
||||
&.showNavigation {
|
||||
grid-template-columns: 30vw 1fr;
|
||||
|
||||
.contentRegion {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: var(--textColorAccent);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--colorInfo);
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border-top: thin solid var(--hrColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarRegion {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
overflow-y: auto;
|
||||
background-color: var(--secondaryBackground);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 218px;
|
||||
padding: 60px 0 60px 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 15px;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--textColorAccent);
|
||||
font-weight: 600;
|
||||
padding-right: 20px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
height: 1px;
|
||||
border-top: thin solid var(--hrColor);
|
||||
|
||||
&:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentRegion {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 740px;
|
||||
min-width: 460px;
|
||||
padding: 60px 40px 0;
|
||||
height: max-content;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.toolsRegion {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.tools {
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user