app/sitesearch/all-tab/keymatch-document/keymatch-document.component.ts
selector | keymatch-document |
styleUrls | keymatch-document.component.scss |
templateUrl | keymatch-document.component.html |
Methods |
Inputs |
constructor()
|
keymatch | |
Alternative documents include 'final variant', 'obsolete products' etc. |
ngOnInit |
ngOnInit()
|
Returns :
void
|
import { Component, OnInit, Input } from '@angular/core';
@Component ({
selector: 'keymatch-document',
templateUrl: 'keymatch-document.component.html',
styleUrls: ['keymatch-document.component.scss']
})
export class KeymatchDocumentComponent implements OnInit {
/** Alternative documents include 'final variant', 'obsolete products' etc. */
@Input() keymatch;
constructor(
) {}
ngOnInit() {
}
}
<div class="keymatch-document">
<div class="info">
<i class="fas fa-info-circle" aria-hidden="true"></i>
</div>
<div>
<a href="{{keymatch.url}}" class="title">
<span>{{ keymatch.title }}</span>
</a>
<div class="desc">
{{ keymatch.text }}
</div>
</div>
</div>
keymatch-document.component.scss
@import "src/app/styles/helpers";
.keymatch-document {
display: flex;
flex-direction: row;
margin-bottom: 30px;
@media(max-width: 575px) {
.title { @include font-size(15); }
.desc { @include font-size(13); }
}
@media(min-width: 576px) {
.title { @include font-size(17); }
.desc { @include font-size(15); }
}
.info {
display: flex;
align-items: center;
margin-right: 10px;
@include font-size(20);
color: $blue;
}
.title {
text-decoration: none;
font-weight: 600;
}
.desc {
}
}