You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
2.6 KiB
153 lines
2.6 KiB
// Avatar
|
|
.avatar {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
// Avatar Size
|
|
.avatar-xs {
|
|
width: $avatar-size-xs;
|
|
height: $avatar-size-xs;
|
|
}
|
|
|
|
.avatar-sm {
|
|
width: $avatar-size-sm;
|
|
height: $avatar-size-sm;
|
|
}
|
|
|
|
.avatar-md {
|
|
width: $avatar-size-md;
|
|
height: $avatar-size-md;
|
|
}
|
|
|
|
.avatar-lg {
|
|
width: $avatar-size-lg;
|
|
height: $avatar-size-lg;
|
|
}
|
|
|
|
.avatar-xl {
|
|
width: $avatar-size-xl;
|
|
height: $avatar-size-xl;
|
|
}
|
|
|
|
.avatar-xxl {
|
|
width: $avatar-size-xxl;
|
|
height: $avatar-size-xxl;
|
|
}
|
|
|
|
// Avatar img
|
|
.avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.avatar-indicators {
|
|
position: relative;
|
|
}
|
|
|
|
.avatar-indicators:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 5%;
|
|
width: 30%;
|
|
height: 30%;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--#{$prefix}white);
|
|
display: table;
|
|
}
|
|
|
|
.avatar-xxl.avatar-indicators:before {
|
|
bottom: 5px;
|
|
right: 17%;
|
|
width: 16%;
|
|
height: 16%;
|
|
}
|
|
|
|
// Avatar indicators
|
|
.avatar-offline:before {
|
|
background-color: var(--#{$prefix}gray-400);
|
|
}
|
|
|
|
.avatar-online:before {
|
|
background-color: $success;
|
|
}
|
|
|
|
.avatar-away:before {
|
|
background-color: $warning;
|
|
}
|
|
|
|
.avatar-busy:before {
|
|
background-color: $danger;
|
|
}
|
|
|
|
.avatar-info:before {
|
|
background-color: $info;
|
|
}
|
|
|
|
// Avatar intials
|
|
.avatar-initials {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
// Color varient
|
|
.avatar-primary .avatar-initials {
|
|
color: var(--#{$prefix}white);
|
|
background-color: $primary;
|
|
}
|
|
.avatar-secondary .avatar-initials {
|
|
color: var(--#{$prefix}white);
|
|
background-color: $secondary;
|
|
}
|
|
.avatar-success .avatar-initials {
|
|
color: var(--#{$prefix}white);
|
|
background-color: $success;
|
|
}
|
|
.avatar-warning .avatar-initials {
|
|
color: var(--#{$prefix}white);
|
|
background-color: $warning;
|
|
}
|
|
.avatar-info .avatar-initials {
|
|
color: var(--#{$prefix}white);
|
|
background-color: $info;
|
|
}
|
|
.avatar-danger .avatar-initials {
|
|
color: var(--#{$prefix}white);
|
|
background-color: $danger;
|
|
}
|
|
.avatar-light .avatar-initials {
|
|
color: var(--#{$prefix}white);
|
|
background-color: $light;
|
|
}
|
|
.avatar-dark .avatar-initials {
|
|
color: var(--#{$prefix}white);
|
|
background-color: $dark;
|
|
}
|
|
|
|
// Avatar Group
|
|
.avatar-group .avatar + .avatar {
|
|
margin-left: -1.2rem;
|
|
}
|
|
|
|
.avatar-group .avatar:hover {
|
|
z-index: 2;
|
|
}
|
|
|
|
// Avatar border
|
|
.avatar-group img,
|
|
.avatar-group .avatar .avatar-initials {
|
|
border: 2px solid var(--#{$prefix}white);
|
|
}
|
|
|