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 modal backdrops on safari and placeholders

Browse source
This commit is contained in:
Fedor Katurov 2022-01-27 18:57:33 +07:00
parent 7f57c10f0c
commit 145b601a96
4 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/input/InputWrapper/styles.module.scss
View file

@ -14,7 +14,6 @@
::placeholder { ::placeholder {
font: $input_placeholder_font; font: $input_placeholder_font;
color: $input-grey_color; color: $input-grey_color;
text-transform: uppercase;
} }
&.has_error { &.has_error {

2
src/styles/_inputs.scss
View file

@ -5,7 +5,7 @@ $input_text_color: #bbbbbb;
$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px; $input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
$input_shadow_error: inset $red 0 0 0 1px; $input_shadow_error: inset $red 0 0 0 1px;
$input_shadow_filled: $input_shadow; $input_shadow_filled: $input_shadow;
$input_font: $font_16_semibold; $input_font: $font_16_medium;
$input_placeholder_font: $font_16_medium; $input_placeholder_font: $font_16_medium;
$input_bg_color: darken($content_bg, 2%); $input_bg_color: darken($content_bg, 2%);
$input_grey_color: #444444; $input_grey_color: #444444;

12
src/styles/_mixins.scss
View file

@ -115,12 +115,14 @@
} }
@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) { @mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
background: transparentize($color, $opacity / 2); background: transparentize($color, $opacity / 1.5);
backdrop-filter: blur($radius);
-webkit-backdrop-filter: blur($radius);
@include can_backdrop { @include can_backdrop {
backdrop-filter: blur($radius); backdrop-filter: blur($radius);
-webkit-backdrop-filter: blur($radius); -webkit-backdrop-filter: blur($radius);
background: transparentize($color, $opacity); background-color: transparentize($color, $opacity);
} }
} }
@ -246,9 +248,11 @@
@mixin modal_backdrop { @mixin modal_backdrop {
@include blur(); @include blur();
background: url('../../src/sprites/noise.png'); background: transparentize($content_bg, 0.3) url('../../src/sprites/noise.png');
@include can_backdrop { @include can_backdrop {
background: url('../../src/sprites/noise.png'); @supports (backdrop-filter: blur(5px)) and (background-image: url('../../src/sprites/noise.png')) {
background: transparentize($content_bg, 0.5) url('../../src/sprites/noise.png');
}
} }
} }

2
src/utils/ssr/getPageTitle.ts
View file

@ -1,4 +1,4 @@
/** just combinates title elements to form title of the page */ /** just combines title elements to form title of the page */
export const getPageTitle = (...props: string[]): string => { export const getPageTitle = (...props: string[]): string => {
return ['Убежище', ...props].filter(it => it.trim()).join(' • '); return ['Убежище', ...props].filter(it => it.trim()).join(' • ');
}; };