@roadtrip/css/styles/components/_avatar.css

CSS framework for Roadtrip Design System

/*
 * Avatar
 *
 * Index
 * - Avatar
 *
 */


/* AVATAR
 -------------------- */

.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-weight: 700;
  color: var(--road-grey-100-new);
  background-color: var(--road-primary);
  border-radius: 3rem;
  transition: box-shadow 0.5s;
}

.avatar:hover,
.avatar.focus-visible,
.avatar:focus{
  box-shadow: 0 0 0 4px var(--road-primary-80);
}

.avatar svg {
  fill: var(--road-icon-inverse);
}

/* SIZE
   -------------------- */

.avatar.avatar-sm {
  width: 2.625rem;
  height: 2.625rem;
  font-size: 1.25rem;
}

.avatar.avatar-md {
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--road-font-size-32);
}

.avatar.avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: 2.375rem;
}

/* IMAGE
   -------------------- */

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 3rem;
}