rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: focus mode & dynamic panels on small screens (#1246)

Browse Source
This commit is contained in:
Aman Harwara
2022-07-11 19:21:03 +05:30
committed by GitHub
parent b025e394c1
commit 9d230d4b81
3 changed files with 70 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
packages/web/src/stylesheets/_focused.scss
View File

@@ -1,58 +1,60 @@
.focus-mode {
.mac-desktop #editor-column {
// To offset colored circles in Mac
padding-top: 35px;
}
@media screen and (min-width: 768px) {
.focus-mode {
.mac-desktop #editor-column {
// To offset colored circles in Mac
padding-top: 35px;
}
.mac-desktop #editor-column:before {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
height: 38px;
-webkit-app-region: drag;
}
.mac-desktop #editor-column:before {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
height: 38px;
-webkit-app-region: drag;
}
#editor-title-bar {
display: none;
}
#editor-title-bar {
display: none;
}
#editor-menu-bar {
display: none;
}
#editor-menu-bar {
display: none;
}
#editor-pane-component-stack {
display: none;
}
#editor-pane-component-stack {
display: none;
}
#footer-bar {
opacity: 0.08;
transition: opacity 0.25s;
}
#footer-bar {
opacity: 0.08;
transition: opacity 0.25s;
}
#footer-bar:hover {
opacity: 1;
}
#footer-bar:hover {
opacity: 1;
}
#navigation,
#items-column {
will-change: opacity;
animation: fade-out 1.25s forwards;
transition: width 1.25s;
transition-delay: 0s;
width: 0px !important;
flex: none !important;
}
#navigation,
#items-column {
will-change: opacity;
animation: fade-out 1.25s forwards;
transition: width 1.25s;
transition-delay: 0s;
width: 0px !important;
flex: none !important;
}
#navigation:hover {
flex: initial;
width: 0px !important;
}
#navigation:hover {
flex: initial;
width: 0px !important;
}
#items-column:hover {
flex: initial;
width: 0px !important;
#items-column:hover {
flex: initial;
width: 0px !important;
}
}
}