src/app/components/soc-bar/soc-bar.component.ts
Socilal networks bar component
| selector | app-soc-bar |
| styleUrls | ./soc-bar.component.scss |
| templateUrl | ./soc-bar.component.html |
Properties |
|
Methods |
|
Inputs |
Accessors |
constructor(uiService: UiService)
|
||||||||
|
Constructs the Socilal networks bar component.
Parameters :
|
| barTypeCorporate |
Type : boolean
|
Default value : false
|
|
The bar type. |
| Public cleanProtocol | ||||||
cleanProtocol(urlString: string)
|
||||||
|
Simple url protocol cleaner.
Parameters :
Returns :
string
The cleaned url. |
| Public linkLabel | ||||||||
linkLabel(key: string | undefined)
|
||||||||
|
Names an aria-label link.
Parameters :
Returns :
string
The aria-label link name. |
| Public Readonly uiService |
Type : UiService
|
|
The ui service injected dependency.
|
| socBar |
getsocBar()
|
|
Socilal networks bar data |
| corporateBar |
getcorporateBar()
|
|
Corporate bar data |
./soc-bar.component.scss
@use "sass:color";
@use "../property/property.component.scss";
$margin: 2px;
$padding: 5px;
.fa,
.fab,
.far,
.fas {
color: honeydew;
margin: $margin;
padding: $padding;
font-size: 30px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 25%;
box-shadow: 0px 3px 10px rgba(0, 0, 0, .25);
&:hover {
opacity: 0.7;
box-shadow: none;
}
}
.fa-address-card {
background: #20D060;
padding: 7px 8px 7px 6px;
font-size: 26px;
}
.fa-phone {
background: #2f4859;
}
.fa-envelope {
background: #e04c40;
}
.fa-linkedin {
background: #0077B5;
}
.fa-twitter {
background: #00aced;
}
.fa-facebook {
background: #3B5998;
}
.fa-instagram {
background: #cd486b;
$pastelisation: 10%;
$r: color.adjust(color.adjust(red, $lightness: $pastelisation), $saturation: -$pastelisation);
$y: color.adjust(color.adjust(yellow, $lightness: $pastelisation), $saturation: -$pastelisation);
$b: color.adjust(color.adjust(blue, $lightness: $pastelisation), $saturation: -$pastelisation);
$m: color.adjust(color.adjust(magenta, $lightness: $pastelisation), $saturation: -$pastelisation);
background: linear-gradient(165deg, $b, transparent 50%), linear-gradient(180deg, $m, transparent), linear-gradient(-90deg, $r, transparent), linear-gradient(0deg, $y, transparent);
&:hover {
background: transparent;
}
& {
padding: 3px;
font-size: 34px;
}
}
.fa-user-tie {
background: #2f3f3f;
}
.fa-house-user {
background: #2f3f3f;
}
.content {
display: none;
}
@media print {
.content {
margin: $margin;
padding: $padding;
display: inline;
}
.list {
flex-direction: column;
}
}