LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix notification mobile style

Browse source
This commit is contained in:
Sean Yesmunt 2020-09-18 00:23:42 -04:00
parent 2c1d97f759
commit 7a13a53bdd
1 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ui/scss/component/_notification.scss
View file

@ -15,7 +15,15 @@
.notification__icon { .notification__icon {
.icon__wrapper { .icon__wrapper {
width: 1rem;
height: 1rem;
padding: 1rem;
border-radius: var(--border-radius);
margin-right: var(--spacing-m); margin-right: var(--spacing-m);
@media (min-width: $breakpoint-small) {
padding: 1.5rem;
}
} }
} }
@ -48,13 +56,14 @@
} }
.notification__content { .notification__content {
display: flex;
flex: 1; flex: 1;
justify-content: space-between; display: flex;
align-items: center; flex-direction: column;
@media (max-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
align-items: flex-start; flex-direction: row;
justify-content: space-between;
align-items: center;
} }
} }
@ -62,6 +71,10 @@
font-size: var(--font-small); font-size: var(--font-small);
color: var(--color-text); color: var(--color-text);
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
margin-bottom: 0; margin-bottom: 0;
@ -79,8 +92,13 @@
.notification__time { .notification__time {
font-size: var(--font-small); font-size: var(--font-small);
color: var(--color-text-help); color: var(--color-text-help);
margin-left: var(--spacing-s);
flex-shrink: 0; flex-shrink: 0;
margin-top: var(--spacing-s);
@media (min-width: $breakpoint-small) {
margin-left: var(--spacing-s);
margin-top: 0;
}
} }
.notification__bubble { .notification__bubble {