beta-parity-react
Version:
Beta Parity React Components
1 lines • 3.88 kB
CSS
.avatar-wrapper{background-color:inherit;border-radius:9999px;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content;z-index:0}.avatar-border{height:calc(100% + 4px);width:calc(100% + 4px)}.avatar-border,.avatar-border:after{background-color:var(--par-color-border-avatar);border-radius:9999px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:-1}.avatar-border:after{content:"";height:calc(100% - 4px);width:calc(100% - 4px)}.avatar-frame{background-color:inherit;border-radius:9999px;padding:var(--avatar-frame-gap,0)}.avatar{align-items:center;background-color:var(--par-color-bg-avatar);border:none;border-radius:9999px;display:flex;justify-content:center;overflow:hidden;position:relative}.avatar,.avatar-img{height:100%;width:100%}.avatar-img{-o-object-fit:cover;object-fit:cover}.avatar-initials{color:var(--par-color-text-avatar);font-weight:500}.avatar-placeholder{align-items:center;color:var(--par-color-text-avatar);display:flex;height:.66667;justify-content:center;width:.66667}.avatar.disabled{background-color:var(--par-color-bg-avatar-disabled);border-color:var(--par-avatar-status-color);color:var(--par-color-text-avatar-disabled);cursor:not-allowed}.avatar-border.disabled{background-color:var(--par-avatar-status-color);cursor:not-allowed}.avatar.disabled .avatar-img{opacity:.5}@keyframes pulse{50%{opacity:.5}}.avatar-border.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.avatar-border.border-alternative{background-color:var(--par-color-border-avatar-alternative)}.avatar-border.border-none{background-color:unset}.avatar-border.status-border{background-color:var(--par-avatar-status-color)}.avatar-frame.xxs{height:1.125rem;width:1.125rem}.avatar-frame.xxs .avatar-initials{font-size:.6875rem}.avatar-frame.xs{height:1.25rem;width:1.25rem}.avatar-frame.xs .avatar-initials{font-size:.75rem}.avatar-frame.sm{height:1.5rem;width:1.5rem}.avatar-frame.sm .avatar-initials{font-size:.875rem}.avatar-frame.md{height:1.75rem;width:1.75rem}.avatar-frame.md .avatar-initials{font-size:1rem}.avatar-frame.lg{height:2rem;width:2rem}.avatar-frame.lg .avatar-initials{font-size:1rem}.avatar-frame.xl{height:2.25rem;width:2.25rem}.avatar-frame.xl .avatar-initials{font-size:1rem}.avatar-dot-wrapper{background-color:inherit;border-radius:9999px;bottom:0;height:-moz-fit-content;height:fit-content;position:absolute;right:0;transform:translateX(-1px) translateY(-1px);width:-moz-fit-content;width:fit-content}.avatar-dot-border,.avatar-dot-frame{border-radius:9999px;height:calc(100% + 2px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + 2px)}.avatar-dot-border{background-color:var(--par-color-border-avatar)}.avatar-dot-border.border-alternative{background-color:var(--par-color-border-avatar-alternative)}.avatar-dot-frame{background-color:inherit}.avatar-trigger-button{border-radius:9999px}.avatar-trigger{background-color:var(--par-color-bg-avatar-trigger);cursor:pointer;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.avatar-trigger:hover{opacity:.8}.avatar-trigger.disabled:hover{opacity:1}.avatar-trigger.active{box-shadow:0 0 0 2px var(--par-color-bg-avatar),0 0 0 4px var(--par-color-bg-avatar)}.avatar-group{display:flex}.avatar-group.direction-row{flex-direction:row}.avatar-group.direction-column{flex-direction:column}.avatar-group.direction-row .avatar-group-item:not(:first-child){margin-left:var(--avatar-group-spacing)}.avatar-group.direction-column .avatar-group-item:not(:first-child){margin-top:var(--avatar-group-spacing)}.avatar-group-overflow{align-items:center;background-color:var(--par-color-bg-avatar);display:flex;justify-content:center}.avatar-overflow-text{color:var(--par-color-text-avatar);font-size:.875rem;font-weight:500}