colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
30 lines (27 loc) • 646 B
text/stylus
// Avatar
//
// Use a square image.
//
// Avatar element use `em` so we can and should modify its font-size
// to manage the size of the element.
//
// Markup: avatar.twig
//
// Styleguide: Elements.avatar
.avatar
display inline-block
vertical-align middle
overflow hidden
width _em(42px)
height @width
border-radius 80em // excessive value to keep it round
background var(--color-borders)
border 1px solid var(--color-borders)
> img
> svg
display block
width 100%
height @width
fill var(--color-base)
> svg
margin-top .05em // fix position of svg symbol-user