hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adjust drawer width in small screen

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-26 16:16:58 +05:30
parent d02e8dcd4e
commit d46b046f2d
3 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/molecules/message/Message.scss
View file

@ -95,6 +95,9 @@
.message__reactions { .message__reactions {
max-width: calc(100% - 88px); max-width: calc(100% - 88px);
min-width: 0; min-width: 0;
@media (max-width: 1124px) {
max-width: 100%;
}
} }

2
src/app/molecules/popup-window/PopupWindow.scss
View file

@ -7,8 +7,6 @@
} }
.pw { .pw {
--popup-window-drawer-width: 280px;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--bg-surface); background-color: var(--bg-surface);

11
src/index.scss
View file

@ -173,8 +173,14 @@
--navigation-drawer-width: calc(280px + var(--border-width)); --navigation-drawer-width: calc(280px + var(--border-width));
--navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width)); --navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width));
--people-drawer-width: calc(268px - var(--border-width)); --people-drawer-width: calc(268px - var(--border-width));
// large size nav drawer & people drawer width => 326px, 312px
// medium size nav drawer & people drawer width => 280, 268 --popup-window-drawer-width: 280px;
@media (max-width: 1124px) {
--navigation-drawer-width: calc(240px + var(--border-width));
--people-drawer-width: calc(256px - var(--border-width));
--popup-window-drawer-width: 240px;
}
/* transition curves */ /* transition curves */
--fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97); --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
@ -185,6 +191,7 @@
--font-secondary: 'Roboto', sans-serif; --font-secondary: 'Roboto', sans-serif;
} }
.silver-theme { .silver-theme {
/* background color | --bg-[background type]: value */ /* background color | --bg-[background type]: value */
--bg-surface: hsl(0, 0%, 95%); --bg-surface: hsl(0, 0%, 95%);