cirrus-ui/src/components/avatar.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

/* Avatar */
@if should-generate-classes($AVATAR) {
    .avatar {
        border-radius: 50%;
        position: relative;
        display: block;
        margin: auto;
        font-size: 1.5rem;
        font-weight: lighter;
        width: 3.2rem;
        height: 3.2rem;
        background-color: fill('primary');
        overflow: hidden;

        /* Draw text on image just like in Gmail */
        &::before {
            content: attr(data-text);
            color: currentColor;
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
        }

        &:has(img) {
            background-color: transparent;
        }

        @each $size, $property-map in $avatar-sizes {
            &.avatar--#{$size} {
                @include explode-properties($property-map);
            }
        }

        img.padded {
            padding: 0.5rem;
            width: 100%;
        }
    }
}