fix mobile badge in timeline
This commit is contained in:
parent
ef2c8f077d
commit
9a24d21bbd
22
src/App.scss
22
src/App.scss
|
@ -620,22 +620,38 @@ option {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
&.-dot,
|
||||||
|
&.-counter {
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
&.-dot {
|
&.-dot {
|
||||||
border-radius: 100%;
|
|
||||||
min-height: 8px;
|
min-height: 8px;
|
||||||
max-height: 8px;
|
max-height: 8px;
|
||||||
min-width: 8px;
|
min-width: 8px;
|
||||||
max-width: 8px;
|
max-width: 8px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
margin: 0;
|
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: absolute;
|
|
||||||
left: calc(50% - 4px);
|
left: calc(50% - 4px);
|
||||||
top: calc(50% - 4px);
|
top: calc(50% - 4px);
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
margin-top: -6px;
|
margin-top: -6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.-counter {
|
||||||
|
border-radius: var(--roundness);
|
||||||
|
font-size: 0.75em;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: right;
|
||||||
|
padding: 0.2em;
|
||||||
|
min-width: 0;
|
||||||
|
left: calc(50% - 0.5em);
|
||||||
|
top: calc(50% - 0.4em);
|
||||||
|
margin-left: 0.7em;
|
||||||
|
margin-top: -1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@import "../../variables";
|
|
||||||
|
|
||||||
// TODO Copypaste from Status, should unify it somehow
|
// TODO Copypaste from Status, should unify it somehow
|
||||||
.Notification {
|
.Notification {
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
|
@ -70,28 +68,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--repeat .type-icon {
|
&.-type--repeat .type-icon {
|
||||||
color: $fallback--cGreen;
|
color: var(--cGreen);
|
||||||
color: var(--cGreen, $fallback--cGreen);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--follow .type-icon {
|
&.-type--follow .type-icon {
|
||||||
color: $fallback--cBlue;
|
color: var(--cBlue);
|
||||||
color: var(--cBlue, $fallback--cBlue);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--follow-request .type-icon {
|
&.-type--follow-request .type-icon {
|
||||||
color: $fallback--cBlue;
|
color: var(--cBlue);
|
||||||
color: var(--cBlue, $fallback--cBlue);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--like .type-icon {
|
&.-type--like .type-icon {
|
||||||
color: orange;
|
color: var(--cOrange);
|
||||||
color: $fallback--cOrange;
|
|
||||||
color: var(--cOrange, $fallback--cOrange);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--move .type-icon {
|
&.-type--move .type-icon {
|
||||||
color: $fallback--cBlue;
|
color: var(--cBlue);
|
||||||
color: var(--cBlue, $fallback--cBlue);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
fixed-width
|
fixed-width
|
||||||
icon="circle-plus"
|
icon="circle-plus"
|
||||||
/>
|
/>
|
||||||
<div class="alert-badge">
|
<div class="badge -counter">
|
||||||
{{ mobileLoadButtonString }}
|
{{ mobileLoadButtonString }}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Reference in New Issue