muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

using backdrop filter for faster rendering

Browse source
This commit is contained in:
Fedor Katurov 2019-11-25 17:45:56 +07:00
parent e227c9660e
commit a42a0adf4a
7 changed files with 126 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/styles/variables.scss
View file

@ -1,4 +1,4 @@
@import "colors";
@import 'colors';
$cell: 280px;
$gap: 10px;
@ -31,9 +31,9 @@ $extra_light: 200;
$upload_button_height: 52px;
$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
$font_48_semibold: $semibold 48px $font;
$font_48_bold: $bold 48px $font;
@ -61,14 +61,11 @@ $font_8_semibold: $semibold 8px $font;
$font_cell_title: $bold 30px $font;
$font_hero_title: $bold 40px $font;
$shadow_depth_1: transparentize(black, 0.8) 0 1px,
inset transparentize(white, 0.98) 0 1px;
$shadow_depth_2: transparentize(black, 0.8) 0 2px,
inset transparentize(white, 0.98) 0 1px;
$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;
$comment_shadow: $shadow_depth_2;
$node_shadow: transparentize(black, 0.8) 0 2px,
transparentize(black, 0.8) 0 2px 4px;
$node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px 4px;
$tag_height: 26px;
@ -77,18 +74,15 @@ $input_shadow_error: inset $red 0 0 0 1px;
$input_shadow_filled: $input_shadow;
@mixin outer_shadow() {
box-shadow: inset transparentize(white, 0.95) 0 1px,
transparentize(black, 0.8) -1px -1px;
box-shadow: inset transparentize(white, 0.95) 0 1px, transparentize(black, 0.8) -1px -1px;
}
@mixin inner_shadow() {
box-shadow: inset transparentize(white, 0.95) 0 -1px,
inset transparentize(black, 0.5) 0 1px;
box-shadow: inset transparentize(white, 0.95) 0 -1px, inset transparentize(black, 0.5) 0 1px;
}
@mixin input_shadow() {
box-shadow: inset transparentize(white, 0.92) 0 -1px,
inset transparentize(black, 0.8) 0 1px;
box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
}
@mixin modal_mixin() {
@ -104,7 +98,7 @@ $input_shadow_filled: $input_shadow;
position: $position;
&::after {
content: " ";
content: ' ';
position: absolute;
bottom: 0;
left: 0;
@ -150,3 +144,9 @@ $input_shadow_filled: $input_shadow;
}
}
}
@mixin can_backdrop {
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
@content;
}
}