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

fixed can_backdrop usage

Browse source
This commit is contained in:
Fedor Katurov 2021-06-21 17:39:49 +07:00
parent f1d05b1da9
commit dde02dc2e3
6 changed files with 15 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/dialogs/ModalWrapper/styles.module.scss
View file

@ -51,12 +51,8 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: transparentize($color: $content_bg, $amount: 0.1);
cursor: pointer; cursor: pointer;
animation: appear 0.25s forwards; animation: appear 0.25s forwards;
@include can_backdrop { @include blur();
backdrop-filter: blur(15px);
background: transparentize($color: $content_bg, $amount: 0.9);
}
} }

5
src/components/editors/EditorConfirmClose/styles.module.scss
View file

@ -16,15 +16,12 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 21; z-index: 21;
background: transparentize($color: #000000, $amount: 0.9);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
animation: appear 0.25s forwards; animation: appear 0.25s forwards;
@include can_backdrop { @include blur();
backdrop-filter: blur(15px);
}
} }
.title { .title {

8
src/components/main/Header/styles.module.scss
View file

@ -19,13 +19,7 @@
} }
&.is_scrolled { &.is_scrolled {
background: transparentize($content_bg, 0.05); @include blur();
@include can_backdrop {
background: transparentize($content_bg, 0.25);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
} }
} }

6
src/components/node/NodePanelInner/styles.module.scss
View file

@ -59,7 +59,6 @@
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
box-sizing: border-box; box-sizing: border-box;
padding: $gap $gap; padding: $gap $gap;
background: $node_bg;
height: 64px; height: 64px;
min-width: 0; min-width: 0;
@ -69,11 +68,6 @@
border-radius: 0; border-radius: 0;
height: auto; height: auto;
} }
@include can_backdrop {
backdrop-filter: blur(15px);
background: transparentize($node_bg, 0.2);
}
} }
.title { .title {

6
src/components/profile/ProfileAccountsError/styles.module.scss
View file

@ -7,7 +7,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 2; z-index: 2;
background-color: transparentize($red, 0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -16,10 +15,7 @@
box-sizing: border-box; box-sizing: border-box;
border-radius: $radius; border-radius: $radius;
@include can_backdrop { @include blur($red);
background-color: transparentize($red, 0.5);
backdrop-filter: blur(10px);
}
} }
.title { .title {

18
src/styles/variables.scss
View file

@ -160,6 +160,16 @@ $sidebar_border: transparentize(white, 0.95);
} }
} }
@mixin blur($color: $content_bg, $radius: 15px) {
background: transparentize($color, 0.1);
@include can_backdrop {
backdrop-filter: blur($radius);
-webkit-backdrop-filter: blur($radius);
background: transparentize($color, 0.5);
}
}
@mixin title_with_line { @mixin title_with_line {
font: $font_14_semibold; font: $font_14_semibold;
text-transform: uppercase; text-transform: uppercase;
@ -190,13 +200,7 @@ $sidebar_border: transparentize(white, 0.95);
} }
@mixin sidebar { @mixin sidebar {
background: transparentize($content_bg, 0.15); @include blur();
@include can_backdrop {
background: transparentize($content_bg, 0.3);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
} }
@mixin sidebar_content( @mixin sidebar_content(