refactoring
This commit is contained in:
parent
73ac37a8f4
commit
26a01b5c30
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue