81 lines
1.3 KiB
SCSS
81 lines
1.3 KiB
SCSS
.social-link {
|
|
display: inline-block;
|
|
height: 29px;
|
|
width: 29px;
|
|
border-radius: 32px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
@include laptop {
|
|
height: 23px;
|
|
width: 23px;
|
|
}
|
|
|
|
&--whatsapp {
|
|
background-image: url(../img/icons/whatsapp.svg);
|
|
background-color: #2aa81a;
|
|
|
|
&:active {
|
|
background-color: #42d030;
|
|
}
|
|
}
|
|
|
|
&--tg {
|
|
background-image: url(../img/icons/telegram.svg);
|
|
background-color: #178ec9;
|
|
|
|
&:active {
|
|
background-color: #45b3ea;
|
|
}
|
|
}
|
|
|
|
&--youtube {
|
|
background-image: url(../img/icons/whatsapp.svg);
|
|
background-color: #ff0000;
|
|
|
|
&:active {
|
|
background-color: #da0000;
|
|
}
|
|
}
|
|
|
|
&--vk {
|
|
background-image: url(../img/icons/telegram.svg);
|
|
background-color: #0077ff;
|
|
|
|
&:active {
|
|
background-color: #0067dd;
|
|
}
|
|
}
|
|
|
|
&--phone {
|
|
width: auto;
|
|
height: auto;
|
|
font-weight: 600;
|
|
font-size: 24px;
|
|
color: $black;
|
|
|
|
@include desktop {
|
|
font-size: 20px;
|
|
}
|
|
|
|
@include laptop {
|
|
background-color: $blue;
|
|
background-image: url(../img/icons/phone.svg);
|
|
height: 23px;
|
|
width: 23px;
|
|
}
|
|
|
|
&:active {
|
|
@include laptop {
|
|
background-color: $darkblue;
|
|
}
|
|
}
|
|
|
|
& > * {
|
|
@include laptop {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|