RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 19:14:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve style for sidedrawers

Browse Source
This commit is contained in:
srgooglo 2022-10-25 14:42:16 +00:00
parent 80bf198908
commit a544d557bb
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/app/src/components/Layout/sidedrawer/index.jsx
View File

@ -9,9 +9,11 @@ export const Sidedrawer = (props) => {
return <div return <div
key={sidedrawerId} key={sidedrawerId}
id={sidedrawerId} id={sidedrawerId}
style={props.style}
className={ className={
classnames("sidedrawer", { classnames("sidedrawer", {
"hided": !props.defaultVisible, "hided": !props.defaultVisible,
"first": props.first
}) })
} }
> >
@ -114,6 +116,10 @@ export default class SidedrawerController extends React.Component {
{ {
key: id, key: id,
id: id, id: id,
first: drawers.length === 0,
style: {
zIndex: 100 - drawers.length,
},
allowMultiples: options.allowMultiples ?? false, allowMultiples: options.allowMultiples ?? false,
...options.props, ...options.props,
close: this.close, close: this.close,

20
packages/app/src/components/Layout/sidedrawer/index.less
View File

@ -3,18 +3,14 @@
.sidedrawers-wrapper { .sidedrawers-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
> div {
transform: translate(-50px, 0);
}
.sidedrawer { .sidedrawer {
position: relative; position: relative;
width: 30vw; // by default width: auto; // by default
height: 100vh; height: 100vh;
min-width: 700px; min-width: 400px;
z-index: 20; z-index: 20;
@ -22,9 +18,9 @@
border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0; border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0;
padding: 20px; padding: 20px;
padding-left: 70px; padding-left: 30px;
transform: translate(-50px, 0); transform: translate(-20px, 0);
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;
@ -33,7 +29,11 @@
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
// create shadow on the right side // create shadow on the right side
box-shadow : 0 0 5px 4px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.1) !important;
&.first {
transform: translate(-10px, 0);
}
&.hided { &.hided {
width: 0; width: 0;