Gagan7900
136 lines
3.1 KiB
SCSS
136 lines
3.1 KiB
SCSS
/* Start Avatar Styles */
|
|
.avatar {
|
|
@apply relative h-[2.625rem] w-[2.625rem] inline-flex items-center justify-center rounded-md text-white font-medium mb-1;
|
|
|
|
a.badge:hover {
|
|
@apply text-white;
|
|
}
|
|
|
|
img {
|
|
@apply w-full h-full rounded-md;
|
|
}
|
|
|
|
.avatar-rounded{
|
|
@apply rounded-full!;
|
|
|
|
img {
|
|
@apply rounded-full!;
|
|
}
|
|
}
|
|
|
|
&.avatar-radius-0 {
|
|
@apply rounded-none;
|
|
|
|
img {
|
|
@apply rounded-none;
|
|
}
|
|
}
|
|
|
|
.avatar-badge {
|
|
@apply absolute! -top-[4%]! -end-[0.375rem]! w-[1.4rem]! h-[1.4rem]! text-[0.625rem]! border-2! border-solid! border-white! rounded-full! flex! items-center! justify-center!;
|
|
}
|
|
&.online,
|
|
&.offline {
|
|
@apply relative before:absolute before:w-[0.75rem] before:h-[0.75rem] before:rounded-full before:end-0 before:bottom-0 before:border-[2px] before:border-solid before:border-white before:dark:border-black;
|
|
}
|
|
|
|
&.online:before {
|
|
@apply bg-success;
|
|
}
|
|
|
|
&.offline:before {
|
|
@apply bg-gray-500;
|
|
}
|
|
|
|
&.avatar-xs {
|
|
@apply w-[1.25rem] h-[1.25rem] leading-[1.25rem] text-[0.65rem];
|
|
|
|
.avatar-badge {
|
|
@apply p-[0.25rem]! w-[1rem]! h-[1rem]! leading-[1rem]! text-[0.5rem]! -top-[25%]! -end-[0.5rem]!;
|
|
}
|
|
&.online,&.offline {
|
|
@apply before:w-[0.5rem] before:h-[0.5rem];
|
|
}
|
|
}
|
|
|
|
&.avatar-sm {
|
|
@apply w-[1.75rem] h-[1.75rem] leading-[1.75rem] text-[0.65rem];
|
|
|
|
.avatar-badge {
|
|
@apply p-[0.3rem]! w-[1.1rem]! h-[1.1rem]! leading-[1.1rem]! text-[0.5rem]! -top-[38%]! -end-[0.5rem]!;
|
|
}
|
|
|
|
&.online,
|
|
&.offline {
|
|
@apply before:w-[0.5rem] before:h-[0.5rem];
|
|
}
|
|
}
|
|
|
|
&.avatar-md {
|
|
@apply w-[2.5rem] h-[2.5rem] leading-[2.5rem] text-[0.8rem];
|
|
|
|
.avatar-badge {
|
|
@apply p-[0.4rem]! w-[1.2rem]! h-[1.2rem]! leading-[1.2rem]! text-[0.65rem]! -top-[6%]! -end-[13%]!;
|
|
}
|
|
|
|
&.online,
|
|
&.offline {
|
|
@apply before:w-[0.75rem] before:h-[0.75rem];
|
|
}
|
|
|
|
svg {
|
|
@apply w-[1.5rem] h-[1.5rem];
|
|
}
|
|
}
|
|
|
|
&.avatar-lg {
|
|
@apply w-[3rem] h-[3rem] leading-[3rem] text-[1rem];
|
|
|
|
.avatar-badge {
|
|
@apply -top-[15%] -end-[0.25%];
|
|
}
|
|
|
|
&.online,
|
|
&.offline {
|
|
@apply before:w-[0.8rem] before:h-[0.8rem];
|
|
}
|
|
|
|
svg {
|
|
@apply w-[1.8rem] h-[1.8rem];
|
|
}
|
|
}
|
|
|
|
&.avatar-xl {
|
|
@apply w-[4rem] h-[4rem] leading-[4rem] text-[1.25rem];
|
|
|
|
.avatar-badge {
|
|
@apply -top-[8%] -end-[0.2%];
|
|
}
|
|
|
|
&.online,
|
|
&.offline {
|
|
@apply before:w-[0.95rem] before:h-[0.95rem];
|
|
}
|
|
}
|
|
|
|
&.avatar-xxl {
|
|
@apply w-[5rem] h-[5rem] leading-[5rem] text-[1.5rem];
|
|
|
|
.avatar-badge {
|
|
@apply -top-[4%] -end-[0%];
|
|
}
|
|
|
|
&.online,
|
|
&.offline {
|
|
@apply before:w-[1.05rem] before:h-[1.05rem] bottom-1;
|
|
}
|
|
}
|
|
}
|
|
.avatar-rounded{
|
|
@apply rounded-full!;
|
|
|
|
img {
|
|
@apply rounded-full!;
|
|
}
|
|
}
|