|
|
|
@ -39,17 +39,37 @@
|
|
|
|
|
#handle
|
|
|
|
|
font-size: 14px
|
|
|
|
|
|
|
|
|
|
#icon
|
|
|
|
|
display: none
|
|
|
|
|
position: absolute
|
|
|
|
|
z-index: 11
|
|
|
|
|
color: white
|
|
|
|
|
|
|
|
|
|
$mat-card-header-size: 100px !default
|
|
|
|
|
.hover-box
|
|
|
|
|
cursor: pointer
|
|
|
|
|
text-align: center
|
|
|
|
|
display: flex
|
|
|
|
|
justify-content: center
|
|
|
|
|
align-items: center
|
|
|
|
|
.profile-picture
|
|
|
|
|
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
|
|
|
|
|
height: $mat-card-header-size
|
|
|
|
|
width: $mat-card-header-size
|
|
|
|
|
border-radius: 50%
|
|
|
|
|
flex-shrink: 0
|
|
|
|
|
background-size: cover
|
|
|
|
|
transition-duration: 0.5s
|
|
|
|
|
z-index: 10
|
|
|
|
|
object-fit: cover
|
|
|
|
|
&:hover
|
|
|
|
|
.profile-picture
|
|
|
|
|
filter: brightness(70%)
|
|
|
|
|
#icon
|
|
|
|
|
display: block
|
|
|
|
|
filter: none
|
|
|
|
|
// Makes `<img>` tags behave like `background-size: cover`. Not supported
|
|
|
|
|
// in IE, but we're using it as a progressive enhancement.
|
|
|
|
|
object-fit: cover
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|