equinox-web-components/dist/equinox/p-b0c868c6.entry.js

Equinox design for the web using StencilJS

import{r as t,h as a,H as e}from"./p-cc373a46.js";import{g as s}from"./p-94654f98.js";const i=class{constructor(a){t(this,a),this.size="md",this.color="#CBD5E0",this.classes=()=>({"e-avatar":!0,[this.size]:!0}),this.styles=()=>({backgroundColor:this.color})}render(){return a(e,null,a("div",{class:this.classes(),style:this.styles()},a("slot",null,s(this.text))))}};i.style=":host{display:block}.e-avatar{overflow:hidden;-webkit-transition:.3s ease;transition:.3s ease;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;color:var(--gray-600);height:42px;width:42px;font-size:16px;line-height:150%;border-radius:100px}.e-avatar.xs{height:24px;width:24px;font-size:12px}.e-avatar.lg{height:56px;width:56px;font-size:18px}.e-avatar.xl,.e-avatar.xxl{height:72px;width:72px;font-size:18px}.e-avatar:focus,.e-avatar:active{-webkit-box-shadow:0 0 0 3px var(--primary);box-shadow:0 0 0 3px var(--primary)}";export{i as e_avatar}