UX: Adjust styling of Back button in topic progress (#30769)

Before: 
<img width="300" alt="image"
src="https://github.com/user-attachments/assets/66c07c49-9603-4eb4-84d5-db3821a7af1a"
/>

After: 
<img width="300" alt="image"
src="https://github.com/user-attachments/assets/ba90d74a-4f63-41ae-9dd7-f5999a2d21ef"
/>
This commit is contained in:
Penar Musaraj
2025-01-15 01:41:00 -05:00
committed by GitHub
parent d144826fa7
commit d16a8a5ea9
3 changed files with 3 additions and 8 deletions

View File

@ -8,7 +8,7 @@
@label="topic.timeline.back" @label="topic.timeline.back"
@action={{this.goBack}} @action={{this.goBack}}
@icon="arrow-down" @icon="arrow-down"
class="btn-primary progress-back" class="btn-primary btn-small progress-back"
/> />
</div> </div>
{{/if}} {{/if}}

View File

@ -110,15 +110,14 @@
.progress-back-container { .progress-back-container {
z-index: z("dropdown"); z-index: z("dropdown");
margin-right: 0;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-name: button-jump-up; animation-name: button-jump-up;
width: 145px;
text-align: center; text-align: center;
margin-bottom: 0px; margin-bottom: 0px;
margin-right: 0.5em;
position: absolute; position: absolute;
right: 0; right: 0;
top: -120%; // above parent container + some extra space bottom: 100%; // above parent container + some extra space
.btn { .btn {
margin: 0; margin: 0;
} }

View File

@ -27,10 +27,6 @@
} }
} }
.progress-back-container {
top: -100%; // above parent container + some extra space
}
.topic-error { .topic-error {
padding: 18px; padding: 18px;
width: 90%; width: 90%;