muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

changed sidebar appearance

Browse source
This commit is contained in:
Fedor Katurov 2020-11-17 15:15:32 +07:00
parent 8450856d45
commit caf4704df5
3 changed files with 19 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/containers/sidebars/SidebarWrapper/styles.module.scss
View file

@ -13,7 +13,6 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(255, 0, 0, 0.3);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
z-index: 26; z-index: 26;
@ -21,11 +20,7 @@
overflow: hidden; overflow: hidden;
animation: appear 0.25s forwards; animation: appear 0.25s forwards;
@include can_backdrop { @include sidebar
background: transparentize($content_bg, 0.15);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
} }
.content { .content {

8
src/containers/sidebars/TagSidebar/styles.module.scss
View file

@ -5,14 +5,12 @@
flex: 0 1 400px; flex: 0 1 400px;
max-width: 100vw; max-width: 100vw;
position: relative; position: relative;
padding: 10px;
@include sidebar_content;
} }
.content { .content {
@include outer_shadow;
border-radius: $radius; border-radius: $radius;
background: $content_bg;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
@ -28,7 +26,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: $gap; padding: $gap;
background: lighten($content_bg, 2%); box-shadow: transparentize(white, 0.95) 0 1px;
} }
.tag { .tag {

15
src/styles/variables.scss
View file

@ -185,3 +185,18 @@ $login_dialog_padding: $gap $gap 30px $gap;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@mixin sidebar {
background: transparentize($content_bg, 0.15);
@include can_backdrop {
background: transparentize($content_bg, 0.3);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
}
@mixin sidebar_content {
background: transparentize($content_bg, 0.4);
box-shadow: transparentize(white, 0.95) -1px 0;
}