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

fixed background size cover

This commit is contained in:
Fedor Katurov 2020-03-16 16:19:03 +07:00
parent a76ee66f51
commit da47da9d6a
9 changed files with 19 additions and 14 deletions

View file

@ -3,7 +3,8 @@
height: $comment_height; height: $comment_height;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background: 50% 50% no-repeat/cover; background: 50% 50% no-repeat;
background-size: cover;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;

View file

@ -4,7 +4,8 @@
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background: 50% 50% no-repeat/cover; background: 50% 50% no-repeat;
background-size: cover;
opacity: 0; opacity: 0;
transition: opacity 1s; transition: opacity 1s;

View file

@ -2,7 +2,8 @@
padding-top: 56.25%; padding-top: 56.25%;
position: relative; position: relative;
border-radius: $radius; border-radius: $radius;
background: 50% 50% no-repeat/cover; background: 50% 50% no-repeat;
background-size: cover;
// background: darken($color: $content_bg, $amount: 2%); // background: darken($color: $content_bg, $amount: 2%);
} }

View file

@ -8,7 +8,8 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
color: white; color: white;
background: 50% 50% no-repeat/cover $content_bg; background: 50% 50% no-repeat $content_bg;
background-size: cover;
.is_hero { .is_hero {
.title { .title {

View file

@ -26,7 +26,8 @@
.thumb { .thumb {
height: 48px; height: 48px;
margin-right: $gap; margin-right: $gap;
background: 50% 50% no-repeat/cover; background: 50% 50% no-repeat;
background-size: cover;
border-radius: $radius; border-radius: $radius;
flex: 0 0 48px; flex: 0 0 48px;
display: flex; display: flex;

View file

@ -55,7 +55,8 @@ $outgoing_color: $comment_bg;
flex: 0 0 40px; flex: 0 0 40px;
border-radius: $radius; border-radius: $radius;
background: 50% 50% no-repeat/cover; background: 50% 50% no-repeat;
background-size: cover;
// display: none; // display: none;
} }

View file

@ -18,7 +18,8 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
box-sizing: border-box; box-sizing: border-box;
background: url('~/sprites/lost.svg') 50% 50% no-repeat/cover; background: url('~/sprites/lost.svg') 50% 50% no-repeat;
background-size: cover;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;

View file

@ -4,7 +4,8 @@
border-radius: $radius; border-radius: $radius;
width: 100px; width: 100px;
height: 100px; height: 100px;
background: $content_bg 50% 50% no-repeat/cover; background: $content_bg 50% 50% no-repeat;
background-size: cover;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: $gap; left: $gap;
@ -40,11 +41,7 @@
justify-content: flex-end; justify-content: flex-end;
padding: $gap / 2; padding: $gap / 2;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient( background: linear-gradient(330deg, $content_bg, transparentize($content_bg, 1));
330deg,
$content_bg,
transparentize($content_bg, 1)
);
border-radius: $radius; border-radius: $radius;
svg { svg {

View file

@ -13,7 +13,8 @@
border-radius: $radius; border-radius: $radius;
width: 100px; width: 100px;
height: 100px; height: 100px;
background: $content_bg 50% 50% no-repeat/cover; background: $content_bg 50% 50% no-repeat;
background-size: cover;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: $gap; left: $gap;