refactoring

This commit is contained in:
Nicolas Constant 2023-08-05 18:40:46 -04:00
parent 73ac37a8f4
commit 26a01b5c30
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 29 additions and 30 deletions

View File

@ -1,6 +1,6 @@
<div class="translation" *ngIf="isTranslationAvailable && showTranslationButton">
<a href class="translation__link" (click)="translate()">Translate</a>
<div class="translation translation__button-display" *ngIf="isTranslationAvailable && showTranslationButton">
<a href class="translation__link translation__button-display__link" (click)="translate()">Translate</a>
</div>
<div class="translation translation__display" *ngIf="isTranslationAvailable && !showTranslationButton">
<span class="translation__by">Translated by {{translatedBy}}</span> <a href (click)="revertTranslation()" class="translation__display__link">revert</a>
<span class="translation__by">Translated by {{translatedBy}}</span> <a href (click)="revertTranslation()" class="translation__link translation__display__link">revert</a>
</div>

View File

@ -1,44 +1,43 @@
@import "variables";
@import "commons";
$translation-color: #656b8f;
$translation-color-hover: #9fa5ca;
.translation {
margin: 0 10px 0 $avatar-column-space;
text-align: center;
color: $translation-color;
font-size: 12px;
&__button-display {
text-align: center;
&__link, &__by {
font-size: 12px;
color: #656b8f;
padding: 5px 5px 0 5px;
}
&__link {
transition: all .2s;
&:hover {
text-decoration: none;
color: #9fa5ca;
&__link {
padding: 5px 5px 0 5px;
}
}
&__by {
display: block;
text-align: left;
padding: 5px 0 0 0;
}
&__display {
display: flex;
justify-content: space-between;
&__link {
padding: 5px 0 0 0;
font-size: 12px;
color: #656b8f;
transition: all .2s;
&:hover {
text-decoration: none;
color: #9fa5ca;
}
padding: 5px 0 0 0;
}
}
&__link {
color: $translation-color;
transition: all .2s;
&:hover {
text-decoration: none;
color: $translation-color-hover;
}
}
&__by {
display: block;
text-align: left;
padding: 5px 0 0 0;
}
}